동선이동 - 형 올림내림

src/components/floor-plan/modal/movement/type/FlowLine.jsx

@@ -1,5 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 import { useEffect, useState } from 'react'
+import { useEvent } from '@/hooks/useEvent'
 
 const FLOW_LINE_TYPE = {
   DOWN_LEFT: 'downLeft',
@@ -44,12 +45,7 @@ export default function FlowLine({ FLOW_LINE_REF }) {
             <div className="eaves-keraba-td">
               <div className="outline-form">
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input
-                    type="text"
-                    className="input-origin block"
-                    readOnly={type !== FLOW_LINE_TYPE.DOWN_LEFT}
-                    ref={FLOW_LINE_REF.DOWN_LEFT_INPUT_REF}
-                  />
+                  <input type="text" className="input-origin block" readOnly={true} ref={FLOW_LINE_REF.DOWN_LEFT_INPUT_REF} />
                 </div>
               </div>
             </div>

src/components/floor-plan/modal/movement/type/Updown.jsx

@@ -1,5 +1,8 @@
 import { useMessage } from '@/hooks/useMessage'
 import { useEffect, useState } from 'react'
+import { useEvent } from '@/hooks/useEvent'
+import { canvasState } from '@/store/canvasAtom'
+import { useRecoilValue } from 'recoil'
 
 const UP_DOWN_TYPE = {
   UP: 'up',
@@ -9,6 +12,7 @@ const UP_DOWN_TYPE = {
 export default function Updown({ UP_DOWN_REF }) {
   const { getMessage } = useMessage()
   const [type, setType] = useState(UP_DOWN_TYPE.UP)
+  const canvas = useRecoilValue(canvasState)
 
   useEffect(() => {
     if (type === UP_DOWN_TYPE.UP) {
@@ -44,7 +48,7 @@ export default function Updown({ UP_DOWN_REF }) {
             <div className="eaves-keraba-td">
               <div className="outline-form">
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input type="text" className="input-origin block" readOnly={type !== UP_DOWN_TYPE.UP} ref={UP_DOWN_REF.UP_INPUT_REF} />
+                  <input type="text" className="input-origin block" readOnly={true} ref={UP_DOWN_REF.UP_INPUT_REF} />
                 </div>
               </div>
             </div>

src/hooks/roofcover/useMovementSetting.js

@@ -2,7 +2,8 @@ import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
 import { usePopup } from '@/hooks/usePopup'
 import { useMessage } from '@/hooks/useMessage'
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { useEvent } from '@/hooks/useEvent'
 
 //동선이동 형 올림 내림
 export function useMovementSetting(id) {
@@ -11,6 +12,7 @@ export function useMovementSetting(id) {
     UP_DOWN: 'updown', //형 올림내림
   }
   const canvas = useRecoilValue(canvasState)
+  const { initEvent, addCanvasMouseEventListener } = useEvent()
   const { closePopup } = usePopup()
   const { getMessage } = useMessage()
   const buttonType = [
@@ -18,6 +20,7 @@ export function useMovementSetting(id) {
     { id: 2, name: getMessage('modal.movement.flow.line.updown'), type: TYPE.UP_DOWN },
   ]
   const [type, setType] = useState(TYPE.FLOW_LINE)
+  const typeRef = useRef(type)
 
   const FLOW_LINE_REF = {
     DOWN_LEFT_INPUT_REF: useRef(null),
@@ -33,7 +36,93 @@ export function useMovementSetting(id) {
     DOWN_RADIO_REF: useRef(null),
   }
 
-  const handleSave = () => {}
+  useEffect(() => {
+    typeRef.current = type
+  }, [type])
+
+  useEffect(() => {
+    const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine') // 기존 wallLine의 visible false
+    wallLines.forEach((line) => {
+      line.set({ visible: false })
+    })
+    const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
+    outerLines.forEach((line) => {
+      line.bringToFront()
+      line.set({ selectable: true })
+    })
+
+    canvas.renderAll()
+    addCanvasMouseEventListener('mouse:move', mouseMoveEvent)
+    return () => {
+      initEvent()
+      const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
+      wallLines.forEach((line) => {
+        line.set({ visible: true })
+      })
+      canvas.renderAll()
+    }
+  }, [])
+
+  const mouseMoveEvent = (e) => {
+    if (typeRef.current === TYPE.FLOW_LINE) {
+      flowLineEvent(e)
+    } else {
+      updownEvent(e)
+    }
+  }
+  const flowLineEvent = (e) => {
+    console.log('flow')
+  }
+
+  const updownEvent = (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)
+    /*const allPoints = canvas
+      ?.getObjects()
+      .filter((obj) => obj.name === 'outerLine')
+      .map((obj) => {
+        return { x: obj.x1, y: obj.y1 }
+      })
+
+    const xArr = allPoints.map((point) => point.x)
+    const yArr = allPoints.map((point) => point.y)*/
+
+    if (direction === 'left' || direction === 'right') {
+      if (targetTop > currentY) {
+        UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true
+        UP_DOWN_REF.UP_INPUT_REF.current.value = ''
+
+        UP_DOWN_REF.DOWN_INPUT_REF.current.value = (Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000
+      } else {
+        UP_DOWN_REF.UP_RADIO_REF.current.checked = true
+        UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''
+
+        UP_DOWN_REF.UP_INPUT_REF.current.value = (Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000
+      }
+    }
+
+    canvas?.renderAll()
+  }
+
+  const getOnlyDecimal = function (_number, _length) {
+    let result
+
+    result = _number % 1
+
+    result = Number(result.toFixed(_length))
+
+    return result * 10
+  }
+
+  const handleSave = () => {
+    closePopup(id)
+  }
 
   return {
     TYPE,