feat:标识编辑器构件

4 years ago · 9462ba06fb
parent b532c94438
commit 9462ba06fb
7 changed files with 62 additions and 3 deletions
--- a/index.html
+++ b/index.html
@ -10,7 +10,7 @@

 <body>
  <div id="app">
-    <div class="menu">
+    <div class="menu" editor-component="menu">
      <div class="menu-item">
        <div class="menu-item__undo">
          <i></i>
@ -64,7 +64,7 @@
        </div>
      </div>
    </div>
-    <div class="editor">
+    <div class="editor" editor-component="main">
      <canvas style="width: 794px;height: 1123px;"></canvas>
    </div>
  </div>
--- a/src/editor/core/draw/Background.ts
+++ 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()
+  }
+
+}
--- 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
--- 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()
  }

--- a/src/editor/dataset/constant/Editor.ts
+++ b/src/editor/dataset/constant/Editor.ts
@ -0,0 +1 @@
+export const EDITOR_COMPONENT = 'editor-component'
--- a/src/editor/dataset/enum/Editor.ts
+++ b/src/editor/dataset/enum/Editor.ts
@ -0,0 +1,4 @@
+export enum EditorComponent {
+  MENU = 'menu',
+  MAIN = 'main'
+}
--- 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
 }
				`@ -0,0 +1 @@`
				`export const EDITOR_COMPONENT = 'editor-component'`