feat:标识编辑器构件

4 years ago · 944afbe0ec
parent b532c94438
commit 944afbe0ec
5 changed files with 36 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/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'`