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

feat: clear side effect in web component #219

Browse Source
This commit is contained in:
Hufe921
2023-07-26 21:01:28 +08:00
parent 166ff7f3f9
commit ce70f0d7e8
1 changed files with 16 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/editor/core/event/GlobalEvent.ts
+16 -13
View File
@@ -13,7 +13,6 @@ import { CanvasEvent } from './CanvasEvent'
export class GlobalEvent { export class GlobalEvent {
private draw: Draw private draw: Draw
private canvas: HTMLCanvasElement
private options: Required<IEditorOption> private options: Required<IEditorOption>
private cursor: Cursor | null private cursor: Cursor | null
private canvasEvent: CanvasEvent private canvasEvent: CanvasEvent
@@ -27,7 +26,6 @@ export class GlobalEvent {
constructor(draw: Draw, canvasEvent: CanvasEvent) { constructor(draw: Draw, canvasEvent: CanvasEvent) {
this.draw = draw this.draw = draw
this.canvas = draw.getPage()
this.options = draw.getOptions() this.options = draw.getOptions()
this.canvasEvent = canvasEvent this.canvasEvent = canvasEvent
this.cursor = null this.cursor = null
@@ -48,9 +46,9 @@ export class GlobalEvent {
} }
private addEvent() { private addEvent() {
window.addEventListener('blur', this.recoverEffect) window.addEventListener('blur', this.clearSideEffect)
document.addEventListener('keyup', this.setRangeStyle) document.addEventListener('keyup', this.setRangeStyle)
document.addEventListener('click', this.recoverEffect) document.addEventListener('click', this.clearSideEffect)
document.addEventListener('mouseup', this.setCanvasEventAbility) document.addEventListener('mouseup', this.setCanvasEventAbility)
document.addEventListener('wheel', this.setPageScale, { passive: false }) document.addEventListener('wheel', this.setPageScale, { passive: false })
document.addEventListener('visibilitychange', this._handleVisibilityChange) document.addEventListener('visibilitychange', this._handleVisibilityChange)
@@ -58,9 +56,9 @@ export class GlobalEvent {
} }
public removeEvent() { public removeEvent() {
window.removeEventListener('blur', this.recoverEffect) window.removeEventListener('blur', this.clearSideEffect)
document.removeEventListener('keyup', this.setRangeStyle) document.removeEventListener('keyup', this.setRangeStyle)
document.removeEventListener('click', this.recoverEffect) document.removeEventListener('click', this.clearSideEffect)
document.removeEventListener('mouseup', this.setCanvasEventAbility) document.removeEventListener('mouseup', this.setCanvasEventAbility)
document.removeEventListener('wheel', this.setPageScale) document.removeEventListener('wheel', this.setPageScale)
document.removeEventListener( document.removeEventListener(
@@ -70,18 +68,23 @@ export class GlobalEvent {
this.dprMediaQueryList.removeEventListener('change', this._handleDprChange) this.dprMediaQueryList.removeEventListener('change', this._handleDprChange)
} }
public recoverEffect = (evt: Event) => { public clearSideEffect = (evt: Event) => {
if (!this.cursor) return if (!this.cursor) return
const cursorDom = this.cursor.getCursorDom() // 编辑器内部dom
const agentDom = this.cursor.getAgentDom() const target = <Element>(evt?.composedPath()[0] || evt.target)
const innerDoms = [this.canvas, cursorDom, agentDom, document.body] const pageList = this.draw.getPageList()
if (innerDoms.includes(evt.target as any)) { const innerEditorDom = findParent(
target,
(node: any) => pageList.includes(node),
true
)
if (innerEditorDom) {
this.setRangeStyle() this.setRangeStyle()
return return
} }
// 编辑器外部dom // 编辑器外部组件dom
const outerEditorDom = findParent( const outerEditorDom = findParent(
evt.target as Element, target,
(node: Node & Element) => (node: Node & Element) =>
!!node && node.nodeType === 1 && !!node.getAttribute(EDITOR_COMPONENT), !!node && node.nodeType === 1 && !!node.getAttribute(EDITOR_COMPONENT),
true true