updated layer

src/pods/canvas/canvas.grid.tsx

@@ -1,66 +1,53 @@
-import Konva from 'konva';
-import { useRef, useEffect } from 'react';
-import { Layer } from 'react-konva';
+import { Size } from '@/core/model';
+import React, { useMemo } from 'react';
+import { Layer, Line } from 'react-konva';
 
 const gridSize = 40;
 
-export const drawGrid = (
-  layer: Konva.Layer,
-  scale: number,
-  stageRef: React.RefObject<Konva.Stage>
-) => {
-  const gridSpacing = gridSize * scale;
-  const width = stageRef.current?.width() ?? 0;
-  const height = stageRef.current?.height() ?? 0;
+// Memoized component for a grid line
+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()
+);
 
-  // Clear any previous grid lines
-  layer.find('.grid-line').forEach(line => line.destroy());
+interface Props {
+  scale: number;
+  canvasSize: Size;
+}
 
-  // Vertical lines
-  for (let x = 0; x < width; x += gridSpacing) {
-    layer.add(
-      new Konva.Line({
-        name: 'grid-line',
-        points: [x, 0, x, height],
-        stroke: 'rgba(0, 0, 0, 0.1)',
-        strokeWidth: 1,
-        // dash: [4, 6], // Optional dash pattern for grid lines
-      })
+export const CanvasGridLayer: React.FC<Props> = props => {
+  const { scale, canvasSize } = props;
+  const gridSpacing = gridSize * scale;
+  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]
     );
-  }
 
-  // Horizontal lines
-  for (let y = 0; y < height; y += gridSpacing) {
-    layer.add(
-      new Konva.Line({
-        name: 'grid-line',
-        points: [0, y, width, y],
-        stroke: 'rgba(0, 0, 0, 0.1)',
-        strokeWidth: 1,
-        // sdash: [4, 6], // Optional dash pattern for grid lines
-      })
+    const horizontalLines = Array.from(
+      { length: Math.ceil(height / gridSpacing) },
+      (_, i) => [0, i * gridSpacing, width, i * gridSpacing]
     );
-  }
 
-  layer.batchDraw();
+    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>
+  );
 };
-
-const CanvasGrid = ({
-  scale,
-  stageRef,
-}: {
-  scale: number;
-  stageRef: React.RefObject<Konva.Stage>;
-}) => {
-  const layerRef = useRef<Konva.Layer>(null);
-
-  useEffect(() => {
-    if (layerRef.current) {
-      drawGrid(layerRef.current, scale, stageRef);
-    }
-  }, [scale, stageRef]);
-
-  return <Layer ref={layerRef} />;
-};
-
-export default CanvasGrid;

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,12 +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 CanvasGrid from './canvas.grid';
+import { CanvasGridLayer } from './canvas.grid';
 
 export const CanvasPod = () => {
   const [isTransfomerBeingDragged, setIsTransfomerBeingDragged] =
     useState(false);
 
+  const canvasSize = React.useMemo(() => ({ width: 3000, height: 3000 }), []);
+
   const {
     shapes,
     scale,
@@ -154,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 }}
@@ -164,7 +166,7 @@ export const CanvasPod = () => {
         onMouseUp={handleMouseUp}
         id="konva-stage" // data-id did not work for some reason
       >
-        <CanvasGrid scale={scale} stageRef={stageRef} />
+        <CanvasGridLayer scale={scale} canvasSize={canvasSize} />
         <Layer ref={layerRef}>
           {
             /* TODO compentize and simplify this */