@tmagic/editor 1.7.14-beta.1 → 1.7.14-beta.3

package/src/services/editor.ts

@@ -65,6 +65,25 @@ import type { HistoryOpContext } from '@editor/utils/editor-history';
 import { applyHistoryAddOp, applyHistoryRemoveOp, applyHistoryUpdateOp } from '@editor/utils/editor-history';
 import { beforePaste, getAddParent } from '@editor/utils/operator';
 
+/**
+ * 经过 BaseService 的插件 / 中间件包装后，源方法的最后一个形参可能被注入为 dispatch 函数
+ * 当 options 形参位置被注入为函数（或为 null）时，将其归一为空对象，避免后续逻辑误读
+ */
+const safeOptions = <T extends object>(options: unknown): T => {
+  const empty = {};
+  if (!options || typeof options === 'function') return empty as T;
+  return options as T;
+};
+
+/**
+ * 经过 BaseService 的插件 / 中间件包装后，源方法的形参可能被注入为 dispatch 函数
+ * 当 parent 形参位置被注入为函数（或为空值）时，归一为 null，由调用方继续走默认 parent 逻辑
+ */
+const safeParent = (parent: unknown): MContainer | null => {
+  if (!parent || typeof parent === 'function') return null;
+  return parent as MContainer;
+};
+
 class Editor extends BaseService {
   public state: StoreState = reactive({
     root: null,
@@ -349,9 +368,18 @@ class Editor extends BaseService {
    * 向指点容器添加组件节点
    * @param addConfig 将要添加的组件节点配置
    * @param parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
+   * @param options 可选配置
+   * @param options.doNotSelect 添加后是否不更新当前选中节点（默认 false，添加后会选中新增的节点）
    * @returns 添加后的节点
    */
-  public async add(addNode: AddMNode | MNode[], parent?: MContainer | null): Promise<MNode | MNode[]> {
+  public async add(
+    addNode: AddMNode | MNode[],
+    parent?: MContainer | null,
+    options?: { doNotSelect?: boolean },
+  ): Promise<MNode | MNode[]> {
+    const safeParentNode = safeParent(parent);
+    const { doNotSelect = false } = safeOptions<{ doNotSelect?: boolean }>(options);
+
     this.captureSelectionBeforeOp();
 
     const stage = this.get('stage');
@@ -374,25 +402,29 @@ class Editor extends BaseService {
         if ((isPage(node) || isPageFragment(node)) && root) {
           return this.doAdd(node, root);
         }
-        const parentNode = parent && typeof parent !== 'function' ? parent : getAddParent(node);
+        const parentNode = safeParentNode ?? getAddParent(node);
         if (!parentNode) throw new Error('未找到父元素');
         return this.doAdd(node, parentNode);
       }),
     );
 
     if (newNodes.length > 1) {
-      const newNodeIds = newNodes.map((node) => node.id);
-      // 触发选中样式
-      stage?.multiSelect(newNodeIds);
-      await this.multiSelect(newNodeIds);
+      if (!doNotSelect) {
+        const newNodeIds = newNodes.map((node) => node.id);
+        // 触发选中样式
+        stage?.multiSelect(newNodeIds);
+        await this.multiSelect(newNodeIds);
+      }
     } else {
-      await this.select(newNodes[0]);
+      if (!doNotSelect) {
+        await this.select(newNodes[0]);
+      }
 
       if (isPage(newNodes[0])) {
         this.state.pageLength += 1;
       } else if (isPageFragment(newNodes[0])) {
         this.state.pageFragmentLength += 1;
-      } else {
+      } else if (!doNotSelect) {
         // 新增页面，这个时候页面还有渲染出来，此时select会出错，在runtime-ready的时候回去select
         stage?.select(newNodes[0].id);
       }
@@ -421,7 +453,9 @@ class Editor extends BaseService {
     return Array.isArray(addNode) ? newNodes : newNodes[0];
   }
 
-  public async doRemove(node: MNode): Promise<void> {
+  public async doRemove(node: MNode, options?: { doNotSelect?: boolean }): Promise<void> {
+    const { doNotSelect = false } = safeOptions<{ doNotSelect?: boolean }>(options);
+
     const root = this.get('root');
     if (!root) throw new Error('root不能为空');
 
@@ -437,6 +471,24 @@ class Editor extends BaseService {
     const stage = this.get('stage');
     stage?.remove({ id: node.id, parentId: parent.id, root: cloneDeep(root) });
 
+    if (doNotSelect) {
+      // 当被删除节点正好在当前选中列表中时，必须从 state 中移除引用，避免 state 持有已删除节点（与 doNotSelect 无关）
+      const selectedNodes = this.get('nodes');
+      const removedSelectedIndex = selectedNodes.findIndex((n: MNode) => `${n.id}` === `${node.id}`);
+      if (removedSelectedIndex !== -1) {
+        const nextSelected = [...selectedNodes];
+        nextSelected.splice(removedSelectedIndex, 1);
+        this.set('nodes', nextSelected);
+      }
+      // 同理，如果被删除的是当前 page，也清空 state.page，避免持有已删除页面
+      if (isPage(node) || isPageFragment(node)) {
+        const currentPage = this.get('page');
+        if (currentPage && `${currentPage.id}` === `${node.id}`) {
+          this.set('page', null);
+        }
+      }
+    }
+
     const selectDefault = async (pages: MNode[]) => {
       if (pages[0]) {
         await this.select(pages[0]);
@@ -453,14 +505,20 @@ class Editor extends BaseService {
     if (isPage(node)) {
       this.state.pageLength -= 1;
 
-      await selectDefault(rootItems);
+      if (!doNotSelect) {
+        await selectDefault(rootItems);
+      }
     } else if (isPageFragment(node)) {
       this.state.pageFragmentLength -= 1;
 
-      await selectDefault(rootItems);
+      if (!doNotSelect) {
+        await selectDefault(rootItems);
+      }
     } else {
-      await this.select(parent);
-      stage?.select(parent.id);
+      if (!doNotSelect) {
+        await this.select(parent);
+        stage?.select(parent.id);
+      }
 
       this.addModifiedNodeId(parent.id);
     }
@@ -473,9 +531,13 @@ class Editor extends BaseService {
 
   /**
    * 删除组件
-   * @param {Object} node
+   * @param {Object} node 要删除的节点或节点集合
+   * @param options 可选配置
+   * @param options.doNotSelect 删除后是否不更新当前选中节点（默认 false，删除后会选中父节点或首个页面）
    */
-  public async remove(nodeOrNodeList: MNode | MNode[]): Promise<void> {
+  public async remove(nodeOrNodeList: MNode | MNode[], options?: { doNotSelect?: boolean }): Promise<void> {
+    const { doNotSelect = false } = safeOptions<{ doNotSelect?: boolean }>(options);
+
     this.captureSelectionBeforeOp();
 
     const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
@@ -499,7 +561,7 @@ class Editor extends BaseService {
       }
     }
 
-    await Promise.all(nodes.map((node) => this.doRemove(node)));
+    await Promise.all(nodes.map((node) => this.doRemove(node, { doNotSelect })));
 
     if (removedItems.length > 0 && pageForOp) {
       this.pushOpHistory('remove', { removedItems }, pageForOp);
@@ -510,10 +572,7 @@ class Editor extends BaseService {
 
   public async doUpdate(
     config: MNode,
-    {
-      changeRecords = [],
-      selectedAfterUpdate = true,
-    }: { changeRecords?: ChangeRecord[]; selectedAfterUpdate?: boolean } = {},
+    { changeRecords = [] }: { changeRecords?: ChangeRecord[] } = {},
   ): Promise<{ newNode: MNode; oldNode: MNode; changeRecords?: ChangeRecord[] }> {
     const root = this.get('root');
     if (!root) throw new Error('root为空');
@@ -557,12 +616,12 @@ class Editor extends BaseService {
 
     parentNodeItems[index] = newConfig;
 
-    // 将update后的配置更新到nodes中
-    if (selectedAfterUpdate) {
-      const nodes = this.get('nodes');
-      const targetIndex = nodes.findIndex((nodeItem: MNode) => `${nodeItem.id}` === `${newConfig.id}`);
-      nodes.splice(targetIndex, 1, newConfig);
-      this.set('nodes', [...nodes]);
+    // 当被更新节点正好在当前选中列表中时，必须同步引用，否则 state 会持有已被替换的旧节点
+    const selectedNodes = this.get('nodes');
+    const targetIndex = selectedNodes.findIndex((nodeItem: MNode) => `${nodeItem.id}` === `${newConfig.id}`);
+    if (targetIndex !== -1) {
+      selectedNodes.splice(targetIndex, 1, newConfig);
+      this.set('nodes', [...selectedNodes]);
     }
 
     if (isPage(newConfig) || isPageFragment(newConfig)) {
@@ -586,7 +645,7 @@ class Editor extends BaseService {
    */
   public async update(
     config: MNode | MNode[],
-    data: { changeRecords?: ChangeRecord[]; selectedAfterUpdate?: boolean } = {},
+    data: { changeRecords?: ChangeRecord[] } = {},
   ): Promise<MNode | MNode[]> {
     this.captureSelectionBeforeOp();
 
@@ -620,9 +679,13 @@ class Editor extends BaseService {
    * 将id为id1的组件移动到id为id2的组件位置上，例如：[1,2,3,4] -> sort(1,3) -> [2,1,3,4]
    * @param id1 组件ID
    * @param id2 组件ID
+   * @param options 可选配置
+   * @param options.doNotSelect 排序后是否不更新当前选中节点（默认 false）
    * @returns void
    */
-  public async sort(id1: Id, id2: Id): Promise<void> {
+  public async sort(id1: Id, id2: Id, options?: { doNotSelect?: boolean }): Promise<void> {
+    const { doNotSelect = false } = safeOptions<{ doNotSelect?: boolean }>(options);
+
     this.captureSelectionBeforeOp();
 
     const root = this.get('root');
@@ -642,7 +705,9 @@ class Editor extends BaseService {
     parent.items.splice(index2, 0, ...parent.items.splice(index1, 1));
 
     await this.update(parent);
-    await this.select(node);
+    if (!doNotSelect) {
+      await this.select(node);
+    }
 
     this.get('stage')?.update({
       config: cloneDeep(node),
@@ -682,9 +747,18 @@ class Editor extends BaseService {
   /**
    * 从localStorage中获取节点，然后添加到当前容器中
    * @param position 粘贴的坐标
+   * @param collectorOptions 可选的依赖收集器配置
+   * @param options 可选配置
+   * @param options.doNotSelect 粘贴后是否不更新当前选中节点（默认 false）
    * @returns 添加后的组件节点配置
    */
-  public async paste(position: PastePosition = {}, collectorOptions?: TargetOptions): Promise<MNode | MNode[] | void> {
+  public async paste(
+    position: PastePosition = {},
+    collectorOptions?: TargetOptions,
+    options?: { doNotSelect?: boolean },
+  ): Promise<MNode | MNode[] | void> {
+    const { doNotSelect = false } = safeOptions<{ doNotSelect?: boolean }>(options);
+
     const config: MNode[] = storageService.getItem(COPY_STORAGE_KEY);
     if (!Array.isArray(config)) return;
 
@@ -704,7 +778,7 @@ class Editor extends BaseService {
       propsService.replaceRelateId(config, pasteConfigs, collectorOptions);
     }
 
-    return this.add(pasteConfigs, parent);
+    return this.add(pasteConfigs, parent, { doNotSelect });
   }
 
   public async doPaste(config: MNode[], position: PastePosition = {}): Promise<MNode[]> {
@@ -732,9 +806,13 @@ class Editor extends BaseService {
   /**
    * 将指点节点设置居中
    * @param config 组件节点配置
+   * @param options 可选配置
+   * @param options.doNotSelect 居中后是否不更新当前选中节点（默认 false）
    * @returns 当前组件节点配置
    */
-  public async alignCenter(config: MNode | MNode[]): Promise<MNode | MNode[]> {
+  public async alignCenter(config: MNode | MNode[], options?: { doNotSelect?: boolean }): Promise<MNode | MNode[]> {
+    const { doNotSelect = false } = safeOptions<{ doNotSelect?: boolean }>(options);
+
     const nodes = Array.isArray(config) ? config : [config];
     const stage = this.get('stage');
 
@@ -742,10 +820,12 @@ class Editor extends BaseService {
 
     const newNode = await this.update(newNodes);
 
-    if (newNodes.length > 1) {
-      await stage?.multiSelect(newNodes.map((node) => node.id));
-    } else {
-      await stage?.select(newNodes[0].id);
+    if (!doNotSelect) {
+      if (newNodes.length > 1) {
+        await stage?.multiSelect(newNodes.map((node) => node.id));
+      } else {
+        await stage?.select(newNodes[0].id);
+      }
     }
 
     return newNode;
@@ -808,8 +888,16 @@ class Editor extends BaseService {
    * 移动到指定容器中
    * @param config 需要移动的节点
    * @param targetId 容器ID
+   * @param options 可选配置
+   * @param options.doNotSelect 移动后是否不更新当前选中节点（默认 false）
    */
-  public async moveToContainer(config: MNode, targetId: Id): Promise<MNode | undefined> {
+  public async moveToContainer(
+    config: MNode,
+    targetId: Id,
+    options?: { doNotSelect?: boolean },
+  ): Promise<MNode | undefined> {
+    const { doNotSelect = false } = safeOptions<{ doNotSelect?: boolean }>(options);
+
     this.captureSelectionBeforeOp();
 
     const root = this.get('root');
@@ -837,7 +925,9 @@ class Editor extends BaseService {
 
       target.items.push(newConfig);
 
-      await stage.select(targetId);
+      if (!doNotSelect) {
+        await stage.select(targetId);
+      }
 
       const targetParent = this.getParentById(target.id);
       await stage.update({
@@ -846,8 +936,10 @@ class Editor extends BaseService {
         root: cloneDeep(root),
       });
 
-      await this.select(newConfig);
-      stage.select(newConfig.id);
+      if (!doNotSelect) {
+        await this.select(newConfig);
+        stage.select(newConfig.id);
+      }
 
       this.addModifiedNodeId(target.id);
       this.addModifiedNodeId(parent.id);

package/src/theme/nav-menu.scss

@@ -22,6 +22,10 @@
     height: 100%;
     z-index: 1;
     align-items: center;
+    flex-wrap: nowrap;
+    overflow: hidden;
+    position: relative;
+    min-width: 0;
   }
 
   .menu-center {
@@ -32,8 +36,33 @@
     justify-content: flex-end;
   }
 
+  .m-editor-nav-menu-slot-hidden {
+    position: absolute;
+    left: -99999px;
+    top: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .m-editor-nav-menu-more-wrapper {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    height: 100%;
+
+    &.m-editor-nav-menu-more-wrapper-hidden {
+      visibility: hidden;
+      pointer-events: none;
+    }
+  }
+
+  .m-editor-nav-menu-more {
+    flex: 0 0 auto;
+  }
+
   .menu-item {
     flex-direction: row;
+    flex: 0 0 auto;
     -webkit-box-align: center;
     align-items: center;
     vertical-align: middle;
@@ -47,6 +76,7 @@
     transition: all 0.3s ease 0s;
     border-bottom: 2px solid transparent;
     margin: 0;
+    white-space: nowrap;
 
     .is-disabled {
       opacity: 0.5;
@@ -70,6 +100,7 @@
 
     .menu-item-text {
       color: $nav-color;
+      white-space: nowrap;
     }
 
     &.rule {
@@ -84,3 +115,33 @@
     }
   }
 }
+
+.m-editor-nav-menu-popover {
+  .m-editor-nav-menu-overflow-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 4px 0;
+
+    .menu-item {
+      display: flex;
+      align-items: center;
+      padding: 4px 8px;
+      cursor: pointer;
+      border-radius: 4px;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+      }
+
+      &.divider {
+        padding: 0;
+        cursor: default;
+
+        &:hover {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+}

package/src/type.ts

@@ -143,6 +143,7 @@ export interface EditorInstallOptions {
   [key: string]: any;
 }
 
+// #region Services
 export interface Services {
   editorService: EditorService;
   historyService: HistoryService;
@@ -157,6 +158,7 @@ export interface Services {
   keybindingService: KeybindingService;
   stageOverlayService: StageOverlayService;
 }
+// #endregion Services
 
 export interface StageOptions {
   runtimeUrl?: string;
@@ -236,11 +238,13 @@ export interface ComponentGroupState {
   list: ComponentGroup[];
 }
 
+// #region ColumnLayout
 export enum ColumnLayout {
   LEFT = 'left',
   CENTER = 'center',
   RIGHT = 'right',
 }
+// #endregion ColumnLayout
 
 export interface SetColumnWidth {
   [ColumnLayout.LEFT]?: number;
@@ -309,11 +313,13 @@ export interface UiState {
   };
 }
 
+// #region EditorNodeInfo
 export interface EditorNodeInfo {
   node: MNode | null;
   parent: MContainer | null;
   page: MPage | MPageFragment | null;
 }
+// #endregion EditorNodeInfo
 
 export interface AddMNode {
   type: string;
@@ -322,6 +328,7 @@ export interface AddMNode {
   [key: string]: any;
 }
 
+// #region PastePosition
 export interface PastePosition {
   left?: number;
   top?: number;
@@ -334,7 +341,9 @@ export interface PastePosition {
    */
   offsetY?: number;
 }
+// #endregion PastePosition
 
+// #region MenuButton
 /**
  * 菜单按钮
  */
@@ -367,7 +376,9 @@ export interface MenuButton {
   /** 唯一标识，用于高亮 */
   id?: string | number;
 }
+// #endregion MenuButton
 
+// #region MenuComponent
 export interface MenuComponent {
   type: 'component';
   /** Vue3组件 */
@@ -382,6 +393,7 @@ export interface MenuComponent {
   display?: boolean | ((data: Services) => Promise<boolean> | boolean);
   [key: string]: any;
 }
+// #endregion MenuComponent
 
 /**
  * '/': 分隔符
@@ -396,6 +408,7 @@ export interface MenuComponent {
  * 'scale-to-original': 缩放到实际大小
  * 'scale-to-fit': 缩放以适应
  */
+// #region MenuItem
 export type MenuItem =
   | '/'
   | 'delete'
@@ -411,7 +424,9 @@ export type MenuItem =
   | MenuButton
   | MenuComponent
   | string;
+// #endregion MenuItem
 
+// #region MenuBarData
 /** 工具栏 */
 export interface MenuBarData {
   /** 顶部工具栏左边项 */
@@ -421,7 +436,9 @@ export interface MenuBarData {
   /** 顶部工具栏右边项 */
   [ColumnLayout.RIGHT]?: MenuItem[];
 }
+// #endregion MenuBarData
 
+// #region SideComponent
 export interface SideComponent extends MenuComponent {
   /** 显示文案 */
   text: string;
@@ -444,21 +461,27 @@ export interface SideComponent extends MenuComponent {
     props?: Record<string, any>;
   };
 }
+// #endregion SideComponent
 
+// #region SideItemKey
 export enum SideItemKey {
   COMPONENT_LIST = 'component-list',
   LAYER = 'layer',
   CODE_BLOCK = 'code-block',
   DATA_SOURCE = 'data-source',
 }
+// #endregion SideItemKey
 
+// #region SideItem
 /**
  * component-list: 组件列表
  * layer: 已选组件树
  * code-block: 代码块
  */
 export type SideItem = `${SideItemKey}` | SideComponent;
+// #endregion SideItem
 
+// #region SideBarData
 /** 工具栏 */
 export interface SideBarData {
   /** 容器类型 */
@@ -468,7 +491,9 @@ export interface SideBarData {
   /** panel列表 */
   items: SideItem[];
 }
+// #endregion SideBarData
 
+// #region ComponentItem
 export interface ComponentItem {
   /** 显示文案 */
   text: string;
@@ -483,19 +508,23 @@ export interface ComponentItem {
     [key: string]: any;
   };
 }
+// #endregion ComponentItem
 
+// #region ComponentGroup
 export interface ComponentGroup {
   /** 显示文案 */
   title: string;
   /** 组内列表 */
   items: ComponentItem[];
 }
+// #endregion ComponentGroup
 
 export enum LayerOffset {
   TOP = 'top',
   BOTTOM = 'bottom',
 }
 
+// #region Layout
 /** 容器布局 */
 export enum Layout {
   FLEX = 'flex',
@@ -503,6 +532,7 @@ export enum Layout {
   RELATIVE = 'relative',
   ABSOLUTE = 'absolute',
 }
+// #endregion Layout
 
 export enum Keys {
   ESCAPE = 'Space',
@@ -575,8 +605,11 @@ export interface CodeParamStatement {
   [key: string]: any;
 }
 
+// #region HistoryOpType
 export type HistoryOpType = 'add' | 'remove' | 'update';
+// #endregion HistoryOpType
 
+// #region StepValue
 export interface StepValue {
   /** 页面信息 */
   data: { name: string; id: Id };
@@ -597,6 +630,7 @@ export interface StepValue {
   /** opType 'update': 变更前后的节点快照 */
   updatedItems?: { oldNode: MNode; newNode: MNode }[];
 }
+// #endregion StepValue
 
 export interface HistoryState {
   pageId?: Id;
@@ -660,6 +694,7 @@ export interface KeyBindingCacheItem {
   bound: boolean;
 }
 
+// #region DatasourceTypeOption
 /** 可新增的数据源类型选项 */
 export interface DatasourceTypeOption {
   /** 数据源类型 */
@@ -667,6 +702,7 @@ export interface DatasourceTypeOption {
   /** 数据源名称 */
   text: string;
 }
+// #endregion DatasourceTypeOption
 
 /** 组件树节点状态 */
 export interface LayerNodeStatus {
@@ -688,12 +724,14 @@ export enum DragType {
   LAYER_TREE = 'layer-tree',
 }
 
+// #region TreeNodeData
 export interface TreeNodeData {
   id: Id;
   name?: string;
   items?: TreeNodeData[];
   [key: string]: any;
 }
+// #endregion TreeNodeData
 
 /** 判断组件树节点是否可展开（即是否要展示为拥有子节点的形态）的函数 */
 export type IsExpandableFunction = (_data: TreeNodeData, _nodeStatusMap: Map<Id, LayerNodeStatus>) => boolean;
@@ -775,9 +813,12 @@ export interface EventBus extends EventEmitter {
   emit<Name extends keyof EventBusEvent, Param extends EventBusEvent[Name]>(eventName: Name, ...args: Param): boolean;
 }
 
+// #region PropsFormConfigFunction
 export type PropsFormConfigFunction = (data: { editorService: EditorService }) => FormConfig;
+// #endregion PropsFormConfigFunction
 export type PropsFormValueFunction = (data: { editorService: EditorService }) => Partial<MNode>;
 
+// #region PageBarSortOptions
 export type PartSortableOptions = Omit<Options, 'onStart' | 'onUpdate'>;
 export interface PageBarSortOptions extends PartSortableOptions {
   /** 在onUpdate之后调用 */
@@ -785,6 +826,7 @@ export interface PageBarSortOptions extends PartSortableOptions {
   /** 在onStart之前调用 */
   beforeStart?: (event: SortableEvent, sortable: Sortable) => void | Promise<void>;
 }
+// #endregion PageBarSortOptions
 
 export type CustomContentMenuFunction = (
   menus: (MenuButton | MenuComponent)[],

package/src/utils/undo-redo.ts

@@ -18,6 +18,7 @@
 
 import { cloneDeep } from 'lodash-es';
 
+// #region UndoRedo
 export class UndoRedo<T = any> {
   private elementList: T[];
   private listCursor: number;
@@ -75,3 +76,4 @@ export class UndoRedo<T = any> {
     return cloneDeep(this.elementList[this.listCursor - 1]);
   }
 }
+// #endregion UndoRedo