Demo:修复激活节点,移动画布就关闭侧边栏的问题

web/src/pages/Edit/components/AssociativeLineStyle.vue

@@ -298,7 +298,9 @@ export default {
     },
 
     associativeLineDeactivate() {
-      this.setActiveSidebar('')
+      if (this.activeSidebar === 'associativeLineStyle') {
+        this.setActiveSidebar(null)
+      }
       this.activeLineNode = null
       this.activeLineToNode = null
       this.style = {

web/src/pages/Edit/components/LinkNodeSelect.vue

@@ -172,3 +172,6 @@ export default {
   overflow: auto;
 }
 </style>
+<style lang="less" scoped>
+@import url('../../../style/outlineTree.less');
+</style>

web/src/pages/Edit/components/NodeIconToolbar.vue

@@ -76,7 +76,7 @@ export default {
             this.updatePos()
             this.showNodeIconToolbar = true
             if (this.activeSidebar === 'nodeIconSidebar') {
-                this.setActiveSidebar('')
+                this.setActiveSidebar(null)
             }
         },
 

web/src/pages/Edit/components/NodeNoteSidebar.vue

@@ -55,6 +55,9 @@ export default {
     ...mapMutations(['setActiveSidebar']),
 
     onNodeActive(...args) {
+      if (this.activeSidebar !== 'noteSidebar') {
+        return
+      }
       const nodes = [...args[1]]
       if (nodes.length > 0) {
         if (nodes[0] !== this.node) {

web/src/pages/Edit/components/NodeOuterFrame.vue

@@ -435,19 +435,11 @@ export default {
   },
   created() {
     this.mindMap.on('outer_frame_active', this.onOuterFrameActive)
-    this.mindMap.on('scale', this.hide)
-    this.mindMap.on('translate', this.hide)
-    this.mindMap.on('svg_mousedown', this.hide)
-    this.mindMap.on('expand_btn_click', this.hide)
     this.mindMap.on('outer_frame_delete', this.hide)
     this.mindMap.on('outer_frame_deactivate', this.hide)
   },
   beforeDestroy() {
     this.mindMap.off('outer_frame_active', this.onOuterFrameActive)
-    this.mindMap.off('scale', this.hide)
-    this.mindMap.off('translate', this.hide)
-    this.mindMap.off('svg_mousedown', this.hide)
-    this.mindMap.off('expand_btn_click', this.hide)
     this.mindMap.off('outer_frame_delete', this.hide)
     this.mindMap.off('outer_frame_deactivate', this.hide)
   },
@@ -510,6 +502,9 @@ export default {
     },
 
     hide() {
+      if (this.activeSidebar !== 'nodeOuterFrameStyle') {
+        return
+      }
       this.setActiveSidebar(null)
     }
   }

web/src/pages/Edit/components/Outline.vue

@@ -351,67 +351,6 @@ export default {
   }
 }
 </style>
-<style lang="less">
+<style lang="less" scoped>
-.outlineTree {
+@import url('../../../style/outlineTree.less');
-  &.isDark {
-    background-color: #262a2e;
-
-    .customNode {
-      color: #fff;
-    }
-
-    &.el-tree--highlight-current {
-      /deep/ .el-tree-node.is-current > .el-tree-node__content {
-        background-color: hsla(0, 0%, 100%, 0.05) !important;
-      }
-    }
-
-    /deep/ .el-tree-node__content:hover,
-    .el-upload-list__item:hover {
-      background-color: hsla(0, 0%, 100%, 0.02) !important;
-    }
-
-    /deep/ .el-tree-node__content {
-      .el-tree-node__expand-icon {
-        color: #fff;
-
-        &.is-leaf {
-          &::after {
-            background-color: #fff;
-          }
-        }
-      }
-    }
-  }
-
-  /deep/ .el-tree-node > .el-tree-node__children {
-    overflow: inherit;
-  }
-
-  /deep/ .el-tree-node__content {
-    height: auto;
-    margin: 5px 0;
-
-    .el-tree-node__expand-icon {
-      color: #262a2e;
-
-      &.is-leaf {
-        color: transparent;
-        position: relative;
-
-        &::after {
-          background-color: #262a2e;
-          position: absolute;
-          content: '';
-          width: 5px;
-          height: 5px;
-          border-radius: 50%;
-          left: 10px;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-      }
-    }
-  }
-}
 </style>

web/src/pages/Edit/components/OutlineEdit.vue

@@ -363,3 +363,6 @@ export default {
   }
 }
 </style>
+<style lang="less" scoped>
+@import url('../../../style/outlineTree.less');
+</style>

web/src/pages/Edit/components/OutlineSidebar.vue

@@ -71,7 +71,7 @@ export default {
     ...mapMutations(['setIsOutlineEdit', 'setActiveSidebar']),
 
     onChangeToOutlineEdit() {
-      this.setActiveSidebar('')
+      this.setActiveSidebar(null)
       this.setIsOutlineEdit(true)
     },
 

web/src/pages/Edit/components/Sidebar.vue

@@ -60,7 +60,7 @@ export default {
 
     close() {
       this.show = false
-      this.setActiveSidebar('')
+      this.setActiveSidebar(null)
     },
 
     getEl() {

web/src/style/outlineTree.less

@@ -0,0 +1,62 @@
+.outlineTree {
+  &.isDark {
+    background-color: #262a2e;
+
+    .customNode {
+      color: #fff;
+    }
+
+    &.el-tree--highlight-current {
+      /deep/ .el-tree-node.is-current > .el-tree-node__content {
+        background-color: hsla(0, 0%, 100%, 0.05) !important;
+      }
+    }
+
+    /deep/ .el-tree-node__content:hover,
+    .el-upload-list__item:hover {
+      background-color: hsla(0, 0%, 100%, 0.02) !important;
+    }
+
+    /deep/ .el-tree-node__content {
+      .el-tree-node__expand-icon {
+        color: #fff;
+
+        &.is-leaf {
+          &::after {
+            background-color: #fff;
+          }
+        }
+      }
+    }
+  }
+
+  /deep/ .el-tree-node > .el-tree-node__children {
+    overflow: inherit;
+  }
+
+  /deep/ .el-tree-node__content {
+    height: auto;
+    margin: 5px 0;
+
+    .el-tree-node__expand-icon {
+      color: #262a2e;
+
+      &.is-leaf {
+        color: transparent;
+        position: relative;
+
+        &::after {
+          background-color: #262a2e;
+          position: absolute;
+          content: '';
+          width: 5px;
+          height: 5px;
+          border-radius: 50%;
+          left: 10px;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+    }
+  }
+}