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

@@ -11,7 +11,6 @@ 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()
@@ -186,23 +185,11 @@ export default function Module({ setTabNum }) {
                   <div className="eaves-keraba-td">
                     <div className="outline-form">
                       <div className="grid-select mr10">
-                        {/*<input*/}
-                        {/*  type="text"*/}
-                        {/*  className="input-origin block"*/}
-                        {/*  value={inputInstallHeight}*/}
-                        {/*  onChange={(e) => setInputInstallHeight(normalizeDecimal(e.target.value))}*/}
-                        {/*/>*/}
-                        <CalculatorInput
-                          id=""
-                          name=""
-                          label=""
+                        <input
+                          type="text"
                           className="input-origin block"
                           value={inputInstallHeight}
-                          onChange={(value) => setInputInstallHeight(value)}
-                          options={{
-                            allowNegative: false,
-                            allowDecimal: false
-                          }}
+                          onChange={(e) => setInputInstallHeight(normalizeDecimal(e.target.value))}
                         />
                       </div>
                       <span className="thin">m</span>

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

@@ -10,7 +10,6 @@ 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()
@@ -437,26 +436,13 @@ 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*/}
-                    {/*  type="text"*/}
-                    {/*  className="input-origin block"*/}
-                    {/*  value={inputCompasDeg}*/}
-                    {/*  readOnly={!hasAnglePassivity}*/}
-                    {/*  placeholder={0}*/}
-                    {/*  onChange={(e) => checkDegree(e.target.value)}*/}
-                    {/*/>*/}
-                    <CalculatorInput
-                      id=""
-                      name=""
-                      label=""
+                    <input
+                      type="text"
                       className="input-origin block"
                       value={inputCompasDeg}
                       readOnly={!hasAnglePassivity}
-                      onChange={(value) => setInputCompasDeg(value)}
-                      options={{
-                        allowNegative: true,
-                        allowDecimal: false
-                      }}
+                      placeholder={0}
+                      onChange={(e) => checkDegree(e.target.value)}
                     />
                   </div>
                   <span className="thin">°</span>
@@ -547,19 +533,7 @@ 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))} />*/}
-                      <CalculatorInput
-                        id=""
-                        name=""
-                        label=""
-                        className="input-origin block"
-                        value={inputMargin}
-                        onChange={(value) => setInputMargin(value)}
-                        options={{
-                          allowNegative: false,
-                          allowDecimal: false
-                        }}
-                      />
+                      <input type="text" className="input-origin block" value={inputMargin} onChange={(e) => setInputMargin(normalizeDecimal(e.target.value))} />
                     </div>
                     <span className="thin">m</span>
                   </div>
@@ -587,23 +561,11 @@ 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*/}
-                        {/*  type="text"*/}
-                        {/*  className="input-origin block"*/}
-                        {/*  value={inputInstallHeight}*/}
-                        {/*  onChange={(e) => handleChangeInstallHeight(normalizeDecimal(e.target.value))}*/}
-                        {/*/>*/}
-                        <CalculatorInput
-                          id=""
-                          name=""
-                          label=""
+                        <input
+                          type="text"
                           className="input-origin block"
                           value={inputInstallHeight}
-                          onChange={(value) => handleChangeInstallHeight(value)}
-                          options={{
-                            allowNegative: false,
-                            allowDecimal: false
-                          }}
+                          onChange={(e) => handleChangeInstallHeight(normalizeDecimal(e.target.value))}
                         />
                       </div>
                       <span className="thin">m</span>
@@ -627,23 +589,11 @@ 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*/}
-                        {/*  type="text"*/}
-                        {/*  className="input-origin block"*/}
-                        {/*  value={inputVerticalSnowCover}*/}
-                        {/*  onChange={(e) => handleChangeVerticalSnowCover(normalizeDecimal(e.target.value))}*/}
-                        {/*/>*/}
-                        <CalculatorInput
-                          id=""
-                          name=""
-                          label=""
+                        <input
+                          type="text"
                           className="input-origin block"
-                          value={inputInstallHeight}
-                          onChange={(value) => handleChangeVerticalSnowCover(value)}
-                          options={{
-                            allowNegative: false,
-                            allowDecimal: false
-                          }}
+                          value={inputVerticalSnowCover}
+                          onChange={(e) => handleChangeVerticalSnowCover(normalizeDecimal(e.target.value))}
                         />
                       </div>
                       <span className="thin">cm</span>

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

@@ -10,7 +10,6 @@ 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
@@ -886,24 +885,12 @@ 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*/}
-                  {/*  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=""
+                  <input
+                    type="number"
                     className="input-origin block"
                     value={eavesMargin ?? 0}
-                    onChange={(value) => setEavesMargin(value)}
-                    options={{
-                      allowNegative: false,
-                      allowDecimal: false
-                    }}
+                    // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, eavesMargin: e.target.value } })}
+                    onChange={(e) => setEavesMargin(+e.target.value)}
                   />
                 </div>
                 <span className="thin">mm</span>
@@ -911,24 +898,12 @@ 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*/}
-                  {/*  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=""
+                  <input
+                    type="number"
                     className="input-origin block"
                     value={ridgeMargin ?? 0}
-                    onChange={(value) => setRidgeMargin(value)}
-                    options={{
-                      allowNegative: false,
-                      allowDecimal: false
-                    }}
+                    // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, ridgeMargin: e.target.value } })}
+                    onChange={(e) => setRidgeMargin(+e.target.value)}
                   />
                 </div>
                 <span className="thin">mm</span>
@@ -936,24 +911,12 @@ 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*/}
-                  {/*  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=""
+                  <input
+                    type="number"
                     className="input-origin block"
                     value={kerabaMargin ?? 0}
-                    onChange={(value) => setKerabaMargin(value)}
-                    options={{
-                      allowNegative: false,
-                      allowDecimal: false
-                    }}
+                    // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, kerabaMargin: e.target.value } })}
+                    onChange={(e) => setKerabaMargin(+e.target.value)}
                   />
                 </div>
                 <span className="thin">mm</span>

src/util/skeleton-utils.js

@@ -608,8 +608,9 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
     canvas.renderAll();
   });
 
-  //if((roof.moveUpDown??0 > 0) ) {
+  if((roof.moveUpDown??0 > 0) || (roof.moveFlowLine??0 > 0)  ) {
 
+    const getMoveUpDownLine = () => {
   // 같은 라인이 없으므로 새 다각형 라인 생성
   //라인 편집
   //  let i = 0
@@ -656,20 +657,6 @@ 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의 방향을 조정
@@ -724,7 +711,6 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
     });
   };
 
-    console.log("wallBaseLines", wall.baseLines)
   // const sortedWallLines = sortCurrentRoofLines(wall.lines);
   // roofLines의 방향에 맞춰 currentRoofLines 조정 후 정렬
   const alignedCurrentRoofLines = alignLineDirection(currentRoofLines, roofLines);
@@ -812,17 +798,20 @@ 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
     }
@@ -1504,10 +1493,12 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
     }
 
 
-
     canvas.renderAll()
   });
- // }
+}
+    getMoveUpDownLine()
+
+  }
 
   if (findPoints.length > 0) {
     // 모든 점에 대해 라인 업데이트를 누적