@tmagic/editor 1.2.0-beta.4 → 1.2.0-beta.6

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) => {
@@ -2550,8 +2552,11 @@
       const changeLeft = (deltaX) => {
         if (typeof props.left === "undefined")
           return;
-        const left = Math.max(props.left + deltaX, props.minLeft) || 0;
+        let left = Math.max(props.left + deltaX, props.minLeft) || 0;
         emit("update:left", left);
+        if (clientWidth - left - (props.right || 0) <= 0) {
+          left = props.left;
+        }
         center.value = clientWidth - left - (props.right || 0);
         emit("change", {
           left,
@@ -2562,8 +2567,11 @@
       const changeRight = (deltaX) => {
         if (typeof props.right === "undefined")
           return;
-        const right = Math.max(props.right - deltaX, props.minRight) || 0;
+        let right = Math.max(props.right - deltaX, props.minRight) || 0;
         emit("update:right", right);
+        if (clientWidth - (props.left || 0) - right <= 0) {
+          right = props.right;
+        }
         center.value = clientWidth - (props.left || 0) - right;
         emit("change", {
           left: props.left,
@@ -2617,43 +2625,60 @@
       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";
+      const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
+      const leftColumnWidthCacheData = Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY));
+      const RightColumnWidthCacheData = Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY));
       const columnWidth = vue.ref({
-        left: DEFAULT_LEFT_COLUMN_WIDTH,
+        left: leftColumnWidthCacheData,
         center: 0,
-        right: 0
+        right: RightColumnWidthCacheData
       });
-      uiService?.set("columnWidth", columnWidth.value);
-      vue.watchEffect(() => {
-        if (pageLength.value <= 0) {
-          columnWidth.value.right = void 0;
-          columnWidth.value.center = globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH;
-        } else {
-          columnWidth.value.right = columnWidth.value.right || DEFAULT_RIGHT_COLUMN_WIDTH;
-          columnWidth.value.center = globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH;
+      vue.watch(
+        pageLength,
+        (length) => {
+          const left = columnWidth.value.left || DEFAULT_LEFT_COLUMN_WIDTH;
+          columnWidth.value.left = left;
+          if (length <= 0) {
+            columnWidth.value.right = void 0;
+            columnWidth.value.center = globalThis.document.body.clientWidth - left;
+          } else {
+            const right = columnWidth.value.right || RightColumnWidthCacheData || DEFAULT_RIGHT_COLUMN_WIDTH;
+            columnWidth.value.right = right;
+            columnWidth.value.center = globalThis.document.body.clientWidth - left - right;
+          }
+          uiService?.set("columnWidth", columnWidth);
+        },
+        {
+          immediate: true
         }
-      });
-      const saveCode = (value) => {
-        try {
-          editorService?.set("root", eval(value));
-        } catch (e) {
-          console.error(e);
+      );
+      vue.watch(
+        () => columnWidth.value.right,
+        (right) => {
+          if (typeof right === "undefined")
+            return;
+          globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${right}`);
+        }
+      );
+      vue.watch(
+        () => columnWidth.value.left,
+        (left) => {
+          globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${left}`);
         }
+      );
+      const columnWidthChange = (columnWidth2) => {
+        uiService?.set("columnWidth", columnWidth2);
       };
-      const COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorColumnWidthData";
-      const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
-      if (columnWidthCacheData) {
+      const saveCode = (value) => {
         try {
-          const columnWidthCache = JSON.parse(columnWidthCacheData);
-          columnWidth.value = columnWidthCache;
+          editorService?.set("root", eval(value));
         } catch (e) {
           console.error(e);
         }
-      }
-      const columnWidthChange = (columnWidth2) => {
-        uiService?.set("columnWidth", columnWidth2);
-        globalThis.localStorage.setItem(COLUMN_WIDTH_STORAGE_KEY, JSON.stringify(columnWidth2));
       };
       return (_ctx, _cache) => {
         const _component_magic_code_editor = vue.resolveComponent("magic-code-editor");
@@ -2689,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, {
@@ -3659,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), {
@@ -4036,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;
@@ -4046,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 = () => {
@@ -4082,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();
@@ -4169,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",