모듈이동 작업중

src/components/floor-plan/modal/module/PanelEdit.jsx

@@ -3,21 +3,106 @@ import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import { usePopup } from '@/hooks/usePopup'
 import { useMessage } from '@/hooks/useMessage'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import { polygonToTurfPolygon } from '@/util/canvas-util'
+import { deepCopyArray } from '@/util/common-utils'
+import { canvasState } from '@/store/canvasAtom'
+import * as turf from '@turf/turf'
+import { POLYGON_TYPE } from '@/common/common'
 
 export default function PanelEdit(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
   const { id, pos = contextPopupPosition, type = 'move', apply } = props
   const { closePopup } = usePopup()
   const [length, setLength] = useState(0)
-  const [direction, setDirection] = useState('')
+  const [direction, setDirection] = useState('up')
   const { getMessage } = useMessage()
+  const canvas = useRecoilValue(canvasState)
 
+  useEffect(() => {
+    if (canvas) {
+      const isSetupModules = canvas.getObjects().filter((obj) => obj.name === 'module') // selectedObj에 없는 객체만 필터링
+      isSetupModules.forEach((obj) => obj.set({ lockMovementX: false, lockMovementY: false }))
+    }
+  }, [])
+
+  //모듈 이동 적용
   const handleApply = () => {
-    apply()
+    contextModuleMove(length, direction)
     closePopup(id)
   }
 
+  const contextModuleMove = (length, direction) => {
+    const checkModuleDisjointSurface = (squarePolygon, turfModuleSetupSurface) => {
+      return turf.booleanContains(turfModuleSetupSurface, squarePolygon) || turf.booleanWithin(squarePolygon, turfModuleSetupSurface)
+    }
+
+    const selectedObj = canvas.getActiveObjects() //선택된 객체들을 가져옴
+    const selectedIds = selectedObj.map((obj) => obj.id) // selectedObj의 ID 추출
+
+    canvas.discardActiveObject() //선택해제
+
+    const isSetupModules = canvas.getObjects().filter((obj) => obj.name === 'module' && !selectedIds.includes(obj.id)) // selectedObj에 없는 객체만 필터링
+    const selectedModules = canvas.getObjects().filter((obj) => selectedIds.includes(obj.id) && obj.name === 'module') //선택했던 객체들만 가져옴
+    const setupSurface = canvas
+      .getObjects()
+      .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === selectedModules[0].surfaceId)[0]
+    const isOverlapArray = []
+    const isInSurfaceArray = []
+
+    if (selectedModules) {
+      canvas.remove(...selectedModules)
+
+      selectedModules.forEach((module) => {
+        module.set({
+          originCoords: {
+            left: module.left,
+            top: module.top,
+          },
+        })
+
+        if (direction === 'up') {
+          module.set({ ...module, top: module.top - Number(length) })
+        } else if (direction === 'down') {
+          module.set({ ...module, top: module.top + Number(length) })
+        } else if (direction === 'left') {
+          module.set({ ...module, left: module.left - Number(length) })
+        } else if (direction === 'right') {
+          module.set({ ...module, left: module.left + Number(length) })
+        }
+        module.setCoords()
+        canvas.renderAll()
+
+        //다른 모듈과 겹치는지 확인하는 로직
+        const isOverlap = isSetupModules.some((isSetupModule) =>
+          turf.booleanOverlap(polygonToTurfPolygon(module, true), polygonToTurfPolygon(isSetupModule, true)),
+        )
+        isOverlapArray.push(isOverlap)
+
+        const turfModuleSetupSurface = polygonToTurfPolygon(setupSurface, true)
+        const turfModule = polygonToTurfPolygon(module, true)
+
+        //나갔는지 확인하는 로직
+        const isInSurface = turf.booleanContains(turfModuleSetupSurface, turfModule) || turf.booleanWithin(turfModule, turfModuleSetupSurface)
+        isInSurfaceArray.push(isInSurface)
+      })
+
+      const isNotOverlap = isOverlapArray.some((isOverlap) => isOverlap) // true면 겹침
+      const isNotOutSurface = isInSurfaceArray.every((isOutSurface) => isOutSurface) //false면 밖으로 나감
+
+      //안겹치고 안나갔으면 이동시킨다 아니면 원래 위치로 돌려놓는다
+      if (isNotOverlap || !isNotOutSurface) {
+        selectedModules.forEach((module) => {
+          module.set({ ...module, left: module.originCoords.left, top: module.originCoords.top })
+          module.setCoords()
+        })
+      }
+
+      canvas.add(...selectedModules)
+      canvas.renderAll()
+    }
+  }
+
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm mount`}>
@@ -34,33 +119,33 @@ export default function PanelEdit(props) {
               <div className="grid-input-form">
                 <span className="mr10">{getMessage('margin')}</span>
                 <div className="input-grid mr5">
-                  <input type="text" className="input-origin" defaultValue={0} onClick={(e) => setLength(e.target.value)} />
+                  <input type="text" className="input-origin" defaultValue={0} onKeyUp={(e) => setLength(e.target.value)} />
                 </div>
                 <span>mm</span>
               </div>
               <div className="grid-direction">
                 <button
-                  className={`direction up ${direction === '↑' ? 'act' : ''}`}
+                  className={`direction up ${direction === 'up' ? 'act' : ''}`}
                   onClick={() => {
-                    setDirection('↑')
+                    setDirection('up')
                   }}
                 ></button>
                 <button
-                  className={`direction down ${direction === '↓' ? 'act' : ''}`}
+                  className={`direction down ${direction === 'down' ? 'act' : ''}`}
                   onClick={() => {
-                    setDirection('↓')
+                    setDirection('down')
                   }}
                 ></button>
                 <button
-                  className={`direction left ${direction === '←' ? 'act' : ''}`}
+                  className={`direction left ${direction === 'left' ? 'act' : ''}`}
                   onClick={() => {
-                    setDirection('←')
+                    setDirection('left')
                   }}
                 ></button>
                 <button
-                  className={`direction right ${direction === '→' ? 'act' : ''}`}
+                  className={`direction right ${direction === 'right' ? 'act' : ''}`}
                   onClick={() => {
-                    setDirection('→')
+                    setDirection('right')
                   }}
                 ></button>
               </div>

src/hooks/common/useCanvasConfigInitialize.js

@@ -65,6 +65,7 @@ export function useCanvasConfigInitialize() {
     roofInit() //화면표시 초기화
     groupDimensionInit()
     reGroupInit() //그룹 객체 재그룹
+    moduleInit()
   }
 
   const gridInit = () => {
@@ -196,5 +197,19 @@ export function useCanvasConfigInitialize() {
     })
   }
 
+  const moduleInit = () => {
+    canvas
+      .getObjects()
+      .filter((obj) => obj.name === 'module')
+      .forEach((obj) => {
+        obj.set({
+          selectable: true,
+          lockMovementX: false,
+          lockMovementY: false,
+        })
+        obj.setViewLengthText(false)
+      })
+  }
+
   return { canvasLoadInit, gridInit }
 }

src/hooks/common/useCommonUtils.js

@@ -603,8 +603,12 @@ export function useCommonUtils() {
   }
 
   const deleteObject = () => {
-    const obj = canvas?.getActiveObject()
+    const selectedObj = canvas?.getActiveObjects()
-    commonDeleteText(obj)
+    if (selectedObj) {
+      selectedObj.forEach((obj) => {
+        commonDeleteText(obj)
+      })
+    }
   }
 
   const moveObject = () => {

src/hooks/module/useModuleBasicSetting.js

@@ -1,7 +1,7 @@
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
-import { rectToPolygon } from '@/util/canvas-util'
+import { rectToPolygon, setSurfaceShapePattern, polygonToTurfPolygon } from '@/util/canvas-util'
-import { roofDisplaySelector } from '@/store/settingAtom'
+import { basicSettingState, roofDisplaySelector } from '@/store/settingAtom'
 import offsetPolygon, { calculateAngle } from '@/util/qpolygon-utils'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { moduleSetupSurfaceState, moduleIsSetupState } from '@/store/canvasAtom'
@@ -14,6 +14,7 @@ import { canvasSettingState } from '@/store/canvasAtom'
 import { compasDegAtom } from '@/store/orientationAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
+import { useEffect } from 'react'
 
 export function useModuleBasicSetting() {
   const canvas = useRecoilValue(canvasState)
@@ -25,10 +26,37 @@ export function useModuleBasicSetting() {
   const canvasSetting = useRecoilValue(canvasSettingState)
   const compasDeg = useRecoilValue(compasDegAtom)
   const { setSurfaceShapePattern } = useRoofFn()
+  const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
+
+  useEffect(() => {
+    // console.log('basicSetting', basicSetting)
+    if (canvas) {
+      canvas.selection = true
+      canvas.selectionFullyContained = true
+      // canvas.on('selection:created', (e) => {
+      //   console.log('selection:created', e.selected)
+      // })
+    }
+  }, [])
 
   // const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useContext(EventContext)
   let selectedModuleInstSurfaceArray = []
 
+  const moduleOptions = {
+    fill: '#BFFD9F',
+    stroke: 'black',
+    strokeWidth: 0.1,
+    selectable: true, // 선택 가능하게 설정
+    lockMovementX: true, // X 축 이동 잠금
+    lockMovementY: true, // Y 축 이동 잠금
+    lockRotation: true, // 회전 잠금
+    lockScalingX: true, // X 축 크기 조정 잠금
+    lockScalingY: true, // Y 축 크기 조정 잠금
+    parentId: moduleSetupSurface.parentId,
+    surfaceId: moduleSetupSurface.id,
+    name: 'module',
+  }
+
   //모듈,회로에서 다른메뉴 -> 배치면으로 갈 경수 초기화
   const restoreModuleInstArea = () => {
     //설치면 삭제
@@ -176,21 +204,6 @@ 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 = []
@@ -240,7 +253,6 @@ export function useModuleBasicSetting() {
               lockRotation: true,
               lockScalingX: true,
               lockScalingY: true,
-              opacity: 0.8,
               name: 'tempModule',
               parentId: moduleSetupSurfaces[i].parentId,
             })
@@ -440,6 +452,7 @@ export function useModuleBasicSetting() {
               canvas?.remove(tempModule)
               //안겹치면 넣는다
               // tempModule.setCoords()
+              moduleOptions.surfaceId = trestlePolygon.id
               let manualModule = new QPolygon(tempModule.points, { ...moduleOptions })
               canvas?.add(manualModule)
               manualDrawModules.push(manualModule)
@@ -516,15 +529,15 @@ export function useModuleBasicSetting() {
     const moduleOptions = {
       fill: '#BFFD9F',
       stroke: 'black',
-      strokeWidth: 0.1,
+      strokeWidth: 0.3,
-      selectable: false, // 선택 가능하게 설정
+      selectable: true, // 선택 가능하게 설정
       lockMovementX: true, // X 축 이동 잠금
       lockMovementY: true, // Y 축 이동 잠금
       lockRotation: true, // 회전 잠금
       lockScalingX: true, // X 축 크기 조정 잠금
       lockScalingY: true, // Y 축 크기 조정 잠금
-      opacity: 0.8,
       parentId: moduleSetupSurface.parentId,
+      surfaceId: moduleSetupSurface.id,
       name: 'module',
     }
 
@@ -593,7 +606,8 @@ export function useModuleBasicSetting() {
       return turf.booleanContains(turfModuleSetupSurface, squarePolygon) || turf.booleanWithin(squarePolygon, turfModuleSetupSurface)
     }
 
-    const downFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine, isCenter = false) => {
+    const downFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, isCenter = false) => {
+      const flowModuleLine = moduleSetupSurface.flowLines
       let startPoint = flowModuleLine.bottom
 
       if (isCenter) {
@@ -637,9 +651,9 @@ export function useModuleBasicSetting() {
       if (isMaxSetup) totalWidth = totalWidth * 2 //최대배치시 2배로 늘려서 반씩 검사하기위함
 
       for (let j = 0; j < diffTopEndPoint; j++) {
-        bottomMargin = j === 0 ? 1 : 2
+        bottomMargin = 1 * j
         for (let i = 0; i <= totalWidth; i++) {
-          leftMargin = i === 0 ? 1 : 2
+          leftMargin = 1 * i
           chidoriLength = 0
           if (isChidori) {
             chidoriLength = j % 2 === 0 ? 0 : width / 2
@@ -657,6 +671,7 @@ export function useModuleBasicSetting() {
           let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
           let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
 
+          moduleOptions.surfaceId = moduleSetupSurface.id
           let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
           canvas?.add(tempModule)
           moduleSetupArray.push(tempModule)
@@ -664,7 +679,8 @@ export function useModuleBasicSetting() {
       }
     }
 
-    const leftFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, aaa, isCenter = false) => {
+    const leftFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, isCenter = false) => {
+      const flowModuleLine = moduleSetupSurface.flowLines
       let startPoint = flowModuleLine.left
 
       //중앙배치일 경우에는 계산한다
@@ -718,6 +734,7 @@ export function useModuleBasicSetting() {
           let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
 
           // if (disjointFromTrestle && isDisjoint) {
+          moduleOptions.surfaceId = moduleSetupSurface.id
           let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
           canvas?.add(tempModule)
           moduleSetupArray.push(tempModule)
@@ -725,7 +742,8 @@ export function useModuleBasicSetting() {
       }
     }
 
-    const topFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine, isCenter = false) => {
+    const topFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, isCenter = false) => {
+      const flowModuleLine = moduleSetupSurface.flowLines
       let startPoint = flowModuleLine.top
 
       if (isCenter) {
@@ -789,6 +807,7 @@ export function useModuleBasicSetting() {
           let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
 
           // if (disjointFromTrestle && isDisjoint) {
+          moduleOptions.surfaceId = moduleSetupSurface.id
           let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
           canvas?.add(tempModule)
           moduleSetupArray.push(tempModule)
@@ -796,7 +815,8 @@ export function useModuleBasicSetting() {
       }
     }
 
-    const rightFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine, isCenter = false) => {
+    const rightFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, isCenter = false) => {
+      const flowModuleLine = moduleSetupSurface.flowLines
       let startPoint = flowModuleLine.right
 
       if (isCenter) {
@@ -850,6 +870,7 @@ export function useModuleBasicSetting() {
           let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
 
           // if (disjointFromTrestle && isDisjoint) {
+          moduleOptions.surfaceId = moduleSetupSurface.id
           let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
           canvas?.add(tempModule)
           moduleSetupArray.push(tempModule)
@@ -883,44 +904,44 @@ export function useModuleBasicSetting() {
       if (setupLocation === 'eaves') {
         // 흐름방향이 남쪽일때
         if (moduleSetupSurface.flowDirection === 'south') {
-          downFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
+          downFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface)
         }
         if (moduleSetupSurface.flowDirection === 'west') {
-          leftFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
+          leftFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface)
         }
         if (moduleSetupSurface.flowDirection === 'east') {
-          rightFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
+          rightFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface)
         }
         if (moduleSetupSurface.flowDirection === 'north') {
-          topFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
+          topFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface)
         }
       } else if (setupLocation === 'ridge') {
         //용마루
         if (moduleSetupSurface.flowDirection === 'south') {
-          topFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
+          topFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface)
         }
         if (moduleSetupSurface.flowDirection === 'west') {
-          rightFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
+          rightFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface)
         }
         if (moduleSetupSurface.flowDirection === 'east') {
-          leftFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
+          leftFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface)
         }
         if (moduleSetupSurface.flowDirection === 'north') {
-          downFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
+          downFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface)
         }
       } else if (setupLocation === 'center') {
         //중가면
         if (moduleSetupSurface.flowDirection === 'south') {
-          downFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines, true)
+          downFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, true)
         }
         if (moduleSetupSurface.flowDirection === 'west') {
-          leftFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines, true)
+          leftFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, true)
         }
         if (moduleSetupSurface.flowDirection === 'east') {
-          rightFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines, true)
+          rightFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, true)
         }
         if (moduleSetupSurface.flowDirection === 'north') {
-          topFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines, true)
+          topFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, true)
         }
       }
 
@@ -1214,20 +1235,6 @@ export function useModuleBasicSetting() {
     return turf.polygon([coordinates])
   }
 
-  const polygonToTurfPolygon = (object, current = false) => {
-    let coordinates
-    coordinates = object.points.map((point) => [point.x, point.y])
-    if (current) coordinates = object.getCurrentPoints().map((point) => [point.x, point.y])
-    coordinates.push(coordinates[0])
-    return turf.polygon(
-      [coordinates],
-      {},
-      {
-        parentId: object.parentId,
-      },
-    )
-  }
-
   const batchObjectGroupToTurfPolygon = (group) => {
     const polygons = group.getObjects().filter((obj) => obj.type === 'QPolygon')
     let allPoints = []
@@ -1547,14 +1554,14 @@ export function useModuleBasicSetting() {
       fill: '#BFFD9F',
       stroke: 'black',
       strokeWidth: 0.1,
-      selectable: false, // 선택 가능하게 설정
+      selectable: true, // 선택 가능하게 설정
       lockMovementX: true, // X 축 이동 잠금
       lockMovementY: true, // Y 축 이동 잠금
       lockRotation: true, // 회전 잠금
       lockScalingX: true, // X 축 크기 조정 잠금
       lockScalingY: true, // Y 축 크기 조정 잠금
-      opacity: 0.8,
       parentId: moduleSetupSurface.parentId,
+      surfaceId: moduleSetupSurface.id,
       name: 'module',
     }
 
@@ -1638,7 +1645,6 @@ export function useModuleBasicSetting() {
               lockRotation: true,
               lockScalingX: true,
               lockScalingY: true,
-              opacity: 0.8,
               name: 'tempModule',
               parentId: moduleSetupSurfaces[i].parentId,
             })
@@ -1833,6 +1839,7 @@ export function useModuleBasicSetting() {
             //마우스 클릭시 set으로 해당 위치에 셀을 넣음
             const isOverlap = manualDrawModules.some((module) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(module))) //겹치는지 확인
             if (!isOverlap) {
+              moduleOptions.surfaceId = trestlePolygon.id
               let manualModule = new QPolygon(tempModule.points, { ...moduleOptions })
               canvas?.add(manualModule)
               manualDrawModules.push(tempModule)
@@ -1954,14 +1961,14 @@ export function useModuleBasicSetting() {
       fill: '#BFFD9F',
       stroke: 'black',
       strokeWidth: 0.1,
-      selectable: false, // 선택 가능하게 설정
+      selectable: true, // 선택 가능하게 설정
       lockMovementX: true, // X 축 이동 잠금
       lockMovementY: true, // Y 축 이동 잠금
       lockRotation: true, // 회전 잠금
       lockScalingX: true, // X 축 크기 조정 잠금
       lockScalingY: true, // Y 축 크기 조정 잠금
-      opacity: 0.8,
       parentId: moduleSetupSurface.parentId,
+      surfaceId: moduleSetupSurface.id,
       name: 'module',
     }
 
@@ -2064,6 +2071,7 @@ export function useModuleBasicSetting() {
           let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
           let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
 
+          moduleOptions.surfaceId = moduleSetupSurface.id
           let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
           canvas?.add(tempModule)
           moduleSetupArray.push(tempModule)
@@ -2103,6 +2111,7 @@ export function useModuleBasicSetting() {
           let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
 
           // if (disjointFromTrestle && isDisjoint) {
+          moduleOptions.surfaceId = moduleSetupSurface.id
           let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
           canvas?.add(tempModule)
           moduleSetupArray.push(tempModule)
@@ -2145,6 +2154,7 @@ export function useModuleBasicSetting() {
           let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
 
           // if (disjointFromTrestle && isDisjoint) {
+          moduleOptions.surfaceId = moduleSetupSurface.id
           let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
           canvas?.add(tempModule)
           moduleSetupArray.push(tempModule)
@@ -2185,6 +2195,7 @@ export function useModuleBasicSetting() {
           let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
 
           // if (disjointFromTrestle && isDisjoint) {
+          moduleOptions.surfaceId = moduleSetupSurface.id
           let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
           canvas?.add(tempModule)
           moduleSetupArray.push(tempModule)
@@ -2234,8 +2245,8 @@ export function useModuleBasicSetting() {
         let isDisjoint = checkModuleDisjointObjects(module.turfPoints, containsBatchObjects)
 
         if (!(disjointFromTrestle && isDisjoint)) {
-          // canvas?.remove(module)
+          canvas?.remove(module)
-          module.set({ fill: 'rgba(255,190,41, 0.4)', stroke: 'black', strokeWidth: 1 })
+          // module.set({ fill: 'rgba(255,190,41, 0.4)', stroke: 'black', strokeWidth: 1 })
           return false
         } else {
           return module
@@ -2272,6 +2283,8 @@ export function useModuleBasicSetting() {
       // canvas.add(groupTest)
     })
     // console.log(calculateForApi())
+
+    //드래그 하기위해 기능 활성화
   }
 
   return {

src/hooks/useContextMenu.js

@@ -597,12 +597,13 @@ export function useContextMenu() {
             ],
           ])
           break
-        case 'panel':
+        case 'module':
           setContextMenu([
             [
               {
                 id: 'remove',
                 name: getMessage('contextmenu.remove'),
+                fn: () => deleteObject(),
               },
               {
                 id: 'move',
@@ -661,7 +662,7 @@ export function useContextMenu() {
             ],
           ])
           break
-        case 'module':
+        case 'moduleSetupSurface':
         case 'dimensionLineText':
           setContextMenu([
             [

src/util/canvas-util.js

@@ -751,18 +751,6 @@ export const pointsToTurfPolygon = (points) => {
   return turf.polygon([coordinates])
 }
 
-export const polygonToTurfPolygon = (polygon) => {
-  const coordinates = polygon.points.map((point) => [point.x, point.y])
-  coordinates.push(coordinates[0])
-  return turf.polygon(
-    [coordinates],
-    {},
-    {
-      parentId: polygon.parentId,
-    },
-  )
-}
-
 export const triangleToPolygon = (triangle) => {
   const points = []
   const halfWidth = triangle.width / 2
@@ -1003,3 +991,17 @@ export function findAndRemoveClosestPoint(targetPoint, points) {
 
   return closestPoint
 }
+
+export function polygonToTurfPolygon(object, current = false) {
+  let coordinates
+  coordinates = object.points.map((point) => [point.x, point.y])
+  if (current) coordinates = object.getCurrentPoints().map((point) => [point.x, point.y])
+  coordinates.push(coordinates[0])
+  return turf.polygon(
+    [coordinates],
+    {},
+    {
+      parentId: object.parentId,
+    },
+  )
+}