feat: keep node position after expand

Author: SSShooter

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mind-elixir",
-  "version": "5.0.5",
+  "version": "5.0.6",
   "type": "module",
   "description": "Mind elixir is a free open source mind map core.",
   "keywords": [

src/index.ts

@@ -95,10 +95,6 @@ function MindElixir(
   // infrastructure
   const canvas = $d.createElement('div') // map-canvas Element
   canvas.className = 'map-canvas'
-  setTimeout(() => {
-    // prevent map move when initialized
-    canvas.style.transition = 'all 0.3s'
-  }, 300)
   this.map = canvas
   this.container.setAttribute('tabindex', '0')
   this.container.appendChild(this.map)

src/interact.ts

@@ -29,7 +29,7 @@ export const scrollIntoView = function (this: MindElixirInstance, el: HTMLElemen
     const containerCenterY = containerRect.top + containerRect.height / 2
     const offsetX = elCenterX - containerCenterX
     const offsetY = elCenterY - containerCenterY
-    this.move(-offsetX, -offsetY)
+    this.move(-offsetX, -offsetY, true)
   }
 }
 
@@ -154,14 +154,21 @@ export const scaleFit = function (this: MindElixirInstance) {
 /**
  * Move the map by `dx` and `dy`.
  */
-export const move = function (this: MindElixirInstance, dx: number, dy: number) {
+export const move = function (this: MindElixirInstance, dx: number, dy: number, smooth = false) {
   const { map, scaleVal, bus } = this
   const transform = map.style.transform
   let { x, y } = getTranslate(transform)
   x += dx
   y += dy
 
+  if (smooth) {
+    map.style.transition = 'transform 0.3s'
+    setTimeout(() => {
+      map.style.transition = 'none'
+    }, 300)
+  }
   map.style.transform = `translate(${x}px, ${y}px) scale(${scaleVal})`
+
   bus.fire('move', { dx, dy })
 }
 
@@ -310,6 +317,14 @@ export const expandNode = function (this: MindElixirInstance, el: Topic, isExpan
   } else {
     node.expanded = true
   }
+
+  // Calculate position before expansion
+  const expanderRect = el.getBoundingClientRect()
+  const beforePosition = {
+    x: expanderRect.left,
+    y: expanderRect.top,
+  }
+
   const parent = el.parentNode
   const expander = parent.children[1]!
   expander.expanded = node.expanded
@@ -331,22 +346,40 @@ export const expandNode = function (this: MindElixirInstance, el: Topic, isExpan
 
   this.linkDiv(el.closest('me-main > me-wrapper') as Wrapper)
 
-  // scroll into view if the node is out of view
-  const elRect = el.getBoundingClientRect()
-  const containerRect = this.container.getBoundingClientRect()
-  const isOutOfView =
-    elRect.bottom > containerRect.bottom || elRect.top < containerRect.top || elRect.right > containerRect.right || elRect.left < containerRect.left
-  if (isOutOfView) {
-    this.scrollIntoView(el)
+  // Calculate position after expansion and compensate for drift
+  const afterRect = el.getBoundingClientRect()
+  const afterPosition = {
+    x: afterRect.left,
+    y: afterRect.top,
   }
 
+  // Calculate the drift and move to compensate
+  const driftX = beforePosition.x - afterPosition.x
+  const driftY = beforePosition.y - afterPosition.y
+
+  this.move(driftX, driftY)
+
   this.bus.fire('expandNode', node)
 }
 
 export const expandNodeAll = function (this: MindElixirInstance, el: Topic, isExpand?: boolean) {
   const node = el.nodeObj
+  const beforeRect = el.getBoundingClientRect()
+  const beforePosition = {
+    x: beforeRect.left,
+    y: beforeRect.top,
+  }
   setExpand(node, isExpand ?? !node.expanded)
   this.refresh()
+  const afterRect = this.findEle(node.id).getBoundingClientRect()
+  const afterPosition = {
+    x: afterRect.left,
+    y: afterRect.top,
+  }
+  const driftX = beforePosition.x - afterPosition.x
+  const driftY = beforePosition.y - afterPosition.y
+
+  this.move(driftX, driftY)
 }
 
 /**

src/mouse.ts

@@ -85,7 +85,6 @@ export default function (mind: MindElixirInstance) {
     if (target.className === 'circle') return
     if (target.contentEditable !== 'plaintext-only') {
       dragMoveHelper.mousedown = true
-      mind.map.style.transition = 'none'
       // Capture pointer to ensure we receive all pointer events even if pointer moves outside the element
       target.setPointerCapture(e.pointerId)
     }
@@ -143,9 +142,7 @@ export default function (mind: MindElixirInstance) {
     } else if (e.shiftKey) {
       mind.move(-e.deltaY, 0)
     } else {
-      mind.map.style.transition = 'none'
       mind.move(-e.deltaX, -e.deltaY)
-      mind.map.style.transition = 'transform 0.3s'
     }
   }
 

src/utils/dragMoveHelper.ts

@@ -14,7 +14,6 @@ export function createDragMoveHelper(mei: MindElixirInstance) {
     },
     clear() {
       this.mousedown = false
-      mei.map.style.transition = 'transform 0.3s'
     },
   }
 }

tests/expand-collapse.spec.ts

@@ -109,8 +109,10 @@ test('Expand all children recursively', async ({ page, me }) => {
   await expect(page.getByText('Child 2', { exact: true })).not.toBeVisible()
   await expect(page.getByText('Grandchild 1', { exact: true })).not.toBeVisible()
 
-  // Double-click expand button for recursive expansion
-  await branch1Button.dblclick()
+  // Ctrl click for recursive expansion
+  await page.keyboard.down("Control");
+  await branch1Button.click()
+  await page.keyboard.up("Control");
 
   // Verify all levels of child nodes are visible
   await expect(page.getByText('Child 1', { exact: true })).toBeVisible()