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

@@ -179,8 +179,8 @@ class View {
   //  平移x,y方向
   translateXY(x, y) {
     if (x === 0 && y === 0) return
-    this.x += x
-    this.y += y
+    this.x += x * this.mindMap.opt.translateRatio
+    this.y += y * this.mindMap.opt.translateRatio
     this.transform()
     this.emitEvent('translate')
   }
@@ -188,7 +188,7 @@ class View {
   //  平移x方向
   translateX(step) {
     if (step === 0) return
-    this.x += step
+    this.x += step * this.mindMap.opt.translateRatio
     this.transform()
     this.emitEvent('translate')
   }
@@ -203,7 +203,7 @@ class View {
   //  平移y方向
   translateY(step) {
     if (step === 0) return
-    this.y += step
+    this.y += step * this.mindMap.opt.translateRatio
     this.transform()
     this.emitEvent('translate')
   }
@@ -247,7 +247,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 +257,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')