@tmagic/editor 1.7.9 → 1.7.11

package/src/services/editor.ts

@@ -17,23 +17,13 @@
  */
 
 import { reactive, toRaw } from 'vue';
-import { cloneDeep, get, isObject, mergeWith, uniq } from 'lodash-es';
-import type { Writable } from 'type-fest';
+import { cloneDeep, isObject, mergeWith, uniq } from 'lodash-es';
 
 import type { Id, MApp, MContainer, MNode, MPage, MPageFragment, TargetOptions } from '@tmagic/core';
-import { NodeType, Target, Watcher } from '@tmagic/core';
+import { NodeType } from '@tmagic/core';
 import type { ChangeRecord } from '@tmagic/form';
 import { isFixed } from '@tmagic/stage';
-import {
-  calcValueByFontsize,
-  getElById,
-  getNodeInfo,
-  getNodePath,
-  isNumber,
-  isPage,
-  isPageFragment,
-  isPop,
-} from '@tmagic/utils';
+import { getNodeInfo, getNodePath, isPage, isPageFragment } from '@tmagic/utils';
 
 import BaseService from '@editor/services//BaseService';
 import propsService from '@editor/services//props';
@@ -42,69 +32,39 @@ import storageService, { Protocol } from '@editor/services/storage';
 import type {
   AddMNode,
   AsyncHookPlugin,
+  AsyncMethodName,
+  EditorEvents,
   EditorNodeInfo,
+  HistoryOpType,
   PastePosition,
   StepValue,
   StoreState,
   StoreStateKey,
 } from '@editor/type';
-import { LayerOffset, Layout } from '@editor/type';
+import { canUsePluginMethods, LayerOffset, Layout } from '@editor/type';
 import {
-  change2Fixed,
+  calcAlignCenterStyle,
+  calcLayerTargetIndex,
+  calcMoveStyle,
+  classifyDragSources,
+  collectRelatedNodes,
   COPY_STORAGE_KEY,
-  Fixed2Other,
+  editorNodeMergeCustomizer,
   fixNodePosition,
   getInitPositionStyle,
   getNodeIndex,
   getPageFragmentList,
   getPageList,
   moveItemsInContainer,
+  resolveSelectedNode,
   setChildrenLayout,
   setLayout,
+  toggleFixedPosition,
 } from '@editor/utils/editor';
+import type { HistoryOpContext } from '@editor/utils/editor-history';
+import { applyHistoryAddOp, applyHistoryRemoveOp, applyHistoryUpdateOp } from '@editor/utils/editor-history';
 import { beforePaste, getAddParent } from '@editor/utils/operator';
 
-export interface EditorEvents {
-  'root-change': [value: StoreState['root'], preValue?: StoreState['root']];
-  select: [node: MNode | null];
-  add: [nodes: MNode[]];
-  remove: [nodes: MNode[]];
-  update: [nodes: { newNode: MNode; oldNode: MNode; changeRecords?: ChangeRecord[] }[]];
-  'move-layer': [offset: number | LayerOffset];
-  'drag-to': [data: { targetIndex: number; configs: MNode | MNode[]; targetParent: MContainer }];
-  'history-change': [data: MPage | MPageFragment];
-}
-
-const canUsePluginMethods = {
-  async: [
-    'getLayout',
-    'highlight',
-    'select',
-    'multiSelect',
-    'doAdd',
-    'add',
-    'doRemove',
-    'remove',
-    'doUpdate',
-    'update',
-    'sort',
-    'copy',
-    'paste',
-    'doPaste',
-    'doAlignCenter',
-    'alignCenter',
-    'moveLayer',
-    'moveToContainer',
-    'dragTo',
-    'undo',
-    'redo',
-    'move',
-  ] as const,
-  sync: [],
-};
-
-type AsyncMethodName = Writable<(typeof canUsePluginMethods)['async']>;
-
 class Editor extends BaseService {
   public state: StoreState = reactive({
     root: null,
@@ -121,6 +81,7 @@ class Editor extends BaseService {
     disabledMultiSelect: false,
   });
   private isHistoryStateChange = false;
+  private selectionBeforeOp: Id[] | null = null;
 
   constructor() {
     super(
@@ -390,6 +351,8 @@ class Editor extends BaseService {
    * @returns 添加后的节点
    */
   public async add(addNode: AddMNode | MNode[], parent?: MContainer | null): Promise<MNode | MNode[]> {
+    this.captureSelectionBeforeOp();
+
     const stage = this.get('stage');
 
     // 新增多个组件只存在于粘贴多个组件,粘贴的是一个完整的config,所以不再需要getPropsValue
@@ -435,7 +398,21 @@ class Editor extends BaseService {
     }
 
     if (!(isPage(newNodes[0]) || isPageFragment(newNodes[0]))) {
-      this.pushHistoryState();
+      const pageForOp = this.getNodeInfo(newNodes[0].id, false).page;
+      this.pushOpHistory(
+        'add',
+        {
+          nodes: newNodes.map((n) => cloneDeep(toRaw(n))),
+          parentId: (this.getParentById(newNodes[0].id, false) ?? this.get('root'))!.id,
+          indexMap: Object.fromEntries(
+            newNodes.map((n) => {
+              const p = this.getParentById(n.id, false) as MContainer;
+              return [n.id, p ? getNodeIndex(n.id, p) : -1];
+            }),
+          ),
+        },
+        { name: pageForOp?.name || '', id: pageForOp!.id },
+      );
     }
 
     this.emit('add', newNodes);
@@ -498,13 +475,33 @@ class Editor extends BaseService {
    * @param {Object} node
    */
   public async remove(nodeOrNodeList: MNode | MNode[]): Promise<void> {
+    this.captureSelectionBeforeOp();
+
     const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
 
+    const removedItems: { node: MNode; parentId: Id; index: number }[] = [];
+    let pageForOp: { name: string; id: Id } | null = null;
+    if (!(isPage(nodes[0]) || isPageFragment(nodes[0]))) {
+      for (const n of nodes) {
+        const { parent, node: curNode, page } = this.getNodeInfo(n.id, false);
+        if (parent && curNode) {
+          if (!pageForOp && page) {
+            pageForOp = { name: page.name || '', id: page.id };
+          }
+          const idx = getNodeIndex(curNode.id, parent);
+          removedItems.push({
+            node: cloneDeep(toRaw(curNode)),
+            parentId: parent.id,
+            index: typeof idx === 'number' ? idx : -1,
+          });
+        }
+      }
+    }
+
     await Promise.all(nodes.map((node) => this.doRemove(node)));
 
-    if (!(isPage(nodes[0]) || isPageFragment(nodes[0]))) {
-      // 更新历史记录
-      this.pushHistoryState();
+    if (removedItems.length > 0 && pageForOp) {
+      this.pushOpHistory('remove', { removedItems }, pageForOp);
     }
 
     this.emit('remove', nodes);
@@ -525,21 +522,9 @@ class Editor extends BaseService {
 
     const node = toRaw(info.node);
 
-    let newConfig = await this.toggleFixedPosition(toRaw(config), node, root);
+    let newConfig = await toggleFixedPosition(toRaw(config), node, root, this.getLayout);
 
-    newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue, key, object: any, source: any) => {
-      if (typeof srcValue === 'undefined' && Object.hasOwn(source, key)) {
-        return '';
-      }
-
-      if (isObject(srcValue) && Array.isArray(objValue)) {
-        // 原来的配置是数组，新的配置是对象，则直接使用新的值
-        return srcValue;
-      }
-      if (Array.isArray(srcValue)) {
-        return srcValue;
-      }
-    });
+    newConfig = mergeWith(cloneDeep(node), newConfig, editorNodeMergeCustomizer);
 
     if (!newConfig.type) throw new Error('配置缺少type值');
 
@@ -597,12 +582,28 @@ class Editor extends BaseService {
     config: MNode | MNode[],
     data: { changeRecords?: ChangeRecord[] } = {},
   ): Promise<MNode | MNode[]> {
+    this.captureSelectionBeforeOp();
+
     const nodes = Array.isArray(config) ? config : [config];
 
     const updateData = await Promise.all(nodes.map((node) => this.doUpdate(node, data)));
 
     if (updateData[0].oldNode?.type !== NodeType.ROOT) {
-      this.pushHistoryState();
+      const curNodes = this.get('nodes');
+      if (!this.isHistoryStateChange && curNodes.length) {
+        const pageForOp = this.getNodeInfo(nodes[0].id, false).page;
+        this.pushOpHistory(
+          'update',
+          {
+            updatedItems: updateData.map((d) => ({
+              oldNode: cloneDeep(d.oldNode),
+              newNode: cloneDeep(toRaw(d.newNode)),
+            })),
+          },
+          { name: pageForOp?.name || '', id: pageForOp!.id },
+        );
+      }
+      this.isHistoryStateChange = false;
     }
 
     this.emit('update', updateData);
@@ -616,6 +617,8 @@ class Editor extends BaseService {
    * @returns void
    */
   public async sort(id1: Id, id2: Id): Promise<void> {
+    this.captureSelectionBeforeOp();
+
     const root = this.get('root');
     if (!root) throw new Error('root为空');
 
@@ -640,9 +643,6 @@ class Editor extends BaseService {
       parentId: parent.id,
       root: cloneDeep(root),
     });
-
-    this.addModifiedNodeId(parent.id);
-    this.pushHistoryState();
   }
 
   /**
@@ -664,31 +664,8 @@ class Editor extends BaseService {
   public copyWithRelated(config: MNode | MNode[], collectorOptions?: TargetOptions): void {
     const copyNodes: MNode[] = Array.isArray(config) ? config : [config];
 
-    // 初始化复制组件相关的依赖收集器
     if (collectorOptions && typeof collectorOptions.isTarget === 'function') {
-      const customTarget = new Target({
-        ...collectorOptions,
-      });
-
-      const coperWatcher = new Watcher();
-
-      coperWatcher.addTarget(customTarget);
-
-      coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
-      Object.keys(customTarget.deps).forEach((nodeId: Id) => {
-        const node = this.getNodeById(nodeId);
-        if (!node) return;
-        customTarget!.deps[nodeId].keys.forEach((key) => {
-          const relateNodeId = get(node, key);
-          const isExist = copyNodes.find((node) => node.id === relateNodeId);
-          if (!isExist) {
-            const relateNode = this.getNodeById(relateNodeId);
-            if (relateNode) {
-              copyNodes.push(relateNode);
-            }
-          }
-        });
-      });
+      collectRelatedNodes(copyNodes, collectorOptions, (id) => this.getNodeById(id));
     }
 
     storageService.setItem(COPY_STORAGE_KEY, copyNodes, {
@@ -733,32 +710,16 @@ class Editor extends BaseService {
 
   public async doAlignCenter(config: MNode): Promise<MNode> {
     const parent = this.getParentById(config.id);
-
     if (!parent) throw new Error('找不到父节点');
 
     const node = cloneDeep(toRaw(config));
     const layout = await this.getLayout(parent, node);
-    if (layout === Layout.RELATIVE) {
-      return config;
-    }
-
-    if (!node.style) return config;
+    const doc = this.get('stage')?.renderer?.contentWindow?.document;
+    const newStyle = calcAlignCenterStyle(node, parent, layout, doc);
 
-    const stage = this.get('stage');
-    const doc = stage?.renderer?.contentWindow?.document;
-
-    if (doc) {
-      const el = getElById()(doc, node.id);
-      const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
-      if (parentEl && el) {
-        node.style.left = calcValueByFontsize(doc, (parentEl.clientWidth - el.clientWidth) / 2);
-        node.style.right = '';
-      }
-    } else if (parent.style && isNumber(parent.style?.width) && isNumber(node.style?.width)) {
-      node.style.left = (parent.style.width - node.style.width) / 2;
-      node.style.right = '';
-    }
+    if (!newStyle) return config;
 
+    node.style = newStyle;
     return node;
   }
 
@@ -789,6 +750,8 @@ class Editor extends BaseService {
    * @param offset 偏移量
    */
   public async moveLayer(offset: number | LayerOffset): Promise<void> {
+    this.captureSelectionBeforeOp();
+
     const root = this.get('root');
     if (!root) throw new Error('root为空');
 
@@ -801,22 +764,16 @@ class Editor extends BaseService {
     const brothers: MNode[] = parent.items || [];
     const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
 
-    // 流式布局与绝对定位布局操作的相反的
     const layout = await this.getLayout(parent, node);
     const isRelative = layout === Layout.RELATIVE;
-
-    let offsetIndex: number;
-    if (offset === LayerOffset.TOP) {
-      offsetIndex = isRelative ? 0 : brothers.length;
-    } else if (offset === LayerOffset.BOTTOM) {
-      offsetIndex = isRelative ? brothers.length : 0;
-    } else {
-      offsetIndex = index + (isRelative ? -offset : offset);
-    }
+    const offsetIndex = calcLayerTargetIndex(index, offset, brothers.length, isRelative);
 
     if ((offsetIndex > 0 && offsetIndex > brothers.length) || offsetIndex < 0) {
       return;
     }
+
+    const oldParent = cloneDeep(toRaw(parent));
+
     brothers.splice(index, 1);
     brothers.splice(offsetIndex, 0, node);
 
@@ -829,7 +786,14 @@ class Editor extends BaseService {
     });
 
     this.addModifiedNodeId(parent.id);
-    this.pushHistoryState();
+    const pageForOp = this.getNodeInfo(node.id, false).page;
+    this.pushOpHistory(
+      'update',
+      {
+        updatedItems: [{ oldNode: oldParent, newNode: cloneDeep(toRaw(parent)) }],
+      },
+      { name: pageForOp?.name || '', id: pageForOp!.id },
+    );
 
     this.emit('move-layer', offset);
   }
@@ -840,12 +804,17 @@ class Editor extends BaseService {
    * @param targetId 容器ID
    */
   public async moveToContainer(config: MNode, targetId: Id): Promise<MNode | undefined> {
+    this.captureSelectionBeforeOp();
+
     const root = this.get('root');
-    const { node, parent } = this.getNodeInfo(config.id, false);
+    const { node, parent, page: pageForOp } = this.getNodeInfo(config.id, false);
     const target = this.getNodeById(targetId, false) as MContainer;
 
     const stage = this.get('stage');
     if (root && node && parent && stage) {
+      const oldSourceParent = cloneDeep(toRaw(parent));
+      const oldTarget = cloneDeep(toRaw(target));
+
       const index = getNodeIndex(node.id, parent);
       parent.items?.splice(index, 1);
 
@@ -876,62 +845,60 @@ class Editor extends BaseService {
 
       this.addModifiedNodeId(target.id);
       this.addModifiedNodeId(parent.id);
-      this.pushHistoryState();
+      this.pushOpHistory(
+        'update',
+        {
+          updatedItems: [
+            { oldNode: oldSourceParent, newNode: cloneDeep(toRaw(parent)) },
+            { oldNode: oldTarget, newNode: cloneDeep(toRaw(target)) },
+          ],
+        },
+        { name: pageForOp?.name || '', id: pageForOp!.id },
+      );
 
       return newConfig;
     }
   }
 
   public async dragTo(config: MNode | MNode[], targetParent: MContainer, targetIndex: number) {
+    this.captureSelectionBeforeOp();
+
     if (!targetParent || !Array.isArray(targetParent.items)) return;
 
     const configs = Array.isArray(config) ? config : [config];
 
-    const sourceIndicesInTargetParent: number[] = [];
-    const sourceOutTargetParent: MNode[] = [];
-
-    const newLayout = await this.getLayout(targetParent);
-
-    // eslint-disable-next-line no-restricted-syntax
-    forConfigs: for (const config of configs) {
-      const { parent, node: curNode } = this.getNodeInfo(config.id, false);
-      if (!parent || !curNode) {
-        continue;
-      }
-
-      const path = getNodePath(curNode.id, parent.items);
-
-      for (const node of path) {
-        if (targetParent.id === node.id) {
-          continue forConfigs;
-        }
+    const beforeSnapshots = new Map<string, MNode>();
+    for (const cfg of configs) {
+      const { parent } = this.getNodeInfo(cfg.id, false);
+      if (parent && !beforeSnapshots.has(`${parent.id}`)) {
+        beforeSnapshots.set(`${parent.id}`, cloneDeep(toRaw(parent)));
       }
+    }
+    if (!beforeSnapshots.has(`${targetParent.id}`)) {
+      beforeSnapshots.set(`${targetParent.id}`, cloneDeep(toRaw(targetParent)));
+    }
 
-      const index = getNodeIndex(curNode.id, parent);
-
-      if (parent.id === targetParent.id) {
-        if (typeof index !== 'number' || index === -1) {
-          return;
-        }
-        sourceIndicesInTargetParent.push(index);
-      } else {
-        const layout = await this.getLayout(parent);
-
-        if (newLayout !== layout) {
-          setLayout(config, newLayout);
-        }
+    const newLayout = await this.getLayout(targetParent);
+    const { sameParentIndices, crossParentConfigs, aborted } = classifyDragSources(configs, targetParent, (id, raw) =>
+      this.getNodeInfo(id, raw),
+    );
+    if (aborted) return;
 
-        parent.items?.splice(index, 1);
-        sourceOutTargetParent.push(config);
-        this.addModifiedNodeId(parent.id);
+    for (const { config: crossConfig, parent } of crossParentConfigs) {
+      const layout = await this.getLayout(parent);
+      if (newLayout !== layout) {
+        setLayout(crossConfig, newLayout);
       }
+      const index = getNodeIndex(crossConfig.id, parent);
+      parent.items?.splice(index, 1);
+      this.addModifiedNodeId(parent.id);
     }
 
-    moveItemsInContainer(sourceIndicesInTargetParent, targetParent, targetIndex);
+    moveItemsInContainer(sameParentIndices, targetParent, targetIndex);
 
-    sourceOutTargetParent.forEach((config, index) => {
-      targetParent.items?.splice(targetIndex + index, 0, config);
-      this.addModifiedNodeId(config.id);
+    crossParentConfigs.forEach(({ config: crossConfig }, index) => {
+      targetParent.items?.splice(targetIndex + index, 0, crossConfig);
+      this.addModifiedNodeId(crossConfig.id);
     });
 
     const page = this.get('page');
@@ -946,28 +913,40 @@ class Editor extends BaseService {
       });
     }
 
-    this.pushHistoryState();
+    const updatedItems: { oldNode: MNode; newNode: MNode }[] = [];
+    for (const oldNode of beforeSnapshots.values()) {
+      const newNode = this.getNodeById(oldNode.id, false);
+      if (newNode) {
+        updatedItems.push({ oldNode, newNode: cloneDeep(toRaw(newNode)) });
+      }
+    }
+    const pageForOp = this.getNodeInfo(configs[0].id, false).page;
+    this.pushOpHistory('update', { updatedItems }, { name: pageForOp?.name || '', id: pageForOp!.id });
 
     this.emit('drag-to', { targetIndex, configs, targetParent });
   }
 
   /**
    * 撤销当前操作
-   * @returns 上一次数据
+   * @returns 被撤销的操作
    */
   public async undo(): Promise<StepValue | null> {
     const value = historyService.undo();
-    await this.changeHistoryState(value);
+    if (value) {
+      await this.applyHistoryOp(value, true);
+    }
     return value;
   }
 
   /**
    * 恢复到下一步
-   * @returns 下一步数据
+   * @returns 被恢复的操作
    */
   public async redo(): Promise<StepValue | null> {
     const value = historyService.redo();
-    await this.changeHistoryState(value);
+    if (value) {
+      await this.applyHistoryOp(value, false);
+    }
     return value;
   }
 
@@ -975,47 +954,10 @@ class Editor extends BaseService {
     const node = toRaw(this.get('node'));
     if (!node || isPage(node)) return;
 
-    const { style, id, type } = node;
-    if (!style || !['absolute', 'fixed'].includes(style.position)) return;
-
-    const update = (style: { [key: string]: any }) =>
-      this.update({
-        id,
-        type,
-        style,
-      });
+    const newStyle = calcMoveStyle(node.style || {}, left, top);
+    if (!newStyle) return;
 
-    if (top) {
-      if (isNumber(style.top)) {
-        update({
-          ...style,
-          top: Number(style.top) + Number(top),
-          bottom: '',
-        });
-      } else if (isNumber(style.bottom)) {
-        update({
-          ...style,
-          bottom: Number(style.bottom) - Number(top),
-          top: '',
-        });
-      }
-    }
-
-    if (left) {
-      if (isNumber(style.left)) {
-        update({
-          ...style,
-          left: Number(style.left) + Number(left),
-          right: '',
-        });
-      } else if (isNumber(style.right)) {
-        update({
-          ...style,
-          right: Number(style.right) - Number(left),
-          left: '',
-        });
-      }
-    }
+    await this.update({ id: node.id, type: node.type, style: newStyle });
   }
 
   public resetState() {
@@ -1068,70 +1010,89 @@ class Editor extends BaseService {
     }
   }
 
-  private pushHistoryState() {
-    const curNode = cloneDeep(toRaw(this.get('node')));
-    const page = this.get('page');
-    if (!this.isHistoryStateChange && curNode && page) {
-      historyService.push({
-        data: cloneDeep(toRaw(page)),
-        modifiedNodeIds: this.get('modifiedNodeIds'),
-        nodeId: curNode.id,
-      });
+  private captureSelectionBeforeOp() {
+    if (this.isHistoryStateChange || this.selectionBeforeOp) return;
+    this.selectionBeforeOp = this.get('nodes').map((n) => n.id);
+  }
+
+  private pushOpHistory(opType: HistoryOpType, extra: Partial<StepValue>, pageData: { name: string; id: Id }) {
+    if (this.isHistoryStateChange) {
+      this.selectionBeforeOp = null;
+      return;
     }
+
+    const step: StepValue = {
+      data: pageData,
+      opType,
+      selectedBefore: this.selectionBeforeOp ?? [],
+      selectedAfter: this.get('nodes').map((n) => n.id),
+      modifiedNodeIds: new Map(this.get('modifiedNodeIds')),
+      ...extra,
+    };
+    historyService.push(step);
+    this.selectionBeforeOp = null;
     this.isHistoryStateChange = false;
   }
 
-  private async changeHistoryState(value: StepValue | null) {
-    if (!value) return;
-
+  /**
+   * 应用历史操作（撤销 / 重做）
+   * @param step 操作记录
+   * @param reverse true = 撤销，false = 重做
+   */
+  private async applyHistoryOp(step: StepValue, reverse: boolean) {
     this.isHistoryStateChange = true;
-    await this.update(value.data);
-    this.set('modifiedNodeIds', value.modifiedNodeIds);
-    setTimeout(() => {
-      if (!value.nodeId) return;
-      this.select(value.nodeId).then(() => {
-        this.get('stage')?.select(value.nodeId);
-      });
-    }, 0);
-    this.emit('history-change', value.data);
-  }
 
-  private async toggleFixedPosition(dist: MNode, src: MNode, root: MApp) {
-    const newConfig = cloneDeep(dist);
+    const root = this.get('root');
+    const stage = this.get('stage');
+    if (!root) return;
 
-    if (!isPop(src) && newConfig.style?.position) {
-      if (isFixed(newConfig.style) && !isFixed(src.style || {})) {
-        newConfig.style = change2Fixed(newConfig, root);
-      } else if (!isFixed(newConfig.style) && isFixed(src.style || {})) {
-        newConfig.style = await Fixed2Other(newConfig, root, this.getLayout);
-      }
+    const ctx: HistoryOpContext = {
+      root,
+      stage,
+      getNodeById: (id, raw) => this.getNodeById(id, raw),
+      getNodeInfo: (id, raw) => this.getNodeInfo(id, raw),
+      setRoot: (r) => this.set('root', r),
+      setPage: (p) => this.set('page', p),
+      getPage: () => this.get('page'),
+    };
+
+    switch (step.opType) {
+      case 'add':
+        await applyHistoryAddOp(step, reverse, ctx);
+        break;
+      case 'remove':
+        await applyHistoryRemoveOp(step, reverse, ctx);
+        break;
+      case 'update':
+        await applyHistoryUpdateOp(step, reverse, ctx);
+        break;
     }
 
-    return newConfig;
-  }
+    this.set('modifiedNodeIds', step.modifiedNodeIds);
 
-  private selectedConfigExceptionHandler(config: MNode | Id): EditorNodeInfo {
-    let id: Id;
-    if (typeof config === 'string' || typeof config === 'number') {
-      id = config;
-    } else {
-      id = config.id;
-    }
-    if (!id) {
-      throw new Error('没有ID，无法选中');
+    const page = toRaw(this.get('page'));
+    if (page) {
+      const selectIds = reverse ? step.selectedBefore : step.selectedAfter;
+      setTimeout(() => {
+        if (!selectIds.length) return;
+
+        if (selectIds.length > 1) {
+          this.multiSelect(selectIds);
+          stage?.multiSelect(selectIds);
+        } else {
+          this.select(selectIds[0])
+            .then(() => stage?.select(selectIds[0]))
+            .catch(() => {});
+        }
+      }, 0);
+      this.emit('history-change', page as MPage | MPageFragment);
     }
 
-    const { node, parent, page } = this.getNodeInfo(id);
-    if (!node) throw new Error('获取不到组件信息');
+    this.isHistoryStateChange = false;
+  }
 
-    if (node.id === this.state.root?.id) {
-      throw new Error('不能选根节点');
-    }
-    return {
-      node,
-      parent,
-      page,
-    };
+  private selectedConfigExceptionHandler(config: MNode | Id): EditorNodeInfo {
+    return resolveSelectedNode(config, (id) => this.getNodeInfo(id), this.state.root?.id);
   }
 }