diff --git a/src/hooks/common/useGrid.js b/src/hooks/common/useGrid.js index abd2a6e0..29a5edea 100644 --- a/src/hooks/common/useGrid.js +++ b/src/hooks/common/useGrid.js @@ -71,10 +71,10 @@ export function useGrid() { const backgroundPolygon = new fabric.Polygon( [ - { x: 0, y: 0 }, - { x: canvas.width, y: 0 }, - { x: canvas.width, y: canvas.height }, - { x: 0, y: canvas.height }, + { x: -1500, y: -1500 }, + { x: 2500, y: -1500 }, + { x: 2500, y: 2500 }, + { x: -1500, y: 2500 }, ], { fill: pattern, @@ -90,9 +90,14 @@ export function useGrid() { } if (patternData.lineGridDisplay) { - for (let i = 0; i < canvas.height / patternData.gridVertical + 1; i++) { + for (let i = 0; i < 5000 / patternData.gridVertical + 1; i++) { const horizontalLine = new fabric.Line( - [0, i * patternData.gridVertical - patternData.gridVertical / 2, canvas.width, i * patternData.gridVertical - patternData.gridVertical / 2], + [ + -1500, + -1500 + i * patternData.gridVertical - patternData.gridVertical / 2, + 3000, + -1500 + i * patternData.gridVertical - patternData.gridVertical / 2, + ], { stroke: gridColor, strokeWidth: 1, @@ -113,9 +118,14 @@ export function useGrid() { canvas.add(horizontalLine) } - for (let i = 0; i < canvas.width / patternData.gridHorizon + 1; i++) { + for (let i = 0; i < 5000 / patternData.gridHorizon + 1; i++) { const verticalLine = new fabric.Line( - [i * patternData.gridHorizon - patternData.gridHorizon / 2, 0, i * patternData.gridHorizon - patternData.gridHorizon / 2, canvas.height], + [ + -1500 + i * patternData.gridHorizon - patternData.gridHorizon / 2, + -1500, + -1500 + i * patternData.gridHorizon - patternData.gridHorizon / 2, + 3000, + ], { stroke: gridColor, strokeWidth: 1,