From 05d2db69c376360736e920554baa8d098ab30d0c Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Mon, 30 Sep 2024 16:22:00 +0900 Subject: [PATCH] =?UTF-8?q?=EC=99=B8=EB=B2=BD=EC=84=A0=20=EC=86=8D?= =?UTF-8?q?=EC=84=B1=20=EC=84=A4=EC=A0=95=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../outerlinesetting/PropertiesSetting.jsx | 17 ++- src/hooks/roofcover/usePropertiesSetting.js | 116 ++++++++++++------ 2 files changed, 92 insertions(+), 41 deletions(-) diff --git a/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx b/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx index 0120f6a4..cd2973e7 100644 --- a/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx +++ b/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx @@ -6,14 +6,19 @@ export default function PropertiesSetting(props) { const { getMessage } = useMessage() const { setShowPropertiesSettingModal } = props - const { handleSetEaves, handleSetGable, handleRollback, handleFix } = usePropertiesSetting() + const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting() return (

{getMessage('modal.canvas.setting.wallline.properties.setting')}

-
@@ -34,7 +39,13 @@ export default function PropertiesSetting(props) { -
diff --git a/src/hooks/roofcover/usePropertiesSetting.js b/src/hooks/roofcover/usePropertiesSetting.js index 95800dfd..9df385ed 100644 --- a/src/hooks/roofcover/usePropertiesSetting.js +++ b/src/hooks/roofcover/usePropertiesSetting.js @@ -1,27 +1,17 @@ import { useEffect, useRef } from 'react' +import { LINE_TYPE } from '@/common/common' import { useRecoilValue } from 'recoil' import { canvasState } from '@/store/canvasAtom' -import { LINE_TYPE } from '@/common/common' export function usePropertiesSetting() { const currentLine = useRef(null) + const currentIdx = useRef(-1) const canvas = useRecoilValue(canvasState) useEffect(() => { - initLineSetting() + selectNextLine() }, []) - useEffect(() => { - const lines = canvas?.getObjects().filter((obj) => obj.name === 'outerLine') - lines.forEach((line) => { - line.set({ - type: line.type, - stroke: line.type === LINE_TYPE.WALLLINE.EAVES ? '#45CD7D' : line.type === LINE_TYPE.WALLLINE.GABLE ? '#3FBAE6' : '#000000', - strokeWidth: 4, - }) - }) - }, [currentLine.current]) - const handleSetEaves = () => { currentLine.current.set({ stroke: '#45CD7D', @@ -32,13 +22,12 @@ export function usePropertiesSetting() { pitch: 4, }, }) - - nextLineSetting() + canvas.renderAll() + selectNextLine() } const handleSetGable = () => { currentLine.current.set({ - type: LINE_TYPE.WALLLINE.GABLE, stroke: '#3FBAE6', strokeWidth: 4, attributes: { @@ -46,44 +35,95 @@ export function usePropertiesSetting() { type: LINE_TYPE.WALLLINE.GABLE, }, }) - - nextLineSetting() + canvas.renderAll() + selectNextLine() } - const initLineSetting = () => { - currentLine.current = canvas?.getObjects().filter((obj) => obj.name === 'outerLine')[0] + const selectNextLine = () => { + const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') + currentIdx.current++ + + if (currentIdx.current >= lines.length) { + currentIdx.current = lines.length + currentLine.current = lines[currentIdx.current - 1] + return + } + + currentLine.current = lines[currentIdx.current] currentLine.current.set({ stroke: '#EA10AC', strokeWidth: 4, }) - canvas?.renderAll() + canvas.renderAll() } - const nextLineSetting = () => { - // currentLine.current의 값은 currentLine.current의 idx 다음 값, 없을 경우는 null - currentLine.current = canvas?.getObjects().find((obj) => obj.idx === currentLine.current.idx + 1) + const selectPrevLine = () => { + const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') - if (!currentLine.current) { - canvas?.renderAll() - handleFix() + currentIdx.current-- + + if (currentIdx.current <= -1) { + currentIdx.current = -1 + selectNextLine() + return + } else { + lines.forEach((line, index) => { + if (index >= currentIdx.current) { + delete line.attributes + line.set({ + stroke: '#000000', + strokeWidth: 4, + }) + } + currentIdx.current-- + canvas.renderAll() + selectNextLine() + }) + } + } + + const handleRollback = () => { + selectPrevLine() + } + + const handleFix = () => { + if (!confirm('외벽선 속성 설정을 완료하시겠습니까?')) { + return + } + const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') + + lines.forEach((line) => { + line.set({ + attributes: line.attributes ? line.attributes : { offset: 0, type: LINE_TYPE.WALLLINE.WALL }, + stroke: '#000000', + strokeWidth: 4, + }) + }) + + canvas.renderAll() + } + + const closeModal = (fn) => { + if (!confirm('외벽선 속성 설정을 종료 하시겠습니까?')) { return } - currentLine.current = currentLine.current.set({ - stroke: '#EA10AC', - strokeWidth: 4, + const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') + + lines.forEach((line) => { + line.set({ + attributes: { offset: 0, type: LINE_TYPE.WALLLINE.WALL }, + stroke: '#000000', + strokeWidth: 4, + }) }) - canvas?.renderAll() + canvas.renderAll() + + fn(false) } - const currentLineSetting = () => {} - - const handleRollback = () => {} - - const handleFix = () => {} - - return { handleSetEaves, handleSetGable, handleRollback, handleFix } + return { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } }