From 8a2ad0c273d2ac4449e7728ec1e2812dd5c7b976 Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Sat, 8 Feb 2025 17:07:06 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=EB=B3=80=EB=B3=84=EB=A1=9C=20=EC=9E=91?= =?UTF-8?q?=EC=97=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/common/useRoofFn.js | 5 ++++- src/hooks/roofcover/usePropertiesSetting.js | 13 +++++++------ src/hooks/roofcover/useRoofAllocationSetting.js | 5 ++++- src/hooks/roofcover/useRoofShapeSetting.js | 14 ++++++++++---- 4 files changed, 25 insertions(+), 12 deletions(-) diff --git a/src/hooks/common/useRoofFn.js b/src/hooks/common/useRoofFn.js index 95af888c..54ebaecb 100644 --- a/src/hooks/common/useRoofFn.js +++ b/src/hooks/common/useRoofFn.js @@ -1,10 +1,11 @@ -import { useRecoilValue } from 'recoil' +import { useRecoilValue, useResetRecoilState } from 'recoil' import { canvasState, currentObjectState } from '@/store/canvasAtom' import { selectedRoofMaterialSelector } from '@/store/settingAtom' import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting' import { POLYGON_TYPE } from '@/common/common' import { useEvent } from '@/hooks/useEvent' import { useLine } from '@/hooks/useLine' +import { outerLinePointsState } from '@/store/outerLineAtom' const ROOF_COLOR = { 0: 'rgb(199,240,213)', @@ -17,6 +18,7 @@ export function useRoofFn() { const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector) const currentObject = useRecoilValue(currentObjectState) const { addCanvasMouseEventListener, initEvent } = useEvent() + const resetPoints = useResetRecoilState(outerLinePointsState) const { addPitchText } = useLine() //면형상 선택 클릭시 지붕 패턴 입히기 @@ -332,6 +334,7 @@ export function useRoofFn() { }) canvas.renderAll() + resetPoints() } return { setSurfaceShapePattern, removeRoofMaterial, removeAllRoofMaterial, moveRoofMaterial, removeOuterLines } diff --git a/src/hooks/roofcover/usePropertiesSetting.js b/src/hooks/roofcover/usePropertiesSetting.js index 425f0642..57aadd6d 100644 --- a/src/hooks/roofcover/usePropertiesSetting.js +++ b/src/hooks/roofcover/usePropertiesSetting.js @@ -7,6 +7,9 @@ import { usePolygon } from '@/hooks/usePolygon' import { useLine } from '@/hooks/useLine' import { outerLinePointsState } from '@/store/outerLineAtom' import { usePopup } from '@/hooks/usePopup' +import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/PropertiesSetting' +import RoofShapeSetting from '@/components/floor-plan/modal/roofShape/RoofShapeSetting' +import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting' // 외벽선 속성 설정 export function usePropertiesSetting(id) { @@ -19,7 +22,7 @@ export function usePropertiesSetting(id) { const { addPolygonByLines } = usePolygon() const { removeLine, hideLine } = useLine() - const { closePopup } = usePopup() + const { addPopup, closePopup } = usePopup() useEffect(() => { const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') @@ -134,7 +137,8 @@ export function usePropertiesSetting(id) { }) }) canvas.discardActiveObject() - closePopup(id) + // closePopup(id) + addPopup(id, 1, ) return } @@ -157,10 +161,7 @@ export function usePropertiesSetting(id) { setPoints([]) canvas.renderAll() roof.drawHelpLine() - - closePopup(id) - return - } else { + addPopup(id, 1, ) return } } diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js index c4fe1f39..dc14f2b0 100644 --- a/src/hooks/roofcover/useRoofAllocationSetting.js +++ b/src/hooks/roofcover/useRoofAllocationSetting.js @@ -1,4 +1,4 @@ -import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil' +import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil' import { canvasState, currentAngleTypeSelector, currentMenuState, currentObjectState } from '@/store/canvasAtom' import { useEffect, useRef, useState } from 'react' import { useAxios } from '@/hooks/useAxios' @@ -26,6 +26,7 @@ import { globalLocaleStore } from '@/store/localeAtom' import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util' import { moduleSelectionDataState } from '@/store/selectedModuleOptions' import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController' +import { outerLinePointsState } from '@/store/outerLineAtom' // 지붕면 할당 export function useRoofAllocationSetting(id) { @@ -55,6 +56,7 @@ export function useRoofAllocationSetting(id) { const { setSurfaceShapePattern } = useRoofFn() const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState) + const resetPoints = useResetRecoilState(outerLinePointsState) useEffect(() => { setCurrentRoofList(roofList) @@ -256,6 +258,7 @@ export function useRoofAllocationSetting(id) { addPopup(popupId, 1, ) } else { apply() + resetPoints() } } diff --git a/src/hooks/roofcover/useRoofShapeSetting.js b/src/hooks/roofcover/useRoofShapeSetting.js index 125d3d91..2a36e23e 100644 --- a/src/hooks/roofcover/useRoofShapeSetting.js +++ b/src/hooks/roofcover/useRoofShapeSetting.js @@ -10,6 +10,7 @@ import { outerLineFixState } from '@/store/outerLineAtom' import { useSwal } from '@/hooks/useSwal' import { usePopup } from '@/hooks/usePopup' import { getChonByDegree } from '@/util/canvas-util' +import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting' // 지붕형상 설정 export function useRoofShapeSetting(id) { @@ -46,7 +47,7 @@ export function useRoofShapeSetting(id) { const jerkinHeadPitchRef = useRef(null) const history = useRef([]) - const { closePopup } = usePopup() + const { closePopup, addPopup } = usePopup() useEffect(() => { pitchRef.current = currentAngleType === ANGLE_TYPE.SLOPE ? pitch : getChonByDegree(pitch) @@ -436,7 +437,7 @@ export function useRoofShapeSetting(id) { canvas?.renderAll() roof.drawHelpLine() isFixRef.current = true - closePopup(id) + addPopup(id, 1, ) } const initLineSetting = () => { @@ -568,6 +569,7 @@ export function useRoofShapeSetting(id) { pitch: pitchRef.current, offset: eavesOffset / 10, } + selectedLine.attributes = { ...attributes, isFixed: true } addPitchText(currentObject) selectedLine.set({ strokeWidth: 4 }) selectedLine.set({ stroke: '#45CD7D' }) @@ -579,6 +581,7 @@ export function useRoofShapeSetting(id) { type: LINE_TYPE.WALLLINE.GABLE, offset: gableOffset / 10, } + selectedLine.attributes = { ...attributes, isFixed: true } selectedLine.set({ strokeWidth: 4 }) selectedLine.set({ stroke: '#3FBAE6' }) break @@ -590,6 +593,7 @@ export function useRoofShapeSetting(id) { width: hasSleeve === '0' ? 0 : sleeveOffset / 10, sleeve: hasSleeve === '1', } + selectedLine.attributes = { ...attributes, isFixed: true } break } case 4: { @@ -600,6 +604,7 @@ export function useRoofShapeSetting(id) { offset: eavesOffset / 10, width: hipAndGableWidth / 10, } + selectedLine.attributes = { ...attributes, isFixed: true } addPitchText(currentObject) selectedLine.set({ strokeWidth: 4 }) selectedLine.set({ stroke: '#45CD7D' }) @@ -613,6 +618,7 @@ export function useRoofShapeSetting(id) { width: jerkinHeadWidth / 10, pitch: jerkinHeadPitchRef.current, } + selectedLine.attributes = { ...attributes, isFixed: true } addPitchText(currentObject) selectedLine.set({ strokeWidth: 4 }) selectedLine.set({ stroke: '#3FBAE6' }) @@ -625,13 +631,13 @@ export function useRoofShapeSetting(id) { pitch: shedPitchRef.current, width: shedWidth / 10, } + selectedLine.attributes = { ...attributes, isFixed: true } addPitchText(currentObject) selectedLine.set({ strokeWidth: 4 }) selectedLine.set({ stroke: '#000000' }) break } } - selectedLine.attributes = { ...attributes, isFixed: true } canvas.renderAll() nextLineFocus(selectedLine) @@ -643,7 +649,7 @@ export function useRoofShapeSetting(id) { const index = lines.findIndex((line) => line.idx === selectedLine.idx) const nextLine = lines[index + 1] || lines[0] - if (nextLine.attributes.isFixed) { + if (nextLine.attributes?.isFixed) { canvas.discardActiveObject() return } From b886b0cba178130a3a73d18265d34ed65fb54942 Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Sat, 8 Feb 2025 17:17:15 +0900 Subject: [PATCH 2/3] =?UTF-8?q?lengthText=20=EC=A7=80=EC=9B=8C=EC=A7=80?= =?UTF-8?q?=EB=8A=94=20=ED=98=84=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 --- src/hooks/roofcover/useRoofShapeSetting.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/hooks/roofcover/useRoofShapeSetting.js b/src/hooks/roofcover/useRoofShapeSetting.js index 2a36e23e..f242439e 100644 --- a/src/hooks/roofcover/useRoofShapeSetting.js +++ b/src/hooks/roofcover/useRoofShapeSetting.js @@ -423,7 +423,9 @@ export function useRoofShapeSetting(id) { canvas.remove(obj) }) - const removeTargets = canvas.getObjects().filter((obj) => obj.name === 'pitchText' || obj.name === 'lengthText') + const removeTargets = canvas + .getObjects() + .filter((obj) => (obj.name === 'pitchText' || obj.name === 'lengthText') && outerLines.map((id) => id).includes(obj.parentId)) removeTargets.forEach((obj) => { canvas.remove(obj) }) From a614629b897c75557699f1cf1e24cc8f1cc23015 Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Sat, 8 Feb 2025 17:26:22 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=EC=A7=80=EB=B6=95=EB=A9=B4=20=ED=95=A0?= =?UTF-8?q?=EB=8B=B9=20=EC=8B=9C=20lengthText=20=EC=9C=84=EC=B9=98=20?= =?UTF-8?q?=EC=9D=B4=EC=83=81=ED=95=B4=EC=A7=80=EB=8A=94=20=ED=98=84?= =?UTF-8?q?=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 --- src/hooks/roofcover/useRoofAllocationSetting.js | 2 +- src/hooks/roofcover/useRoofShapeSetting.js | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js index dc14f2b0..34ec3f13 100644 --- a/src/hooks/roofcover/useRoofAllocationSetting.js +++ b/src/hooks/roofcover/useRoofAllocationSetting.js @@ -319,7 +319,7 @@ export function useRoofAllocationSetting(id) { } const apply = () => { - const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) + const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF && !obj.roofMaterial) const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL) roofBases.forEach((roofBase) => { try { diff --git a/src/hooks/roofcover/useRoofShapeSetting.js b/src/hooks/roofcover/useRoofShapeSetting.js index f242439e..61acfd61 100644 --- a/src/hooks/roofcover/useRoofShapeSetting.js +++ b/src/hooks/roofcover/useRoofShapeSetting.js @@ -425,7 +425,11 @@ export function useRoofShapeSetting(id) { const removeTargets = canvas .getObjects() - .filter((obj) => (obj.name === 'pitchText' || obj.name === 'lengthText') && outerLines.map((id) => id).includes(obj.parentId)) + .filter( + (obj) => + (obj.name === 'pitchText' || obj.name === 'lengthText') && + canvas.getObjects().find((parent) => parent.id === obj.parentId)?.name !== POLYGON_TYPE.ROOF, + ) removeTargets.forEach((obj) => { canvas.remove(obj) })