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

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';

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

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

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)

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);
   }

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),

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

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);
   }
 }

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 {
+  onChangeNodeVisible(fn: (node: IPublicModelNode, visible: boolean) => void): IPublicTypeDisposable {
-    this[documentSymbol].onChangeNodeVisible((node: IPublicModelNode, visible: boolean) => {
+    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 {
+  onChangeNodeChildren(fn: (info: IPublicTypeOnChangeOptions) => void): IPublicTypeDisposable {
-    this[documentSymbol].onChangeNodeChildren((info?: IPublicTypeOnChangeOptions) => {
+    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 {
+  onChangeNodeProp(fn: (info: IPublicTypePropChangeOptions) => void): IPublicTypeDisposable {
-    this[editorSymbol].on(
+    const callback = (info: GlobalEvent.Node.Prop.ChangeOptions) => {
-      GlobalEvent.Node.Prop.InnerChange,
-      (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,
+      );
+    };
   }
 
   /**

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;
 }

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;
 }

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;
 }

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