@tmagic/editor 1.2.0-beta.5 → 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) => {
@@ -2605,6 +2607,7 @@ 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";
@@ -2693,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, {
@@ -3663,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), {
@@ -4040,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;
@@ -4050,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 = () => {
@@ -4086,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();
@@ -4173,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",