Mouse zooming

src/plugin/keypress.ts

@@ -54,6 +54,17 @@ const handlePrevNext = function (mei: MindElixirInstance, direction: 'previous'
     mei.selectNode(sibling.firstChild.firstChild)
   }
 }
+const handleZoom = function (mei: MindElixirInstance, direction: 'in' | 'out', factor = 1) {
+  switch (direction) {
+    case 'in':
+      if (mei.scaleVal * factor > 1.6) return
+      mei.scale((mei.scaleVal += 0.2))
+      break
+    case 'out':
+      if (mei.scaleVal * factor < 0.6) return
+      mei.scale((mei.scaleVal -= 0.2))
+  }
+}
 
 export default function (mind: MindElixirInstance) {
   const handleRemove = () => {
@@ -66,7 +77,7 @@ export default function (mind: MindElixirInstance) {
     }
   }
   const key2func: Record<string, (e: KeyboardEvent) => void> = {
-    13: e => {
+    Enter: e => {
       // enter
       if (e.shiftKey) {
         mind.insertSibling('before')
@@ -76,20 +87,16 @@ export default function (mind: MindElixirInstance) {
         mind.insertSibling('after')
       }
     },
-    9: () => {
-      // tab
+    Tab: () => {
       mind.addChild()
     },
-    112: () => {
-      // f1
+    F1: () => {
       mind.toCenter()
     },
-    113: () => {
-      // f2
+    F2: () => {
       mind.beginEdit()
     },
-    38: e => {
-      // up
+    ArrowUp: e => {
       if (e.altKey) {
         mind.moveUpNode()
       } else if (e.metaKey || e.ctrlKey) {
@@ -98,77 +105,64 @@ export default function (mind: MindElixirInstance) {
         handlePrevNext(mind, 'previous')
       }
     },
-    40: e => {
-      // down
+    ArrowDown: e => {
       if (e.altKey) {
         mind.moveDownNode()
       } else {
         handlePrevNext(mind, 'next')
       }
     },
-    37: e => {
-      // left
+    ArrowLeft: e => {
       if (e.metaKey || e.ctrlKey) {
         return mind.initLeft()
       }
       handleLeftRight(mind, 'lhs')
     },
-    39: e => {
-      // right
+    ArrowRight: e => {
       if (e.metaKey || e.ctrlKey) {
         return mind.initRight()
       }
       handleLeftRight(mind, 'rhs')
     },
-    33() {
-      // pageUp
-      mind.moveUpNode()
+    PageUp: () => {
+      return mind.moveUpNode()
     },
-    34() {
-      // pageDown
+    PageDown: () => {
       mind.moveDownNode()
     },
-    67: (e: KeyboardEvent) => {
+    c: (e: KeyboardEvent) => {
       if (e.metaKey || e.ctrlKey) {
-        // ctrl c
         if (mind.currentNode) mind.waitCopy = [mind.currentNode]
         else if (mind.currentNodes) mind.waitCopy = mind.currentNodes
       }
     },
-    86: (e: KeyboardEvent) => {
+    v: (e: KeyboardEvent) => {
       if (!mind.waitCopy || !mind.currentNode) return
       if (e.metaKey || e.ctrlKey) {
-        // ctrl v
         if (mind.waitCopy.length === 1) {
           mind.copyNode(mind.waitCopy[0], mind.currentNode)
         } else {
           mind.copyNodes(mind.waitCopy, mind.currentNode)
         }
       }
     },
-    // ctrl +
-    187: (e: KeyboardEvent) => {
+    '+': (e: KeyboardEvent) => {
       if (e.metaKey || e.ctrlKey) {
-        if (mind.scaleVal > 1.6) return
-        mind.scale((mind.scaleVal += 0.2))
+        handleZoom(mind, 'in')
       }
     },
-    // ctrl -
-    189: (e: KeyboardEvent) => {
+    '-': (e: KeyboardEvent) => {
       if (e.metaKey || e.ctrlKey) {
-        if (mind.scaleVal < 0.6) return
-        mind.scale((mind.scaleVal -= 0.2))
+        handleZoom(mind, 'out')
       }
     },
-    // ctrl 0
-    48: (e: KeyboardEvent) => {
+    '0': (e: KeyboardEvent) => {
       if (e.metaKey || e.ctrlKey) {
         mind.scale(1)
       }
     },
-    // del,backspace
-    8: handleRemove,
-    46: handleRemove,
+    Delete: handleRemove,
+    Backspace: handleRemove,
   }
   mind.map.onkeydown = e => {
     e.preventDefault()
@@ -178,7 +172,17 @@ export default function (mind: MindElixirInstance) {
       // input
       return
     }
-    const keyHandler = key2func[e.keyCode]
+    const keyHandler = key2func[e.key]
     keyHandler && keyHandler(e)
   }
+
+  mind.map.onwheel = e => {
+    if (e.ctrlKey || e.metaKey) {
+      e.preventDefault()
+      const factor = Math.abs(e.deltaY / 100) // this can be tweaked
+      if (e.deltaY < 0) handleZoom(mind, 'in', factor)
+      else if (mind.scaleVal - 0.2 > 0) handleZoom(mind, 'out', factor)
+      e.stopPropagation()
+    }
+  }
 }

src/utils/objectManipulation.ts

@@ -1,13 +1,14 @@
 import type { NodeObj } from '../types'
 
-const getSibling = (obj: NodeObj): { siblings: NodeObj[]; index: number } => {
+const getSibling = (obj: NodeObj): { siblings: NodeObj[] | undefined; index: number } => {
   const siblings = obj.parent?.children as NodeObj[]
-  const index = siblings.indexOf(obj)
+  const index = siblings?.indexOf(obj) ?? 0
   return { siblings, index }
 }
 
 export function moveUpObj(obj: NodeObj) {
   const { siblings, index } = getSibling(obj)
+  if (siblings === undefined) return
   const t = siblings[index]
   if (index === 0) {
     siblings[index] = siblings[siblings.length - 1]
@@ -20,6 +21,7 @@ export function moveUpObj(obj: NodeObj) {
 
 export function moveDownObj(obj: NodeObj) {
   const { siblings, index } = getSibling(obj)
+  if (siblings === undefined) return
   const t = siblings[index]
   if (index === siblings.length - 1) {
     siblings[index] = siblings[0]
@@ -32,12 +34,14 @@ export function moveDownObj(obj: NodeObj) {
 
 export function removeNodeObj(obj: NodeObj) {
   const { siblings, index } = getSibling(obj)
+  if (siblings === undefined) return 0
   siblings.splice(index, 1)
   return siblings.length
 }
 
 export function insertNodeObj(newObj: NodeObj, type: 'before' | 'after', obj: NodeObj) {
   const { siblings, index } = getSibling(obj)
+  if (siblings === undefined) return
   if (type === 'before') {
     siblings.splice(index, 0, newObj)
   } else {
@@ -47,6 +51,7 @@ export function insertNodeObj(newObj: NodeObj, type: 'before' | 'after', obj: No
 
 export function insertParentNodeObj(obj: NodeObj, newObj: NodeObj) {
   const { siblings, index } = getSibling(obj)
+  if (siblings === undefined) return
   siblings[index] = newObj
   newObj.children = [obj]
 }
@@ -59,6 +64,7 @@ export function moveNodeObj(type: 'in' | 'before' | 'after', from: NodeObj, to:
   } else {
     if (from.direction !== undefined) from.direction = to.direction
     const { siblings, index } = getSibling(to)
+    if (siblings === undefined) return
     if (type === 'before') {
       siblings.splice(index, 0, from)
     } else {