Merge pull request 'dev' (#407) from dev into dev-deploy

Reviewed-on: #407

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

@@ -12,7 +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 [filledInput, setFilledInput] = useState('')
+  const [filledInput, setFilledInput] = useState('100')
   const currentObject = useRecoilValue(currentObjectState)
   const handleFocus = () => {
     if (currentObject === null) {
@@ -71,7 +71,6 @@ export default function Updown({ UP_DOWN_REF }) {
               <input
                 type="text"
                 className="input-origin block"
-                defaultValue={100}
                 ref={UP_DOWN_REF.FILLED_INPUT_REF}
                 value={filledInput}
                 onFocus={handleFocus}

src/hooks/roofcover/useMovementSetting.js

@@ -245,19 +245,17 @@ export function useMovementSetting(id) {
   let currentCalculatedValue = 0
 
   const mouseMoveEvent = (e) => {
-
+    //console.log('mouseMoveEvent:::::',e)
     const target = canvas.getActiveObject()
     if (!target) return
 
     // 디버깅 로그 추가
-    if (typeRef.current === TYPE.UP_DOWN) {
+    // if (typeRef.current === TYPE.UP_DOWN) {
-      console.log('UP_DOWN_REF.POINTER_INPUT_REF.current:', UP_DOWN_REF.POINTER_INPUT_REF.current);
+    //   console.log('UP_DOWN_REF.POINTER_INPUT_REF.current:', UP_DOWN_REF.POINTER_INPUT_REF.current);
-      if (!UP_DOWN_REF.POINTER_INPUT_REF.current) {
+    //   if (!UP_DOWN_REF.POINTER_INPUT_REF.current) {
-        console.warn('UP_DOWN_REF.POINTER_INPUT_REF.current is null/undefined');
+    //     console.warn('UP_DOWN_REF.POINTER_INPUT_REF.current is null/undefined');
-      }
+    //   }
-    }
+    // }
-
-
 
     const { top: targetTop, left: targetLeft } = target
     const currentX = Big(getIntersectMousePoint(e).x)
@@ -286,14 +284,32 @@ export function useMovementSetting(id) {
       const midX = Big(target.x1).plus(target.x2).div(2)
       const midY = Big(target.y1).plus(target.y2).div(2)
       const wall = canvas.getObjects().find((obj) => obj.id === target.attributes.wallId)
-      let checkPoint
 
+      let linePosition = classifyWallLine(wall, target).position;
 
       if (target.y1 === target.y2) {  //수평벽
+
+        const setRadioStates = (isUp) => {
+          if (UP_DOWN_REF.UP_RADIO_REF.current) {
+            UP_DOWN_REF.UP_RADIO_REF.current.checked = isUp;
+          }
+          if (UP_DOWN_REF.DOWN_RADIO_REF.current) {
+            UP_DOWN_REF.DOWN_RADIO_REF.current.checked = !isUp;
+          }
+        };
+
+        if (linePosition === 'top') {
+          setRadioStates(value.s !== -1);
+        } else if (linePosition === 'bottom') {
+          setRadioStates(value.s !== 1);
+        }
+
+
+        /*
         checkPoint = { x: midX.toNumber(), y: midY.plus(10).toNumber() }
         if (wall.inPolygon(checkPoint)) { //선택라인이 내부
-          if (value.s !== -1) {
+          if (value.s === -1) {
-            console.log('-1value:::', value.s)
+            console.log('1value:::', value.s)
             if (UP_DOWN_REF.UP_RADIO_REF.current) UP_DOWN_REF.UP_RADIO_REF.current.checked = false
             if (UP_DOWN_REF.DOWN_RADIO_REF.current) UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true
           } else {
@@ -302,7 +318,7 @@ export function useMovementSetting(id) {
           }
         } else {  //
           if (value.s === 1) { //선택라인이 외부
-            console.log('+1value:::', value.s)
+            console.log('2value:::', value.s)
             if (UP_DOWN_REF.UP_RADIO_REF.current) UP_DOWN_REF.UP_RADIO_REF.current.checked = false
             if (UP_DOWN_REF.DOWN_RADIO_REF.current) UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true
           } else {
@@ -310,18 +326,38 @@ export function useMovementSetting(id) {
             if (UP_DOWN_REF.DOWN_RADIO_REF.current) UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false
           }
         }
+         */
       } else {
+
+        const setRadioStates = (isUp) => {
+          if (UP_DOWN_REF.UP_RADIO_REF.current) {
+            UP_DOWN_REF.UP_RADIO_REF.current.checked = isUp;
+          }
+          if (UP_DOWN_REF.DOWN_RADIO_REF.current) {
+            UP_DOWN_REF.DOWN_RADIO_REF.current.checked = !isUp;
+          }
+        };
+
+        if (linePosition === 'left') {
+          setRadioStates(value.s !== 1);
+        } else if (linePosition === 'right') {
+          setRadioStates(value.s !== -1);
+        }
+        /*
         checkPoint = { x: midX.plus(10).toNumber(), y: midY.toNumber() }
         if (wall.inPolygon(checkPoint)) {
-          if (value.s !== 1) {
+          if (value.s === 1) {
+            console.log('3value:::', value.s)
             if (UP_DOWN_REF.UP_RADIO_REF.current) UP_DOWN_REF.UP_RADIO_REF.current.checked = false
             if (UP_DOWN_REF.DOWN_RADIO_REF.current) UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true
           } else {
             if (UP_DOWN_REF.UP_RADIO_REF.current) UP_DOWN_REF.UP_RADIO_REF.current.checked = true
             if (UP_DOWN_REF.DOWN_RADIO_REF.current) UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false
+
           }
         } else {
           if (value.s === -1) {
+            console.log('-1value:::', value.s)
             if (UP_DOWN_REF.UP_RADIO_REF.current) UP_DOWN_REF.UP_RADIO_REF.current.checked = false
             if (UP_DOWN_REF.DOWN_RADIO_REF.current) UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true
           } else {
@@ -329,6 +365,7 @@ export function useMovementSetting(id) {
             if (UP_DOWN_REF.DOWN_RADIO_REF.current) UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false
           }
         }
+         */
       }
     }
   }
@@ -406,6 +443,7 @@ export function useMovementSetting(id) {
     roof.moveSelectLine = target;
     const wall = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.WALL && obj.attributes.roofId === roofId)
     const baseLines = wall.baseLines
+    let centerPoint = wall.getCenterPoint();
     let targetBaseLines = []
     let isGableRoof
     if (typeRef.current === TYPE.FLOW_LINE) {
@@ -544,6 +582,7 @@ export function useMovementSetting(id) {
         value = value.neg()
       }
     } else {
+      console.log("error::", UP_DOWN_REF)
       value =
         UP_DOWN_REF.FILLED_INPUT_REF.current.value !== ''
           ? Big(UP_DOWN_REF.FILLED_INPUT_REF.current.value)
@@ -566,15 +605,33 @@ export function useMovementSetting(id) {
       // } else if (UP_DOWN_REF.DOWN_RADIO_REF.current.checked && !inPolygon) {
       //   value = value.neg()
       // }
-      if (UP_DOWN_REF.DOWN_RADIO_REF.current.checked){
-        value = value.neg()
-      }
     }
+
+    let linePosition = classifyWallLine(wall, target).position;
+
+
     value = value.div(10)
     targetBaseLines
       .filter((line) => Math.sqrt(Math.pow(line.line.x2 - line.line.x1, 2) + Math.pow(line.line.y2 - line.line.y1, 2)) >= 1)
       .forEach((target) => {
         const currentLine = target.line
+
+        //console.log("linePosition::::::::::::::", linePosition)
+        if (UP_DOWN_REF.DOWN_RADIO_REF.current.checked ){
+          //position확인
+          if(linePosition === 'bottom' || linePosition === 'right') {
+            //console.log("1value::::::::::::::", value.toString())
+            value = value.neg()
+
+          }
+        }else {
+          if(linePosition === 'top' || linePosition === 'left') {
+            //console.log("1value::::::::::::::", value.toString())
+            value = value.neg()
+          }
+        }
+
+        //console.log("2value::::::::::::::", value.toString())
         const index = baseLines.findIndex((line) => line === currentLine)
         const nextLine = baseLines[(index + 1) % baseLines.length]
         const prevLine = baseLines[(index - 1 + baseLines.length) % baseLines.length]
@@ -627,6 +684,55 @@ export function useMovementSetting(id) {
     closePopup(id)
   }
 
+  // javascript
+  const classifyWallLine = (wall, line, epsilon = 0.5, offset = 10)=>  {
+    if (!wall || !line) return { orientation: 'unknown', position: 'unknown' }
+
+    const center = wall.getCenterPoint()
+    const dx = Math.abs(line.x2 - line.x1)
+    const dy = Math.abs(line.y2 - line.y1)
+
+    let orientation = 'slanted'
+    if (dy < epsilon && dx >= epsilon) orientation = 'horizontal'
+    else if (dx < epsilon && dy >= epsilon) orientation = 'vertical'
+    else orientation = dx > dy ? 'horizontal' : 'vertical'
+
+    const midX = (line.x1 + line.x2) / 2
+    const midY = (line.y1 + line.y2) / 2
+
+    // checkPoint: mid에서 center 방향으로 약간 이동한 점을 계산
+    let checkX = midX
+    let checkY = midY
+    if (orientation === 'horizontal') {
+      const dir = Math.sign(center.y - midY) || 1
+      checkY = midY + dir * offset
+    } else if (orientation === 'vertical') {
+      const dir = Math.sign(center.x - midX) || 1
+      checkX = midX + dir * offset
+    } else {
+      const dirX = Math.sign(center.x - midX) || 1
+      const dirY = Math.sign(center.y - midY) || 1
+      checkX = midX + dirX * offset
+      checkY = midY + dirY * offset
+    }
+
+    const inside = typeof wall.inPolygon === 'function' ? wall.inPolygon({ x: checkX, y: checkY }) : true
+
+    let position = 'unknown'
+    if (orientation === 'horizontal') {
+      const dir = center.y - midY
+      if (inside) position = dir > 0 ? 'top' : 'bottom'
+      else position = dir > 0 ? 'bottom' : 'top'
+    } else if (orientation === 'vertical') {
+      const dir = center.x - midX
+      if (inside) position = dir > 0 ? 'left' : 'right'
+      else position = dir > 0 ? 'right' : 'left'
+    }
+
+    return { orientation, position, mid: { x: midX, y: midY }, center, checkPoint: { x: checkX, y: checkY }, inside }
+  }
+
+
   return {
     TYPE,
     closePopup,
@@ -636,5 +742,7 @@ export function useMovementSetting(id) {
     FLOW_LINE_REF,
     UP_DOWN_REF,
     handleSave,
+    classifyWallLine
   }
 }
+