임의그리드 잘리는 현상 수정

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,

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,