test: add test

toeverything · Dec 19, 2024 · a090606 · a090606
1 parent a05128a
commit a090606
Show file tree

Hide file tree

Showing 5 changed files with 455 additions and 39 deletions.
diff --git a/packages/affine/model/src/elements/mindmap/mindmap.ts b/packages/affine/model/src/elements/mindmap/mindmap.ts
@@ -626,6 +626,17 @@ 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);
 

diff --git a/packages/blocks/src/root-block/edgeless/edgeless-root-block.ts b/packages/blocks/src/root-block/edgeless/edgeless-root-block.ts
@@ -127,6 +127,10 @@ export class EdgelessRootBlockComponent extends BlockComponent<
     return this.std.event;
   }
 
+  get fontLoader() {
+    return this.std.get(FontLoaderService);
+  }
+
   get gfx() {
     return this.std.get(GfxControllerIdentifier);
   }

diff --git a/tests/edgeless/mindmap.spec.ts b/tests/edgeless/mindmap.spec.ts
@@ -1,5 +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';
@@ -9,18 +7,28 @@ 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';
 import {
   assertEdgelessSelectedRect,
   assertSelectedBound,
 } from 'utils/asserts.js';
+import {
+  addMindmapNodes,
+  createMindMap,
+  getMindMapNode,
+} from 'utils/mindmap.js';
 
 import { test } from '../utils/playwright.js';
 
@@ -68,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] });
+  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);
 
-    return {
-      mindmapId: mindmap.id,
-      nodeId: node.id,
-      nodeRect: {
-        x: rect.x,
-        y: rect.y,
-        w: rect.w,
-        h: rect.h,
+  await dragBetweenCoords(
+    page,
+    { x: nodeRect.x + nodeRect.w / 2, y: nodeRect.y + nodeRect.h / 2 },
+    { 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',
+      },
+    ],
   });
 
-  await waitNextFrame(page, 100);
+  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,
+    }
+  );
+
+  expect((await getMindMapNode(page, mindmapId, [0, 1])).id).toEqual(node);
+  expect((await getMindMapNode(page, mindmapId, [0, 1, 0, 1])).id).toEqual(
+    childNode3
+  );
+});
+
+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: 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: 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,
+    },
     {
       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;
+  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 }
+  );
 
-      return mindmap.tree.children[1].id;
+  // 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,
     },
-    { mindmapId, nodeId }
+    {
+      x: rect.x + rect.w / 2,
+      y: rect.y + rect.h / 2 + 300,
+    },
+    {
+      steps: 50,
+    }
   );
 
-  expect(secondNodeId).toEqual(nodeId);
+  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'
+  );
 });