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

package/dist/style.css

@@ -265,8 +265,11 @@
   left: 0;
   z-index: 1;
 }
-.magic-editor-layer-panel .search-input .el-input__suffix {
-  padding: 10px 5px;
+.magic-editor-layer-panel .search-input .el-input__prefix {
+  padding: 7px;
+}
+.magic-editor-layer-panel .magic-editor-layer-tree {
+  padding-top: 48px;
 }
 .magic-editor-layer-panel .node-content {
   flex: 1;
@@ -325,11 +328,11 @@
 .ui-component-panel {
   height: 100%;
   border-top: 0 !important;
-  margin-top: 50px;
+  margin-top: 48px;
   background-color: #ffffff;
 }
 .ui-component-panel .search-input {
-  background: #f8fbff;
+  background: #fff;
   color: #bbbbbb;
   padding: 10px;
   position: absolute;
@@ -339,10 +342,7 @@
   z-index: 1;
 }
 .ui-component-panel .search-input .el-input__prefix {
-  padding: 10px;
-}
-.ui-component-panel .search-input .el-input__suffix {
-  padding: 10px 5px;
+  padding: 7px;
 }
 .ui-component-panel .el-collapse-item > div:first-of-type {
   border-bottom: 1px solid #d9dbdd;

package/dist/tmagic-editor.mjs

@@ -2,7 +2,7 @@ import { defineComponent, computed, resolveComponent, openBlock, createBlock, no
 import serialize from 'serialize-javascript';
 import { cloneDeep, map, xor, throttle, pick, isEmpty, forIn, omit, keys, mergeWith, uniq } from 'lodash-es';
 import { TMagicCard, TMagicTooltip, tMagicMessage, TMagicButton, TMagicIcon, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicDialog, TMagicInput, TMagicTree, TMagicCollapse, TMagicCollapseItem, TMagicTabPane, TMagicTabs, TMagicPopover } from '@tmagic/design';
-import { Delete, Close, Edit, Plus, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, View, Link, Files, DocumentCopy, EditPen, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons-vue';
+import { Delete, Close, Edit, Plus, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, View, Link, Search, Files, DocumentCopy, EditPen, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons-vue';
 import * as monaco from 'monaco-editor';
 import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS, ContainerHighlightType } from '@tmagic/stage';
 import { NodeType } from '@tmagic/schema';
@@ -1765,10 +1765,10 @@ class Editor$1 extends BaseService {
       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: cloneDeep(newConfig),
       parentId: parent.id,
@@ -2390,6 +2390,8 @@ const useStage = (stageOptions) => {
     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) => {
@@ -2532,8 +2534,11 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     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,
@@ -2544,8 +2549,11 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     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,
@@ -2599,43 +2607,60 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
     const { editorService, uiService } = inject("services") || {};
     const root = computed(() => editorService?.get("root"));
+    const nodes = computed(() => editorService?.get("nodes") || []);
     const pageLength = computed(() => editorService?.get("pageLength") || 0);
     const showSrc = 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 = ref({
-      left: DEFAULT_LEFT_COLUMN_WIDTH,
+      left: leftColumnWidthCacheData,
       center: 0,
-      right: 0
+      right: RightColumnWidthCacheData
     });
-    uiService?.set("columnWidth", columnWidth.value);
-    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;
+    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);
+    );
+    watch(
+      () => columnWidth.value.right,
+      (right) => {
+        if (typeof right === "undefined")
+          return;
+        globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${right}`);
+      }
+    );
+    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 = resolveComponent("magic-code-editor");
@@ -2671,7 +2696,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           ]),
           _: 2
         }, [
-          unref(pageLength) > 0 ? {
+          unref(pageLength) > 0 && unref(nodes).length === 1 ? {
             name: "right",
             fn: withCtx(() => [
               createVNode(unref(TMagicScrollbar), null, {
@@ -3641,14 +3666,14 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           }, {
             default: withCtx(() => [
               createVNode(unref(TMagicInput), {
-                "prefix-icon": "el-icon-search",
                 placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
                 class: "search-input",
                 size: "small",
                 clearable: "",
+                "prefix-icon": unref(Search),
                 modelValue: searchText.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchText.value = $event)
-              }, null, 8, ["modelValue"]),
+              }, null, 8, ["prefix-icon", "modelValue"]),
               (openBlock(true), createElementBlock(Fragment, null, renderList(unref(list), (group, index) => {
                 return openBlock(), createElementBlock(Fragment, null, [
                   group.items && group.items.length ? (openBlock(), createBlock(unref(TMagicCollapseItem), {
@@ -4018,7 +4043,15 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     const filterTextChangeHandler = (val) => {
       tree.value?.filter(val);
     };
-    const expandNodes = () => {
+    const expandNodes = async () => {
+      if (!tree.value)
+        return;
+      await 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;
@@ -4028,26 +4061,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     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 = () => {
@@ -4064,7 +4078,15 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         tree.value.setCurrentKey();
       }
     };
-    watch(selectedIds, () => {
+    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 = ref();
@@ -4151,16 +4173,18 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "layer-panel-header"),
           createVNode(unref(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": unref(Search),
             onChange: filterTextChangeHandler
-          }, null, 8, ["modelValue"]),
+          }, null, 8, ["modelValue", "prefix-icon"]),
           unref(values).length ? (openBlock(), createBlock(unref(TMagicTree), {
             key: 0,
+            class: "magic-editor-layer-tree",
             ref_key: "tree",
             ref: tree,
             "node-key": "id",