임의 그리드모드 추가

src/components/SettingsModal.jsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react'
 import { Button, Checkbox, CheckboxGroup, RadioGroup, Radio, Input } from '@nextui-org/react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { modalContent, modalState } from '@/store/modalAtom'
-import { guideLineState } from '@/store/canvasAtom'
+import { guideLineState, horiGuideLinesState, vertGuideLinesState } from '@/store/canvasAtom'
 import { fabric } from 'fabric'
 
 export default function SettingsModal(props) {
@@ -16,6 +16,8 @@ export default function SettingsModal(props) {
 
   const [open, setOpen] = useRecoilState(modalState)
   const [guideLine, setGuideLine] = useRecoilState(guideLineState)
+  const [horiGuideLines, setHoriGuideLines] = useRecoilState(horiGuideLinesState)
+  const [vertGuideLines, setVertGuideLines] = useRecoilState(vertGuideLinesState)
 
   const gridSettingArray = []
 
@@ -63,6 +65,7 @@ export default function SettingsModal(props) {
             lockScalingX: true,
             lockScalingY: true,
             name: 'guideLine',
+            direction: 'horizontal',
           },
         )
         canvasProps.add(horizontalLine)
@@ -82,6 +85,7 @@ export default function SettingsModal(props) {
             lockScalingX: true,
             lockScalingY: true,
             name: 'guideLine',
+            direction: 'vertical',
           },
         )
         canvasProps.add(verticalLine)
@@ -99,6 +103,16 @@ export default function SettingsModal(props) {
         moduleHoriLength: moduleHoriLength,
       }
       gridSettingArray.push(recoilObj)
+      const newHoriGuideLines = [...horiGuideLines]
+      horizontalLineArray.forEach((line) => {
+        newHoriGuideLines.push(line)
+      })
+      const newVertGuideLines = [...vertGuideLines]
+      verticalLineArray.forEach((line) => {
+        newVertGuideLines.push(line)
+      })
+      setHoriGuideLines(newHoriGuideLines)
+      setVertGuideLines(newVertGuideLines)
     }
 
     if (gridCheckedValue.includes('dot')) {
@@ -170,6 +184,8 @@ export default function SettingsModal(props) {
       guideLines?.forEach((item) => canvasProps.remove(item))
       canvasProps.renderAll()
       setGuideLine([])
+      setHoriGuideLines([])
+      setVertGuideLines([])
     } else {
       alert('그리드가 없습니다.')
       return

src/hooks/useMode.js

@@ -25,6 +25,8 @@ import {
   templateTypeState,
   wallState,
   guideLineState,
+  horiGuideLinesState,
+  vertGuideLinesState,
 } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { fabric } from 'fabric'
@@ -69,8 +71,8 @@ export function useMode() {
   const [guideLineMode, setGuideLineMode] = useState(false)
   const [guideDotMode, setGuideDotMode] = useState(false)
 
-  const [horiGuideLines, setHoriGuideLines] = useState([])
+  const [horiGuideLines, setHoriGuideLines] = useRecoilState(horiGuideLinesState)
-  const [vertGuideLines, setVertGuideLines] = useState([])
+  const [vertGuideLines, setVertGuideLines] = useRecoilState(vertGuideLinesState)
 
   useEffect(() => {
     // if (!canvas) {
@@ -99,10 +101,10 @@ export function useMode() {
   }, [endPoint])
 
   useEffect(() => {
+    changeMode(canvas, mode)
     canvas?.off('mouse:move')
     canvas?.on('mouse:move', drawMouseLines)
-    changeMode(canvas, mode)
+  }, [mode, horiGuideLines, vertGuideLines])
-  }, [mode])
 
   useEffect(() => {
     setGuideLineMode(false)
@@ -111,9 +113,6 @@ export function useMode() {
       const guideLineState = guideLineInfo.filter((item) => item.guideMode === 'guideLine')
       const guideDotState = guideLineInfo.filter((item) => item.guideMode === 'guideDot')
 
-      setHoriGuideLines(guideLineState[0].horizontalLineArray)
-      setVertGuideLines(guideLineState[0].verticalLineArray)
-
       setGuideLineMode(guideLineState.length > 0)
       setGuideDotMode(guideDotState.length > 0)
     }
@@ -160,12 +159,8 @@ export function useMode() {
 
     if (mode === Mode.EDIT || mode === Mode.ADSORPTION_POINT) {
       let adsorptionPoint = adsorptionPointList.length > 0 ? findClosestPoint(pointer, adsorptionPointList) : null
-      if (isGuideLineMode && isGuideDotMode) {
+      if ((horiGuideLines.length > 0 || vertGuideLines.length > 0) && guideDotMode) {
-        const closestHorizontalLine = getClosestHorizontalLine(pointer, horizontalLineArray)
+      } else if (guideDotMode) {
-        const closetVerticalLine = getClosestVerticalLine(pointer, verticalLineArray)
-        const xDiff = Math.abs(pointer.x - closetVerticalLine.x1)
-        const yDiff = Math.abs(pointer.y - closestHorizontalLine.y1)
-
         const x = pointer.x - guideLineLengthHori * Math.floor(pointer.x / guideLineLengthHori)
         const y = pointer.y - guideLineLengthVert * Math.floor(pointer.y / guideLineLengthVert)
 
@@ -174,50 +169,46 @@ export function useMode() {
         const isAttachX = xRate >= 0.4 && xRate <= 0.7
         const isAttachY = yRate >= 0.4 && yRate <= 0.7
 
+        if (isAttachX && isAttachY) {
+          newX = Math.floor(pointer.x / guideLineLengthHori) * guideLineLengthHori + guideLineLengthHori / 2
+          newY = Math.floor(pointer.y / guideLineLengthVert) * guideLineLengthVert + guideLineLengthVert / 2
+        }
+      } else if (horiGuideLines.length > 0 || vertGuideLines.length > 0) {
+        const closestHorizontalLine = getClosestHorizontalLine(pointer, horiGuideLines)
+        const closetVerticalLine = getClosestVerticalLine(pointer, vertGuideLines)
+        let intersection = null
+        let intersectionDistance = Infinity
+
+        if (closestHorizontalLine && closetVerticalLine) {
+          intersection = calculateIntersection(closestHorizontalLine, closetVerticalLine)
+          if (intersection) {
+            intersectionDistance = distanceBetweenPoints(pointer, intersection)
+          }
+        }
+
+        let xDiff, yDiff
+
+        if (closetVerticalLine) {
+          xDiff = Math.abs(pointer.x - closetVerticalLine.x1)
+        }
+        if (closestHorizontalLine) {
+          yDiff = Math.abs(pointer.y - closestHorizontalLine.y1)
+        }
+
+        const x = pointer.x - guideLineLengthHori * Math.floor(pointer.x / guideLineLengthHori)
+        const y = pointer.y - guideLineLengthVert * Math.floor(pointer.y / guideLineLengthVert)
+
+        const xRate = x / guideLineLengthHori
+        const yRate = y / guideLineLengthVert
+        const isAttachX = xRate >= 0.4 && xRate <= 0.7
+        const isAttachY = yRate >= 0.4 && yRate <= 0.7
         if (isAttachX && isAttachY) {
           newX = Math.floor(pointer.x / guideLineLengthHori) * guideLineLengthHori + guideLineLengthHori / 2
           newY = Math.floor(pointer.y / guideLineLengthVert) * guideLineLengthVert + guideLineLengthVert / 2
         } else {
-          if (Math.min(xDiff, yDiff) <= 20) {
+          if (intersection && intersectionDistance < 20) {
-            if (xDiff < yDiff) {
+            newX = intersection.x
-              newX = closetVerticalLine.x1
+            newY = intersection.y
-              newY = pointer.y
-            } else {
-              newX = pointer.x
-              newY = closestHorizontalLine.y1
-            }
-          }
-        }
-      } else if (isGuideDotMode) {
-        const x = pointer.x - guideLineLengthHori * Math.floor(pointer.x / guideLineLengthHori)
-        const y = pointer.y - guideLineLengthVert * Math.floor(pointer.y / guideLineLengthVert)
-
-        const xRate = x / guideLineLengthHori
-        const yRate = y / guideLineLengthVert
-        const isAttachX = xRate >= 0.4 && xRate <= 0.7
-        const isAttachY = yRate >= 0.4 && yRate <= 0.7
-
-        if (isAttachX && isAttachY) {
-          newX = Math.floor(pointer.x / guideLineLengthHori) * guideLineLengthHori + guideLineLengthHori / 2
-          newY = Math.floor(pointer.y / guideLineLengthVert) * guideLineLengthVert + guideLineLengthVert / 2
-        }
-      } else if (isGuideLineMode) {
-        const closestHorizontalLine = getClosestHorizontalLine(pointer, horizontalLineArray)
-        const closetVerticalLine = getClosestVerticalLine(pointer, verticalLineArray)
-        const xDiff = Math.abs(pointer.x - closetVerticalLine.x1)
-        const yDiff = Math.abs(pointer.y - closestHorizontalLine.y1)
-
-        const x = pointer.x - guideLineLengthHori * Math.floor(pointer.x / guideLineLengthHori)
-        const y = pointer.y - guideLineLengthVert * Math.floor(pointer.y / guideLineLengthVert)
-
-        const xRate = x / guideLineLengthHori
-        const yRate = y / guideLineLengthVert
-        const isAttachX = xRate >= 0.4 && xRate <= 0.7
-        const isAttachY = yRate >= 0.4 && yRate <= 0.7
-
-        if (isAttachX && isAttachY) {
-          newX = Math.floor(pointer.x / guideLineLengthHori) * guideLineLengthHori + guideLineLengthHori / 2
-          newY = Math.floor(pointer.y / guideLineLengthVert) * guideLineLengthVert + guideLineLengthVert / 2
           } else {
             if (Math.min(xDiff, yDiff) <= 20) {
               if (xDiff < yDiff) {
@@ -230,7 +221,7 @@ export function useMode() {
             }
           }
         }
-
+      }
       if (adsorptionPoint && distanceBetweenPoints(pointer, adsorptionPoint) < 20) {
         newX = adsorptionPoint.left
         newY = adsorptionPoint.top
@@ -358,8 +349,6 @@ export function useMode() {
 
   // 모드에 따른 마우스 이벤트 변경
   const changeMouseEvent = (mode) => {
-    document.removeEventListener('contextmenu', mouseEvent.drawLineModeRightClick)
-
     switch (mode) {
       case 'drawLine':
         canvas?.on('mouse:down', mouseEvent.drawLineModeLeftClick)
@@ -367,7 +356,6 @@ export function useMode() {
         break
       case 'edit':
         canvas?.on('mouse:down', mouseEvent.editMode)
-
         break
       case 'textbox':
         canvas?.on('mouse:down', mouseEvent.textboxMode)
@@ -546,11 +534,14 @@ export function useMode() {
   }
 
   const mouseAndkeyboardEventClear = () => {
+    canvas?.off('mouse:down')
     Object.keys(mouseEvent).forEach((key) => {
       canvas?.off('mouse:down', mouseEvent[key])
+      document.removeEventListener('contextmenu', mouseEvent[key])
     })
+
     Object.keys(keyboardEvent).forEach((key) => {
-      window.removeEventListener('keydown', keyboardEvent[key])
+      document.removeEventListener('keydown', keyboardEvent[key])
     })
   }
 
@@ -558,6 +549,7 @@ export function useMode() {
     // rerendering을 막기 위해 useCallback 사용
     editMode: useCallback(
       (e) => {
+        e.preventDefault()
         switch (e.key) {
           case 'ArrowDown': {
             if (!keyValid()) {
@@ -627,11 +619,12 @@ export function useMode() {
   }
 
   const changeMode = (canvas, mode) => {
+    mouseAndkeyboardEventClear()
     setMode(mode)
     setCanvas(canvas)
 
     // mode별 이벤트 변경
-    mouseAndkeyboardEventClear()
+
     changeMouseEvent(mode)
     changeKeyboardEvent(mode)
 
@@ -670,19 +663,21 @@ export function useMode() {
     if (mode === Mode.EDIT) {
       switch (mode) {
         case 'edit':
-          window.addEventListener('keydown', keyboardEvent.editMode)
+          document.addEventListener('keydown', keyboardEvent.editMode)
           break
       }
     }
   }
 
   const mouseEvent = {
-    drawLineModeLeftClick: useCallback(
+    drawLineModeLeftClick: (options) => {
-      (options) => {
+      if (mode !== Mode.DRAW_LINE) {
+        return
+      }
       const pointer = canvas?.getPointer(options.e)
 
       const line = new QLine(
-          [pointer.x, 0, pointer.x, canvas.height], // y축에 1자 선을 그립니다.
+        [pointer.x, 0, pointer.x, canvasSize.vertical], // y축에 1자 선을 그립니다.
         {
           stroke: 'gray',
           strokeWidth: 1,
@@ -693,19 +688,24 @@ export function useMode() {
           lockScalingX: true,
           lockScalingY: true,
           name: 'guideLine',
+          direction: 'vertical',
         },
       )
 
       canvas?.add(line)
       canvas?.renderAll()
 
-        const newVerticalLineArray = [...vertGuideLines, line]
+      const newVerticalLineArray = [...vertGuideLines]
+      newVerticalLineArray.push(line)
+
       setVertGuideLines(newVerticalLineArray)
     },
-      [canvas, vertGuideLines],
-    ),
     drawLineModeRightClick: useCallback(
       (options) => {
+        document.removeEventListener('contextmenu', mouseEvent.drawLineModeRightClick)
+        if (mode !== Mode.DRAW_LINE) {
+          return
+        }
         const line = new fabric.Line(
           [0, options.offsetY, canvasSize.horizontal, options.offsetY], // y축에 1자 선을 그립니다.
           {
@@ -718,19 +718,23 @@ export function useMode() {
             lockScalingX: true,
             lockScalingY: true,
             name: 'guideLine',
+            direction: 'horizontal',
           },
         )
 
         canvas?.add(line)
         canvas?.renderAll()
 
-        const newHorizontalLineArray = [...horiGuideLines, line]
+        const newHorizontalLineArray = [...horiGuideLines]
+        newHorizontalLineArray.push(line)
         setHoriGuideLines(newHorizontalLineArray)
       },
-      [canvas, horiGuideLines],
+      [canvas, mode, horiGuideLines],
     ),
-    editMode: useCallback(
+    editMode: (options) => {
-      (options) => {
+      if (mode !== Mode.EDIT) {
+        return
+      }
       let pointer = canvas?.getPointer(options.e)
 
       if (getInterSectPointByMouseLine()) {
@@ -841,9 +845,9 @@ export function useMode() {
 
       canvas?.renderAll()
     },
-      [canvas],
+
-    ),
+    textboxMode: (options) => {
-    textboxMode: useCallback((options) => {
+      if (mode !== Mode.TEXTBOX) return
       if (canvas?.getActiveObject()?.type === 'textbox') return
       const pointer = canvas?.getPointer(options.e)
 
@@ -861,8 +865,9 @@ export function useMode() {
       textbox?.on('editing:exited', function () {
         changeMode(canvas, Mode.EDIT)
       })
-    }, []),
+    },
-    drawRectMode: useCallback((o) => {
+    drawRectMode: (o) => {
+      if (mode !== Mode.DRAW_RECT) return
       let rect, isDown, origX, origY
       isDown = true
       const pointer = canvas.getPointer(o.e)
@@ -902,10 +907,10 @@ export function useMode() {
         canvas.off('mouse:up')
         setMode(Mode.DEFAULT)
       })
-    }, []),
+    },
     // 흡착점 추가
-    adsorptionPoint: useCallback(
+    adsorptionPoint: (o) => {
-      (o) => {
+      if (mode !== Mode.ADSORPTION_POINT) return
       const pointer = canvas.getPointer(o.e)
       let newX = pointer.x
       let newY = pointer.y
@@ -933,8 +938,6 @@ export function useMode() {
       canvas.add(circle)
       canvas.renderAll()
     },
-      [canvas],
-    ),
   }
 
   const getInterSectPointByMouseLine = () => {

src/store/canvasAtom.js

@@ -95,3 +95,15 @@ export const currentObjectState = atom({
   default: null,
   dangerouslyAllowMutability: true,
 })
+
+export const horiGuideLinesState = atom({
+  key: 'horiGuideLines',
+  default: [],
+  dangerouslyAllowMutability: true,
+})
+
+export const vertGuideLinesState = atom({
+  key: 'vertGuideLines',
+  default: [],
+  dangerouslyAllowMutability: true,
+})