From 2c31caf34f740470a313314112798f7aae2a020c Mon Sep 17 00:00:00 2001
From: parisma <parisma@tencent.com>
Date: Fri, 14 Oct 2022 18:08:31 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E8=AE=BE=E7=BD=AE=E9=AB=98?=
 =?UTF-8?q?=E4=BA=AE=E8=8A=82=E7=82=B9=E6=93=8D=E4=BD=9C=E4=B8=80=E5=AE=9A?=
 =?UTF-8?q?=E8=A6=81=E5=9C=A8=E5=88=B7=E6=96=B0=E5=B1=95=E5=BC=80=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E4=B9=8B=E5=90=8E=EF=BC=8C=E5=90=A6=E5=88=99=E5=8F=AF?=
 =?UTF-8?q?=E8=83=BD=E5=AF=BC=E8=87=B4=E8=AE=BE=E7=BD=AE=E7=9A=84=E9=AB=98?=
 =?UTF-8?q?=E4=BA=AE=E6=97=A0=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#404
---
 .../editor/src/layouts/sidebar/LayerPanel.vue | 51 ++++++++++---------
 1 file changed, 27 insertions(+), 24 deletions(-)

diff --git a/packages/editor/src/layouts/sidebar/LayerPanel.vue b/packages/editor/src/layouts/sidebar/LayerPanel.vue
index 5861c703..e37afddf 100644
--- a/packages/editor/src/layouts/sidebar/LayerPanel.vue
+++ b/packages/editor/src/layouts/sidebar/LayerPanel.vue
@@ -66,7 +66,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref, watch } from 'vue';
+import { computed, inject, nextTick, ref, watch } from 'vue';
 import { Search } from '@element-plus/icons-vue';
 import KeyController from 'keycon';
 import { throttle } from 'lodash-es';
@@ -207,34 +207,28 @@ const filterTextChangeHandler = (val: string) => {
   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]: [string, any]) => {
+      if (node.expanded && node.data.items) {
+        expandedKeys.set(id, id);
+      }
+    });
   expandedKeys.forEach((key) => {
     if (!tree.value) return;
     tree.value.getNode(key)?.expand();
   });
 };
 
-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();
-  });
-});
+watch(
+  () => editorService?.get<MNode[]>('nodes'),
+  (nodes) => {
+    selectedNodes.value = nodes ?? [];
+  },
+);
 
 // 设置树节点选中状态
 const setTreeKeyStatus = () => {
@@ -253,7 +247,16 @@ const setTreeKeyStatus = () => {
   }
 };
 
-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();
 });