From 5027e7355d789a9b18563e0485635f37800b5f96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?= <43837214+Minsiki@users.noreply.github.com> Date: Wed, 19 Feb 2025 14:24:51 +0900 Subject: [PATCH] =?UTF-8?q?-=20=EB=B0=B0=EC=B9=98=EB=A9=B4=20=EA=B7=B8?= =?UTF-8?q?=EB=A6=AC=EA=B8=B0=20=EC=9D=B4=ED=9B=84=20=EC=84=A0=EC=86=8D?= =?UTF-8?q?=EC=84=B1=20=EC=84=A4=EC=A0=95=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20-=20=EB=8B=A4=EA=B5=AD=EC=96=B4=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PlacementSurfaceLineProperty.jsx | 74 +++++++++ .../surface/useRoofLinePropertySetting.js | 151 ++++++++++++++++++ src/locales/ja.json | 4 + src/locales/ko.json | 4 + 4 files changed, 233 insertions(+) create mode 100644 src/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty.jsx create mode 100644 src/hooks/surface/useRoofLinePropertySetting.js diff --git a/src/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty.jsx b/src/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty.jsx new file mode 100644 index 00000000..00f00e80 --- /dev/null +++ b/src/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty.jsx @@ -0,0 +1,74 @@ +import WithDraggable from '@/components/common/draggable/WithDraggable' +import { useMessage } from '@/hooks/useMessage' +import { usePopup } from '@/hooks/usePopup' +import { useRoofLinePropertySetting } from '@/hooks/surface/useRoofLinePropertySetting' +import { useEffect } from 'react' +import { LINE_TYPE } from '@/common/common' +import { useSwal } from '@/hooks/useSwal' + +export default function PlacementSurfaceLineProperty(props) { + const { id, pos = { x: 50, y: 230 }, roof } = props + const { closePopup } = usePopup() + // const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting(id) + const { roofLinesInit, handleSetRidge, handleSetEaves, handleSetGable, handleRollback, handleFix } = useRoofLinePropertySetting(id, roof) + const { getMessage } = useMessage() + const { swalFire } = useSwal() + + useEffect(() => { + roofLinesInit(roof) + }, []) + + const handleClose = () => { + const notSettingLines = roof.lines.filter( + (line) => + !line.attributes.type || ![LINE_TYPE.WALLLINE.EAVES, LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.SUBLINE.RIDGE].includes(line.attributes.type), + ) + if (notSettingLines.length > 0) { + swalFire({ text: getMessage('modal.canvas.setting.roofline.properties.setting.not.setting'), type: 'alert', icon: 'warning' }) + return + } + + closePopup(id) + } + + return ( + +
+
+

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

+ +
+
+
+
+
{getMessage('modal.canvas.setting.roofline.properties.setting.info')}
+
+
{getMessage('setting')}
+
+ + + +
+
+
+ + +
+
+
+
+ + ) +} diff --git a/src/hooks/surface/useRoofLinePropertySetting.js b/src/hooks/surface/useRoofLinePropertySetting.js new file mode 100644 index 00000000..184d7f4e --- /dev/null +++ b/src/hooks/surface/useRoofLinePropertySetting.js @@ -0,0 +1,151 @@ +import { LINE_TYPE } from '@/common/common' +import { canvasState, currentObjectState } from '@/store/canvasAtom' +import { useEffect, useRef } from 'react' +import { useRecoilValue } from 'recoil' +import { usePopup } from '../usePopup' +import useSWR from 'swr' +import { useSwal } from '../useSwal' +import { useMessage } from '../useMessage' + +const LINE_COLOR = { + EAVES: '#45CD7D', + GABLE: '#3FBAE6', + RIDGE: '#9e9e9e', + DEFAULT: '#000000', +} + +export function useRoofLinePropertySetting(id, roof) { + const canvas = useRecoilValue(canvasState) + const currentObject = useRecoilValue(currentObjectState) + const history = useRef([]) + const { closePopup } = usePopup() + const { swalFire } = useSwal() + const { getMessage } = useMessage() + + useEffect(() => { + if (currentObject) { + currentObject.set({ + stroke: '#EA10AC', + strokeWidth: 4, + }) + } + }, [currentObject]) + + const roofLinesInit = () => { + roof.lines.forEach((line) => { + line.set({ + stroke: '#000000', + strokeWidth: 4, + visible: true, + }) + line.bringToFront() + line.setViewLengthText(false) + }) + canvas.renderAll() + } + + const handleSetEaves = () => { + currentObject.set({ + attributes: { + ...currentObject.attributes, + type: LINE_TYPE.WALLLINE.EAVES, + }, + stroke: LINE_COLOR.EAVES, + }) + + history.current.push(currentObject) + nextLineFocus(currentObject) + canvas.renderAll() + } + + const handleSetGable = () => { + currentObject.set({ + attributes: { + ...currentObject.attributes, + type: LINE_TYPE.WALLLINE.GABLE, + }, + stroke: LINE_COLOR.GABLE, + }) + + history.current.push(currentObject) + nextLineFocus(currentObject) + canvas.renderAll() + } + + const handleSetRidge = () => { + currentObject.set({ + attributes: { + ...currentObject.attributes, + type: LINE_TYPE.SUBLINE.RIDGE, + }, + stroke: LINE_COLOR.RIDGE, + }) + + history.current.push(currentObject) + nextLineFocus(currentObject) + canvas.renderAll() + } + + const handleRollback = () => { + if (history.current.length === 0) { + return + } + const lastLine = history.current.pop() + + delete lastLine.attributes + lastLine.set({ + stroke: LINE_COLOR.DEFAULT, + strokeWidth: 4, + }) + + canvas.setActiveObject(lastLine) + canvas.renderAll() + } + + const handleFix = () => { + // const roof = canvas.getObjects().find((obj) => currentObject.parentId === obj.id) + const notSettingLines = roof.lines.filter( + (line) => + !line.attributes.type || ![LINE_TYPE.WALLLINE.EAVES, LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.SUBLINE.RIDGE].includes(line.attributes.type), + ) + if (notSettingLines.length > 0) { + swalFire({ text: getMessage('modal.canvas.setting.roofline.properties.setting.not.setting'), type: 'alert', icon: 'warning' }) + return + } + + roof.lines.forEach((line) => { + line.set({ + stroke: LINE_COLOR.DEFAULT, + strokeWidth: 4, + visible: false, + }) + }) + + canvas.renderAll() + closePopup(id) + } + + const nextLineFocus = (selectedLine) => { + // const roof = canvas.getObjects().find((obj) => currentObject.parentId === obj.id) + const lines = roof?.lines + if (!lines) return + const index = lines.findIndex((line) => line === selectedLine) + + const nextLine = lines[index + 1] || lines[0] + if (!nextLine.attributes?.type) { + canvas.setActiveObject(nextLine) + } else { + //activeObject 해제 + canvas.discardActiveObject() + } + } + + return { + roofLinesInit, + handleSetEaves, + handleSetGable, + handleSetRidge, + handleRollback, + handleFix, + } +} diff --git a/src/locales/ja.json b/src/locales/ja.json index 9f06310e..7c3333c3 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -269,6 +269,10 @@ "modal.canvas.setting.wallline.properties.setting.info": "※属性を変更する外壁線を選択し、軒で設定またはケラバで設定\nボタンをクリックして設定値を適用してください。\n", "modal.canvas.setting.wallline.properties.setting.eaves": "軒で設定", "modal.canvas.setting.wallline.properties.setting.edge": "ケラバに設定", + "modal.canvas.setting.wallline.properties.setting.ridge": "용마루로 설정(JA)", + "modal.canvas.setting.roofline.properties.setting": "지붕선 속성 설정(JA)", + "modal.canvas.setting.roofline.properties.setting.info": "※ 속성을 변경할 지붕선을 선택하고 처마로 설정 또는 케라바로 설정\n 버튼을 클릭하여 설정값을 적용하십시오.\n(JA)", + "modal.canvas.setting.roofline.properties.setting.not.setting": "설정하지 않은 라인이 존재합니다.(JA)", "modal.eaves.gable.edit": "軒/ケラバ変更", "modal.eaves.gable.edit.basic": "通常", "modal.eaves.gable.edit.wall.merge.info": "河屋などの壁に面する屋根を作成します。", diff --git a/src/locales/ko.json b/src/locales/ko.json index b43e6853..d4ea7929 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -269,6 +269,10 @@ "modal.canvas.setting.wallline.properties.setting.info": "※ 속성을 변경할 외벽선을 선택하고 처마로 설정 또는 케라바로 설정\n 버튼을 클릭하여 설정값을 적용하십시오.\n", "modal.canvas.setting.wallline.properties.setting.eaves": "처마로 설정", "modal.canvas.setting.wallline.properties.setting.edge": "케라바로 설정", + "modal.canvas.setting.wallline.properties.setting.ridge": "용마루로 설정", + "modal.canvas.setting.roofline.properties.setting": "지붕선 속성 설정", + "modal.canvas.setting.roofline.properties.setting.info": "※ 속성을 변경할 지붕선을 선택하고 처마로 설정 또는 케라바로 설정\n 버튼을 클릭하여 설정값을 적용하십시오.\n", + "modal.canvas.setting.roofline.properties.setting.not.setting": "설정하지 않은 라인이 존재합니다.", "modal.eaves.gable.edit": "처마/케라바 변경", "modal.eaves.gable.edit.basic": "통상", "modal.eaves.gable.edit.wall.merge.info": "하옥 등 벽에 접하는 지붕을 작성합니다.",