feat: the event supplements the dispose function as the return value

2025-12-12 03:01:16 +00:00 · 2023-02-06 17:24:40 +08:00 · 2023-02-06 17:24:40 +08:00 · 69ab81a147
commit 69ab81a147
parent 83562989d5
13 changed files with 117 additions and 87 deletions
--- a/docs/docs/api/material.md
+++ b/docs/docs/api/material.md
@ -358,8 +358,11 @@ material.getRegisteredMetadataTransducers();
 * add callback for assets changed event
 * @param fn
 */
-onChangeAssets(fn: () => void): void;
+onChangeAssets(fn: () => void): IPublicTypeDisposable;
 ```
+
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
 ##### 示例
 ```typescript
 import { material } from '@alilc/lowcode-engine';
--- a/docs/docs/api/model/document-model.md
+++ b/docs/docs/api/model/document-model.md
@ -327,27 +327,31 @@ onChangeSelection(fn: (ids: string[]) => void): IPublicTypeDisposable;
 * set callback for event on visibility changed for certain node
 * @param fn
 */
-onChangeNodeVisible(fn: (node: IPublicModelNode, visible: boolean) => void): void;
+onChangeNodeVisible(fn: (node: IPublicModelNode, visible: boolean) => void): IPublicTypeDisposable;
 ```

-相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+- 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+- 相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)

 ### onChangeNodeChildren

-onChangeNodeChildren(fn: (info?: IPublicTypeOnChangeOptions) => void)
-
 当前 document 的节点 children 变更事件

 ```typescript
+onChangeNodeChildren(fn: (info?: IPublicTypeOnChangeOptions) => void): IPublicTypeDisposable;
 ```

+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
 ### onChangeNodeProp
 当前 document 节点属性修改事件

 ```typescript
-onChangeNodeProp(fn: (info: IPublicTypePropChangeOptions) => void)
+onChangeNodeProp(fn: (info: IPublicTypePropChangeOptions) => void): IPublicTypeDisposable;
 ```

+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
 ### onImportSchema
 当前 document 导入新的 schema 事件
 ```typescript
--- a/docs/docs/api/skeleton.md
+++ b/docs/docs/api/skeleton.md
@ -295,9 +295,11 @@ hideArea(areaName: string): void;
 * @param listener
 * @returns
 */
-onShowPanel(listener: (...args: any[]) => void): () => void;
+onShowPanel(listener: (...args: any[]) => void): IPublicTypeDisposable;
 ```

+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
 ### onHidePanel

 监听 Panel 实例隐藏事件
@ -309,9 +311,11 @@ onShowPanel(listener: (...args: any[]) => void): () => void;
 * @param listener
 * @returns
 */
-onHidePanel(listener: (...args: any[]) => void): () => void;
+onHidePanel(listener: (...args: any[]) => void): IPublicTypeDisposable;
 ```

+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+

 ### onShowWidget

@ -324,9 +328,10 @@ onHidePanel(listener: (...args: any[]) => void): () => void;
 * @param listener
 * @returns
 */
-onShowWidget(listener: (...args: any[]) => void): () => void;
+onShowWidget(listener: (...args: any[]) => void): IPublicTypeDisposable;
 ```

+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)

 ### onHideWidget

@ -339,9 +344,11 @@ onShowWidget(listener: (...args: any[]) => void): () => void;
 * @param listener
 * @returns
 */
-onHideWidget(listener: (...args: any[]) => void): () => void;
+onHideWidget(listener: (...args: any[]) => void): IPublicTypeDisposable;
 ```

+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
 ## 使用示例

 ```typescript
--- a/docs/docs/api/workspace.md
+++ b/docs/docs/api/workspace.md
@ -69,22 +69,6 @@ registerResourceType(resourceTypeModel: IPublicTypeResourceType): void;

 相关类型：[IPublicTypeResourceType](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/resource-type.ts)

-### onChangeWindows
-
-窗口新增/删除的事件
-
-```typescript
-function onChangeWindows(fn: () => void): void;
-```
-
-### onChangeActiveWindow
-
-active 窗口变更事件
-
-```typescript
-function onChangeActiveWindow(fn: () => void): void;
-```
-
 ### setResourceList

 设置设计器资源列表数据
@ -95,16 +79,6 @@ setResourceList(resourceList: IPublicResourceList) {}

 相关类型：[IPublicResourceOptions](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/resource-options.ts)

-### onResourceListChange
-
-设计器资源列表数据变更事件
-
-```typescript
-onResourceListChange(fn: (resourceList: IPublicResourceList): void): (): void;
-```
-
-相关类型：[IPublicResourceOptions](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/resource-options.ts)
-
 ### openEditorWindow

 打开视图窗口
@ -136,3 +110,37 @@ removeEditorWindow(resourceName: string, title: string): void;
 ```typescript
 removeEditorWindowById(id: string): void;
 ```
+
+## 事件
+
+### onChangeWindows
+
+窗口新增/删除的事件
+
+```typescript
+function onChangeWindows(fn: () => void): IPublicTypeDisposable;
+```
+
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
+### onChangeActiveWindow
+
+active 窗口变更事件
+
+```typescript
+function onChangeActiveWindow(fn: () => void): IPublicTypeDisposable;
+```
+
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
+
+### onResourceListChange
+
+设计器资源列表数据变更事件
+
+```typescript
+onResourceListChange(fn: (resourceList: IPublicResourceList): void): (): IPublicTypeDisposable;
+```
+
+- 相关类型：[IPublicResourceOptions](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/resource-options.ts)
+- 相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
--- a/packages/designer/src/project/project.ts
+++ b/packages/designer/src/project/project.ts
@ -85,8 +85,6 @@ export class Project implements IProject {
    return this._simulator || null;
  }

-  key = Math.random();
-
  @computed get currentDocument(): IDocumentModel | null {
    return this.documents.find((doc) => doc.active);
  }
--- a/packages/shell/src/api/material.ts
+++ b/packages/shell/src/api/material.ts
@ -12,6 +12,7 @@ import {
  IPublicModelComponentMeta,
  IPublicTypeNpmInfo,
  IPublicModelEditor,
+  IPublicTypeDisposable,
 } from '@alilc/lowcode-types';
 import { Workspace as InnerWorkspace } from '@alilc/lowcode-workspace';
 import { editorSymbol, designerSymbol } from '../symbols';
@ -170,7 +171,7 @@ export class Material implements IPublicApiMaterial {
   * 监听 assets 变化的事件
   * @param fn
   */
-  onChangeAssets(fn: () => void): Function {
+  onChangeAssets(fn: () => void): IPublicTypeDisposable {
    const dispose = [
      // 设置 assets，经过 setAssets 赋值
      this[editorSymbol].onGot('assets', fn),
--- a/packages/shell/src/api/skeleton.ts
+++ b/packages/shell/src/api/skeleton.ts
@ -4,7 +4,7 @@ import {
  SkeletonEvents,
 } from '@alilc/lowcode-editor-skeleton';
 import { skeletonSymbol } from '../symbols';
-import { IPublicApiSkeleton, IPublicTypeWidgetBaseConfig, IPublicTypeWidgetConfigArea } from '@alilc/lowcode-types';
+import { IPublicApiSkeleton, IPublicTypeDisposable, IPublicTypeWidgetBaseConfig, IPublicTypeWidgetConfigArea } from '@alilc/lowcode-types';

 const innerSkeletonSymbol = Symbol('skeleton');
 export class Skeleton implements IPublicApiSkeleton {
@ -129,7 +129,7 @@ export class Skeleton implements IPublicApiSkeleton {
   * @param listener
   * @returns
   */
-  onShowPanel(listener: (...args: any[]) => void) {
+  onShowPanel(listener: (...args: any[]) => void): IPublicTypeDisposable {
    const { editor } = this[skeletonSymbol];
    editor.eventBus.on(SkeletonEvents.PANEL_SHOW, (name: any, panel: any) => {
      // 不泄漏 skeleton
@ -144,7 +144,7 @@ export class Skeleton implements IPublicApiSkeleton {
   * @param listener
   * @returns
   */
-  onHidePanel(listener: (...args: any[]) => void) {
+  onHidePanel(listener: (...args: any[]) => void): IPublicTypeDisposable {
    const { editor } = this[skeletonSymbol];
    editor.eventBus.on(SkeletonEvents.PANEL_HIDE, (name: any, panel: any) => {
      // 不泄漏 skeleton
@ -159,7 +159,7 @@ export class Skeleton implements IPublicApiSkeleton {
   * @param listener
   * @returns
   */
-  onShowWidget(listener: (...args: any[]) => void) {
+  onShowWidget(listener: (...args: any[]) => void): IPublicTypeDisposable {
    const { editor } = this[skeletonSymbol];
    editor.eventBus.on(SkeletonEvents.WIDGET_SHOW, (name: any, panel: any) => {
      // 不泄漏 skeleton
@ -174,7 +174,7 @@ export class Skeleton implements IPublicApiSkeleton {
   * @param listener
   * @returns
   */
-  onHideWidget(listener: (...args: any[]) => void) {
+  onHideWidget(listener: (...args: any[]) => void): IPublicTypeDisposable {
    const { editor } = this[skeletonSymbol];
    editor.eventBus.on(SkeletonEvents.WIDGET_HIDE, (name: any, panel: any) => {
      // 不泄漏 skeleton
--- a/packages/shell/src/api/workspace.ts
+++ b/packages/shell/src/api/workspace.ts
@ -1,4 +1,4 @@
-import { IPublicApiWorkspace, IPublicResourceList, IPublicTypeResourceType } from '@alilc/lowcode-types';
+import { IPublicApiWorkspace, IPublicResourceList, IPublicTypeDisposable, IPublicTypeResourceType } from '@alilc/lowcode-types';
 import { Workspace as InnerWorkSpace } from '@alilc/lowcode-workspace';
 import { Plugins } from '@alilc/lowcode-shell';
 import { workspaceSymbol } from '../symbols';
@ -19,7 +19,7 @@ export class Workspace implements IPublicApiWorkspace {
    this[workspaceSymbol].setResourceList(resourceList);
  }

-  onResourceListChange(fn: (resourceList: IPublicResourceList) => void): () => void {
+  onResourceListChange(fn: (resourceList: IPublicResourceList) => void): IPublicTypeDisposable {
    return this[workspaceSymbol].onResourceListChange(fn);
  }

@ -59,11 +59,11 @@ export class Workspace implements IPublicApiWorkspace {
    return this[workspaceSymbol].windows.map((d) => new ShellWindow(d));
  }

-  onChangeWindows(fn: () => void) {
+  onChangeWindows(fn: () => void): IPublicTypeDisposable {
    return this[workspaceSymbol].onChangeWindows(fn);
  }

-  onChangeActiveWindow(fn: () => void) {
+  onChangeActiveWindow(fn: () => void): IPublicTypeDisposable {
    return this[workspaceSymbol].onChangeActiveWindow(fn);
  }
 }
--- a/packages/shell/src/model/document-model.ts
+++ b/packages/shell/src/model/document-model.ts
@ -288,8 +288,8 @@ export class DocumentModel implements IPublicModelDocumentModel {
   * 当前 document 的节点显隐状态变更事件
   * @param fn
   */
-  onChangeNodeVisible(fn: (node: IPublicModelNode, visible: boolean) => void): void {
-    this[documentSymbol].onChangeNodeVisible((node: IPublicModelNode, visible: boolean) => {
+  onChangeNodeVisible(fn: (node: IPublicModelNode, visible: boolean) => void): IPublicTypeDisposable {
+    return this[documentSymbol].onChangeNodeVisible((node: IPublicModelNode, visible: boolean) => {
      fn(ShellNode.create(node)!, visible);
    });
  }
@ -298,8 +298,8 @@ export class DocumentModel implements IPublicModelDocumentModel {
   * 当前 document 的节点 children 变更事件
   * @param fn
   */
-  onChangeNodeChildren(fn: (info: IPublicTypeOnChangeOptions) => void): void {
-    this[documentSymbol].onChangeNodeChildren((info?: IPublicTypeOnChangeOptions) => {
+  onChangeNodeChildren(fn: (info: IPublicTypeOnChangeOptions) => void): IPublicTypeDisposable {
+    return this[documentSymbol].onChangeNodeChildren((info?: IPublicTypeOnChangeOptions) => {
      if (!info) {
        return;
      }
@ -314,10 +314,8 @@ export class DocumentModel implements IPublicModelDocumentModel {
   * 当前 document 节点属性修改事件
   * @param fn
   */
-  onChangeNodeProp(fn: (info: IPublicTypePropChangeOptions) => void): void {
-    this[editorSymbol].on(
-      GlobalEvent.Node.Prop.InnerChange,
-      (info: GlobalEvent.Node.Prop.ChangeOptions) => {
+  onChangeNodeProp(fn: (info: IPublicTypePropChangeOptions) => void): IPublicTypeDisposable {
+    const callback = (info: GlobalEvent.Node.Prop.ChangeOptions) => {
      fn({
        key: info.key,
        oldValue: info.oldValue,
@ -325,8 +323,18 @@ export class DocumentModel implements IPublicModelDocumentModel {
        prop: ShellProp.create(info.prop)!,
        node: ShellNode.create(info.node as any)!,
      });
-      },
+    };
+    this[editorSymbol].on(
+      GlobalEvent.Node.Prop.InnerChange,
+      callback,
    );
+
+    return () => {
+      this[editorSymbol].off(
+        GlobalEvent.Node.Prop.InnerChange,
+        callback,
+      );
+    };
  }

  /**
--- a/packages/types/src/shell/api/material.ts
+++ b/packages/types/src/shell/api/material.ts
@ -1,4 +1,4 @@
-import { IPublicTypeAssetsJson, IPublicTypeMetadataTransducer, IPublicTypeComponentAction, IPublicTypeNpmInfo } from '../type';
+import { IPublicTypeAssetsJson, IPublicTypeMetadataTransducer, IPublicTypeComponentAction, IPublicTypeNpmInfo, IPublicTypeDisposable } from '../type';
 import { IPublicModelComponentMeta } from '../model';
 import { ComponentType } from 'react';

@ -104,5 +104,5 @@ export interface IPublicApiMaterial {
   * add callback for assets changed event
   * @param fn
   */
-  onChangeAssets(fn: () => void): Function;
+  onChangeAssets(fn: () => void): IPublicTypeDisposable;
 }
--- a/packages/types/src/shell/api/skeleton.ts
+++ b/packages/types/src/shell/api/skeleton.ts
@ -1,6 +1,7 @@
-import { IPublicTypeWidgetBaseConfig } from '../type';
+import { IPublicTypeDisposable, IPublicTypeWidgetBaseConfig } from '../type';

 export interface IPublicApiSkeleton {
+
  /**
   * 增加一个面板实例
   * add a new panel
@ -80,7 +81,7 @@ export interface IPublicApiSkeleton {
   * @param listener
   * @returns
   */
-  onShowPanel(listener: (...args: any[]) => void): () => void;
+  onShowPanel(listener: (...args: any[]) => void): IPublicTypeDisposable;

  /**
   * 监听 Panel 实例隐藏事件
@ -88,7 +89,7 @@ export interface IPublicApiSkeleton {
   * @param listener
   * @returns
   */
-  onHidePanel(listener: (...args: any[]) => void): () => void;
+  onHidePanel(listener: (...args: any[]) => void): IPublicTypeDisposable;

  /**
   * 监听 Widget 显示事件
@ -96,7 +97,7 @@ export interface IPublicApiSkeleton {
   * @param listener
   * @returns
   */
-  onShowWidget(listener: (...args: any[]) => void): () => void;
+  onShowWidget(listener: (...args: any[]) => void): IPublicTypeDisposable;

  /**
   * 监听 Widget 隐藏事件
@ -104,5 +105,5 @@ export interface IPublicApiSkeleton {
   * @param listener
   * @returns
   */
-  onHideWidget(listener: (...args: any[]) => void): () => void;
+  onHideWidget(listener: (...args: any[]) => void): IPublicTypeDisposable;
 }
--- a/packages/types/src/shell/api/workspace.ts
+++ b/packages/types/src/shell/api/workspace.ts
@ -1,5 +1,5 @@
 import { IPublicModelWindow } from '../model';
-import { IPublicApiPlugins, IPublicModelResource, IPublicResourceList, IPublicTypeResourceType } from '@alilc/lowcode-types';
+import { IPublicApiPlugins, IPublicModelResource, IPublicResourceList, IPublicTypeDisposable, IPublicTypeResourceType } from '@alilc/lowcode-types';

 export interface IPublicApiWorkspace {

@ -21,7 +21,7 @@ export interface IPublicApiWorkspace {
  setResourceList(resourceList: IPublicResourceList): void;

  /** 资源树列表更新事件 */
-  onResourceListChange(fn: (resourceList: IPublicResourceList) => void): () => void;
+  onResourceListChange(fn: (resourceList: IPublicResourceList) => void): () => IPublicTypeDisposable;

  /** 注册资源 */
  registerResourceType(resourceTypeModel: IPublicTypeResourceType): void;
@ -39,8 +39,8 @@ export interface IPublicApiWorkspace {
  removeEditorWindowById(id: string): void;

  /** 窗口新增/删除的事件 */
-  onChangeWindows(fn: () => void): void;
+  onChangeWindows(fn: () => void): IPublicTypeDisposable;

  /** active 窗口变更事件 */
-  onChangeActiveWindow(fn: () => void): void;
+  onChangeActiveWindow(fn: () => void): IPublicTypeDisposable;
 }
--- a/packages/types/src/shell/model/document-model.ts
+++ b/packages/types/src/shell/model/document-model.ts
@ -6,13 +6,6 @@ import { IPublicTypeOnChangeOptions } from '@alilc/lowcode-types';

 export interface IPublicModelDocumentModel {

-  /**
-   * id
-   */
-  get id(): string;
-
-  set id(id);
-
  /**
     * 节点选中区模型实例
     * instance of selection
@ -31,6 +24,13 @@ export interface IPublicModelDocumentModel {
   */
  history: IPublicModelHistory;

+  /**
+   * id
+   */
+  get id(): string;
+
+  set id(id);
+
  /**
   * 获取当前文档所属的 project
   * get project which this documentModel belongs to
@ -166,19 +166,19 @@ export interface IPublicModelDocumentModel {
   * set callback for event on visibility changed for certain node
   * @param fn
   */
-  onChangeNodeVisible(fn: (node: IPublicModelNode, visible: boolean) => void): void;
+  onChangeNodeVisible(fn: (node: IPublicModelNode, visible: boolean) => void): IPublicTypeDisposable;

  /**
   * 当前 document 的节点 children 变更事件
   * @param fn
   */
-  onChangeNodeChildren(fn: (info: IPublicTypeOnChangeOptions) => void): void;
+  onChangeNodeChildren(fn: (info: IPublicTypeOnChangeOptions) => void): IPublicTypeDisposable;

  /**
   * 当前 document 节点属性修改事件
   * @param fn
   */
-  onChangeNodeProp(fn: (info: IPublicTypePropChangeOptions) => void): void;
+  onChangeNodeProp(fn: (info: IPublicTypePropChangeOptions) => void): IPublicTypeDisposable;

  /**
   * import schema event