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

@@ -4,10 +4,7 @@ import { contextPopupPositionState } from '@/store/popupAtom'
 import { usePopup } from '@/hooks/usePopup'
 import { useMessage } from '@/hooks/useMessage'
 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'
 import { useModule } from '@/hooks/module/useModule'
 import { useSwal } from '@/hooks/useSwal'
@@ -41,7 +38,15 @@ export default function PanelEdit(props) {
 
     //팝업 닫을때 선택 해제
     return () => {
+      const modules = canvas.getObjects().filter((obj) => obj.name === 'module')
+      modules.forEach((obj) => {
+        obj.set({
+          stroke: 'black',
+          strokeWidth: 0.3,
+        })
+      })
       canvas?.discardActiveObject() //선택해제
+      canvas.renderAll()
     }
   }, [])
 

src/hooks/common/useTurf.js

@@ -2,20 +2,20 @@ import * as turf from '@turf/turf'
 
 export const useTurf = () => {
   /**
-   * 배치면 안에 있는지 확인
+   * 모듈이 배치면 안에 있는지 확인
-   * @param {*} squarePolygon
+   * @param {*} module
-   * @param {*} turfModuleSetupSurface
+   * @param {*} surface
    * @param spare
    * @returns
    */
-  const checkModuleDisjointSurface = (squarePolygon, turfModuleSetupSurface, spare = 1) => {
+  const checkModuleDisjointSurface = (module, surface, spare = 1) => {
     // 표면 영역을 spare만큼 수동 확장
     const expandedSurface = {
       type: 'Polygon',
       coordinates: [
-        turfModuleSetupSurface.geometry.coordinates[0].map(([x, y]) => {
+        surface.geometry.coordinates[0].map(([x, y]) => {
           // 각 점을 바깥쪽으로 2 단위씩 이동
-          const coords = turfModuleSetupSurface.geometry.coordinates[0]
+          const coords = surface.geometry.coordinates[0]
           const centerX = coords.slice(0, -1).reduce((sum, [x, y]) => sum + x, 0) / (coords.length - 1)
           const centerY = coords.slice(0, -1).reduce((sum, [x, y]) => sum + y, 0) / (coords.length - 1)
 
@@ -24,9 +24,9 @@ export const useTurf = () => {
       ],
     }
 
-    const isWithin = turf.booleanContains(expandedSurface, squarePolygon) || turf.booleanWithin(squarePolygon, expandedSurface)
+    const isWithin = turf.booleanContains(expandedSurface, module) || turf.booleanWithin(module, expandedSurface)
 
-    const isContact = turf.booleanIntersects(squarePolygon, expandedSurface) && !turf.booleanOverlap(squarePolygon, expandedSurface)
+    const isContact = turf.booleanIntersects(module, expandedSurface) && !turf.booleanOverlap(module, expandedSurface)
 
     return isWithin || isContact
   }

src/hooks/module/useModule.js

@@ -1,16 +1,16 @@
-import { BATCH_TYPE, POLYGON_TYPE, TRESTLE_MATERIAL } from '@/common/common'
+import { BATCH_TYPE, POLYGON_TYPE } from '@/common/common'
 import { canvasState } from '@/store/canvasAtom'
-import { isOverlap, polygonToTurfPolygon, rectToPolygon } from '@/util/canvas-util'
+import { polygonToTurfPolygon } from '@/util/canvas-util'
-import { useRecoilValue, useSetRecoilState } from 'recoil'
+import { useRecoilValue } from 'recoil'
 import { v4 as uuidv4 } from 'uuid'
 import * as turf from '@turf/turf'
 import { useSwal } from '../useSwal'
 import { useModuleBasicSetting } from './useModuleBasicSetting'
 import { useMessage } from '../useMessage'
 import { selectedModuleState } from '@/store/selectedModuleOptions'
-import { moduleStatisticsState } from '@/store/circuitTrestleAtom'
 import { useCircuitTrestle } from '../useCirCuitTrestle'
 import { useTrestle } from './useTrestle'
+import { useTurf } from '@/hooks/common/useTurf'
 
 export const MODULE_REMOVE_TYPE = {
   LEFT: 'left',
@@ -42,6 +42,7 @@ export function useModule() {
   const selectedModules = useRecoilValue(selectedModuleState)
   const { setModuleStatisticsData, resetCircuits } = useCircuitTrestle()
   const { clear: removeTrestleMaterials } = useTrestle()
+  const { checkModuleDisjointSurface } = useTurf()
 
   const moduleMove = (length, direction) => {
     const selectedObj = canvas.getActiveObjects() //선택된 객체들을 가져옴
@@ -70,13 +71,16 @@ export function useModule() {
           top: module.top,
           fill: module.fill,
         }
-        module.set({ top, left })
+        module.set({ top, left, strokeWidth: 0.3 })
         module.setCoords()
 
+        canvas.renderAll()
+
         if (isOverlapOtherModules(module, isSetupModules) || isOverlapObjects(module, objects) || isOutsideSurface(module, setupSurface)) {
           isWarning = true
           module.set({ fill: 'red' })
         }
+        module.set({ strokeWidth: 3 })
         canvas.renderAll()
       })
 
@@ -87,7 +91,11 @@ export function useModule() {
           type: 'alert',
           confirmFn: () => {
             selectedModules.forEach((module) => {
-              module.set({ left: module.originCoords.left, top: module.originCoords.top, fill: module.originCoords.fill })
+              module.set({
+                left: module.originCoords.left,
+                top: module.originCoords.top,
+                fill: module.originCoords.fill,
+              })
               module.setCoords()
             })
             canvas.renderAll()
@@ -126,6 +134,7 @@ export function useModule() {
     const objects = getObjects()
     const moduleSetupSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)
     let isWarning = false
+    activeModule.set({ strokeWidth: 0.3 })
 
     modules.forEach((module) => {
       const { top, left } = getPosotion(module, direction, length, false)
@@ -145,6 +154,8 @@ export function useModule() {
       }
     })
 
+    activeModule.set({ strokeWidth: 3 })
+
     canvas.renderAll()
     if (isWarning) {
       swalFire({
@@ -350,6 +361,7 @@ export function useModule() {
       return
     }
     const activeModule = canvas.getObjects().find((obj) => canvas.getActiveObjects()[0].id === obj.id)
+    activeModule.set({ strokeWidth: 1 })
     if (activeModule.circuit) {
       const surfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
       if (surfaces.some((surface) => surface.isComplete)) {
@@ -383,6 +395,7 @@ export function useModule() {
         obj.set({
           parentId: module.parentId,
           initOptions: module.initOptions,
+          stroke: 'black',
           direction: module.direction,
           arrow: module.arrow,
           name: module.name,
@@ -411,6 +424,7 @@ export function useModule() {
       }
       canvas.renderAll()
     })
+    activeModule.set({ strokeWidth: 3 })
 
     if (isWarning) {
       swalFire({
@@ -982,10 +996,7 @@ export function useModule() {
   }
 
   const isOutsideSurface = (module, moduleSetupSurface) => {
-    return (
+    return !checkModuleDisjointSurface(polygonToTurfPolygon(module, true), polygonToTurfPolygon(moduleSetupSurface, true))
-      !turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(module, true)) ||
-      !turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(moduleSetupSurface, true))
-    )
   }
 
   const getRowModules = (target) => {