Merge branch 'develop' into release/1.1.0-beta

2026-03-05 01:37:17 +00:00 · 2023-02-07 11:19:58 +08:00 · 2023-02-07 11:19:58 +08:00 · 174f3d69fe
commit 174f3d69fe
parent 7f419bce69 59cb9ef30a
41 changed files with 469 additions and 184 deletions
--- 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;

 ```

--- a/docs/docs/api/material.md
+++ b/docs/docs/api/material.md
@ -358,8 +358,11 @@ material.getRegisteredMetadataTransducers();
 * add callback for assets changed event
 * @param fn
 */
-onChangeAssets(fn: () => void): void;
+onChangeAssets(fn: () => void): IPublicTypeDisposable;
 ```
+
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
 ##### 示例
 ```typescript
 import { material } from '@alilc/lowcode-engine';
--- a/docs/docs/api/model/component-meta.md
+++ 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)<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;
+```
--- a/docs/docs/api/model/document-model.md
+++ b/docs/docs/api/model/document-model.md
@ -327,27 +327,31 @@ onChangeSelection(fn: (ids: string[]) => void): IPublicTypeDisposable;
 * set callback for event on visibility changed for certain node
 * @param fn
 */
-onChangeNodeVisible(fn: (node: IPublicModelNode, visible: boolean) => void): void;
+onChangeNodeVisible(fn: (node: IPublicModelNode, visible: boolean) => void): IPublicTypeDisposable;
 ```

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

 ### onChangeNodeChildren

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

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

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

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

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

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

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

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

 ### onShowWidget

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

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

 ### onHideWidget

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

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

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

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

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

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

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

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

 打开视图窗口
@ -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)
--- 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));

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

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

--- 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<SettingField | IPublicTypeCustomView> = [];

-  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<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> {
-    return this._items.filter(item => {
+  getItems(
+    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({
-        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
 */
--- 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"
 }
--- 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": "项目"
 }
--- a/packages/designer/src/project/project.ts
+++ b/packages/designer/src/project/project.ts
@ -85,8 +85,6 @@ export class Project implements IProject {
    return this._simulator || null;
  }

-  key = Math.random();
-
  @computed get currentDocument(): IDocumentModel | null {
    return this.documents.find((doc) => doc.active);
  }
--- a/packages/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 {

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

 <p>
 <a href="https://github.com/alibaba/lowcode-engine/graphs/contributors"><img src="https://contrib.rocks/image?repo=alibaba/lowcode-engine" /></a>
-</p>
+</p>
--- 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/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>
--- 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;
--- 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);
  }
-}
+}
--- a/packages/shell/src/api/material.ts
+++ b/packages/shell/src/api/material.ts
@ -12,6 +12,7 @@ import {
  IPublicModelComponentMeta,
  IPublicTypeNpmInfo,
  IPublicModelEditor,
+  IPublicTypeDisposable,
 } from '@alilc/lowcode-types';
 import { Workspace as InnerWorkspace } from '@alilc/lowcode-workspace';
 import { editorSymbol, designerSymbol } from '../symbols';
@ -170,7 +171,7 @@ export class Material implements IPublicApiMaterial {
   * 监听 assets 变化的事件
   * @param fn
   */
-  onChangeAssets(fn: () => void): Function {
+  onChangeAssets(fn: () => void): IPublicTypeDisposable {
    const dispose = [
      // 设置 assets，经过 setAssets 赋值
      this[editorSymbol].onGot('assets', fn),
--- a/packages/shell/src/api/skeleton.ts
+++ b/packages/shell/src/api/skeleton.ts
@ -4,7 +4,7 @@ import {
  SkeletonEvents,
 } from '@alilc/lowcode-editor-skeleton';
 import { skeletonSymbol } from '../symbols';
-import { IPublicApiSkeleton, IPublicTypeWidgetBaseConfig, IPublicTypeWidgetConfigArea } from '@alilc/lowcode-types';
+import { IPublicApiSkeleton, IPublicTypeDisposable, IPublicTypeWidgetBaseConfig, IPublicTypeWidgetConfigArea } from '@alilc/lowcode-types';

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

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

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

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

-  onChangeActiveWindow(fn: () => void) {
+  onChangeActiveWindow(fn: () => void): IPublicTypeDisposable {
    return this[workspaceSymbol].onChangeActiveWindow(fn);
  }
 }
--- a/packages/shell/src/model/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;
  }

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

  /**
--- 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 中的描述
--- a/packages/types/src/shell/api/material.ts
+++ b/packages/types/src/shell/api/material.ts
@ -1,4 +1,4 @@
-import { IPublicTypeAssetsJson, IPublicTypeMetadataTransducer, IPublicTypeComponentAction, IPublicTypeNpmInfo } from '../type';
+import { IPublicTypeAssetsJson, IPublicTypeMetadataTransducer, IPublicTypeComponentAction, IPublicTypeNpmInfo, IPublicTypeDisposable } from '../type';
 import { IPublicModelComponentMeta } from '../model';
 import { ComponentType } from 'react';

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

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

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

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

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

 export interface IPublicApiWorkspace {

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

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

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

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

  /** active 窗口变更事件 */
-  onChangeActiveWindow(fn: () => void): void;
+  onChangeActiveWindow(fn: () => void): IPublicTypeDisposable;
 }
--- a/packages/types/src/shell/model/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;
 }
--- 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
--- 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
--- 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
--- 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';
--- 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
--- 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
   */
--- 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
   */
--- 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 {
+
  /**
   * 返回所属的节点实例
   */
--- 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';
+
  /**
   * 显示在工具条上
   */
--- 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
   */
--- 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';
+export * from './hotkey-callbacks';
+export * from './scrollable';
--- a/packages/types/src/shell/model/scrollable.ts
+++ b/packages/types/src/shell/model/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;
-}
+}