mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-12 04:18:54 +00:00
refactor(editor): remove lasso tool (#11481)
This commit is contained in:
Saul-Mirone
@@ -1,262 +0,0 @@
|
||||
import { sleep } from '@blocksuite/global/utils';
|
||||
import { expect } from '@playwright/test';
|
||||
|
||||
import {
|
||||
addBasicRectShapeElement,
|
||||
assertEdgelessTool,
|
||||
edgelessCommonSetup as commonSetup,
|
||||
setEdgelessTool,
|
||||
} from '../utils/actions/edgeless.js';
|
||||
import {
|
||||
dragBetweenCoords,
|
||||
selectAllByKeyboard,
|
||||
} from '../utils/actions/index.js';
|
||||
import {
|
||||
assertEdgelessNonSelectedRect,
|
||||
assertEdgelessSelectedRect,
|
||||
} from '../utils/asserts.js';
|
||||
import { test } from '../utils/playwright.js';
|
||||
|
||||
test.skip('lasso tool should deselect when dragging in an empty area', async ({
|
||||
page,
|
||||
}) => {
|
||||
await commonSetup(page);
|
||||
|
||||
const start = { x: 100, y: 100 };
|
||||
const end = { x: 200, y: 200 };
|
||||
await addBasicRectShapeElement(page, start, end);
|
||||
await assertEdgelessSelectedRect(page, [100, 100, 100, 100]);
|
||||
|
||||
await setEdgelessTool(page, 'lasso');
|
||||
await assertEdgelessTool(page, 'lasso');
|
||||
|
||||
await dragBetweenCoords(page, { x: 10, y: 10 }, { x: 15, y: 15 });
|
||||
|
||||
await assertEdgelessNonSelectedRect(page);
|
||||
});
|
||||
|
||||
test.skip('freehand lasso basic test', async ({ page }) => {
|
||||
await commonSetup(page);
|
||||
|
||||
await addBasicRectShapeElement(page, { x: 100, y: 100 }, { x: 200, y: 200 });
|
||||
await addBasicRectShapeElement(page, { x: 300, y: 300 }, { x: 400, y: 400 });
|
||||
|
||||
await page.mouse.click(10, 10); // deselect
|
||||
|
||||
await setEdgelessTool(page, 'lasso');
|
||||
await assertEdgelessTool(page, 'lasso');
|
||||
|
||||
await assertEdgelessNonSelectedRect(page);
|
||||
|
||||
// simulate a basic lasso selection to select both the rects
|
||||
const points: [number, number][] = [
|
||||
[500, 100],
|
||||
[500, 500],
|
||||
[90, 500],
|
||||
];
|
||||
await page.mouse.move(90, 90);
|
||||
await page.mouse.down();
|
||||
for (const point of points) await page.mouse.move(...point);
|
||||
await page.mouse.up();
|
||||
|
||||
await assertEdgelessSelectedRect(page, [100, 100, 200, 200]);
|
||||
});
|
||||
|
||||
test.skip('freehand lasso add to selection', async ({ page }) => {
|
||||
await commonSetup(page);
|
||||
|
||||
await addBasicRectShapeElement(page, { x: 100, y: 100 }, { x: 200, y: 200 });
|
||||
await addBasicRectShapeElement(page, { x: 300, y: 300 }, { x: 400, y: 400 });
|
||||
|
||||
await page.mouse.click(10, 10); // deselect
|
||||
|
||||
await setEdgelessTool(page, 'lasso');
|
||||
await assertEdgelessTool(page, 'lasso');
|
||||
await assertEdgelessNonSelectedRect(page);
|
||||
|
||||
// some random selection covering the rectangle
|
||||
let points: [number, number][] = [
|
||||
[250, 90],
|
||||
[250, 300],
|
||||
[10, 300],
|
||||
];
|
||||
await page.mouse.move(90, 90);
|
||||
await page.mouse.down();
|
||||
for (const point of points) await page.mouse.move(...point);
|
||||
await page.mouse.up();
|
||||
|
||||
await assertEdgelessSelectedRect(page, [100, 100, 100, 100]);
|
||||
|
||||
points = [
|
||||
[400, 250],
|
||||
[400, 450],
|
||||
[250, 450],
|
||||
];
|
||||
|
||||
await page.keyboard.down('Shift'); // addition selection
|
||||
await page.mouse.move(250, 250);
|
||||
await page.mouse.down();
|
||||
for (const point of points) await page.mouse.move(...point);
|
||||
await page.mouse.up();
|
||||
|
||||
await assertEdgelessSelectedRect(page, [100, 100, 200, 200]);
|
||||
});
|
||||
|
||||
test.skip('freehand lasso subtract from selection', async ({ page }) => {
|
||||
await commonSetup(page);
|
||||
|
||||
await addBasicRectShapeElement(page, { x: 100, y: 100 }, { x: 200, y: 200 });
|
||||
await addBasicRectShapeElement(page, { x: 300, y: 300 }, { x: 400, y: 400 });
|
||||
await setEdgelessTool(page, 'default');
|
||||
|
||||
await selectAllByKeyboard(page);
|
||||
|
||||
await setEdgelessTool(page, 'lasso');
|
||||
|
||||
const points: [number, number][] = [
|
||||
[410, 290],
|
||||
[410, 410],
|
||||
[290, 410],
|
||||
];
|
||||
|
||||
await page.keyboard.down('Alt');
|
||||
|
||||
await page.mouse.move(290, 290);
|
||||
await page.mouse.down();
|
||||
for (const point of points) await page.mouse.move(...point);
|
||||
await page.mouse.up();
|
||||
|
||||
await assertEdgelessSelectedRect(page, [100, 100, 100, 100]); // only the first rectangle should be selected
|
||||
});
|
||||
|
||||
test.skip('polygonal lasso basic test', async ({ page }) => {
|
||||
await commonSetup(page);
|
||||
await addBasicRectShapeElement(page, { x: 100, y: 100 }, { x: 200, y: 200 });
|
||||
await addBasicRectShapeElement(page, { x: 300, y: 300 }, { x: 400, y: 400 });
|
||||
await page.mouse.click(10, 10); // deselect
|
||||
|
||||
await assertEdgelessNonSelectedRect(page);
|
||||
|
||||
await setEdgelessTool(page, 'lasso');
|
||||
await setEdgelessTool(page, 'lasso'); // switch to polygonal lasso
|
||||
await sleep(100);
|
||||
|
||||
const points: [number, number][] = [
|
||||
[90, 90],
|
||||
[500, 90],
|
||||
[500, 500],
|
||||
[90, 500],
|
||||
[90, 90],
|
||||
];
|
||||
|
||||
for (const point of points) {
|
||||
await page.mouse.click(...point);
|
||||
}
|
||||
|
||||
await assertEdgelessSelectedRect(page, [100, 100, 200, 200]);
|
||||
});
|
||||
|
||||
test.skip('polygonal lasso add to selection by holding Shift Key', async ({
|
||||
page,
|
||||
}) => {
|
||||
await commonSetup(page);
|
||||
|
||||
await addBasicRectShapeElement(page, { x: 100, y: 100 }, { x: 200, y: 200 });
|
||||
await addBasicRectShapeElement(page, { x: 300, y: 300 }, { x: 400, y: 400 });
|
||||
|
||||
await page.mouse.click(10, 10); // deselect
|
||||
await assertEdgelessNonSelectedRect(page);
|
||||
|
||||
await setEdgelessTool(page, 'lasso');
|
||||
await setEdgelessTool(page, 'lasso');
|
||||
await sleep(100);
|
||||
|
||||
let points: [number, number][] = [
|
||||
[90, 90],
|
||||
[150, 90],
|
||||
[150, 150],
|
||||
[90, 150],
|
||||
[90, 90],
|
||||
];
|
||||
|
||||
// select the first rectangle
|
||||
for (const point of points) await page.mouse.click(...point);
|
||||
|
||||
points = [
|
||||
[290, 290],
|
||||
[350, 290],
|
||||
[350, 350],
|
||||
[290, 350],
|
||||
[290, 290],
|
||||
];
|
||||
|
||||
await page.keyboard.down('Shift'); // add to selection
|
||||
// selects the second rectangle
|
||||
for (const point of points) await page.mouse.click(...point);
|
||||
|
||||
// by the end both of the rects should be selected
|
||||
await assertEdgelessSelectedRect(page, [100, 100, 200, 200]);
|
||||
});
|
||||
|
||||
test.skip('polygonal lasso subtract from selection by holding Alt', async ({
|
||||
page,
|
||||
}) => {
|
||||
await commonSetup(page);
|
||||
|
||||
await addBasicRectShapeElement(page, { x: 100, y: 100 }, { x: 200, y: 200 });
|
||||
await addBasicRectShapeElement(page, { x: 300, y: 300 }, { x: 400, y: 400 });
|
||||
|
||||
await selectAllByKeyboard(page);
|
||||
|
||||
const points: [number, number][] = [
|
||||
[290, 290],
|
||||
[350, 290],
|
||||
[350, 350],
|
||||
[290, 350],
|
||||
[290, 290],
|
||||
];
|
||||
|
||||
// switch to polygonal lasso tool
|
||||
await setEdgelessTool(page, 'lasso');
|
||||
await setEdgelessTool(page, 'lasso');
|
||||
await sleep(100);
|
||||
|
||||
await page.keyboard.down('Alt'); // subtract from selection
|
||||
for (const point of points) await page.mouse.click(...point);
|
||||
|
||||
// By the end the second rectangle must be deselected leaving the first rect selection
|
||||
await assertEdgelessSelectedRect(page, [100, 100, 100, 100]);
|
||||
});
|
||||
|
||||
test.skip('polygonal lasso should complete selection when clicking the last point', async ({
|
||||
page,
|
||||
}) => {
|
||||
await commonSetup(page);
|
||||
|
||||
// switch to polygonal lasso
|
||||
await setEdgelessTool(page, 'lasso');
|
||||
await setEdgelessTool(page, 'lasso');
|
||||
await sleep(100);
|
||||
|
||||
const lassoPoints: [number, number][] = [
|
||||
[100, 100],
|
||||
[200, 200],
|
||||
[250, 150],
|
||||
[100, 100],
|
||||
];
|
||||
|
||||
for (const point of lassoPoints) await page.mouse.click(...point);
|
||||
|
||||
const isSelecting = await page.evaluate(() => {
|
||||
const edgeless = document.querySelector('affine-edgeless-root');
|
||||
if (!edgeless) throw new Error('Missing edgless root block');
|
||||
|
||||
const curController = edgeless.gfx.tool.currentTool$.peek();
|
||||
if (curController?.toolName !== 'lasso')
|
||||
throw new Error('expected lasso tool controller');
|
||||
|
||||
return (curController as any)['_isSelecting'];
|
||||
});
|
||||
|
||||
expect(isSelecting).toBe(false);
|
||||
});
|
||||
@@ -122,7 +122,7 @@ test.describe('lock', () => {
|
||||
expect(await getSelectedIds(page)).toHaveLength(1);
|
||||
});
|
||||
|
||||
test('locked element should not be selectable by dragging default tool or lasso tool. unlocking will recover', async ({
|
||||
test('locked element should not be selectable by dragging default tool. unlocking will recover', async ({
|
||||
page,
|
||||
}) => {
|
||||
await edgelessCommonSetup(page);
|
||||
|
||||
@@ -65,33 +65,6 @@ test('shortcut', async ({ page }) => {
|
||||
await page.keyboard.press('c');
|
||||
const connectorButton = await locatorEdgelessToolButton(page, 'connector');
|
||||
await expect(connectorButton).toHaveAttribute('active', '');
|
||||
|
||||
// await page.keyboard.press('l');
|
||||
// const lassoButton = await locatorEdgelessToolButton(page, 'lasso');
|
||||
// await expect(lassoButton).toHaveAttribute('active', '');
|
||||
});
|
||||
|
||||
test.skip('toggle lasso tool modes', async ({ page }) => {
|
||||
await enterPlaygroundRoom(page);
|
||||
await initEmptyEdgelessState(page);
|
||||
await switchEditorMode(page);
|
||||
await page.mouse.click(100, 100);
|
||||
|
||||
const lassoButton = await locatorEdgelessToolButton(page, 'lasso', false);
|
||||
|
||||
const isLassoMode = async (type: 'freehand' | 'polygonal') => {
|
||||
const classes = (await lassoButton.getAttribute('class'))?.split(' ') ?? [];
|
||||
return classes.includes(type);
|
||||
};
|
||||
|
||||
await page.keyboard.press('Shift+l');
|
||||
expect(await isLassoMode('freehand')).toBe(true);
|
||||
|
||||
await page.keyboard.press('Shift+l');
|
||||
expect(await isLassoMode('polygonal')).toBe(true);
|
||||
|
||||
await page.keyboard.press('Shift+l');
|
||||
expect(await isLassoMode('freehand')).toBe(true);
|
||||
});
|
||||
|
||||
test('toggle shapes shortcut', async ({ page }) => {
|
||||
|
||||
@@ -52,11 +52,6 @@ export enum Shape {
|
||||
Triangle = 'Triangle',
|
||||
}
|
||||
|
||||
export enum LassoMode {
|
||||
FreeHand = 'freehand',
|
||||
Polygonal = 'polygonal',
|
||||
}
|
||||
|
||||
export enum ConnectorMode {
|
||||
Straight,
|
||||
Orthogonal,
|
||||
@@ -166,8 +161,7 @@ type EdgelessTool =
|
||||
| 'text'
|
||||
| 'connector'
|
||||
| 'frame'
|
||||
| 'frameNavigator'
|
||||
| 'lasso';
|
||||
| 'frameNavigator';
|
||||
type ZoomToolType = 'zoomIn' | 'zoomOut' | 'fitToScreen';
|
||||
type ComponentToolType = 'shape' | 'thin' | 'thick' | 'brush' | 'more';
|
||||
|
||||
@@ -211,7 +205,6 @@ export async function locatorEdgelessToolButton(
|
||||
note: '.edgeless-note-button',
|
||||
frame: '.edgeless-frame-button',
|
||||
frameNavigator: '.edgeless-frame-navigator-button',
|
||||
lasso: '.edgeless-lasso-button',
|
||||
}[type];
|
||||
|
||||
let buttonType;
|
||||
@@ -362,7 +355,6 @@ export async function setEdgelessTool(
|
||||
|
||||
break;
|
||||
}
|
||||
case 'lasso':
|
||||
case 'note':
|
||||
case 'eraser':
|
||||
case 'frame':
|
||||
@@ -438,20 +430,6 @@ export async function assertEdgelessConnectorToolMode(
|
||||
expect(tool.mode).toEqual(mode);
|
||||
}
|
||||
|
||||
export async function assertEdgelessLassoToolMode(page: Page, mode: LassoMode) {
|
||||
const tool = await page.evaluate(() => {
|
||||
const container = document.querySelector('affine-edgeless-root');
|
||||
if (!container) {
|
||||
throw new Error('Missing edgeless page');
|
||||
}
|
||||
return container.gfx.tool.currentToolOption$.peek();
|
||||
});
|
||||
if (tool.type !== 'lasso') {
|
||||
throw new Error('Expected lasso tool');
|
||||
}
|
||||
expect(tool.mode).toEqual(mode === LassoMode.FreeHand ? 0 : 1);
|
||||
}
|
||||
|
||||
export async function getEdgelessBlockChild(page: Page) {
|
||||
const block = page.locator('affine-edgeless-note');
|
||||
const blockBox = await block.boundingBox();
|
||||
|
||||
Reference in New Issue
Block a user