src/components/floor-plan/modal/lineTypes/RightAngle.jsx

@@ -4,6 +4,18 @@ import { onlyNumberInputChange } from '@/util/input-utils'
 export default function RightAngle({ props }) {
   const { getMessage } = useMessage()
   const { length1, setLength1, length1Ref, length2, setLength2, length2Ref, arrow1, setArrow1, arrow2, setArrow2 } = props
+
+  const handleClickArrow = (arrow) => {
+    const arrowType = arrow === '↑' ? 'ArrowUp' : arrow === '↓' ? 'ArrowDown' : arrow === '←' ? 'ArrowLeft' : arrow === '→' ? 'ArrowRight' : ''
+    setArrow2(arrow)
+    const originLeng2Val = length2Ref.current.value
+    if (originLeng2Val === '') {
+      length2Ref.current.value = '0'
+    }
+    length2Ref.current.focus()
+    length2Ref.current.value = originLeng2Val
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: arrowType }))
+  }
   return (
     <div className="outline-wrap">
       <div className="outline-inner">
@@ -89,29 +101,25 @@ export default function RightAngle({ props }) {
             <button
               className={`direction up ${arrow2 === '↑' ? 'act' : ''}`}
               onClick={() => {
-                setArrow2('↑')
+                handleClickArrow('↑')
-                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
               }}
             ></button>
             <button
               className={`direction down ${arrow2 === '↓' ? 'act' : ''}`}
               onClick={() => {
-                setArrow2('↓')
+                handleClickArrow('↓')
-                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
               }}
             ></button>
             <button
               className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
               onClick={() => {
-                setArrow2('←')
+                handleClickArrow('←')
-                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
               }}
             ></button>
             <button
               className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
               onClick={() => {
-                setArrow2('→')
+                handleClickArrow('→')
-                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
               }}
             ></button>
           </div>

src/hooks/module/useTrestle.js

@@ -807,60 +807,59 @@ export const useTrestle = () => {
   const getAzimuth = (parent) => {
     const { moduleCompass, surfaceCompass, direction } = parent
 
-    if (surfaceCompass) {
+    let resultAzimuth = surfaceCompass || moduleCompass
-      if (surfaceCompass > 180) {
+
-        return surfaceCompass - 360
-      }
-      return surfaceCompass
-    }
 
     switch (direction) {
       case 'south': {
-        if (moduleCompass < 0) {
+        if (resultAzimuth < 0) {
-          return -1 * moduleCompass
+          return -1 * resultAzimuth
-        } else if (moduleCompass === 0) {
+        } else if (resultAzimuth === 0) {
           return 0
-        } else if (moduleCompass < 180) {
+        } else if (resultAzimuth < 180) {
-          return -1 * moduleCompass
+          return -1 * resultAzimuth
-        } else if (moduleCompass === 180) {
+        } else if (resultAzimuth === 180) {
           return 180
         }
       }
       case 'north': {
-        if (moduleCompass < 0) {
+        if (resultAzimuth < 0) {
-          return -1 * (180 + moduleCompass)
+          return -1 * (180 + resultAzimuth)
-        } else if (moduleCompass === 0) {
+        } else if (resultAzimuth === 0) {
           return 180
-        } else if (moduleCompass < 180) {
+        } else if (resultAzimuth < 180) {
-          return 180 - moduleCompass
+          return 180 - resultAzimuth
-        } else if (moduleCompass === 180) {
+        } else if (resultAzimuth === 180) {
           return 0
         }
       }
       case 'west': {
-        if (moduleCompass > -180 && moduleCompass < -90) {
+        if (resultAzimuth > -180 && resultAzimuth < 0) {
-          return -180 - (90 + moduleCompass)
+          return -1 * (90 + resultAzimuth)
-        } else if (moduleCompass < 0) {
+        } else if (resultAzimuth === 0) {
-          return 180 - (90 + moduleCompass)
+          return -180 + (90 - resultAzimuth)
-        } else if (moduleCompass === 0) {
+        } else if (resultAzimuth < 180) {
-          return 90
+          if (resultAzimuth > 90) {
-        } else if (moduleCompass < 180) {
+            return 180 + (90 - resultAzimuth)
-          return 90 - moduleCompass
+          }
-        } else if (moduleCompass === 180) {
+          return -180 + (90 - resultAzimuth)
-          return -90
+        } else if (resultAzimuth === 180) {
+          return 180 + (90 - resultAzimuth)
         }
       }
+
       case 'east': {
-        if (moduleCompass < 0) {
+        if (resultAzimuth === 0) {
-          return -(90 + moduleCompass)
+          return 90 - resultAzimuth
-        } else if (moduleCompass === 0) {
+        } else if (resultAzimuth > 0 && resultAzimuth < 180) {
-          return -90
+          return 90 - resultAzimuth
-        } else if (moduleCompass < 90) {
+        } else if (resultAzimuth === 180) {
-          return -180 + (90 - moduleCompass)
+          return 90 - resultAzimuth
-        } else if (moduleCompass < 180) {
+        } else if (resultAzimuth > -180 && resultAzimuth < 0) {
-          return 180 + (90 - moduleCompass)
+          if (resultAzimuth < -90) {
-        } else if (moduleCompass === 180) {
+            return -180 - (90 + resultAzimuth)
-          return 90
+          }
+          return 180 - (90 + resultAzimuth)
         }
       }
     }