src/components/floor-plan/modal/basic/step/Module.jsx

@@ -11,6 +11,7 @@ import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
 import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
 import { isObjectNotEmpty } from '@/util/common-utils'
 import { normalizeDecimal} from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Module({ setTabNum }) {
   const { getMessage } = useMessage()
@@ -185,11 +186,23 @@ export default function Module({ setTabNum }) {
                   <div className="eaves-keraba-td">
                     <div className="outline-form">
                       <div className="grid-select mr10">
-                        <input
+                        {/*<input*/}
-                          type="text"
+                        {/*  type="text"*/}
+                        {/*  className="input-origin block"*/}
+                        {/*  value={inputInstallHeight}*/}
+                        {/*  onChange={(e) => setInputInstallHeight(normalizeDecimal(e.target.value))}*/}
+                        {/*/>*/}
+                        <CalculatorInput
+                          id=""
+                          name=""
+                          label=""
                           className="input-origin block"
                           value={inputInstallHeight}
-                          onChange={(e) => setInputInstallHeight(normalizeDecimal(e.target.value))}
+                          onChange={(value) => setInputInstallHeight(value)}
+                          options={{
+                            allowNegative: false,
+                            allowDecimal: false
+                          }}
                         />
                       </div>
                       <span className="thin">m</span>

src/components/floor-plan/modal/basic/step/Orientation.jsx

@@ -10,6 +10,7 @@ import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
 import Swal from 'sweetalert2'
 import { normalizeDecimal} from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export const Orientation = forwardRef((props, ref) => {
   const { getMessage } = useMessage()
@@ -436,13 +437,26 @@ export const Orientation = forwardRef((props, ref) => {
                     <label htmlFor="ch99">{getMessage('modal.module.basic.setting.orientation.setting.angle.passivity')}</label>
                   </div>
                   <div className="input-grid mr10" style={{ width: '60px' }}>
-                    <input
+                    {/*<input*/}
-                      type="text"
+                    {/*  type="text"*/}
+                    {/*  className="input-origin block"*/}
+                    {/*  value={inputCompasDeg}*/}
+                    {/*  readOnly={!hasAnglePassivity}*/}
+                    {/*  placeholder={0}*/}
+                    {/*  onChange={(e) => checkDegree(e.target.value)}*/}
+                    {/*/>*/}
+                    <CalculatorInput
+                      id=""
+                      name=""
+                      label=""
                       className="input-origin block"
                       value={inputCompasDeg}
                       readOnly={!hasAnglePassivity}
-                      placeholder={0}
+                      onChange={(value) => setInputCompasDeg(value)}
-                      onChange={(e) => checkDegree(e.target.value)}
+                      options={{
+                        allowNegative: true,
+                        allowDecimal: false
+                      }}
                     />
                   </div>
                   <span className="thin">°</span>
@@ -533,7 +547,19 @@ export const Orientation = forwardRef((props, ref) => {
                   <div className="outline-form mt15">
                     <span>{getMessage('modal.module.basic.setting.module.placement.area')}</span>
                     <div className="input-grid mr10" style={{ width: '60px' }}>
-                      <input type="text" className="input-origin block" value={inputMargin} onChange={(e) => setInputMargin(normalizeDecimal(e.target.value))} />
+                      {/*<input type="text" className="input-origin block" value={inputMargin} onChange={(e) => setInputMargin(normalizeDecimal(e.target.value))} />*/}
+                      <CalculatorInput
+                        id=""
+                        name=""
+                        label=""
+                        className="input-origin block"
+                        value={inputMargin}
+                        onChange={(value) => setInputMargin(value)}
+                        options={{
+                          allowNegative: false,
+                          allowDecimal: false
+                        }}
+                      />
                     </div>
                     <span className="thin">m</span>
                   </div>
@@ -561,11 +587,23 @@ export const Orientation = forwardRef((props, ref) => {
                     <div className="outline-form">
                       <span>{getMessage('modal.module.basic.setting.module.fitting.height')}</span>
                       <div className="input-grid mr10">
-                        <input
+                        {/*<input*/}
-                          type="text"
+                        {/*  type="text"*/}
+                        {/*  className="input-origin block"*/}
+                        {/*  value={inputInstallHeight}*/}
+                        {/*  onChange={(e) => handleChangeInstallHeight(normalizeDecimal(e.target.value))}*/}
+                        {/*/>*/}
+                        <CalculatorInput
+                          id=""
+                          name=""
+                          label=""
                           className="input-origin block"
                           value={inputInstallHeight}
-                          onChange={(e) => handleChangeInstallHeight(normalizeDecimal(e.target.value))}
+                          onChange={(value) => handleChangeInstallHeight(value)}
+                          options={{
+                            allowNegative: false,
+                            allowDecimal: false
+                          }}
                         />
                       </div>
                       <span className="thin">m</span>
@@ -589,11 +627,23 @@ export const Orientation = forwardRef((props, ref) => {
                     <div className="outline-form">
                       <span>{getMessage('modal.module.basic.setting.module.standard.snowfall.amount')}</span>
                       <div className="input-grid mr10">
-                        <input
+                        {/*<input*/}
-                          type="text"
+                        {/*  type="text"*/}
+                        {/*  className="input-origin block"*/}
+                        {/*  value={inputVerticalSnowCover}*/}
+                        {/*  onChange={(e) => handleChangeVerticalSnowCover(normalizeDecimal(e.target.value))}*/}
+                        {/*/>*/}
+                        <CalculatorInput
+                          id=""
+                          name=""
+                          label=""
                           className="input-origin block"
-                          value={inputVerticalSnowCover}
+                          value={inputInstallHeight}
-                          onChange={(e) => handleChangeVerticalSnowCover(normalizeDecimal(e.target.value))}
+                          onChange={(value) => handleChangeVerticalSnowCover(value)}
+                          options={{
+                            allowNegative: false,
+                            allowDecimal: false
+                          }}
                         />
                       </div>
                       <span className="thin">cm</span>

src/components/floor-plan/modal/basic/step/Trestle.jsx

@@ -10,6 +10,7 @@ import { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useStat
 import { useRecoilState, useRecoilValue } from 'recoil'
 import Swal from 'sweetalert2'
 import { normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 const Trestle = forwardRef((props, ref) => {
   const { tabNum, setTabNum, trestleTrigger, roofs, setRoofs, moduleSelectionData, setModuleSelectionData, setRoofsStore } = props
@@ -885,12 +886,24 @@ const Trestle = forwardRef((props, ref) => {
               <div className="outline-form mr15">
                 <span>{getMessage('modal.module.basic.setting.module.placement.area.eaves')}</span>
                 <div className="input-grid mr10">
-                  <input
+                  {/*<input*/}
-                    type="number"
+                  {/*  type="number"*/}
+                  {/*  className="input-origin block"*/}
+                  {/*  value={eavesMargin ?? 0}*/}
+                  {/*  // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, eavesMargin: e.target.value } })}*/}
+                  {/*  onChange={(e) => setEavesMargin(+e.target.value)}*/}
+                  {/*/>*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
                     className="input-origin block"
                     value={eavesMargin ?? 0}
-                    // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, eavesMargin: e.target.value } })}
+                    onChange={(value) => setEavesMargin(value)}
-                    onChange={(e) => setEavesMargin(+e.target.value)}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false
+                    }}
                   />
                 </div>
                 <span className="thin">mm</span>
@@ -898,12 +911,24 @@ const Trestle = forwardRef((props, ref) => {
               <div className="outline-form mr15">
                 <span>{getMessage('modal.module.basic.setting.module.placement.area.ridge')}</span>
                 <div className="input-grid mr10">
-                  <input
+                  {/*<input*/}
-                    type="number"
+                  {/*  type="number"*/}
+                  {/*  className="input-origin block"*/}
+                  {/*  value={ridgeMargin ?? 0}*/}
+                  {/*  // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, ridgeMargin: e.target.value } })}*/}
+                  {/*  onChange={(e) => setRidgeMargin(+e.target.value)}*/}
+                  {/*/>*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
                     className="input-origin block"
                     value={ridgeMargin ?? 0}
-                    // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, ridgeMargin: e.target.value } })}
+                    onChange={(value) => setRidgeMargin(value)}
-                    onChange={(e) => setRidgeMargin(+e.target.value)}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false
+                    }}
                   />
                 </div>
                 <span className="thin">mm</span>
@@ -911,12 +936,24 @@ const Trestle = forwardRef((props, ref) => {
               <div className="outline-form ">
                 <span>{getMessage('modal.module.basic.setting.module.placement.area.keraba')}</span>
                 <div className="input-grid mr10">
-                  <input
+                  {/*<input*/}
-                    type="number"
+                  {/*  type="number"*/}
+                  {/*  className="input-origin block"*/}
+                  {/*  value={kerabaMargin ?? 0}*/}
+                  {/*  // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, kerabaMargin: e.target.value } })}*/}
+                  {/*  onChange={(e) => setKerabaMargin(+e.target.value)}*/}
+                  {/*/>*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
                     className="input-origin block"
                     value={kerabaMargin ?? 0}
-                    // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, kerabaMargin: e.target.value } })}
+                    onChange={(value) => setKerabaMargin(value)}
-                    onChange={(e) => setKerabaMargin(+e.target.value)}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false
+                    }}
                   />
                 </div>
                 <span className="thin">mm</span>

src/util/skeleton-utils.js

@@ -608,9 +608,8 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
     canvas.renderAll();
   });
 
-  if((roof.moveUpDown??0 > 0) || (roof.moveFlowLine??0 > 0)  ) {
+  //if((roof.moveUpDown??0 > 0) ) {
 
-    const getMoveUpDownLine = () => {
     // 같은 라인이 없으므로 새 다각형 라인 생성
     //라인 편집
     //  let i = 0
@@ -657,6 +656,20 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
       });
     }
 
+
+    // function sortCurrentRoofLines(lines) {
+    //   return [...lines].sort((a, b) => {
+    //     const aX = a.x1 ?? a.get('x1')
+    //     const aY = a.y1 ?? a.get('y1')
+    //     const bX = b.x1 ?? b.get('x1')
+    //     const bY = b.y1 ?? b.get('y1')
+
+    //     if (aX !== bX) return aX - bX
+    //     return aY - bY
+    //   })
+    // }
+
+
     // 각 라인 집합 정렬
 
     // roofLines의 방향에 맞춰 currentRoofLines의 방향을 조정
@@ -711,6 +724,7 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
       });
     };
 
+    console.log("wallBaseLines", wall.baseLines)
    // const sortedWallLines = sortCurrentRoofLines(wall.lines);
     // roofLines의 방향에 맞춰 currentRoofLines 조정 후 정렬
     const alignedCurrentRoofLines = alignLineDirection(currentRoofLines, roofLines);
@@ -798,20 +812,17 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
           strokeWidth: 4,
           name       : 'eaveHelpLine',
           lineName   : 'eaveHelpLine',
+          selectable : true,
           visible    : true,
           roofId     : roofId,
-        selectable: true,
-        hoverCursor: 'pointer',
           attributes : {
             type: 'eaveHelpLine',
             isStart : true,
             pitch: wallLine.attributes.pitch,
           }
         });
-
         //coordinateText(line)
         canvas.add(line)
-      line.bringToFront()
         canvas.renderAll();
         return line
       }
@@ -1493,12 +1504,10 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
       }
 
 
+
       canvas.renderAll()
     });
-}
+ // }
-    getMoveUpDownLine()
-
-  }
 
   if (findPoints.length > 0) {
     // 모든 점에 대해 라인 업데이트를 누적