Skip to content

Commit

Permalink
- Moved Grid to Canvas for scale management.
Browse files Browse the repository at this point in the history
jsanzdev committed Dec 12, 2024
1 parent 2dc2feb commit 34fbf46
Showing 3 changed files with 68 additions and 8 deletions.
66 changes: 66 additions & 0 deletions src/pods/canvas/canvas.grid.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import Konva from 'konva';
import { useRef, useEffect } from 'react';
import { Layer } 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;

// Clear any previous grid lines
layer.find('.grid-line').forEach(line => line.destroy());

// 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
})
);
}

// 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
})
);
}

layer.batchDraw();
};

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;
8 changes: 0 additions & 8 deletions src/pods/canvas/canvas.pod.module.css
Original file line number Diff line number Diff line change
@@ -2,12 +2,4 @@
grid-area: canvas;
width: 100%;
overflow: auto;
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0.1) 1px,
transparent 1px
),
linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
background-size: 40px 40px; /* Adjust size of grid cells */
background-attachment: local;
}
2 changes: 2 additions & 0 deletions src/pods/canvas/canvas.pod.tsx
Original file line number Diff line number Diff line change
@@ -15,6 +15,7 @@ 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';

export const CanvasPod = () => {
const [isTransfomerBeingDragged, setIsTransfomerBeingDragged] =
@@ -163,6 +164,7 @@ export const CanvasPod = () => {
onMouseUp={handleMouseUp}
id="konva-stage" // data-id did not work for some reason
>
<CanvasGrid scale={scale} stageRef={stageRef} />
<Layer ref={layerRef}>
{
/* TODO compentize and simplify this */

0 comments on commit 34fbf46

Please sign in to comment.