Merge branch 'develop' into release/1.1.0-beta

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

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/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)<br/>
+> **@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;
+```

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/model/resource.md

@@ -4,7 +4,7 @@ sidebar_position: 13
 ---
 
 > **[@experimental](./#experimental)**<br/>
-> **@types** [IPublicModelWindow](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/resource.ts)<br/>
+> **@types** [IPublicModelResource](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/resource.ts)<br/>
 > **@since** v1.1.0
 
 ## 属性
@@ -43,4 +43,4 @@ sidebar_position: 13
 
 资源配置信息
 
-`@type {Object}`
+`@type {Object}`

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
 
 打开视图窗口
@@ -135,4 +109,38 @@ 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/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 {
+  private transformMetadata(
-    const result = this.designer.componentActions.getRegisteredMetadataTransducers().reduce((prevMetadata, current) => {
+      metadta: IPublicTypeComponentMetadata,
+    ): IPublicTypeTransformedComponentMetadata {
+    const registeredTransducers = this.designer.componentActions.getRegisteredMetadataTransducers();
+    const result = registeredTransducers.reduce((prevMetadata, current) => {
       return current(prevMetadata);
     }, preprocessMetadata(metadta));
 

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

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

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 (
-    return this._title || (typeof this.name === 'number' ? `项目 ${this.name}` : this.name);
+      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 {
+  private _items: Array<SettingField | IPublicTypeCustomView> = [];
-    return this._expanded;
-  }
 
-  setExpanded(value: boolean) {
+  constructor(
-    this._expanded = value;
+    parent: SettingEntry,
-  }
+    config: IPublicTypeFieldConfig,
-
+    settingFieldCollector?: (name: string | number, field: SettingField) => void,
-  parent: SettingEntry;
+  ) {
-
-  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<SettingField | IPublicTypeCustomView> = [];
+  @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<SettingField | IPublicTypeCustomView> {
     return this._items;
@@ -100,7 +115,13 @@ export class SettingField extends SettingPropEntry implements SettingEntry {
     return this._config;
   }
 
-  private initItems(items: Array<IPublicTypeFieldConfig | IPublicTypeCustomView>, settingFieldCollector?: { (name: string | number, field: SettingField): void; (name: string, field: SettingField): void }) {
+  private initItems(
+    items: Array<IPublicTypeFieldConfig | IPublicTypeCustomView>,
+    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<K extends keyof IPublicTypeFieldConfig>(configName?: K): IPublicTypeFieldConfig[K] | IPublicTypeFieldConfig {
+  getConfig<K extends keyof IPublicTypeFieldConfig>(
+    configName?: K,
+  ): IPublicTypeFieldConfig[K] | IPublicTypeFieldConfig {
     if (configName) {
       return this.config[configName];
     }
     return this._config;
   }
 
-  getItems(filter?: (item: SettingField | IPublicTypeCustomView) => boolean): Array<SettingField | IPublicTypeCustomView> {
+  getItems(
-    return this._items.filter(item => {
+    filter?: (item: SettingField | IPublicTypeCustomView) => boolean,
+  ): Array<SettingField | IPublicTypeCustomView> {
+    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({
+      this.setValue(
-        type: 'JSExpression',
+        {
-        value: oldValue.value,
+          type: 'JSExpression',
-        mock: value,
+          value: oldValue.value,
-      }, false, false, options);
+          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
  */

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

packages/designer/src/locale/zh-CN.json

@@ -6,5 +6,6 @@
   "unlock": "解锁",
   "Condition Group": "条件组",
   "No opened document": "没有打开的页面，请选择页面打开编辑",
-  "locked": "已锁定"
+  "locked": "已锁定",
+  "Item": "项目"
 }

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/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 {
 

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
 
 <p>
 <a href="https://github.com/alibaba/lowcode-engine/graphs/contributors"><img src="https://contrib.rocks/image?repo=alibaba/lowcode-engine" /></a>
-</p>
+</p>

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/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
 
@@ -173,4 +175,4 @@ Special thanks to everyone who contributed to this project.
 
 <p>
 <a href="https://github.com/alibaba/lowcode-engine/graphs/contributors"><img src="https://contrib.rocks/image?repo=alibaba/lowcode-engine" /></a>
-</p>
+</p>

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;

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

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

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,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) => {
+      callback,
-        fn({
-          key: info.key,
-          oldValue: info.oldValue,
-          newValue: info.newValue,
-          prop: ShellProp.create(info.prop)!,
-          node: ShellNode.create(info.node as any)!,
-        });
-      },
     );
+
+    return () => {
+      this[editorSymbol].off(
+        GlobalEvent.Node.Prop.InnerChange,
+        callback,
+      );
+    };
   }
 
   /**

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 中的描述

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/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 my 当前节点
-   * @param parent
+   * @param parent 父节点
-   * @returns
    */
   checkNestingUp(my: IPublicModelNode | IPublicTypeNodeData, parent: any): boolean;
 
   /**
+   * 检测目标节点是否可被放置在父节点中
    * check if the target node(s) could be placed in current node
-   * @param my
+   * @param my 当前节点
-   * @param parent
+   * @param parent 父节点
-   * @returns
    */
   checkNestingDown(
       my: IPublicModelNode | IPublicTypeNodeData,
       target: IPublicTypeNodeSchema | IPublicModelNode | IPublicTypeNodeSchema[],
     ): boolean;
 
+  /**
+   * 刷新元数据，会触发元数据的重新解析和刷新
+   * refresh metadata
+   */
   refreshMetadata(): void;
 }

packages/types/src/shell/model/document-model.ts

@@ -7,16 +7,9 @@ import { IPublicTypeOnChangeOptions } from '@alilc/lowcode-types';
 export interface IPublicModelDocumentModel {
 
   /**
-   * id
+     * 节点选中区模型实例
-   */
+     * instance of selection
-  get id(): string;
+     */
-
-  set id(id);
-
-  /**
-   * 节点选中区模型实例
-   * 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

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

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

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

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

packages/types/src/shell/model/preference.ts

@@ -1,5 +1,6 @@
 
 export interface IPublicModelPreference {
+
   /**
    * set value from local storage by module and key
    */

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
    */

packages/types/src/shell/model/setting-top-entry.ts

@@ -1,6 +1,7 @@
 import { IPublicModelNode, IPublicModelSettingPropEntry } from './';
 
 export interface IPublicModelSettingTopEntry {
+
   /**
    * 返回所属的节点实例
    */

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';
+
   /**
    * 显示在工具条上
    */

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
    */

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';
+export * from './hotkey-callbacks';
+export * from './scrollable';

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