Merge branch 'dev' into dev-yj

src/components/common/color-picker/ColorPickerModal.jsx

@@ -54,7 +54,6 @@ export default function ColorPickerModal(props) {
           <div className="left-bar modal-handle"></div>
           <div className="right-bar modal-handle"></div>
           <div className="color-setting-wrap">
-            <div className="color-tit">COLOR PICKER</div>
             <div className="color-picker">
               <ColorPicker color={originColor} setColor={setOriginColor} />
             </div>

src/components/floor-plan/CanvasLayout.jsx

@@ -39,7 +39,7 @@ export default function CanvasLayout({ children }) {
               onClick={() => handleCurrentPlan(plan.id)}
             >
               <span>{`Plan ${plan.planNo}`}</span>
-              {index !== 0 && !pathname.includes('/estimate') && !pathname.includes('/simulator') && (
+              {plans.length > 1 && !pathname.includes('/estimate') && !pathname.includes('/simulator') && (
                 <i
                   className="close"
                   onClick={(e) => {

src/components/floor-plan/CanvasMenu.jsx

@@ -183,8 +183,10 @@ export default function CanvasMenu(props) {
         await reloadCanvasStatus(objectNo, pid)
         break
       case 'surface':
-        const modules = canvas.getObjects().filter((module) => module.name === POLYGON_TYPE.MODULE)
+        const modules = canvas
-        initRoofs()
+          .getObjects()
+          .filter((obj) => [POLYGON_TYPE.MODULE_SETUP_SURFACE, POLYGON_TYPE.MODULE, POLYGON_TYPE.OBJECT_SURFACE].includes(obj.name))
+
         if (modules.length > 0) {
           swalFire({
             text: getMessage('module.delete.confirm'),
@@ -194,10 +196,7 @@ export default function CanvasMenu(props) {
 
               const moduleSurfacesArray = canvas
                 .getObjects()
-                .filter(
+                .filter((obj) => [POLYGON_TYPE.MODULE_SETUP_SURFACE, POLYGON_TYPE.MODULE, POLYGON_TYPE.OBJECT_SURFACE].includes(obj.name))
-                  (obj) =>
-                    obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE || obj.name === POLYGON_TYPE.MODULE || obj.name === POLYGON_TYPE.OBJECT_SURFACE,
-                )
 
               if (moduleSurfacesArray.length > 0) {
                 // 모듈면 있을 경우 지붕면 할당 다시해야함

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

@@ -9,7 +9,7 @@ import { canvasState, pitchTextSelector } from '@/store/canvasAtom'
 import { defaultSlope } from '@/store/commonAtom'
 import { re } from 'mathjs'
 import { basicSettingState } from '@/store/settingAtom'
-import { getChonByDegree } from '@/util/canvas-util'
+import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'
 
 export default function DimensionLineSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -106,14 +106,14 @@ export default function DimensionLineSetting(props) {
   }
 
   const calculateLength = (originalLength, angle, angle1) => {
-    const slope1 = basicSetting.roofAngleSet !== 'slope' ? getChonByDegree(angle) : angle
-    const slope2 = basicSetting.roofAngleSet !== 'slope' ? getChonByDegree(angle1 ?? 0) : angle1
     if (!angle1) {
-      const angleInRadians = slope1 * (Math.PI / 180)
+      const slope1 = basicSetting.roofAngleSet !== 'slope' ? getDegreeByChon(angle) : angle
-      const result = Math.sqrt(Math.pow(originalLength * Math.tan(angleInRadians), 2) + Math.pow(originalLength, 2))
+      const result = Math.sqrt(Math.pow(originalLength * Math.tan((getDegreeByChon(slope1) * Math.PI) / 180), 2) + Math.pow(originalLength, 2))
-      console.log(angleInRadians, result)
+      console.log(result)
       return result
     } else {
+      const slope1 = basicSetting.roofAngleSet !== 'slope' ? getChonByDegree(angle) : angle
+      const slope2 = basicSetting.roofAngleSet !== 'slope' ? getChonByDegree(angle1 ?? 0) : angle1
       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

src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx

@@ -16,6 +16,8 @@ import { globalLocaleStore } from '@/store/localeAtom'
 
 import { onlyNumberInputChange } from '@/util/input-utils'
 import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'
+import { usePolygon } from '@/hooks/usePolygon'
+import { canvasState } from '@/store/canvasAtom'
 
 /**
  * 지붕 레이아웃
@@ -38,6 +40,8 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
   const [raftCodes, setRaftCodes] = useState([]) /** 서까래 정보 */
   const [currentRoof, setCurrentRoof] = useState(null) /** 현재 선택된 지붕재 정보 */
   const { closePopup } = usePopup() /** usePopup에서 closePopup 함수 가져오기 */
+  const { drawDirectionArrow } = usePolygon()
+  const canvas = useRecoilValue(canvasState)
 
   const roofRef = {
     roofCd: useRef(null),
@@ -236,6 +240,13 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
       },
     })
 
+    const roofs = canvas.getObjects().filter((obj) => obj.roofMaterial?.index === 0)
+
+    roofs.forEach((roof) => {
+      roof.roofMaterial = { ...roofInfo }
+      drawDirectionArrow(roof)
+    })
+
     /* 저장 후 화면 닫기 */
     closePopup(id)
   }

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

@@ -205,7 +205,7 @@ export default function ContextRoofAllocationSetting(props) {
                           )}
                           <div className="block-box">
                             <div className="flex-ment">
-                              <span>{getMessage('slope')}</span>
+                              <span>{getMessage('modal.object.setting.offset.slope')}</span>
                               <div className="input-grid">
                                 <input
                                   type="text"
@@ -221,27 +221,6 @@ export default function ContextRoofAllocationSetting(props) {
                               <span className="absol">{pitchText}</span>
                             </div>
                           </div>
-                          <div className="block-box">
-                            <div className="icon-btn-wrap">
-                              <button
-                                className={roof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL ? 'act' : ''}
-                                onClick={() => {
-                                  handleChangeLayout(ROOF_MATERIAL_LAYOUT.PARALLEL, index)
-                                }}
-                              >
-                                {getMessage('modal.roof.alloc.select.parallel')}
-                                <i className="allocation01"></i>
-                              </button>
-                              <button
-                                className={roof.layout === ROOF_MATERIAL_LAYOUT.STAIRS ? 'act' : ''}
-                                onClick={() => {
-                                  handleChangeLayout(ROOF_MATERIAL_LAYOUT.STAIRS, index)
-                                }}
-                              >
-                                {getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
-                              </button>
-                            </div>
-                          </div>
                         </div>
                       </div>
                     )

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

@@ -202,7 +202,7 @@ export default function RoofAllocationSetting(props) {
                           )}
                           <div className="block-box">
                             <div className="flex-ment">
-                              <span>{getMessage('slope')}</span>
+                              <span>{getMessage('modal.object.setting.offset.slope')}</span>
                               <div className="input-grid">
                                 <input
                                   type="text"
@@ -217,7 +217,7 @@ export default function RoofAllocationSetting(props) {
                               <span className="absol">{pitchText}</span>
                             </div>
                           </div>
-                          <div className="block-box">
+                          {/* <div className="block-box">
                             <div className="icon-btn-wrap">
                               <button
                                 className={roof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL ? 'act' : ''}
@@ -237,7 +237,7 @@ export default function RoofAllocationSetting(props) {
                                 {getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
                               </button>
                             </div>
-                          </div>
+                          </div> */}
                         </div>
                       </div>
                     )

src/hooks/module/useModule.js

@@ -362,7 +362,7 @@ export function useModule() {
     }
 
     modules.forEach((module) => {
-      const { top, left } = getPosotion(module, direction, Number(length) + Number(moduleLength), false)
+      const { top, left } = getPosotion(module, direction, Number(length) + Number(moduleLength), true)
       module.clone((obj) => {
         obj.set({
           parentId: module.parentId,
@@ -412,6 +412,9 @@ export function useModule() {
   }
 
   const moduleColumnRemove = (type) => {
+    if (isFixedModule()) {
+      return
+    }
     const activeModule = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
     if (activeModule.circuit) {
       swalFire({
@@ -535,6 +538,9 @@ export function useModule() {
   }
 
   const moduleRowRemove = (type) => {
+    if (isFixedModule()) {
+      return
+    }
     const activeModule = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
     const rowModules = getRowModules(activeModule)
     const otherModules = getOtherModules(rowModules)
@@ -651,6 +657,9 @@ export function useModule() {
   }
 
   const moduleColumnInsert = (type) => {
+    if (isFixedModule()) {
+      return
+    }
     const activeModule = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
     const columnModules = getColumnModules(activeModule)
     let otherModules = getOtherModules(columnModules)
@@ -680,7 +689,7 @@ export function useModule() {
     targetModules.forEach((module) => {
       if (width === -1)
         width = type === MODULE_INSERT_TYPE.LEFT ? Number(activeModule.left) - Number(module.left) : Number(module.left) - Number(activeModule.left)
-      const { top, left } = getPosotion(module, type, module.width, false)
+      const { top, left } = getPosotion(module, type, module.width, true)
       module.originPos = {
         left: module.left,
         top: module.top,
@@ -697,7 +706,7 @@ export function useModule() {
     canvas.renderAll()
     otherModules = getOtherModules(columnModules)
     columnModules.forEach((module) => {
-      const { top, left } = getPosotion(module, type, module.width, false)
+      const { top, left } = getPosotion(module, type, module.width, true)
       let copyModule = null
       module.clone((obj) => {
         obj.set({
@@ -750,7 +759,25 @@ export function useModule() {
     setModuleStatisticsData()
   }
 
+  const isFixedModule = () => {
+    const completeSurfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.isComplete)
+
+    if (completeSurfaces.length > 0) {
+      swalFire({
+        title: getMessage('modal.module.can.not.edit'),
+        type: 'alert',
+        icon: 'error',
+      })
+      return true
+    }
+
+    return false
+  }
+
   const muduleRowInsert = (type) => {
+    if (isFixedModule()) {
+      return
+    }
     const activeModule = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
     const rowModules = getRowModules(activeModule)
     let otherModules = getOtherModules(rowModules)
@@ -780,7 +807,7 @@ export function useModule() {
     targetModules.forEach((module) => {
       if (height === -1)
         height = type === MODULE_INSERT_TYPE.TOP ? Number(activeModule.top) - Number(module.top) : Number(module.top) - Number(activeModule.top)
-      const { top, left } = getPosotion(module, type, activeModule.height, false)
+      const { top, left } = getPosotion(module, type, activeModule.height, true)
       module.originPos = {
         left: module.left,
         top: module.top,
@@ -796,7 +823,7 @@ export function useModule() {
     canvas.renderAll()
     otherModules = getOtherModules(rowModules)
     rowModules.forEach((module) => {
-      const { top, left } = getPosotion(module, type, activeModule.height, false)
+      const { top, left } = getPosotion(module, type, activeModule.height, true)
       let copyModule = null
       module.clone((obj) => {
         obj.set({

src/hooks/surface/usePlacementShapeDrawing.js

@@ -688,8 +688,9 @@ export function usePlacementShapeDrawing(id) {
       }
       // 포커스가 length1에 있지 않으면 length1에 포커스를 줌
       const activeElem = document.activeElement
+
       if (activeElem !== length1Ref.current) {
-        length1Ref.current.focus()
+        length1Ref.current?.focus()
       }
 
       const key = e.key
@@ -698,7 +699,7 @@ export function usePlacementShapeDrawing(id) {
         return
       }
 
-      const lengthNum = Number(length1Ref.current.value) / 10
+      const lengthNum = Number(length1Ref.current?.value) / 10
       if (lengthNum === 0) {
         return
       }

src/hooks/useContextMenu.js

@@ -76,50 +76,7 @@ export function useContextMenu() {
 
   const currentMenuSetting = () => {
     switch (selectedMenu) {
-      case 'placement':
-        setContextMenu([
-          [
-            {
-              id: 'gridMove',
-              name: getMessage('modal.grid.move'),
-              component: <GridMove id={popupId} />,
-            },
-            {
-              id: 'gridCopy',
-              name: getMessage('modal.grid.copy'),
-              component: <GridCopy id={popupId} />,
-            },
-            {
-              id: 'gridColorEdit',
-              name: getMessage('modal.grid.color.edit'),
-              component: (
-                <ColorPickerModal
-                  id={popupId}
-                  color={gridColor}
-                  setColor={setGridColor}
-                  settingsData={settingsData}
-                  setSettingsDataSave={setSettingsDataSave}
-                />
-              ),
-            },
-            {
-              id: 'remove',
-              name: getMessage('delete'),
-            },
-            {
-              id: 'removeAll',
-              name: getMessage('delete.all'),
-              fn: () => {
-                removeGrid()
-                removeAdsorptionPoint()
-              },
-            },
-          ],
-        ])
-        break
       case 'outline':
-        if (['roof', 'auxiliaryLine'].includes(currentObject?.name)) {
-        }
         break
       default:
         setContextMenu([])