@tmagic/editor 1.2.3 → 1.2.5

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.3",
+  "version": "1.2.5",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -46,12 +46,12 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.2.3",
-    "@tmagic/design": "1.2.3",
-    "@tmagic/form": "1.2.3",
-    "@tmagic/schema": "1.2.3",
-    "@tmagic/stage": "1.2.3",
-    "@tmagic/utils": "1.2.3",
+    "@tmagic/core": "1.2.5",
+    "@tmagic/design": "1.2.5",
+    "@tmagic/form": "1.2.5",
+    "@tmagic/schema": "1.2.5",
+    "@tmagic/stage": "1.2.5",
+    "@tmagic/utils": "1.2.5",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -63,8 +63,8 @@
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.2.3",
-    "@tmagic/form": "1.2.3",
+    "@tmagic/design": "1.2.5",
+    "@tmagic/form": "1.2.5",
     "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"
   },

package/src/Editor.vue

@@ -362,6 +362,8 @@ export default defineComponent({
         disabledDragStart: props.disabledDragStart,
       }),
     );
+    // 监听组件update
+    codeBlockService.addCodeRelationListener();
 
     return services;
   },

package/src/layouts/sidebar/Sidebar.vue

@@ -6,7 +6,12 @@
     type="card"
     tab-position="left"
   >
-    <component :is="uiComponent.component" v-for="(config, index) in sideBarItems" :key="index" :name="config.text">
+    <component
+      :is="uiComponent.component"
+      v-for="(config, index) in sideBarItems"
+      :key="config.$key || index"
+      :name="config.text"
+    >
       <template #label>
         <div :key="config.text">
           <MIcon v-if="config.icon" :icon="config.icon"></MIcon>

package/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -96,7 +96,7 @@ import { ColumnConfig } from '@tmagic/form';
 import { CodeBlockContent, Id } from '@tmagic/schema';
 
 import Icon from '../../../components/Icon.vue';
-import type { CodeRelation, Services } from '../../../type';
+import type { CodeRelation, CombineInfo, Services } from '../../../type';
 import { CodeDeleteErrorType, CodeDslItem, ListState } from '../../../type';
 
 import codeBlockEditor from './CodeBlockEditor.vue';
@@ -121,17 +121,22 @@ const isShowCodeBlockEditor = computed(() => services?.codeBlockService.getCodeE
 const codeCombineInfo = ref<CodeRelation | null>(null);
 
 // 根据代码块ID获取其绑定的组件信息
-const getBindCompsByCodeId = (codeId: Id) => {
-  if (!codeCombineInfo.value || !codeCombineInfo.value[codeId]) return [];
-  const bindCompsId = Object.keys(codeCombineInfo.value[codeId]);
-  return bindCompsId.map((compId) => ({
-    compId,
-    compName: getCompName(compId),
-  }));
+const getBindCompsByCodeId = (codeId: Id): CombineInfo[] => {
+  if (!codeCombineInfo.value) return [];
+  const bindsComp = [] as CombineInfo[];
+  forIn(codeCombineInfo.value, (codeIds, compId) => {
+    if (codeIds.includes(codeId)) {
+      bindsComp.push({
+        compId,
+        compName: getCompName(compId),
+      });
+    }
+  });
+  return bindsComp as CombineInfo[];
 };
 
-// 初始化代码块列表
-const initList = async () => {
+// 更新代码块列表
+const refreshCodeList = async () => {
   const codeDsl = cloneDeep(await services?.codeBlockService.getCodeDsl()) || null;
   codeCombineInfo.value = cloneDeep(services?.codeBlockService.getCombineInfo()) || null;
   if (!codeDsl || !codeCombineInfo.value) return;
@@ -148,12 +153,19 @@ const initList = async () => {
 };
 
 watch(
-  [() => services?.codeBlockService.getCodeDslSync(), () => services?.codeBlockService.refreshCombineInfo()],
+  () => services?.editorService.get('root'),
+  () => {
+    services?.codeBlockService.refreshAllRelations();
+    refreshCodeList();
+  },
+);
+
+watch(
+  [() => services?.codeBlockService.getCodeDslSync(), () => services?.codeBlockService.getCombineInfo()],
   () => {
-    initList();
+    refreshCodeList();
   },
   {
-    immediate: true,
     deep: true,
   },
 );

package/src/services/codeBlock.ts

@@ -17,9 +17,9 @@
  */
 
 import { reactive } from 'vue';
-import { cloneDeep, forIn, isEmpty, keys, omit, pick } from 'lodash-es';
+import { cloneDeep, forIn, isEmpty, keys, omit, pick, union } from 'lodash-es';
 
-import { CodeBlockContent, CodeBlockDSL, HookType, Id, MNode } from '@tmagic/schema';
+import { CodeBlockContent, CodeBlockDSL, HookType, Id, MNode, MPage } from '@tmagic/schema';
 
 import editorService from '../services/editor';
 import type { CodeRelation, CodeState, HookData } from '../type';
@@ -230,16 +230,45 @@ class CodeBlock extends BaseService {
   }
 
   /**
-   * 刷新绑定关系
-   * @returns {CodeRelation | null}
+   * 监听组件更新来更新代码块绑定关系
+   * @returns {void}
    */
-  public refreshCombineInfo(): CodeRelation | null {
+  public addCodeRelationListener(): void {
+    // 监听组件更新
+    editorService.on('update', (nodes: MNode[]) => {
+      const relations: CodeRelation = cloneDeep(this.state.relations);
+      nodes.forEach((node: MNode) => {
+        if (node?.id) {
+          relations[node.id] = [];
+          this.getNodeRelation(node, relations);
+        }
+      });
+      this.state.relations = { ...relations };
+    });
+    // 监听组件删除
+    editorService.on('remove', (nodes: MNode[]) => {
+      nodes.forEach((node: MNode) => {
+        this.state.relations = this.deleteNodeRelation(node, this.state.relations);
+      });
+    });
+    // 监听历史记录，历史快照为页面整体，需要深层遍历更新
+    editorService.on('history-change', (page: MPage) => {
+      const relations: CodeRelation = {};
+      this.getNodeRelation(page, relations, true);
+      this.state.relations = relations;
+    });
+  }
+
+  /**
+   * 更新全部绑定关系
+   * @returns {void}
+   */
+  public refreshAllRelations(): void {
     const root = editorService.get('root');
-    if (!root) return null;
-    const relations = {};
-    this.recurseMNode(root, relations);
+    if (!root) return;
+    const relations: CodeRelation = {};
+    this.getNodeRelation(root, relations, true);
     this.state.relations = relations;
-    return this.state.relations;
   }
 
   /**
@@ -313,18 +342,6 @@ class CodeBlock extends BaseService {
     return await this.getUniqueId();
   }
 
-  /**
-   * 通过组件id解除绑定关系（删除组件）
-   * @param {MNode} compId 组件节点
-   * @returns void
-   */
-  public async deleteCompsInRelation(node: MNode): Promise<void> {
-    const codeDsl = cloneDeep(await this.getCodeDsl());
-    if (!codeDsl) return;
-    this.refreshRelationDeep(node, codeDsl);
-    this.setCodeDsl(codeDsl);
-  }
-
   public resetState() {
     this.state.isShowCodeEditor = false;
     this.state.codeDsl = null;
@@ -340,63 +357,63 @@ class CodeBlock extends BaseService {
     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 || {};
-      codeBlockContent.comps = omit(compsContent, node.id);
-    });
-    if (!isEmpty(node.items)) {
-      node.items.forEach((item: MNode) => {
-        this.refreshRelationDeep(item, codeDsl);
-      });
-    }
-  }
-
   /**
    * 递归遍历dsl中挂载了代码块的节点，并更新绑定关系数据
-   * @param {MContainer} node 节点信息
+   * @param {MNode} node 节点信息
+   * @param {CodeRelation} relation 关系数据
+   * @param {boolean} deep 是否深层遍历
    * @returns void
    */
-  private recurseMNode(node: MNode, relations: CodeRelation): void {
+  private getNodeRelation(node: MNode, relation: CodeRelation, deep = false): void {
     forIn(node, (value, key) => {
-      let unConfirmedValue: MNode = { id: node.id };
       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] = {};
+          if (relationItem.codeId) {
+            relation[node.id] = union(relation[node.id], [relationItem.codeId]);
           }
-          const codeItem = relations[relationItem.codeId];
-          if (isEmpty(codeItem[node.id])) {
-            codeItem[node.id] = [];
-          }
-          codeItem[node.id].push(key);
         });
         // continue
         return;
       }
-      if (typeof value === 'object') {
+      let isContinue = false;
+      try {
+        // 只遍历更新当前组件的关系，不再深层遍历容器包含的组件
+        isContinue = key !== 'items' && typeof value === 'object' && JSON.stringify(value).includes('hookType');
+      } catch (error) {
+        console.error(error);
+      }
+      if (isContinue) {
         // 检查value内部是否有嵌套
-        unConfirmedValue = {
-          ...unConfirmedValue,
+        const unConfirmedValue = {
+          id: node.id,
           ...value,
         };
-        this.recurseMNode(unConfirmedValue, relations);
+        this.getNodeRelation(unConfirmedValue, relation);
+      }
+      // 深层遍历用于代码列表初始化
+      if (key === 'items' && !isEmpty(value) && deep) {
+        value.forEach((item: MNode) => {
+          this.getNodeRelation(item, relation, deep);
+        });
       }
     });
+  }
+
+  /**
+   * 删除组件关系
+   * @param {MNode} node 节点信息
+   * @param {CodeRelation} relations 关系数据
+   * @returns CodeRelation
+   */
+  private deleteNodeRelation(node: MNode, relations: CodeRelation): CodeRelation {
+    if (!node.id) return {};
+    let newRelations = omit(relations, [node.id]);
     if (!isEmpty(node.items)) {
       node.items.forEach((item: MNode) => {
-        this.recurseMNode(item, relations);
+        newRelations = this.deleteNodeRelation(item, newRelations);
       });
     }
+    return newRelations;
   }
 }
 

package/src/services/editor.ts

@@ -24,7 +24,6 @@ import { NodeType } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
 
-import codeBlockService from '../services/codeBlock';
 import historyService from '../services/history';
 import storageService, { Protocol } from '../services/storage';
 import type { AddMNode, EditorNodeInfo, PastePosition, StepValue, StoreState, StoreStateKey } from '../type';
@@ -452,9 +451,6 @@ class Editor extends BaseService {
     }
 
     this.addModifiedNodeId(parent.id);
-
-    // 通知codeBlockService解除绑定关系
-    codeBlockService.deleteCompsInRelation(node);
   }
 
   /**
@@ -555,7 +551,6 @@ class Editor extends BaseService {
     this.pushHistoryState();
 
     this.emit('update', newNodes);
-    codeBlockService.refreshCombineInfo();
     return Array.isArray(config) ? newNodes : newNodes[0];
   }
 
@@ -891,6 +886,7 @@ class Editor extends BaseService {
       await this.select(value.nodeId);
       this.get('stage')?.select(value.nodeId);
     }, 0);
+    this.emit('history-change', value.data);
   }
 
   private async toggleFixedPosition(dist: MNode, src: MNode, root: MApp) {

package/src/type.ts

@@ -351,10 +351,8 @@ export type HookData = {
 };
 
 export type CodeRelation = {
-  [codeId: Id]: {
-    /** 组件id:['created'] */
-    [compId: Id]: string[];
-  };
+  /** 组件id:[代码id1，代码id2] */
+  [compId: Id]: Id[];
 };
 
 export interface CodeDslItem {

package/types/services/codeBlock.d.ts

@@ -1,4 +1,4 @@
-import { CodeBlockContent, CodeBlockDSL, Id, MNode } from '@tmagic/schema';
+import { CodeBlockContent, CodeBlockDSL, Id } from '@tmagic/schema';
 import type { CodeRelation } from '../type';
 import BaseService from './BaseService';
 declare class CodeBlock extends BaseService {
@@ -94,10 +94,15 @@ declare class CodeBlock extends BaseService {
      */
     getCombineIds(): string[];
     /**
-     * 刷新绑定关系
-     * @returns {CodeRelation | null}
+     * 监听组件更新来更新代码块绑定关系
+     * @returns {void}
+     */
+    addCodeRelationListener(): void;
+    /**
+     * 更新全部绑定关系
+     * @returns {void}
      */
-    refreshCombineInfo(): CodeRelation | null;
+    refreshAllRelations(): void;
     /**
      * 获取绑定关系
      * @returns {CodeRelation}
@@ -137,27 +142,23 @@ declare class CodeBlock extends BaseService {
      * @returns {Id} 代码块唯一id
      */
     getUniqueId(): Promise<Id>;
-    /**
-     * 通过组件id解除绑定关系（删除组件）
-     * @param {MNode} compId 组件节点
-     * @returns void
-     */
-    deleteCompsInRelation(node: MNode): Promise<void>;
     resetState(): void;
     destroy(): void;
     /**
-     * 删除组件时 如果是容器 需要遍历删除其包含节点的绑定信息
+     * 递归遍历dsl中挂载了代码块的节点，并更新绑定关系数据
      * @param {MNode} node 节点信息
-     * @param {CodeBlockDSL} codeDsl 代码块
+     * @param {CodeRelation} relation 关系数据
+     * @param {boolean} deep 是否深层遍历
      * @returns void
      */
-    private refreshRelationDeep;
+    private getNodeRelation;
     /**
-     * 递归遍历dsl中挂载了代码块的节点，并更新绑定关系数据
-     * @param {MContainer} node 节点信息
-     * @returns void
+     * 删除组件关系
+     * @param {MNode} node 节点信息
+     * @param {CodeRelation} relations 关系数据
+     * @returns CodeRelation
      */
-    private recurseMNode;
+    private deleteNodeRelation;
 }
 export declare type CodeBlockService = CodeBlock;
 declare const _default: CodeBlock;

package/types/type.d.ts

@@ -278,10 +278,8 @@ export declare type HookData = {
     params?: object;
 };
 export declare type CodeRelation = {
-    [codeId: Id]: {
-        /** 组件id:['created'] */
-        [compId: Id]: string[];
-    };
+    /** 组件id:[代码id1，代码id2] */
+    [compId: Id]: Id[];
 };
 export interface CodeDslItem {
     /** 代码块id */