동선이동 수정

src/hooks/roofcover/useMovementSetting.js

@@ -41,14 +41,31 @@ export function useMovementSetting(id) {
 
   useEffect(() => {
     typeRef.current = type
-  }, [type])
+    const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
-
+    outerLines.forEach((line) => {
-  useEffect(() => {
+      line.set({ stroke: 'black' })
-    const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL) // 기존 wallLine의 visible false
-    wallLines.forEach((line) => {
       line.set({ visible: false })
     })
-
+    canvas.getObjects().forEach((obj) => {
+      obj.set({ selectable: false })
+    })
+    const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) // 기존 wallLine의 visible false
+    roofs.forEach((roof) => {
+      roof.innerLines.forEach((line) => {
+        line.bringToFront()
+        line.set({ selectable: false })
+        line.set({ strokeWidth: 1 })
+      })
+    })
+    if (type === TYPE.FLOW_LINE) {
+      roofs.forEach((roof) => {
+        roof.innerLines.forEach((line) => {
+          line.bringToFront()
+          line.set({ selectable: true })
+          line.set({ strokeWidth: 4 })
+        })
+      })
+    } else if (type === TYPE.UP_DOWN) {
       const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
       outerLines.forEach((line) => {
         line.set({ stroke: 'black' })
@@ -56,6 +73,15 @@ export function useMovementSetting(id) {
         line.bringToFront()
         line.set({ selectable: true })
       })
+    }
+    canvas.renderAll()
+  }, [type])
+
+  useEffect(() => {
+    /*const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL) // 기존 wallLine의 visible false
+    wallLines.forEach((line) => {
+      line.set({ visible: false })
+    })*/
 
     canvas.renderAll()
     addCanvasMouseEventListener('mouse:move', mouseMoveEvent)
@@ -65,6 +91,13 @@ export function useMovementSetting(id) {
       wallLines.forEach((line) => {
         line.set({ visible: true })
       })
+
+      const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
+      outerLines.forEach((line) => {
+        line.set({ stroke: 'black' })
+        line.set({ visible: false })
+      })
+
       canvas.renderAll()
     }
   }, [])
@@ -108,7 +141,45 @@ export function useMovementSetting(id) {
       updownEvent(e)
     }
   }
-  const flowLineEvent = (e) => {}
+  const flowLineEvent = (e) => {
+    const target = canvas.getActiveObject()
+    if (!target) {
+      return
+    }
+    const direction = target.direction
+    const { top: targetTop, left: targetLeft } = target
+    const currentX = canvas.getPointer(e.e).x
+    const currentY = Math.floor(canvas.getPointer(e.e).y)
+
+    if (direction === 'left' || direction === 'right') {
+      if (targetTop > currentY) {
+        console.log('targetTop > currentY')
+        FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = true
+        FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = ''
+
+        FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
+      } else {
+        FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked = true
+        FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = ''
+
+        FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
+      }
+    } else {
+      if (targetLeft > currentX) {
+        FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked = true
+        FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = ''
+
+        FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
+      } else {
+        FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = true
+        FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = ''
+
+        FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
+      }
+    }
+
+    canvas?.renderAll()
+  }
 
   const updownEvent = (e) => {
     const target = canvas.getActiveObject()