lsadmin/canvas-editor_fex765
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat:标识编辑器构件

Browse Source
This commit is contained in:
黄云飞
2021-11-14 12:39:08 +08:00
parent b532c94438
commit 944afbe0ec
5 changed files with 36 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+2 -2
View File
@@ -10,7 +10,7 @@
<body> <body>
<div id="app"> <div id="app">
<div class="menu"> <div class="menu" editor-component="menu">
<div class="menu-item"> <div class="menu-item">
<div class="menu-item__undo"> <div class="menu-item__undo">
<i></i> <i></i>
@@ -64,7 +64,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="editor"> <div class="editor" editor-component="main">
<canvas style="width: 794px;height: 1123px;"></canvas> <canvas style="width: 794px;height: 1123px;"></canvas>
</div> </div>
</div> </div>
src/editor/core/event/GlobalEvent.ts
+10 -1
View File
@@ -1,3 +1,5 @@
import { EDITOR_COMPONENT } from "../../dataset/constant/Editor"
import { findParent } from "../../utils"
import { Cursor } from "../cursor/Cursor" import { Cursor } from "../cursor/Cursor"
import { Draw } from "../draw/Draw" import { Draw } from "../draw/Draw"
import { CanvasEvent } from "./CanvasEvent" import { CanvasEvent } from "./CanvasEvent"
@@ -32,8 +34,15 @@ export class GlobalEvent {
if (!this.cursor) return if (!this.cursor) return
const cursorDom = this.cursor.getCursorDom() const cursorDom = this.cursor.getCursorDom()
const agentDom = this.cursor.getAgentDom() 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 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() this.cursor.recoveryCursor()
} }
src/editor/dataset/constant/Editor.ts
+1
View File
@@ -0,0 +1 @@
export const EDITOR_COMPONENT = 'editor-component'
src/editor/dataset/enum/Editor.ts
+4
View File
@@ -0,0 +1,4 @@
export enum EditorComponent {
MENU = 'menu',
MAIN = 'main'
}
src/editor/utils/index.ts
+19
View File
@@ -30,3 +30,22 @@ export function deepClone(obj: any) {
} }
return newObj 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
}