From 40410292d73c38525c2f20da5ab6a75302e5a171 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 14 Oct 2022 15:51:56 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E5=A4=9A=E9=80=89=E5=90=8E?=
 =?UTF-8?q?=E6=8B=96=E5=8A=A8=EF=BC=8C=E7=BB=84=E4=BB=B6=E6=A0=91=E4=BC=9A?=
 =?UTF-8?q?=E6=94=B6=E7=BC=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/layouts/Framework.vue     |  3 +-
 .../editor/src/layouts/sidebar/LayerPanel.vue | 39 ++++++++-----------
 packages/editor/src/services/editor.ts        |  4 +-
 packages/editor/src/utils/stage.ts            |  1 +
 4 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/packages/editor/src/layouts/Framework.vue b/packages/editor/src/layouts/Framework.vue
index 6da104a2..a62f3e6e 100644
--- 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
index 1de7442f..5861c703 100644
--- 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[];
+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 parent = editorService.get('parent');
+  if (!parent?.id) return;
 
-    const treeNode = tree.value.getNode(parent.id);
-    treeNode?.updateChildren();
+  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();
-    });
-  },
-);
+  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
index b33ed65c..97114b0f 100644
--- 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
index 0592b0ec..1a18adcc 100644
--- 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);
   });