From c78dd80c289495799f76709d7dde60b170b3a56e Mon Sep 17 00:00:00 2001
From: liujuping <liujup@foxmail.com>
Date: Tue, 23 May 2023 17:37:29 +0800
Subject: [PATCH] feat: update modals visible state in outline pane

---
 .../plugin-outline-pane/src/controllers/tree-node.ts |  4 +++-
 packages/plugin-outline-pane/src/controllers/tree.ts |  5 +++++
 .../plugin-outline-pane/src/views/tree-title.tsx     | 12 +++++++++---
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/plugin-outline-pane/src/controllers/tree-node.ts b/packages/plugin-outline-pane/src/controllers/tree-node.ts
index af82904ee..079ed77d6 100644
--- a/packages/plugin-outline-pane/src/controllers/tree-node.ts
+++ b/packages/plugin-outline-pane/src/controllers/tree-node.ts
@@ -244,7 +244,9 @@ export default class TreeNode {
     if (this.node.conditionGroup) {
       return;
     }
-    this.node.visible = !flag;
+    if (this.node.visible !== !flag) {
+      this.node.visible = !flag;
+    }
     this.event.emit(EVENT_NAMES.hiddenChanged, flag);
   }
 
diff --git a/packages/plugin-outline-pane/src/controllers/tree.ts b/packages/plugin-outline-pane/src/controllers/tree.ts
index 7b9ad0593..ab0d64b0f 100644
--- a/packages/plugin-outline-pane/src/controllers/tree.ts
+++ b/packages/plugin-outline-pane/src/controllers/tree.ts
@@ -40,6 +40,11 @@ export class Tree {
         treeNode?.notifyConditionChanged();
       }
     });
+
+    doc?.onChangeNodeVisible((node: IPublicModelNode, visible: boolean) => {
+      const treeNode = this.getTreeNodeById(node.id);
+      treeNode?.setHidden(!visible);
+    });
   }
 
   setNodeSelected(nodeId: string): void {
diff --git a/packages/plugin-outline-pane/src/views/tree-title.tsx b/packages/plugin-outline-pane/src/views/tree-title.tsx
index 923213238..6f35c6a61 100644
--- a/packages/plugin-outline-pane/src/views/tree-title.tsx
+++ b/packages/plugin-outline-pane/src/views/tree-title.tsx
@@ -28,6 +28,7 @@ export default class TreeTitle extends PureComponent<{
     editing: boolean;
     title: string;
     condition?: boolean;
+    visible?: boolean;
   } = {
     editing: false,
     title: '',
@@ -93,6 +94,11 @@ export default class TreeTitle extends PureComponent<{
         condition: treeNode.condition,
       });
     });
+    treeNode.onHiddenChanged((hidden: boolean) => {
+      this.setState({
+        visible: !hidden,
+      });
+    });
   }
 
   render() {
@@ -132,7 +138,7 @@ export default class TreeTitle extends PureComponent<{
         data-id={treeNode.id}
         onClick={() => {
           if (isModal) {
-            if (node.visible) {
+            if (this.state.visible) {
               node.document?.modalNodesManager?.setInvisible(node);
             } else {
               node.document?.modalNodesManager?.setVisible(node);
@@ -144,7 +150,7 @@ export default class TreeTitle extends PureComponent<{
           }
         }}
       >
-        {isModal && node.visible && (
+        {isModal && this.state.visible && (
           <div onClick={() => {
             node.document?.modalNodesManager?.setInvisible(node);
           }}
@@ -152,7 +158,7 @@ export default class TreeTitle extends PureComponent<{
             <IconRadioActive className="tree-node-modal-radio-active" />
           </div>
         )}
-        {isModal && !node.visible && (
+        {isModal && !this.state.visible && (
           <div onClick={() => {
             node.document?.modalNodesManager?.setVisible(node);
           }}