diff --git a/src/hooks/useEvent.js b/src/hooks/useEvent.js index 939f69f5..d03417e4 100644 --- a/src/hooks/useEvent.js +++ b/src/hooks/useEvent.js @@ -435,7 +435,13 @@ export function useEvent() { y: Math.round(originPointer.y), } - const tempGrid = new fabric.Line([-1500, pointer.y, 2500, pointer.y], { + const currentZoom = canvas.getZoom() + const vt = canvas.viewportTransform + const visibleLeft = -vt[4] / currentZoom + const visibleRight = visibleLeft + canvas.getWidth() / currentZoom + const padding = 500 + + const tempGrid = new fabric.Line([visibleLeft - padding, pointer.y, visibleRight + padding, pointer.y], { stroke: gridColor, strokeWidth: 1, selectable: true, diff --git a/src/hooks/useTempGrid.js b/src/hooks/useTempGrid.js index c0a7dcc1..fcb9d238 100644 --- a/src/hooks/useTempGrid.js +++ b/src/hooks/useTempGrid.js @@ -11,11 +11,28 @@ export function useTempGrid() { const isGridDisplay = useRecoilValue(gridDisplaySelector) const [tempGridMode, setTempGridMode] = useRecoilState(tempGridModeState) const { getIntersectMousePoint } = useMouse() + const getVisibleBounds = () => { + const currentZoom = canvas.getZoom() + const vt = canvas.viewportTransform + const visibleLeft = -vt[4] / currentZoom + const visibleTop = -vt[5] / currentZoom + const visibleRight = visibleLeft + canvas.getWidth() / currentZoom + const visibleBottom = visibleTop + canvas.getHeight() / currentZoom + const padding = 500 + return { + left: visibleLeft - padding, + top: visibleTop - padding, + right: visibleRight + padding, + bottom: visibleBottom + padding, + } + } + const tempGridModeStateLeftClickEvent = (e) => { //임의 그리드 모드일 경우 let pointer = getIntersectMousePoint(e) + const bounds = getVisibleBounds() - const tempGrid = new fabric.Line([pointer.x, -1500, pointer.x, 2500], { + const tempGrid = new fabric.Line([pointer.x, bounds.top, pointer.x, bounds.bottom], { stroke: gridColor, strokeWidth: 1, selectable: true,