그리드 설정 후 에디팅 모드 변경 시 가까운 line에 붙도록 추가

src/components/Roof2.jsx

@@ -26,12 +26,14 @@ import ThumbnailList from './ui/ThumbnailLIst'
 import QContextMenu from './common/context-menu/QContextMenu'
 import { modalContent, modalState } from '@/store/modalAtom'
 import SettingsModal from './SettingsModal'
-import { get } from '@/lib/Axios'
+import { useAxios } from '@/hooks/useAxios'
 
 export default function Roof2(props) {
   const { name, userId, email, isLoggedIn } = props
   const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots, saveImage, addCanvas } = useCanvas('canvas')
 
+  const { get } = useAxios()
+
   const canvasRef = useRef(null)
 
   //canvas 기본 사이즈

src/hooks/useMode.js

@@ -4,6 +4,8 @@ import {
   distanceBetweenPoints,
   findTopTwoIndexesByDistance,
   getCenterPoint,
+  getClosestHorizontalLine,
+  getClosestVerticalLine,
   getDirection,
   getStartIndex,
   rearrangeArray,
@@ -42,7 +44,6 @@ export function useMode() {
   const [canvas, setCanvas] = useState(null)
   const [zoom, setZoom] = useState(100)
   const [fontSize] = useRecoilState(fontSizeState)
-  const [shape, setShape] = useState(0)
   const [sortedArray, setSortedArray] = useRecoilState(sortedPolygonArray)
   const [roof, setRoof] = useRecoilState(roofState)
   const [wall, setWall] = useRecoilState(wallState)
@@ -65,7 +66,7 @@ export function useMode() {
   const compass = useRecoilValue(compassState)
   const [isCellCenter, setIsCellCenter] = useState(false)
 
-  const guideLine = useRecoilValue(guideLineState)
+  const guideLineInfo = useRecoilValue(guideLineState)
 
   useEffect(() => {
     // 이벤트 리스너 추가
@@ -107,7 +108,27 @@ export function useMode() {
   }, [mode, isGuidePointMode])
 
   const drawMouseLines = (e) => {
-    console.log('guideLine', guideLine)
+    let isGuideLineMode = false,
+      isGuideDotMode = false
+    let guideDotLength, guideLineLength, horizontalLineArray, verticalLineArray
+
+    if (isObjectNotEmpty(guideLineInfo)) {
+      const guideLineState = guideLineInfo.filter((item) => item.guideMode === 'guideLine')
+      const guideDotState = guideLineInfo.filter((item) => item.guideMode === 'guideDot')
+
+      isGuideLineMode = guideLineState.length > 0
+      isGuideDotMode = guideDotState.length > 0
+
+      if (isGuideDotMode) {
+        guideDotLength = Number(guideDotState[0].moduleLength)
+      }
+
+      if (isGuideLineMode) {
+        horizontalLineArray = [...guideLineState[0].horizontalLineArray]
+        verticalLineArray = [...guideLineState[0].verticalLineArray]
+        guideLineLength = Number(guideLineState[0].moduleLength)
+      }
+    }
 
     // 현재 마우스 포인터의 위치를 가져옵니다.
     const pointer = canvas?.getPointer(e.e)
@@ -115,21 +136,56 @@ export function useMode() {
     // 기존에 그려진 가이드라인을 제거합니다.
     removeMouseLines()
 
-    if (canvas?.getActiveObject()) {
+    let newX = pointer.x
-      return
+    let newY = pointer.y
+
+    if (isGuideLineMode && isGuideDotMode && mode === Mode.EDIT) {
+    } else if (isGuideDotMode && mode === Mode.EDIT) {
+      const x = pointer.x - guideDotLength * Math.floor(pointer.x / guideDotLength)
+      const y = pointer.y - guideDotLength * Math.floor(pointer.y / guideDotLength)
+
+      const xRate = x / guideDotLength
+      const yRate = y / guideDotLength
+      const isAttachX = xRate >= 0.4 && xRate <= 0.7
+      const isAttachY = yRate >= 0.4 && yRate <= 0.7
+
+      if (isAttachX && isAttachY) {
+        newX = Math.floor(pointer.x / guideDotLength) * guideDotLength + guideDotLength / 2
+        newY = Math.floor(pointer.y / guideDotLength) * guideDotLength + guideDotLength / 2
       }
-    let newX, newY
+    } else if (isGuideLineMode && mode === Mode.EDIT) {
-    if (isGuidePointMode && mode === Mode.EDIT) {
+      const closestHorizontalLine = getClosestHorizontalLine(pointer, horizontalLineArray)
-      newX = Math.round(pointer.x / 200) * 200
+      const closetVerticalLine = getClosestVerticalLine(pointer, verticalLineArray)
-      newY = Math.round(pointer.y / 200) * 200
+      const xDiff = Math.abs(pointer.x - closetVerticalLine.x1)
+      const yDiff = Math.abs(pointer.y - closestHorizontalLine.y1)
+
+      const x = pointer.x - guideLineLength * Math.floor(pointer.x / guideLineLength)
+      const y = pointer.y - guideLineLength * Math.floor(pointer.y / guideLineLength)
+
+      const xRate = x / guideLineLength
+      const yRate = y / guideLineLength
+      const isAttachX = xRate >= 0.4 && xRate <= 0.7
+      const isAttachY = yRate >= 0.4 && yRate <= 0.7
+
+      if (isAttachX && isAttachY) {
+        newX = Math.floor(pointer.x / guideLineLength) * guideLineLength + guideLineLength / 2
+        newY = Math.floor(pointer.y / guideLineLength) * guideLineLength + guideLineLength / 2
+      } else {
+        if (Math.min(xDiff, yDiff) <= 20) {
+          if (xDiff < yDiff) {
+            newX = closetVerticalLine.x1
+            newY = pointer.y
           } else {
             newX = pointer.x
-      newY = pointer.y
+            newY = closestHorizontalLine.y1
+          }
+        }
+      }
     }
 
     // 가로선을 그립니다.
     const horizontalLine = new fabric.Line([0, newY, canvasSize.horizontal, newY], {
-      stroke: 'black',
+      stroke: 'red',
       strokeWidth: 1,
       selectable: false,
       name: 'mouseLine',
@@ -137,7 +193,7 @@ export function useMode() {
 
     // 세로선을 그립니다.
     const verticalLine = new fabric.Line([newX, 0, newX, canvasSize.vertical], {
-      stroke: 'black',
+      stroke: 'red',
       strokeWidth: 1,
       selectable: false,
       name: 'mouseLine',
@@ -762,10 +818,8 @@ export function useMode() {
     points.current = []
     historyPoints.current = []
 
-    // handleOuterlines()
     const wall = makePolygon(null, sort)
     wall.set({ name: 'wall' })
-    console.log('wall', wall)
 
     return wall
   }
@@ -804,33 +858,7 @@ export function useMode() {
   const makePolygon = (otherLines, sort = true) => {
     // 캔버스에서 모든 라인 객체를 찾습니다.
     const lines = otherLines || historyLines.current
-
-    if (!otherLines) {
-      //외각선 기준
-      const topIndex = findTopTwoIndexesByDistance(sortedArray) //배열중에 큰 2값을 가져옴 TODO: 나중에는 인자로 받아서 다각으로 수정 해야됨
-
-      //일단 배열 6개 짜리 기준의 선 번호
-      if (topIndex[0] === 4) {
-        if (topIndex[1] === 5) {
-          //1번
-          setShape(1)
-        }
-      } else if (topIndex[0] === 1) {
-        //4번
-        if (topIndex[1] === 2) {
-          setShape(4)
-        }
-      } else if (topIndex[0] === 0) {
-        if (topIndex[1] === 1) {
-          //2번
-          setShape(2)
-        } else if (topIndex[1] === 5) {
-          setShape(3)
-        }
-      }
-
     historyLines.current = []
-    }
 
     // 각 라인의 시작점과 끝점을 사용하여 다각형의 점 배열을 생성합니다.
     const points = lines.map((line) => ({ x: line.x1, y: line.y1 }))
@@ -858,12 +886,10 @@ export function useMode() {
     canvas.add(polygon)
 
     // 캔버스를 다시 그립니다.
-    if (!otherLines) {
     // polygon.fillCell()
     canvas?.renderAll()
     // polygon.setViewLengthText(false)
     setMode(Mode.DEFAULT)
-    }
 
     return polygon
   }

src/util/canvas-util.js

@@ -675,3 +675,33 @@ export function findClosestPointWithDifferentXY(targetPoint, points) {
 
   return closestPoint
 }
+
+export const getClosestHorizontalLine = (pointer, horizontalLineArray) => {
+  let closestLine = null
+  let minDistance = Infinity
+
+  horizontalLineArray.forEach((line) => {
+    const distance = Math.abs(line.y1 - pointer.y) // Assuming horizontal lines have the same y1 and y2
+    if (distance < minDistance) {
+      minDistance = distance
+      closestLine = line
+    }
+  })
+
+  return closestLine
+}
+
+export const getClosestVerticalLine = (pointer, verticalLineArray) => {
+  let closestLine = null
+  let minDistance = Infinity
+
+  verticalLineArray.forEach((line) => {
+    const distance = Math.abs(line.x1 - pointer.x) // Assuming horizontal lines have the same y1 and y2
+    if (distance < minDistance) {
+      minDistance = distance
+      closestLine = line
+    }
+  })
+
+  return closestLine
+}