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/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 }
+  );
+}