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} 各操作类型共有的历史相关字段。 */
export interface EditorChangeEventHistoryMeta {
  /**
   * 本次变更的「历史来源」（调用 DSL 操作时传入的 {@link HistoryOpOptions.historySource}，
   * 撤销 / 重做时则为被应用 step 上记录的 \`source\`），未携带时为 undefined。
   */
  historySource?: HistoryOpSource;
  /**
   * 本次操作是否未写入历史记录（即调用时传入的 {@link HistoryOpOptions.doNotPushHistory}，缺省为 false）；
   * 撤销 / 重做路径补发的事件恒为 true（撤销/重做本身不再入栈）。
   */
  doNotPushHistory?: boolean;
}

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

invalid-node-change

详情： 节点校验错误状态发生变化时触发（记录 / 清除错误、删除节点、整体替换 root、撤销重做还原错误标记等场景均会触发），在 editorService.setInvalidNode()、editorService.deleteInvalidNode()、editorService.resetInvalidNodeId() 及 DSL 操作 / 撤销重做内部调用后触发。

携带当前完整的错误 Map，供非响应式消费方（如自定义工具栏）订阅，实现组件树标红、保存拦截等。需响应式读取（如组件树节点内容）请直接读取 editorService.get('invalidNodeIds')。

事件回调函数： (invalidNodeIds: Map<Id, NodeInvalidInfo>) => void

查看 NodeInvalidInfo 及关联类型定义

/**
 * 节点校验错误信息，按来源（属性表单 / 样式表单）分别保存错误文案。
 * 属性表单与样式表单是两个独立的 FormPanel，均指向同一节点，故以来源为键，
 * 避免某个面板校验通过时误清另一个面板记录的错误。
 * 节点视为存在错误当且仅当任一来源存在非空文本。
 */
export interface NodeInvalidInfo {
  /** 属性表单校验错误文案（可能为包含 <br> 的 HTML） */
  props?: string;
  /** 样式表单校验错误文案（可能为包含 <br> 的 HTML） */
  style?: string;
}

/** 节点校验错误来源 */
export type NodeInvalidSource = keyof NodeInvalidInfo;

export type Id = string | number;

editorService事件 ​

root-change ​

select ​

add ​

remove ​

update ​

move-layer ​

drag-to ​

history-change ​

change ​

invalid-node-change ​

editorService事件

root-change

select

add

remove

update

move-layer

drag-to

history-change

change

invalid-node-change