지붕재 변경 퍼블 수정

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

@@ -24,18 +24,20 @@ export default function DimensionLineSetting(props) {
   const basicSetting = useRecoilValue(basicSettingState)
   const changeSlopeRef = useRef()
   const [options, setOptions] = useState([])
+  const [changeLength, setChangeLength] = useState(null)
   const [selectedSlope1, setSelectedSlope1] = useState(null)
   const [selectedSlope2, setSelectedSlope2] = useState(null)
 
-  let slopeInput1, slopeInput2
-
   useEffect(() => {
     if (canvas) {
       const dimensionObject = canvas.getActiveObject()
       const id = dimensionObject.groupId
       const textObj = dimensionObject._objects.filter((obj) => obj.name === 'dimensionLineText' && obj.group.groupId === id)[0]
       if (!textObj) return
-      setBasicLength(parseInt(textObj.text))
+      // setBasicLength(parseInt(textObj.text))
+      setBasicLength(+dimensionObject.length)
+      setSelectedSlope1(dimensionObject.angle1)
+      setSelectedSlope2(dimensionObject.angle2)
     }
 
     if (basicSetting.roofAngleSet === 'slope') {
@@ -62,15 +64,23 @@ export default function DimensionLineSetting(props) {
     }
   }, [])
 
-  const handleChangeLength = () => {
+  useEffect(() => {
-    const changeLength = changeSlopeRef.current
+    if (!slopeAble) {
+      const dimensionObject = canvas.getActiveObject()
+      dimensionObject.set({
+        angle1: null,
+        angle2: null,
+      })
+    }
+  }, [slopeAble])
 
+  const handleChangeLength = () => {
     if (canvas) {
       const dimensionObject = canvas.getActiveObject()
       const id = dimensionObject.groupId
       const textObj = dimensionObject._objects.filter((obj) => obj.name === 'dimensionLineText' && obj.group.groupId === id)[0]
-      let resultText = changeLength.value > 0 ? changeLength.value : '0'
+      let resultText = +changeLength > 0 ? +changeLength : '0'
-
+      console.log(changeLength)
       if (slopeAble) {
         resultText = !selectedSlope2
           ? calculateLength(basicLength, selectedSlope1.value).toFixed(0)
@@ -81,13 +91,14 @@ export default function DimensionLineSetting(props) {
         text: String(resultText),
       })
 
+      dimensionObject.set({ length: +resultText })
       setBasicLength(resultText)
+      setChangeLength('')
       canvas.renderAll()
     }
   }
 
-  function calculateLength(originalLength, angle, angle1) {
+  const calculateLength = (originalLength, angle, angle1) => {
-    console.log(angle, angle1)
     const slope1 = basicSetting.roofAngleSet !== 'slope' ? getChonByDegree(angle) : angle
     const slope2 = basicSetting.roofAngleSet !== 'slope' ? getChonByDegree(angle1 ?? 0) : angle1
     if (!angle1) {
@@ -99,7 +110,6 @@ export default function DimensionLineSetting(props) {
       const numerator = Math.sqrt(Math.pow(slope1, 2) + 100 + Math.pow((10 * slope1) / slope2, 2)) * originalLength
       const denominator = Math.sqrt(Math.pow((10 * slope1) / slope2, 2) + 100)
       const result = numerator / denominator
-      console.log('2222222222222222')
       return result
     }
   }
@@ -129,7 +139,16 @@ export default function DimensionLineSetting(props) {
                 <div className="outline-form">
                   <span className="mr10">{getMessage('modal.display.edit.after.length')}</span>
                   <div className="input-grid mr5">
-                    <input type="text" className="input-origin block" ref={changeSlopeRef} />
+                    <input
+                      type="text"
+                      className="input-origin block"
+                      defaultValue={''}
+                      value={changeLength}
+                      onChange={(e) => {
+                        console.log(e.target)
+                        setChangeLength(e.target.value)
+                      }}
+                    />
                   </div>
                 </div>
               </div>

src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx

@@ -62,7 +62,7 @@ export default function RoofAllocationSetting(props) {
               <div className="right-bar modal-handle"></div>
               <div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
               <div className="allocation-select-wrap">
-                <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
+                {/* <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
                 <div className="grid-select">
                   <QSelectBox
                     options={roofMaterials.map((roof) => {
@@ -77,7 +77,7 @@ export default function RoofAllocationSetting(props) {
                     sourceKey={'roofMatlCd'}
                     targetKey={'roofMatlCd'}
                   />
-                </div>
+                </div> */}
                 <button
                   className="allocation-edit"
                   onClick={() => {