From 23e9d0d12afd5517a18a12370dca2ca3984d4b27 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Fri, 20 Sep 2024 17:33:05 +0900
Subject: [PATCH] =?UTF-8?q?=EC=99=B8=EB=B2=BD=EC=84=A0=EC=9E=91=EC=84=B1?=
 =?UTF-8?q?=20=EA=B0=81=EB=8F=84=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/floor-plan/MenuDepth01.jsx     |   4 +-
 .../modal/outerlinesetting/OuterLineWall.jsx  | 119 +++++++++++++++++-
 2 files changed, 116 insertions(+), 7 deletions(-)

diff --git a/src/components/floor-plan/MenuDepth01.jsx b/src/components/floor-plan/MenuDepth01.jsx
index 98ea5d2b..ab3c4b5d 100644
--- a/src/components/floor-plan/MenuDepth01.jsx
+++ b/src/components/floor-plan/MenuDepth01.jsx
@@ -13,7 +13,7 @@ export default function MenuDepth01(props) {
   const [activeMenu, setActiveMenu] = useState()
   const setCurrentMenu = useSetRecoilState(currentMenuState)
   const onClickMenu = ({ id, menu, name }) => {
-    setActiveMenu(id)
+    setActiveMenu(menu)
     setShowOutlineModal(menu === MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
     setCurrentMenu(menu)
   }
@@ -59,7 +59,7 @@ export default function MenuDepth01(props) {
       <ul className="canvas-depth2-list">
         {menuInfo[type].map((menu) => {
           return (
-            <li key={menu.id} className={`canvas-depth2-item ${menu.id === activeMenu ? 'active' : ''}`}>
+            <li key={menu.id} className={`canvas-depth2-item ${menu.menu === activeMenu ? 'active' : ''}`}>
               <button onClick={() => onClickMenu(menu)}>{getMessage(menu.name)}</button>
             </li>
           )
diff --git a/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx b/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx
index 229bf54c..0548c73c 100644
--- a/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx
+++ b/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx
@@ -8,6 +8,7 @@ import { useEvent } from '@/hooks/useEvent'
 import { canvasState, verticalHorizontalModeState } from '@/store/canvasAtom'
 import {
   OUTER_LINE_TYPE,
+  outerLineAngle1State,
   outerLineArrow1State,
   outerLineArrow2State,
   outerLineLength1State,
@@ -18,6 +19,7 @@ import {
 import { QLine } from '@/components/fabric/QLine'
 import { useLine } from '@/hooks/useLine'
 import { distanceBetweenPoints } from '@/util/canvas-util'
+import { calculateAngle } from '@/util/qpolygon-utils'
 
 export default function OuterLineWall(props) {
   const { setShowOutlineModal } = props
@@ -29,6 +31,7 @@ export default function OuterLineWall(props) {
 
   const length1Ref = useRef(null)
   const length2Ref = useRef(null)
+  const angle1Ref = useRef(null)
   const [length1, setLength1] = useRecoilState(outerLineLength1State)
   const [length2, setLength2] = useRecoilState(outerLineLength2State)
   const [arrow1, setArrow1] = useRecoilState(outerLineArrow1State)
@@ -38,6 +41,8 @@ export default function OuterLineWall(props) {
   const arrow1Ref = useRef(arrow1)
   const arrow2Ref = useRef(arrow2)
 
+  const [angle1, setAngle1] = useRecoilState(outerLineAngle1State)
+
   const canvas = useRecoilValue(canvasState)
 
   useEffect(() => {
@@ -168,6 +173,24 @@ export default function OuterLineWall(props) {
       }
 
       if (lastPoint.x === firstPoint.x || lastPoint.y === firstPoint.y) {
+        let isAllRightAngle = true
+
+        const firstPoint = points[0]
+
+        points.forEach((point, idx) => {
+          if (idx === 0 || !isAllRightAngle) {
+            return
+          }
+
+          const angle = calculateAngle(point, firstPoint)
+          if (angle % 90 !== 0) {
+            isAllRightAngle = false
+          }
+        })
+
+        if (isAllRightAngle) {
+          return
+        }
         const line = new QLine([lastPoint.x, lastPoint.y, firstPoint.x, firstPoint.y], {
           stroke: 'grey',
           strokeWidth: 1,
@@ -178,7 +201,12 @@ export default function OuterLineWall(props) {
         canvas?.add(line)
         addLineText(line)
       } else {
-        const guideLine1 = new QLine([lastPoint.x, lastPoint.y, lastPoint.x, firstPoint.y], {
+        const nearPoint =
+          distanceBetweenPoints(firstPoint, { x: lastPoint.x, y: firstPoint.y }) <=
+          distanceBetweenPoints(firstPoint, { x: firstPoint.x, y: lastPoint.y })
+            ? [lastPoint.x, lastPoint.y, lastPoint.x, firstPoint.y]
+            : [lastPoint.x, lastPoint.y, firstPoint.x, lastPoint.y]
+        const guideLine1 = new QLine(nearPoint, {
           stroke: 'grey',
           strokeWidth: 1,
           strokeDashArray: [1, 1, 1],
@@ -427,7 +455,25 @@ export default function OuterLineWall(props) {
       console.log('leegubae')
     },
     angle: (e) => {
-      console.log('angle')
+      const key = e.key
+      switch (key) {
+        case 'Enter': {
+          setPoints((prev) => {
+            if (prev.length === 0) {
+              return []
+            }
+            const lastPoint = prev[prev.length - 1]
+            const length = length1Ref.current.value / 10
+            const angle = angle1Ref.current.value
+            //lastPoint로부터 angle1만큼의 각도로 length1만큼의 길이를 가지는 선을 그림
+            const radian = (angle * Math.PI) / 180
+
+            const x = lastPoint.x + length * Math.cos(radian)
+            const y = lastPoint.y - length * Math.sin(radian)
+            return [...prev, { x, y }]
+          })
+        }
+      }
     },
     diagonalLine: (e) => {
       console.log('diagonalLine')
@@ -446,6 +492,27 @@ export default function OuterLineWall(props) {
     if (points.length < 3) {
       return
     }
+
+    let isAllRightAngle = true
+
+    const firstPoint = points[0]
+
+    points.forEach((point, idx) => {
+      if (idx === 0 || !isAllRightAngle) {
+        return
+      }
+
+      const angle = calculateAngle(point, firstPoint)
+      if (angle % 90 !== 0) {
+        isAllRightAngle = false
+      }
+    })
+
+    if (isAllRightAngle) {
+      alert('부정확한 다각형입니다.')
+      return
+    }
+
     setPoints((prev) => {
       if (prev.length === 0) {
         return []
@@ -453,6 +520,7 @@ export default function OuterLineWall(props) {
       return [...prev, { x: prev[0].x, y: prev[0].y }]
     })
   }
+
   return (
     <WithDraggable isShow={true} pos={{ x: 50, y: -1000 + 50 }}>
       <div className={`modal-pop-wrap ssm`}>
@@ -505,7 +573,8 @@ export default function OuterLineWall(props) {
                     value={length1}
                     ref={length1Ref}
                     onChange={(e) => {
-                      setLength1(e.target.value.replace(/[^-0-9]/g, ''))
+                      const value = e.target.value.replace(/^0+/, '')
+                      setLength1(value.replace(/[^-0-9]/g, ''))
                     }}
                     placeholder="3000"
                   />
@@ -525,7 +594,8 @@ export default function OuterLineWall(props) {
                     value={length1}
                     ref={length1Ref}
                     onChange={(e) => {
-                      setLength1(e.target.value.replace(/[^-0-9]/g, ''))
+                      const value = e.target.value.replace(/^0+/, '')
+                      setLength1(value.replace(/[^-0-9]/g, ''))
                     }}
                     placeholder="3000"
                   />
@@ -542,7 +612,8 @@ export default function OuterLineWall(props) {
                     value={length2}
                     ref={length2Ref}
                     onChange={(e) => {
-                      setLength2(e.target.value.replace(/[^-0-9]/g, ''))
+                      const value = e.target.value.replace(/^0+/, '')
+                      setLength2(value.replace(/[^-0-9]/g, ''))
                     }}
                     placeholder="3000"
                   />
@@ -552,6 +623,44 @@ export default function OuterLineWall(props) {
                   <input type="text" readOnly={true} value={arrow2} className="input-origin block" />
                 </div>
               </div>
+            ) : type === OUTER_LINE_TYPE.ANGLE ? (
+              <div className="outer-line-wrap">
+                <div className="form-input">
+                  <label htmlFor="">{getMessage('modal.cover.outline.length')}</label>
+                  <input
+                    type="text"
+                    className="input-origin block"
+                    value={length1}
+                    ref={length1Ref}
+                    onChange={(e) => {
+                      const value = e.target.value.replace(/^0+/, '')
+                      setLength1(value.replace(/[^-0-9]/g, ''))
+                    }}
+                    placeholder="3000"
+                  />
+                </div>
+                <div className="form-input">
+                  <label htmlFor="">{getMessage('modal.cover.outline.angle')}</label>
+                  <input
+                    type="text"
+                    value={angle1}
+                    ref={angle1Ref}
+                    onChange={(e) => {
+                      const val = e.target.value
+                      // const pattern = /(^\d+$)|(^\d{1,}.\d{0,2}$)/
+                      const pattern = /^-?(\d{1,3}([.]\d{0,2})?)?$/
+                      if (!pattern.test(val)) {
+                        // prev에서 마지막 자리 제거
+                        setAngle1(val.slice(0, val.length - 1))
+                        return
+                      }
+
+                      setAngle1(val)
+                    }}
+                    className="input-origin block"
+                  />
+                </div>
+              </div>
             ) : (
               <></>
             )}