Merge branch 'dev' into feature/#227-add-icons

e2e/helpers/position.helpers.ts

@@ -1,6 +1,5 @@
 import { Locator, Page } from '@playwright/test';
 import { Group } from 'konva/lib/Group';
-
 export interface Position {
   x: number;
   y: number;
@@ -20,13 +19,17 @@ export const getLocatorPosition = async (
 };
 
 export const getCanvasBoundingBox = async (page: Page) => {
-  const canvasWindowPos = await page
-    .locator('#konva-stage canvas')
-    .boundingBox();
+  const locator = page.locator('#konva-stage canvas').nth(1);
+
+  // Ensure that the canvas is visible before continuie
+  await locator.waitFor({ state: 'visible' });
+
+  const canvasWindowPos = await locator.boundingBox();
+
   if (canvasWindowPos) {
     return canvasWindowPos;
   } else {
-    throw new Error('Canvas is not loaded on ui');
+    throw new Error('Canvas is not loaded on UI');
   }
 };
 

src/pods/canvas/canvas.grid.tsx

@@ -0,0 +1,53 @@
+import React, { useMemo } from 'react';
+import { Layer, Line } from 'react-konva';
+import { Size } from '@/core/model';
+
+const gridSize = 40; // Default grid size (no scaling)
+
+const GridLine = React.memo(
+  ({ points }: { points: number[] }) => (
+    <Line points={points} stroke="rgba(0, 0, 0, 0.1)" strokeWidth={1} />
+  ),
+  (prevProps, nextProps) => prevProps.points.join() === nextProps.points.join()
+);
+
+interface Props {
+  // scale: number;
+  canvasSize: Size;
+}
+
+export const CanvasGridLayer: React.FC<Props> = ({ canvasSize }) => {
+  const gridSpacing = gridSize; // Use the original grid size, let Konva handle scaling
+  const width = canvasSize.width;
+  const height = canvasSize.height;
+
+  // Memoize the grid lines computation to avoid unnecessary recalculations
+  const { verticalLines, horizontalLines } = useMemo(() => {
+    const verticalLines = Array.from(
+      { length: Math.ceil(width / gridSpacing) },
+      (_, i) => [i * gridSpacing, 0, i * gridSpacing, height]
+    );
+
+    const horizontalLines = Array.from(
+      { length: Math.ceil(height / gridSpacing) },
+      (_, i) => [0, i * gridSpacing, width, i * gridSpacing]
+    );
+
+    return { verticalLines, horizontalLines };
+  }, [width, height, gridSpacing]);
+
+  return (
+    <Layer>
+      {/* Render vertical lines */}
+      {verticalLines.map((points, index) => (
+        <GridLine key={`v-line-${index}`} points={points} />
+      ))}
+      {/* Render horizontal lines */}
+      {horizontalLines.map((points, index) => (
+        <GridLine key={`h-line-${index}`} points={points} />
+      ))}
+    </Layer>
+  );
+};
+
+export default CanvasGridLayer;

src/pods/canvas/canvas.pod.tsx

@@ -1,4 +1,4 @@
-import { createRef, useEffect, useMemo, useRef, useState } from 'react';
+import React, { createRef, useEffect, useMemo, useRef, useState } from 'react';
 import Konva from 'konva';
 import { useCanvasContext } from '@/core/providers';
 import { Layer, Line, Rect, Stage, Transformer } from 'react-konva';
@@ -15,11 +15,14 @@ import { useDropImageFromDesktop } from './use-drop-image-from-desktop';
 import { useKeyboardDisplacement } from './use-keyboard-displacement';
 import { useMultipleSelectionShapeHook } from './use-multiple-selection-shape.hook';
 import { ContextMenu } from '../context-menu/use-context-menu.hook';
+import { CanvasGridLayer } from './canvas.grid';
 
 export const CanvasPod = () => {
   const [isTransfomerBeingDragged, setIsTransfomerBeingDragged] =
     useState(false);
 
+  const canvasSize = React.useMemo(() => ({ width: 3000, height: 3000 }), []);
+
   const {
     shapes,
     scale,
@@ -153,8 +156,8 @@ export const CanvasPod = () => {
       {/*TODO: move size to canvas provider?*/}
       {/*         onMouseDown={handleClearSelection}*/}
       <Stage
-        width={3000}
-        height={3000}
+        width={canvasSize.width}
+        height={canvasSize.height}
         onTouchStart={handleClearSelection}
         ref={stageRef}
         scale={{ x: scale, y: scale }}
@@ -163,6 +166,7 @@ export const CanvasPod = () => {
         onMouseUp={handleMouseUp}
         id="konva-stage" // data-id did not work for some reason
       >
+        <CanvasGridLayer canvasSize={canvasSize} />
         <Layer ref={layerRef}>
           {
             /* TODO compentize and simplify this */