Merge pull request #90 from Gkuzin13/dev

Dev

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],
     ]);

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

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<NodeType, 'text'>;
   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) {

apps/client/src/components/Canvas/DrawingCanvas/DrawingCanvas.tsx

@@ -96,7 +96,6 @@ const DrawingCanvas = forwardRef<Konva.Stage, Props>(
     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<Konva.Stage, Props>(
           handleDraftCreate(toolType, pointerPosition);
         }
 
-        if (hasSelectedNodes && toolType === 'select') {
-          setSelectedNodeIds([]);
-          dispatch(canvasActions.setSelectedNodeIds([]));
-        }
-
         if (editingNodeId) {
           setEditingNodeId(null);
         }
+
+        setSelectedNodeIds([]);
+        dispatch(canvasActions.setSelectedNodeIds([]));
       },
       [
         toolType,
-        hasSelectedNodes,
         editingNodeId,
         handleDraftCreate,
         setDrawingPosition,
@@ -470,14 +466,15 @@ const DrawingCanvas = forwardRef<Konva.Stage, Props>(
 
     const handleOnWheel = useCallback(
       (event: KonvaEventObject<WheelEvent>) => {
+        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(

apps/client/src/components/Canvas/DrawingCanvas/Nodes.tsx

@@ -51,11 +51,13 @@ const Nodes = ({
           />
         );
       })}
-      <NodesTransformer
-        selectedNodes={selectedNodes}
-        stageScale={stageScale}
-        onNodesChange={onNodesChange}
-      />
+      {!editingNodeId && (
+        <NodesTransformer
+          selectedNodes={selectedNodes}
+          stageScale={stageScale}
+          onNodesChange={onNodesChange}
+        />
+      )}
     </>
   );
 };

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,28 +107,37 @@ const EditableTextInput = ({
     event.stopPropagation();
   };
 
+  const handleOnWheel = (event: WheelEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  useEvent('wheel', handleOnWheel, ref.current?.parentElement, {
+    eventOptions: { passive: false },
+  });
+
   return (
     <Html
       groupProps={{
         x: node.nodeProps.point[0],
         y: node.nodeProps.point[1],
         rotation: node.nodeProps.rotation,
       }}
-      divProps={{ style: { zIndex: 0 } }}
+      divProps={{ style: { height } }}
     >
       <Styled.TextArea
         ref={ref}
         defaultValue={initialValue}
         style={{ ...style, width, height }}
-        onChange={handleValueChange}
-        onKeyDown={handleKeyDown}
         autoFocus
         tabIndex={0}
         autoCapitalize="false"
         autoComplete="false"
         autoSave="false"
         autoCorrect="false"
         wrap="off"
+        onChange={handleValueChange}
+        onKeyDown={handleKeyDown}
         onContextMenu={handleOnContextMenu}
         data-testid="editable-text-input"
       />