Demo：1.小地图支持拖拽视图框调整画布位置；2.鼠标移出小地图停止鼠标事件；

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

@@ -12,7 +12,7 @@
       ref="mindMapContainer"
     ></div>
     <Count :mindMap="mindMap" v-if="!isZenMode"></Count>
-    <Navigator :mindMap="mindMap"></Navigator>
+    <Navigator v-if="mindMap" :mindMap="mindMap"></Navigator>
     <NavigatorToolbar :mindMap="mindMap" v-if="!isZenMode"></NavigatorToolbar>
     <OutlineSidebar :mindMap="mindMap"></OutlineSidebar>
     <Style v-if="!isZenMode"></Style>

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

@@ -19,7 +19,13 @@
     >
       <img :src="mindMapImg" @mousedown.prevent />
     </div>
-    <div class="windowBox" :style="viewBoxStyle"></div>
+    <div
+      class="windowBox"
+      :style="viewBoxStyle"
+      :class="{ withTransition: withTransition }"
+      @mousedown.stop="onViewBoxMousedown"
+      @mousemove="onViewBoxMousemove"
+    ></div>
   </div>
 </template>
 
@@ -49,7 +55,8 @@ export default {
       },
       mindMapImg: '',
       width: 0,
-      setSizeTimer: null
+      setSizeTimer: null,
+      withTransition: true
     }
   },
   computed: {
@@ -65,6 +72,10 @@ export default {
     this.$bus.$on('view_data_change', this.data_change)
     this.$bus.$on('node_tree_render_end', this.data_change)
     window.addEventListener('mouseup', this.onMouseup)
+    this.mindMap.on(
+      'mini_map_view_box_position_change',
+      this.onViewBoxPositionChange
+    )
   },
   destroyed() {
     window.removeEventListener('resize', this.setSize)
@@ -73,6 +84,10 @@ export default {
     this.$bus.$off('view_data_change', this.data_change)
     this.$bus.$off('node_tree_render_end', this.data_change)
     window.removeEventListener('mouseup', this.onMouseup)
+    this.mindMap.off(
+      'mini_map_view_box_position_change',
+      this.onViewBoxPositionChange
+    )
   },
   methods: {
     // 切换显示小地图
@@ -120,6 +135,7 @@ export default {
       this.boxHeight = height
     },
 
+    // 渲染小地图
     drawMiniMap() {
       let {
         getImgUrl,
@@ -138,16 +154,41 @@ export default {
       this.svgBoxTop = miniMapBoxTop
     },
 
+    // 小地图鼠标按下事件
     onMousedown(e) {
       this.mindMap.miniMap.onMousedown(e)
     },
 
+    // 小地图鼠标移动事件
     onMousemove(e) {
       this.mindMap.miniMap.onMousemove(e)
     },
 
+    // 鼠标松开事件，最好绑定要window
     onMouseup(e) {
+      if (!this.withTransition) {
+        this.withTransition = true
+      }
       this.mindMap.miniMap.onMouseup(e)
+    },
+
+    // 视口框的鼠标按下事件
+    onViewBoxMousedown(e) {
+      this.mindMap.miniMap.onViewBoxMousedown(e)
+    },
+
+    // 视口框的鼠标移动事件
+    onViewBoxMousemove(e) {
+      this.mindMap.miniMap.onViewBoxMousemove(e)
+    },
+
+    // 视口框的位置大小改变了，需要更新
+    onViewBoxPositionChange({ left, right, top, bottom }) {
+      this.withTransition = false
+      this.viewBoxStyle.left = left
+      this.viewBoxStyle.right = right
+      this.viewBoxStyle.top = top
+      this.viewBoxStyle.bottom = bottom
     }
   }
 }
@@ -179,7 +220,11 @@ export default {
   .windowBox {
     position: absolute;
     border: 2px solid rgb(238, 69, 69);
-    transition: all 0.3s;
+    background-color: rgba(238, 69, 69, 0.2);
+
+    &.withTransition {
+      transition: all 0.3s;
+    }
   }
 }
 </style>