From 69ab81a14719db266723b185de46a7047890a11a Mon Sep 17 00:00:00 2001 From: liujuping Date: Mon, 6 Feb 2023 17:24:40 +0800 Subject: [PATCH] feat: the event supplements the dispose function as the return value --- docs/docs/api/material.md | 5 +- docs/docs/api/model/document-model.md | 14 +++-- docs/docs/api/skeleton.md | 15 +++-- docs/docs/api/workspace.md | 62 +++++++++++-------- packages/designer/src/project/project.ts | 2 - packages/shell/src/api/material.ts | 3 +- packages/shell/src/api/skeleton.ts | 10 +-- packages/shell/src/api/workspace.ts | 8 +-- packages/shell/src/model/document-model.ts | 36 ++++++----- packages/types/src/shell/api/material.ts | 4 +- packages/types/src/shell/api/skeleton.ts | 11 ++-- packages/types/src/shell/api/workspace.ts | 8 +-- .../types/src/shell/model/document-model.ts | 26 ++++---- 13 files changed, 117 insertions(+), 87 deletions(-) diff --git a/docs/docs/api/material.md b/docs/docs/api/material.md index 0732c568e..b52ad8cb2 100644 --- 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'; diff --git a/docs/docs/api/model/document-model.md b/docs/docs/api/model/document-model.md index c9f338609..4da765d30 100644 --- 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 diff --git a/docs/docs/api/skeleton.md b/docs/docs/api/skeleton.md index e7ae391eb..6c8d898ff 100644 --- 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 diff --git a/docs/docs/api/workspace.md b/docs/docs/api/workspace.md index 81301d110..9d9960927 100644 --- 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 打开视图窗口 @@ -135,4 +109,38 @@ removeEditorWindow(resourceName: string, title: string): void; ```typescript removeEditorWindowById(id: string): void; -``` \ No newline at end of file +``` + +## 事件 + +### 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) diff --git a/packages/designer/src/project/project.ts b/packages/designer/src/project/project.ts index 582d5fdeb..082554846 100644 --- 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); } diff --git a/packages/shell/src/api/material.ts b/packages/shell/src/api/material.ts index cfc84620f..fb12ab8c0 100644 --- 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), diff --git a/packages/shell/src/api/skeleton.ts b/packages/shell/src/api/skeleton.ts index 8d5e2dc75..a60746803 100644 --- 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 diff --git a/packages/shell/src/api/workspace.ts b/packages/shell/src/api/workspace.ts index be6eb3ef7..54fccf426 100644 --- 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); } } diff --git a/packages/shell/src/model/document-model.ts b/packages/shell/src/model/document-model.ts index ba371543a..85d44c2cc 100644 --- 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,19 +314,27 @@ export class DocumentModel implements IPublicModelDocumentModel { * 当前 document 节点属性修改事件 * @param fn */ - onChangeNodeProp(fn: (info: IPublicTypePropChangeOptions) => void): void { + onChangeNodeProp(fn: (info: IPublicTypePropChangeOptions) => void): IPublicTypeDisposable { + const callback = (info: GlobalEvent.Node.Prop.ChangeOptions) => { + fn({ + key: info.key, + oldValue: info.oldValue, + newValue: info.newValue, + prop: ShellProp.create(info.prop)!, + node: ShellNode.create(info.node as any)!, + }); + }; this[editorSymbol].on( GlobalEvent.Node.Prop.InnerChange, - (info: GlobalEvent.Node.Prop.ChangeOptions) => { - fn({ - key: info.key, - oldValue: info.oldValue, - newValue: info.newValue, - prop: ShellProp.create(info.prop)!, - node: ShellNode.create(info.node as any)!, - }); - }, + callback, ); + + return () => { + this[editorSymbol].off( + GlobalEvent.Node.Prop.InnerChange, + callback, + ); + }; } /** diff --git a/packages/types/src/shell/api/material.ts b/packages/types/src/shell/api/material.ts index c8834816b..19e42e4a8 100644 --- 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; } diff --git a/packages/types/src/shell/api/skeleton.ts b/packages/types/src/shell/api/skeleton.ts index bfd81532a..5c1f69c02 100644 --- 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; } diff --git a/packages/types/src/shell/api/workspace.ts b/packages/types/src/shell/api/workspace.ts index ca4b3cc34..ee05bbe56 100644 --- 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; } \ No newline at end of file diff --git a/packages/types/src/shell/model/document-model.ts b/packages/types/src/shell/model/document-model.ts index e43d409a9..72d20ceb0 100644 --- a/packages/types/src/shell/model/document-model.ts +++ b/packages/types/src/shell/model/document-model.ts @@ -7,16 +7,9 @@ import { IPublicTypeOnChangeOptions } from '@alilc/lowcode-types'; export interface IPublicModelDocumentModel { /** - * id - */ - get id(): string; - - set id(id); - - /** - * 节点选中区模型实例 - * instance of selection - */ + * 节点选中区模型实例 + * instance of selection + */ selection: IPublicModelSelection; /** @@ -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