mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-20 07:47:19 +08:00
524 lines
17 KiB
TypeScript
524 lines
17 KiB
TypeScript
import { Bound } from '@blocksuite/global/gfx';
|
|
import { expect, type Page } from '@playwright/test';
|
|
|
|
import { clickView } from '../../utils/actions/click.js';
|
|
import {
|
|
addNote,
|
|
autoFit,
|
|
createFrame as _createFrame,
|
|
createShapeElement,
|
|
dragBetweenViewCoords,
|
|
edgelessCommonSetup,
|
|
getFirstContainerId,
|
|
getIds,
|
|
getSelectedBound,
|
|
getSelectedIds,
|
|
pickColorAtPoints,
|
|
setEdgelessTool,
|
|
Shape,
|
|
shiftClickView,
|
|
toViewCoord,
|
|
triggerComponentToolbarAction,
|
|
zoomResetByKeyboard,
|
|
} from '../../utils/actions/edgeless.js';
|
|
import {
|
|
pressBackspace,
|
|
pressEscape,
|
|
redoByKeyboard,
|
|
SHORT_KEY,
|
|
undoByKeyboard,
|
|
} from '../../utils/actions/keyboard.js';
|
|
import { waitNextFrame } from '../../utils/actions/misc.js';
|
|
import {
|
|
assertCanvasElementsCount,
|
|
assertContainerChildCount,
|
|
assertEdgelessElementBound,
|
|
assertSelectedBound,
|
|
} from '../../utils/asserts.js';
|
|
import {
|
|
DEFAULT_NOTE_HEIGHT,
|
|
DEFAULT_NOTE_WIDTH,
|
|
} from '../../utils/bs-alternative.js';
|
|
import { test } from '../../utils/playwright.js';
|
|
|
|
const createFrame = async (
|
|
page: Page,
|
|
coord1: [number, number],
|
|
coord2: [number, number]
|
|
) => {
|
|
const frameId = await _createFrame(page, coord1, coord2);
|
|
await autoFit(page);
|
|
await pressEscape(page);
|
|
return frameId;
|
|
};
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
await edgelessCommonSetup(page);
|
|
await zoomResetByKeyboard(page);
|
|
});
|
|
|
|
test.describe('add a frame', () => {
|
|
const createThreeShapesAndSelectTowShape = async (page: Page) => {
|
|
await createShapeElement(page, [0, 0], [100, 100], Shape.Square);
|
|
await createShapeElement(page, [100, 0], [200, 100], Shape.Square);
|
|
await createShapeElement(page, [200, 0], [300, 100], Shape.Square);
|
|
|
|
await clickView(page, [50, 50]);
|
|
await shiftClickView(page, [150, 50]);
|
|
};
|
|
|
|
test('multi select and add frame by shortcut F', async ({ page }) => {
|
|
await createThreeShapesAndSelectTowShape(page);
|
|
await page.keyboard.press('f');
|
|
|
|
await expect(page.locator('affine-frame')).toHaveCount(1);
|
|
await assertSelectedBound(page, [-40, -40, 280, 180]);
|
|
|
|
const frameId = await getFirstContainerId(page);
|
|
await assertContainerChildCount(page, frameId, 2);
|
|
});
|
|
|
|
test('multi select and add frame by component toolbar', async ({ page }) => {
|
|
await createThreeShapesAndSelectTowShape(page);
|
|
await triggerComponentToolbarAction(page, 'addFrame');
|
|
|
|
await expect(page.locator('affine-frame')).toHaveCount(1);
|
|
await assertSelectedBound(page, [-40, -40, 280, 180]);
|
|
|
|
const frameId = await getFirstContainerId(page);
|
|
await assertContainerChildCount(page, frameId, 2);
|
|
});
|
|
|
|
test('multi select and add frame by more option create frame', async ({
|
|
page,
|
|
}) => {
|
|
await createThreeShapesAndSelectTowShape(page);
|
|
await triggerComponentToolbarAction(page, 'createFrameOnMoreOption');
|
|
|
|
await expect(page.locator('affine-frame')).toHaveCount(1);
|
|
await assertSelectedBound(page, [-40, -40, 280, 180]);
|
|
|
|
const frameId = await getFirstContainerId(page);
|
|
await assertContainerChildCount(page, frameId, 2);
|
|
});
|
|
|
|
test('multi select add frame by edgeless toolbar', async ({ page }) => {
|
|
await createThreeShapesAndSelectTowShape(page);
|
|
await autoFit(page);
|
|
await setEdgelessTool(page, 'frame');
|
|
const frameMenu = page.locator('edgeless-frame-menu');
|
|
await expect(frameMenu).toBeVisible();
|
|
const button = page.locator('.frame-add-button[data-name="1:1"]');
|
|
await button.click();
|
|
await assertSelectedBound(page, [-450, -550, 1200, 1200]);
|
|
|
|
// the third should be inner frame because
|
|
const frameId = await getFirstContainerId(page);
|
|
await assertContainerChildCount(page, frameId, 3);
|
|
});
|
|
|
|
test('add frame by dragging with shortcut F', async ({ page }) => {
|
|
await createThreeShapesAndSelectTowShape(page);
|
|
await pressEscape(page); // unselect
|
|
|
|
await page.keyboard.press('f');
|
|
await dragBetweenViewCoords(page, [-10, -10], [210, 110]);
|
|
|
|
await expect(page.locator('affine-frame')).toHaveCount(1);
|
|
await assertSelectedBound(page, [-10, -10, 220, 120]);
|
|
|
|
const frameId = await getFirstContainerId(page);
|
|
await assertContainerChildCount(page, frameId, 2);
|
|
});
|
|
|
|
test('add inner frame', async ({ page }) => {
|
|
await createFrame(page, [50, 50], [450, 450]);
|
|
await createShapeElement(page, [200, 200], [300, 300], Shape.Square);
|
|
await pressEscape(page);
|
|
|
|
await shiftClickView(page, [250, 250]);
|
|
await page.keyboard.press('f');
|
|
const innerFrameBound = await getSelectedBound(page);
|
|
expect(
|
|
new Bound(50, 50, 400, 400).contains(Bound.fromXYWH(innerFrameBound))
|
|
).toBeTruthy();
|
|
});
|
|
});
|
|
|
|
test.describe('add element to frame and then move frame', () => {
|
|
test.describe('add single element', () => {
|
|
test('element should be moved since it is created in frame', async ({
|
|
page,
|
|
}) => {
|
|
const frameId = await createFrame(page, [50, 50], [550, 550]);
|
|
const shapeId = await createShapeElement(
|
|
page,
|
|
[100, 100],
|
|
[200, 200],
|
|
Shape.Square
|
|
);
|
|
|
|
const noteCoord = await toViewCoord(page, [200, 200]);
|
|
const noteId = await addNote(page, '', noteCoord[0], noteCoord[1]);
|
|
|
|
const frameTitle = page.locator('affine-frame-title');
|
|
|
|
await pressEscape(page);
|
|
|
|
await frameTitle.click();
|
|
await dragBetweenViewCoords(page, [60, 60], [110, 110]);
|
|
|
|
await assertEdgelessElementBound(page, shapeId, [150, 150, 100, 100]);
|
|
await assertEdgelessElementBound(page, frameId, [100, 100, 500, 500]);
|
|
await assertEdgelessElementBound(page, noteId, [
|
|
220,
|
|
210,
|
|
DEFAULT_NOTE_WIDTH,
|
|
DEFAULT_NOTE_HEIGHT,
|
|
]);
|
|
});
|
|
|
|
test('element should be not moved since it is created not in frame', async ({
|
|
page,
|
|
}) => {
|
|
const frameId = await createFrame(page, [50, 50], [550, 550]);
|
|
const shapeId = await createShapeElement(
|
|
page,
|
|
[600, 600],
|
|
[500, 500],
|
|
Shape.Square
|
|
);
|
|
await pressEscape(page);
|
|
|
|
const frameTitle = page.locator('affine-frame-title');
|
|
|
|
await frameTitle.click();
|
|
await dragBetweenViewCoords(page, [60, 60], [110, 110]);
|
|
|
|
await assertEdgelessElementBound(page, shapeId, [500, 500, 100, 100]);
|
|
await assertEdgelessElementBound(page, frameId, [100, 100, 500, 500]);
|
|
});
|
|
});
|
|
|
|
test.describe('add group', () => {
|
|
// Group
|
|
// |<150px>|
|
|
// ┌────┐ ─
|
|
// │ ┌─┼──┐ 150 px
|
|
// └──┼─┘ │ |
|
|
// └────┘ ─
|
|
|
|
test('group should be moved since it is fully contained in frame', async ({
|
|
page,
|
|
}) => {
|
|
const [frameId, ...shapeIds] = [
|
|
await createFrame(page, [50, 50], [550, 550]),
|
|
await createShapeElement(page, [100, 100], [200, 200], Shape.Square),
|
|
await createShapeElement(page, [150, 150], [250, 250], Shape.Square),
|
|
];
|
|
await pressEscape(page);
|
|
|
|
const frameTitle = page.locator('affine-frame-title');
|
|
|
|
await shiftClickView(page, [110, 110]);
|
|
await shiftClickView(page, [160, 160]);
|
|
await page.keyboard.press(`${SHORT_KEY}+g`);
|
|
const groupId = (await getSelectedIds(page))[0];
|
|
await pressEscape(page);
|
|
|
|
await frameTitle.click();
|
|
await dragBetweenViewCoords(page, [60, 60], [110, 110]);
|
|
|
|
await assertEdgelessElementBound(page, shapeIds[0], [150, 150, 100, 100]);
|
|
await assertEdgelessElementBound(page, shapeIds[1], [200, 200, 100, 100]);
|
|
await assertEdgelessElementBound(page, groupId, [150, 150, 150, 150]);
|
|
await assertEdgelessElementBound(page, frameId, [100, 100, 500, 500]);
|
|
});
|
|
|
|
test('group should be moved since its center is in frame', async ({
|
|
page,
|
|
}) => {
|
|
const [frameId, ...shapeIds] = [
|
|
await createFrame(page, [50, 50], [550, 550]),
|
|
await createShapeElement(page, [450, 450], [550, 550], Shape.Square),
|
|
await createShapeElement(page, [500, 500], [600, 600], Shape.Square),
|
|
];
|
|
await pressEscape(page);
|
|
|
|
const frameTitle = page.locator('affine-frame-title');
|
|
|
|
await shiftClickView(page, [460, 460]);
|
|
await shiftClickView(page, [510, 510]);
|
|
await page.keyboard.press(`${SHORT_KEY}+g`);
|
|
const groupId = (await getSelectedIds(page))[0];
|
|
await pressEscape(page);
|
|
|
|
await frameTitle.click();
|
|
await dragBetweenViewCoords(page, [60, 60], [110, 110]);
|
|
|
|
await assertEdgelessElementBound(page, shapeIds[0], [500, 500, 100, 100]);
|
|
await assertEdgelessElementBound(page, shapeIds[1], [550, 550, 100, 100]);
|
|
await assertEdgelessElementBound(page, groupId, [500, 500, 150, 150]);
|
|
await assertEdgelessElementBound(page, frameId, [100, 100, 500, 500]);
|
|
});
|
|
});
|
|
|
|
test.describe('add inner frame', () => {
|
|
test('the inner frame and its children should be moved since it is fully contained in frame', async ({
|
|
page,
|
|
}) => {
|
|
const [frameId, innerId, shapeId] = [
|
|
await createFrame(page, [50, 50], [550, 550]),
|
|
await createFrame(page, [100, 100], [300, 300]),
|
|
await createShapeElement(page, [150, 150], [250, 250], Shape.Square),
|
|
];
|
|
await pressEscape(page);
|
|
|
|
const frameTitles = page.locator('affine-frame-title');
|
|
|
|
await frameTitles.nth(0).click();
|
|
await dragBetweenViewCoords(page, [60, 60], [110, 110]);
|
|
|
|
await assertEdgelessElementBound(page, shapeId, [200, 200, 100, 100]);
|
|
await assertEdgelessElementBound(page, innerId, [150, 150, 200, 200]);
|
|
await assertEdgelessElementBound(page, frameId, [100, 100, 500, 500]);
|
|
});
|
|
|
|
test('the inner frame and its children should be moved since its center is in frame', async ({
|
|
page,
|
|
}) => {
|
|
const [frameId, innerId, shapeId] = [
|
|
await createFrame(page, [50, 50], [550, 550]),
|
|
await createFrame(page, [400, 400], [600, 600]),
|
|
await createShapeElement(page, [550, 550], [600, 600], Shape.Square),
|
|
];
|
|
await pressEscape(page);
|
|
|
|
const frameTitles = page.locator('affine-frame-title');
|
|
|
|
await frameTitles.nth(0).click();
|
|
await dragBetweenViewCoords(page, [60, 60], [110, 110]);
|
|
|
|
await assertEdgelessElementBound(page, shapeId, [600, 600, 50, 50]);
|
|
await assertEdgelessElementBound(page, innerId, [450, 450, 200, 200]);
|
|
await assertEdgelessElementBound(page, frameId, [100, 100, 500, 500]);
|
|
});
|
|
|
|
test('the inner frame and its children should also be moved even though its center is not in frame', async ({
|
|
page,
|
|
}) => {
|
|
const [frameId, innerId, shapeId] = [
|
|
await createFrame(page, [50, 50], [550, 550]),
|
|
await createFrame(page, [500, 500], [600, 600]),
|
|
await createShapeElement(page, [550, 550], [600, 600], Shape.Square),
|
|
];
|
|
|
|
const frameTitles = page.locator('affine-frame-title');
|
|
|
|
await frameTitles.nth(0).click();
|
|
await dragBetweenViewCoords(page, [60, 60], [110, 110]);
|
|
|
|
await assertEdgelessElementBound(page, shapeId, [600, 600, 50, 50]);
|
|
await assertEdgelessElementBound(page, innerId, [550, 550, 100, 100]);
|
|
await assertEdgelessElementBound(page, frameId, [100, 100, 500, 500]);
|
|
});
|
|
});
|
|
});
|
|
|
|
test.describe('resize frame then move ', () => {
|
|
test('resize frame to warp shape', async ({ page }) => {
|
|
const [frameId, shapeId] = [
|
|
await createFrame(page, [50, 50], [150, 150]),
|
|
await createShapeElement(page, [200, 200], [300, 300], Shape.Square),
|
|
];
|
|
await pressEscape(page);
|
|
|
|
const frameTitle = page.locator('affine-frame-title');
|
|
|
|
await frameTitle.click();
|
|
await dragBetweenViewCoords(page, [150, 150], [450, 450]);
|
|
|
|
await dragBetweenViewCoords(page, [60, 60], [110, 110]);
|
|
|
|
await assertEdgelessElementBound(page, shapeId, [250, 250, 100, 100]);
|
|
await assertEdgelessElementBound(page, frameId, [100, 100, 400, 400]);
|
|
});
|
|
|
|
test('resize frame to unwrap shape', async ({ page }) => {
|
|
const [frameId, shapeId] = [
|
|
await createFrame(page, [50, 50], [450, 450]),
|
|
await createShapeElement(page, [200, 200], [300, 300], Shape.Square),
|
|
];
|
|
await pressEscape(page);
|
|
|
|
const frameTitle = page.locator('affine-frame-title');
|
|
|
|
await frameTitle.click();
|
|
await dragBetweenViewCoords(page, [450, 450], [150, 150]);
|
|
|
|
await dragBetweenViewCoords(page, [60, 60], [110, 110]);
|
|
|
|
await assertEdgelessElementBound(page, shapeId, [200, 200, 100, 100]);
|
|
await assertEdgelessElementBound(page, frameId, [100, 100, 100, 100]);
|
|
});
|
|
});
|
|
|
|
test('delete frame should also delete its children', async ({ page }) => {
|
|
await createFrame(page, [50, 50], [450, 450]);
|
|
await createShapeElement(page, [200, 200], [300, 300], Shape.Square);
|
|
await pressEscape(page);
|
|
|
|
const frameTitle = page.locator('affine-frame-title');
|
|
|
|
await frameTitle.click();
|
|
await pressBackspace(page);
|
|
await expect(page.locator('affine-frame')).toHaveCount(0);
|
|
|
|
await assertCanvasElementsCount(page, 0);
|
|
});
|
|
|
|
test('delete frame by click ungroup should not delete its children', async ({
|
|
page,
|
|
}) => {
|
|
await createFrame(page, [50, 50], [450, 450]);
|
|
const shapeId = await createShapeElement(
|
|
page,
|
|
[200, 200],
|
|
[300, 300],
|
|
Shape.Square
|
|
);
|
|
await pressEscape(page);
|
|
|
|
const frameTitle = page.locator('affine-frame-title');
|
|
await frameTitle.click();
|
|
const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
|
|
const ungroupButton = toolbar.getByLabel('Ungroup');
|
|
await ungroupButton.click();
|
|
|
|
await assertCanvasElementsCount(page, 1);
|
|
expect(await getIds(page)).toEqual([shapeId]);
|
|
});
|
|
|
|
test('outline should keep updated during a new frame created by frame-tool dragging', async ({
|
|
page,
|
|
}) => {
|
|
await page.keyboard.press('f');
|
|
|
|
const start = await toViewCoord(page, [0, 0]);
|
|
const end = await toViewCoord(page, [100, 100]);
|
|
await page.mouse.move(start[0], start[1]);
|
|
await page.mouse.down();
|
|
await page.mouse.move(end[0], end[1], { steps: 10 });
|
|
await page.waitForTimeout(50);
|
|
|
|
expect(
|
|
await pickColorAtPoints(page, [start, [end[0] - 1, end[1] - 1]])
|
|
).toEqual(['#1e96eb', '#1e96eb']);
|
|
});
|
|
|
|
test('undo should work when create a frame by dragging', async ({ page }) => {
|
|
await page.keyboard.press('f');
|
|
await dragBetweenViewCoords(page, [0, 0], [100, 100], { steps: 50 });
|
|
await undoByKeyboard(page);
|
|
await expect(page.locator('affine-frame')).toHaveCount(0);
|
|
});
|
|
|
|
test('undo/redo should work when change frame background', async ({ page }) => {
|
|
await createFrame(page, [50, 50], [450, 450]);
|
|
await pressEscape(page);
|
|
|
|
const frameTitle = page.locator('affine-frame-title');
|
|
await frameTitle.click();
|
|
|
|
const getFrameBackground = async () => {
|
|
return page.locator('affine-frame .affine-frame-container').evaluate(el => {
|
|
return getComputedStyle(el).backgroundColor;
|
|
});
|
|
};
|
|
const colorPanel = page.locator('edgeless-color-picker-button');
|
|
|
|
let prevBackground = await getFrameBackground();
|
|
|
|
// preset color
|
|
{
|
|
await colorPanel.click();
|
|
await colorPanel.getByLabel('LightRed').click();
|
|
expect(await getFrameBackground()).not.toBe(prevBackground);
|
|
|
|
await undoByKeyboard(page);
|
|
await waitNextFrame(page);
|
|
expect(await getFrameBackground()).toBe(prevBackground);
|
|
|
|
await redoByKeyboard(page);
|
|
await waitNextFrame(page);
|
|
expect(await getFrameBackground()).not.toBe(prevBackground);
|
|
}
|
|
|
|
prevBackground = await getFrameBackground();
|
|
|
|
// custom color
|
|
{
|
|
await colorPanel.click();
|
|
await colorPanel.locator('edgeless-color-custom-button').click();
|
|
await page.locator('.color-palette').click({
|
|
position: {
|
|
x: 100,
|
|
y: 100,
|
|
},
|
|
});
|
|
await pressEscape(page);
|
|
|
|
expect(await getFrameBackground()).not.toBe(prevBackground);
|
|
await undoByKeyboard(page);
|
|
await waitNextFrame(page);
|
|
expect(await getFrameBackground()).toBe(prevBackground);
|
|
|
|
await redoByKeyboard(page);
|
|
await waitNextFrame(page);
|
|
expect(await getFrameBackground()).not.toBe(prevBackground);
|
|
}
|
|
});
|
|
|
|
test('connector and shape created simultaneously with edgeless-auto-complete should both be added to frame', async ({
|
|
page,
|
|
}) => {
|
|
// Create a larger frame to ensure everything fits
|
|
const frameId = await createFrame(page, [50, 50], [650, 650]);
|
|
|
|
// Create first shape inside the frame (well within bounds)
|
|
const shape1Id = await createShapeElement(
|
|
page,
|
|
[150, 150],
|
|
[250, 250],
|
|
Shape.Square
|
|
);
|
|
|
|
// Click on the existing shape to start connection
|
|
await clickView(page, [200, 200]);
|
|
|
|
const autoComplete = page.locator('edgeless-auto-complete');
|
|
const rightArrowButton = autoComplete
|
|
.locator('.edgeless-auto-complete-arrow')
|
|
.nth(0);
|
|
|
|
await rightArrowButton.click();
|
|
|
|
// Wait for async processing
|
|
await waitNextFrame(page);
|
|
|
|
// Verify that the frame contains 3 children: original shape + new shape + connector
|
|
await assertContainerChildCount(page, frameId, 3);
|
|
|
|
// Verify by moving the frame - all elements should move together
|
|
const frameTitle = page.locator('affine-frame-title');
|
|
await frameTitle.click();
|
|
await dragBetweenViewCoords(page, [60, 60], [110, 110]);
|
|
|
|
// Check that the original shape moved with the frame
|
|
await assertEdgelessElementBound(page, shape1Id, [200, 200, 100, 100]);
|
|
await assertEdgelessElementBound(page, frameId, [100, 100, 600, 600]);
|
|
|
|
// Frame should still contain all 3 elements after the move
|
|
await assertContainerChildCount(page, frameId, 3);
|
|
});
|