From dbffb30b993a740535a261d9ed9f22faa5517b64 Mon Sep 17 00:00:00 2001 From: Frank Zhao Date: Fri, 3 Feb 2023 11:37:23 +0800 Subject: [PATCH 1/6] Update README.md Add contribution leaderboard badge to README --- packages/engine/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/engine/README.md b/packages/engine/README.md index 8ce675923..206b65d6d 100644 --- a/packages/engine/README.md +++ b/packages/engine/README.md @@ -16,6 +16,8 @@ An enterprise-class low-code technology stack with scale-out design [![codecov][codecov-image-url]][codecov-url] +[![](https://img.shields.io/badge/Lowcode%20Engine-Check%20Your%20Contribution-orange)](https://opensource.alibaba.com/contribution_leaderboard/details?projectValue=lowcode-engine) + [npm-image]: https://img.shields.io/npm/v/@alilc/lowcode-engine.svg?style=flat-square [npm-url]: http://npmjs.org/package/@alilc/lowcode-engine @@ -173,4 +175,4 @@ Special thanks to everyone who contributed to this project.

-

\ No newline at end of file +

From 3019a47f24ff113292c123c11ab1afe933bfc953 Mon Sep 17 00:00:00 2001 From: Frank Zhao Date: Fri, 3 Feb 2023 11:43:18 +0800 Subject: [PATCH 2/6] Update README-zh_CN.md Add contribution leaderboard badge to readme --- packages/engine/README-zh_CN.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/engine/README-zh_CN.md b/packages/engine/README-zh_CN.md index 793ee050b..276123391 100644 --- a/packages/engine/README-zh_CN.md +++ b/packages/engine/README-zh_CN.md @@ -15,6 +15,8 @@ [![][issues-helper-image]][issues-helper-url] [![Issues need help][help-wanted-image]][help-wanted-url] [![codecov][codecov-image-url]][codecov-url] + +[![](https://img.shields.io/badge/LowCodeEngine-%E6%9F%A5%E7%9C%8B%E8%B4%A1%E7%8C%AE%E6%8E%92%E8%A1%8C%E6%A6%9C-orange)](https://opensource.alibaba.com/contribution_leaderboard/details?projectValue=lowcode-engine) [npm-image]: https://img.shields.io/npm/v/@alilc/lowcode-engine.svg?style=flat-square [npm-url]: http://npmjs.org/package/@alilc/lowcode-engine @@ -173,4 +175,4 @@ lowcode-engine 启动后,提供了几个 umd 文件,可以结合 [lowcode-de

-

\ No newline at end of file +

From b754e61bf8f7e798de70ed4c2ea0fdbac9ee65be Mon Sep 17 00:00:00 2001 From: Frank Zhao Date: Fri, 3 Feb 2023 11:43:49 +0800 Subject: [PATCH 3/6] Update README.md Update badge label --- packages/engine/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/engine/README.md b/packages/engine/README.md index 206b65d6d..4f0543c7a 100644 --- a/packages/engine/README.md +++ b/packages/engine/README.md @@ -16,7 +16,7 @@ An enterprise-class low-code technology stack with scale-out design [![codecov][codecov-image-url]][codecov-url] -[![](https://img.shields.io/badge/Lowcode%20Engine-Check%20Your%20Contribution-orange)](https://opensource.alibaba.com/contribution_leaderboard/details?projectValue=lowcode-engine) +[![](https://img.shields.io/badge/LowCodeEngine-Check%20Your%20Contribution-orange)](https://opensource.alibaba.com/contribution_leaderboard/details?projectValue=lowcode-engine) [npm-image]: https://img.shields.io/npm/v/@alilc/lowcode-engine.svg?style=flat-square [npm-url]: http://npmjs.org/package/@alilc/lowcode-engine From 83562989d57f2eba29d4d5b34e35216e7dbf0941 Mon Sep 17 00:00:00 2001 From: JackLian Date: Mon, 6 Feb 2023 16:00:11 +0800 Subject: [PATCH 4/6] docs: add doc for api/model/component-meta --- docs/docs/api/canvas.md | 4 +- docs/docs/api/model/component-meta.md | 173 ++++++++++++++++++ docs/docs/api/model/resource.md | 4 +- packages/designer/src/component-meta.ts | 9 +- packages/designer/src/designer/designer.ts | 6 +- packages/designer/src/designer/scroller.ts | 22 +-- packages/designer/src/simulator.ts | 4 +- .../src/controllers/pane-controller.ts | 4 +- packages/shell/src/api/canvas.ts | 6 +- packages/shell/src/model/component-meta.ts | 4 +- packages/types/src/shell/api/canvas.ts | 6 +- .../types/src/shell/model/component-meta.ts | 45 +++-- packages/types/src/shell/model/dragon.ts | 2 +- .../types/src/shell/model/engine-config.ts | 2 +- packages/types/src/shell/model/index.ts | 3 +- .../types/src/shell/model/node-children.ts | 1 + packages/types/src/shell/model/preference.ts | 1 + .../src/shell/model/setting-prop-entry.ts | 2 +- .../src/shell/model/setting-top-entry.ts | 1 + .../types/src/shell/type/component-action.ts | 5 + packages/types/src/shell/type/field-config.ts | 8 + packages/types/src/shell/type/index.ts | 3 +- .../src/shell/{model => type}/scrollable.ts | 6 +- 23 files changed, 268 insertions(+), 53 deletions(-) create mode 100644 docs/docs/api/model/component-meta.md rename packages/types/src/shell/{model => type}/scrollable.ts (50%) diff --git a/docs/docs/api/canvas.md b/docs/docs/api/canvas.md index c16ba62c5..582f2354b 100644 --- a/docs/docs/api/canvas.md +++ b/docs/docs/api/canvas.md @@ -62,7 +62,7 @@ createLocation(locationData: IPublicTypeLocationData): IPublicModelDropLocation; ```typescript /** * 创建一个滚动控制器 Scroller,赋予一个视图滚动的基本能力, - * a Scroller is a controller that gives a view (IPublicModelScrollable) the ability scrolling + * a Scroller is a controller that gives a view (IPublicTypeScrollable) the ability scrolling * to some cordination by api scrollTo. * * when a scroller is inited, will need to pass is a scrollable, which has a scrollTarget. @@ -70,7 +70,7 @@ createLocation(locationData: IPublicTypeLocationData): IPublicModelDropLocation; * move scrollTarget`s top-left corner to (options.left, options.top) that passed in. * @since v1.1.0 */ -createScroller(scrollable: IPublicModelScrollable): IPublicModelScroller; +createScroller(scrollable: IPublicTypeScrollable): IPublicModelScroller; ``` diff --git a/docs/docs/api/model/component-meta.md b/docs/docs/api/model/component-meta.md new file mode 100644 index 000000000..28f7fe740 --- /dev/null +++ b/docs/docs/api/model/component-meta.md @@ -0,0 +1,173 @@ +--- +title: ComponentMeta +sidebar_position: 15 +--- + +> **@types** [IPublicModelComponentMeta](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/component-meta.ts)
+> **@since** v1.0.0 + +## 基本介绍 + +组件元数据信息模型 + +## 属性 + +### componentName + +组件名 + +`@type {string}` + +### isContainer + +是否是「容器型」组件 + +`@type {boolean}` + +### isMinimalRenderUnit +是否是最小渲染单元 + +当组件需要重新渲染时: +- 若为最小渲染单元,则只渲染当前组件, +- 若不为最小渲染单元,则寻找到上层最近的最小渲染单元进行重新渲染,直至根节点。 + +`@type {boolean}` + +### isModal + +是否为「模态框」组件 + +`@type {boolean}` + +### configure + +获取用于设置面板显示用的配置 + +`@type {IPublicTypeFieldConfig[]}` + +相关类型:[IPublicTypeFieldConfig](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/field-config.ts) + +### title + +标题 + +`@type {string | IPublicTypeI18nData | ReactElement}` + +相关类型:[IPublicTypeI18nData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/i18n-data.ts) + +### icon + +图标 + +`@type {IPublicTypeIconType}` + +相关类型:[IPublicTypeIconType](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/icon-type.ts) + +### npm + +组件 npm 信息 + +`@type {IPublicTypeNpmInfo}` + +相关类型:[IPublicTypeNpmInfo](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/npm-info.ts) + +### availableActions + +获取元数据 + +`@type {IPublicTypeTransformedComponentMetadata}` + +相关类型:[IPublicTypeTransformedComponentMetadata](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/transformed-component-metadata.ts) + +### advanced + +组件元数据中高级配置部分 + +`@type {IPublicTypeAdvanced}` + +相关类型:[IPublicTypeAdvanced](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/advanced.ts) + +## 方法 + +### setNpm + +设置 npm 信息 + +```typescript +/** + * 设置 npm 信息 + * set method for npm inforamtion + * @param npm + */ +setNpm(npm: IPublicTypeNpmInfo): void; +``` + +相关类型:[IPublicTypeNpmInfo](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/npm-info.ts) + +### getMetadata + +获取元数据 + +```typescript +/** + * 获取元数据 + * get component metadata + */ +getMetadata(): IPublicTypeTransformedComponentMetadata; +``` + +相关类型:[IPublicTypeTransformedComponentMetadata](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/transformed-component-metadata.ts) + +### checkNestingUp + +检测当前对应节点是否可被放置在父节点中 + +```typescript +/** + * 检测当前对应节点是否可被放置在父节点中 + * check if the current node could be placed in parent node + * @param my 当前节点 + * @param parent 父节点 + */ +checkNestingUp(my: IPublicModelNode | IPublicTypeNodeData, parent: any): boolean; +``` + +相关类型: +- [IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) +- [IPublicTypeNodeData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-data.ts) + + +### checkNestingDown + +检测目标节点是否可被放置在父节点中 + +```typescript +/** + * 检测目标节点是否可被放置在父节点中 + * check if the target node(s) could be placed in current node + * @param my 当前节点 + * @param parent 父节点 + */ +checkNestingDown( + my: IPublicModelNode | IPublicTypeNodeData, + target: IPublicTypeNodeSchema | IPublicModelNode | IPublicTypeNodeSchema[], + ): boolean; +``` + +相关类型: +- [IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) +- [IPublicTypeNodeData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-data.ts) +- [IPublicTypeNodeSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-schema.ts) + + +### refreshMetadata + +刷新元数据,会触发元数据的重新解析和刷新 + +```typescript +/** + * 刷新元数据,会触发元数据的重新解析和刷新 + * refresh metadata + */ +refreshMetadata(): void; +``` diff --git a/docs/docs/api/model/resource.md b/docs/docs/api/model/resource.md index 74f8d8f71..397723454 100644 --- a/docs/docs/api/model/resource.md +++ b/docs/docs/api/model/resource.md @@ -4,7 +4,7 @@ sidebar_position: 13 --- > **[@experimental](./#experimental)**
-> **@types** [IPublicModelWindow](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/resource.ts)
+> **@types** [IPublicModelResource](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/resource.ts)
> **@since** v1.1.0 ## 属性 @@ -43,4 +43,4 @@ sidebar_position: 13 资源配置信息 -`@type {Object}` \ No newline at end of file +`@type {Object}` diff --git a/packages/designer/src/component-meta.ts b/packages/designer/src/component-meta.ts index 4ca5a24dc..c361b21c9 100644 --- a/packages/designer/src/component-meta.ts +++ b/packages/designer/src/component-meta.ts @@ -110,7 +110,7 @@ export class ComponentMeta implements IComponentMeta { private _transformedMetadata?: IPublicTypeTransformedComponentMetadata; - get configure() { + get configure(): IPublicTypeFieldConfig[] { const config = this._transformedMetadata?.configure; return config?.combined || config?.props || []; } @@ -272,8 +272,11 @@ export class ComponentMeta implements IComponentMeta { this.parseMetadata(this.getMetadata()); } - private transformMetadata(metadta: IPublicTypeComponentMetadata): IPublicTypeTransformedComponentMetadata { - const result = this.designer.componentActions.getRegisteredMetadataTransducers().reduce((prevMetadata, current) => { + private transformMetadata( + metadta: IPublicTypeComponentMetadata, + ): IPublicTypeTransformedComponentMetadata { + const registeredTransducers = this.designer.componentActions.getRegisteredMetadataTransducers(); + const result = registeredTransducers.reduce((prevMetadata, current) => { return current(prevMetadata); }, preprocessMetadata(metadta)); diff --git a/packages/designer/src/designer/designer.ts b/packages/designer/src/designer/designer.ts index 968b54ce5..c39e439aa 100644 --- a/packages/designer/src/designer/designer.ts +++ b/packages/designer/src/designer/designer.ts @@ -12,7 +12,7 @@ import { IPublicTypePropsTransducer, IShellModelFactory, IPublicModelDragObject, - IPublicModelScrollable, + IPublicTypeScrollable, IPublicModelScroller, IPublicTypeLocationData, IPublicEnumTransformStage, @@ -70,7 +70,7 @@ export interface IDesigner { get editor(): IPublicModelEditor; - createScroller(scrollable: IPublicModelScrollable): IPublicModelScroller; + createScroller(scrollable: IPublicTypeScrollable): IPublicModelScroller; /** * 创建插入位置,考虑放到 dragon 中 @@ -302,7 +302,7 @@ export class Designer implements IDesigner { this._dropLocation = undefined; } - createScroller(scrollable: IPublicModelScrollable): IPublicModelScroller { + createScroller(scrollable: IPublicTypeScrollable): IPublicModelScroller { return new Scroller(scrollable); } diff --git a/packages/designer/src/designer/scroller.ts b/packages/designer/src/designer/scroller.ts index b4dc7467e..67efe7f44 100644 --- a/packages/designer/src/designer/scroller.ts +++ b/packages/designer/src/designer/scroller.ts @@ -1,5 +1,5 @@ import { isElement } from '@alilc/lowcode-utils'; -import { IPublicModelScrollTarget, IPublicModelScrollable, IPublicModelScroller } from '@alilc/lowcode-types'; +import { IPublicModelScrollTarget, IPublicTypeScrollable, IPublicModelScroller } from '@alilc/lowcode-types'; export interface IScrollTarget extends IPublicModelScrollTarget { } @@ -13,6 +13,14 @@ export class ScrollTarget implements IScrollTarget { return 'scrollY' in this.target ? this.target.scrollY : this.target.scrollTop; } + private doc?: HTMLElement; + + constructor(private target: Window | Element) { + if (isWindow(target)) { + this.doc = target.document.documentElement; + } + } + scrollTo(options: { left?: number; top?: number }) { this.target.scrollTo(options); } @@ -28,14 +36,6 @@ export class ScrollTarget implements IScrollTarget { get scrollWidth(): number { return ((this.doc || this.target) as any).scrollWidth; } - - private doc?: HTMLElement; - - constructor(private target: Window | Element) { - if (isWindow(target)) { - this.doc = target.document.documentElement; - } - } } function isWindow(obj: any): obj is Window { @@ -53,9 +53,9 @@ export interface IScroller extends IPublicModelScroller { } export class Scroller implements IScroller { private pid: number | undefined; - scrollable: IPublicModelScrollable; + scrollable: IPublicTypeScrollable; - constructor(scrollable: IPublicModelScrollable) { + constructor(scrollable: IPublicTypeScrollable) { this.scrollable = scrollable; } diff --git a/packages/designer/src/simulator.ts b/packages/designer/src/simulator.ts index 642e5ad67..5a2fb8efc 100644 --- a/packages/designer/src/simulator.ts +++ b/packages/designer/src/simulator.ts @@ -1,5 +1,5 @@ import { ComponentType } from 'react'; -import { IPublicTypeComponentMetadata, IPublicTypeNodeSchema, IPublicModelScrollable, IPublicTypeComponentInstance, IPublicModelSensor, IPublicTypeNodeInstance } from '@alilc/lowcode-types'; +import { IPublicTypeComponentMetadata, IPublicTypeNodeSchema, IPublicTypeScrollable, IPublicTypeComponentInstance, IPublicModelSensor, IPublicTypeNodeInstance } from '@alilc/lowcode-types'; import { Point, ScrollTarget, ILocateEvent } from './designer'; import { BuiltinSimulatorRenderer } from './builtin-simulator/renderer'; import { Node, INode } from './document'; @@ -8,7 +8,7 @@ export type AutoFit = '100%'; // eslint-disable-next-line no-redeclare export const AutoFit = '100%'; -export interface IScrollable extends IPublicModelScrollable { +export interface IScrollable extends IPublicTypeScrollable { } export interface IViewport extends IScrollable { diff --git a/packages/plugin-outline-pane/src/controllers/pane-controller.ts b/packages/plugin-outline-pane/src/controllers/pane-controller.ts index 0d565c15f..d3187687a 100644 --- a/packages/plugin-outline-pane/src/controllers/pane-controller.ts +++ b/packages/plugin-outline-pane/src/controllers/pane-controller.ts @@ -8,7 +8,7 @@ import { } from '@alilc/lowcode-utils'; import { IPublicModelDragObject, - IPublicModelScrollable, + IPublicTypeScrollable, IPublicModelSensor, IPublicTypeLocationChildrenDetail, IPublicTypeLocationDetailType, @@ -24,7 +24,7 @@ import { IndentTrack } from '../helper/indent-track'; import DwellTimer from '../helper/dwell-timer'; import { ITreeBoard, TreeMaster } from './tree-master'; -export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicModelScrollable { +export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTypeScrollable { private pluginContext: IPublicModelPluginContext; private treeMaster?: TreeMaster; diff --git a/packages/shell/src/api/canvas.ts b/packages/shell/src/api/canvas.ts index 444894452..d20ebd9d9 100644 --- a/packages/shell/src/api/canvas.ts +++ b/packages/shell/src/api/canvas.ts @@ -2,7 +2,7 @@ import { IPublicApiCanvas, IPublicModelDropLocation, IPublicModelScrollTarget, - IPublicModelScrollable, + IPublicTypeScrollable, IPublicModelScroller, IPublicTypeLocationData, IPublicModelEditor, @@ -58,7 +58,7 @@ export class Canvas implements IPublicApiCanvas { return new InnerScrollTarget(shell); } - createScroller(scrollable: IPublicModelScrollable): IPublicModelScroller { + createScroller(scrollable: IPublicTypeScrollable): IPublicModelScroller { return this[designerSymbol].createScroller(scrollable); } @@ -78,4 +78,4 @@ export class Canvas implements IPublicApiCanvas { get dropLocation() { return ShellDropLocation.create((this[designerSymbol] as any).dropLocation || null); } -} \ No newline at end of file +} diff --git a/packages/shell/src/model/component-meta.ts b/packages/shell/src/model/component-meta.ts index c913c2c0f..448f0584e 100644 --- a/packages/shell/src/model/component-meta.ts +++ b/packages/shell/src/model/component-meta.ts @@ -2,7 +2,7 @@ import { IComponentMeta as InnerComponentMeta, INode, } from '@alilc/lowcode-designer'; -import { IPublicTypeNodeData, IPublicTypeNodeSchema, IPublicModelComponentMeta, IPublicTypeI18nData, IPublicTypeIconType, IPublicTypeNpmInfo, IPublicTypeTransformedComponentMetadata, IPublicModelNode, IPublicTypeAdvanced } from '@alilc/lowcode-types'; +import { IPublicTypeNodeData, IPublicTypeNodeSchema, IPublicModelComponentMeta, IPublicTypeI18nData, IPublicTypeIconType, IPublicTypeNpmInfo, IPublicTypeTransformedComponentMetadata, IPublicModelNode, IPublicTypeAdvanced, IPublicTypeFieldConfig } from '@alilc/lowcode-types'; import { componentMetaSymbol, nodeSymbol } from '../symbols'; import { ReactElement } from 'react'; @@ -56,7 +56,7 @@ export class ComponentMeta implements IPublicModelComponentMeta { /** * 元数据配置 */ - get configure(): any { + get configure(): IPublicTypeFieldConfig[] { return this[componentMetaSymbol].configure; } diff --git a/packages/types/src/shell/api/canvas.ts b/packages/types/src/shell/api/canvas.ts index 33fbc7781..699e1a35d 100644 --- a/packages/types/src/shell/api/canvas.ts +++ b/packages/types/src/shell/api/canvas.ts @@ -1,4 +1,4 @@ -import { IPublicModelDragon, IPublicModelDropLocation, IPublicModelScrollTarget, IPublicModelScrollable, IPublicModelScroller, IPublicModelActiveTracker, IPublicModelClipboard } from '../model'; +import { IPublicModelDragon, IPublicModelDropLocation, IPublicModelScrollTarget, IPublicTypeScrollable, IPublicModelScroller, IPublicModelActiveTracker, IPublicModelClipboard } from '../model'; import { IPublicTypeLocationData } from '../type'; /** @@ -8,7 +8,7 @@ export interface IPublicApiCanvas { /** * 创一个滚动控制器 Scroller,赋予一个视图滚动的基本能力, - * a Scroller is a controller that gives a view (IPublicModelScrollable) the ability scrolling + * a Scroller is a controller that gives a view (IPublicTypeScrollable) the ability scrolling * to some cordination by api scrollTo. * * when a scroller is inited, will need to pass is a scrollable, which has a scrollTarget. @@ -16,7 +16,7 @@ export interface IPublicApiCanvas { * move scrollTarget`s top-left corner to (options.left, options.top) that passed in. * @since v1.1.0 */ - createScroller(scrollable: IPublicModelScrollable): IPublicModelScroller; + createScroller(scrollable: IPublicTypeScrollable): IPublicModelScroller; /** * 创建一个 ScrollTarget,与 Scroller 一起发挥作用,详见 createScroller 中的描述 diff --git a/packages/types/src/shell/model/component-meta.ts b/packages/types/src/shell/model/component-meta.ts index 7a5f3fa8c..369680fd6 100644 --- a/packages/types/src/shell/model/component-meta.ts +++ b/packages/types/src/shell/model/component-meta.ts @@ -1,4 +1,4 @@ -import { IPublicTypeNodeSchema, IPublicTypeNodeData, IPublicTypeIconType, IPublicTypeTransformedComponentMetadata, IPublicTypeI18nData, IPublicTypeNpmInfo, IPublicTypeAdvanced } from '../type'; +import { IPublicTypeNodeSchema, IPublicTypeNodeData, IPublicTypeIconType, IPublicTypeTransformedComponentMetadata, IPublicTypeI18nData, IPublicTypeNpmInfo, IPublicTypeAdvanced, IPublicTypeFieldConfig, IPublicTypeComponentAction } from '../type'; import { ReactElement } from 'react'; import { IPublicModelNode } from './node'; @@ -6,11 +6,13 @@ export interface IPublicModelComponentMeta { /** * 组件名 + * component name */ get componentName(): string; /** * 是否是「容器型」组件 + * is container node or not */ get isContainer(): boolean; @@ -19,37 +21,53 @@ export interface IPublicModelComponentMeta { * 当组件需要重新渲染时: * 若为最小渲染单元,则只渲染当前组件, * 若不为最小渲染单元,则寻找到上层最近的最小渲染单元进行重新渲染,直至根节点。 + * + * check if this is a mininal render unit. + * when a rerender is needed for a component: + * case 'it`s a mininal render unit': only render itself. + * case 'it`s not a mininal render unit': find a mininal render unit to render in + * its ancesters until root node is reached. */ get isMinimalRenderUnit(): boolean; /** * 是否为「模态框」组件 + * check if this is a modal component or not. */ get isModal(): boolean; /** - * 元数据配置 + * 获取用于设置面板显示用的配置 + * get configs for Settings Panel */ - get configure(): any; + get configure(): IPublicTypeFieldConfig[]; /** * 标题 + * title for this component */ get title(): string | IPublicTypeI18nData | ReactElement; /** * 图标 + * icon config for this component */ get icon(): IPublicTypeIconType; /** * 组件 npm 信息 + * npm informations */ get npm(): IPublicTypeNpmInfo; - get availableActions(): any; + /** + * 当前组件的可用 Action + * available actions + */ + get availableActions(): IPublicTypeComponentAction[]; /** + * 组件元数据中高级配置部分 * configure.advanced * @since v1.1.0 */ @@ -57,34 +75,39 @@ export interface IPublicModelComponentMeta { /** * 设置 npm 信息 + * set method for npm inforamtion * @param npm */ setNpm(npm: IPublicTypeNpmInfo): void; /** * 获取元数据 - * @returns + * get component metadata */ getMetadata(): IPublicTypeTransformedComponentMetadata; /** + * 检测当前对应节点是否可被放置在父节点中 * check if the current node could be placed in parent node - * @param my - * @param parent - * @returns + * @param my 当前节点 + * @param parent 父节点 */ checkNestingUp(my: IPublicModelNode | IPublicTypeNodeData, parent: any): boolean; /** + * 检测目标节点是否可被放置在父节点中 * check if the target node(s) could be placed in current node - * @param my - * @param parent - * @returns + * @param my 当前节点 + * @param parent 父节点 */ checkNestingDown( my: IPublicModelNode | IPublicTypeNodeData, target: IPublicTypeNodeSchema | IPublicModelNode | IPublicTypeNodeSchema[], ): boolean; + /** + * 刷新元数据,会触发元数据的重新解析和刷新 + * refresh metadata + */ refreshMetadata(): void; } diff --git a/packages/types/src/shell/model/dragon.ts b/packages/types/src/shell/model/dragon.ts index 6a6daf034..602284e63 100644 --- a/packages/types/src/shell/model/dragon.ts +++ b/packages/types/src/shell/model/dragon.ts @@ -3,6 +3,7 @@ import { IPublicTypeDragNodeDataObject, IPublicTypeDragObject } from '../type'; import { IPublicModelDragObject, IPublicModelLocateEvent, IPublicModelNode } from './'; export interface IPublicModelDragon { + /** * 是否正在拖动 * is dragging or not @@ -33,7 +34,6 @@ export interface IPublicModelDragon { */ onDragend(func: (o: { dragObject: IPublicModelDragObject; copy?: boolean }) => any): () => void; - /** * 设置拖拽监听的区域 shell,以及自定义拖拽转换函数 boost * set a html element as shell to dragon as monitoring target, and diff --git a/packages/types/src/shell/model/engine-config.ts b/packages/types/src/shell/model/engine-config.ts index 99d3a9071..2b17d7e72 100644 --- a/packages/types/src/shell/model/engine-config.ts +++ b/packages/types/src/shell/model/engine-config.ts @@ -1,7 +1,7 @@ import { IPublicModelPreference } from './'; - export interface IPublicModelEngineConfig { + /** * 判断指定 key 是否有值 * check if config has certain key configed diff --git a/packages/types/src/shell/model/index.ts b/packages/types/src/shell/model/index.ts index 8f48f68f1..23b6a6431 100644 --- a/packages/types/src/shell/model/index.ts +++ b/packages/types/src/shell/model/index.ts @@ -18,7 +18,6 @@ export * from '../type/plugin'; export * from './window'; export * from './scroll-target'; export * from './scroller'; -export * from './scrollable'; export * from './active-tracker'; export * from './exclusive-group'; export * from './plugin-context'; @@ -29,4 +28,4 @@ export * from './preference'; export * from './plugin-instance'; export * from './sensor'; export * from './resource'; -export * from './clipboard'; \ No newline at end of file +export * from './clipboard'; diff --git a/packages/types/src/shell/model/node-children.ts b/packages/types/src/shell/model/node-children.ts index c6fde9403..d18bf78a3 100644 --- a/packages/types/src/shell/model/node-children.ts +++ b/packages/types/src/shell/model/node-children.ts @@ -3,6 +3,7 @@ import { IPublicEnumTransformStage } from '../enum'; import { IPublicModelNode } from './'; export interface IPublicModelNodeChildren { + /** * 返回当前 children 实例所属的节点实例 * get owner node of this nodeChildren diff --git a/packages/types/src/shell/model/preference.ts b/packages/types/src/shell/model/preference.ts index a58b76573..e200dae9d 100644 --- a/packages/types/src/shell/model/preference.ts +++ b/packages/types/src/shell/model/preference.ts @@ -1,5 +1,6 @@ export interface IPublicModelPreference { + /** * set value from local storage by module and key */ diff --git a/packages/types/src/shell/model/setting-prop-entry.ts b/packages/types/src/shell/model/setting-prop-entry.ts index 90785ff19..f392cda33 100644 --- a/packages/types/src/shell/model/setting-prop-entry.ts +++ b/packages/types/src/shell/model/setting-prop-entry.ts @@ -1,8 +1,8 @@ import { IPublicTypeCustomView, IPublicTypeCompositeValue, IPublicTypeSetterType, IPublicTypeSetValueOptions, IPublicTypeFieldConfig, IPublicTypeFieldExtraProps } from '../type'; import { IPublicModelNode, IPublicModelComponentMeta, IPublicModelSettingTopEntry } from './'; - export interface IPublicModelSettingPropEntry { + /** * 获取设置属性的 isGroup */ diff --git a/packages/types/src/shell/model/setting-top-entry.ts b/packages/types/src/shell/model/setting-top-entry.ts index da2e586d3..b609d24f3 100644 --- a/packages/types/src/shell/model/setting-top-entry.ts +++ b/packages/types/src/shell/model/setting-top-entry.ts @@ -1,6 +1,7 @@ import { IPublicModelNode, IPublicModelSettingPropEntry } from './'; export interface IPublicModelSettingTopEntry { + /** * 返回所属的节点实例 */ diff --git a/packages/types/src/shell/type/component-action.ts b/packages/types/src/shell/type/component-action.ts index 853e82ce0..f86324e7a 100644 --- a/packages/types/src/shell/type/component-action.ts +++ b/packages/types/src/shell/type/component-action.ts @@ -6,23 +6,28 @@ import { IPublicTypeActionContentObject } from './'; */ export interface IPublicTypeComponentAction { + /** * behaviorName */ name: string; + /** * 菜单名称 */ content: string | ReactNode | IPublicTypeActionContentObject; + /** * 子集 */ items?: IPublicTypeComponentAction[]; + /** * 显示与否 * always: 无法禁用 */ condition?: boolean | ((currentNode: any) => boolean) | 'always'; + /** * 显示在工具条上 */ diff --git a/packages/types/src/shell/type/field-config.ts b/packages/types/src/shell/type/field-config.ts index 41b737807..32b40f157 100644 --- a/packages/types/src/shell/type/field-config.ts +++ b/packages/types/src/shell/type/field-config.ts @@ -4,38 +4,46 @@ import { IPublicTypeTitleContent, IPublicTypeSetterType, IPublicTypeFieldExtraPr * 属性面板配置 */ export interface IPublicTypeFieldConfig extends IPublicTypeFieldExtraProps { + /** * 面板配置隶属于单个 field 还是分组 */ type?: 'field' | 'group'; + /** * the name of this setting field, which used in quickEditor */ name: string | number; + /** * the field title * @default sameas .name */ title?: IPublicTypeTitleContent; + /** * 单个属性的 setter 配置 * * the field body contains when .type = 'field' */ setter?: IPublicTypeSetterType | IPublicTypeDynamicSetter; + /** * the setting items which group body contains when .type = 'group' */ items?: IPublicTypeFieldConfig[]; + /** * extra props for field * 其他配置属性(不做流通要求) */ extraProps?: IPublicTypeFieldExtraProps; + /** * @deprecated */ description?: IPublicTypeTitleContent; + /** * @deprecated */ diff --git a/packages/types/src/shell/type/index.ts b/packages/types/src/shell/type/index.ts index a066e1f57..b5dad9bb6 100644 --- a/packages/types/src/shell/type/index.ts +++ b/packages/types/src/shell/type/index.ts @@ -88,4 +88,5 @@ export * from './resource-type'; export * from './resource-type-config'; export * from './editor-view-config'; export * from './hotkey-callback-config'; -export * from './hotkey-callbacks'; \ No newline at end of file +export * from './hotkey-callbacks'; +export * from './scrollable'; diff --git a/packages/types/src/shell/model/scrollable.ts b/packages/types/src/shell/type/scrollable.ts similarity index 50% rename from packages/types/src/shell/model/scrollable.ts rename to packages/types/src/shell/type/scrollable.ts index d97a2984c..b308637e0 100644 --- a/packages/types/src/shell/model/scrollable.ts +++ b/packages/types/src/shell/type/scrollable.ts @@ -1,7 +1,7 @@ -import { IPublicModelScrollTarget } from './'; +import { IPublicModelScrollTarget } from '../model'; -export interface IPublicModelScrollable { +export interface IPublicTypeScrollable { scrollTarget?: IPublicModelScrollTarget | Element; bounds?: DOMRect | null; scale?: number; -} \ No newline at end of file +} From 69ab81a14719db266723b185de46a7047890a11a Mon Sep 17 00:00:00 2001 From: liujuping Date: Mon, 6 Feb 2023 17:24:40 +0800 Subject: [PATCH 5/6] 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 From 59cb9ef30add8d070c35a00715a523dd399ae175 Mon Sep 17 00:00:00 2001 From: haoziqaq <357229046@qq.com> Date: Mon, 6 Feb 2023 18:13:17 +0800 Subject: [PATCH 6/6] fix(designer): fix i18n --- .../src/designer/setting/setting-field.ts | 116 +++++++++++------- packages/designer/src/locale/en-US.json | 3 +- packages/designer/src/locale/zh-CN.json | 3 +- 3 files changed, 79 insertions(+), 43 deletions(-) diff --git a/packages/designer/src/designer/setting/setting-field.ts b/packages/designer/src/designer/setting/setting-field.ts index ab5b8eadb..c8bdf52e8 100644 --- a/packages/designer/src/designer/setting/setting-field.ts +++ b/packages/designer/src/designer/setting/setting-field.ts @@ -1,8 +1,16 @@ -import { IPublicTypeTitleContent, IPublicTypeSetterType, IPublicTypeDynamicSetter, IPublicTypeFieldExtraProps, IPublicTypeFieldConfig, IPublicTypeCustomView, IPublicTypeSetValueOptions } from '@alilc/lowcode-types'; +import { + IPublicTypeTitleContent, + IPublicTypeSetterType, + IPublicTypeDynamicSetter, + IPublicTypeFieldExtraProps, + IPublicTypeFieldConfig, + IPublicTypeCustomView, + IPublicTypeSetValueOptions, +} from '@alilc/lowcode-types'; import { Transducer } from './utils'; import { SettingPropEntry } from './setting-prop-entry'; import { SettingEntry } from './setting-entry'; -import { computed, obx, makeObservable, action, untracked } from '@alilc/lowcode-editor-core'; +import { computed, obx, makeObservable, action, untracked, intl } from '@alilc/lowcode-editor-core'; import { cloneDeep, isCustomView, isDynamicSetter } from '@alilc/lowcode-utils'; function getSettingFieldCollectorKey(parent: SettingEntry, config: IPublicTypeFieldConfig) { @@ -26,44 +34,32 @@ export class SettingField extends SettingPropEntry implements SettingEntry { private _config: IPublicTypeFieldConfig; + private hotValue: any; + + parent: SettingEntry; + extraProps: IPublicTypeFieldExtraProps; // ==== dynamic properties ==== private _title?: IPublicTypeTitleContent; get title() { - // FIXME! intl - return this._title || (typeof this.name === 'number' ? `项目 ${this.name}` : this.name); + return ( + this._title || (typeof this.name === 'number' ? `${intl('Item')} ${this.name}` : this.name) + ); } private _setter?: IPublicTypeSetterType | IPublicTypeDynamicSetter; - @computed get setter(): IPublicTypeSetterType | null { - if (!this._setter) { - return null; - } - if (isDynamicSetter(this._setter)) { - return untracked(() => { - const shellThis = this.internalToShellPropEntry(); - return this._setter.call(shellThis, shellThis); - }); - } - return this._setter; - } - @obx.ref private _expanded = true; - get expanded(): boolean { - return this._expanded; - } + private _items: Array = []; - setExpanded(value: boolean) { - this._expanded = value; - } - - parent: SettingEntry; - - constructor(parent: SettingEntry, config: IPublicTypeFieldConfig, settingFieldCollector?: (name: string | number, field: SettingField) => void) { + constructor( + parent: SettingEntry, + config: IPublicTypeFieldConfig, + settingFieldCollector?: (name: string | number, field: SettingField) => void, + ) { super(parent, config.name, config.type); makeObservable(this); const { title, items, setter, extraProps, ...rest } = config; @@ -90,7 +86,26 @@ export class SettingField extends SettingPropEntry implements SettingEntry { this.transducer = new Transducer(this, { setter }); } - private _items: Array = []; + @computed get setter(): IPublicTypeSetterType | null { + if (!this._setter) { + return null; + } + if (isDynamicSetter(this._setter)) { + return untracked(() => { + const shellThis = this.internalToShellPropEntry(); + return this._setter.call(shellThis, shellThis); + }); + } + return this._setter; + } + + get expanded(): boolean { + return this._expanded; + } + + setExpanded(value: boolean) { + this._expanded = value; + } get items(): Array { return this._items; @@ -100,7 +115,13 @@ export class SettingField extends SettingPropEntry implements SettingEntry { return this._config; } - private initItems(items: Array, settingFieldCollector?: { (name: string | number, field: SettingField): void; (name: string, field: SettingField): void }) { + private initItems( + items: Array, + settingFieldCollector?: { + (name: string | number, field: SettingField): void; + (name: string, field: SettingField): void; + }, + ) { this._items = items.map((item) => { if (isCustomView(item)) { return item; @@ -110,7 +131,7 @@ export class SettingField extends SettingPropEntry implements SettingEntry { } private disposeItems() { - this._items.forEach(item => isSettingField(item) && item.purge()); + this._items.forEach((item) => isSettingField(item) && item.purge()); this._items = []; } @@ -125,15 +146,19 @@ export class SettingField extends SettingPropEntry implements SettingEntry { // ======= compatibles for vision ====== - getConfig(configName?: K): IPublicTypeFieldConfig[K] | IPublicTypeFieldConfig { + getConfig( + configName?: K, + ): IPublicTypeFieldConfig[K] | IPublicTypeFieldConfig { if (configName) { return this.config[configName]; } return this._config; } - getItems(filter?: (item: SettingField | IPublicTypeCustomView) => boolean): Array { - return this._items.filter(item => { + getItems( + filter?: (item: SettingField | IPublicTypeCustomView) => boolean, + ): Array { + return this._items.filter((item) => { if (filter) { return filter(item); } @@ -141,10 +166,13 @@ export class SettingField extends SettingPropEntry implements SettingEntry { }); } - private hotValue: any; - @action - setValue(val: any, isHotValue?: boolean, force?: boolean, extraOptions?: IPublicTypeSetValueOptions) { + setValue( + val: any, + isHotValue?: boolean, + force?: boolean, + extraOptions?: IPublicTypeSetValueOptions, + ) { if (isHotValue) { this.setHotValue(val, extraOptions); return; @@ -189,11 +217,16 @@ export class SettingField extends SettingPropEntry implements SettingEntry { } if (this.isUseVariable()) { const oldValue = this.getValue(); - this.setValue({ - type: 'JSExpression', - value: oldValue.value, - mock: value, - }, false, false, options); + this.setValue( + { + type: 'JSExpression', + value: oldValue.value, + mock: value, + }, + false, + false, + options, + ); } else { this.setValue(value, false, false, options); } @@ -210,6 +243,7 @@ export class SettingField extends SettingPropEntry implements SettingEntry { return this.designer.autorun(action, true); } } + /** * @deprecated use same function from '@alilc/lowcode-utils' instead */ diff --git a/packages/designer/src/locale/en-US.json b/packages/designer/src/locale/en-US.json index 50fca66ca..28b489c8a 100644 --- a/packages/designer/src/locale/en-US.json +++ b/packages/designer/src/locale/en-US.json @@ -6,5 +6,6 @@ "unlock": "Unlock", "Condition Group": "Condition Group", "No opened document": "No opened document, open some document to editing", - "locked": "locked" + "locked": "locked", + "Item": "Item" } diff --git a/packages/designer/src/locale/zh-CN.json b/packages/designer/src/locale/zh-CN.json index 50d46dbf2..6ecf79786 100644 --- a/packages/designer/src/locale/zh-CN.json +++ b/packages/designer/src/locale/zh-CN.json @@ -6,5 +6,6 @@ "unlock": "解锁", "Condition Group": "条件组", "No opened document": "没有打开的页面,请选择页面打开编辑", - "locked": "已锁定" + "locked": "已锁定", + "Item": "项目" }