모듈 -> 배치면 이동시 배치면 초기화

src/common/common.js

@@ -161,6 +161,7 @@ export const SAVE_KEY = [
   'surfaceCompass',
   'moduleCompass',
   'isFixed',
+  'modules',
 ]
 
 export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype]

src/components/floor-plan/CanvasMenu.jsx

@@ -40,6 +40,8 @@ import EstimateCopyPop from '../estimate/popup/EstimateCopyPop'
 import { pwrGnrSimTypeState } from '@/store/simulatorAtom'
 import { useAxios } from '@/hooks/useAxios'
 
+import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
+
 export default function CanvasMenu(props) {
   const { menuNumber, setMenuNumber } = props
   const pathname = usePathname()
@@ -49,7 +51,7 @@ export default function CanvasMenu(props) {
   const [type, setType] = useRecoilState(menuTypeState)
   const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState)
   const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
-  const setCurrentMenu = useSetRecoilState(currentMenuState)
+  const [currentMenu, setCurrentMenu] = useRecoilState(currentMenuState)
   const setOuterLinePoints = useSetRecoilState(outerLinePointsState)
   const setPlacementPoints = useSetRecoilState(placementShapeDrawingPointsState)
   const canvasSetting = useRecoilValue(canvasSettingState)
@@ -74,6 +76,7 @@ export default function CanvasMenu(props) {
   const { commonFunctions } = useCommonUtils()
   const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
   const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)
+  const { restoreModuleInstArea } = useModuleBasicSetting()
 
   const onClickNav = (menu) => {
     setMenuNumber(menu.index)
@@ -88,6 +91,10 @@ export default function CanvasMenu(props) {
         setType('outline')
         break
       case 3:
+        if (type === 'module') {
+          restoreModuleInstArea()
+        }
+
         setType('surface')
         break
       case 4:

src/hooks/module/useModuleBasicSetting.js

@@ -18,11 +18,33 @@ export function useModuleBasicSetting() {
   const canvas = useRecoilValue(canvasState)
   const roofDisplay = useRecoilValue(roofDisplaySelector)
   const [moduleSetupSurface, setModuleSetupSurface] = useRecoilState(moduleSetupSurfaceState)
-  const [moduleIsSetup, setModuleIsSetup] = useRecoilState(moduleIsSetupState)
+  // const [moduleIsSetup, setModuleIsSetup] = useRecoilState(moduleIsSetupState)
   const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useEvent()
   // const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useContext(EventContext)
   let selectedModuleInstSurfaceArray = []
 
+  //모듈,회로에서 다른메뉴 -> 배치면으로 갈 경수 초기화
+  const restoreModuleInstArea = () => {
+    //설치면 삭제
+    const setupArea = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
+
+    //모듈 삭제 및 초기화
+    setupArea.forEach((obj) => {
+      if (obj.modules.length > 0) {
+        obj.modules.forEach((module) => {
+          canvas.remove(module)
+        })
+      }
+      canvas.remove(obj)
+      obj.modules = []
+    })
+
+    //지붕패턴 변경
+    const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof')
+    roofs.forEach((roof) => {
+      setSurfaceShapePattern(roof, roofDisplay.column, false) //패턴 변경
+    })
+  }
   const makeModuleInstArea = () => {
     //지붕 객체 반환
     const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof')
@@ -32,6 +54,11 @@ export function useModuleBasicSetting() {
     }
 
     roofs.forEach((roof) => {
+      const isExistSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.parentId === roof.id)
+      if (isExistSurface) {
+        return
+      }
+
       setSurfaceShapePattern(roof, roofDisplay.column, true) //패턴 변경
       const offsetPoints = offsetPolygon(roof.points, -20) //안쪽 offset
       //모듈설치영역?? 생성
@@ -56,6 +83,7 @@ export function useModuleBasicSetting() {
         flipX: roof.flipX,
         flipY: roof.flipY,
         surfaceId: surfaceId,
+        modules: [],
       })
 
       setupSurface.setViewLengthText(false)
@@ -135,13 +163,29 @@ export function useModuleBasicSetting() {
           obj.name === BATCH_TYPE.SHADOW,
       ) //도머s 객체
 
+    const moduleOptions = {
+      fill: '#BFFD9F',
+      stroke: 'black',
+      strokeWidth: 0.1,
+      selectable: false, // 선택 가능하게 설정
+      lockMovementX: true, // X 축 이동 잠금
+      lockMovementY: true, // Y 축 이동 잠금
+      lockRotation: true, // 회전 잠금
+      lockScalingX: true, // X 축 크기 조정 잠금
+      lockScalingY: true, // Y 축 크기 조정 잠금
+      opacity: 0.8,
+      parentId: moduleSetupSurface.parentId,
+      name: 'module',
+    }
+
     if (moduleSetupSurfaces.length !== 0) {
       let tempModule
-      let manualDrawModules = moduleIsSetup // 앞에서 자동으로 했을때 추가됨
+      let manualDrawModules = []
       let inside = false
       let turfPolygon
       let flowDirection
       let trestlePolygon
+
       addCanvasMouseEventListener('mouse:move', (e) => {
         //마우스 이벤트 삭제 후 재추가
         const mousePoint = canvas.getPointer(e.e)
@@ -149,6 +193,7 @@ export function useModuleBasicSetting() {
         for (let i = 0; i < moduleSetupSurfaces.length; i++) {
           turfPolygon = polygonToTurfPolygon(moduleSetupSurfaces[i])
           trestlePolygon = moduleSetupSurfaces[i]
+          manualDrawModules = moduleSetupSurfaces[i].modules // 앞에서 자동으로 했을때 추가됨
           flowDirection = moduleSetupSurfaces[i].flowDirection //도형의 방향
           let width = flowDirection === 'south' || flowDirection === 'north' ? 172 : 113
           let height = flowDirection === 'south' || flowDirection === 'north' ? 113 : 172
@@ -326,6 +371,7 @@ export function useModuleBasicSetting() {
         }
 
         if (!inside) {
+          // tempModule.set({ fill: 'red' })
           canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule'))
           canvas?.renderAll()
         }
@@ -378,14 +424,12 @@ export function useModuleBasicSetting() {
             //마우스 클릭시 set으로 해당 위치에 셀을 넣음
             const isOverlap = manualDrawModules.some((module) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(module))) //겹치는지 확인
             if (!isOverlap) {
+              canvas?.remove(tempModule)
               //안겹치면 넣는다
-              tempModule.setCoords()
+              // tempModule.setCoords()
-              tempModule.set({ name: 'module', fill: '#BFFD9F' })
+              let manualModule = new QPolygon(tempModule.points, { ...moduleOptions })
-              manualDrawModules.push(tempModule) //모듈배열에 추가
+              canvas?.add(manualModule)
-              //해당 모듈에 프로퍼티로 넣는다
+              manualDrawModules.push(manualModule)
-              trestlePolygon.set({
-                modules: manualDrawModules,
-              })
             } else {
               alert('셀끼리 겹치면 안되죠?')
             }
@@ -424,13 +468,6 @@ export function useModuleBasicSetting() {
       return
     }
 
-    if (moduleIsSetup.length > 0) {
-      alert('기존 모듈은 제거됩니다.')
-      moduleIsSetup.forEach((module) => {
-        canvas?.remove(module)
-      })
-    }
-
     //어짜피 자동으로 누르면 선택안된데도 다 날아간다
     canvas.getObjects().forEach((obj) => {
       if (obj.name === 'module') {
@@ -438,6 +475,15 @@ export function useModuleBasicSetting() {
       }
     })
 
+    moduleSetupSurfaces.forEach((obj) => {
+      if (obj.modules) {
+        obj.modules.forEach((module) => {
+          canvas?.remove(module)
+        })
+        obj.modules = []
+      }
+    })
+
     notSelectedTrestlePolygons.forEach((obj) => {
       if (obj.modules) {
         obj.modules.forEach((module) => {
@@ -887,7 +933,7 @@ export function useModuleBasicSetting() {
       })
 
       moduleSetupSurface.set({ modules: setupedModules })
-      setModuleIsSetup(moduleSetupArray)
+      // setModuleIsSetup(moduleSetupArray)
     })
   }
 
@@ -1374,5 +1420,6 @@ export function useModuleBasicSetting() {
     makeModuleInstArea,
     manualModuleSetup,
     autoModuleSetup,
+    restoreModuleInstArea,
   }
 }

src/util/canvas-util.js

@@ -824,6 +824,8 @@ export function setSurfaceShapePattern(polygon, mode = 'onlyBorder', trestleMode
     ctx.strokeStyle = 'black'
     ctx.lineWidth = 0.2
     ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'
+  } else {
+    ctx.fillStyle = 'rgba(255, 255, 255, 1)'
   }
 
   if (polygon.direction === 'east' || polygon.direction === 'west') {