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

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

change

详情： DSL 发生变更后统一触发，免去分别监听 add / remove / update / move-layer / drag-to。在 editorService.add()、editorService.remove()、editorService.update()、editorService.moveLayer()、editorService.dragTo() 后触发。

回调参数 event 通过 type 区分操作类型，并携带本次变更的节点列表 data，每项包含变更的 node 及其所属的 page（可能为 null）。move-layer 额外携带层级偏移 offset，drag-to 额外携带目标位置 targetIndex / targetParent。

注意

撤销 / 重做（undo / redo）内部同样会经由 add / remove / update 触发本事件；如需区分「用户操作」与「撤销重做」，请配合 history-change 事件判断。

事件回调函数： (event: EditorChangeEvent) => void

查看 EditorChangeEvent 类型定义

/** \`change\` 事件中单个变更项：变更的 node 及其所属的 page（可能为 null）。 */
export interface EditorChangeItem {
  node: MNode;
  page: StoreState['page'];
}

/** \`update\` 类型变更项：node 为前后快照及 form 端变更记录，page 为其所属页面。 */
export interface EditorUpdateChangeItem {
  node: { newNode: MNode; oldNode: MNode; changeRecords?: ChangeRecord[] };
  page: StoreState['page'];
}

/**
 * {@link EditorEvents.change} 的回调参数：以 \`type\` 区分操作类型，并携带对应的操作内容。
 * \`data\` 为本次变更的节点列表，每项包含 node 及其所属的 page（可能为 null）；
 * \`move-layer\` 额外带层级偏移 \`offset\`，\`drag-to\` 额外带目标位置 \`targetIndex\` / \`targetParent\`。
 */
export type EditorChangeEvent =
  | { type: 'add'; data: EditorChangeItem[] }
  | { type: 'remove'; data: EditorChangeItem[] }
  | { type: 'update'; data: EditorUpdateChangeItem[] }
  | { type: 'move-layer'; data: EditorChangeItem[]; offset: number | LayerOffset }
  | { type: 'drag-to'; data: EditorChangeItem[]; targetIndex: number; targetParent: MContainer };

editorService事件 ​

root-change ​

select ​

add ​

remove ​

update ​

move-layer ​

drag-to ​

history-change ​

change ​

editorService事件

root-change

select

add

remove

update

move-layer

drag-to

history-change

change