@tmagic/editor 1.2.0-beta.5 → 1.2.0-beta.7

package/dist/tmagic-editor.umd.js

@@ -1783,10 +1783,10 @@
         newConfig = setLayout(newConfig, newLayout);
       }
       parentNodeItems[index] = newConfig;
-      const nodes = this.get("nodes");
+      const nodes = this.get("nodes") || [];
       const targetIndex = nodes.findIndex((nodeItem) => `${nodeItem.id}` === `${newConfig.id}`);
       nodes.splice(targetIndex, 1, newConfig);
-      this.set("nodes", nodes);
+      this.set("nodes", [...nodes]);
       this.get("stage")?.update({
         config: lodashEs.cloneDeep(newConfig),
         parentId: parent.id,
@@ -2408,6 +2408,8 @@
       getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY))
     ]);
     stage.on("select", (el) => {
+      if (`${editorService.get("node")?.id}` === el.id)
+        return;
       editorService.select(el.id);
     });
     stage.on("highlight", (el) => {
@@ -2623,6 +2625,7 @@
       const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
       const { editorService, uiService } = vue.inject("services") || {};
       const root = vue.computed(() => editorService?.get("root"));
+      const nodes = vue.computed(() => editorService?.get("nodes") || []);
       const pageLength = vue.computed(() => editorService?.get("pageLength") || 0);
       const showSrc = vue.computed(() => uiService?.get("showSrc"));
       const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
@@ -2711,7 +2714,7 @@
             ]),
             _: 2
           }, [
-            vue.unref(pageLength) > 0 ? {
+            vue.unref(pageLength) > 0 && vue.unref(nodes).length === 1 ? {
               name: "right",
               fn: vue.withCtx(() => [
                 vue.createVNode(vue.unref(design.TMagicScrollbar), null, {
@@ -3681,14 +3684,14 @@
             }, {
               default: vue.withCtx(() => [
                 vue.createVNode(vue.unref(design.TMagicInput), {
-                  "prefix-icon": "el-icon-search",
                   placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
                   class: "search-input",
                   size: "small",
                   clearable: "",
+                  "prefix-icon": vue.unref(iconsVue.Search),
                   modelValue: searchText.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchText.value = $event)
-                }, null, 8, ["modelValue"]),
+                }, null, 8, ["prefix-icon", "modelValue"]),
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(list), (group, index) => {
                   return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                     group.items && group.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCollapseItem), {
@@ -4058,7 +4061,15 @@
       const filterTextChangeHandler = (val) => {
         tree.value?.filter(val);
       };
-      const expandNodes = () => {
+      const expandNodes = async () => {
+        if (!tree.value)
+          return;
+        await vue.nextTick();
+        tree.value && Object.entries(tree.value.getStore().nodesMap).forEach(([id, node]) => {
+          if (node.expanded && node.data.items) {
+            expandedKeys.set(id, id);
+          }
+        });
         expandedKeys.forEach((key) => {
           if (!tree.value)
             return;
@@ -4068,26 +4079,7 @@
       vue.watch(
         () => editorService?.get("nodes"),
         (nodes) => {
-          if (!tree.value)
-            return;
-          if (!editorService)
-            return;
-          if (!nodes)
-            return;
-          selectedNodes.value = nodes;
-          const parent = editorService.get("parent");
-          if (!parent?.id)
-            return;
-          const treeNode = tree.value.getNode(parent.id);
-          treeNode?.updateChildren();
-          setTimeout(() => {
-            tree.value && Object.entries(tree.value.getStore().nodesMap).forEach(([id, node]) => {
-              if (node.expanded && node.data.items) {
-                expandedKeys.set(id, id);
-              }
-            });
-            expandNodes();
-          });
+          selectedNodes.value = nodes ?? [];
         }
       );
       const setTreeKeyStatus = () => {
@@ -4104,7 +4096,15 @@
           tree.value.setCurrentKey();
         }
       };
-      vue.watch(selectedIds, () => {
+      vue.watch([selectedIds, tree], async () => {
+        if (!tree.value || !editorService)
+          return;
+        const parent = editorService.get("parent");
+        if (!parent?.id)
+          return;
+        const treeNode = tree.value.getNode(parent.id);
+        treeNode?.updateChildren();
+        await expandNodes();
         setTreeKeyStatus();
       });
       const keycon = vue.ref();
@@ -4191,16 +4191,18 @@
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "layer-panel-header"),
             vue.createVNode(vue.unref(design.TMagicInput), {
-              class: "filterInput",
+              modelValue: filterText.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filterText.value = $event),
+              class: "search-input",
               size: "small",
               placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
               clearable: "",
-              modelValue: filterText.value,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filterText.value = $event),
+              "prefix-icon": vue.unref(iconsVue.Search),
               onChange: filterTextChangeHandler
-            }, null, 8, ["modelValue"]),
+            }, null, 8, ["modelValue", "prefix-icon"]),
             vue.unref(values).length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTree), {
               key: 0,
+              class: "magic-editor-layer-tree",
               ref_key: "tree",
               ref: tree,
               "node-key": "id",