@tmagic/editor 1.1.0-beta.10 → 1.1.0-beta.11

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.0-beta.10",
+  "version": "1.1.0-beta.11",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -45,11 +45,11 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.6",
-    "@tmagic/core": "1.1.0-beta.10",
-    "@tmagic/form": "1.1.0-beta.10",
-    "@tmagic/schema": "1.1.0-beta.10",
-    "@tmagic/stage": "1.1.0-beta.10",
-    "@tmagic/utils": "1.1.0-beta.10",
+    "@tmagic/core": "1.1.0-beta.11",
+    "@tmagic/form": "1.1.0-beta.11",
+    "@tmagic/schema": "1.1.0-beta.11",
+    "@tmagic/stage": "1.1.0-beta.11",
+    "@tmagic/utils": "1.1.0-beta.11",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "element-plus": "^2.2.6",
@@ -62,7 +62,7 @@
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/form": "1.1.0-beta.10",
+    "@tmagic/form": "1.1.0-beta.11",
     "element-plus": "^2.2.6",
     "monaco-editor": "^0.32.1",
     "vue": "^3.2.37"

package/src/fields/UISelect.vue

@@ -3,8 +3,8 @@
     <el-button type="danger" :icon="Delete" text style="padding: 0">取消</el-button>
   </div>
   <div class="m-fields-ui-select" v-else @click="startSelect" style="display: flex">
-    <el-tooltip content="清除">
-      <el-button v-if="val" style="padding: 0" type="danger" :icon="Close" text @click.stop="deleteHandler"></el-button>
+    <el-tooltip v-if="val" content="清除">
+      <el-button style="padding: 0" type="danger" :icon="Close" text @click.stop="deleteHandler"></el-button>
     </el-tooltip>
     <el-tooltip :content="val ? toName + '_' + val : '点击此处选择'">
       <el-button text style="padding: 0; margin: 0">{{ val ? toName + '_' + val : '点击此处选择' }}</el-button>

package/src/layouts/sidebar/LayerPanel.vue

@@ -15,6 +15,7 @@
       v-if="values.length"
       ref="tree"
       node-key="id"
+      empty-text="页面空荡荡的"
       draggable
       :default-expanded-keys="expandedKeys"
       :load="loadItems"
@@ -29,7 +30,8 @@
       @node-click="clickHandler"
       @node-contextmenu="contextmenu"
       @node-drag-end="handleDragEnd"
-      empty-text="页面空荡荡的"
+      @node-collapse="handleCollapse"
+      @node-expand="handleExpand"
     >
       <template #default="{ node, data }">
         <div
@@ -60,7 +62,7 @@ import { computed, defineComponent, inject, Ref, ref, watchEffect } from 'vue';
 import type { ElTree } from 'element-plus';
 import { throttle } from 'lodash-es';
 
-import type { MNode, MPage } from '@tmagic/schema';
+import type { Id, MNode, MPage } from '@tmagic/schema';
 import { MContainer, NodeType } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 
@@ -122,22 +124,41 @@ const useDrop = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorServi
 });
 
 const useStatus = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorService?: EditorService) => {
-  const highlightNode = ref<MNode>();
   const node = ref<MNode>();
   const page = computed(() => editorService?.get('page'));
+  const expandedKeys = new Map<Id, Id>();
+
+  const expandNodes = () => {
+    expandedKeys.forEach((key) => {
+      if (!tree.value) return;
+      tree.value.getNode(key)?.expand();
+    });
+  };
 
   watchEffect(() => {
     if (!tree.value) return;
-    node.value = editorService?.get('node');
-    node.value && tree.value.setCurrentKey(node.value.id, true);
+    if (!editorService) return;
+    node.value = editorService.get('node');
+
+    if (!node.value) return;
 
-    const parent = editorService?.get('parent');
+    tree.value.setCurrentKey(node.value.id, true);
+
+    const parent = editorService.get('parent');
     if (!parent?.id) return;
 
     const treeNode = tree.value.getNode(parent.id);
     treeNode?.updateChildren();
 
-    highlightNode.value = editorService?.get('highlightNode');
+    setTimeout(() => {
+      tree.value &&
+        Object.entries(tree.value.store.nodesMap).forEach(([id, node]) => {
+          if (node.expanded && node.data.items) {
+            expandedKeys.set(id, id);
+          }
+        });
+      expandNodes();
+    });
   });
 
   return {
@@ -153,9 +174,19 @@ const useStatus = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorSer
       resolve([]);
     },
 
-    highlightNode,
+    highlightNode: computed(() => editorService?.get('highlightNode')),
     clickNode: node,
     expandedKeys: computed(() => (node.value ? [node.value.id] : [])),
+
+    handleCollapse: (data: MNode) => {
+      expandedKeys.delete(data.id);
+    },
+
+    handleExpand: (data: MNode) => {
+      const parent = editorService?.getParentById(data.id);
+      if (!parent?.id) return;
+      expandedKeys.set(parent.id, parent.id);
+    },
   };
 };
 

package/types/layouts/sidebar/LayerPanel.vue.d.ts

@@ -1,5 +1,5 @@
 import { Ref } from 'vue';
-import type { MNode } from '@tmagic/schema';
+import type { Id, MNode } from '@tmagic/schema';
 declare const _default: import("vue").DefineComponent<{}, {
     highlightHandler: import("lodash-es").DebouncedFunc<(data: MNode) => void>;
     toggleClickFlag: () => void;
@@ -13,9 +13,11 @@ declare const _default: import("vue").DefineComponent<{}, {
     handleDragEnd(e: any): Promise<void>;
     values: import("vue").ComputedRef<MNode[]>;
     loadItems: (node: any, resolve: Function) => any;
-    highlightNode: Ref<MNode | undefined>;
+    highlightNode: import("vue").ComputedRef<MNode | undefined>;
     clickNode: Ref<MNode | undefined>;
-    expandedKeys: import("vue").ComputedRef<import("@tmagic/schema").Id[]>;
+    expandedKeys: import("vue").ComputedRef<Id[]>;
+    handleCollapse: (data: MNode) => void;
+    handleExpand: (data: MNode) => void;
     tree: Ref<({
         $: import("vue").ComponentInternalInstance;
         $data: {};