fix zoom on mouse cursor

Author: bluzky

example/editor.js

@@ -44,7 +44,7 @@ function updateMindmap(text) {
 }
 
 updateMindmap(text);
-viewer.fitView();
+// viewer.fitView();
 editor.update({ value: text });
 editor.textarea.focus();
 

src/js/parser/text-parser.js

@@ -7,14 +7,17 @@ function parse(text) {
     let currentLevel = 0
 
     for (let line of lines) {
+        let content = getContent(line)
+        if (content.trim() === "") continue
+
         if (root == null) {
             root = {
-                content: getContent(line),
+                content: content,
                 children: []
             }
             levelStack.push({ node: root, level: 0 })
         } else {
-            let content = getContent(line)
+
             let level = getLevel(line)
             let node = {
                 content: content,
@@ -25,8 +28,6 @@ function parse(text) {
                 break
             }
 
-            let lastIndex = levelStack.length - 1
-
             while (levelStack[levelStack.length - 1].level > level) {
                 levelStack.pop()
                 currentLevel -= 1
@@ -50,7 +51,7 @@ function parse(text) {
 }
 
 function getLevel(line) {
-    line = line.replace(/\t/, "    ")
+    line = line.replace(/\t/g, "    ")
     let leadingWs = line.match(/^\s*/)
     leadingWs = leadingWs[0] || ""
     return Math.round(leadingWs.length / 4)

src/js/viewer.js

@@ -54,14 +54,39 @@ class MindmapViewer {
   }
 
   zoomBy(percent, x = 0, y = 0) {
-    let dx = x * (this.scale + percent) - x * this.scale;
-    let dy = y * (this.scale + percent) - y * this.scale;
-    this.two.scene.scale = this.scale = this.scale + percent;
-
-    this.translateBy(-dx, -dy);
+    let translation = this.two.scene.translation.clone()
+    let currentCoord = this.clientToLocalCoord(x, y, this.scale)
+    let newScale = this.scale + this.scale * percent
+    let newCoord = this.clientToLocalCoord(x, y, newScale)
+
+    let dx = (newCoord.x - currentCoord.x)
+    let dy = (newCoord.y - currentCoord.y)
+    let newTranslation = this.localToClientCoord(dx, dy, newScale)
+    this.two.scene.scale = this.scale = newScale;
+
+    // this.translateBy(-dx, -dy);
+    this.two.scene.translation.copy(newTranslation)
     this.two.update();
   }
 
+
+  clientToLocalCoord(x, y, scale) {
+    let translation = this.two.scene.translation.clone()
+    let localCoord = new Two.Vector(x, y)
+    localCoord.subSelf(translation)
+    localCoord.divideScalar(scale)
+    return localCoord
+  }
+
+  localToClientCoord(x, y, scale) {
+    let clientCoord = new Two.Vector(x, y)
+    clientCoord.multiplyScalar(scale)
+    clientCoord.addSelf(this.two.scene.translation)
+    return clientCoord
+  }
+
+
+
   centerView() {
     let clientRect = this.mindMap.getBoundingBox();
     let centerX = (clientRect.left + clientRect.width / 2) * this.scale;
@@ -96,9 +121,47 @@ class MindmapViewer {
       e.stopPropagation();
       e.preventDefault();
 
-      var dy = e.deltaY / 100;
-      this.zoomBy(dy, e.clientX, e.clientY);
+      const direction = e.deltaY > 0 ? -1 : 1;
+      const factor = 0.03;
+      const zoom = direction * factor
+
+      let coord = this.getClientCoord(e)
+      this.zoomBy(zoom, coord.x, coord.y);
     });
+
+    stage.addEventListener("click", (e) => {
+      let coord = this.getClientCoord(e)
+      this.clientToLocalCoord(coord.x, coord.y, this.scale)
+    })
+  }
+
+  getClientCoord(mouseEvent) {
+    var obj = mouseEvent.currentTarget || mouseEvent.target
+    obj = obj.parentNode;
+    var objLeft = 0;
+    var objTop = 0;
+    var xpos;
+    var ypos;
+
+    while (obj.offsetParent) {
+      objLeft += obj.offsetLeft;
+      objTop += obj.offsetTop;
+      obj = obj.offsetParent;
+    }
+    if (mouseEvent) {
+      //FireFox
+      xpos = mouseEvent.pageX;
+      ypos = mouseEvent.pageY;
+    }
+    else {
+      //IE
+      xpos = window.event.x + document.body.scrollLeft - 2;
+      ypos = window.event.y + document.body.scrollTop - 2;
+    }
+    xpos -= objLeft;
+    ypos -= objTop;
+
+    return { x: xpos, y: ypos }
   }
 
   bindMouseDrag() {