@tmagic/editor 1.2.0-beta.2 → 1.2.0-beta.21

package/src/services/codeBlock.ts

@@ -19,12 +19,12 @@
 import { reactive } from 'vue';
 import { cloneDeep, forIn, isEmpty, keys, omit, pick } from 'lodash-es';
 
-import { Id, MNode } from '@tmagic/schema';
+import { CodeBlockContent, CodeBlockDSL, HookType, Id, MApp, MNode } from '@tmagic/schema';
 
 import editorService from '../services/editor';
-import type { CodeBlockContent, CodeBlockDSL, CodeState } from '../type';
-import { CodeEditorMode, CodeSelectOp } from '../type';
-import { error, info } from '../utils/logger';
+import type { CodeRelation, CodeState, HookData } from '../type';
+import { CODE_DRAFT_STORAGE_KEY, CodeEditorMode } from '../type';
+import { info } from '../utils/logger';
 
 import BaseService from './BaseService';
 
@@ -37,6 +37,7 @@ class CodeBlock extends BaseService {
     mode: CodeEditorMode.EDITOR,
     combineIds: [],
     undeletableList: [],
+    relations: {},
   });
 
   constructor() {
@@ -70,22 +71,27 @@ class CodeBlock extends BaseService {
 
   /**
    * 获取活动的代码块dsl数据源（默认从dsl中的codeBlocks字段读取）
+   * 方法要支持钩子添加扩展，会被重写为异步方法,因此这里显示写为异步以提醒调用者需以异步形式调用
    * @param {boolean} forceRefresh 是否强制从活动dsl拉取刷新
    * @returns {CodeBlockDSL | null}
    */
   public async getCodeDsl(forceRefresh = false): Promise<CodeBlockDSL | null> {
+    return this.getCodeDslSync(forceRefresh);
+  }
+
+  public getCodeDslSync(forceRefresh = false): CodeBlockDSL | null {
     if (!this.state.codeDsl || forceRefresh) {
-      this.state.codeDsl = await editorService.getCodeDsl();
+      this.state.codeDsl = editorService.getCodeDslSync();
     }
     return this.state.codeDsl;
   }
 
   /**
    * 根据代码块id获取代码块内容
-   * @param {string} id 代码块id
+   * @param {Id} id 代码块id
    * @returns {CodeBlockContent | null}
    */
-  public async getCodeContentById(id: string): Promise<CodeBlockContent | null> {
+  public async getCodeContentById(id: Id): Promise<CodeBlockContent | null> {
     if (!id) return null;
     const totalCodeDsl = await this.getCodeDsl();
     if (!totalCodeDsl) return null;
@@ -94,16 +100,24 @@ class CodeBlock extends BaseService {
 
   /**
    * 设置代码块ID和代码内容到源dsl
-   * @param {string} id 代码块id
+   * @param {Id} id 代码块id
    * @param {CodeBlockContent} codeConfig 代码块内容配置信息
    * @returns {void}
    */
-  public async setCodeDslById(id: string, codeConfig: CodeBlockContent): Promise<void> {
+  public async setCodeDslById(id: Id, codeConfig: CodeBlockContent): Promise<void> {
     let codeDsl = await this.getCodeDsl();
+    const codeConfigProcessed = codeConfig;
+    if (codeConfig.content) {
+      // 在保存的时候转换代码内容
+      // eslint-disable-next-line no-eval
+      codeConfigProcessed.content = eval(codeConfig.content);
+    }
     if (!codeDsl) {
       // dsl中无代码块字段
       codeDsl = {
-        [id]: codeConfig,
+        [id]: {
+          ...codeConfigProcessed,
+        },
       };
     } else {
       const existContent = codeDsl[id] || {};
@@ -111,7 +125,7 @@ class CodeBlock extends BaseService {
         ...codeDsl,
         [id]: {
           ...existContent,
-          ...codeConfig,
+          ...codeConfigProcessed,
         },
       };
     }
@@ -148,10 +162,10 @@ class CodeBlock extends BaseService {
   /**
    * 设置代码编辑面板展示状态及展示内容
    * @param {boolean} status 是否展示代码编辑面板
-   * @param {string} id 代码块id
+   * @param {Id} id 代码块id
    * @returns {void}
    */
-  public setCodeEditorContent(status: boolean, id: string): void {
+  public setCodeEditorContent(status: boolean, id: Id): void {
     if (!id) return;
     this.setId(id);
     this.state.isShowCodeEditor = status;
@@ -161,7 +175,7 @@ class CodeBlock extends BaseService {
    * 获取当前选中的代码块内容
    * @returns {CodeBlockContent | null}
    */
-  public async getCurrentDsl() {
+  public async getCurrentDsl(): Promise<CodeBlockContent | null> {
     return await this.getCodeContentById(this.state.id);
   }
 
@@ -184,19 +198,19 @@ class CodeBlock extends BaseService {
 
   /**
    * 设置当前选中的代码块ID
-   * @param {string} id 代码块id
+   * @param {Id} id 代码块id
    * @returns {void}
    */
-  public setId(id: string) {
+  public setId(id: Id): void {
     if (!id) return;
     this.state.id = id;
   }
 
   /**
    * 获取当前选中的代码块ID
-   * @returns {string} id 代码块id
+   * @returns {Id} id 代码块id
    */
-  public getId(): string {
+  public getId(): Id {
     return this.state.id;
   }
 
@@ -235,98 +249,70 @@ class CodeBlock extends BaseService {
   }
 
   /**
-   * 设置绑定关系
-   * @param {Id} 组件id
-   * @param {string[]} diffCodeIds 代码块id数组
-   * @param {CodeSelectOp} opFlag 操作类型
-   * @param {string} hook 代码块挂载hook名称
-   * @returns {void}
+   * 刷新绑定关系
+   * @returns {CodeRelation | null}
    */
-  public async setCombineRelation(compId: Id, diffCodeIds: string[], opFlag: CodeSelectOp, hook: string) {
-    const codeDsl = cloneDeep(await this.getCodeDsl());
-    if (!codeDsl) return;
-    if (opFlag === CodeSelectOp.DELETE) {
-      try {
-        diffCodeIds.forEach((codeId) => {
-          const compsContent = codeDsl[codeId].comps;
-          const index = compsContent?.[compId].findIndex((item) => item === hook);
-          if (typeof index !== 'undefined' && index !== -1) {
-            compsContent?.[compId].splice(index, 1);
-          }
-        });
-      } catch (e) {
-        error(e);
-        throw new Error('解绑代码块失败');
-      }
-    } else if (opFlag === CodeSelectOp.ADD) {
-      try {
-        diffCodeIds.forEach((codeId) => {
-          const compsContent = codeDsl[codeId].comps;
-          const existHooks = compsContent?.[compId];
-          if (isEmpty(existHooks)) {
-            // comps属性不存在，或者comps为空：新增
-            codeDsl[codeId].comps = {
-              ...(codeDsl[codeId].comps || {}),
-              [compId]: [hook],
-            };
-          } else {
-            // 往已有的关系中添加hook
-            existHooks?.push(hook);
-          }
-        });
-      } catch (e) {
-        error(e);
-        throw new Error('绑定代码块失败');
-      }
-    } else if (opFlag === CodeSelectOp.CHANGE) {
-      // 单选修改
-      forIn(codeDsl, (codeBlockContent, codeId) => {
-        if (codeId === diffCodeIds[0]) {
-          // 增加
-          codeBlockContent.comps = {
-            ...(codeBlockContent?.comps || {}),
-            [compId]: [hook],
-          };
-        } else if (isEmpty(diffCodeIds) || codeId !== diffCodeIds[0]) {
-          // 清空或者移除之前的选项
-          const compHooks = codeBlockContent?.comps?.[compId];
-          // continue
-          if (!compHooks) return true;
-          const index = compHooks.findIndex((hookName) => hookName === hook);
-          if (index !== -1) {
-            compHooks.splice(index, 1);
-            // break
-            return false;
-          }
-        }
-      });
-    }
-    this.setCodeDsl(codeDsl);
+  public refreshCombineInfo(): CodeRelation | null {
+    const root = editorService.get<MApp | null>('root');
+    if (!root) return null;
+    const relations = {};
+    this.recurseMNode(root, relations);
+    this.state.relations = relations;
+    return this.state.relations;
+  }
+
+  /**
+   * 获取绑定关系
+   * @returns {CodeRelation}
+   */
+  public getCombineInfo(): CodeRelation {
+    return this.state.relations;
   }
 
   /**
    * 获取不可删除列表
-   * @returns {string[]}
+   * @returns {Id[]}
    */
-  public getUndeletableList(): string[] {
+  public getUndeletableList(): Id[] {
     return this.state.undeletableList;
   }
 
   /**
    * 设置不可删除列表：为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除）
-   * @param {string[]} codeIds 代码块id数组
+   * @param {Id[]} codeIds 代码块id数组
    * @returns {void}
    */
-  public async setUndeleteableList(codeIds: string[]): Promise<void> {
+  public async setUndeleteableList(codeIds: Id[]): Promise<void> {
     this.state.undeletableList = codeIds;
   }
 
+  /**
+   * 设置代码草稿
+   */
+  public setCodeDraft(codeId: Id, content: string): void {
+    globalThis.localStorage.setItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`, content);
+  }
+
+  /**
+   * 获取代码草稿
+   */
+  public getCodeDraft(codeId: Id): string | null {
+    return globalThis.localStorage.getItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`);
+  }
+
+  /**
+   * 删除代码草稿
+   */
+  public removeCodeDraft(codeId: Id): void {
+    globalThis.localStorage.removeItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`);
+  }
+
   /**
    * 在dsl数据源中删除指定id的代码块
-   * @param {string[]} codeIds 需要删除的代码块id数组
+   * @param {Id[]} codeIds 需要删除的代码块id数组
    * @returns {CodeBlockDSL} 删除后的code dsl
    */
-  public async deleteCodeDslByIds(codeIds: string[]): Promise<CodeBlockDSL> {
+  public async deleteCodeDslByIds(codeIds: Id[]): Promise<CodeBlockDSL> {
     const currentDsl = await this.getCodeDsl();
     const newDsl = omit(currentDsl, codeIds);
     await this.setCodeDsl(newDsl);
@@ -335,9 +321,9 @@ class CodeBlock extends BaseService {
 
   /**
    * 生成代码块唯一id
-   * @returns {string} 代码块唯一id
+   * @returns {Id} 代码块唯一id
    */
-  public async getUniqueId(): Promise<string> {
+  public async getUniqueId(): Promise<Id> {
     const newId = `code_${Math.random().toString(10).substring(2).substring(0, 4)}`;
     // 判断是否重复
     const dsl = await this.getCodeDsl();
@@ -346,46 +332,19 @@ class CodeBlock extends BaseService {
     return await this.getUniqueId();
   }
 
-  /**
-   * 一对一解除绑定关系  功能隐藏，暂时注释
-   * @param {string} compId 组件id
-   * @param {string} codeId 代码块id
-   * @param {string[]} codeHooks 代码块挂载hook名称
-   * @returns {boolean} 结果
-   */
-  // public async unbind(compId: Id, codeId: string, codeHooks: string[]): Promise<boolean> {
-  //   const nodeInfo = editorService.getNodeById(compId);
-  //   if (!nodeInfo) return false;
-  //   // 更新node节点信息
-  //   codeHooks.forEach((hook) => {
-  //     if (!isEmpty(nodeInfo[hook])) {
-  //       const newHookInfo = nodeInfo[hook].filter((item: string) => item !== codeId);
-  //       nodeInfo[hook] = newHookInfo;
-  //       editorService.update(nodeInfo);
-  //     }
-  //   });
-  //   // 更新绑定关系
-  //   const oldRelation = await this.getCompRelation();
-  //   const oldCodeIds = oldRelation[compId];
-  //   // 不能直接splice修改原数组,会导致绑定关系更新错乱
-  //   const newCodeIds = oldCodeIds.filter((item) => item !== codeId);
-  //   this.setCompRelation(compId, newCodeIds);
-  //   return true;
-  // }
-
   /**
    * 通过组件id解除绑定关系（删除组件）
    * @param {MNode} compId 组件节点
    * @returns void
    */
-  public async deleteCompsInRelation(node: MNode) {
+  public async deleteCompsInRelation(node: MNode): Promise<void> {
     const codeDsl = cloneDeep(await this.getCodeDsl());
     if (!codeDsl) return;
-    this.recurseNodes(node, codeDsl);
+    this.refreshRelationDeep(node, codeDsl);
     this.setCodeDsl(codeDsl);
   }
 
-  public destroy() {
+  public resetState() {
     this.state.isShowCodeEditor = false;
     this.state.codeDsl = null;
     this.state.id = '';
@@ -395,8 +354,19 @@ class CodeBlock extends BaseService {
     this.state.undeletableList = [];
   }
 
-  // 删除组件时 如果是容器 需要遍历删除其包含节点的绑定信息
-  private recurseNodes(node: MNode, codeDsl: CodeBlockDSL) {
+  public destroy(): void {
+    this.resetState();
+    this.removeAllListeners();
+    this.removeAllPlugins();
+  }
+
+  /**
+   * 删除组件时 如果是容器 需要遍历删除其包含节点的绑定信息
+   * @param {MNode} node 节点信息
+   * @param {CodeBlockDSL} codeDsl 代码块
+   * @returns void
+   */
+  private refreshRelationDeep(node: MNode, codeDsl: CodeBlockDSL): void {
     if (!node.id) return;
     forIn(codeDsl, (codeBlockContent) => {
       const compsContent = codeBlockContent.comps || {};
@@ -404,7 +374,36 @@ class CodeBlock extends BaseService {
     });
     if (!isEmpty(node.items)) {
       node.items.forEach((item: MNode) => {
-        this.recurseNodes(item, codeDsl);
+        this.refreshRelationDeep(item, codeDsl);
+      });
+    }
+  }
+
+  /**
+   * 递归遍历dsl中挂载了代码块的节点，并更新绑定关系数据
+   * @param {MContainer} node 节点信息
+   * @returns void
+   */
+  private recurseMNode(node: MNode, relations: CodeRelation): void {
+    forIn(node, (value, key) => {
+      if (value?.hookType === HookType.CODE && !isEmpty(value.hookData)) {
+        value.hookData.forEach((relationItem: HookData) => {
+          // continue
+          if (!relationItem.codeId) return;
+          if (!relations[relationItem.codeId]) {
+            relations[relationItem.codeId] = {};
+          }
+          const codeItem = relations[relationItem.codeId];
+          if (isEmpty(codeItem[node.id])) {
+            codeItem[node.id] = [];
+          }
+          codeItem[node.id].push(key);
+        });
+      }
+    });
+    if (!isEmpty(node.items)) {
+      node.items.forEach((item: MNode) => {
+        this.recurseMNode(item, relations);
       });
     }
   }

package/src/services/componentList.ts

@@ -42,9 +42,14 @@ class ComponentList extends BaseService {
     return this.state.list;
   }
 
-  public destroy() {
+  public resetState() {
     this.state.list = [];
+  }
+
+  public destroy() {
+    this.resetState();
     this.removeAllListeners();
+    this.removeAllPlugins();
   }
 }
 

package/src/services/editor.ts

@@ -17,7 +17,7 @@
  */
 
 import { reactive, toRaw } from 'vue';
-import { cloneDeep, mergeWith, uniq } from 'lodash-es';
+import { cloneDeep, isObject, mergeWith, uniq } from 'lodash-es';
 
 import type { CodeBlockDSL, Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
@@ -25,9 +25,9 @@ import StageCore from '@tmagic/stage';
 import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
 
 import codeBlockService from '../services/codeBlock';
-import historyService, { StepValue } from '../services/history';
+import historyService from '../services/history';
 import storageService, { Protocol } from '../services/storage';
-import type { AddMNode, EditorNodeInfo, PastePosition, StoreState } from '../type';
+import type { AddMNode, EditorNodeInfo, PastePosition, StepValue, StoreState } from '../type';
 import { LayerOffset, Layout } from '../type';
 import {
   change2Fixed,
@@ -73,7 +73,7 @@ class Editor extends BaseService {
         'copy',
         'paste',
         'doPaste',
-        'duAlignCenter',
+        'doAlignCenter',
         'alignCenter',
         'moveLayer',
         'moveToContainer',
@@ -91,9 +91,8 @@ class Editor extends BaseService {
 
   /**
    * 设置当前指点节点配置
-   * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes'
+   * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength'
    * @param value MNode
-   * @returns MNode
    */
   public set<T = MNode>(name: keyof StoreState, value: T) {
     this.state[name] = value as any;
@@ -109,7 +108,7 @@ class Editor extends BaseService {
 
   /**
    * 获取当前指点节点配置
-   * @param name  'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes'
+   * @param name  'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength'
    * @returns MNode
    */
   public get<T = MNode>(name: keyof StoreState): T {
@@ -208,7 +207,7 @@ class Editor extends BaseService {
     if (page) {
       historyService.changePage(toRaw(page));
     } else {
-      historyService.empty();
+      historyService.resetState();
     }
 
     if (node?.id) {
@@ -353,6 +352,9 @@ class Editor extends BaseService {
 
     const newNodes = await Promise.all(
       addNodes.map((node) => {
+        if (isPage(node)) {
+          return this.doAdd(node, this.get('root'));
+        }
         const parentNode = parent && typeof parent !== 'function' ? parent : getAddParent(node);
         if (!parentNode) throw new Error('未找到父元素');
         return this.doAdd(node, parentNode);
@@ -375,7 +377,9 @@ class Editor extends BaseService {
       }
     }
 
-    this.pushHistoryState();
+    if (!isPage(newNodes[0])) {
+      this.pushHistoryState();
+    }
 
     this.emit('add', newNodes);
 
@@ -430,15 +434,16 @@ class Editor extends BaseService {
   /**
    * 删除组件
    * @param {Object} node
-   * @return {Object} 删除的组件配置
    */
   public async remove(nodeOrNodeList: MNode | MNode[]): Promise<void> {
     const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
 
     await Promise.all(nodes.map((node) => this.doRemove(node)));
 
-    // 更新历史记录
-    this.pushHistoryState();
+    if (!isPage(nodes[0])) {
+      // 更新历史记录
+      this.pushHistoryState();
+    }
 
     this.emit('remove', nodes);
   }
@@ -455,6 +460,10 @@ class Editor extends BaseService {
     let newConfig = await this.toggleFixedPosition(toRaw(config), node, this.get<MApp>('root'));
 
     newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue) => {
+      if (isObject(srcValue) && Array.isArray(objValue)) {
+        // 原来的配置是数组，新的配置是对象，则直接使用新的值
+        return srcValue;
+      }
       if (Array.isArray(srcValue)) {
         return srcValue;
       }
@@ -484,10 +493,10 @@ class Editor extends BaseService {
     parentNodeItems[index] = newConfig;
 
     // 将update后的配置更新到nodes中
-    const nodes = this.get('nodes');
+    const nodes = this.get<MNode[]>('nodes') || [];
     const targetIndex = nodes.findIndex((nodeItem: MNode) => `${nodeItem.id}` === `${newConfig.id}`);
     nodes.splice(targetIndex, 1, newConfig);
-    this.set('nodes', nodes);
+    this.set('nodes', [...nodes]);
 
     this.get<StageCore | null>('stage')?.update({
       config: cloneDeep(newConfig),
@@ -517,7 +526,7 @@ class Editor extends BaseService {
     this.pushHistoryState();
 
     this.emit('update', newNodes);
-
+    codeBlockService.refreshCombineInfo();
     return Array.isArray(config) ? newNodes : newNodes[0];
   }
 
@@ -573,7 +582,7 @@ class Editor extends BaseService {
 
     const pasteConfigs = await this.doPaste(config, position);
 
-    return this.add(pasteConfigs);
+    return this.add(pasteConfigs, this.get('parent'));
   }
 
   public async doPaste(config: MNode[], position: PastePosition = {}): Promise<MNode[]> {
@@ -623,7 +632,11 @@ class Editor extends BaseService {
 
     const newNode = await this.update(newNodes);
 
-    await stage?.multiSelect(newNodes.map((node) => node.id));
+    if (newNodes.length > 1) {
+      await stage?.multiSelect(newNodes.map((node) => node.id));
+    } else {
+      await stage?.select(newNodes[0].id);
+    }
 
     return newNode;
   }
@@ -749,8 +762,7 @@ class Editor extends BaseService {
     });
   }
 
-  public destroy() {
-    this.removeAllListeners();
+  public resetState() {
     this.set('root', null);
     this.set('node', null);
     this.set('nodes', []);
@@ -762,6 +774,12 @@ class Editor extends BaseService {
     this.set('pageLength', new Map());
   }
 
+  public destroy() {
+    this.removeAllListeners();
+    this.resetState();
+    this.removeAllPlugins();
+  }
+
   public resetModifiedNodeId() {
     this.get<Map<Id, Id>>('modifiedNodeIds').clear();
   }
@@ -776,6 +794,12 @@ class Editor extends BaseService {
     return root.codeBlocks || null;
   }
 
+  public getCodeDslSync(): CodeBlockDSL | null {
+    const root = this.get<MApp | null>('root');
+    if (!root) return null;
+    return root.codeBlocks || null;
+  }
+
   /**
    * 设置代码块到dsl的codeBlocks字段
    * @param {CodeBlockDSL} codeDsl 代码DSL

package/src/services/events.ts

@@ -76,10 +76,15 @@ class Events extends BaseService {
     return cloneDeep(methodMap[type] || DEFAULT_METHODS);
   }
 
-  public destroy() {
+  public resetState() {
     eventMap = reactive({});
     methodMap = reactive({});
+  }
+
+  public destroy() {
+    this.resetState();
     this.removeAllListeners();
+    this.removeAllPlugins();
   }
 }
 

package/src/services/history.ts

@@ -18,25 +18,13 @@
 
 import { reactive } from 'vue';
 
-import type { Id, MPage } from '@tmagic/schema';
+import type { MPage } from '@tmagic/schema';
 
+import { HistoryState, StepValue } from '../type';
 import { UndoRedo } from '../utils/undo-redo';
 
 import BaseService from './BaseService';
 
-export interface StepValue {
-  data: MPage;
-  modifiedNodeIds: Map<Id, Id>;
-  nodeId: Id;
-}
-
-export interface HistoryState {
-  pageId?: Id;
-  pageSteps: Record<Id, UndoRedo<StepValue>>;
-  canRedo: boolean;
-  canUndo: boolean;
-}
-
 class History extends BaseService {
   public state = reactive<HistoryState>({
     pageSteps: {},
@@ -76,9 +64,11 @@ class History extends BaseService {
     }
 
     this.setCanUndoRedo();
+
+    this.emit('page-change', this.state.pageSteps[this.state.pageId]);
   }
 
-  public empty(): void {
+  public resetState(): void {
     this.state.pageId = undefined;
     this.state.pageSteps = {};
     this.state.canRedo = false;
@@ -110,8 +100,9 @@ class History extends BaseService {
   }
 
   public destroy(): void {
-    this.empty();
+    this.resetState();
     this.removeAllListeners();
+    this.removeAllPlugins();
   }
 
   private getUndoRedo() {