From ad1898c289af843e092efaef315a3d00eeb68080 Mon Sep 17 00:00:00 2001 From: yjnoh Date: Mon, 9 Sep 2024 11:07:09 +0900 Subject: [PATCH 1/3] =?UTF-8?q?context=20=EC=98=A4=EB=A5=98=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/context-menu/QContextMenu.jsx | 2 +- src/hooks/useMode.js | 41 ++++++++++++++++--- 2 files changed, 37 insertions(+), 6 deletions(-) diff --git a/src/components/common/context-menu/QContextMenu.jsx b/src/components/common/context-menu/QContextMenu.jsx index 4658ef6f..cacb041c 100644 --- a/src/components/common/context-menu/QContextMenu.jsx +++ b/src/components/common/context-menu/QContextMenu.jsx @@ -12,7 +12,7 @@ export default function QContextMenu(props) { let contextType = '' if (activeObject) { - if (activeObject.initOptions) { + if (activeObject.initOptions && activeObject.initOptions.name) { //이건 바뀔 가능성이 있음 if (activeObject.initOptions.name.indexOf('guide') > -1) { contextType = 'surface' //면형상 diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js index 46709a76..df0dc0d2 100644 --- a/src/hooks/useMode.js +++ b/src/hooks/useMode.js @@ -1213,13 +1213,44 @@ export function useMode() { } const templateSideMode = () => { - changeMode(canvas, Mode.EDIT) - if (historyPoints.current.length >= 4) { - const wall = drawWallPolygon() - setWall(wall) + const firstPoint = historyPoints.current[0] + const lastPoint = historyPoints.current[historyPoints.current.length - 1] + historyPoints.current.forEach((point) => { + canvas?.remove(point) + }) + drawLineWithLength(lastPoint, firstPoint) - console.log('sideWall', wall) + // 캔버스에서 모든 라인 객체를 찾습니다. + const lines = historyLines.current + historyLines.current = [] + + // 각 라인의 시작점과 끝점을 사용하여 다각형의 점 배열을 생성합니다. + const points = lines.map((line) => ({ x: line.x1, y: line.y1 })) + + // 모든 라인 객체를 캔버스에서 제거합니다. + lines.forEach((line) => { + canvas?.remove(line) + }) + + // 점 배열을 사용하여 새로운 다각형 객체를 생성합니다. + const polygon = new QPolygon( + points, + { + stroke: 'black', + fill: 'transparent', + viewLengthText: true, + fontSize: 15, + selectable: true, + }, + canvas, + ) + + // 새로운 다각형 객체를 캔버스에 추가합니다. + canvas.add(polygon) + + changeMode(canvas, Mode.DEFAULT) + return polygon } } From 993870e1694d77584ebd36f39d508fb8b5edcb63 Mon Sep 17 00:00:00 2001 From: changkyu choi Date: Fri, 20 Sep 2024 16:15:01 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Canvas=20=EC=84=A4=EC=A0=95=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EC=88=98=EC=A0=95(globalLocale=20=EB=B0=8F=20toast?= =?UTF-8?q?Up=20=EC=A0=81=EC=9A=A9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/floor-plan/CanvasMenu.jsx | 34 +++++++++---- .../modal/setting01/FirstOption.jsx | 48 +++++++++---------- .../modal/setting01/SecondOption.jsx | 47 +++++++++--------- 3 files changed, 69 insertions(+), 60 deletions(-) diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index d4b7e40b..e7323076 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -4,15 +4,21 @@ import { useEffect, useState } from 'react' import MenuDepth01 from './MenuDepth01' import QSelectBox from '@/components/common/select/QSelectBox' import { useMessage } from '@/hooks/useMessage' -import { post } from '@/lib/Axios' import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil' import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom' import { canvasState, canvasZoomState, currentMenuState, verticalHorizontalModeState } from '@/store/canvasAtom' import { outerLinePointsState } from '@/store/outerLineAtom' +import { appMessageStore, globalLocaleStore } from '@/store/localeAtom' import { MENU } from '@/common/common' +import { useAxios } from '@/hooks/useAxios' +import { toastUp } from '@/hooks/useToast' + +import KO from '@/locales/ko.json' +import JA from '@/locales/ja.json' + export default function CanvasMenu(props) { - const [objectNo] = useState('test123240912001') // 이후 삭제 필요 + const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요 const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal } = props const [menuNumber, setMenuNumber] = useState(null) const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState) @@ -22,6 +28,9 @@ export default function CanvasMenu(props) { const canvas = useRecoilValue(canvasState) const setCurrentMenu = useSetRecoilState(currentMenuState) const setPoints = useSetRecoilState(outerLinePointsState) + const globalLocale = useRecoilValue(globalLocaleStore) + const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore) + const { post } = useAxios() const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }] const onClickNav = (number) => { @@ -38,7 +47,13 @@ export default function CanvasMenu(props) { const firstOptions = useRecoilState(settingModalFirstOptionsState) const secondOptions = useRecoilState(settingModalSecondOptionsState) - useEffect(() => {}, [menuNumber, type]) + useEffect(() => { + if (globalLocale === 'k') { + setAppMessageState(KO) + } else { + setAppMessageState(JA) + } + }, [menuNumber, type, globalLocale]) // 저장버튼(btn08) 클릭 시 호출되는 함수 const handleSaveSettings = async () => { @@ -65,6 +80,7 @@ export default function CanvasMenu(props) { const patternData = { objectNo, + //디스플레이 설정(다중) assignDisplay: dataToSend.firstOption1[0].selected, drawDisplay: dataToSend.firstOption1[1].selected, gridDisplay: dataToSend.firstOption1[2].selected, @@ -76,9 +92,11 @@ export default function CanvasMenu(props) { trestleDisplay: dataToSend.firstOption1[8].selected, coordiDisplay: dataToSend.firstOption1[9].selected, drawConverDisplay: dataToSend.firstOption1[10].selected, + //화면 표시(다중) onlyBorder: dataToSend.firstOption2[0].selected, lineHatch: dataToSend.firstOption2[1].selected, allPainted: dataToSend.firstOption2[2].selected, + //흡착범위 설정(단건) adsorpRangeSmall: dataToSend.secondOption2[0].selected, adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected, adsorpRangeMedium: dataToSend.secondOption2[2].selected, @@ -86,13 +104,11 @@ export default function CanvasMenu(props) { } // HTTP POST 요청 보내기 - await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }) - - // 응답 처리 - alert('설정이 저장되었습니다.') + await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => { + toastUp({ message: res.returnMessage, type: 'success' }) + }) } catch (error) { - console.error('설정을 저장하는 동안 오류가 발생했습니다:', error) - alert('설정을 저장하는 중 오류가 발생했습니다.') + toastUp({ message: res.returnMessage, type: 'error' }) } } diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx index 8c292a05..e0c4170d 100644 --- a/src/components/floor-plan/modal/setting01/FirstOption.jsx +++ b/src/components/floor-plan/modal/setting01/FirstOption.jsx @@ -1,28 +1,24 @@ import { useRecoilState } from 'recoil' import { settingModalFirstOptionsState } from '@/store/settingAtom' import { useMessage } from '@/hooks/useMessage' -import React, { useEffect, useState } from 'react' -import { get } from '@/lib/Axios' +import React, { useCallback, useEffect, useState } from 'react' +import { useAxios } from '@/hooks/useAxios' export default function FirstOption() { - const [objectNo] = useState('test123240912001') // 이후 삭제 필요 + const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요 const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalFirstOptionsState) const { option1, option2 } = settingsModalOptions const { getMessage } = useMessage() - - const [isFetched, setIsFetched] = useState(false) // 조회 여부 상태 + const { get } = useAxios() // 데이터를 최초 한 번만 조회 useEffect(() => { console.log('FirstOption useEffect 실행') - if (!isFetched) { - // 조회가 안 되었을 때만 fetchSettings 실행 - fetchSettings() - } - }, [isFetched]) // isFetched 상태가 변할 때마다 확인 + fetchSettings() + }, [objectNo]) // Canvas Setting 조회 및 초기화 - const fetchSettings = async () => { + const fetchSettings = useCallback(async () => { try { const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` }) @@ -49,12 +45,10 @@ export default function FirstOption() { option1, option2, }) - - setIsFetched(true) // 조회가 완료되면 isFetched를 true로 설정 } catch (error) { console.error('Data fetching error:', error) } - } + }, [objectNo]) const onClickOption = (option) => { option.selected = !option.selected @@ -67,23 +61,25 @@ export default function FirstOption() {

{getMessage('modal.canvas.setting.first.option.info')}

- {settingsModalOptions?.option1?.map((item) => ( - - ))} + {settingsModalOptions && + settingsModalOptions.option1.map((item) => ( + + ))}

{getMessage('modal.canvas.setting.first.option.display')}

- {settingsModalOptions?.option2?.map((item) => ( - - ))} + {settingsModalOptions && + settingsModalOptions.option2.map((item) => ( + + ))}
diff --git a/src/components/floor-plan/modal/setting01/SecondOption.jsx b/src/components/floor-plan/modal/setting01/SecondOption.jsx index 0a568b67..7b8d8811 100644 --- a/src/components/floor-plan/modal/setting01/SecondOption.jsx +++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx @@ -1,27 +1,24 @@ import { useRecoilState } from 'recoil' import { settingModalSecondOptionsState } from '@/store/settingAtom' import { useMessage } from '@/hooks/useMessage' -import React, { useEffect, useState } from 'react' -import { get } from '@/lib/Axios' +import React, { useCallback, useEffect, useState } from 'react' +import { useAxios } from '@/hooks/useAxios' export default function SecondOption() { - const [objectNo] = useState('test123240912001') // 이후 삭제 필요 + const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요 const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalSecondOptionsState) const { option1, option2 } = settingsModalOptions const { getMessage } = useMessage() - - const [isFetched, setIsFetched] = useState(false) // 조회 여부 상태 + const { get } = useAxios() // 데이터를 최초 한 번만 조회 useEffect(() => { console.log('SecondOption useEffect 실행') - if (!isFetched) { - // 조회가 안 되었을 때만 fetchSettings 실행 - fetchSettings() - } - }, [isFetched]) // isFetched 상태가 변할 때마다 확인 + fetchSettings() + }, [objectNo]) - const fetchSettings = async () => { + // Canvas Setting 조회 및 초기화 + const fetchSettings = useCallback(async () => { try { const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` }) @@ -36,12 +33,10 @@ export default function SecondOption() { option1, option2, }) - - setIsFetched(true) // 조회가 완료되면 isFetched를 true로 설정 } catch (error) { console.error('Data fetching error:', error) } - } + }, [objectNo]) const onClickOption = (option) => { // option2에서 한 개만 선택 가능하도록 처리 @@ -54,22 +49,24 @@ export default function SecondOption() {

{getMessage('modal.canvas.setting.font.plan.edit')}

- {settingsModalOptions.option1.map((item, index) => ( - - ))} + {settingsModalOptions && + settingsModalOptions.option1.map((item) => ( + + ))}

{getMessage('modal.canvas.setting.font.plan.absorption')}

- {settingsModalOptions.option2.map((item, index) => ( - - ))} + {settingsModalOptions && + settingsModalOptions.option2.map((item) => ( + + ))}