Merge pull request #152 from F-star/feat/scale-in-wheel-curor

Feat: 支持滚轮情况下，以光标为中心进行缩放

simple-mind-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-mind-map",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "一个简单的web在线思维导图",
   "authors": [
     {

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

@@ -13,7 +13,7 @@ export const defaultOpt = {
   // 主题配置，会和所选择的主题进行合并
   themeConfig: {},
   // 放大缩小的增量比例
-  scaleRatio: 0.1,
+  scaleRatio: 0.2,
   // 最多显示几个标签
   maxTag: 5,
   // 导出图片时的内边距

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

@@ -73,12 +73,12 @@ class View {
           // 鼠标滚轮，向上和向左，都是缩小
           case CONSTANTS.DIR.UP:
           case CONSTANTS.DIR.LEFT:
-            this.narrow()
+            this.narrow(e.clientX, e.clientY)
             break
           // 鼠标滚轮，向下和向右，都是放大
           case CONSTANTS.DIR.DOWN:
           case CONSTANTS.DIR.RIGHT:
-            this.enlarge()
+            this.enlarge(e.clientX, e.clientY)
             break
         }
       } else {
@@ -190,40 +190,43 @@ class View {
   }
 
   //  缩小
-  narrow() {
-    let scale
-    if (this.scale - this.mindMap.opt.scaleRatio > 0.1) {
-      scale = this.scale - this.mindMap.opt.scaleRatio
-    } else {
-      scale = 0.1
-    }
-    this.scaleInCenter(this.mindMap.width / 2, this.mindMap.height / 2, scale)
+  narrow(cx, cy) {
+    const scale = Math.max(this.scale - this.mindMap.opt.scaleRatio, 0.1)
+    this.scaleInCenter(scale, cx, cy)
     this.transform()
     this.mindMap.emit('scale', this.scale)
   }
 
   //  放大
-  enlarge() {
+  enlarge(cx, cy) {
     const scale = this.scale + this.mindMap.opt.scaleRatio
-    this.scaleInCenter(this.mindMap.width / 2, this.mindMap.height / 2, scale)
+    this.scaleInCenter(scale, cx, cy)
     this.transform()
     this.mindMap.emit('scale', this.scale)
   }
 
-  // 基于画布中心进行缩放
-  scaleInCenter(cx, cy, scale) {
+  // 基于指定中心进行缩放，cx，cy 可不指定，此时会使用画布中心点
+  scaleInCenter(scale, cx, cy) {
+    if (cx === undefined || cy === undefined) {
+      cx = this.mindMap.width / 2
+      cy = this.mindMap.height / 2
+    }
     const prevScale = this.scale
-    const dx = (cx - this.x) * (1 - scale / prevScale)
-    const dy = (cy - this.y) * (1 - scale / prevScale)
-
-    this.x += dx;
-    this.y += dy;
+    const ratio = 1 - scale / prevScale
+    const dx = (cx - this.x) * ratio
+    const dy = (cy - this.y) * ratio
+    this.x += dx
+    this.y += dy
     this.scale = scale
   }
 
   //  设置缩放
-  setScale(scale) {
-    this.scale = scale
+  setScale(scale, cx, cy) {
+    if (cx !== undefined && cy !== undefined) {
+      this.scaleInCenter(scale, cx, cy)
+    } else {
+      this.scale = scale
+    }
     this.transform()
     this.mindMap.emit('scale', this.scale)
   }

simple-mind-map/src/plugins/TouchEvent.js

@@ -50,16 +50,20 @@ class TouchEvent {
     } else if (len === 2) {
       let touch1 = e.touches[0]
       let touch2 = e.touches[1]
-      let distance = Math.sqrt(
-        Math.pow(touch1.clientX - touch2.clientX, 2) +
-          Math.pow(touch1.clientY - touch2.clientY, 2)
-      )
+      let ox = touch1.clientX - touch2.clientX
+      let oy = touch1.clientY - touch2.clientY
+      let distance = Math.sqrt(Math.pow(ox, 2) + Math.pow(oy, 2))
+      // 以两指中心点进行缩放
+      let { x: touch1ClientX, y: touch1ClientY } = this.mindMap.toPos(touch1.clientX, touch1.clientY)
+      let { x: touch2ClientX, y: touch2ClientY } = this.mindMap.toPos(touch2.clientX, touch2.clientY)
+      let cx = (touch1ClientX + touch2ClientX) / 2
+      let cy = (touch1ClientY + touch2ClientY) / 2
       if (distance > this.doubleTouchmoveDistance) {
         // 放大
-        this.mindMap.view.enlarge()
+        this.mindMap.view.enlarge(cx, cy)
       } else {
         // 缩小
-        this.mindMap.view.narrow()
+        this.mindMap.view.narrow(cx, cy)
       }
       this.doubleTouchmoveDistance = distance
     }

web/src/pages/Doc/en/changelog/index.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.6.4
+
+New: 1.The default is to scale at the center point of the canvas. 2.Optimize the scaling of both fingers on the mobile end, with the center position of the two fingers as the center point for scaling.
+
 ## 0.6.3
 
 Fix: 1.Fix the issue where the summary node will respond to inserting node shortcuts.

web/src/pages/Doc/en/changelog/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<h2>0.6.4</h2>
+<p>New: 1.The default is to scale at the center point of the canvas. 2.Optimize the scaling of both fingers on the mobile end, with the center position of the two fingers as the center point for scaling.</p>
 <h2>0.6.3</h2>
 <p>Fix: 1.Fix the issue where the summary node will respond to inserting node shortcuts.</p>
 <p>New: 1.Support custom node content.</p>

web/src/pages/Doc/en/view/index.md

@@ -35,11 +35,19 @@ Translate the `y` direction to a specific position
 
 Revert to the default transformation
 
-### narrow()
+### narrow(cx, cy)
+
+- `cx`:（v0.6.4+）Zoom to the specified position on the canvas, default to the center point of the canvas
+
+- `cy`:（v0.6.4+）Zoom to the specified position on the canvas, default to the center point of the canvas
 
 Zoom out
 
-### enlarge()
+### enlarge(cx, cy)
+
+- `cx`:（v0.6.4+）Zoom to the specified position on the canvas, default to the center point of the canvas
+
+- `cy`:（v0.6.4+）Zoom to the specified position on the canvas, default to the center point of the canvas
 
 Zoom in
 
@@ -56,8 +64,12 @@ Get the current transform data, can be used for display
 Dynamically set transform data, transform data can be obtained through the
 getTransformData method"
 
-### setScale(scale)
+### setScale(scale, cx, cy)
 
 > v0.2.17+
 
+- `cx`:（v0.6.4+）Zoom to the specified position on the canvas, default to the center point of the canvas
+
+- `cy`:（v0.6.4+）Zoom to the specified position on the canvas, default to the center point of the canvas
+
 Setting Zoom

web/src/pages/Doc/en/view/index.vue

@@ -25,9 +25,25 @@ through <code>mindMap.view</code></p>
 <p>Translate the <code>y</code> direction to a specific position</p>
 <h3>reset()</h3>
 <p>Revert to the default transformation</p>
-<h3>narrow()</h3>
+<h3>narrow(cx, cy)</h3>
+<ul>
+<li>
+<p><code>cx</code>:（v0.6.4+）Zoom to the specified position on the canvas, default to the center point of the canvas</p>
+</li>
+<li>
+<p><code>cy</code>:（v0.6.4+）Zoom to the specified position on the canvas, default to the center point of the canvas</p>
+</li>
+</ul>
 <p>Zoom out</p>
-<h3>enlarge()</h3>
+<h3>enlarge(cx, cy)</h3>
+<ul>
+<li>
+<p><code>cx</code>:（v0.6.4+）Zoom to the specified position on the canvas, default to the center point of the canvas</p>
+</li>
+<li>
+<p><code>cy</code>:（v0.6.4+）Zoom to the specified position on the canvas, default to the center point of the canvas</p>
+</li>
+</ul>
 <p>Zoom in</p>
 <h3>getTransformData()</h3>
 <blockquote>
@@ -40,10 +56,18 @@ through <code>mindMap.view</code></p>
 </blockquote>
 <p>Dynamically set transform data, transform data can be obtained through the
 getTransformData method&quot;</p>
-<h3>setScale(scale)</h3>
+<h3>setScale(scale, cx, cy)</h3>
 <blockquote>
 <p>v0.2.17+</p>
 </blockquote>
+<ul>
+<li>
+<p><code>cx</code>:（v0.6.4+）Zoom to the specified position on the canvas, default to the center point of the canvas</p>
+</li>
+<li>
+<p><code>cy</code>:（v0.6.4+）Zoom to the specified position on the canvas, default to the center point of the canvas</p>
+</li>
+</ul>
 <p>Setting Zoom</p>
 
   </div>

web/src/pages/Doc/zh/changelog/index.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.6.4
+
+新增：1.默认以画布中心点进行缩放。 2.优化移动端双指缩放，以双指中心位置为中心点进行缩放。
+
 ## 0.6.3
 
 修复：1.修复概要节点会响应插入节点快捷键的问题。

web/src/pages/Doc/zh/changelog/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<h2>0.6.4</h2>
+<p>新增：1.默认以画布中心点进行缩放。 2.优化移动端双指缩放，以双指中心位置为中心点进行缩放。</p>
 <h2>0.6.3</h2>
 <p>修复：1.修复概要节点会响应插入节点快捷键的问题。</p>
 <p>新增：1.支持自定义节点内容。</p>

web/src/pages/Doc/zh/view/index.md

@@ -34,11 +34,19 @@
 
 恢复到默认的变换
 
-### narrow()
+### narrow(cx, cy)
+
+- `cx`：（v0.6.4+）以画布指定位置进行缩放，默认为画布中心点
+
+- `cy`：（v0.6.4+）以画布指定位置进行缩放，默认为画布中心点
 
 缩小
 
-### enlarge()
+### enlarge(cx, cy)
+
+- `cx`：（v0.6.4+）以画布指定位置进行缩放，默认为画布中心点
+
+- `cy`：（v0.6.4+）以画布指定位置进行缩放，默认为画布中心点
 
 放大
 
@@ -54,8 +62,13 @@
 
 动态设置变换数据，可以通过getTransformData方法获取变换数据
 
-### setScale(scale)
+### setScale(scale, cx, cy)
 
 > v0.2.17+
 
-设置缩放
+- `cx`：（v0.6.4+）以画布指定位置进行缩放，默认为画布中心点
+
+- `cy`：（v0.6.4+）以画布指定位置进行缩放，默认为画布中心点
+
+设置缩放
+

web/src/pages/Doc/zh/view/index.vue

@@ -24,9 +24,25 @@
 <p>平移<code>y</code>方向到指定位置</p>
 <h3>reset()</h3>
 <p>恢复到默认的变换</p>
-<h3>narrow()</h3>
+<h3>narrow(cx, cy)</h3>
+<ul>
+<li>
+<p><code>cx</code>：（v0.6.4+）以画布指定位置进行缩放，默认为画布中心点</p>
+</li>
+<li>
+<p><code>cy</code>：（v0.6.4+）以画布指定位置进行缩放，默认为画布中心点</p>
+</li>
+</ul>
 <p>缩小</p>
-<h3>enlarge()</h3>
+<h3>enlarge(cx, cy)</h3>
+<ul>
+<li>
+<p><code>cx</code>：（v0.6.4+）以画布指定位置进行缩放，默认为画布中心点</p>
+</li>
+<li>
+<p><code>cy</code>：（v0.6.4+）以画布指定位置进行缩放，默认为画布中心点</p>
+</li>
+</ul>
 <p>放大</p>
 <h3>getTransformData()</h3>
 <blockquote>
@@ -38,10 +54,18 @@
 <p>v0.1.1+</p>
 </blockquote>
 <p>动态设置变换数据，可以通过getTransformData方法获取变换数据</p>
-<h3>setScale(scale)</h3>
+<h3>setScale(scale, cx, cy)</h3>
 <blockquote>
 <p>v0.2.17+</p>
 </blockquote>
+<ul>
+<li>
+<p><code>cx</code>：（v0.6.4+）以画布指定位置进行缩放，默认为画布中心点</p>
+</li>
+<li>
+<p><code>cy</code>：（v0.6.4+）以画布指定位置进行缩放，默认为画布中心点</p>
+</li>
+</ul>
 <p>设置缩放</p>
 
   </div>

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

@@ -32,6 +32,7 @@ import Drag from 'simple-mind-map/src/plugins/Drag.js'
 import Select from 'simple-mind-map/src/plugins/Select.js'
 import RichText from 'simple-mind-map/src/plugins/RichText.js'
 import AssociativeLine from 'simple-mind-map/src/plugins/AssociativeLine.js'
+import TouchEvent from 'simple-mind-map/src/plugins/TouchEvent.js'
 import Outline from './Outline'
 import Style from './Style'
 import BaseStyle from './BaseStyle'
@@ -67,6 +68,7 @@ MindMap
   .usePlugin(Export)
   .usePlugin(Select)
   .usePlugin(AssociativeLine)
+  // .usePlugin(TouchEvent)
 
 // 注册自定义主题
 // customThemeList.forEach((item) => {