feat: override method with default interception behavior #663

docs/en/guide/override.md

@@ -6,7 +6,14 @@
 import Editor from "@hufe921/canvas-editor"
 
 const instance = new Editor(container, <IElement[]>data, options)
-instance.override.overrideFunction = ()=>{}
+
+instance.override.overrideFunction = () => void | Promise<void> | IOverrideResult | Promise<IOverrideResult>
+```
+
+```typescript
+interface IOverrideResult {
+  preventDefault?: boolean // Prevent the execution of internal default method. Default prevent
+}
 ```
 
 ## paste
@@ -16,7 +23,7 @@ Feature: Override internal paste function
 Usage:
 
 ```javascript
-instance.override.paste = (evt?: ClipboardEvent) => void
+instance.override.paste = (evt?: ClipboardEvent) => void | Promise<void> | IOverrideResult | Promise<IOverrideResult>
 ```
 
 ## copy
@@ -26,7 +33,7 @@ Feature: Override internal copy function
 Usage:
 
 ```javascript
-instance.override.copy = () => void
+instance.override.copy = () => void | Promise<void> | IOverrideResult | Promise<IOverrideResult>
 ```
 
 ## drop
@@ -36,5 +43,5 @@ Feature: Override internal drop function
 Usage:
 
 ```javascript
-instance.override.drop = (evt: DragEvent) => void
+instance.override.drop = (evt: DragEvent) => void | Promise<void> | IOverrideResult | Promise<IOverrideResult>
 ```

docs/guide/override.md

@@ -6,7 +6,14 @@
 import Editor from "@hufe921/canvas-editor"
 
 const instance = new Editor(container, <IElement[]>data, options)
-instance.override.overrideFunction = ()=>{}
+
+instance.override.overrideFunction = () => void | Promise<void> | IOverrideResult | Promise<IOverrideResult>
+```
+
+```typescript
+interface IOverrideResult {
+  preventDefault?: boolean // 阻止执行内部默认方法。默认阻止
+}
 ```
 
 ## paste
@@ -16,7 +23,7 @@ instance.override.overrideFunction = ()=>{}
 用法：
 
 ```javascript
-instance.override.paste = (evt?: ClipboardEvent) => void
+instance.override.paste = (evt?: ClipboardEvent) => void | Promise<void> | IOverrideResult | Promise<IOverrideResult>
 ```
 
 ## copy
@@ -26,7 +33,7 @@ instance.override.paste = (evt?: ClipboardEvent) => void
 用法：
 
 ```javascript
-instance.override.copy = () => void
+instance.override.copy = () => void | Promise<void> | IOverrideResult | Promise<IOverrideResult>
 ```
 
 ## drop
@@ -36,5 +43,5 @@ instance.override.copy = () => void
 用法：
 
 ```javascript
-instance.override.drop = (evt: DragEvent) => void
+instance.override.drop = (evt: DragEvent) => void | Promise<void> | IOverrideResult | Promise<IOverrideResult>
 ```

src/editor/core/event/handlers/copy.ts

@@ -1,17 +1,20 @@
 import { ElementType } from '../../../dataset/enum/Element'
 import { IElement } from '../../../interface/Element'
 import { ITr } from '../../../interface/table/Tr'
+import { isPromiseFunction } from '../../../utils'
 import { writeElementList } from '../../../utils/clipboard'
 import { zipElementList } from '../../../utils/element'
+import { IOverrideResult } from '../../override/Override'
 import { CanvasEvent } from '../CanvasEvent'
 
-export function copy(host: CanvasEvent) {
+export async function copy(host: CanvasEvent) {
   const draw = host.getDraw()
   // 自定义粘贴事件
   const { copy } = draw.getOverride()
   if (copy) {
-    copy()
-    return
+    const overrideResult = isPromiseFunction(copy) ? await copy() : copy()
+    // 默认阻止默认事件
+    if ((<IOverrideResult>overrideResult)?.preventDefault !== false) return
   }
   const rangeManager = draw.getRange()
   // 光标闭合时复制整行

src/editor/core/event/handlers/drop.ts

@@ -1,13 +1,16 @@
+import { isPromiseFunction } from '../../../utils'
+import { IOverrideResult } from '../../override/Override'
 import { CanvasEvent } from '../CanvasEvent'
 import { pasteImage } from './paste'
 
-export function drop(evt: DragEvent, host: CanvasEvent) {
+export async function drop(evt: DragEvent, host: CanvasEvent) {
   const draw = host.getDraw()
   // 自定义拖放事件
   const { drop } = draw.getOverride()
   if (drop) {
-    drop(evt)
-    return
+    const overrideResult = isPromiseFunction(drop) ? await drop(evt) : drop(evt)
+    // 默认阻止默认事件
+    if ((<IOverrideResult>overrideResult)?.preventDefault !== false) return
   }
   evt.preventDefault()
   const data = evt.dataTransfer?.getData('text')

src/editor/core/event/handlers/paste.ts

@@ -13,6 +13,8 @@ import {
   getElementListByHTML
 } from '../../../utils/element'
 import { CanvasEvent } from '../CanvasEvent'
+import { isPromiseFunction } from '../../../utils'
+import { IOverrideResult } from '../../override/Override'
 
 export function pasteElement(host: CanvasEvent, elementList: IElement[]) {
   const draw = host.getDraw()
@@ -96,7 +98,7 @@ export function pasteImage(host: CanvasEvent, file: File | Blob) {
   }
 }
 
-export function pasteByEvent(host: CanvasEvent, evt: ClipboardEvent) {
+export async function pasteByEvent(host: CanvasEvent, evt: ClipboardEvent) {
   const draw = host.getDraw()
   const isReadonly = draw.isReadonly()
   if (isReadonly) return
@@ -105,8 +107,11 @@ export function pasteByEvent(host: CanvasEvent, evt: ClipboardEvent) {
   // 自定义粘贴事件
   const { paste } = draw.getOverride()
   if (paste) {
-    paste(evt)
-    return
+    const overrideResult = isPromiseFunction(paste)
+      ? await paste(evt)
+      : paste(evt)
+    // 默认阻止默认事件
+    if ((<IOverrideResult>overrideResult)?.preventDefault !== false) return
   }
   // 优先读取编辑器内部粘贴板数据（粘贴板不包含文件时）
   if (!getIsClipboardContainFile(clipboardData)) {
@@ -160,8 +165,9 @@ export async function pasteByApi(host: CanvasEvent, options?: IPasteOption) {
   // 自定义粘贴事件
   const { paste } = draw.getOverride()
   if (paste) {
-    paste()
-    return
+    const overrideResult = isPromiseFunction(paste) ? await paste() : paste()
+    // 默认阻止默认事件
+    if ((<IOverrideResult>overrideResult)?.preventDefault !== false) return
   }
   // 优先读取编辑器内部粘贴板数据
   const clipboardText = await navigator.clipboard.readText()

src/editor/core/override/Override.ts

@@ -1,5 +1,19 @@
+export interface IOverrideResult {
+  preventDefault?: boolean
+}
+
 export class Override {
-  public paste: ((evt?: ClipboardEvent) => void) | undefined
-  public copy: (() => void) | undefined
-  public drop: ((evt: DragEvent) => void) | undefined
+  public paste:
+    | ((
+        evt?: ClipboardEvent
+      ) => void | Promise<void> | IOverrideResult | Promise<IOverrideResult>)
+    | undefined
+  public copy:
+    | (() => void | Promise<void> | IOverrideResult | Promise<IOverrideResult>)
+    | undefined
+  public drop:
+    | ((
+        evt: DragEvent
+      ) => void | Promise<void> | IOverrideResult | Promise<IOverrideResult>)
+    | undefined
 }

src/editor/utils/index.ts

@@ -326,3 +326,7 @@ export function isObjectEqual(obj1: unknown, obj2: unknown): boolean {
   }
   return !obj1Keys.some(key => obj2[key] !== obj1[key])
 }
+
+export function isPromiseFunction(fn: Function): boolean {
+  return fn?.constructor?.name === 'AsyncFunction'
+}