From 58baf4c0aa33f83b98400a59adb9bbfb54eea924 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A1=97=E8=A7=92=E5=B0=8F=E6=9E=97?= <1013335014@qq.com>
Date: Wed, 3 Jul 2024 09:17:26 +0800
Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A=E5=B0=8F=E5=9C=B0=E5=9B=BE?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=8B=96=E6=8B=BD=E8=A7=86=E5=9B=BE=E6=A1=86?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E7=94=BB=E5=B8=83=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 simple-mind-map/src/plugins/MiniMap.js | 63 +++++++++++++++++++++++++-
 1 file changed, 61 insertions(+), 2 deletions(-)

diff --git a/simple-mind-map/src/plugins/MiniMap.js b/simple-mind-map/src/plugins/MiniMap.js
index 243aa23d..9f77c899 100644
--- a/simple-mind-map/src/plugins/MiniMap.js
+++ b/simple-mind-map/src/plugins/MiniMap.js
@@ -19,6 +19,7 @@ class MiniMap {
       x: 0,
       y: 0
     }
+    this.currentState = null
   }
 
   //  计算小地图的渲染数据
@@ -93,7 +94,14 @@ class MiniMap {
     })
     this.removeNodeContent(svg)
     const svgStr = svg.svg()
-
+    this.currentState = {
+      viewBoxStyle: {
+        ...viewBoxStyle
+      },
+      miniMapBoxScale,
+      miniMapBoxLeft,
+      miniMapBoxTop
+    }
     return {
       getImgUrl: async callback => {
         const res = await this.mindMap.doExport.fixSvgStrAndToBlob(svgStr)
@@ -144,7 +152,7 @@ class MiniMap {
 
   //  小地图鼠标移动事件
   onMousemove(e, sensitivityNum = 5) {
-    if (!this.isMousedown) {
+    if (!this.isMousedown || this.isViewBoxMousedown) {
       return
     }
     let ox = e.clientX - this.mousedownPos.x
@@ -157,6 +165,57 @@ class MiniMap {
   //  小地图鼠标松开事件
   onMouseup() {
     this.isMousedown = false
+    this.isViewBoxMousedown = false
+  }
+
+  // 视口框鼠标按下事件
+  onViewBoxMousedown(e) {
+    this.isViewBoxMousedown = true
+    this.mousedownPos = {
+      x: e.clientX,
+      y: e.clientY
+    }
+    // 保存视图当前的偏移量
+    let transformData = this.mindMap.view.getTransformData()
+    this.startViewPos = {
+      x: transformData.state.x,
+      y: transformData.state.y
+    }
+  }
+
+  // 视口框鼠标移动事件
+  onViewBoxMousemove(e) {
+    if (!this.isViewBoxMousedown || !this.currentState || this.isMousedown)
+      return
+    let ox = e.clientX - this.mousedownPos.x
+    let oy = e.clientY - this.mousedownPos.y
+    const { viewBoxStyle, miniMapBoxScale, miniMapBoxLeft, miniMapBoxTop } =
+      this.currentState
+    const left = Math.max(
+      miniMapBoxLeft,
+      Number.parseFloat(viewBoxStyle.left) + ox
+    )
+    const right = Math.max(
+      miniMapBoxLeft,
+      Number.parseFloat(viewBoxStyle.right) - ox
+    )
+    const top = Math.max(
+      miniMapBoxTop,
+      Number.parseFloat(viewBoxStyle.top) + oy
+    )
+    const bottom = Math.max(
+      miniMapBoxTop,
+      Number.parseFloat(viewBoxStyle.bottom) - oy
+    )
+    this.mindMap.emit('mini_map_view_box_position_change', {
+      left: left + 'px',
+      right: right + 'px',
+      top: top + 'px',
+      bottom: bottom + 'px'
+    })
+    // 在视图最初偏移量上累加更新量
+    this.mindMap.view.translateXTo(-ox / miniMapBoxScale + this.startViewPos.x)
+    this.mindMap.view.translateYTo(-oy / miniMapBoxScale + this.startViewPos.y)
   }
 }