정리

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

@@ -1,8 +1,7 @@
 import { useMessage } from '@/hooks/useMessage'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
-import { useEvent } from '@/hooks/useEvent'
-import { canvasState } from '@/store/canvasAtom'
 import { useRecoilValue } from 'recoil'
+import { currentObjectState } from '@/store/canvasAtom'
 
 const UP_DOWN_TYPE = {
   UP: 'up',
@@ -12,17 +11,18 @@ 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)
+  const [filledInput, setFilledInput] = useState('')
-
+  const currentObject = useRecoilValue(currentObjectState)
-  useEffect(() => {
+  const handleFocus = () => {
-    if (type === UP_DOWN_TYPE.UP) {
+    if (currentObject === null) {
-      UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''
+      UP_DOWN_REF.FILLED_INPUT_REF.current.value = ''
-      UP_DOWN_REF.UP_INPUT_REF.current.focus()
+      UP_DOWN_REF.FILLED_INPUT_REF.current.blur()
-    } else {
-      UP_DOWN_REF.UP_INPUT_REF.current.value = ''
-      UP_DOWN_REF.DOWN_INPUT_REF.current.focus()
     }
-  }, [type])
+  }
+  const handleInput = (e) => {
+    const value = e.target.value.replace(/^0+/, '')
+    setFilledInput(value.replace(/[^0-9]/g, ''))
+  }
 
   return (
     <>
@@ -48,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={true} 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>
@@ -71,7 +71,14 @@ 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.DOWN} ref={UP_DOWN_REF.DOWN_INPUT_REF} />
+                  <input
+                    type="text"
+                    className="input-origin block"
+                    ref={UP_DOWN_REF.FILLED_INPUT_REF}
+                    value={filledInput}
+                    onFocus={handleFocus}
+                    onChange={handleInput}
+                  />
                 </div>
                 <span className="thin">mm</span>
               </div>

src/hooks/roofcover/useMovementSetting.js

@@ -31,15 +31,13 @@ export function useMovementSetting(id) {
   const { swalFire } = useSwal()
 
   const FLOW_LINE_REF = {
-    POINTER_INPUT_REF: useRef(null),
     FILLED_INPUT_REF: useRef(null),
     DOWN_LEFT_RADIO_REF: useRef(null),
     UP_RIGHT_RADIO_REF: useRef(null),
   }
 
   const UP_DOWN_REF = {
-    UP_INPUT_REF: useRef(null),
+    FILLED_INPUT_REF: useRef(null),
-    DOWN_INPUT_REF: useRef(null),
     UP_RADIO_REF: useRef(null),
     DOWN_RADIO_REF: useRef(null),
   }
@@ -138,6 +136,32 @@ export function useMovementSetting(id) {
   }, [])
 
   useEffect(() => {
+    console.log('selectedObject.current : ', selectedObject.current)
+    if (selectedObject.current != null) {
+      let wallStroke
+      switch (selectedObject.current.attributes.type) {
+        case LINE_TYPE.WALLLINE.EAVES:
+          wallStroke = '#45CD7D'
+          break
+        case LINE_TYPE.WALLLINE.HIPANDGABLE:
+          wallStroke = '#45CD7D'
+          break
+        case LINE_TYPE.WALLLINE.GABLE:
+          wallStroke = '#3FBAE6'
+          break
+        case LINE_TYPE.WALLLINE.JERKINHEAD:
+          wallStroke = '#3FBAE6'
+          break
+        case LINE_TYPE.WALLLINE.SHED:
+          wallStroke = '#000000'
+          break
+        case LINE_TYPE.WALLLINE.WALL:
+          wallStroke = '#000000'
+          break
+      }
+      selectedObject.current.set({ stroke: wallStroke })
+      selectedObject.current.bringToFront()
+    }
     selectedObject.current = null
     if (!currentObject) {
       return
@@ -159,8 +183,7 @@ export function useMovementSetting(id) {
       FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = false
     }
     if (type === TYPE.UP_DOWN) {
-      UP_DOWN_REF.UP_INPUT_REF.current.value = ''
+      UP_DOWN_REF.FILLED_INPUT_REF.current.value = ''
-      UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''
       UP_DOWN_REF.UP_RADIO_REF.current.checked = true
       UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false
     }
@@ -170,7 +193,7 @@ export function useMovementSetting(id) {
     if (typeRef.current === TYPE.FLOW_LINE) {
       saveFlowLine(e)
     } else {
-      updownDownEvent(e)
+      saveUpDownLine(e)
     }
   }
 
@@ -370,6 +393,129 @@ export function useMovementSetting(id) {
     FLOW_LINE_REF.FILLED_INPUT_REF.current.value = ''
   }
 
+  //형 올림내림 마우스 클릭 이벤트
+  const saveUpDownLine = (e) => {
+    const target = selectedObject.current
+    if (!target) {
+      return
+    }
+
+    const roof = canvas.getObjects().find((obj) => obj.id === target.attributes.roofId)
+    const wallLines = roof.wall.lines
+    const roofLines = roof.lines
+    const currentWall = wallLines.find((line) => line.id === target.attributes.currentWall)
+    let prevWall, nextWall
+    let prevEave, nextEave
+
+    wallLines.forEach((wallLine, index) => {
+      if (wallLine.id === currentWall.id) {
+        prevWall = index === 0 ? wallLines[wallLines.length - 1] : wallLines[index - 1]
+        nextWall = index === wallLines.length - 1 ? wallLines[0] : wallLines[index + 1]
+      }
+    })
+
+    const eaves = roofLines.filter((line) => line.attributes?.type === LINE_TYPE.WALLLINE.EAVES)
+
+    wallLines
+      .filter((line) => line.attributes.type === LINE_TYPE.WALLLINE.EAVES)
+      .forEach((eave, index) => {
+        if (eave.id === currentWall.id) {
+          prevEave = index === 0 ? eaves[eaves.length - 1] : eaves[index - 1]
+          nextEave = index === eaves.length - 1 ? eaves[0] : eaves[index + 1]
+        }
+      })
+
+    const currentRoof = roofLines.find((line) => line.id === target.attributes.currentRoof)
+    const currentRidges = roof.innerLines.filter(
+      (line) => line.name === LINE_TYPE.SUBLINE.RIDGE && line.attributes.currentRoof.includes(currentRoof.id),
+    )
+    /*const prevWallRidges = roof.innerLines.filter(
+      (line) => line.name === LINE_TYPE.SUBLINE.RIDGE && line.attributes.currentRoof.includes(prevEave.id),
+    )
+    const nextWallRidges = roof.innerLines.filter(
+      (line) => line.name === LINE_TYPE.SUBLINE.RIDGE && line.attributes.currentRoof.includes(nextEave.id),
+    )
+    //라인 확인 작업
+    /!* const roofLine = new fabric.Line([currentRoof.x1, currentRoof.y1, currentRoof.x2, currentRoof.y2], {
+      stroke: 'red',
+      strokeWidth: 5,
+      selectable: false,
+    })
+    canvas.add(roofLine)
+
+    const prevEaves = new fabric.Line([prevEave.x1, prevEave.y1, prevEave.x2, prevEave.y2], {
+      stroke: 'yellow',
+      strokeWidth: 5,
+      selectable: false,
+    })
+    canvas.add(prevEaves)
+    currentRidges.forEach((ridge) => ridge.set({ stroke: 'purple', strokeWidth: 5 }))
+    prevWallRidges.forEach((ridge) => ridge.set({ stroke: 'yellow', strokeWidth: 5 }))
+    nextWallRidges.forEach((ridge) => ridge.set({ stroke: 'green', strokeWidth: 5 }))
+    canvas.renderAll()*!/*/
+
+    console.log(
+      'UP/DOWN',
+      UP_DOWN_REF.UP_RADIO_REF.current.checked,
+      UP_DOWN_REF.DOWN_RADIO_REF.current.checked,
+      UP_DOWN_REF.FILLED_INPUT_REF.current.value,
+    )
+
+    let compareLine
+    if (Math.sign(currentRoof.x1 - currentRoof.x2) === 0) {
+      const currentDiff = currentRidges[0].x1 - currentRoof.x1
+      const prevDiff = prevEave.x1 - currentRoof.x1
+      const nextDiff = nextEave.x1 - currentRoof.x1
+
+      console.log('currentDiff', Math.sign(currentDiff), currentDiff)
+
+      if (UP_DOWN_REF.UP_RADIO_REF.current.checked) {
+        if (Math.sign(currentDiff) === 1) {
+        } else {
+          if (Math.sign(prevDiff) === 1 && Math.sign(nextDiff) === 1) {
+          } else {
+          }
+        }
+      } else {
+        if (Math.sign(currentDiff) === -1) {
+        } else {
+          if (Math.sign(prevDiff) === -1 && Math.sign(nextDiff) === -1) {
+          } else {
+          }
+        }
+      }
+    } else {
+      const currentDiff = currentRidges[0].y1 - currentRoof.y1
+      const prevDiff = prevEave.y1 - currentRoof.y1
+      const nextDiff = nextEave.y1 - currentRoof.y1
+
+      if (UP_DOWN_REF.UP_RADIO_REF.current.checked) {
+        if (Math.sign(currentDiff) === 1) {
+        } else {
+          if (Math.sign(prevDiff) === 1 && Math.sign(nextDiff) === 1) {
+          } else {
+          }
+        }
+      } else {
+        if (Math.sign(currentDiff) === -1) {
+        } else {
+          if (Math.sign(prevDiff) === -1 && Math.sign(nextDiff) === -1) {
+          } else {
+          }
+        }
+      }
+    }
+
+    //확인
+    /*const compareRoofLine = new fabric.Line([compareRoof.x1, compareRoof.y1, compareRoof.x2, compareRoof.y2], {
+      stroke: 'red',
+      strokeWidth: 5,
+      selectable: false,
+    })
+    canvas.add(compareRoofLine)
+    canvas.renderAll()*/
+  }
+
   const redrawSeparatePolygon = (roof) => {
     roof.separatePolygon.forEach((polygon) => canvas.remove(polygon))
     roof.separatePolygon = []
@@ -752,10 +898,6 @@ export function useMovementSetting(id) {
     console.log('ridges : ', ridges)
   }
 
-  //형 올림내림 마우스 클릭 이벤트
-  const updownDownEvent = (e) => {
-    console.log('updownDownEvent')
-  }
   const flowLineMoveEvent = (e) => {
     const target = canvas.getActiveObject()
     if (!target) {
@@ -791,34 +933,25 @@ export function useMovementSetting(id) {
     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 (Math.sign(target.x1 - target.x2) !== 0) {
       if (targetTop > currentY) {
         UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true
-        UP_DOWN_REF.UP_INPUT_REF.current.value = ''
+        UP_DOWN_REF.FILLED_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
-
-        UP_DOWN_REF.DOWN_INPUT_REF.current.value = Math.floor((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.FILLED_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
-
-        UP_DOWN_REF.UP_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
       }
     } else {
       if (targetLeft > currentX) {
         UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true
-        UP_DOWN_REF.UP_INPUT_REF.current.value = ''
+        UP_DOWN_REF.FILLED_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
-
-        UP_DOWN_REF.DOWN_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 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.FILLED_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
-
-        UP_DOWN_REF.UP_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
       }
     }
 
@@ -829,14 +962,7 @@ export function useMovementSetting(id) {
     if (type === TYPE.FLOW_LINE) {
       saveFlowLine()
     } else {
-      // 형 올림내림
+      saveUpDownLine()
-      if (UP_DOWN_REF.UP_RADIO_REF.current.checked) {
-        // 자릿수를 올리다 체크
-        const length = Number(UP_DOWN_REF.UP_INPUT_REF.current.value)
-      } else {
-        // 자릿수를 내리다 체크
-        const length = Number(UP_DOWN_REF.DOWN_INPUT_REF.current.value)
-      }
     }
   }
 

src/hooks/useMode.js

@@ -1763,6 +1763,8 @@ export function useMode() {
     roof.name = POLYGON_TYPE.ROOF
     roof.setWall(wall)
 
+    console.log('roof.lines : ', roof.lines)
+
     roof.lines.forEach((line, index) => {
       const lineLength = Math.sqrt(
         Math.pow(Math.round(Math.abs(line.x1 - line.x2) * 10), 2) + Math.pow(Math.round(Math.abs(line.y1 - line.y2) * 10), 2),
@@ -1826,7 +1828,7 @@ export function useMode() {
       }
       const wallLine = new fabric.Line([line.x1, line.y1, line.x2, line.y2], {
         name: 'wallLine',
-        attributes: { wallId: wall.id, roofId: roof.id },
+        attributes: { wallId: wall.id, roofId: roof.id, type: line.attributes.type, currentRoof: line.attributes.currentRoof, currentWall: line.id },
         stroke: wallStroke,
         strokeWidth: wallStrokeWidth,
         selectable: false,

src/util/qpolygon-utils.js

@@ -321,7 +321,6 @@ export const drawGabledRoof = (roofId, canvas) => {
       eaves.push({ index: index, roof: currentRoof, length: currentRoof.attributes.planeSize })
     }
   })
-  const ridgeCount = eaves.length - 1
   const ridges = []
   eaves.sort((a, b) => a.length - b.length)
 
@@ -345,8 +344,6 @@ export const drawGabledRoof = (roofId, canvas) => {
         }
       }) // 현재 벽라인과 직교하는 벽라인
 
-    console.log('oppositeLine', oppositeLine)
-
     // 현재 벽라인과 직교하는 벽라인 사이에 마루를 그린다.
     oppositeLine.forEach((line) => {
       let points // 마루의 시작점과 끝점
@@ -487,7 +484,6 @@ export const drawGabledRoof = (roofId, canvas) => {
         }
       } else {
         const lastPoint = sortedPoints[sortedPoints.length - 1]
-        console.log('lastPoint', lastPoint)
         const prevPoint = sortedPoints[sortedPoints.length - 2]
         const otherPoints = points.filter((point) => sortedPoints.includes(point) === false)
         const nextPoint = otherPoints.reduce((prev, current) => {