fix(editor): 多选后拖动，组件树会收缩

Tencent · Oct 14, 2022 · 4041029 · 4041029
1 parent a6ecbb6
commit 4041029
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 28 deletions.
diff --git a/packages/editor/src/layouts/Framework.vue b/packages/editor/src/layouts/Framework.vue
@@ -33,7 +33,7 @@
         </slot>
       </template>
 
-      <template v-if="pageLength > 0" #right>
+      <template v-if="pageLength > 0 && nodes.length === 1" #right>
         <TMagicScrollbar>
           <slot name="props-panel"></slot>
         </TMagicScrollbar>
@@ -68,6 +68,7 @@ withDefaults(
 const { editorService, uiService } = inject<Services>('services') || {};
 
 const root = computed(() => editorService?.get<MApp>('root'));
+const nodes = computed(() => editorService?.get<Node[]>('nodes') || []);
 
 const pageLength = computed(() => editorService?.get<number>('pageLength') || 0);
 const showSrc = computed(() => uiService?.get<boolean>('showSrc'));

diff --git a/packages/editor/src/layouts/sidebar/LayerPanel.vue b/packages/editor/src/layouts/sidebar/LayerPanel.vue
@@ -215,31 +215,26 @@ const expandNodes = () => {
   });
 };
 
-watch(
-  () => editorService?.get('nodes'),
-  (nodes) => {
-    if (!tree.value) return;
-    if (!editorService) return;
-    if (!nodes) return;
-    selectedNodes.value = nodes as unknown as MNode[];
-
-    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]: [string, any]) => {
-          if (node.expanded && node.data.items) {
-            expandedKeys.set(id, id);
-          }
-        });
-      expandNodes();
-    });
-  },
-);
+watch([() => editorService?.get('nodes'), tree], ([nodes]) => {
+  if (!tree.value || !editorService || !nodes) return;
+  selectedNodes.value = nodes as unknown as MNode[];
+
+  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]: [string, any]) => {
+        if (node.expanded && node.data.items) {
+          expandedKeys.set(id, id);
+        }
+      });
+    expandNodes();
+  });
+});
 
 // 设置树节点选中状态
 const setTreeKeyStatus = () => {

diff --git a/packages/editor/src/services/editor.ts b/packages/editor/src/services/editor.ts
@@ -484,10 +484,10 @@ class Editor extends BaseService {
     parentNodeItems[index] = newConfig;
 
     // 将update后的配置更新到nodes中
-    const nodes = this.get('nodes');
+    const nodes = this.get<MNode[]>('nodes') || [];
     const targetIndex = nodes.findIndex((nodeItem: MNode) => `${nodeItem.id}` === `${newConfig.id}`);
     nodes.splice(targetIndex, 1, newConfig);
-    this.set('nodes', nodes);
+    this.set('nodes', [...nodes]);
 
     this.get<StageCore | null>('stage')?.update({
       config: cloneDeep(newConfig),

diff --git a/packages/editor/src/utils/stage.ts b/packages/editor/src/utils/stage.ts
@@ -46,6 +46,7 @@ export const useStage = (stageOptions: StageOptions) => {
   ]);
 
   stage.on('select', (el: HTMLElement) => {
+    if (`${editorService.get('node')?.id}` === el.id) return;
     editorService.select(el.id);
   });
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,6 +46,7 @@ export const useStage = (stageOptions: StageOptions) => { @@
       ]);
       stage.on('select', (el: HTMLElement) => {
+        if (`${editorService.get('node')?.id}` === el.id) return;
         editorService.select(el.id);
       });
@@ Expand Down @@