From 9462ba06fb486bd4b414b486fbcf32cc58c1d1c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E4=BA=91=E9=A3=9E?= Date: Mon, 15 Nov 2021 19:45:24 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E6=A0=87=E8=AF=86=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E5=99=A8=E6=9E=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 4 ++-- src/editor/core/draw/Background.ts | 17 +++++++++++++++++ src/editor/core/draw/Draw.ts | 9 +++++++++ src/editor/core/event/GlobalEvent.ts | 11 ++++++++++- src/editor/dataset/constant/Editor.ts | 1 + src/editor/dataset/enum/Editor.ts | 4 ++++ src/editor/utils/index.ts | 19 +++++++++++++++++++ 7 files changed, 62 insertions(+), 3 deletions(-) create mode 100644 src/editor/core/draw/Background.ts create mode 100644 src/editor/dataset/constant/Editor.ts create mode 100644 src/editor/dataset/enum/Editor.ts diff --git a/index.html b/index.html index d1acbbb..dd4fde4 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@
-
+
@@ -64,7 +64,7 @@
-
+
diff --git a/src/editor/core/draw/Background.ts b/src/editor/core/draw/Background.ts new file mode 100644 index 0000000..7d86497 --- /dev/null +++ b/src/editor/core/draw/Background.ts @@ -0,0 +1,17 @@ +export class Background { + + private ctx: CanvasRenderingContext2D + + constructor(ctx: CanvasRenderingContext2D) { + this.ctx = ctx + } + + render(canvasRect: DOMRect) { + const { width, height } = canvasRect + this.ctx.save() + this.ctx.fillStyle = '#ffffff' + this.ctx.fillRect(0, 0, width, height) + this.ctx.restore() + } + +} \ No newline at end of file diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 17a534c..ebd0cd5 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -10,6 +10,7 @@ import { GlobalEvent } from "../event/GlobalEvent" import { HistoryManager } from "../history/HistoryManager" import { Position } from "../position/Position" import { RangeManager } from "../range/RangeManager" +import { Background } from "./Background" import { Margin } from "./Margin" export class Draw { @@ -23,6 +24,7 @@ export class Draw { private cursor: Cursor private range: RangeManager private margin: Margin + private background: Background private historyManager: HistoryManager private rowCount: number @@ -37,6 +39,7 @@ export class Draw { this.position = new Position(this) this.range = new RangeManager(ctx, options) this.margin = new Margin(ctx, options) + this.background = new Background(ctx) const canvasEvent = new CanvasEvent(canvas, this) this.cursor = new Cursor(canvas, this, canvasEvent) @@ -71,6 +74,10 @@ export class Draw { return this.rowCount } + public getDataURL(): string { + return this.canvas.toDataURL() + } + public render(payload?: IDrawOption) { let { curIndex, isSubmitHistory = true, isSetCursor = true } = payload || {} // 清除光标 @@ -81,6 +88,8 @@ export class Draw { // 基础信息 const { defaultSize, defaultFont } = this.options const canvasRect = this.canvas.getBoundingClientRect() + // 绘制背景 + this.background.render(canvasRect) // 绘制页边距 const { width } = canvasRect const { margins } = this.options diff --git a/src/editor/core/event/GlobalEvent.ts b/src/editor/core/event/GlobalEvent.ts index a9e9276..9a24bc3 100644 --- a/src/editor/core/event/GlobalEvent.ts +++ b/src/editor/core/event/GlobalEvent.ts @@ -1,3 +1,5 @@ +import { EDITOR_COMPONENT } from "../../dataset/constant/Editor" +import { findParent } from "../../utils" import { Cursor } from "../cursor/Cursor" import { Draw } from "../draw/Draw" import { CanvasEvent } from "./CanvasEvent" @@ -32,8 +34,15 @@ export class GlobalEvent { if (!this.cursor) return const cursorDom = this.cursor.getCursorDom() const agentDom = this.cursor.getAgentDom() - const innerDoms = [this.canvas, cursorDom, agentDom, this.canvas.parentNode, document.body] + const innerDoms = [this.canvas, cursorDom, agentDom, document.body] if (innerDoms.includes(evt.target as any)) return + // 编辑器外部dom + const outerEditorDom = findParent( + evt.target as Element, + (node: Node & Element) => !!node && node.nodeType === 1 && !!node.getAttribute(EDITOR_COMPONENT), + true + ) + if (outerEditorDom) return this.cursor.recoveryCursor() } diff --git a/src/editor/dataset/constant/Editor.ts b/src/editor/dataset/constant/Editor.ts new file mode 100644 index 0000000..2d36111 --- /dev/null +++ b/src/editor/dataset/constant/Editor.ts @@ -0,0 +1 @@ +export const EDITOR_COMPONENT = 'editor-component' diff --git a/src/editor/dataset/enum/Editor.ts b/src/editor/dataset/enum/Editor.ts new file mode 100644 index 0000000..36a7d0e --- /dev/null +++ b/src/editor/dataset/enum/Editor.ts @@ -0,0 +1,4 @@ +export enum EditorComponent { + MENU = 'menu', + MAIN = 'main' +} \ No newline at end of file diff --git a/src/editor/utils/index.ts b/src/editor/utils/index.ts index 03d4c33..628760f 100644 --- a/src/editor/utils/index.ts +++ b/src/editor/utils/index.ts @@ -29,4 +29,23 @@ export function deepClone(obj: any) { }) } return newObj +} + +export function isBody(node: Element): boolean { + return node && node.nodeType === 1 && node.tagName.toLowerCase() === 'body' +} + +export function findParent(node: Element, filterFn: Function, includeSelf: boolean) { + if (node && !isBody(node)) { + node = includeSelf ? node : node.parentNode as Element + while (node) { + if (!filterFn || filterFn(node) || isBody(node)) { + return filterFn && !filterFn(node) && isBody(node) + ? null + : node + } + node = node.parentNode as Element + } + } + return null } \ No newline at end of file