Feat:新增自定义判断wheel事件是否来自触控板的实例化选项;优化代码

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

@@ -19,12 +19,16 @@ export const defaultOpt = {
   themeConfig: {},
   // 放大缩小的增量比例
   scaleRatio: 0.2,
-  // 平移的步长比例
+  // 平移的步长比例，只在鼠标滚轮和触控板触发的平移中应用
   translateRatio: 1,
-  // 最小缩小值，百分数
+  // 最小缩小值，百分数，最小为0，该选项只会影响view.narrow方法（影响的行为为Ctrl+-快捷键、鼠标滚轮及触控板），不会影响其他方法，比如view.setScale，所以需要你自行限制大小
   minZoomRatio: 20,
-  // 最大放大值，百分数
+  // 最大放大值，百分数，传-1代表不限制，否则传0以上数字，，该选项只会影响view.enlarge方法
   maxZoomRatio: 400,
+  // 自定义判断wheel事件是否来自电脑的触控板
+  // 默认是通过判断e.deltaY的值是否小于10，显然这种方法是不准确的，当鼠标滚动的很慢，或者触摸移动的很快时判断就失效了，如果你有更好的方法，欢迎提交issue
+  // 如果你希望自己来判断，那么传递一个函数，接收一个参数e（事件对象），需要返回true或false，代表是否是来自触控板
+  customCheckIsTouchPad: null,
   // 鼠标缩放是否以鼠标当前位置为中心点，否则以画布中心点
   mouseScaleCenterUseMousePosition: true,
   // 最多显示几个标签

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

@@ -159,8 +159,11 @@ class Event extends EventEmitter {
     // if (e.wheelDeltaY === e.deltaY * -3 || Math.abs(e.wheelDeltaY) <= 10) {
     //   isTouchPad = true
     // }
-    if (Math.abs(e.deltaY) <= 50) {
+    const { customCheckIsTouchPad } = this.mindMap.opt
-      isTouchPad = true
+    if (typeof customCheckIsTouchPad === 'function') {
+      isTouchPad = customCheckIsTouchPad(e)
+    } else {
+      isTouchPad = Math.abs(e.deltaY) <= 10
     }
     this.emit('mousewheel', e, dirs, this, isTouchPad)
   }

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

@@ -63,7 +63,8 @@ class View {
         mouseScaleCenterUseMousePosition,
         mousewheelMoveStep,
         mousewheelZoomActionReverse,
-        disableMouseWheelZoom
+        disableMouseWheelZoom,
+        translateRatio
       } = this.mindMap.opt
       // 是否自定义鼠标滚轮事件
       if (
@@ -138,8 +139,7 @@ class View {
         if (dirs.includes(CONSTANTS.DIR.RIGHT)) {
           mx = -stepX
         }
-        // this.translateXY(mx, my)
+        this.translateXY(mx * translateRatio, my * translateRatio)
-        this.translateXYwithRatio(mx, my)
       }
     })
     this.mindMap.on('resize', () => {
@@ -186,15 +186,6 @@ 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
@@ -256,9 +247,9 @@ class View {
 
   //  缩小
   narrow(cx, cy, isTouchPad) {
-    const scaleRatio = this.mindMap.opt.scaleRatio / (isTouchPad ? 5 : 1)
+    let { scaleRatio, minZoomRatio } = this.mindMap.opt
-    // const scale = Math.max(this.scale - scaleRatio, 0.1)
+    scaleRatio = scaleRatio / (isTouchPad ? 5 : 1)
-    const scale = Math.max(this.scale - scaleRatio, this.mindMap.opt.minZoomRatio / 100)
+    const scale = Math.max(this.scale - scaleRatio, minZoomRatio / 100)
     this.scaleInCenter(scale, cx, cy)
     this.transform()
     this.emitEvent('scale')
@@ -266,9 +257,14 @@ class View {
 
   //  放大
   enlarge(cx, cy, isTouchPad) {
-    const scaleRatio = this.mindMap.opt.scaleRatio / (isTouchPad ? 5 : 1)
+    let { scaleRatio, maxZoomRatio } = this.mindMap.opt
-    // const scale = this.scale + scaleRatio
+    scaleRatio = scaleRatio / (isTouchPad ? 5 : 1)
-    const scale = Math.min(this.scale + scaleRatio, this.mindMap.opt.maxZoomRatio / 100)
+    let scale = 0
+    if (maxZoomRatio === -1) {
+      scale = this.scale + scaleRatio
+    } else {
+      scale = Math.min(this.scale + scaleRatio, maxZoomRatio / 100)
+    }
     this.scaleInCenter(scale, cx, cy)
     this.transform()
     this.emitEvent('scale')