editorService事件

root-change

详情： dsl跟节点发生变化，editorService.set('root', {})后触发

事件回调函数： (value: MApp, preValue?: MApp) => void

查看 MApp 及关联类型定义

export interface MApp extends MComponent {
  /** App页面类型，app作为整个结构的根节点；有且只有一个 */
  type: NodeType.ROOT;
  /** */
  items: (MPage | MPageFragment)[];
  /** 代码块 */
  codeBlocks?: CodeBlockDSL;

  dataSources?: DataSourceSchema[];

  dataSourceDeps?: DataSourceDeps;
  dataSourceCondDeps?: DataSourceDeps;
  dataSourceMethodDeps?: DataSourceDeps;
}

export interface MComponent {
  /** 组件ID，默认为${type}_${number}}形式, 如：page_123 */
  id: Id;
  /** 组件类型 */
  type?: string;
  /** 组件显示名称 */
  name?: string;
  /** 组件根Dom上的class */
  className?: string;
  /* 关联事件集合 */
  events?: EventConfig[];
  /** 是否隐藏 */
  visible?: boolean;
  /** 显示条件中配置的数据源条件的编译结果 */
  condResult?: boolean;
  /** 组件根Dom的style */
  style?: StyleSchema;
  [NODE_CONDS_KEY]?: DisplayCond[];
  [NODE_CONDS_RESULT_KEY]?: boolean;
  [key: string]: any;
}

export enum NodeType {
  /** 容器 */
  CONTAINER = 'container',
  /** 页面 */
  PAGE = 'page',
  /** 根类型 */
  ROOT = 'app',
  /** 页面片 */
  PAGE_FRAGMENT = 'page-fragment',
}

export interface MPage extends MContainer {
  /** 页面类型 */
  type: NodeType.PAGE;
}

export interface MPageFragment extends MContainer {
  /** 页面类型 */
  type: NodeType.PAGE_FRAGMENT;
}

export interface CodeBlockDSL {
  [id: Id]: CodeBlockContent;
}

export interface DataSourceSchema {
  /** 数据源类型，根据类型来实例化；例如http则使用new HttpDataSource */
  type: string;
  /** 实体ID */
  id: string;
  /** 实体名称，用于关联时展示 */
  title?: string;
  /** 实体描述，鼠标hover时展示 */
  description?: string;
  /** 字段列表 */
  fields: DataSchema[];
  /** 方法列表 */
  methods: CodeBlockContent[];
  /** mock数据 */
  mocks?: MockSchema[];
  /** 事件 */
  events: EventConfig[];
  /** 不执行init的环境 */
  disabledInitInJsEngine?: (JsEngine | string)[];
  /** 扩展字段 */
  [key: string]: any;
}

export interface DataSourceDeps {
  [dataSourceId: string | number]: DepData;
}

select

详情： 选中组件，editorService.select()后触发

事件回调函数： (node: MNode) => void

查看 MNode 及关联类型定义

export type MNode = MComponent | MContainer | MIteratorContainer | MPage | MApp | MPageFragment;

export interface MComponent {
  /** 组件ID，默认为${type}_${number}}形式, 如：page_123 */
  id: Id;
  /** 组件类型 */
  type?: string;
  /** 组件显示名称 */
  name?: string;
  /** 组件根Dom上的class */
  className?: string;
  /* 关联事件集合 */
  events?: EventConfig[];
  /** 是否隐藏 */
  visible?: boolean;
  /** 显示条件中配置的数据源条件的编译结果 */
  condResult?: boolean;
  /** 组件根Dom的style */
  style?: StyleSchema;
  [NODE_CONDS_KEY]?: DisplayCond[];
  [NODE_CONDS_RESULT_KEY]?: boolean;
  [key: string]: any;
}

export interface MContainer extends MComponent {
  /** 容器类型，默认为'container' */
  type?: NodeType.CONTAINER | string;
  /** 容器子元素 */
  items: (MComponent | MContainer)[];
}

export interface MPage extends MContainer {
  /** 页面类型 */
  type: NodeType.PAGE;
}

export interface MPageFragment extends MContainer {
  /** 页面类型 */
  type: NodeType.PAGE_FRAGMENT;
}

add

详情： 添加节点后触发，editorService.add()后触发
事件回调函数： (node: MNode[]) => void

remove

详情： 删除节点后触发，editorService.remove()后触发
事件回调函数： (node: MNode[]) => void

update

详情： 更新组件后触发，editorService.update()后触发
事件回调函数： (data: Array<{ newNode: MNode; oldNode: MNode; changeRecords?: ChangeRecord[] }>) => void
查看 ChangeRecord 类型定义
ts
```
export interface ChangeRecord {
  propPath?: string;
  value: any;
}
```

move-layer

详情： 移动节点层级后触发，editorService.moveLayer()后触发
事件回调函数： (offset: number | LayerOffset) => void
其中 LayerOffset 枚举值为 'top' / 'bottom'

drag-to

详情： 拖拽节点到指定容器后触发，editorService.dragTo()后触发

事件回调函数： (data: { targetIndex: number; configs: MNode | MNode[]; targetParent: MContainer }) => void

查看 MContainer 类型定义

export interface MContainer extends MComponent {
  /** 容器类型，默认为'container' */
  type?: NodeType.CONTAINER | string;
  /** 容器子元素 */
  items: (MComponent | MContainer)[];
}

history-change

详情： 历史记录改变，editorService.redo()，editorService.undo()后触发
事件回调函数： (data: MPage | MPageFragment) => void

editorService事件 ​

root-change ​

select ​

add ​

remove ​

update ​

move-layer ​

drag-to ​

history-change ​