모듈 일괄 정렬, 일괄 삭제 기능 추가

src/hooks/module/useModule.js

@@ -800,60 +800,65 @@ export function useModule() {
     }
   }
 
-  const alignModule = (type) => {
+  const alignModule = (type, surfaceArray) => {
-    const moduleSetupSurface = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
+    surfaceArray.forEach((surface) => {
-    const modules = canvas.getObjects().filter((obj) => obj.surfaceId === moduleSetupSurface.id && obj.name === POLYGON_TYPE.MODULE)
+      const modules = canvas
-    const objects = getObjects()
+        .getObjects()
-    let [top, bottom, left, right] = [0, 0, 0, 0]
+        .filter((module) => module.name === POLYGON_TYPE.MODULE)
+        .filter((module) => module.surfaceId === surface.id)
 
-    top = Math.min(...modules.map((module) => module.top))
+      const objects = getObjects()
-    bottom = Math.max(...modules.map((module) => module.top + module.height))
+      let [top, bottom, left, right] = [0, 0, 0, 0]
-    left = Math.min(...modules.map((module) => module.left))
-    right = Math.max(...modules.map((module) => module.left + module.width))
-    const moduleSurfacePos = {
-      top: Math.min(...moduleSetupSurface.points.map((point) => point.y)),
-      left: Math.min(...moduleSetupSurface.points.map((point) => point.x)),
-    }
-    const [height, width] = [bottom - top, right - left]
-    const verticalCenterLength = moduleSurfacePos.top + moduleSetupSurface.height / 2 - (top + height / 2)
-    const horizontalCenterLength = moduleSurfacePos.left + moduleSetupSurface.width / 2 - (left + width / 2)
-    let isWarning = false
 
-    canvas.discardActiveObject()
+      top = Math.min(...modules.map((module) => module.top))
-    modules.forEach((module) => {
+      bottom = Math.max(...modules.map((module) => module.top + module.height))
-      module.originPos = {
+      left = Math.min(...modules.map((module) => module.left))
-        left: module.left,
+      right = Math.max(...modules.map((module) => module.left + module.width))
-        top: module.top,
+      const moduleSurfacePos = {
-        fill: module.fill,
+        top: Math.min(...surface.points.map((point) => point.y)),
-      }
+        left: Math.min(...surface.points.map((point) => point.x)),
-      if (type === MODULE_ALIGN_TYPE.VERTICAL) {
-        module.set({ top: module.top + verticalCenterLength })
-      } else if (type === MODULE_ALIGN_TYPE.HORIZONTAL) {
-        module.set({ left: module.left + horizontalCenterLength })
       }
+      const [height, width] = [bottom - top, right - left]
+      const verticalCenterLength = moduleSurfacePos.top + surface.height / 2 - (top + height / 2)
+      const horizontalCenterLength = moduleSurfacePos.left + surface.width / 2 - (left + width / 2)
+      let isWarning = false
 
+      canvas.discardActiveObject()
+      modules.forEach((module) => {
+        module.originPos = {
+          left: module.left,
+          top: module.top,
+          fill: module.fill,
+        }
+        if (type === MODULE_ALIGN_TYPE.VERTICAL) {
+          module.set({ top: module.top + verticalCenterLength })
+        } else if (type === MODULE_ALIGN_TYPE.HORIZONTAL) {
+          module.set({ left: module.left + horizontalCenterLength })
+        }
+
+        canvas.renderAll()
+        module.setCoords()
+        if (isOverlapObjects(module, objects) || isOutsideSurface(module, surface)) {
+          isWarning = true
+          module.set({ fill: 'red' })
+        }
+      })
       canvas.renderAll()
-      module.setCoords()
+      if (isWarning) {
-      if (isOverlapObjects(module, objects) || isOutsideSurface(module, moduleSetupSurface)) {
+        swalFire({
-        isWarning = true
+          title: getMessage('can.not.align.module'),
-        module.set({ fill: 'red' })
+          icon: 'error',
+          type: 'alert',
+          confirmFn: () => {
+            modules.forEach((module) => {
+              module.set({ top: module.originPos.top, left: module.originPos.left, fill: module.originPos.fill })
+              module.setCoords()
+            })
+            canvas.renderAll()
+          },
+        })
       }
     })
-    canvas.renderAll()
-    if (isWarning) {
-      swalFire({
-        title: getMessage('can.not.align.module'),
-        icon: 'error',
-        type: 'alert',
-        confirmFn: () => {
-          modules.forEach((module) => {
-            module.set({ top: module.originPos.top, left: module.originPos.left, fill: module.originPos.fill })
-            module.setCoords()
-          })
-          canvas.renderAll()
-        },
-      })
-    }
   }
 
   const modulesRemove = () => {
@@ -867,6 +872,19 @@ export function useModule() {
     canvas.renderAll()
   }
 
+  const moduleRoofRemove = (surfaceArray) => {
+    surfaceArray.forEach((surface) => {
+      surface.modules = []
+      canvas
+        .getObjects()
+        .filter((module) => module.name === POLYGON_TYPE.MODULE && module.surfaceId === surface.id)
+        .forEach((module) => {
+          canvas.remove(module)
+        })
+    })
+    setModuleStatisticsData()
+  }
+
   const isOverlapOtherModules = (module, otherModules) => {
     return otherModules.some(
       (otherModule) =>
@@ -1031,6 +1049,7 @@ export function useModule() {
     moduleColumnInsert,
     muduleRowInsert,
     modulesRemove,
+    moduleRoofRemove,
     alignModule,
     setModuleStatisticsData,
   }

src/hooks/module/useModuleBasicSetting.js

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
-import { canvasSettingState, canvasState, checkedModuleState, isManualModuleSetupState } from '@/store/canvasAtom'
+import { canvasSettingState, canvasState, checkedModuleState, currentObjectState, isManualModuleSetupState } from '@/store/canvasAtom'
 import { rectToPolygon, polygonToTurfPolygon, calculateVisibleModuleHeight, getDegreeByChon } from '@/util/canvas-util'
 import { addedRoofsState, basicSettingState, roofDisplaySelector } from '@/store/settingAtom'
 import offsetPolygon, { calculateAngle } from '@/util/qpolygon-utils'
@@ -45,6 +45,8 @@ export function useModuleBasicSetting(tabNum) {
   const { getTrestleDetailList } = useMasterController()
   const [saleStoreNorthFlg, setSaleStoreNorthFlg] = useState(false)
 
+  const [currentObject, setCurrentObject] = useRecoilState(currentObjectState)
+
   useEffect(() => {
     // console.log('basicSetting', basicSetting)
     if (canvas) {
@@ -256,8 +258,6 @@ export function useModuleBasicSetting(tabNum) {
 
   //설치 범위 지정 클릭 이벤트
   const toggleSelection = (setupSurface) => {
-    console.log('setupSurface', setupSurface)
-
     const isExist = selectedModuleInstSurfaceArray.some((obj) => obj.parentId === setupSurface.parentId)
     //최초 선택일때
     if (!isExist) {
@@ -279,6 +279,7 @@ export function useModuleBasicSetting(tabNum) {
 
       canvas?.renderAll()
       selectedModuleInstSurfaceArray.push(setupSurface)
+      setCurrentObject({ name: 'moduleSetupSurface', arrayData: [...selectedModuleInstSurfaceArray] })
     } else {
       //선택후 재선택하면 선택안됨으로 변경
       setupSurface.set({
@@ -293,6 +294,7 @@ export function useModuleBasicSetting(tabNum) {
       const removeIndex = setupSurface.parentId
       const removeArrayIndex = selectedModuleInstSurfaceArray.findIndex((obj) => obj.parentId === removeIndex)
       selectedModuleInstSurfaceArray.splice(removeArrayIndex, 1)
+      setCurrentObject({ name: 'moduleSetupSurface', arrayData: [...selectedModuleInstSurfaceArray] })
     }
 
     canvas?.renderAll()

src/hooks/useContextMenu.js

@@ -67,7 +67,7 @@ export function useContextMenu() {
   const commonTextFont = useRecoilValue(fontSelector('commonText'))
   const { settingsData, setSettingsDataSave } = useCanvasSetting()
   const { swalFire } = useSwal()
-  const { alignModule, modulesRemove } = useModule()
+  const { alignModule, modulesRemove, moduleRoofRemove } = useModule()
   const { removeRoofMaterial, removeAllRoofMaterial, moveRoofMaterial } = useRoofFn()
 
   const currentMenuSetting = () => {
@@ -332,8 +332,8 @@ export function useContextMenu() {
   }, [currentContextMenu])
 
   useEffect(() => {
+    console.log('currentObject', currentObject)
     if (currentObject?.name) {
-      console.log('object', currentObject)
       switch (currentObject.name) {
         case 'triangleDormer':
         case 'pentagonDormer':
@@ -725,21 +725,23 @@ export function useContextMenu() {
               {
                 id: 'moduleVerticalCenterAlign',
                 name: getMessage('contextmenu.module.vertical.align'),
-                fn: () => alignModule(MODULE_ALIGN_TYPE.VERTICAL),
+                fn: () => alignModule(MODULE_ALIGN_TYPE.VERTICAL, currentObject.arrayData),
               },
               {
                 id: 'moduleHorizonCenterAlign',
                 name: getMessage('contextmenu.module.horizon.align'),
-                fn: () => alignModule(MODULE_ALIGN_TYPE.HORIZONTAL),
+                fn: () => alignModule(MODULE_ALIGN_TYPE.HORIZONTAL, currentObject.arrayData),
               },
               {
                 id: 'moduleRemove',
                 name: getMessage('contextmenu.module.remove'),
                 fn: () => {
-                  const moduleSetupSurface = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
+                  moduleRoofRemove(currentObject.arrayData)
-                  const modules = canvas.getObjects().filter((obj) => obj.surfaceId === moduleSetupSurface.id && obj.name === POLYGON_TYPE.MODULE)
+
-                  canvas.remove(...modules)
+                  // const moduleSetupSurface = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
-                  canvas.renderAll()
+                  // const modules = canvas.getObjects().filter((obj) => obj.surfaceId === moduleSetupSurface.id && obj.name === POLYGON_TYPE.MODULE)
+                  // canvas.remove(...modules)
+                  // canvas.renderAll()
                 },
               },
               {