From 9a4b4f9a4a70a344740212507e250d9bdea5dd32 Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Thu, 27 Jun 2024 21:31:59 +0800 Subject: [PATCH] feat: override method with default interception behavior #663 --- docs/en/guide/override.md | 15 +++++++++++---- docs/guide/override.md | 15 +++++++++++---- src/editor/core/event/handlers/copy.ts | 9 ++++++--- src/editor/core/event/handlers/drop.ts | 9 ++++++--- src/editor/core/event/handlers/paste.ts | 16 +++++++++++----- src/editor/core/override/Override.ts | 20 +++++++++++++++++--- src/editor/utils/index.ts | 4 ++++ 7 files changed, 66 insertions(+), 22 deletions(-) diff --git a/docs/en/guide/override.md b/docs/en/guide/override.md index 6159af9..05bc8e8 100644 --- a/docs/en/guide/override.md +++ b/docs/en/guide/override.md @@ -6,7 +6,14 @@ import Editor from "@hufe921/canvas-editor" const instance = new Editor(container, data, options) -instance.override.overrideFunction = ()=>{} + +instance.override.overrideFunction = () => void | Promise | IOverrideResult | Promise +``` + +```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 | IOverrideResult | Promise ``` ## copy @@ -26,7 +33,7 @@ Feature: Override internal copy function Usage: ```javascript -instance.override.copy = () => void +instance.override.copy = () => void | Promise | IOverrideResult | Promise ``` ## 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 | IOverrideResult | Promise ``` diff --git a/docs/guide/override.md b/docs/guide/override.md index 8d8e904..a1c53d2 100644 --- a/docs/guide/override.md +++ b/docs/guide/override.md @@ -6,7 +6,14 @@ import Editor from "@hufe921/canvas-editor" const instance = new Editor(container, data, options) -instance.override.overrideFunction = ()=>{} + +instance.override.overrideFunction = () => void | Promise | IOverrideResult | Promise +``` + +```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 | IOverrideResult | Promise ``` ## copy @@ -26,7 +33,7 @@ instance.override.paste = (evt?: ClipboardEvent) => void 用法： ```javascript -instance.override.copy = () => void +instance.override.copy = () => void | Promise | IOverrideResult | Promise ``` ## drop @@ -36,5 +43,5 @@ instance.override.copy = () => void 用法： ```javascript -instance.override.drop = (evt: DragEvent) => void +instance.override.drop = (evt: DragEvent) => void | Promise | IOverrideResult | Promise ``` diff --git a/src/editor/core/event/handlers/copy.ts b/src/editor/core/event/handlers/copy.ts index df6963b..d063d4b 100644 --- a/src/editor/core/event/handlers/copy.ts +++ b/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 ((overrideResult)?.preventDefault !== false) return } const rangeManager = draw.getRange() // 光标闭合时复制整行 diff --git a/src/editor/core/event/handlers/drop.ts b/src/editor/core/event/handlers/drop.ts index 8ef6cda..b235a55 100644 --- a/src/editor/core/event/handlers/drop.ts +++ b/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 ((overrideResult)?.preventDefault !== false) return } evt.preventDefault() const data = evt.dataTransfer?.getData('text') diff --git a/src/editor/core/event/handlers/paste.ts b/src/editor/core/event/handlers/paste.ts index ed94602..76de1a9 100644 --- a/src/editor/core/event/handlers/paste.ts +++ b/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 ((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 ((overrideResult)?.preventDefault !== false) return } // 优先读取编辑器内部粘贴板数据 const clipboardText = await navigator.clipboard.readText() diff --git a/src/editor/core/override/Override.ts b/src/editor/core/override/Override.ts index 014c88b..9053fbf 100644 --- a/src/editor/core/override/Override.ts +++ b/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 | IOverrideResult | Promise) + | undefined + public copy: + | (() => void | Promise | IOverrideResult | Promise) + | undefined + public drop: + | (( + evt: DragEvent + ) => void | Promise | IOverrideResult | Promise) + | undefined } diff --git a/src/editor/utils/index.ts b/src/editor/utils/index.ts index 60c8a27..b00a783 100644 --- a/src/editor/utils/index.ts +++ b/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' +}