동선 이동 추가

src/hooks/roofcover/useMovementSetting.js

@@ -6,6 +6,7 @@ import { useEffect, useRef, useState } from 'react'
 import { useEvent } from '@/hooks/useEvent'
 import { POLYGON_TYPE } from '@/common/common'
 import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
+import { QLine } from '@/components/fabric/QLine'
 
 //동선이동 형 올림 내림
 export function useMovementSetting(id) {
@@ -18,6 +19,7 @@ export function useMovementSetting(id) {
   const { closePopup } = usePopup()
   const { getMessage } = useMessage()
   const currentObject = useRecoilValue(currentObjectState)
+  const selectedObject = useRef(null)
   const buttonType = [
     { id: 1, name: getMessage('modal.movement.flow.line.move'), type: TYPE.FLOW_LINE },
     { id: 2, name: getMessage('modal.movement.flow.line.updown'), type: TYPE.UP_DOWN },
@@ -40,6 +42,7 @@ export function useMovementSetting(id) {
   }
 
   useEffect(() => {
+    removeFlowLine()
     typeRef.current = type
     const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
     outerLines.forEach((line) => {
@@ -85,8 +88,10 @@ export function useMovementSetting(id) {
 
     canvas.renderAll()
     addCanvasMouseEventListener('mouse:move', mouseMoveEvent)
+    addCanvasMouseEventListener('mouse:down', mouseDownEvent)
     return () => {
       initEvent()
+      removeFlowLine()
       const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
       wallLines.forEach((line) => {
         line.set({ visible: true })
@@ -107,11 +112,14 @@ export function useMovementSetting(id) {
     outerLines.forEach((line) => {
       line.set({ stroke: 'black' })
     })
-    clearRef()
+    selectedObject.current = null
+
     if (!currentObject) {
       return
     }
 
+    clearRef()
+    selectedObject.current = currentObject
     if (currentObject.name === OUTER_LINE_TYPE.OUTER_LINE) {
       currentObject.set({ stroke: '#EA10AC' })
       currentObject.bringToFront()
@@ -134,14 +142,91 @@ export function useMovementSetting(id) {
     }
   }
 
-  const mouseMoveEvent = (e) => {
+  const mouseDownEvent = (e) => {
     if (typeRef.current === TYPE.FLOW_LINE) {
-      flowLineEvent(e)
+      flowLineDownEvent(e)
     } else {
-      updownEvent(e)
+      updownDownEvent(e)
     }
   }
-  const flowLineEvent = (e) => {
+
+  const removeFlowLine = () => {
+    const flowLine = canvas.getObjects().filter((obj) => obj.name === 'flowLine')
+    flowLine.forEach((line) => {
+      canvas.remove(line)
+    })
+  }
+
+  const mouseMoveEvent = (e) => {
+    if (typeRef.current === TYPE.FLOW_LINE) {
+      flowLineMoveEvent(e)
+    } else {
+      updownMoveEvent(e)
+    }
+  }
+  //동선 이동 마우스 클릭 이벤트
+  const flowLineDownEvent = (e) => {
+    const target = selectedObject.current
+    if (!target) {
+      return
+    }
+
+    const direction = target.direction
+
+    removeFlowLine()
+
+    let newPoint = []
+    if (direction === 'left' || direction === 'right') {
+      if (FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked) {
+        newPoint = [
+          target.x1,
+          target.y1 + Number(FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value / 10),
+          target.x2,
+          target.y2 + Number(FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value / 10),
+        ]
+      } else {
+        newPoint = [
+          target.x1,
+          target.y1 - Number(FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value / 10),
+          target.x2,
+          target.y2 - Number(FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value / 10),
+        ]
+      }
+    } else {
+      if (FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked) {
+        newPoint = [
+          target.x1 - Number(FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value / 10),
+          target.y1,
+          target.x2 - Number(FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value / 10),
+          target.y2,
+        ]
+      } else {
+        newPoint = [
+          target.x1 + Number(FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value / 10),
+          target.y1,
+          target.x2 + Number(FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value / 10),
+          target.y2,
+        ]
+      }
+    }
+
+    const cloned = new fabric.Line(newPoint, {
+      stroke: 'red',
+      strokeWidth: 4,
+      name: 'flowLine',
+      currentLine: target,
+    })
+
+    canvas.add(cloned)
+    canvas.renderAll()
+    canvas.discardActiveObject()
+  }
+
+  //형 올림내림 마우스 클릭 이벤트
+  const updownDownEvent = (e) => {
+    console.log('updownDownEvent')
+  }
+  const flowLineMoveEvent = (e) => {
     const target = canvas.getActiveObject()
     if (!target) {
       return
@@ -181,7 +266,7 @@ export function useMovementSetting(id) {
     canvas?.renderAll()
   }
 
-  const updownEvent = (e) => {
+  const updownMoveEvent = (e) => {
     const target = canvas.getActiveObject()
     if (!target) {
       return
@@ -222,12 +307,24 @@ export function useMovementSetting(id) {
 
   const handleSave = () => {
     if (type === TYPE.FLOW_LINE) {
-      // 동선이동
+      const flowLine = canvas.getObjects().find((obj) => obj.name === 'flowLine')
-      if (FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked) {
+
-        // 높이 변경: 아래, 왼쪽 체크
+      const currentLine = flowLine.currentLine
-      } else {
+      if (!flowLine || !currentLine) {
-        // 높이 변경: 위, 오른쪽 체크
+        return
       }
+
+      currentLine.set({
+        x1: flowLine.x1,
+        y1: flowLine.y1,
+        x2: flowLine.x2,
+        y2: flowLine.y2,
+      })
+      currentLine.startPoint = { x: flowLine.x1, y: flowLine.y1 }
+      currentLine.endPoint = { x: flowLine.x2, y: flowLine.y2 }
+
+      canvas.remove(flowLine)
+      canvas.renderAll()
     } else {
       // 형 올림내림
       if (UP_DOWN_REF.UP_RADIO_REF.current.checked) {