치수선 표시변경 작업

src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx

@@ -19,7 +19,9 @@ export default function DimensionLineSetting(props) {
   const SelectOption01 = defaultSlope
   const [basicLength, setBasicLength] = useState(0)
   const [slopeAble, setSlopeAble] = useState(false)
-  const changeLengthRef = useRef(0)
+  const changeSlopeRef = useRef()
+
+  let slopeInput1, slopeInput2
 
   useEffect(() => {
     if (canvas) {
@@ -28,19 +30,53 @@ export default function DimensionLineSetting(props) {
       const textObj = dimensionObject._objects.filter((obj) => obj.name === 'dimensionLineText' && obj.id === id)[0]
       setBasicLength(parseInt(textObj.text))
     }
+
+    return () => {
+      setBasicLength(0)
+    }
   }, [])
 
   const handleChangeLength = () => {
-    const changeLength = changeLengthRef.current.value
+    const changeLength = changeSlopeRef.current
+
     if (canvas) {
       const dimensionObject = canvas.getActiveObject()
-      const id = dimensionObject.id
-      const textObj = canvas.getObjects().filter((obj) => obj.name === 'dimensionLineText' && obj.id === id)[0]
-      textObj.text = changeLength
+      const id = dimensionObject.groupId
+      const textObj = dimensionObject._objects.filter((obj) => obj.name === 'dimensionLineText' && obj.id === id)[0]
+      let resultText = changeLength.value > 0 ? changeLength.value : '0'
+
+      if (slopeAble) {
+        if (slopeInput1) {
+          resultText = calculateLength(basicLength, slopeInput1.angleValue).toFixed(0)
+
+          if (slopeInput2) {
+            const angle = slopeInput1 + slopeInput2
+            const length = calculateLength(basicLength, angle)
+            resultText = length.toFixed(2)
+          }
+        }
+      }
+
+      textObj.set({
+        text: String(resultText),
+      })
+
       canvas.renderAll()
     }
   }
 
+  const handleSelectbox = (option, params) => {
+    const index = params.index
+    if (index === 1) slopeInput1 = option
+    if (index === 2) slopeInput2 = option
+  }
+
+  function calculateLength(originalLength, angle) {
+    const angleInRadians = angle * (Math.PI / 180) // 각도를 라디안으로 변환
+    const result = Math.sqrt(Math.pow(originalLength * Math.tan(angleInRadians), 2) + Math.pow(originalLength, 2))
+    return result
+  }
+
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm`}>
@@ -64,7 +100,7 @@ export default function DimensionLineSetting(props) {
                 <div className="outline-form">
                   <span className="mr10">変更の長さ</span>
                   <div className="input-grid mr5">
-                    <input type="text" className="input-origin block" ref={changeLengthRef} defaultValue={0} />
+                    <input type="text" className="input-origin block" ref={changeSlopeRef} />
                   </div>
                 </div>
               </div>
@@ -80,14 +116,14 @@ export default function DimensionLineSetting(props) {
               <div className="outline-form mb15">
                 <span className="mr10">傾斜</span>
                 <div className="grid-select mr10">
-                  <QSelectBox title={''} options={SelectOption01} disabled={slopeAble} />
+                  <QSelectBox title={''} options={SelectOption01} disabled={!slopeAble} params={{ index: 1 }} onChange={handleSelectbox} />
                 </div>
                 <span className="thin">{pitchText}</span>
               </div>
               <div className="outline-form">
                 <span className="mr10">傾斜</span>
                 <div className="grid-select mr10">
-                  <QSelectBox title={''} options={SelectOption01} disabled={slopeAble} />
+                  <QSelectBox title={''} options={SelectOption01} disabled={!slopeAble} params={{ index: 2 }} onChange={handleSelectbox} />
                 </div>
                 <span className="thin">{pitchText}</span>
               </div>