feat:标识编辑器构件

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()
+  }
+
+}

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

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()
   }
 

src/editor/dataset/constant/Editor.ts

@@ -0,0 +1 @@
+export const EDITOR_COMPONENT = 'editor-component'

src/editor/dataset/enum/Editor.ts

@@ -0,0 +1,4 @@
+export enum EditorComponent {
+  MENU = 'menu',
+  MAIN = 'main'
+}

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
 }