@tmagic/editor 1.3.5 → 1.3.7

package/src/services/editor.ts

@@ -17,13 +17,14 @@
  */
 
 import { reactive, toRaw } from 'vue';
-import { cloneDeep, isObject, mergeWith, uniq } from 'lodash-es';
+import { cloneDeep, get, isObject, mergeWith, uniq } from 'lodash-es';
 
-import type { Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
+import { DepTargetType } from '@tmagic/dep';
+import type { Id, MApp, MComponent, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
-import StageCore from '@tmagic/stage';
-import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
+import { getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
 
+import depService from '@editor/services/dep';
 import historyService from '@editor/services/history';
 import storageService, { Protocol } from '@editor/services/storage';
 import type { AddMNode, EditorNodeInfo, PastePosition, StepValue, StoreState, StoreStateKey } from '@editor/type';
@@ -35,8 +36,10 @@ import {
   fixNodePosition,
   getInitPositionStyle,
   getNodeIndex,
+  getPageFragmentList,
+  getPageList,
   isFixed,
-  setChilrenLayout,
+  setChildrenLayout,
   setLayout,
 } from '@editor/utils/editor';
 import { beforePaste, getAddParent } from '@editor/utils/operator';
@@ -52,36 +55,39 @@ class Editor extends BaseService {
     node: null,
     nodes: [],
     stage: null,
+    stageLoading: true,
     highlightNode: null,
     modifiedNodeIds: new Map(),
     pageLength: 0,
+    pageFragmentLength: 0,
+    disabledMultiSelect: false,
   });
   private isHistoryStateChange = false;
 
   constructor() {
     super(
       [
-        'getLayout',
-        'select',
-        'doAdd',
-        'add',
-        'doRemove',
-        'remove',
-        'doUpdate',
-        'update',
-        'sort',
-        'copy',
-        'paste',
-        'doPaste',
-        'doAlignCenter',
-        'alignCenter',
-        'moveLayer',
-        'moveToContainer',
-        'move',
-        'undo',
-        'redo',
-        'highlight',
-        'dragTo',
+        { name: 'getLayout', isAsync: true },
+        { name: 'select', isAsync: true },
+        { name: 'doAdd', isAsync: true },
+        { name: 'add', isAsync: true },
+        { name: 'doRemove', isAsync: true },
+        { name: 'remove', isAsync: true },
+        { name: 'doUpdate', isAsync: true },
+        { name: 'update', isAsync: true },
+        { name: 'sort', isAsync: true },
+        { name: 'copy', isAsync: true },
+        { name: 'paste', isAsync: true },
+        { name: 'doPaste', isAsync: true },
+        { name: 'doAlignCenter', isAsync: true },
+        { name: 'alignCenter', isAsync: true },
+        { name: 'moveLayer', isAsync: true },
+        { name: 'moveToContainer', isAsync: true },
+        { name: 'move', isAsync: true },
+        { name: 'undo', isAsync: true },
+        { name: 'redo', isAsync: true },
+        { name: 'highlight', isAsync: true },
+        { name: 'dragTo', isAsync: true },
       ],
       // 需要注意循环依赖问题，如果函数间有相互调用的话，不能设置为串行调用
       ['select', 'update', 'moveLayer'],
@@ -90,7 +96,7 @@ class Editor extends BaseService {
 
   /**
    * 设置当前指点节点配置
-   * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength'
+   * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength
    * @param value MNode
    */
   public set<K extends StoreStateKey, T extends StoreState[K]>(name: K, value: T) {
@@ -107,10 +113,15 @@ class Editor extends BaseService {
         throw new Error('root 不能为数组');
       }
 
-      if (value && isObject(value) && !(value instanceof StageCore) && !(value instanceof Map)) {
-        this.state.pageLength = value.items?.length || 0;
+      if (value && isObject(value)) {
+        const app = value as MApp;
+        this.state.pageLength = getPageList(app).length || 0;
+        this.state.pageFragmentLength = getPageFragmentList(app).length || 0;
+        this.state.stageLoading = this.state.pageLength !== 0;
       } else {
         this.state.pageLength = 0;
+        this.state.pageFragmentLength = 0;
+        this.state.stageLoading = false;
       }
 
       this.emit('root-change', value, preValue);
@@ -119,7 +130,7 @@ class Editor extends BaseService {
 
   /**
    * 获取当前指点节点配置
-   * @param name  'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength'
+   * @param name  'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength'
    * @returns MNode
    */
   public get<K extends StoreStateKey>(name: K): StoreState[K] {
@@ -161,8 +172,8 @@ class Editor extends BaseService {
     info.parent = path[path.length - 2] as MContainer;
 
     path.forEach((item) => {
-      if (item.type === NodeType.PAGE) {
-        info.page = item as MPage;
+      if (isPage(item) || isPageFragment(item)) {
+        info.page = item as MPage | MPageFragment;
         return;
       }
     });
@@ -310,6 +321,17 @@ class Editor extends BaseService {
     this.set('nodes', nodes);
   }
 
+  public selectRoot() {
+    const root = this.get('root');
+    if (!root) return;
+
+    this.set('nodes', [root]);
+    this.set('parent', null);
+    this.set('page', null);
+    this.set('stage', null);
+    this.set('highlightNode', null);
+  }
+
   public async doAdd(node: MNode, parent: MContainer): Promise<MNode> {
     const root = this.get('root');
 
@@ -320,11 +342,11 @@ class Editor extends BaseService {
 
     if (!curNode) throw new Error('当前选中节点为空');
 
-    if ((parent.type === NodeType.ROOT || curNode?.type === NodeType.ROOT) && node.type !== NodeType.PAGE) {
+    if ((parent.type === NodeType.ROOT || curNode?.type === NodeType.ROOT) && !(isPage(node) || isPageFragment(node))) {
       throw new Error('app下不能添加组件');
     }
 
-    if (parent.id !== curNode.id && node.type !== NodeType.PAGE) {
+    if (parent.id !== curNode.id && !(isPage(node) || isPageFragment(node))) {
       const index = parent.items.indexOf(curNode);
       parent.items?.splice(index + 1, 0, node);
     } else {
@@ -378,7 +400,7 @@ class Editor extends BaseService {
     const newNodes = await Promise.all(
       addNodes.map((node) => {
         const root = this.get('root');
-        if (isPage(node) && root) {
+        if ((isPage(node) || isPageFragment(node)) && root) {
           return this.doAdd(node, root);
         }
         const parentNode = parent && typeof parent !== 'function' ? parent : getAddParent(node);
@@ -397,13 +419,15 @@ class Editor extends BaseService {
 
       if (isPage(newNodes[0])) {
         this.state.pageLength += 1;
+      } else if (isPageFragment(newNodes[0])) {
+        this.state.pageFragmentLength += 1;
       } else {
         // 新增页面，这个时候页面还有渲染出来，此时select会出错，在runtime-ready的时候回去select
         stage?.select(newNodes[0].id);
       }
     }
 
-    if (!isPage(newNodes[0])) {
+    if (!(isPage(newNodes[0]) || isPageFragment(newNodes[0]))) {
       this.pushHistoryState();
     }
 
@@ -416,7 +440,7 @@ class Editor extends BaseService {
     const root = this.get('root');
     if (!root) throw new Error('root不能为空');
 
-    const { parent, node: curNode } = this.getNodeInfo(node.id);
+    const { parent, node: curNode } = this.getNodeInfo(node.id, false);
 
     if (!parent || !curNode) throw new Error('找不要删除的节点');
 
@@ -428,29 +452,38 @@ class Editor extends BaseService {
     const stage = this.get('stage');
     stage?.remove({ id: node.id, parentId: parent.id, root: cloneDeep(root) });
 
-    if (node.type === NodeType.PAGE) {
-      this.state.pageLength -= 1;
-
-      if (root.items[0]) {
-        await this.select(root.items[0]);
-        stage?.select(root.items[0].id);
+    const selectDefault = async (pages: MNode[]) => {
+      if (pages[0]) {
+        await this.select(pages[0]);
+        stage?.select(pages[0].id);
       } else {
-        this.set('nodes', [root]);
-        this.set('parent', null);
-        this.set('page', null);
-        this.set('stage', null);
-        this.set('highlightNode', null);
-        this.resetModifiedNodeId();
-        historyService.reset();
+        this.selectRoot();
 
-        return;
+        historyService.resetPage();
       }
+    };
+
+    const rootItems = root.items || [];
+
+    if (isPage(node)) {
+      this.state.pageLength -= 1;
+
+      await selectDefault(getPageList(root));
+    } else if (isPageFragment(node)) {
+      this.state.pageFragmentLength -= 1;
+
+      await selectDefault(getPageFragmentList(root));
     } else {
       await this.select(parent);
       stage?.select(parent.id);
+
+      this.addModifiedNodeId(parent.id);
     }
 
-    this.addModifiedNodeId(parent.id);
+    if (!rootItems.length) {
+      this.resetModifiedNodeId();
+      historyService.reset();
+    }
   }
 
   /**
@@ -462,7 +495,7 @@ class Editor extends BaseService {
 
     await Promise.all(nodes.map((node) => this.doRemove(node)));
 
-    if (!isPage(nodes[0])) {
+    if (!(isPage(nodes[0]) || isPageFragment(nodes[0]))) {
       // 更新历史记录
       this.pushHistoryState();
     }
@@ -512,7 +545,7 @@ class Editor extends BaseService {
     const newLayout = await this.getLayout(newConfig);
     const layout = await this.getLayout(node);
     if (Array.isArray(newConfig.items) && newLayout !== layout) {
-      newConfig = setChilrenLayout(newConfig as MContainer, newLayout);
+      newConfig = setChildrenLayout(newConfig as MContainer, newLayout);
     }
 
     parentNodeItems[index] = newConfig;
@@ -529,8 +562,8 @@ class Editor extends BaseService {
       root: cloneDeep(root),
     });
 
-    if (newConfig.type === NodeType.PAGE) {
-      this.set('page', newConfig as MPage);
+    if (isPage(newConfig) || isPageFragment(newConfig)) {
+      this.set('page', newConfig as MPage | MPageFragment);
     }
 
     this.addModifiedNodeId(newConfig.id);
@@ -593,12 +626,47 @@ class Editor extends BaseService {
   }
 
   /**
-   * 将组将节点配置转化成string，然后存储到localStorage中
+   * 将组件节点配置存储到localStorage中
    * @param config 组件节点配置
-   * @returns 组件节点配置
+   * @returns
+   */
+  public copy(config: MNode | MNode[]): void {
+    storageService.setItem(COPY_STORAGE_KEY, Array.isArray(config) ? config : [config], {
+      protocol: Protocol.OBJECT,
+    });
+  }
+
+  /**
+   * 复制时会带上组件关联的依赖
+   * @param config 组件节点配置
+   * @returns
    */
-  public async copy(config: MNode | MNode[]): Promise<void> {
-    await storageService.setItem(COPY_STORAGE_KEY, Array.isArray(config) ? config : [config], {
+  public copyWithRelated(config: MNode | MNode[]): void {
+    const copyNodes: MNode[] = Array.isArray(config) ? config : [config];
+    // 关联的组件也一并复制
+    depService.getTarget(DepTargetType.RELATED_COMP_WHEN_COPY, DepTargetType.RELATED_COMP_WHEN_COPY)?.removeDep();
+    depService.collect(copyNodes, true, DepTargetType.RELATED_COMP_WHEN_COPY);
+    const customTarget = depService.getTarget(
+      DepTargetType.RELATED_COMP_WHEN_COPY,
+      DepTargetType.RELATED_COMP_WHEN_COPY,
+    );
+    if (customTarget) {
+      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);
+            }
+          }
+        });
+      });
+    }
+    storageService.setItem(COPY_STORAGE_KEY, copyNodes, {
       protocol: Protocol.OBJECT,
     });
   }
@@ -609,8 +677,7 @@ class Editor extends BaseService {
    * @returns 添加后的组件节点配置
    */
   public async paste(position: PastePosition = {}): Promise<MNode | MNode[] | void> {
-    const config: MNode[] = await storageService.getItem(COPY_STORAGE_KEY);
-
+    const config: MNode[] = storageService.getItem(COPY_STORAGE_KEY);
     if (!Array.isArray(config)) return;
 
     const node = this.get('node');
@@ -623,13 +690,13 @@ class Editor extends BaseService {
         parent = this.get('page');
       }
     }
-
     const pasteConfigs = await this.doPaste(config, position);
-
+    propsService.replaceRelateId(config, pasteConfigs);
     return this.add(pasteConfigs, parent);
   }
 
   public async doPaste(config: MNode[], position: PastePosition = {}): Promise<MNode[]> {
+    propsService.clearRelateId();
     const pasteConfigs = await beforePaste(position, cloneDeep(config));
     return pasteConfigs;
   }

package/src/services/history.ts

@@ -18,7 +18,7 @@
 
 import { reactive } from 'vue';
 
-import type { MPage } from '@tmagic/schema';
+import type { MPage, MPageFragment } from '@tmagic/schema';
 
 import type { HistoryState, StepValue } from '@editor/type';
 import { UndoRedo } from '@editor/utils/undo-redo';
@@ -41,12 +41,16 @@ class History extends BaseService {
 
   public reset() {
     this.state.pageSteps = {};
+    this.resetPage();
+  }
+
+  public resetPage() {
     this.state.pageId = undefined;
     this.state.canRedo = false;
     this.state.canUndo = false;
   }
 
-  public changePage(page: MPage): void {
+  public changePage(page: MPage | MPageFragment): void {
     if (!page) return;
 
     this.state.pageId = page.id;

package/src/services/keybinding.ts

@@ -1,6 +1,6 @@
 import KeyController, { KeyControllerEvent } from 'keycon';
 
-import { isPage } from '@tmagic/utils';
+import { isPage, isPageFragment } from '@tmagic/utils';
 
 import { KeyBindingCacheItem, KeyBindingCommand, KeyBindingItem } from '@editor/type';
 
@@ -19,7 +19,7 @@ class Keybinding extends BaseService {
     [KeyBindingCommand.DELETE_NODE]: () => {
       const nodes = editorService.get('nodes');
 
-      if (!nodes || isPage(nodes[0])) return;
+      if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0])) return;
       editorService.remove(nodes);
     },
     [KeyBindingCommand.COPY_NODE]: () => {
@@ -29,7 +29,7 @@ class Keybinding extends BaseService {
     [KeyBindingCommand.CUT_NODE]: () => {
       const nodes = editorService.get('nodes');
 
-      if (!nodes || isPage(nodes[0])) return;
+      if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0])) return;
       editorService.copy(nodes);
       editorService.remove(nodes);
     },
@@ -84,15 +84,29 @@ class Keybinding extends BaseService {
     },
   };
 
-  public registeCommand(command: string, handler: (e: KeyboardEvent) => void | Promise<void>) {
+  public registerCommand(command: string, handler: (e: KeyboardEvent) => void | Promise<void>) {
     this.commands[command] = handler;
   }
 
-  public unregisteCommand(command: string) {
+  /**
+   * @deprecated
+   */
+  public registeCommand(command: string, handler: (e: KeyboardEvent) => void | Promise<void>) {
+    this.registerCommand(command, handler);
+  }
+
+  public unregisterCommand(command: string) {
     delete this.commands[command];
   }
 
-  public registeEl(name: string, el?: HTMLElement) {
+  /**
+   * @deprecated
+   */
+  public unregisteCommand(command: string) {
+    this.unregisterCommand(command);
+  }
+
+  public registerEl(name: string, el?: HTMLElement) {
     if (name !== 'global' && !el) {
       throw new Error('只有name为global可以不传el');
     }
@@ -102,20 +116,34 @@ class Keybinding extends BaseService {
     this.bind(name);
   }
 
-  public unregisteEl(name: string) {
+  /**
+   * @deprecated
+   */
+  public registeEl(name: string, el?: HTMLElement) {
+    this.registerEl(name, el);
+  }
+
+  public unregisterEl(name: string) {
     this.controllers.get(name)?.destroy();
     this.controllers.delete(name);
     this.bindingList.forEach((item) => {
-      item.binded = false;
+      item.bound = false;
     });
   }
 
-  public registe(maps: KeyBindingItem[]) {
+  /**
+   * @deprecated
+   */
+  public unregisteEl(name: string) {
+    this.unregisterEl(name);
+  }
+
+  public register(maps: KeyBindingItem[]) {
     for (const keybindingItem of maps) {
       const { command, keybinding, when } = keybindingItem;
 
       for (const [type = '', eventType = 'keydown'] of when) {
-        const cacheItem: KeyBindingCacheItem = { type, command, keybinding, eventType, binded: false };
+        const cacheItem: KeyBindingCacheItem = { type, command, keybinding, eventType, bound: false };
 
         this.bindingList.push(cacheItem);
       }
@@ -124,6 +152,13 @@ class Keybinding extends BaseService {
     this.bind();
   }
 
+  /**
+   * @deprecated
+   */
+  public registe(map: KeyBindingItem[]) {
+    this.register(map);
+  }
+
   public reset() {
     this.controllers.forEach((keycon) => {
       keycon.destroy();
@@ -138,13 +173,13 @@ class Keybinding extends BaseService {
 
   private bind(name?: string) {
     for (const item of this.bindingList) {
-      const { type, eventType, command, keybinding, binded } = item;
+      const { type, eventType, command, keybinding, bound } = item;
 
       if (name && name !== type) {
         continue;
       }
 
-      if (binded) {
+      if (bound) {
         continue;
       }
 
@@ -166,7 +201,7 @@ class Keybinding extends BaseService {
         }
       });
 
-      item.binded = true;
+      item.bound = true;
     }
   }
 

package/src/services/props.ts

@@ -17,12 +17,15 @@
  */
 
 import { reactive } from 'vue';
-import { cloneDeep, mergeWith } from 'lodash-es';
+import { cloneDeep, get, mergeWith, set } from 'lodash-es';
 
+import { DepTargetType } from '@tmagic/dep';
 import type { FormConfig } from '@tmagic/form';
-import type { MComponent, MNode } from '@tmagic/schema';
+import type { Id, MComponent, MNode } from '@tmagic/schema';
 import { guid, toLine } from '@tmagic/utils';
 
+import depService from '@editor/services/dep';
+import editorService from '@editor/services/editor';
 import type { PropsState } from '@editor/type';
 import { fillConfig } from '@editor/utils/props';
 
@@ -32,18 +35,19 @@ class Props extends BaseService {
   private state = reactive<PropsState>({
     propsConfigMap: {},
     propsValueMap: {},
+    relateIdMap: {},
   });
 
   constructor() {
     super([
-      'setPropsConfig',
-      'getPropsConfig',
-      'setPropsValue',
-      'getPropsValue',
-      'createId',
-      'setNewItemId',
-      'fillConfig',
-      'getDefaultPropsValue',
+      { name: 'setPropsConfig', isAsync: true },
+      { name: 'getPropsConfig', isAsync: true },
+      { name: 'setPropsValue', isAsync: true },
+      { name: 'getPropsValue', isAsync: true },
+      { name: 'createId', isAsync: false },
+      { name: 'setNewItemId', isAsync: true },
+      { name: 'fillConfig', isAsync: true },
+      { name: 'getDefaultPropsValue', isAsync: true },
     ]);
   }
 
@@ -135,11 +139,17 @@ class Props extends BaseService {
 
   /**
    * 将组件与组件的子元素配置中的id都设置成一个新的ID
+   * 如果没有相同ID并且force为false则保持不变
    * @param {Object} config 组件配置
+   * @param {Boolean} force 是否强制设置新的ID
    */
   /* eslint no-param-reassign: ["error", { "props": false }] */
-  public async setNewItemId(config: MNode) {
-    config.id = await this.createId(config.type || 'component');
+  public async setNewItemId(config: MNode, force = true) {
+    if (force || editorService.getNodeById(config.id)) {
+      const newId = await this.createId(config.type || 'component');
+      this.setRelateId(config.id, newId);
+      config.id = newId;
+    }
 
     if (config.items && Array.isArray(config.items)) {
       for (const item of config.items) {
@@ -176,11 +186,59 @@ class Props extends BaseService {
     this.state.propsValueMap = {};
   }
 
+  /**
+   * 替换关联ID
+   * @param originConfigs 原组件配置
+   * @param targetConfigs 待替换的组件配置
+   */
+  public replaceRelateId(originConfigs: MNode[], targetConfigs: MNode[]) {
+    const relateIdMap = this.getRelateIdMap();
+    if (Object.keys(relateIdMap).length === 0) return;
+    const target = depService.getTarget(DepTargetType.RELATED_COMP_WHEN_COPY, DepTargetType.RELATED_COMP_WHEN_COPY);
+    if (!target) return;
+    originConfigs.forEach((config: MNode) => {
+      const newId = relateIdMap[config.id];
+      const targetConfig = targetConfigs.find((targetConfig) => targetConfig.id === newId);
+      if (!targetConfig) return;
+      target.deps[config.id]?.keys?.forEach((fullKey) => {
+        const relateOriginId = get(config, fullKey);
+        const relateTargetId = relateIdMap[relateOriginId];
+        if (!relateTargetId) return;
+        set(targetConfig, fullKey, relateTargetId);
+      });
+    });
+  }
+
+  /**
+   * 清除setNewItemId前后映射关系
+   */
+  public clearRelateId() {
+    this.state.relateIdMap = {};
+  }
+
   public destroy() {
     this.resetState();
     this.removeAllListeners();
     this.removeAllPlugins();
   }
+
+  /**
+   * 获取setNewItemId前后映射关系
+   * @param oldId 原组件ID
+   * @returns 新旧ID映射
+   */
+  private getRelateIdMap() {
+    return this.state.relateIdMap;
+  }
+
+  /**
+   * 记录setNewItemId前后映射关系
+   * @param oldId 原组件ID
+   * @param newId 分配的新ID
+   */
+  private setRelateId(oldId: Id, newId: Id) {
+    this.state.relateIdMap[oldId] = newId;
+  }
 }
 
 export type PropsService = Props;