From 45431e9000c094f32490de8bc0ad562707709203 Mon Sep 17 00:00:00 2001 From: gkuzin13 Date: Tue, 20 Feb 2024 15:02:15 +0200 Subject: [PATCH 1/3] chore: update e2e test utils --- apps/client/e2e/tests/context-menu.spec.ts | 4 +-- apps/client/e2e/utils/canvas.ts | 41 ++++++++++++++++------ 2 files changed, 32 insertions(+), 13 deletions(-) diff --git a/apps/client/e2e/tests/context-menu.spec.ts b/apps/client/e2e/tests/context-menu.spec.ts index 03c9554..7ed3bd5 100644 --- a/apps/client/e2e/tests/context-menu.spec.ts +++ b/apps/client/e2e/tests/context-menu.spec.ts @@ -1,5 +1,5 @@ import { test, expect } from '@playwright/test'; -import { createShape, getDrawingCanvas } from 'e2e/utils/canvas'; +import { drawShape, getDrawingCanvas } from 'e2e/utils/canvas'; test.describe('context menu', async () => { test('opens canvas menu when right clicking on empty', async ({ page }) => { @@ -19,7 +19,7 @@ test.describe('context menu', async () => { }) => { await page.goto('/'); - await createShape(page, [ + await drawShape(page, [ [400, 450], [450, 500], ]); diff --git a/apps/client/e2e/utils/canvas.ts b/apps/client/e2e/utils/canvas.ts index c6ce372..89ba6f2 100644 --- a/apps/client/e2e/utils/canvas.ts +++ b/apps/client/e2e/utils/canvas.ts @@ -2,29 +2,48 @@ import { DRAWING_CANVAS } from '@/constants/canvas'; import type { Page } from '@playwright/test'; import type { NodeType, Point } from 'shared'; -type DrawPosition = [start: Point, end: Point]; - -type CreateShapeOptions = { +type DrawPoints = [start: Point, end: Point]; +type DrawShapeOptions = { type: Omit; unselect?: boolean; }; - -export async function draw(page: Page, [start, end]: DrawPosition) { +type CreateTextOptions = { + text: string; + unselect?: boolean; +}; +export async function draw(page: Page, [start, end]: DrawPoints) { await page.mouse.move(start[0], start[1]); await page.mouse.down(); await page.mouse.move(end[0], end[1]); await page.mouse.up(); } -export async function createShape( +export async function drawShape( page: Page, - position: DrawPosition, - options: CreateShapeOptions = { - type: 'rectangle', - }, + points: DrawPoints, + options: DrawShapeOptions = { type: 'rectangle' }, ) { await page.getByTestId(`tool-button-${options.type}`).click(); - await draw(page, position); + await draw(page, points); + + if (options.unselect) { + await getDrawingCanvas(page).click({ position: { x: 0, y: 0 } }); + } +} + +export async function createText( + page: Page, + point: Point, + options: CreateTextOptions, +) { + await page.getByTestId('tool-button-text').click(); + await getDrawingCanvas(page).click({ + position: { x: point[0], y: point[1] }, + }); + + if (options.unselect) { + await getDrawingCanvas(page).click({ position: { x: 0, y: 0 } }); + } } export function getDrawingCanvas(page: Page) { From 0bc49d435e4818cefbfe695102dc0ff3ef3b7438 Mon Sep 17 00:00:00 2001 From: gkuzin13 Date: Tue, 20 Feb 2024 15:04:12 +0200 Subject: [PATCH 2/3] fix: prevent zoom when editing text node --- apps/client/e2e/tests/zoom.spec.ts | 20 +++++++++++++++++++ .../Canvas/DrawingCanvas/DrawingCanvas.tsx | 7 ++++--- .../Shapes/EditableText/EditableTextInput.tsx | 16 ++++++++++++--- 3 files changed, 37 insertions(+), 6 deletions(-) create mode 100644 apps/client/e2e/tests/zoom.spec.ts diff --git a/apps/client/e2e/tests/zoom.spec.ts b/apps/client/e2e/tests/zoom.spec.ts new file mode 100644 index 0000000..acc9e87 --- /dev/null +++ b/apps/client/e2e/tests/zoom.spec.ts @@ -0,0 +1,20 @@ +import { ZOOM } from '@/constants/panels'; +import { test, expect } from '@playwright/test'; +import { createText } from 'e2e/utils/canvas'; + +test.describe('context menu', async () => { + test('prevents zoom when over a text node', async ({ page }) => { + await page.goto('/'); + + await createText(page, [400, 450], { text: 'hello' }); + + // zoom in/out at text position (400, 450) + await page.keyboard.down('Control'); + await page.mouse.wheel(0, -10); + await page.mouse.wheel(0, -20); + await page.mouse.wheel(0, 30); + await page.mouse.wheel(0, 40); + + await expect(page.getByTitle(ZOOM.reset.name)).toHaveText('100%'); + }); +}); diff --git a/apps/client/src/components/Canvas/DrawingCanvas/DrawingCanvas.tsx b/apps/client/src/components/Canvas/DrawingCanvas/DrawingCanvas.tsx index 2c759ce..a283bb7 100644 --- a/apps/client/src/components/Canvas/DrawingCanvas/DrawingCanvas.tsx +++ b/apps/client/src/components/Canvas/DrawingCanvas/DrawingCanvas.tsx @@ -470,14 +470,15 @@ const DrawingCanvas = forwardRef( const handleOnWheel = useCallback( (event: KonvaEventObject) => { + event.evt.preventDefault(); + const stage = event.target.getStage(); - if (event.evt.ctrlKey && stage) { - event.evt.preventDefault(); + if (!editingNodeId && event.evt.ctrlKey && stage) { zoomStageRelativeToPointerPosition(stage, event.evt.deltaY); } }, - [zoomStageRelativeToPointerPosition], + [editingNodeId, zoomStageRelativeToPointerPosition], ); const handleStageDragStart = useCallback( diff --git a/apps/client/src/components/Canvas/Shapes/EditableText/EditableTextInput.tsx b/apps/client/src/components/Canvas/Shapes/EditableText/EditableTextInput.tsx index abbdedd..88ae815 100644 --- a/apps/client/src/components/Canvas/Shapes/EditableText/EditableTextInput.tsx +++ b/apps/client/src/components/Canvas/Shapes/EditableText/EditableTextInput.tsx @@ -6,6 +6,7 @@ import { getColorValue, getFontSize, getSizeValue } from '@/utils/shape'; import { getSizePropsFromTextValue } from './helpers/size'; import useDefaultThemeColors from '@/hooks/useThemeColors'; import useAutoFocus from '@/hooks/useAutoFocus/useAutoFocus'; +import useEvent from '@/hooks/useEvent/useEvent'; import * as Styled from './EditableTextInput.styled'; import type { NodeObject } from 'shared'; import type { OnTextSaveArgs } from './EditableText'; @@ -106,6 +107,15 @@ const EditableTextInput = ({ event.stopPropagation(); }; + const handleOnWheel = (event: WheelEvent) => { + event.preventDefault(); + event.stopPropagation(); + }; + + useEvent('wheel', handleOnWheel, ref.current?.parentElement, { + eventOptions: { passive: false }, + }); + return ( From 1c6a7c72beacdc3938e1bcbc9d818932b32ac871 Mon Sep 17 00:00:00 2001 From: gkuzin13 Date: Tue, 20 Feb 2024 15:48:22 +0200 Subject: [PATCH 3/3] fix: text not selected after editing --- .../Canvas/DrawingCanvas/DrawingCanvas.tsx | 10 +++------- .../src/components/Canvas/DrawingCanvas/Nodes.tsx | 12 +++++++----- 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/apps/client/src/components/Canvas/DrawingCanvas/DrawingCanvas.tsx b/apps/client/src/components/Canvas/DrawingCanvas/DrawingCanvas.tsx index a283bb7..b61a6e7 100644 --- a/apps/client/src/components/Canvas/DrawingCanvas/DrawingCanvas.tsx +++ b/apps/client/src/components/Canvas/DrawingCanvas/DrawingCanvas.tsx @@ -96,7 +96,6 @@ const DrawingCanvas = forwardRef( const isSelectTool = toolType === 'select'; const isSelecting = drawing && isSelectTool; const isLayerListening = !isHandTool; - const hasSelectedNodes = selectedNodeIds.length > 0; /** * syncs with store state when selected nodes change @@ -340,18 +339,15 @@ const DrawingCanvas = forwardRef( handleDraftCreate(toolType, pointerPosition); } - if (hasSelectedNodes && toolType === 'select') { - setSelectedNodeIds([]); - dispatch(canvasActions.setSelectedNodeIds([])); - } - if (editingNodeId) { setEditingNodeId(null); } + + setSelectedNodeIds([]); + dispatch(canvasActions.setSelectedNodeIds([])); }, [ toolType, - hasSelectedNodes, editingNodeId, handleDraftCreate, setDrawingPosition, diff --git a/apps/client/src/components/Canvas/DrawingCanvas/Nodes.tsx b/apps/client/src/components/Canvas/DrawingCanvas/Nodes.tsx index 37e4f9a..15e3fae 100644 --- a/apps/client/src/components/Canvas/DrawingCanvas/Nodes.tsx +++ b/apps/client/src/components/Canvas/DrawingCanvas/Nodes.tsx @@ -51,11 +51,13 @@ const Nodes = ({ /> ); })} - + {!editingNodeId && ( + + )} ); };