@tmagic/editor 1.2.3 → 1.2.5

package/dist/tmagic-editor.umd.cjs

@@ -721,62 +721,51 @@
     }
   });
 
-  var ColumnLayout = /* @__PURE__ */ ((ColumnLayout2) => {
-    ColumnLayout2["LEFT"] = "left";
-    ColumnLayout2["CENTER"] = "center";
-    ColumnLayout2["RIGHT"] = "right";
-    return ColumnLayout2;
-  })(ColumnLayout || {});
-  var LayerOffset = /* @__PURE__ */ ((LayerOffset2) => {
-    LayerOffset2["TOP"] = "top";
-    LayerOffset2["BOTTOM"] = "bottom";
-    return LayerOffset2;
-  })(LayerOffset || {});
-  var Layout = /* @__PURE__ */ ((Layout2) => {
-    Layout2["FLEX"] = "flex";
-    Layout2["FIXED"] = "fixed";
-    Layout2["RELATIVE"] = "relative";
-    Layout2["ABSOLUTE"] = "absolute";
-    return Layout2;
-  })(Layout || {});
-  var Keys = /* @__PURE__ */ ((Keys2) => {
-    Keys2["ESCAPE"] = "Space";
-    return Keys2;
-  })(Keys || {});
-  const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
-  const V_GUIDE_LINE_STORAGE_KEY = "$MagicStageVerticalGuidelinesData";
-  var CodeDeleteErrorType = /* @__PURE__ */ ((CodeDeleteErrorType2) => {
-    CodeDeleteErrorType2["UNDELETEABLE"] = "undeleteable";
-    CodeDeleteErrorType2["BIND"] = "bind";
-    return CodeDeleteErrorType2;
-  })(CodeDeleteErrorType || {});
-  const CODE_DRAFT_STORAGE_KEY = "magicCodeDraft";
-
-  const log = (...args) => {
-    if (process.env.NODE_ENV === "development") {
-      console.log("magic editor: ", ...args);
+  class UndoRedo {
+    elementList;
+    listCursor;
+    listMaxSize;
+    constructor(listMaxSize = 200) {
+      const minListMaxSize = 2;
+      this.elementList = [];
+      this.listCursor = 0;
+      this.listMaxSize = listMaxSize > minListMaxSize ? listMaxSize : minListMaxSize;
     }
-  };
-  const info = (...args) => {
-    if (process.env.NODE_ENV === "development") {
-      console.info("magic editor: ", ...args);
+    pushElement(element) {
+      this.elementList.splice(this.listCursor, this.elementList.length - this.listCursor, lodashEs.cloneDeep(element));
+      this.listCursor += 1;
+      if (this.elementList.length > this.listMaxSize) {
+        this.elementList.shift();
+        this.listCursor -= 1;
+      }
     }
-  };
-  const warn = (...args) => {
-    if (process.env.NODE_ENV === "development") {
-      console.warn("magic editor: ", ...args);
+    canUndo() {
+      return this.listCursor > 1;
     }
-  };
-  const debug = (...args) => {
-    if (process.env.NODE_ENV === "development") {
-      console.debug("magic editor: ", ...args);
+    undo() {
+      if (!this.canUndo()) {
+        return null;
+      }
+      this.listCursor -= 1;
+      return this.getCurrentElement();
     }
-  };
-  const error = (...args) => {
-    if (process.env.NODE_ENV === "development") {
-      console.error("magic editor: ", ...args);
+    canRedo() {
+      return this.elementList.length > this.listCursor;
     }
-  };
+    redo() {
+      if (!this.canRedo()) {
+        return null;
+      }
+      this.listCursor += 1;
+      return this.getCurrentElement();
+    }
+    getCurrentElement() {
+      if (this.listCursor < 1) {
+        return null;
+      }
+      return lodashEs.cloneDeep(this.elementList[this.listCursor - 1]);
+    }
+  }
 
   const compose = (middleware) => {
     if (!Array.isArray(middleware))
@@ -900,272 +889,6 @@
     }
   }
 
-  class CodeBlock extends BaseService {
-    state = vue.reactive({
-      isShowCodeEditor: false,
-      codeDsl: null,
-      id: "",
-      editable: true,
-      combineIds: [],
-      undeletableList: [],
-      relations: {}
-    });
-    constructor() {
-      super([
-        "setCodeDsl",
-        "getCodeDsl",
-        "getCodeContentById",
-        "getCodeDslByIds",
-        "getCurrentDsl",
-        "setCodeDslById",
-        "setCodeEditorShowStatus",
-        "setEditStatus",
-        "setCombineIds",
-        "setUndeleteableList",
-        "deleteCodeDslByIds"
-      ]);
-    }
-    async setCodeDsl(codeDsl2) {
-      this.state.codeDsl = codeDsl2;
-      await editorService.setCodeDsl(this.state.codeDsl);
-      info("[code-block]:code-dsl-change", this.state.codeDsl);
-      this.emit("code-dsl-change", this.state.codeDsl);
-    }
-    async getCodeDsl(forceRefresh = false) {
-      return this.getCodeDslSync(forceRefresh);
-    }
-    getCodeDslSync(forceRefresh = false) {
-      if (!this.state.codeDsl || forceRefresh) {
-        this.state.codeDsl = editorService.getCodeDslSync();
-      }
-      return this.state.codeDsl;
-    }
-    async getCodeContentById(id2) {
-      if (!id2)
-        return null;
-      const totalCodeDsl = await this.getCodeDsl();
-      if (!totalCodeDsl)
-        return null;
-      return totalCodeDsl[id2] ?? null;
-    }
-    async setCodeDslById(id, codeConfig) {
-      let codeDsl = await this.getCodeDsl();
-      const codeConfigProcessed = codeConfig;
-      if (codeConfig.content) {
-        codeConfigProcessed.content = eval(codeConfig.content);
-      }
-      if (!codeDsl) {
-        codeDsl = {
-          [id]: {
-            ...codeConfigProcessed
-          }
-        };
-      } else {
-        const existContent = codeDsl[id] || {};
-        codeDsl = {
-          ...codeDsl,
-          [id]: {
-            ...existContent,
-            ...codeConfigProcessed
-          }
-        };
-      }
-      await this.setCodeDsl(codeDsl);
-    }
-    async getCodeDslByIds(ids) {
-      const codeDsl2 = await this.getCodeDsl();
-      return lodashEs.pick(codeDsl2, ids);
-    }
-    async setCodeEditorShowStatus(status) {
-      this.state.isShowCodeEditor = status;
-    }
-    getCodeEditorShowStatus() {
-      return this.state.isShowCodeEditor;
-    }
-    setCodeEditorContent(status, id2) {
-      if (!id2)
-        return;
-      this.setId(id2);
-      this.state.isShowCodeEditor = status;
-    }
-    async getCurrentDsl() {
-      return await this.getCodeContentById(this.state.id);
-    }
-    getEditStatus() {
-      return this.state.editable;
-    }
-    async setEditStatus(status) {
-      this.state.editable = status;
-    }
-    setId(id2) {
-      if (!id2)
-        return;
-      this.state.id = id2;
-    }
-    getId() {
-      return this.state.id;
-    }
-    async setCombineIds(ids) {
-      this.state.combineIds = ids;
-    }
-    getCombineIds() {
-      return this.state.combineIds;
-    }
-    refreshCombineInfo() {
-      const root = editorService.get("root");
-      if (!root)
-        return null;
-      const relations = {};
-      this.recurseMNode(root, relations);
-      this.state.relations = relations;
-      return this.state.relations;
-    }
-    getCombineInfo() {
-      return this.state.relations;
-    }
-    getUndeletableList() {
-      return this.state.undeletableList;
-    }
-    async setUndeleteableList(codeIds) {
-      this.state.undeletableList = codeIds;
-    }
-    setCodeDraft(codeId, content) {
-      globalThis.localStorage.setItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`, content);
-    }
-    getCodeDraft(codeId) {
-      return globalThis.localStorage.getItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`);
-    }
-    removeCodeDraft(codeId) {
-      globalThis.localStorage.removeItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`);
-    }
-    async deleteCodeDslByIds(codeIds) {
-      const currentDsl = await this.getCodeDsl();
-      const newDsl = lodashEs.omit(currentDsl, codeIds);
-      await this.setCodeDsl(newDsl);
-      return newDsl;
-    }
-    async getUniqueId() {
-      const newId = `code_${Math.random().toString(10).substring(2).substring(0, 4)}`;
-      const dsl = await this.getCodeDsl();
-      const existedIds = lodashEs.keys(dsl);
-      if (!existedIds.includes(newId))
-        return newId;
-      return await this.getUniqueId();
-    }
-    async deleteCompsInRelation(node) {
-      const codeDsl2 = lodashEs.cloneDeep(await this.getCodeDsl());
-      if (!codeDsl2)
-        return;
-      this.refreshRelationDeep(node, codeDsl2);
-      this.setCodeDsl(codeDsl2);
-    }
-    resetState() {
-      this.state.isShowCodeEditor = false;
-      this.state.codeDsl = null;
-      this.state.id = "";
-      this.state.editable = true;
-      this.state.combineIds = [];
-      this.state.undeletableList = [];
-    }
-    destroy() {
-      this.resetState();
-      this.removeAllListeners();
-      this.removeAllPlugins();
-    }
-    refreshRelationDeep(node, codeDsl2) {
-      if (!node.id)
-        return;
-      lodashEs.forIn(codeDsl2, (codeBlockContent) => {
-        const compsContent = codeBlockContent.comps || {};
-        codeBlockContent.comps = lodashEs.omit(compsContent, node.id);
-      });
-      if (!lodashEs.isEmpty(node.items)) {
-        node.items.forEach((item) => {
-          this.refreshRelationDeep(item, codeDsl2);
-        });
-      }
-    }
-    recurseMNode(node, relations) {
-      lodashEs.forIn(node, (value, key) => {
-        let unConfirmedValue = { id: node.id };
-        if (value?.hookType === schema.HookType.CODE && !lodashEs.isEmpty(value.hookData)) {
-          value.hookData.forEach((relationItem) => {
-            if (!relationItem.codeId)
-              return;
-            if (!relations[relationItem.codeId]) {
-              relations[relationItem.codeId] = {};
-            }
-            const codeItem = relations[relationItem.codeId];
-            if (lodashEs.isEmpty(codeItem[node.id])) {
-              codeItem[node.id] = [];
-            }
-            codeItem[node.id].push(key);
-          });
-          return;
-        }
-        if (typeof value === "object") {
-          unConfirmedValue = {
-            ...unConfirmedValue,
-            ...value
-          };
-          this.recurseMNode(unConfirmedValue, relations);
-        }
-      });
-      if (!lodashEs.isEmpty(node.items)) {
-        node.items.forEach((item) => {
-          this.recurseMNode(item, relations);
-        });
-      }
-    }
-  }
-  const codeBlockService = new CodeBlock();
-
-  class UndoRedo {
-    elementList;
-    listCursor;
-    listMaxSize;
-    constructor(listMaxSize = 200) {
-      const minListMaxSize = 2;
-      this.elementList = [];
-      this.listCursor = 0;
-      this.listMaxSize = listMaxSize > minListMaxSize ? listMaxSize : minListMaxSize;
-    }
-    pushElement(element) {
-      this.elementList.splice(this.listCursor, this.elementList.length - this.listCursor, lodashEs.cloneDeep(element));
-      this.listCursor += 1;
-      if (this.elementList.length > this.listMaxSize) {
-        this.elementList.shift();
-        this.listCursor -= 1;
-      }
-    }
-    canUndo() {
-      return this.listCursor > 1;
-    }
-    undo() {
-      if (!this.canUndo()) {
-        return null;
-      }
-      this.listCursor -= 1;
-      return this.getCurrentElement();
-    }
-    canRedo() {
-      return this.elementList.length > this.listCursor;
-    }
-    redo() {
-      if (!this.canRedo()) {
-        return null;
-      }
-      this.listCursor += 1;
-      return this.getCurrentElement();
-    }
-    getCurrentElement() {
-      if (this.listCursor < 1) {
-        return null;
-      }
-      return lodashEs.cloneDeep(this.elementList[this.listCursor - 1]);
-    }
-  }
-
   class History extends BaseService {
     state = vue.reactive({
       pageSteps: {},
@@ -1334,6 +1057,37 @@
   }
   const storageService = new WebStorage();
 
+  var ColumnLayout = /* @__PURE__ */ ((ColumnLayout2) => {
+    ColumnLayout2["LEFT"] = "left";
+    ColumnLayout2["CENTER"] = "center";
+    ColumnLayout2["RIGHT"] = "right";
+    return ColumnLayout2;
+  })(ColumnLayout || {});
+  var LayerOffset = /* @__PURE__ */ ((LayerOffset2) => {
+    LayerOffset2["TOP"] = "top";
+    LayerOffset2["BOTTOM"] = "bottom";
+    return LayerOffset2;
+  })(LayerOffset || {});
+  var Layout = /* @__PURE__ */ ((Layout2) => {
+    Layout2["FLEX"] = "flex";
+    Layout2["FIXED"] = "fixed";
+    Layout2["RELATIVE"] = "relative";
+    Layout2["ABSOLUTE"] = "absolute";
+    return Layout2;
+  })(Layout || {});
+  var Keys = /* @__PURE__ */ ((Keys2) => {
+    Keys2["ESCAPE"] = "Space";
+    return Keys2;
+  })(Keys || {});
+  const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
+  const V_GUIDE_LINE_STORAGE_KEY = "$MagicStageVerticalGuidelinesData";
+  var CodeDeleteErrorType = /* @__PURE__ */ ((CodeDeleteErrorType2) => {
+    CodeDeleteErrorType2["UNDELETEABLE"] = "undeleteable";
+    CodeDeleteErrorType2["BIND"] = "bind";
+    return CodeDeleteErrorType2;
+  })(CodeDeleteErrorType || {});
+  const CODE_DRAFT_STORAGE_KEY = "magicCodeDraft";
+
   const COPY_STORAGE_KEY = "$MagicEditorCopyData";
   const getPageList = (app) => {
     if (app.items && Array.isArray(app.items)) {
@@ -1966,7 +1720,6 @@
         stage?.select(parent.id);
       }
       this.addModifiedNodeId(parent.id);
-      codeBlockService.deleteCompsInRelation(node);
     }
     async remove(nodeOrNodeList) {
       const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
@@ -2034,7 +1787,6 @@
       const newNodes = await Promise.all(nodes.map((node) => this.doUpdate(node)));
       this.pushHistoryState();
       this.emit("update", newNodes);
-      codeBlockService.refreshCombineInfo();
       return Array.isArray(config) ? newNodes : newNodes[0];
     }
     async sort(id1, id2) {
@@ -2273,6 +2025,7 @@
         await this.select(value.nodeId);
         this.get("stage")?.select(value.nodeId);
       }, 0);
+      this.emit("history-change", value.data);
     }
     async toggleFixedPosition(dist, src, root) {
       const newConfig = lodashEs.cloneDeep(dist);
@@ -2573,6 +2326,32 @@
     }
   ];
 
+  const log = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.log("magic editor: ", ...args);
+    }
+  };
+  const info = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.info("magic editor: ", ...args);
+    }
+  };
+  const warn = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.warn("magic editor: ", ...args);
+    }
+  };
+  const debug = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.debug("magic editor: ", ...args);
+    }
+  };
+  const error = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.error("magic editor: ", ...args);
+    }
+  };
+
   const state = vue.reactive({
     uiSelectMode: false,
     showSrc: false,
@@ -3753,15 +3532,20 @@
       const isShowCodeBlockEditor = vue.computed(() => services?.codeBlockService.getCodeEditorShowStatus() || false);
       const codeCombineInfo = vue.ref(null);
       const getBindCompsByCodeId = (codeId) => {
-        if (!codeCombineInfo.value || !codeCombineInfo.value[codeId])
+        if (!codeCombineInfo.value)
           return [];
-        const bindCompsId = Object.keys(codeCombineInfo.value[codeId]);
-        return bindCompsId.map((compId) => ({
-          compId,
-          compName: getCompName(compId)
-        }));
+        const bindsComp = [];
+        lodashEs.forIn(codeCombineInfo.value, (codeIds, compId) => {
+          if (codeIds.includes(codeId)) {
+            bindsComp.push({
+              compId,
+              compName: getCompName(compId)
+            });
+          }
+        });
+        return bindsComp;
       };
-      const initList = async () => {
+      const refreshCodeList = async () => {
         const codeDsl = lodashEs.cloneDeep(await services?.codeBlockService.getCodeDsl()) || null;
         codeCombineInfo.value = lodashEs.cloneDeep(services?.codeBlockService.getCombineInfo()) || null;
         if (!codeDsl || !codeCombineInfo.value)
@@ -3778,12 +3562,18 @@
         });
       };
       vue.watch(
-        [() => services?.codeBlockService.getCodeDslSync(), () => services?.codeBlockService.refreshCombineInfo()],
+        () => services?.editorService.get("root"),
+        () => {
+          services?.codeBlockService.refreshAllRelations();
+          refreshCodeList();
+        }
+      );
+      vue.watch(
+        [() => services?.codeBlockService.getCodeDslSync(), () => services?.codeBlockService.getCombineInfo()],
         () => {
-          initList();
+          refreshCodeList();
         },
         {
-          immediate: true,
           deep: true
         }
       );
@@ -4681,7 +4471,7 @@
           default: vue.withCtx(() => [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(sideBarItems), (config, index) => {
               return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(uiComponent).component), {
-                key: index,
+                key: config.$key || index,
                 name: config.text
               }, {
                 label: vue.withCtx(() => [
@@ -5816,6 +5606,236 @@
     }
   });
 
+  class CodeBlock extends BaseService {
+    state = vue.reactive({
+      isShowCodeEditor: false,
+      codeDsl: null,
+      id: "",
+      editable: true,
+      combineIds: [],
+      undeletableList: [],
+      relations: {}
+    });
+    constructor() {
+      super([
+        "setCodeDsl",
+        "getCodeDsl",
+        "getCodeContentById",
+        "getCodeDslByIds",
+        "getCurrentDsl",
+        "setCodeDslById",
+        "setCodeEditorShowStatus",
+        "setEditStatus",
+        "setCombineIds",
+        "setUndeleteableList",
+        "deleteCodeDslByIds"
+      ]);
+    }
+    async setCodeDsl(codeDsl2) {
+      this.state.codeDsl = codeDsl2;
+      await editorService.setCodeDsl(this.state.codeDsl);
+      info("[code-block]:code-dsl-change", this.state.codeDsl);
+      this.emit("code-dsl-change", this.state.codeDsl);
+    }
+    async getCodeDsl(forceRefresh = false) {
+      return this.getCodeDslSync(forceRefresh);
+    }
+    getCodeDslSync(forceRefresh = false) {
+      if (!this.state.codeDsl || forceRefresh) {
+        this.state.codeDsl = editorService.getCodeDslSync();
+      }
+      return this.state.codeDsl;
+    }
+    async getCodeContentById(id2) {
+      if (!id2)
+        return null;
+      const totalCodeDsl = await this.getCodeDsl();
+      if (!totalCodeDsl)
+        return null;
+      return totalCodeDsl[id2] ?? null;
+    }
+    async setCodeDslById(id, codeConfig) {
+      let codeDsl = await this.getCodeDsl();
+      const codeConfigProcessed = codeConfig;
+      if (codeConfig.content) {
+        codeConfigProcessed.content = eval(codeConfig.content);
+      }
+      if (!codeDsl) {
+        codeDsl = {
+          [id]: {
+            ...codeConfigProcessed
+          }
+        };
+      } else {
+        const existContent = codeDsl[id] || {};
+        codeDsl = {
+          ...codeDsl,
+          [id]: {
+            ...existContent,
+            ...codeConfigProcessed
+          }
+        };
+      }
+      await this.setCodeDsl(codeDsl);
+    }
+    async getCodeDslByIds(ids) {
+      const codeDsl2 = await this.getCodeDsl();
+      return lodashEs.pick(codeDsl2, ids);
+    }
+    async setCodeEditorShowStatus(status) {
+      this.state.isShowCodeEditor = status;
+    }
+    getCodeEditorShowStatus() {
+      return this.state.isShowCodeEditor;
+    }
+    setCodeEditorContent(status, id2) {
+      if (!id2)
+        return;
+      this.setId(id2);
+      this.state.isShowCodeEditor = status;
+    }
+    async getCurrentDsl() {
+      return await this.getCodeContentById(this.state.id);
+    }
+    getEditStatus() {
+      return this.state.editable;
+    }
+    async setEditStatus(status) {
+      this.state.editable = status;
+    }
+    setId(id2) {
+      if (!id2)
+        return;
+      this.state.id = id2;
+    }
+    getId() {
+      return this.state.id;
+    }
+    async setCombineIds(ids) {
+      this.state.combineIds = ids;
+    }
+    getCombineIds() {
+      return this.state.combineIds;
+    }
+    addCodeRelationListener() {
+      editorService.on("update", (nodes) => {
+        const relations = lodashEs.cloneDeep(this.state.relations);
+        nodes.forEach((node) => {
+          if (node?.id) {
+            relations[node.id] = [];
+            this.getNodeRelation(node, relations);
+          }
+        });
+        this.state.relations = { ...relations };
+      });
+      editorService.on("remove", (nodes) => {
+        nodes.forEach((node) => {
+          this.state.relations = this.deleteNodeRelation(node, this.state.relations);
+        });
+      });
+      editorService.on("history-change", (page) => {
+        const relations = {};
+        this.getNodeRelation(page, relations, true);
+        this.state.relations = relations;
+      });
+    }
+    refreshAllRelations() {
+      const root = editorService.get("root");
+      if (!root)
+        return;
+      const relations = {};
+      this.getNodeRelation(root, relations, true);
+      this.state.relations = relations;
+    }
+    getCombineInfo() {
+      return this.state.relations;
+    }
+    getUndeletableList() {
+      return this.state.undeletableList;
+    }
+    async setUndeleteableList(codeIds) {
+      this.state.undeletableList = codeIds;
+    }
+    setCodeDraft(codeId, content) {
+      globalThis.localStorage.setItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`, content);
+    }
+    getCodeDraft(codeId) {
+      return globalThis.localStorage.getItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`);
+    }
+    removeCodeDraft(codeId) {
+      globalThis.localStorage.removeItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`);
+    }
+    async deleteCodeDslByIds(codeIds) {
+      const currentDsl = await this.getCodeDsl();
+      const newDsl = lodashEs.omit(currentDsl, codeIds);
+      await this.setCodeDsl(newDsl);
+      return newDsl;
+    }
+    async getUniqueId() {
+      const newId = `code_${Math.random().toString(10).substring(2).substring(0, 4)}`;
+      const dsl = await this.getCodeDsl();
+      const existedIds = lodashEs.keys(dsl);
+      if (!existedIds.includes(newId))
+        return newId;
+      return await this.getUniqueId();
+    }
+    resetState() {
+      this.state.isShowCodeEditor = false;
+      this.state.codeDsl = null;
+      this.state.id = "";
+      this.state.editable = true;
+      this.state.combineIds = [];
+      this.state.undeletableList = [];
+    }
+    destroy() {
+      this.resetState();
+      this.removeAllListeners();
+      this.removeAllPlugins();
+    }
+    getNodeRelation(node, relation, deep = false) {
+      lodashEs.forIn(node, (value, key) => {
+        if (value?.hookType === schema.HookType.CODE && !lodashEs.isEmpty(value.hookData)) {
+          value.hookData.forEach((relationItem) => {
+            if (relationItem.codeId) {
+              relation[node.id] = lodashEs.union(relation[node.id], [relationItem.codeId]);
+            }
+          });
+          return;
+        }
+        let isContinue = false;
+        try {
+          isContinue = key !== "items" && typeof value === "object" && JSON.stringify(value).includes("hookType");
+        } catch (error) {
+          console.error(error);
+        }
+        if (isContinue) {
+          const unConfirmedValue = {
+            id: node.id,
+            ...value
+          };
+          this.getNodeRelation(unConfirmedValue, relation);
+        }
+        if (key === "items" && !lodashEs.isEmpty(value) && deep) {
+          value.forEach((item) => {
+            this.getNodeRelation(item, relation, deep);
+          });
+        }
+      });
+    }
+    deleteNodeRelation(node, relations) {
+      if (!node.id)
+        return {};
+      let newRelations = lodashEs.omit(relations, [node.id]);
+      if (!lodashEs.isEmpty(node.items)) {
+        node.items.forEach((item) => {
+          newRelations = this.deleteNodeRelation(item, newRelations);
+        });
+      }
+      return newRelations;
+    }
+  }
+  const codeBlockService = new CodeBlock();
+
   class ComponentList extends BaseService {
     state = vue.reactive({
       list: []
@@ -6050,6 +6070,7 @@
           disabledDragStart: props.disabledDragStart
         })
       );
+      codeBlockService.addCodeRelationListener();
       return services;
     }
   });