Merge pull request #886 from Tarrency/feature-to-the-feature

feat: 配置平移步长和扩缩最值，解决触控板灵敏度问题

simple-mind-map/src/constants/defaultOptions.js

@@ -19,6 +19,12 @@ export const defaultOpt = {
   themeConfig: {},
   // 放大缩小的增量比例
   scaleRatio: 0.2,
+  // 平移的步长比例
+  translateRatio: 1,
+  // 最小缩小值，百分数
+  minZoomRatio: 20,
+  // 最大放大值，百分数
+  maxZoomRatio: 400,
   // 鼠标缩放是否以鼠标当前位置为中心点，否则以画布中心点
   mouseScaleCenterUseMousePosition: true,
   // 最多显示几个标签

simple-mind-map/src/core/event/Event.js

@@ -156,7 +156,10 @@ class Event extends EventEmitter {
     // 判断是否是触控板
     let isTouchPad = false
     // mac、windows
-    if (e.wheelDeltaY === e.deltaY * -3 || Math.abs(e.wheelDeltaY) <= 10) {
+    // if (e.wheelDeltaY === e.deltaY * -3 || Math.abs(e.wheelDeltaY) <= 10) {
+    //   isTouchPad = true
+    // }
+    if (Math.abs(e.deltaY) <= 50) {
       isTouchPad = true
     }
     this.emit('mousewheel', e, dirs, this, isTouchPad)

simple-mind-map/src/core/view/View.js

@@ -138,7 +138,8 @@ class View {
         if (dirs.includes(CONSTANTS.DIR.RIGHT)) {
           mx = -stepX
         }
-        this.translateXY(mx, my)
+        // this.translateXY(mx, my)
+        this.translateXYwithRatio(mx, my)
       }
     })
     this.mindMap.on('resize', () => {
@@ -185,6 +186,15 @@ class View {
     this.emitEvent('translate')
   }
 
+    //  鼠标/触控板滑动时，根据配置的平移步长比例，平移x,y方向
+    translateXYwithRatio(x, y) {
+      if (x === 0 && y === 0) return
+      this.x += x * this.mindMap.opt.translateRatio
+      this.y += y * this.mindMap.opt.translateRatio
+      this.transform()
+      this.emitEvent('translate')
+    }
+
   //  平移x方向
   translateX(step) {
     if (step === 0) return
@@ -247,7 +257,8 @@ class View {
   //  缩小
   narrow(cx, cy, isTouchPad) {
     const scaleRatio = this.mindMap.opt.scaleRatio / (isTouchPad ? 5 : 1)
-    const scale = Math.max(this.scale - scaleRatio, 0.1)
+    // const scale = Math.max(this.scale - scaleRatio, 0.1)
+    const scale = Math.max(this.scale - scaleRatio, this.mindMap.opt.minZoomRatio / 100)
     this.scaleInCenter(scale, cx, cy)
     this.transform()
     this.emitEvent('scale')
@@ -256,7 +267,8 @@ class View {
   //  放大
   enlarge(cx, cy, isTouchPad) {
     const scaleRatio = this.mindMap.opt.scaleRatio / (isTouchPad ? 5 : 1)
-    const scale = this.scale + scaleRatio
+    // const scale = this.scale + scaleRatio
+    const scale = Math.min(this.scale + scaleRatio, this.mindMap.opt.maxZoomRatio / 100)
     this.scaleInCenter(scale, cx, cy)
     this.transform()
     this.emitEvent('scale')