From 0cb3b135192f31ccf4148fcb571a205cad6e8e01 Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Tue, 8 Jul 2025 14:33:14 +0900 Subject: [PATCH] =?UTF-8?q?[1187]=20=E3=80=90HANASYS=20DESIGN=E3=80=91?= =?UTF-8?q?=E3=83=A2=E3=82=B8=E3=83=A5=E3=83=BC=E3=83=AB=E7=A7=BB=E5=8B=95?= =?UTF-8?q?=E3=81=AB=E3=81=A4=E3=81=84=E3=81=A6=20=EB=AA=A8=EB=93=88=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99=20=EC=9D=B4=EC=83=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../floor-plan/modal/module/PanelEdit.jsx | 11 +++++-- src/hooks/common/useTurf.js | 16 +++++----- src/hooks/module/useModule.js | 31 +++++++++++++------ 3 files changed, 37 insertions(+), 21 deletions(-) diff --git a/src/components/floor-plan/modal/module/PanelEdit.jsx b/src/components/floor-plan/modal/module/PanelEdit.jsx index 5e8b5a61..97b02112 100644 --- a/src/components/floor-plan/modal/module/PanelEdit.jsx +++ b/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() } }, []) diff --git a/src/hooks/common/useTurf.js b/src/hooks/common/useTurf.js index 6696cd0a..a9c1f202 100644 --- a/src/hooks/common/useTurf.js +++ b/src/hooks/common/useTurf.js @@ -2,20 +2,20 @@ import * as turf from '@turf/turf' export const useTurf = () => { /** - * 배치면 안에 있는지 확인 - * @param {*} squarePolygon - * @param {*} turfModuleSetupSurface + * 모듈이 배치면 안에 있는지 확인 + * @param {*} module + * @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 } diff --git a/src/hooks/module/useModule.js b/src/hooks/module/useModule.js index 4397ebb1..0d276e97 100644 --- a/src/hooks/module/useModule.js +++ b/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 { useRecoilValue, useSetRecoilState } from 'recoil' +import { polygonToTurfPolygon } from '@/util/canvas-util' +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 ( - !turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(module, true)) || - !turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(moduleSetupSurface, true)) - ) + return !checkModuleDisjointSurface(polygonToTurfPolygon(module, true), polygonToTurfPolygon(moduleSetupSurface, true)) } const getRowModules = (target) => {