From f1711fe4f2fd7cd5128b009114031fb086c94c9a Mon Sep 17 00:00:00 2001 From: tianmingjian Date: Thu, 21 Nov 2024 12:23:21 +0800 Subject: [PATCH 1/5] =?UTF-8?q?feat(EventEmitter):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E9=93=BE=E5=BC=8F=E6=B3=A8=E5=86=8C=EF=BC=8C?= =?UTF-8?q?=E7=BB=9F=E4=B8=80=E6=B8=85=E9=99=A4=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/core/src/event/eventEmitter.ts | 98 ++++++++++++++++++++++--- 1 file changed, 86 insertions(+), 12 deletions(-) diff --git a/packages/core/src/event/eventEmitter.ts b/packages/core/src/event/eventEmitter.ts index 9c829a924..3c0f43bf0 100644 --- a/packages/core/src/event/eventEmitter.ts +++ b/packages/core/src/event/eventEmitter.ts @@ -21,6 +21,32 @@ export type EventCallback = ( const WILDCARD = '*' +interface OnMethod { + ( + evt: T, + callback: EventCallback, + once?: boolean, + ): ClearMethod + ( + evt: T, + callback: EventCallback, + once?: boolean, + ): ClearMethod + (evt: string, callback: EventCallback, once?: boolean): ClearMethod +} + +interface OnceMethod { + (evt: T, callback: EventCallback): ClearMethod + (evt: T, callback: EventCallback): ClearMethod + (evt: string, callback: EventCallback): ClearMethod +} + +interface ClearMethod { + (): void + on: OnMethod + once: OnceMethod +} + /* event-emitter */ export default class EventEmitter { private _events: EventsType = {} @@ -30,14 +56,21 @@ export default class EventEmitter { * @param evt 事件名称 * @param callback 回调函数 * @param once 是否只监听一次 + * @returns { ClearMethod } 返回支持链式调用的清除函数 + * @example + * const bus = new EventEmitter(); + * const off = bus + * .on("e1", () => {}) + * .once("e2", () => {}) + * .on("e3", () => {}); + * + * off() // 清除这一次注册的 e1、e2、e3 事件 */ - on( - evt: T, - callback: EventCallback, + on: OnMethod = ( + evt: string, + callback: EventCallback, once?: boolean, - ): void - on(evt: T, callback: EventCallback, once?: boolean): void - on(evt: string, callback: EventCallback, once?: boolean) { + ): ClearMethod => { evt?.split(',').forEach((evKey) => { evKey = evKey.trim() if (!this._events[evKey]) { @@ -48,23 +81,39 @@ export default class EventEmitter { once: !!once, }) }) + + return createClearMethod(this, () => { + if (evt) { + this.off(evt, callback) + } + }) } /** * 监听一个事件一次 * @param evt 事件名称 * @param callback 回调函数 + * @returns { ClearMethod } 返回支持链式调用的清除函数 + * @example + * const bus = new EventEmitter(); + * const off = bus + * .on("e4", () => {}) + * .once("e5", () => {}) + * .on("e6", () => {}); + * + * off() // 清除这一次注册的 e4、e5、e6 事件 */ - once( - evt: T, - callback: (args: EventArgs[T]) => void, - ): void - once(evt: T, callback: EventCallback): void - once(evt: string, callback: EventCallback) { + once: OnceMethod = (evt: string, callback: EventCallback): ClearMethod => { evt?.split(',').forEach((evKey) => { evKey = evKey.trim() this.on(evKey, callback, true) }) + + return createClearMethod(this, () => { + if (evt) { + this.off(evt, callback) + } + }) } /** @@ -149,4 +198,29 @@ export default class EventEmitter { } } +const createClearMethod = ( + ctx: EventEmitter, + clear: () => void, +): ClearMethod => { + const preClear = clear as ClearMethod + + preClear.on = (evt: string, callback: EventCallback, once?: boolean) => { + const clear = ctx.on(evt, callback, once) + return createClearMethod(ctx, () => { + preClear() + clear() + }) + } + + preClear.once = (evt: string, callback: EventCallback) => { + const clear = ctx.once(evt, callback) + return createClearMethod(ctx, () => { + preClear() + clear() + }) + } + + return preClear +} + export { EventEmitter, EventArgs } From fce76081f3f4c307f799d5d4d4a8071a68c49f6f Mon Sep 17 00:00:00 2001 From: tianmingjian Date: Tue, 26 Nov 2024 14:56:35 +0800 Subject: [PATCH 2/5] =?UTF-8?q?feat(feature-examples):=20=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E6=89=B9=E9=87=8F=E6=B3=A8=E5=86=8C=E4=BA=8B=E4=BB=B6?= =?UTF-8?q?=E7=9A=84=E7=A4=BA=E4=BE=8B=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/feature-examples/.umirc.ts | 11 +++ .../src/pages/event/batch-use.less | 5 + .../src/pages/event/batch-use.tsx | 96 +++++++++++++++++++ 3 files changed, 112 insertions(+) create mode 100644 examples/feature-examples/src/pages/event/batch-use.less create mode 100644 examples/feature-examples/src/pages/event/batch-use.tsx diff --git a/examples/feature-examples/.umirc.ts b/examples/feature-examples/.umirc.ts index 17e1ee739..18861be4b 100644 --- a/examples/feature-examples/.umirc.ts +++ b/examples/feature-examples/.umirc.ts @@ -212,5 +212,16 @@ export default defineConfig({ }, ], }, + { + name: 'event', + path: '/event', + routes: [ + { + path: '/event/batch-use', + name: '批量使用示例', + component: './event/batch-use', + }, + ], + }, ], }) diff --git a/examples/feature-examples/src/pages/event/batch-use.less b/examples/feature-examples/src/pages/event/batch-use.less new file mode 100644 index 000000000..8eb833cff --- /dev/null +++ b/examples/feature-examples/src/pages/event/batch-use.less @@ -0,0 +1,5 @@ +.viewport { + position: relative; + height: 80vh; + overflow: hidden; +} diff --git a/examples/feature-examples/src/pages/event/batch-use.tsx b/examples/feature-examples/src/pages/event/batch-use.tsx new file mode 100644 index 000000000..3455e84ac --- /dev/null +++ b/examples/feature-examples/src/pages/event/batch-use.tsx @@ -0,0 +1,96 @@ +import { FC, useEffect, useRef, useState } from 'react' +import { Card, Button, Divider, message } from 'antd' +import '@logicflow/core/es/index.css' +import LogicFlow from '@logicflow/core' +import styles from './batch-use.less' + +const Example: FC = () => { + const [haRegist, setHaRegist] = useState(false) + const refContainer = useRef(null) + const lf = useRef() + const [messageApi, contextHolder] = message.useMessage() + + useEffect(() => { + const container = refContainer.current + if (!container) { + return + } + + const instance = new LogicFlow({ + container, + }) + + instance.render({ + nodes: [ + { + type: 'rect', + x: 100, + y: 100, + text: '节点1', + properties: { + name: '矩形', + }, + }, + { + type: 'rect', + x: 300, + y: 100, + text: '节点2', + properties: { + name: '矩形', + }, + }, + ], + }) + + lf.current = instance + return () => { + instance.destroy() + } + }, []) + + const off = useRef(() => {}) + + const registerEvent = () => { + if (!lf.current) { + return + } + off.current = lf.current.graphModel.eventCenter + .on('node:click', () => { + messageApi.info('node click') + }) + .on('node:mouseenter', () => { + messageApi.success('node mouseenter') + }) + .on('node:mouseleave', () => { + messageApi.warning('node mouseleave') + }) + } + + const offEvent = () => { + off.current() + } + + const toggleEvent = () => { + setHaRegist(!haRegist) + if (haRegist) { + offEvent() + } else { + registerEvent() + } + } + return ( + + {contextHolder} +
+ +
+ +
+ + ) +} + +export default Example From 49be65ac485029ff847c32037eb189660165ef92 Mon Sep 17 00:00:00 2001 From: tianmingjian Date: Tue, 26 Nov 2024 14:58:14 +0800 Subject: [PATCH 3/5] =?UTF-8?q?feat(LogicFlow):=20=E7=B1=BB=E5=9E=8B?= =?UTF-8?q?=E5=85=BC=E5=AE=B9=E4=BD=BFLogicFlow=E5=AE=9E=E4=BE=8B=E4=B8=8A?= =?UTF-8?q?=E7=9A=84on=E5=92=8Conce=E6=96=B9=E6=B3=95=E5=85=BC=E5=AE=B9eve?= =?UTF-8?q?ntCenter=E7=9A=84on=E5=92=8Conce?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/core/src/LogicFlow.tsx | 21 +++++++++++---------- packages/core/src/event/eventEmitter.ts | 4 ++-- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/packages/core/src/LogicFlow.tsx b/packages/core/src/LogicFlow.tsx index 03933cfb9..edb5f8968 100644 --- a/packages/core/src/LogicFlow.tsx +++ b/packages/core/src/LogicFlow.tsx @@ -20,7 +20,13 @@ import { Dnd, snapline } from './view/behavior' import Tool from './tool' import History from './history' import Keyboard, { initDefaultShortcut } from './keyboard' -import { EventCallback, CallbackArgs, EventArgs } from './event/eventEmitter' +import { + OnMethod, + OnceMethod, + EventCallback, + EventArgs, + CallbackArgs, +} from './event/eventEmitter' import { ElementType, EventType, SegmentDirection } from './constant' import Extension = LogicFlow.Extension @@ -1251,12 +1257,9 @@ export class LogicFlow { * lf.on('node:click,node:contextmenu', (data) => { * }); */ - on(evt: T, callback: EventCallback): void - on(evt: T, callback: EventCallback): void - on(evt: string, callback: EventCallback) { - this.graphModel.eventCenter.on(evt, callback) + on: OnMethod = (evt: string, callback: EventCallback, once?: boolean) => { + return this.graphModel.eventCenter.on(evt, callback, once) } - /** * 撤销监听事件 */ @@ -1269,10 +1272,8 @@ export class LogicFlow { /** * 监听事件，只监听一次 */ - once(evt: T, callback: EventCallback): void - once(evt: T, callback: EventCallback): void - once(evt: string, callback: EventCallback) { - this.graphModel.eventCenter.once(evt, callback) + once: OnceMethod = (evt: string, callback: EventCallback) => { + return this.graphModel.eventCenter.once(evt, callback) } /** diff --git a/packages/core/src/event/eventEmitter.ts b/packages/core/src/event/eventEmitter.ts index 3c0f43bf0..8cf100dff 100644 --- a/packages/core/src/event/eventEmitter.ts +++ b/packages/core/src/event/eventEmitter.ts @@ -21,7 +21,7 @@ export type EventCallback = ( const WILDCARD = '*' -interface OnMethod { +export interface OnMethod { ( evt: T, callback: EventCallback, @@ -35,7 +35,7 @@ interface OnMethod { (evt: string, callback: EventCallback, once?: boolean): ClearMethod } -interface OnceMethod { +export interface OnceMethod { (evt: T, callback: EventCallback): ClearMethod (evt: T, callback: EventCallback): ClearMethod (evt: string, callback: EventCallback): ClearMethod From 0f3885bec9b70528ab267e4258e903d91c35a8f3 Mon Sep 17 00:00:00 2001 From: tianmingjian Date: Thu, 28 Nov 2024 10:55:40 +0800 Subject: [PATCH 4/5] =?UTF-8?q?fix(EventEmitter):=20=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E5=91=BD=E5=90=8D=20OnMethod=20->=20OnEvent?= =?UTF-8?q?=20=E5=88=A0=E9=99=A4=E6=97=A0=E7=94=A8=E7=9A=84=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/core/src/LogicFlow.tsx | 8 ++--- packages/core/src/event/eventEmitter.ts | 44 ++++++++++++------------- 2 files changed, 25 insertions(+), 27 deletions(-) diff --git a/packages/core/src/LogicFlow.tsx b/packages/core/src/LogicFlow.tsx index edb5f8968..5e51064ec 100644 --- a/packages/core/src/LogicFlow.tsx +++ b/packages/core/src/LogicFlow.tsx @@ -21,8 +21,8 @@ import Tool from './tool' import History from './history' import Keyboard, { initDefaultShortcut } from './keyboard' import { - OnMethod, - OnceMethod, + OnEvent, + OnceEvent, EventCallback, EventArgs, CallbackArgs, @@ -1257,7 +1257,7 @@ export class LogicFlow { * lf.on('node:click,node:contextmenu', (data) => { * }); */ - on: OnMethod = (evt: string, callback: EventCallback, once?: boolean) => { + on: OnEvent = (evt: string, callback: EventCallback, once?: boolean) => { return this.graphModel.eventCenter.on(evt, callback, once) } /** @@ -1272,7 +1272,7 @@ export class LogicFlow { /** * 监听事件，只监听一次 */ - once: OnceMethod = (evt: string, callback: EventCallback) => { + once: OnceEvent = (evt: string, callback: EventCallback) => { return this.graphModel.eventCenter.once(evt, callback) } diff --git a/packages/core/src/event/eventEmitter.ts b/packages/core/src/event/eventEmitter.ts index 8cf100dff..279ccfb02 100644 --- a/packages/core/src/event/eventEmitter.ts +++ b/packages/core/src/event/eventEmitter.ts @@ -21,30 +21,28 @@ export type EventCallback = ( const WILDCARD = '*' -export interface OnMethod { +export interface OnEvent { ( evt: T, callback: EventCallback, once?: boolean, - ): ClearMethod + ): ClearCallback ( evt: T, callback: EventCallback, once?: boolean, - ): ClearMethod - (evt: string, callback: EventCallback, once?: boolean): ClearMethod + ): ClearCallback } -export interface OnceMethod { - (evt: T, callback: EventCallback): ClearMethod - (evt: T, callback: EventCallback): ClearMethod - (evt: string, callback: EventCallback): ClearMethod +export interface OnceEvent { + (evt: T, callback: EventCallback): ClearCallback + (evt: T, callback: EventCallback): ClearCallback } -interface ClearMethod { +interface ClearCallback { (): void - on: OnMethod - once: OnceMethod + on: OnEvent + once: OnceEvent } /* event-emitter */ @@ -56,7 +54,7 @@ export default class EventEmitter { * @param evt 事件名称 * @param callback 回调函数 * @param once 是否只监听一次 - * @returns { ClearMethod } 返回支持链式调用的清除函数 + * @returns { ClearCallback } 返回支持链式调用的清除函数 * @example * const bus = new EventEmitter(); * const off = bus @@ -66,11 +64,11 @@ export default class EventEmitter { * * off() // 清除这一次注册的 e1、e2、e3 事件 */ - on: OnMethod = ( + on: OnEvent = ( evt: string, callback: EventCallback, once?: boolean, - ): ClearMethod => { + ): ClearCallback => { evt?.split(',').forEach((evKey) => { evKey = evKey.trim() if (!this._events[evKey]) { @@ -82,7 +80,7 @@ export default class EventEmitter { }) }) - return createClearMethod(this, () => { + return createClearCallback(this, () => { if (evt) { this.off(evt, callback) } @@ -93,7 +91,7 @@ export default class EventEmitter { * 监听一个事件一次 * @param evt 事件名称 * @param callback 回调函数 - * @returns { ClearMethod } 返回支持链式调用的清除函数 + * @returns { ClearCallback } 返回支持链式调用的清除函数 * @example * const bus = new EventEmitter(); * const off = bus @@ -103,13 +101,13 @@ export default class EventEmitter { * * off() // 清除这一次注册的 e4、e5、e6 事件 */ - once: OnceMethod = (evt: string, callback: EventCallback): ClearMethod => { + once: OnceEvent = (evt: string, callback: EventCallback): ClearCallback => { evt?.split(',').forEach((evKey) => { evKey = evKey.trim() this.on(evKey, callback, true) }) - return createClearMethod(this, () => { + return createClearCallback(this, () => { if (evt) { this.off(evt, callback) } @@ -198,15 +196,15 @@ export default class EventEmitter { } } -const createClearMethod = ( +const createClearCallback = ( ctx: EventEmitter, clear: () => void, -): ClearMethod => { - const preClear = clear as ClearMethod +): ClearCallback => { + const preClear = clear as ClearCallback preClear.on = (evt: string, callback: EventCallback, once?: boolean) => { const clear = ctx.on(evt, callback, once) - return createClearMethod(ctx, () => { + return createClearCallback(ctx, () => { preClear() clear() }) @@ -214,7 +212,7 @@ const createClearMethod = ( preClear.once = (evt: string, callback: EventCallback) => { const clear = ctx.once(evt, callback) - return createClearMethod(ctx, () => { + return createClearCallback(ctx, () => { preClear() clear() }) From 59950d38ebb0d64b7a516b6175083d8d2e1e99a2 Mon Sep 17 00:00:00 2001 From: tianmingjian Date: Thu, 28 Nov 2024 16:10:11 +0800 Subject: [PATCH 5/5] =?UTF-8?q?feat(docs):=20=E6=96=B0=E5=A2=9E=E5=AE=98?= =?UTF-8?q?=E7=BD=91=E6=96=87=E6=A1=A3=E4=B8=AD=E5=85=B3=E4=BA=8EEventCent?= =?UTF-8?q?er=E9=93=BE=E5=BC=8F=E8=B0=83=E7=94=A8=E7=9A=84=E4=BB=8B?= =?UTF-8?q?=E7=BB=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sites/docs/docs/api/detail/index.en.md | 42 +++++++++++++++------- sites/docs/docs/api/detail/index.zh.md | 42 +++++++++++++++------- sites/docs/docs/api/eventCenter.en.md | 26 ++++++++------ sites/docs/docs/api/eventCenter.zh.md | 24 ++++++++----- sites/docs/docs/tutorial/basic/event.en.md | 15 ++++++-- sites/docs/docs/tutorial/basic/event.zh.md | 19 +++++++--- 6 files changed, 114 insertions(+), 54 deletions(-) diff --git a/sites/docs/docs/api/detail/index.en.md b/sites/docs/docs/api/detail/index.en.md index ce3edcf41..0b70e8a11 100644 --- a/sites/docs/docs/api/detail/index.en.md +++ b/sites/docs/docs/api/detail/index.en.md @@ -1182,9 +1182,14 @@ closeEdgeAnimation: (edgeId: string): void => {} Event listener for the graph, see [event](../eventCenter.en.md). ```ts | pure -import { EventCallback } from './EventEmitter' +import { EventCallback, ClearCallback } from './EventEmitter' + +export interface OnEvent { + (evt: T,callback: EventCallback,once?: boolean): ClearCallback + (evt: T, callback: EventCallback, once?: boolean): ClearCallback +} -on: (evt: string, callback: EventCallback): void => {} +on: OnEvent ``` Parameters: @@ -1193,16 +1198,18 @@ Parameters: |:---------|:-------|:---------|:--------|:------------------| | evt | string | ✅ | - | Event name | | callback | `EventCallback` | ✅ | - | Callback function | +| once | boolean | | false | only once | Example： ```ts | pure -lf.on("node:click", (args) => { - console.log("node:click", args.position); -}); -lf.on("element:click", (args) => { - console.log("element:click", args.e.target); -}); +const clear = lf + .on("node:click", (args) => { + console.log("node:click", args.position); + }, false) + .on("element:click", (args) => { + console.log("element:click", args.e.target); + }); ``` ### off @@ -1238,9 +1245,14 @@ lf.off("element:click", () => { Event listener that triggers only once. ```ts | pure -import { EventCallback } from './EventEmitter' +import { EventCallback, ClearCallback } from './EventEmitter' + +export interface OnceEvent { + (evt: T, callback: EventCallback): ClearCallback + (evt: T, callback: EventCallback): ClearCallback +} -once: (evt: string, callback: EventCallback): void => {} +once: OnceEvent ``` Parameters: @@ -1253,9 +1265,13 @@ Parameters: Example： ```ts | pure -lf.once("node:click", () => { - console.log("node:click"); -}); +const clear = lf + .once("node:click", (args) => { + console.log("node:click", args.position); + }) + .once("element:click", (args) => { + console.log("element:click", args.e.target); + }); ``` ### emit diff --git a/sites/docs/docs/api/detail/index.zh.md b/sites/docs/docs/api/detail/index.zh.md index 11552e102..fdd600b5a 100644 --- a/sites/docs/docs/api/detail/index.zh.md +++ b/sites/docs/docs/api/detail/index.zh.md @@ -1184,9 +1184,14 @@ closeEdgeAnimation: (edgeId: string): void => {} 图的监听事件，更多事件请查看[事件](../eventCenter.zh.md)。 ```tsx | pure -import { EventCallback } from './EventEmitter' +import { EventCallback, ClearCallback } from './EventEmitter' + +export interface OnEvent { + (evt: T,callback: EventCallback,once?: boolean): ClearCallback + (evt: T, callback: EventCallback, once?: boolean): ClearCallback +} -on: (evt: string, callback: EventCallback): void => {} +on: OnEvent ``` 参数： @@ -1195,16 +1200,18 @@ on: (evt: string, callback: EventCallback): void => {} |:---------|:-------|:---|:----|:-----| | evt | string | ✅ | - | 事件名称 | | callback | `EventCallback` | ✅ | - | 回调函数 | +| once | boolean | | false | 回调函数 | 示例： ```tsx | pure -lf.on("node:click", (args) => { - console.log("node:click", args.position); -}); -lf.on("element:click", (args) => { - console.log("element:click", args.e.target); -}); +const clear = lf + .on("node:click", (args) => { + console.log("node:click", args.position); + }, false) + .on("element:click", (args) => { + console.log("element:click", args.e.target); + }); ``` ### off @@ -1240,9 +1247,14 @@ lf.off("element:click", () => { 事件监听一次。 ```tsx | pure -import { EventCallback } from './EventEmitter' +import { EventCallback, ClearCallback } from './EventEmitter' + +export interface OnceEvent { + (evt: T, callback: EventCallback): ClearCallback + (evt: T, callback: EventCallback): ClearCallback +} -once: (evt: string, callback: EventCallback): void => {} +once: OnceEvent ``` 参数： @@ -1255,9 +1267,13 @@ once: (evt: string, callback: EventCallback): void => {} 示例： ```tsx | pure -lf.once("node:click", () => { - console.log("node:click"); -}); +const clear = lf + .once("node:click", (args) => { + console.log("node:click", args.position); + }) + .once("element:click", (args) => { + console.log("element:click", args.e.target); + }); ``` ### emit diff --git a/sites/docs/docs/api/eventCenter.en.md b/sites/docs/docs/api/eventCenter.en.md index 2870ac1d9..a157830d5 100644 --- a/sites/docs/docs/api/eventCenter.en.md +++ b/sites/docs/docs/api/eventCenter.en.md @@ -197,19 +197,20 @@ Parameters: |:---------|:-------|:---------|:--------|:------------------| | evt | string | ✅ | - | Event Name | | callback | string | ✅ | - | Callback function | +| once | boolean | | false | only once | Example: ```tsx | pure const { eventCenter } = lf.graphModel; -eventCenter.on("node:click", (args) => { - console.log("node:click", args.position); -}); -eventCenter.on("element:click", (args) => { - console.log("element:click", args.e.target); -}); - +const clear = eventCenter + .on("node:click", (args) => { + console.log("node:click", args.position); + }) + .on("element:click", (args) => { + console.log("element:click", args.e.target); + }, true); ``` ## off @@ -258,10 +259,13 @@ Example: ```tsx | pure const { eventCenter } = lf.graphModel; -eventCenter.once("node:click", () => { - console.log("node:click"); -}); - +const clear = eventCenter + .once("node:click", () => { + console.log("node:click"); + }) + .once("element:click", (args) => { + console.log("element:click", args.e.target); + }); ``` ## emit diff --git a/sites/docs/docs/api/eventCenter.zh.md b/sites/docs/docs/api/eventCenter.zh.md index a14a80a09..9fa16e80b 100644 --- a/sites/docs/docs/api/eventCenter.zh.md +++ b/sites/docs/docs/api/eventCenter.zh.md @@ -196,18 +196,20 @@ History 用来记录画布上的每一次改动，当画布上的元素发生变 |:---------|:-------|:---|:----|:-----| | evt | string | ✅ | - | 事件名称 | | callback | string | ✅ | - | 回调函数 | +| once | boolean | | false | 是否只监听一次 | 示例： ```tsx | pure const { eventCenter } = lf.graphModel; -eventCenter.on("node:click", (args) => { - console.log("node:click", args.position); -}); -eventCenter.on("element:click", (args) => { - console.log("element:click", args.e.target); -}); +const clear = eventCenter + .on("node:click", (args) => { + console.log("node:click", args.position); + }) + .on("element:click", (args) => { + console.log("element:click", args.e.target); + }, true); ``` ## off @@ -253,9 +255,13 @@ eventCenter.off("element:click", () => { ```tsx | pure const { eventCenter } = lf.graphModel; -eventCenter.once("node:click", () => { - console.log("node:click"); -}); +const clear = eventCenter + .once("node:click", () => { + console.log("node:click"); + }) + .once("element:click", (args) => { + console.log("element:click", args.e.target); + }); ``` ## emit diff --git a/sites/docs/docs/tutorial/basic/event.en.md b/sites/docs/docs/tutorial/basic/event.en.md index b7c124b80..ae824f77f 100644 --- a/sites/docs/docs/tutorial/basic/event.en.md +++ b/sites/docs/docs/tutorial/basic/event.en.md @@ -18,19 +18,28 @@ listening to events. The `on` method is provided on the `lf` instance to support listening to events. ```tsx | pure -lf.on("node:dnd-add", (data) => {}); +const clear lf.on("node:dnd-add", (data) => {}); +``` + +LogicFlow supports chaining calls to listen for events. + +```tsx | pure +// The returned 'clear' function cleans up the registered 'node:click' and 'edge:click' events +const clear = lf + .on('node:click', (data) => {}) + .on('edge:click', (data) => {}) ``` LogicFlow supports splitting event names with commas. ```tsx | pure -lf.on("node:click,edge:click", (data) => {}); +const clear = lf.on("node:click,edge:click", (data) => {}); ``` ## Customizing events In addition to the listening events supported on lf, events can be listened to and triggered using -the [eventCenter](../../api/graphModel.en.md#eventCenter) object. `eventCenter` is a property on +the [eventCenter](../../api/model/graphModel.en.md#eventcenter) object. `eventCenter` is a property on a `graphModel`. So when customizing a node, we can use `eventCenter` to trigger custom events. ```tsx | pure diff --git a/sites/docs/docs/tutorial/basic/event.zh.md b/sites/docs/docs/tutorial/basic/event.zh.md index cfd80b330..8b0b46f27 100644 --- a/sites/docs/docs/tutorial/basic/event.zh.md +++ b/sites/docs/docs/tutorial/basic/event.zh.md @@ -12,21 +12,30 @@ toc: content ## 监听事件 -`lf`实例上提供`on`方法支持监听事件。 +`lf`实例上提供`on`方法支持监听事件，并且会返回清理该事件的回调函数。 ```tsx | pure -lf.on("node:dnd-add", (data) => {}); +const clear = lf.on("node:dnd-add", (data) => {}) ``` -LogicFlow 支持用逗号分割事件名。 +LogicFlow 支持链式调用监听事件。 ```tsx | pure -lf.on('node:click,edge:click', (data) => {}) +// 返回的 ’clear‘ 函数会清理注册的 ‘node:click’ 和 ‘edge:click’ 事件 +const clear = lf + .on('node:click', (data) => {}) + .on('edge:click', (data) => {}) +``` + +LogicFlow 同时也支持用逗号分割事件名。 + +```tsx | pure +const clear = lf.on('node:click,edge:click', (data) => {}) ``` ## 自定义事件 -除了 lf 上支持的监听事件外，还可以使用[eventCenter](../../api/graphModel.zh.md#eventcenter) +除了 lf 上支持的监听事件外，还可以使用[eventCenter](../../api/model//graphModel.zh.md#eventcenter) 对象来监听和触发事件。`eventCenter`是一个`graphModel` 上的一个属性。所以在自定义节点的时候，我们可以使用`eventCenter`触发自定义事件。