fix: drag mind map root node should layout in real time (#9252)

Fixes [BS-2062](https://linear.app/affine-design/issue/BS-2062/拖拽整个-mind-map-还是希望和之前一样，整个思维导图跟手)

blocksuite/affine/block-surface/src/view/mindmap.ts

@@ -69,7 +69,10 @@ export class MindMapView extends GfxElementModelView<MindmapElementModel> {
           if (payload.props['xywh']) {
             updateButtons();
           }
-          if (payload.props['hidden'] !== undefined) {
+          if (
+            payload.props['hidden'] !== undefined ||
+            payload.props['opacity'] !== undefined
+          ) {
             this._updateButtonVisibility(payload.id);
           }
         }
@@ -169,6 +172,7 @@ export class MindMapView extends GfxElementModelView<MindmapElementModel> {
 
     if (!latestNode) {
       buttonModel.opacity = 0;
+      buttonModel.hidden = true;
       return;
     }
 
@@ -186,9 +190,9 @@ export class MindMapView extends GfxElementModelView<MindmapElementModel> {
 
     buttonModel.hidden = latestNode.element.hidden;
     buttonModel.opacity =
-      hasChildren && notHidden && (collapsed || isNodeSelected || hovered)
+      (hasChildren && notHidden && (collapsed || isNodeSelected || hovered)
         ? 1
-        : 0;
+        : 0) * (latestNode.element.opacity ?? 1);
   }
 
   private _updateCollapseButton(node: MindmapNode) {
@@ -216,7 +220,7 @@ export class MindMapView extends GfxElementModelView<MindmapElementModel> {
       const buttonStyle = collapsed ? style.expandButton : style.collapseButton;
 
       Object.entries(buttonStyle).forEach(([key, value]) => {
-        // @ts-expect-error FIXME: ts error
+        // @ts-expect-error key is string
         collapseButton[key as unknown] = value;
       });
 

blocksuite/affine/model/src/elements/mindmap/mindmap.ts

@@ -624,6 +624,15 @@ export class MindmapElementModel extends GfxGroupLikeElementModel<MindmapElement
     return this._nodeMap.get(id) ?? null;
   }
 
+  getNodeByPath(path: number[]): MindmapNode | null {
+    let node: MindmapNode | null = this._tree;
+    for (let i = 1; i < path.length; i++) {
+      node = node?.children[path[i]];
+      if (!node) return null;
+    }
+    return node;
+  }
+
   getParentNode(id: string) {
     const node = this.children.get(id);
 

blocksuite/blocks/src/root-block/edgeless/edgeless-root-block.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import type {
   SurfaceBlockComponent,
   SurfaceBlockModel,
@@ -129,6 +128,10 @@ export class EdgelessRootBlockComponent extends BlockComponent<
     return this.std.event;
   }
 
+  get fontLoader() {
+    return this.std.get(FontLoaderService);
+  }
+
   get gfx() {
     return this.std.get(GfxControllerIdentifier);
   }

blocksuite/blocks/src/root-block/edgeless/gfx-tool/default-tool-ext/mind-map-ext/mind-map-ext.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import {
   MindmapUtils,
   NODE_HORIZONTAL_SPACING,
@@ -30,7 +29,11 @@ import type { MindMapIndicatorOverlay } from './indicator-overlay.js';
 type DragMindMapCtx = {
   mindmap: MindmapElementModel;
   node: MindmapNode;
-  clear?: () => void;
+  clear: () => void;
+  /**
+   * Whether the dragged node is the root node of the mind map
+   */
+  isRoot: boolean;
   originalMindMapBound: Bound;
   startPoint: PointerEventState;
 };
@@ -94,75 +97,73 @@ export class MindMapExt extends DefaultToolExt {
           node: hoveredNode,
         };
 
-        // 1. not hovered on any mind map or
-        // 2. hovered on the other mind map but not on any node
-        // then consider user is trying to detach the node
+        // hovered on the currently dragged mind map but
+        // 1. not hovered on any node or
+        // 2. hovered on the node that is itself or its children (which is not allowed)
+        // then consider user is trying to drop the node to its original position
         if (
-          !hoveredMindMap ||
-          (hoveredMindMap !== dragMindMapCtx.mindmap && !hoveredNode)
-        ) {
-          hoveredCtx.detach = true;
-
-          const reset = (hoveredCtx.abort = MindmapUtils.hideNodeConnector(
-            dragMindMapCtx.mindmap,
+          hoveredNode &&
+          hoveredMindMap &&
+          !MindmapUtils.containsNode(
+            hoveredMindMap,
+            hoveredNode,
             dragMindMapCtx.node
-          ));
+          )
+        ) {
+          const operation = MindmapUtils.tryMoveNode(
+            hoveredMindMap,
+            hoveredNode,
+            dragMindMapCtx.mindmap,
+            dragMindMapCtx.node,
+            [x, y],
+            options => this._drawIndicator(options)
+          );
 
-          hoveredCtx.abort = () => {
-            reset?.();
+          if (operation) {
+            hoveredCtx.abort = operation.abort;
+            hoveredCtx.merge = operation.merge;
+          }
+        } else if (dragMindMapCtx.isRoot) {
+          dragMindMapCtx.mindmap.layout();
+          hoveredCtx.merge = () => {
+            dragMindMapCtx.mindmap.layout();
           };
         } else {
-          // hovered on the currently dragging mind map but
-          // 1. not hovered on any node or
-          // 2. hovered on the node that is itself or its children (which is not allowed)
-          // then consider user is trying to drop the node to its original position
-          if (
-            !hoveredNode ||
-            MindmapUtils.containsNode(
-              hoveredMindMap,
-              hoveredNode,
-              dragMindMapCtx.node
-            )
-          ) {
-            const { mindmap, node } = dragMindMapCtx;
-
-            // if the node is the root node, then do nothing
-            if (node === mindmap.tree) {
-              return;
-            }
-
-            const nodeBound = node.element.elementBound;
+          // if `hoveredMindMap` is not null
+          // either the node is hovered on the dragged node's children
+          // or the there is no hovered node at all
+          // then consider user is trying to place the node to its original position
+          if (hoveredMindMap) {
+            const { node: draggedNode, mindmap } = dragMindMapCtx;
+            const nodeBound = draggedNode.element.elementBound;
 
             hoveredCtx.abort = this._drawIndicator({
               targetMindMap: mindmap,
-              target: node,
+              target: draggedNode,
               sourceMindMap: mindmap,
-              source: node,
-              newParent: node.parent!,
+              source: draggedNode,
+              newParent: draggedNode.parent!,
               insertPosition: {
                 type: 'sibling',
-                layoutDir: mindmap.getLayoutDir(node) as Exclude<
+                layoutDir: mindmap.getLayoutDir(draggedNode) as Exclude<
                   LayoutType,
                   LayoutType.BALANCE
                 >,
                 position: y > nodeBound.y + nodeBound.h / 2 ? 'next' : 'prev',
               },
-              path: mindmap.getPath(node),
+              path: mindmap.getPath(draggedNode),
             });
           } else {
-            const operation = MindmapUtils.tryMoveNode(
-              hoveredMindMap,
-              hoveredNode,
-              dragMindMapCtx.mindmap,
-              dragMindMapCtx.node,
-              [x, y],
-              options => this._drawIndicator(options)
-            );
+            hoveredCtx.detach = true;
 
-            if (operation) {
-              hoveredCtx.abort = operation.abort;
-              hoveredCtx.merge = operation.merge;
-            }
+            const reset = (hoveredCtx.abort = MindmapUtils.hideNodeConnector(
+              dragMindMapCtx.mindmap,
+              dragMindMapCtx.node
+            ));
+
+            hoveredCtx.abort = () => {
+              reset?.();
+            };
           }
         }
       },
@@ -204,7 +205,7 @@ export class MindMapExt extends DefaultToolExt {
         }
 
         hoveredCtx = null;
-        dragMindMapCtx.clear?.();
+        dragMindMapCtx.clear();
         this._responseAreaUpdated.clear();
       },
     };
@@ -394,8 +395,7 @@ export class MindMapExt extends DefaultToolExt {
       const mindmap = dragState.movedElements[0].group as MindmapElementModel;
       const mindmapNode = mindmap.getNode(dragState.movedElements[0].id)!;
       const mindmapBound = mindmap.elementBound;
-
-      dragState.movedElements.splice(0, 1);
+      const isRoot = mindmapNode === mindmap.tree;
 
       mindmapBound.x -= NODE_HORIZONTAL_SPACING;
       mindmapBound.y -= NODE_VERTICAL_SPACING * 2;
@@ -404,19 +404,25 @@ export class MindMapExt extends DefaultToolExt {
 
       this._calcDragResponseArea(mindmap);
 
-      const clearDragImage = this._setupDragNodeImage(
-        mindmapNode,
-        dragState.event
-      );
+      const clearDragStatus = isRoot
+        ? mindmap.stashTree(mindmapNode)
+        : this._setupDragNodeImage(mindmapNode, dragState.event);
       const clearOpacity = this._updateNodeOpacity(mindmap, mindmapNode);
 
+      if (!isRoot) {
+        dragState.movedElements.splice(0, 1);
+      }
+
       const mindMapDragCtx: DragMindMapCtx = {
         mindmap,
         node: mindmapNode,
+        isRoot,
         clear: () => {
           clearOpacity();
-          clearDragImage?.();
-          dragState.movedElements.push(mindmapNode.element);
+          clearDragStatus?.();
+          if (!isRoot) {
+            dragState.movedElements.push(mindmapNode.element);
+          }
         },
         originalMindMapBound: mindmapBound,
         startPoint: dragState.event,

blocksuite/tests-legacy/edgeless/mindmap.spec.ts

@@ -1,4 +1,3 @@
-import type { MindmapElementModel } from '@blocksuite/affine-model';
 import { expect } from '@playwright/test';
 import { clickView } from 'utils/actions/click.js';
 import { dragBetweenCoords } from 'utils/actions/drag.js';
@@ -8,11 +7,16 @@ import {
   edgelessCommonSetup,
   getSelectedBound,
   getSelectedBoundCount,
+  selectElementInEdgeless,
+  waitFontsLoaded,
   zoomResetByKeyboard,
 } from 'utils/actions/edgeless.js';
 import {
   pressBackspace,
+  pressEnter,
+  pressTab,
   selectAllByKeyboard,
+  type,
   undoByKeyboard,
 } from 'utils/actions/keyboard.js';
 import { waitNextFrame } from 'utils/actions/misc.js';
@@ -20,6 +24,11 @@ import {
   assertEdgelessSelectedRect,
   assertSelectedBound,
 } from 'utils/asserts.js';
+import {
+  addMindmapNodes,
+  createMindMap,
+  getMindMapNode,
+} from 'utils/mindmap.js';
 
 import { test } from '../utils/playwright.js';
 
@@ -67,60 +76,296 @@ test('drag mind map node to reorder the node', async ({ page }) => {
   await edgelessCommonSetup(page);
   await zoomResetByKeyboard(page);
 
-  await page.keyboard.press('m');
-  await clickView(page, [0, 0]);
-  await autoFit(page);
+  const mindmapId = await createMindMap(page, [0, 0]);
+  const { id: nodeId, rect: nodeRect } = await getMindMapNode(
+    page,
+    mindmapId,
+    [0, 0]
+  );
+  const { rect: targetRect } = await getMindMapNode(page, mindmapId, [0, 1]);
+  const { rect: lastRect } = await getMindMapNode(page, mindmapId, [0, 2]);
 
-  const { mindmapId, nodeId, nodeRect } = await page.evaluate(() => {
-    const edgelessBlock = document.querySelector('affine-edgeless-root');
-    if (!edgelessBlock) {
-      throw new Error('edgeless block not found');
+  await selectElementInEdgeless(page, [nodeId]);
+  await dragBetweenCoords(
+    page,
+    { x: nodeRect.x + nodeRect.w / 2, y: nodeRect.y + nodeRect.h / 2 },
+    { x: targetRect.x + targetRect.w / 2, y: targetRect.y + targetRect.h + 40 },
+    {
+      steps: 50,
     }
-    const mindmap = edgelessBlock.gfx.gfxElements.filter(
-      el => 'type' in el && el.type === 'mindmap'
-    )[0] as MindmapElementModel;
-    const node = mindmap.tree.children[0].element;
-    const rect = edgelessBlock.gfx.viewport.toViewBound(node.elementBound);
+  );
+  expect((await getMindMapNode(page, mindmapId, [0, 1])).id).toEqual(nodeId);
 
-    edgelessBlock.gfx.selection.set({ elements: [node.id] });
-
-    return {
-      mindmapId: mindmap.id,
-      nodeId: node.id,
-      nodeRect: {
-        x: rect.x,
-        y: rect.y,
-        w: rect.w,
-        h: rect.h,
-      },
-    };
-  });
-
-  await waitNextFrame(page, 100);
+  await dragBetweenCoords(
+    page,
+    { x: targetRect.x + targetRect.w / 2, y: targetRect.y + targetRect.h / 2 },
+    { x: nodeRect.x - 20, y: nodeRect.y - 40 },
+    {
+      steps: 50,
+    }
+  );
+  expect((await getMindMapNode(page, mindmapId, [0, 0])).id).toEqual(nodeId);
 
   await dragBetweenCoords(
     page,
     { x: nodeRect.x + nodeRect.w / 2, y: nodeRect.y + nodeRect.h / 2 },
-    { x: nodeRect.x + nodeRect.w / 2, y: nodeRect.y + nodeRect.h / 2 + 120 },
+    { x: lastRect.x - 20, y: lastRect.y + lastRect.h + 40 },
+    {
+      steps: 50,
+    }
+  );
+  expect((await getMindMapNode(page, mindmapId, [0, 2])).id).toEqual(nodeId);
+});
+
+test('drag mind map node to make it a child node', async ({ page }) => {
+  await edgelessCommonSetup(page);
+  await zoomResetByKeyboard(page);
+
+  const mindmapId = await createMindMap(page, [0, 0]);
+
+  {
+    const { id: nodeId, rect: nodeRect } = await getMindMapNode(
+      page,
+      mindmapId,
+      [0, 0]
+    );
+    const { rect: targetRect } = await getMindMapNode(page, mindmapId, [0, 1]);
+
+    await selectElementInEdgeless(page, [nodeId]);
+    await dragBetweenCoords(
+      page,
+      { x: nodeRect.x + nodeRect.w / 2, y: nodeRect.y + nodeRect.h / 2 },
+      {
+        x: targetRect.x + targetRect.w / 2,
+        y: targetRect.y + targetRect.h / 2,
+      },
+      {
+        steps: 50,
+      }
+    );
+    expect((await getMindMapNode(page, mindmapId, [0, 0, 0])).id).toEqual(
+      nodeId
+    );
+  }
+
+  {
+    const { id: childId } = await getMindMapNode(page, mindmapId, [0, 0, 0]);
+    const { rect: firstRect } = await getMindMapNode(page, mindmapId, [0, 0]);
+    const { rect: secondRect } = await getMindMapNode(page, mindmapId, [0, 1]);
+
+    await dragBetweenCoords(
+      page,
+      { x: firstRect.x + firstRect.w / 2, y: firstRect.y + firstRect.h / 2 },
+      {
+        x: secondRect.x + secondRect.w + 10,
+        y: secondRect.y + secondRect.h / 2,
+      },
+      {
+        steps: 50,
+      }
+    );
+    expect((await getMindMapNode(page, mindmapId, [0, 0, 0, 0])).id).toEqual(
+      childId
+    );
+  }
+});
+
+test('cannot drag mind map node to itself or its descendants', async ({
+  page,
+}) => {
+  await edgelessCommonSetup(page);
+  await zoomResetByKeyboard(page);
+
+  const mindmapId = await createMindMap(page, [0, 1]);
+  await addMindmapNodes(page, mindmapId, [0, 1], {
+    text: 'child node 1',
+    children: [
+      {
+        text: 'child node 2',
+      },
+      {
+        text: 'child node 3',
+      },
+    ],
+  });
+
+  const { id: node, rect } = await getMindMapNode(page, mindmapId, [0, 1]);
+  const { id: childNode3, rect: childRect3 } = await getMindMapNode(
+    page,
+    mindmapId,
+    [0, 1, 0, 1]
+  );
+  await dragBetweenCoords(
+    page,
+    { x: rect.x + rect.w / 2, y: rect.y + rect.h / 2 },
+    { x: childRect3.x + childRect3.w + 10, y: childRect3.y + childRect3.h / 2 },
     {
       steps: 50,
     }
   );
 
-  const secondNodeId = await page.evaluate(
-    ({ mindmapId }) => {
-      const edgelessBlock = document.querySelector('affine-edgeless-root');
-      if (!edgelessBlock) {
-        throw new Error('edgeless block not found');
-      }
-      const mindmap = edgelessBlock.gfx.getElementById(
-        mindmapId
-      ) as MindmapElementModel;
+  expect((await getMindMapNode(page, mindmapId, [0, 1])).id).toEqual(node);
+  expect((await getMindMapNode(page, mindmapId, [0, 1, 0, 1])).id).toEqual(
+    childNode3
+  );
+});
 
-      return mindmap.tree.children[1].id;
+test('drag root node should layout in real time', async ({ page }) => {
+  await edgelessCommonSetup(page);
+  await zoomResetByKeyboard(page);
+
+  // wait for the font to be loaded
+  await waitFontsLoaded(page);
+
+  const mindmapId = await createMindMap(page, [0, 0]);
+  const { rect: rootRect } = await getMindMapNode(page, mindmapId, [0]);
+  const { rect: firstRect } = await getMindMapNode(page, mindmapId, [0, 0]);
+  const { rect: secondRect } = await getMindMapNode(page, mindmapId, [0, 1]);
+  const { rect: thirdRect } = await getMindMapNode(page, mindmapId, [0, 2]);
+
+  const assertMindMapNodesPosition = async (deltaX: number, deltaY: number) => {
+    await expect((await getMindMapNode(page, mindmapId, [0, 0])).rect).toEqual({
+      ...firstRect,
+      x: firstRect.x + deltaX,
+      y: firstRect.y + deltaY,
+    });
+    await expect((await getMindMapNode(page, mindmapId, [0, 1])).rect).toEqual({
+      ...secondRect,
+      x: secondRect.x + deltaX,
+      y: secondRect.y + deltaY,
+    });
+    await expect((await getMindMapNode(page, mindmapId, [0, 2])).rect).toEqual({
+      ...thirdRect,
+      x: thirdRect.x + deltaX,
+      y: thirdRect.y + deltaY,
+    });
+  };
+
+  await dragBetweenCoords(
+    page,
+    { x: rootRect.x + rootRect.w / 2, y: rootRect.y + rootRect.h / 2 },
+    {
+      x: rootRect.x + rootRect.w / 2 + 10,
+      y: rootRect.y + rootRect.h / 2 + 10,
     },
-    { mindmapId, nodeId }
+    {
+      steps: 50,
+    }
   );
 
-  expect(secondNodeId).toEqual(nodeId);
+  await assertMindMapNodesPosition(10, 10);
+
+  await page.mouse.move(
+    rootRect.x + rootRect.w / 2 + 10,
+    rootRect.y + rootRect.h / 2 + 10
+  );
+  await page.mouse.down();
+  await page.mouse.move(
+    rootRect.x + rootRect.w / 2 + 10 + 4,
+    rootRect.y + rootRect.h / 2 + 10 + 4
+  );
+  await page.mouse.move(
+    rootRect.x + rootRect.w / 2 + 10 + 44,
+    rootRect.y + rootRect.h / 2 + 10 + 44,
+    { steps: 10 }
+  );
+
+  // assert when dragging is in progress
+  await waitNextFrame(page, 500);
+  await assertMindMapNodesPosition(50, 50);
+
+  await page.mouse.up();
+});
+
+test('drag node out of mind map should detach the node and create a new mind map', async ({
+  page,
+}) => {
+  await edgelessCommonSetup(page);
+  await zoomResetByKeyboard(page);
+
+  const mindmapId = await createMindMap(page, [0, 1]);
+  await addMindmapNodes(page, mindmapId, [0, 1], {
+    text: 'child node 1',
+    children: [
+      {
+        text: 'child node 2',
+      },
+      {
+        text: 'child node 3',
+      },
+    ],
+  });
+
+  const { rect } = await getMindMapNode(page, mindmapId, [0, 1]);
+  await dragBetweenCoords(
+    page,
+    {
+      x: rect.x + rect.w / 2,
+      y: rect.y + rect.h / 2,
+    },
+    {
+      x: rect.x + rect.w / 2,
+      y: rect.y + rect.h / 2 + 300,
+    },
+    {
+      steps: 50,
+    }
+  );
+
+  const { count, mindmap: lastMindmapId } = await page.evaluate(() => {
+    const edgelessBlock = document.querySelector('affine-edgeless-root');
+    if (!edgelessBlock) {
+      throw new Error('edgeless block not found');
+    }
+    const mindmaps = edgelessBlock.gfx.gfxElements.filter(
+      el => 'type' in el && el.type === 'mindmap'
+    );
+
+    return {
+      count: mindmaps.length,
+      mindmap: mindmaps[mindmaps.length - 1].id,
+    };
+  });
+
+  expect(count).toBe(2);
+  expect((await getMindMapNode(page, lastMindmapId, [0, 0])).text).toBe(
+    'child node 1'
+  );
+  expect((await getMindMapNode(page, lastMindmapId, [0, 0, 0])).text).toBe(
+    'child node 2'
+  );
+  expect((await getMindMapNode(page, lastMindmapId, [0, 0, 1])).text).toBe(
+    'child node 3'
+  );
+});
+
+test('allow to type content directly when node has been selected', async ({
+  page,
+}) => {
+  await edgelessCommonSetup(page);
+  await zoomResetByKeyboard(page);
+
+  const mindmapId = await createMindMap(page, [0, 0]);
+  const { id: nodeId } = await getMindMapNode(page, mindmapId, [0, 1]);
+
+  await clickView(page, [0, 0]);
+  await selectElementInEdgeless(page, [nodeId]);
+  await type(page, 'parent node');
+  await pressEnter(page);
+  await pressTab(page);
+  await type(page, 'child node 1');
+  await pressEnter(page);
+  await pressEnter(page);
+  await type(page, 'child node 2');
+  await pressEnter(page);
+
+  await expect((await getMindMapNode(page, mindmapId, [0, 1])).text).toBe(
+    'parent node'
+  );
+  await expect((await getMindMapNode(page, mindmapId, [0, 1, 0])).text).toBe(
+    'child node 1'
+  );
+  await expect((await getMindMapNode(page, mindmapId, [0, 1, 1])).text).toBe(
+    'child node 2'
+  );
 });

blocksuite/tests-legacy/utils/actions/edgeless.ts

@@ -1154,8 +1154,8 @@ export async function triggerComponentToolbarAction(
       await button.click();
       break;
     }
-    case 'changeShapeStrokeStyles':
-    case 'changeShapeStrokeColor': {
+    case 'changeShapeStrokeColor':
+    case 'changeShapeStrokeStyles': {
       const button = locatorComponentToolbar(page)
         .locator('edgeless-change-shape-button')
         .getByRole('button', { name: 'Border style' });
@@ -1916,3 +1916,30 @@ export function toIdCountMap(ids: string[]) {
 export function getFrameTitle(page: Page, frame: string) {
   return page.locator(`affine-frame-title[data-id="${frame}"]`);
 }
+
+export async function selectElementInEdgeless(page: Page, elements: string[]) {
+  await page.evaluate(
+    ({ elements }) => {
+      const edgelessBlock = document.querySelector('affine-edgeless-root');
+      if (!edgelessBlock) {
+        throw new Error('edgeless block not found');
+      }
+
+      edgelessBlock.gfx.selection.set({
+        elements,
+      });
+    },
+    { elements }
+  );
+}
+
+export async function waitFontsLoaded(page: Page) {
+  await page.evaluate(() => {
+    const edgelessBlock = document.querySelector('affine-edgeless-root');
+    if (!edgelessBlock) {
+      throw new Error('edgeless block not found');
+    }
+
+    return edgelessBlock.fontLoader?.ready;
+  });
+}

blocksuite/tests-legacy/utils/mindmap.ts

@@ -0,0 +1,130 @@
+import type {
+  MindmapElementModel,
+  MindmapNode,
+  ShapeElementModel,
+} from '@blocksuite/affine-model';
+import type { Page } from '@playwright/test';
+
+import { clickView } from './actions/click.js';
+
+export async function createMindMap(page: Page, coords: [number, number]) {
+  await page.keyboard.press('m');
+  await clickView(page, coords);
+
+  const id = await page.evaluate(() => {
+    const edgelessBlock = document.querySelector('affine-edgeless-root');
+    if (!edgelessBlock) {
+      throw new Error('edgeless block not found');
+    }
+    const mindmaps = edgelessBlock.gfx.gfxElements.filter(
+      el => 'type' in el && el.type === 'mindmap'
+    );
+
+    return mindmaps[mindmaps.length - 1].id;
+  });
+
+  return id;
+}
+
+export async function getMindMapNode(
+  page: Page,
+  mindmapId: string,
+  pathOrId: number[] | string
+) {
+  return page.evaluate(
+    ({ mindmapId, pathOrId }) => {
+      const edgelessBlock = document.querySelector('affine-edgeless-root');
+      if (!edgelessBlock) {
+        throw new Error('edgeless block not found');
+      }
+
+      const mindmap = edgelessBlock.gfx.getElementById(
+        mindmapId
+      ) as MindmapElementModel;
+      if (!mindmap) {
+        throw new Error(`Mindmap not found: ${mindmapId}`);
+      }
+
+      const node = Array.isArray(pathOrId)
+        ? mindmap.getNodeByPath(pathOrId)
+        : mindmap.getNode(pathOrId);
+      if (!node) {
+        throw new Error(`Mindmap node not found at: ${pathOrId}`);
+      }
+
+      const rect = edgelessBlock.gfx.viewport.toViewBound(
+        node.element.elementBound
+      );
+
+      return {
+        path: mindmap.getPath(node),
+        id: node.id,
+        text: (node.element as ShapeElementModel).text?.toString() ?? '',
+        rect: {
+          x: rect.x,
+          y: rect.y,
+          w: rect.w,
+          h: rect.h,
+        },
+      };
+    },
+    {
+      mindmapId,
+      pathOrId,
+    }
+  );
+}
+
+type NewNodeInfo = {
+  text: string;
+  children?: NewNodeInfo[];
+};
+
+export async function addMindmapNodes(
+  page: Page,
+  mindmapId: string,
+  path: number[],
+  newNode: NewNodeInfo
+) {
+  return page.evaluate(
+    ({ mindmapId, path, newNode }) => {
+      const edgelessBlock = document.querySelector('affine-edgeless-root');
+      if (!edgelessBlock) {
+        throw new Error('edgeless block not found');
+      }
+
+      const mindmap = edgelessBlock.gfx.getElementById(
+        mindmapId
+      ) as MindmapElementModel;
+      if (!mindmap) {
+        throw new Error(`Mindmap not found: ${mindmapId}`);
+      }
+
+      const parent = mindmap.getNodeByPath(path);
+      if (!parent) {
+        throw new Error(`Mindmap node not found at: ${path}`);
+      }
+
+      const addNode = (
+        mindmap: MindmapElementModel,
+        node: NewNodeInfo,
+        parent: MindmapNode
+      ) => {
+        const newNodeId = mindmap.addNode(parent, undefined, undefined, {
+          text: node.text,
+        });
+
+        if (node.children) {
+          node.children.forEach(child => {
+            addNode(mindmap, child, mindmap.getNode(newNodeId)!);
+          });
+        }
+
+        return newNodeId;
+      };
+
+      return addNode(mindmap, newNode, parent);
+    },
+    { mindmapId, path, newNode }
+  );
+}