Merge branch 'dev' into dev-yj

src/app/layout.js

@@ -17,8 +17,8 @@ import Footer from '@/components/footer/Footer'
 import GlobalLoadingProvider from './GlobalLoadingProvider'
 
 export const metadata = {
-  title: 'Create Next App',
+  title: 'HANASYS設計',
-  description: 'Generated by create next app',
+  description: 'HANASYS設計',
 }
 
 export default async function RootLayout({ children }) {

src/components/fabric/QPolygon.js

@@ -162,9 +162,10 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   },
 
   initLines() {
-    // if (this.lines.length > 0) {
+    let attributes = null
-    //   return
+    if (this.lines.length > 0) {
-    // }
+      attributes = this.lines.map((line) => line.attributes)
+    }
 
     this.lines = []
 
@@ -174,9 +175,11 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
         stroke: this.stroke,
         strokeWidth: this.strokeWidth,
         fontSize: this.fontSize,
-        attributes: {
+        attributes: attributes
-          offset: 0,
+          ? attributes[i]
-        },
+          : {
+              offset: 0,
+            },
         textVisible: false,
         parent: this,
         parentId: this.id,

src/components/floor-plan/CanvasMenu.jsx

@@ -48,6 +48,8 @@ import KO from '@/locales/ko.json'
 import JA from '@/locales/ja.json'
 
 import { QcastContext } from '@/app/QcastProvider'
+import { useRoofFn } from '@/hooks/common/useRoofFn'
+import { usePolygon } from '@/hooks/usePolygon'
 export default function CanvasMenu(props) {
   const { menuNumber, setMenuNumber } = props
   const pathname = usePathname()
@@ -104,6 +106,8 @@ export default function CanvasMenu(props) {
   const pwrGnrSimTypeRecoil = useRecoilValue(pwrGnrSimTypeState)
 
   const { setIsGlobalLoading } = useContext(QcastContext)
+  const { setSurfaceShapePattern } = useRoofFn()
+  const { drawDirectionArrow } = usePolygon()
 
   //임시
   const { selectedPlan } = usePlan()
@@ -173,23 +177,36 @@ export default function CanvasMenu(props) {
       case 3:
         if (menuNumber > menu.index) {
           const modules = canvas.getObjects().filter((module) => module.name === POLYGON_TYPE.MODULE)
+          const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+
           if (modules.length > 0) {
             swalFire({
               text: getMessage('module.delete.confirm'),
               type: 'confirm',
               confirmFn: () => {
                 //해당 메뉴 이동시 배치면 삭제
+
+                roofs.forEach((roof) => {
+                  roof.set({ selectable: true })
+                  setSurfaceShapePattern(roof, null, false, roof.roofMaterial)
+                  delete roof.moduleCompass
+                  drawDirectionArrow(roof)
+                })
+
                 const moduleSurfacesArray = canvas
                   .getObjects()
                   .filter(
                     (obj) =>
                       obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE || obj.name === POLYGON_TYPE.MODULE || obj.name === POLYGON_TYPE.OBJECT_SURFACE,
                   )
+
                 if (moduleSurfacesArray.length > 0) {
+                  // 모듈면 있을 경우 지붕면 할당 다시해야함
                   moduleSurfacesArray.forEach((moduleSurface) => {
                     canvas.remove(moduleSurface)
                   })
                   canvas.renderAll()
+                  onClickNav(menu)
                 }
                 setType('surface')
               },

src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx

@@ -119,30 +119,32 @@ export default function StepUp(props) {
 
                 // 새로운 모듈 회로 정보 추가
                 roofSurface.moduleList.forEach((module) => {
-                  const targetModule = canvas.getObjects().filter((obj) => obj.id === module.uniqueId)[0]
+                  const targetModule = canvas.getObjects().find((obj) => obj.id === module.uniqueId)
-                  const moduleCircuitText = new fabric.Text(module.circuit, {
+                  if (targetModule && module.circuit !== '' && module.circuit) {
-                    left: targetModule.left + targetModule.width / 2,
+                    const moduleCircuitText = new fabric.Text(module.circuit, {
-                    top: targetModule.top + targetModule.height / 2,
+                      left: targetModule.left + targetModule.width / 2,
-                    fontFamily: circuitNumberText.fontFamily.value,
+                      top: targetModule.top + targetModule.height / 2,
-                    fontWeight: circuitNumberText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
+                      fontFamily: circuitNumberText.fontFamily.value,
-                    fontStyle: circuitNumberText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
+                      fontWeight: circuitNumberText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
-                    fontSize: circuitNumberText.fontSize.value,
+                      fontStyle: circuitNumberText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
-                    fill: circuitNumberText.fontColor.value,
+                      fontSize: circuitNumberText.fontSize.value,
-                    width: targetModule.width,
+                      fill: circuitNumberText.fontColor.value,
-                    height: targetModule.height,
+                      width: targetModule.width,
-                    textAlign: 'center',
+                      height: targetModule.height,
-                    originX: 'center',
+                      textAlign: 'center',
-                    originY: 'center',
+                      originX: 'center',
-                    name: 'circuitNumber',
+                      originY: 'center',
-                    parentId: targetModule.id,
+                      name: 'circuitNumber',
-                    circuitInfo: module.pcsItemId,
+                      parentId: targetModule.id,
-                    selectable: false,
+                      circuitInfo: module.pcsItemId,
-                    visible: isDisplayCircuitNumber,
+                      selectable: false,
-                  })
+                      visible: isDisplayCircuitNumber,
-                  targetModule.circuit = moduleCircuitText
+                    })
-                  targetModule.pcsItemId = module.pcsItemId
+                    targetModule.circuit = moduleCircuitText
-                  targetModule.circuitNumber = module.circuit
+                    targetModule.pcsItemId = module.pcsItemId
-                  canvas.add(moduleCircuitText)
+                    targetModule.circuitNumber = module.circuit
+                    canvas.add(moduleCircuitText)
+                  }
                 })
               })
             }
@@ -441,8 +443,8 @@ export default function StepUp(props) {
       canvas.renderAll()
 
       roofSurface.moduleList.forEach((module) => {
-        const targetModule = canvas.getObjects().filter((obj) => obj.id === module.uniqueId)[0]
+        const targetModule = canvas.getObjects().find((obj) => obj.id === module.uniqueId)
-        if (module.circuit !== '' && module.circuit) {
+        if (targetModule && module.circuit !== '' && module.circuit !== null) {
           const moduleCircuitText = new fabric.Text(module.circuit, {
             left: targetModule.left + targetModule.width / 2,
             top: targetModule.top + targetModule.height / 2,

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

@@ -33,6 +33,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
   const { findCommonCode } = useCommonCode()
   const [raftCodes, setRaftCodes] = useState([]) // 서까래 정보
   const [currentRoof, setCurrentRoof] = useState(null) // 현재 선택된 지붕재 정보
+  const { closePopup } = usePopup() // usePopup에서 closeAll 함수 가져오기
 
   const roofRef = {
     roofCd: useRef(null),
@@ -213,6 +214,9 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
         roofInfo,
       },
     })
+
+    /* 저장 후 화면 닫기 */
+    closePopup(id)
   }
 
   return (

src/hooks/common/useCommonUtils.js

@@ -593,6 +593,11 @@ export function useCommonUtils() {
           clonedObj.setCoords()
           clonedObj.fire('polygonMoved')
           clonedObj.set({ direction: obj.direction, directionText: obj.directionText, roofMaterial: obj.roofMaterial })
+
+          obj.lines.forEach((line, index) => {
+            clonedObj.lines[index].set({ attributes: line.attributes })
+          })
+
           canvas.renderAll()
           addLengthText(clonedObj) //수치 추가
           drawDirectionArrow(clonedObj) //방향 화살표 추가

src/hooks/module/useModule.js

@@ -822,10 +822,7 @@ export function useModule() {
 
   const alignModule = (type, surfaceArray) => {
     surfaceArray.forEach((surface) => {
-      const modules = canvas
+      const modules = surface.modules
-        .getObjects()
-        .filter((module) => module.name === POLYGON_TYPE.MODULE)
-        .filter((module) => module.surfaceId === surface.id)
 
       const objects = getObjects()
       let [top, bottom, left, right] = [0, 0, 0, 0]

src/hooks/module/useModuleBasicSetting.js

@@ -7,7 +7,7 @@ import offsetPolygon, { calculateAngle } from '@/util/qpolygon-utils'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { moduleSetupSurfaceState, moduleIsSetupState } from '@/store/canvasAtom'
 import { useEvent } from '@/hooks/useEvent'
-import { POLYGON_TYPE, BATCH_TYPE } from '@/common/common'
+import { POLYGON_TYPE, BATCH_TYPE, LINE_TYPE } from '@/common/common'
 import * as turf from '@turf/turf'
 import { useSwal } from '@/hooks/useSwal'
 import { compasDegAtom } from '@/store/orientationAtom'
@@ -22,6 +22,7 @@ import { v4 as uuidv4 } from 'uuid'
 // import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
 import { isObjectNotEmpty } from '@/util/common-utils'
 import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
+import { useMode } from '../useMode'
 
 export function useModuleBasicSetting(tabNum) {
   const canvas = useRecoilValue(canvasState)
@@ -51,6 +52,7 @@ export function useModuleBasicSetting(tabNum) {
 
   const [currentObject, setCurrentObject] = useRecoilState(currentObjectState)
   const { setModuleStatisticsData } = useCircuitTrestle()
+  const { createRoofPolygon, createMarginPolygon, createPaddingPolygon } = useMode()
 
   useEffect(() => {
     // console.log('basicSetting', basicSetting)
@@ -131,6 +133,7 @@ export function useModuleBasicSetting(tabNum) {
   //가대 상세 데이터 들어오면 실행
   useEffect(() => {
     if (trestleDetailList.length > 0) {
+      console.log('trestleDetailList', trestleDetailList)
       //지붕을 가져옴
       canvas
         .getObjects()
@@ -143,6 +146,12 @@ export function useModuleBasicSetting(tabNum) {
               if (Number(detail.data.roofIndex) === roofIndex) {
                 //roof에 상세 데이터 추가
                 roof.set({ trestleDetail: detail.data })
+                roof.lines.forEach((line) => {
+                  line.attributes = {
+                    ...line.attributes,
+                    offset: getOffset(detail.data, line.attributes.type),
+                  }
+                })
                 //배치면 설치 영역
                 makeModuleInstArea(roof, detail.data)
                 //surface에 상세 데이터 추가
@@ -153,6 +162,18 @@ export function useModuleBasicSetting(tabNum) {
     }
   }, [trestleDetailList])
 
+  const getOffset = (data, type) => {
+    switch (type) {
+      case LINE_TYPE.WALLLINE.EAVES:
+        return data.eaveIntvl / 10
+      case LINE_TYPE.WALLLINE.GABLE:
+        return data.kerabaIntvl / 10
+      case LINE_TYPE.SUBLINE.RIDGE:
+        return data.ridgeIntvl / 10
+      default:
+        return 60 / 10
+    }
+  }
   //선택 배치면 배열`
   let selectedModuleInstSurfaceArray = []
 
@@ -220,7 +241,23 @@ export function useModuleBasicSetting(tabNum) {
       } else {
         let offsetLength = canvasSetting.roofSizeSet === '3' ? -30 : (trestleDetail.eaveIntvl / 10) * -1
         setSurfaceShapePattern(roof, roofDisplay.column, true, roof.roofMaterial) //패턴 변경
-        const offsetPoints = offsetPolygon(roof.points, offsetLength) //안쪽 offset
+        // let offsetPoints = createPaddingPolygon(createRoofPolygon(roof.points), roof.lines).vertices //안쪽 offset
+        let offsetPoints = null
+        console.log(roof, roof.getCurrentPoints())
+        const polygon = createRoofPolygon(roof.getCurrentPoints())
+        const originPolygon = new QPolygon(roof.getCurrentPoints(), { fontSize: 0 })
+
+        let result = createPaddingPolygon(polygon, roof.lines).vertices
+
+        //margin polygon 의 point가 기준 polygon의 밖에 있는지 판단한다.
+        const allPointsOutside = result.every((point) => !originPolygon.inPolygon(point))
+
+        if (allPointsOutside) {
+          offsetPoints = createMarginPolygon(polygon, roof.lines).vertices
+        } else {
+          offsetPoints = createPaddingPolygon(polygon, roof.lines).vertices
+        }
+
         //모듈설치영역?? 생성
 
         const surfaceId = uuidv4()
@@ -692,7 +729,7 @@ export function useModuleBasicSetting(tabNum) {
                 canvas?.add(manualModule)
                 manualDrawModules.push(manualModule)
                 setModuleStatisticsData()
-                getModuleStatistics()
+                // getModuleStatistics()
               } else {
                 swalFire({ text: getMessage('module.place.overlab') })
               }
@@ -2114,7 +2151,8 @@ export function useModuleBasicSetting(tabNum) {
       })
 
       moduleSetupSurface.set({ modules: moduleSetupArray })
-      getModuleStatistics()
+      // getModuleStatistics()
+      setModuleStatisticsData()
       // const moduleArray = [...moduleIsSetup]
       // moduleArray.push({
       //   surfaceId: moduleSetupSurface.surfaceId,
@@ -2778,7 +2816,8 @@ export function useModuleBasicSetting(tabNum) {
           }
         })
       }
-      getModuleStatistics()
+      // getModuleStatistics()
+      setModuleStatisticsData()
     } else {
       if (moduleSetupSurfaces) {
         //수동모드 해제시 모듈 설치면 선택 잠금
@@ -3194,7 +3233,8 @@ export function useModuleBasicSetting(tabNum) {
       })
 
       moduleSetupSurface.set({ modules: setupedModules })
-      getModuleStatistics()
+      setModuleStatisticsData()
+      // getModuleStatistics()
       // console.log('moduleSetupSurface', moduleSetupSurface)
       // console.log('setupedModules', setupedModules)
 

src/hooks/option/useCanvasSetting.js

@@ -139,7 +139,7 @@ export function useCanvasSetting() {
 
   const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector) // 선택된 지붕재 정보
   const { floorPlanState } = useContext(FloorPlanContext) // 플랜 상태
-  const { closeAll } = usePopup() // 팝업 닫기
+  const { closePopup, closeAll } = usePopup() // 팝업 닫기
 
   useEffect(() => {
     const tempFetchRoofMaterials = !fetchRoofMaterials
@@ -338,6 +338,12 @@ export function useCanvasSetting() {
               roofAngle: item.roofAngle,
             }
           })
+
+          /* 데이터 존재 시 화면 닫기(메뉴/저장 클릭 시 제외) */
+          if (openPoint !== 'canvasMenus' && openPoint !== 'basicSettingSave') {
+            //closePopup(popupId)
+            closeAll()
+          }
         } else {
           roofsRow = [
             {
@@ -475,11 +481,8 @@ export function useCanvasSetting() {
         roofSizeSet: String(params.roofSizeSet),
       })
 
-      /* 배치면초기설정 조회 */
-      fetchBasicSettings(params.planNo, null)
-
       /* 메뉴 설정 */
-      if (['2', '3'].includes(basicSetting?.roofSizeSet)) {
+      if (['2', '3'].includes(params.roofSizeSet)) {
         setMenuNumber(3)
         setType('surface')
         setCurrentMenu(MENU.BATCH_CANVAS.BATCH_DRAWING)
@@ -489,6 +492,9 @@ export function useCanvasSetting() {
         setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
       }
 
+      /* 배치면초기설정 조회 */
+      fetchBasicSettings(params.planNo, 'basicSettingSave')
+
       /* 모듈 선택 데이터 초기화 */
       resetModuleSelectionData()
       moduleSelectedDataTrigger({ common: {}, module: {}, roofConstructions: [] })
@@ -536,9 +542,6 @@ export function useCanvasSetting() {
         roofSizeSet: String(params.roofSizeSet),
       })
 
-      /* 배치면초기설정 조회 */
-      fetchBasicSettings(Number(params.planNo), null)
-
       /* 메뉴 설정 */
       if (['2', '3'].includes(params?.roofSizeSet)) {
         setMenuNumber(3)
@@ -550,6 +553,9 @@ export function useCanvasSetting() {
         setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
       }
 
+      /* 배치면초기설정 조회 */
+      fetchBasicSettings(Number(params.planNo), 'basicSettingSave')
+
       /* 모듈 선택 데이터 초기화 */
       resetModuleSelectionData()
       moduleSelectedDataTrigger({ common: {}, module: {}, roofConstructions: [] })

src/hooks/surface/usePlacementShapeDrawing.js

@@ -3,6 +3,7 @@ import {
   adsorptionPointAddModeState,
   adsorptionPointModeState,
   adsorptionRangeState,
+  canvasSettingState,
   canvasState,
   dotLineIntervalSelector,
   globalPitchState,
@@ -49,7 +50,7 @@ export function usePlacementShapeDrawing(id) {
   const { addPolygonByLines, drawDirectionArrow } = usePolygon()
   const { tempGridMode } = useTempGrid()
   const { setSurfaceShapePattern } = useRoofFn()
-
+  const canvasSetting = useRecoilValue(canvasSettingState)
   const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
   const adsorptionPointAddMode = useRecoilValue(adsorptionPointAddModeState)
   const adsorptionPointMode = useRecoilValue(adsorptionPointModeState)
@@ -246,6 +247,10 @@ export function usePlacementShapeDrawing(id) {
         setPoints([])
         canvas?.renderAll()
 
+        if (+canvasSetting?.roofSizeSet === 3) {
+          closePopup(id)
+          return
+        }
         addPopup(id, 1, <PlacementSurfaceLineProperty id={id} roof={roof} />, false)
       }
 

src/hooks/surface/useSurfaceShapeBatch.js

@@ -2,7 +2,7 @@
 
 import { useEffect } from 'react'
 import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
-import { canvasState, currentCanvasPlanState, globalPitchState } from '@/store/canvasAtom'
+import { canvasSettingState, canvasState, currentCanvasPlanState, globalPitchState } from '@/store/canvasAtom'
 import { MENU, POLYGON_TYPE } from '@/common/common'
 import { getIntersectionPoint } from '@/util/canvas-util'
 import { degreesToRadians } from '@turf/turf'
@@ -29,7 +29,7 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
   const lengthTextFont = useRecoilValue(fontSelector('lengthText'))
   const resetOuterLinePoints = useResetRecoilState(outerLinePointsState)
   const resetPlacementShapeDrawingPoints = useResetRecoilState(placementShapeDrawingPointsState)
-
+  const canvasSetting = useRecoilValue(canvasSettingState)
   const canvas = useRecoilValue(canvasState)
   const globalPitch = useRecoilValue(globalPitchState)
   const roofDisplay = useRecoilValue(roofDisplaySelector)
@@ -200,6 +200,7 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
 
         // closePopup(id)
         initEvent()
+        if (+canvasSetting?.roofSizeSet === 3) return
         const popupId = uuidv4()
         addPopup(popupId, 2, <PlacementSurfaceLineProperty roof={batchSurface} id={popupId} setIsHidden={setIsHidden} />)
       })
@@ -734,28 +735,30 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
       confirmFn: () => {
         canvas.clear()
 
-        fabric.Image.fromURL(`${backgroundImage.path}`, function (img) {
+        if (backgroundImage) {
-          console.log('🚀 ~ img:', img)
+          fabric.Image.fromURL(`${backgroundImage.path}`, function (img) {
-          img.set({
+            console.log('🚀 ~ img:', img)
-            left: 0,
+            img.set({
-            top: 0,
+              left: 0,
-            width: img.width,
+              top: 0,
-            height: img.height,
+              width: img.width,
-            name: 'backGroundImage',
+              height: img.height,
-            selectable: false,
+              name: 'backGroundImage',
-            hasRotatingPoint: false, // 회전 핸들 활성화
+              selectable: false,
-            lockMovementX: false,
+              hasRotatingPoint: false, // 회전 핸들 활성화
-            lockMovementY: false,
+              lockMovementX: false,
-            lockRotation: false,
+              lockMovementY: false,
-            lockScalingX: false,
+              lockRotation: false,
-            lockScalingY: false,
+              lockScalingX: false,
+              lockScalingY: false,
+            })
+            // image = img
+            canvas?.add(img)
+            canvas?.sendToBack(img)
+            canvas?.renderAll()
+            // setBackImg(img)
           })
-          // image = img
+        }
-          canvas?.add(img)
-          canvas?.sendToBack(img)
-          canvas?.renderAll()
-          // setBackImg(img)
-        })
 
         resetOuterLinePoints()
         resetPlacementShapeDrawingPoints()

src/hooks/useContextMenu.js

@@ -1,5 +1,5 @@
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
-import { canvasState, currentMenuState, currentObjectState } from '@/store/canvasAtom'
+import { canvasSettingState, canvasState, currentMenuState, currentObjectState } from '@/store/canvasAtom'
 import { useEffect, useState } from 'react'
 import { MENU, POLYGON_TYPE } from '@/common/common'
 import AuxiliarySize from '@/components/floor-plan/modal/auxiliary/AuxiliarySize'
@@ -41,9 +41,11 @@ import { useGrid } from './common/useGrid'
 import { useAdsorptionPoint } from './useAdsorptionPoint'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
 import { MODULE_ALIGN_TYPE, useModule } from './module/useModule'
+import PlacementSurfaceLineProperty from '@/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty'
 
 export function useContextMenu() {
   const canvas = useRecoilValue(canvasState)
+  const canvasSetting = useRecoilValue(canvasSettingState)
   const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
   const setContextPopupPosition = useSetRecoilState(contextPopupPositionState) // 현재 메뉴
   const [contextMenu, setContextMenu] = useRecoilState(contextMenuListState) // 메뉴.object 별 context menu
@@ -263,54 +265,6 @@ export function useContextMenu() {
           ],
         ])
         break
-      case MENU.BATCH_CANVAS.SLOPE_SETTING:
-      case MENU.BATCH_CANVAS.BATCH_DRAWING:
-      case MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH:
-      case MENU.BATCH_CANVAS.OBJECT_BATCH:
-      case MENU.BATCH_CANVAS.ALL_REMOVE:
-      case MENU.BATCH_CANVAS.DEFAULT:
-        setContextMenu([
-          [
-            {
-              id: 'sizeEdit',
-              name: getMessage('contextmenu.size.edit'),
-              component: <SizeSetting id={popupId} target={currentObject} />,
-            },
-            {
-              id: 'remove',
-              shortcut: ['d', 'D'],
-              name: `${getMessage('contextmenu.remove')}(D)`,
-            },
-            {
-              id: 'move',
-              shortcut: ['m', 'M'],
-              name: `${getMessage('contextmenu.move')}(M)`,
-            },
-            {
-              id: 'copy',
-              shortcut: ['c', 'C'],
-              name: `${getMessage('contextmenu.copy')}(C)`,
-            },
-          ],
-          [
-            {
-              id: 'roofMaterialEdit',
-              name: getMessage('contextmenu.roof.material.edit'),
-              component: <RoofAllocationSetting id={popupId} />,
-            },
-            {
-              id: 'linePropertyEdit',
-              name: getMessage('contextmenu.line.property.edit'),
-              component: <LinePropertySetting id={popupId} />,
-            },
-            {
-              id: 'flowDirectionEdit',
-              name: getMessage('contextmenu.flow.direction.edit'),
-              component: <FlowDirectionSetting id={popupId} target={currentObject} />,
-            },
-          ],
-        ])
-        break
       default:
         setContextMenu([])
         break
@@ -432,7 +386,14 @@ export function useContextMenu() {
               {
                 id: 'linePropertyEdit',
                 name: getMessage('contextmenu.line.property.edit'),
-                component: <LinePropertySetting id={popupId} target={currentObject} />,
+                fn: () => {
+                  if (+canvasSetting.roofSizeSet === 3) {
+                    swalFire({ text: getMessage('contextmenu.line.property.edit.roof.size.3') })
+                  } else {
+                    addPopup(popupId, 1, <PlacementSurfaceLineProperty id={popupId} roof={currentObject} />)
+                  }
+                },
+                // component: <LinePropertySetting id={popupId} target={currentObject} />,
               },
               {
                 id: 'flowDirectionEdit',
@@ -740,24 +701,23 @@ export function useContextMenu() {
           ])
           break
         case 'moduleSetupSurface':
-        case 'roof':
           setContextMenu([
             [
               {
                 id: 'moduleVerticalCenterAlign',
                 name: getMessage('contextmenu.module.vertical.align'),
-                fn: () => alignModule(MODULE_ALIGN_TYPE.VERTICAL, currentObject.arrayData),
+                fn: () => alignModule(MODULE_ALIGN_TYPE.VERTICAL, currentObject.arrayData ?? [currentObject]),
               },
               {
                 id: 'moduleHorizonCenterAlign',
                 name: getMessage('contextmenu.module.horizon.align'),
-                fn: () => alignModule(MODULE_ALIGN_TYPE.HORIZONTAL, currentObject.arrayData),
+                fn: () => alignModule(MODULE_ALIGN_TYPE.HORIZONTAL, currentObject.arrayData ?? [currentObject]),
               },
               {
                 id: 'moduleRemove',
                 name: getMessage('contextmenu.module.remove'),
                 fn: () => {
-                  moduleRoofRemove(currentObject.arrayData)
+                  moduleRoofRemove(currentObject.arrayData ?? [currentObject])
 
                   // const moduleSetupSurface = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
                   // const modules = canvas.getObjects().filter((obj) => obj.surfaceId === moduleSetupSurface.id && obj.name === POLYGON_TYPE.MODULE)
@@ -768,12 +728,12 @@ export function useContextMenu() {
               {
                 id: 'moduleMove',
                 name: getMessage('contextmenu.module.move'),
-                component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.MOVE_ALL} arrayData={currentObject.arrayData} />,
+                component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.MOVE_ALL} arrayData={currentObject.arrayData ?? [currentObject]} />,
               },
               {
                 id: 'moduleCopy',
                 name: getMessage('contextmenu.module.copy'),
-                component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COPY_ALL} arrayData={currentObject.arrayData} />,
+                component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COPY_ALL} arrayData={currentObject.arrayData ?? [currentObject]} />,
               },
               // {
               //   id: 'moduleCircuitNumberEdit',

src/hooks/useMode.js

@@ -5743,5 +5743,8 @@ export function useMode() {
     drawCellManualInTrestle,
     setDirectionTrestles,
     cutHelpLines,
+    createRoofPolygon,
+    createMarginPolygon,
+    createPaddingPolygon,
   }
 }