From 9109db9b404aef77519e25eb8c34742dc10a8485 Mon Sep 17 00:00:00 2001 From: yjnoh Date: Mon, 24 Feb 2025 16:47:27 +0900 Subject: [PATCH] =?UTF-8?q?=EC=88=98=EB=8F=99=EB=AA=A8=EB=93=88=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=8B=9C=20=EC=96=B8=EB=A7=88=EC=9A=B4?= =?UTF-8?q?=ED=8A=B8,=20=EB=8F=84=EB=A8=B8=20=EB=B0=A9=ED=96=A5=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/common.js | 1 + .../floor-plan/modal/basic/BasicSetting.jsx | 5 - .../floor-plan/modal/basic/step/Placement.jsx | 8 +- src/hooks/module/useModuleBasicSetting.js | 3 +- src/hooks/object/useObjectBatch.js | 103 +++++++++++++++--- 5 files changed, 98 insertions(+), 22 deletions(-) diff --git a/src/common/common.js b/src/common/common.js index 0424fcfd..1452aa3a 100644 --- a/src/common/common.js +++ b/src/common/common.js @@ -188,6 +188,7 @@ export const SAVE_KEY = [ 'onlyOffset', 'isChidory', 'textVisible', + 'groupPoints', ] export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype] diff --git a/src/components/floor-plan/modal/basic/BasicSetting.jsx b/src/components/floor-plan/modal/basic/BasicSetting.jsx index 291ef086..e7ead904 100644 --- a/src/components/floor-plan/modal/basic/BasicSetting.jsx +++ b/src/components/floor-plan/modal/basic/BasicSetting.jsx @@ -115,11 +115,6 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) { //팝업 닫기 버튼 이벤트 const handleClosePopup = (id) => { - if (tabNum == 3) { - if (isManualModuleSetup) { - setIsManualModuleSetup(false) - } - } setIsClosePopup({ close: true, id: id }) } diff --git a/src/components/floor-plan/modal/basic/step/Placement.jsx b/src/components/floor-plan/modal/basic/step/Placement.jsx index e8d8048f..2b0e9c03 100644 --- a/src/components/floor-plan/modal/basic/step/Placement.jsx +++ b/src/components/floor-plan/modal/basic/step/Placement.jsx @@ -1,7 +1,7 @@ import { forwardRef, useEffect, useState } from 'react' import { useMessage } from '@/hooks/useMessage' import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting' -import { checkedModuleState, currentCanvasPlanState } from '@/store/canvasAtom' +import { checkedModuleState, currentCanvasPlanState, isManualModuleSetupState } from '@/store/canvasAtom' import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil' import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions' import { isObjectNotEmpty } from '@/util/common-utils' @@ -23,6 +23,8 @@ const Placement = forwardRef((props, refs) => { const [isMultiModule, setIsMultiModule] = useState(false) + const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState) + //모듈 배치면 생성 useEffect(() => { if (moduleSelectionData) { @@ -33,6 +35,10 @@ const Placement = forwardRef((props, refs) => { } makeModuleInitArea(moduleSelectionData) } + + return () => { + setIsManualModuleSetup(false) + } }, []) //최초 지입시 체크 diff --git a/src/hooks/module/useModuleBasicSetting.js b/src/hooks/module/useModuleBasicSetting.js index c284f47f..e14011ab 100644 --- a/src/hooks/module/useModuleBasicSetting.js +++ b/src/hooks/module/useModuleBasicSetting.js @@ -22,14 +22,13 @@ import { v4 as uuidv4 } from 'uuid' // import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle' import { isObjectNotEmpty } from '@/util/common-utils' import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle' -import { useMode } from '../useMode' +import { useMode } from '@/hooks/useMode' export function useModuleBasicSetting(tabNum) { const canvas = useRecoilValue(canvasState) const { getMessage } = useMessage() const roofDisplay = useRecoilValue(roofDisplaySelector) const [moduleSetupSurface, setModuleSetupSurface] = useRecoilState(moduleSetupSurfaceState) - const [moduleIsSetup, setModuleIsSetup] = useRecoilState(moduleIsSetupState) const { addCanvasMouseEventListener, initEvent, removeMouseEvent, addTargetMouseEventListener } = useEvent() // const { setModuleStatisticsData } = useCircuitTrestle() const { swalFire } = useSwal() diff --git a/src/hooks/object/useObjectBatch.js b/src/hooks/object/useObjectBatch.js index c82846f2..231f422c 100644 --- a/src/hooks/object/useObjectBatch.js +++ b/src/hooks/object/useObjectBatch.js @@ -298,6 +298,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) { if (buttonAct === 3) { const bottomLength = height / (pitch * 0.25) const bottomOffsetLength = (height + offsetRef) / (pitch * 0.25) + let groupDormerPoints = [] //나중에 offset을 위한 포인트 저장용 addCanvasMouseEventListener('mouse:move', (e) => { isDown = true @@ -403,9 +404,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) { direction = 'north' } - const groupPoints = offsetRef > 0 ? triangleToPolygon(dormerOffset) : triangleToPolygon(dormer) - - let splitedTriangle = offsetRef > 0 ? splitDormerTriangle(dormerOffset, directionRef) : splitDormerTriangle(dormer, directionRef) + let { leftPoints, rightPoints, groupPoints } = + offsetRef > 0 ? splitDormerTriangle(dormerOffset, directionRef) : splitDormerTriangle(dormer, directionRef) canvas?.remove(offsetRef > 0 ? dormerOffset : dormer) if (offsetRef > 0) @@ -416,7 +416,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) { strokeDashArray: [0], }) //오프셋이 있을땐 같이 도머로 만든다 - const leftTriangle = new QPolygon(splitedTriangle[0], { + const leftTriangle = new QPolygon(leftPoints, { fill: 'white', stroke: 'black', strokeWidth: 1, @@ -435,7 +435,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) { fontWeight: lengthTextFont.fontWeight.value, }) - const rightTriangle = new QPolygon(splitedTriangle[1], { + const rightTriangle = new QPolygon(rightPoints, { fill: 'white', stroke: 'black', strokeWidth: 1, @@ -467,6 +467,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) { let offsetPolygon + groupDormerPoints = groupPoints + if (offsetRef > 0) { canvas?.remove(dormer) @@ -499,7 +501,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) { parentId: selectedSurface.id, originX: 'center', originY: 'center', - groupPoints: groupPoints, + groupPoints: groupDormerPoints, }) canvas?.add(objectGroup) @@ -526,6 +528,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) { //(동의길이 깊이)+출폭(깊이)-[(입력한 폭값)/2+출폭(폭)]*(0.25*입력한 寸) const heightOffsetLength = height + offsetRef - (width / 2 + offsetWidthRef) * (pitch * 0.25) + let groupDormerPoints = [] + addCanvasMouseEventListener('mouse:move', (e) => { isDown = true if (!isDown) return @@ -639,7 +643,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) { } const offsetMode = offsetRef > 0 || offsetWidthRef > 0 ? 'offset' : 'normal' - let splitedPentagon = + let { leftPoints, rightPoints, groupPoints } = offsetRef > 0 || offsetWidthRef > 0 ? splitDormerPentagon(dormerOffset, directionRef, offsetMode) : splitDormerPentagon(dormer, directionRef, offsetMode) @@ -653,7 +657,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) { strokeDashArray: [0], }) //오프셋이 있을땐 같이 도머로 만든다 - const leftPentagon = new QPolygon(splitedPentagon[0], { + const leftPentagon = new QPolygon(leftPoints, { fill: 'transparent', stroke: 'red', strokeWidth: 1, @@ -670,7 +674,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) { pitch: pitch, }) - const rightPentagon = new QPolygon(splitedPentagon[1], { + const rightPentagon = new QPolygon(rightPoints, { fill: 'transparent', stroke: 'red', strokeWidth: 1, @@ -699,6 +703,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) { let offsetPolygon + groupDormerPoints = groupPoints + if (offsetRef > 0) { canvas?.remove(dormer) @@ -723,7 +729,6 @@ export function useObjectBatch({ isHidden, setIsHidden }) { } const groupPolygon = offsetPolygon ? [leftPentagon, rightPentagon, offsetPolygon] : [leftPentagon, rightPentagon] - const groupPoints = offsetRef > 0 ? pentagonOffsetPoints : pentagonPoints const objectGroup = new fabric.Group(groupPolygon, { subTargetCheck: true, @@ -733,7 +738,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) { groupYn: true, originX: 'center', originY: 'center', - groupPoints: groupPoints, + groupPoints: groupDormerPoints, }) canvas?.add(objectGroup) @@ -774,6 +779,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) { let leftPoints = [] let rightPoints = [] + let groupPoints = [] if (direction === 'down') { leftPoints = [ @@ -787,6 +793,12 @@ export function useObjectBatch({ isHidden, setIsHidden }) { { x: triangle.left, y: triangle.top + triangle.height }, { x: triangle.left + halfWidth, y: triangle.top + triangle.height }, ] + + groupPoints = [ + { x: triangle.left, y: triangle.top }, + { x: triangle.left - halfWidth, y: triangle.top + triangle.height }, + { x: triangle.left + halfWidth, y: triangle.top + triangle.height }, + ] } else if (direction === 'up') { leftPoints = [ { x: triangle.left, y: triangle.top }, @@ -799,6 +811,12 @@ export function useObjectBatch({ isHidden, setIsHidden }) { { x: triangle.left, y: triangle.top - triangle.height }, { x: triangle.left + halfWidth, y: triangle.top - triangle.height }, ] + + groupPoints = [ + { x: triangle.left, y: triangle.top }, + { x: triangle.left - halfWidth, y: triangle.top - triangle.height }, + { x: triangle.left + halfWidth, y: triangle.top - triangle.height }, + ] } else if (direction === 'left') { leftPoints = [ { x: triangle.left, y: triangle.top }, @@ -811,6 +829,12 @@ export function useObjectBatch({ isHidden, setIsHidden }) { { x: triangle.left - triangle.height, y: triangle.top }, { x: triangle.left - triangle.height, y: triangle.top + halfWidth }, ] + + groupPoints = [ + { x: triangle.left, y: triangle.top }, + { x: triangle.left - triangle.height, y: triangle.top - halfWidth }, + { x: triangle.left - triangle.height, y: triangle.top + halfWidth }, + ] } else if (direction === 'right') { leftPoints = [ { x: triangle.left, y: triangle.top }, @@ -820,11 +844,17 @@ export function useObjectBatch({ isHidden, setIsHidden }) { rightPoints = [ { x: triangle.left, y: triangle.top }, - { x: triangle.left + triangle.height, y: triangle.top }, + { x: triangle.left + triangle.height, y: triangle.top + triangle.height }, + { x: triangle.left + triangle.height, y: triangle.top - triangle.height }, + ] + + groupPoints = [ + { x: triangle.left, y: triangle.top }, + { x: triangle.left + triangle.height, y: triangle.top + triangle.height }, { x: triangle.left + triangle.height, y: triangle.top - triangle.height }, ] } - return [leftPoints, rightPoints] + return { leftPoints, rightPoints, groupPoints } } const splitDormerPentagon = (pentagon, direction, offsetMode) => { @@ -832,6 +862,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) { let leftPoints = [] let rightPoints = [] + let groupPoints = [] if (direction === 'down') { leftPoints = [ @@ -847,6 +878,14 @@ export function useObjectBatch({ isHidden, setIsHidden }) { { x: points[3].x, y: points[3].y }, { x: points[4].x, y: points[4].y }, ] + + groupPoints = [ + { x: points[0].x, y: points[0].y }, + { x: points[1].x, y: points[1].y }, + { x: points[2].x, y: points[3].y }, + { x: points[3].x, y: points[3].y }, + { x: points[4].x, y: points[4].y }, + ] } else if (direction === 'up') { leftPoints = [ { x: points[0].x, y: points[0].y }, @@ -861,6 +900,14 @@ export function useObjectBatch({ isHidden, setIsHidden }) { { x: points[3].x, y: points[0].y - (points[2].y - points[0].y) }, { x: points[0].x, y: points[0].y - (points[2].y - points[0].y) }, ] + + groupPoints = [ + { x: points[0].x, y: points[0].y }, // 기준점 + { x: points[1].x, y: points[0].y - (points[1].y - points[0].y) }, + { x: points[2].x, y: points[0].y - (points[2].y - points[0].y) }, + { x: points[3].x, y: points[0].y - (points[2].y - points[0].y) }, + { x: points[3].x, y: points[0].y - (points[1].y - points[0].y) }, + ] } else if (direction === 'left') { leftPoints = [ { x: points[0].x, y: points[0].y }, @@ -881,6 +928,20 @@ export function useObjectBatch({ isHidden, setIsHidden }) { }, { x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y }, ] + + groupPoints = [ + { x: points[0].x, y: points[0].y }, + { x: points[0].x - (points[1].y - points[0].y), y: points[0].y - (points[0].x - points[1].x) }, + { + x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), + y: points[0].y - (points[0].x - points[1].x), + }, + { + x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), + y: points[0].y + (points[0].x - points[1].x), + }, + { x: points[0].x - (points[1].y - points[0].y), y: points[0].y + (points[0].x - points[1].x) }, + ] } else if (direction === 'right') { leftPoints = [ { x: points[0].x, y: points[0].y }, @@ -901,9 +962,23 @@ export function useObjectBatch({ isHidden, setIsHidden }) { }, { x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y }, ] + + groupPoints = [ + { x: points[0].x, y: points[0].y }, + { x: points[0].x + (points[1].y - points[0].y), y: points[0].y + (points[0].x - points[1].x) }, + { + x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), + y: points[0].y + (points[0].x - points[1].x), + }, + { + x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), + y: points[0].y - (points[0].x - points[1].x), + }, + { x: points[0].x + (points[1].y - points[0].y), y: points[0].y - (points[0].x - points[1].x) }, + ] } - return [leftPoints, rightPoints] + return { leftPoints, rightPoints, groupPoints } } const resizeObjectBatch = (side, target, width, height) => {