From 99633bda4af8427d70c0c1343bf4ebe782e206aa Mon Sep 17 00:00:00 2001 From: minsik Date: Wed, 25 Sep 2024 17:08:00 +0900 Subject: [PATCH 1/5] =?UTF-8?q?-=20Grid=20Copy,=20Move=20=EB=8B=A4?= =?UTF-8?q?=EA=B5=AD=EC=96=B4=20=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20Modal=20?= =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../floor-plan/modal/grid/GridCopy.jsx | 43 ++++++++++++++- .../floor-plan/modal/grid/GridMove.jsx | 55 ++++++++++++++++++- src/locales/ja.json | 14 ++++- src/locales/ko.json | 12 ++++ 4 files changed, 121 insertions(+), 3 deletions(-) diff --git a/src/components/floor-plan/modal/grid/GridCopy.jsx b/src/components/floor-plan/modal/grid/GridCopy.jsx index b74223c4..92609d80 100644 --- a/src/components/floor-plan/modal/grid/GridCopy.jsx +++ b/src/components/floor-plan/modal/grid/GridCopy.jsx @@ -1,2 +1,43 @@ +import WithDraggable from '@/components/common/draggable/withDraggable' +import { useMessage } from '@/hooks/useMessage' + export default function GridCopy(props) { -} \ No newline at end of file + const { setShowGridMoveModal, setShowGridCopyModal } = props + const { getMessage } = useMessage() + + return ( + +
+
+

{getMessage('modal.grid.copy')}

+ +
+
+
{getMessage('modal.grid.copy.info')}
+
+
+
+ {getMessage('modal.grid.copy.length')} +
+ +
+ mm +
+
+ + + + +
+
+
+
+ +
+
+
+ + ) +} diff --git a/src/components/floor-plan/modal/grid/GridMove.jsx b/src/components/floor-plan/modal/grid/GridMove.jsx index f30b38cc..1da8b6fa 100644 --- a/src/components/floor-plan/modal/grid/GridMove.jsx +++ b/src/components/floor-plan/modal/grid/GridMove.jsx @@ -1,2 +1,55 @@ +import WithDraggable from '@/components/common/draggable/withDraggable' +import { useMessage } from '@/hooks/useMessage' + export default function GridMove(props) { -} \ No newline at end of file + const { setShowGridMoveModal, setShowGridCopyModal } = props + const { getMessage } = useMessage() + + return ( + +
+
+

{getMessage('modal.grid.move')}

+ +
+
+
{getMessage('modal.grid.move.info')}
+
+
+ + +
+
+
+

{getMessage('modal.grid.move.length')}

+
+
+ +
+ mm +
+
+
+ +
+ mm +
+
+
+ + + + +
+
+
+
+ +
+
+
+ + ) +} diff --git a/src/locales/ja.json b/src/locales/ja.json index 5efffbd4..dd2c7026 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -71,6 +71,15 @@ "modal.canvas.setting.grid.dot.line.setting.save": "保存", "modal.canvas.setting.grid.absorption.add": "吸着点を追加", "modal.canvas.setting.grid.color.setting": "グリッド色の設定", + "modal.grid.move": "グリッド移動", + "modal.grid.move.info": "移動する方向を入力してください", + "modal.grid.move.all": "グリッド全体移動", + "modal.grid.move.length": "長さ", + "modal.grid.move.save": "保存", + "modal.grid.copy": "グリッドのコピー", + "modal.grid.copy.info": "間隔を設定し、コピー方向を選択します", + "modal.grid.copy.length": "長さ", + "modal.grid.copy.save": "保存", "modal.canvas.setting.font.plan.edit": "フォントとサイズの変更", "modal.canvas.setting.font.plan.edit.word": "文字フォントの変更", "modal.canvas.setting.font.plan.edit.flow": "フロー方向フォントの変更", @@ -95,7 +104,10 @@ "modal.canvas.setting.first.option.trestle": "가대 표시", "modal.canvas.setting.first.option.flow": "흐름방향 표시", "modal.canvas.setting.first.option.total": "집계표 표시", - "modal.canvas.setting.first.option.corridor.dimension": "복도치수 표시", + "modal.canvas.setting.first.option.dimension": "치수 표시(JA)", + "modal.canvas.setting.first.option.corridor.dimension": "복도치수 표시(JA)", + "modal.canvas.setting.first.option.real.dimension": "실제치수 표시(JA)", + "modal.canvas.setting.first.option.none.dimension": "치수표시없음(JA)", "modal.canvas.setting.first.option.display": "画面表示", "modal.canvas.setting.first.option.border": "ボーダーのみ", "modal.canvas.setting.first.option.line": "ラインハッチ", diff --git a/src/locales/ko.json b/src/locales/ko.json index 01673a42..d3007a8e 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -68,6 +68,15 @@ "modal.canvas.setting.grid.dot.line.setting.save": "저장", "modal.canvas.setting.grid.absorption.add": "흡착점 추가", "modal.canvas.setting.grid.color.setting": "그리드 색 설정", + "modal.grid.move": "그리드 이동", + "modal.grid.move.info": "이동할 방향을 입력해주세요", + "modal.grid.move.all": "그리드 전체 이동", + "modal.grid.move.length": "길이", + "modal.grid.move.save": "저장", + "modal.grid.copy": "그리드 복사", + "modal.grid.copy.info": "간격을 설정하고 복사 방향을 선택하십시오", + "modal.grid.copy.length": "길이", + "modal.grid.copy.save": "저장", "modal.canvas.setting.font.plan.edit": "글꼴 및 크기 변경", "modal.canvas.setting.font.plan.edit.word": "문자 글꼴 변경", "modal.canvas.setting.font.plan.edit.flow": "흐름 방향 글꼴 변경", @@ -92,7 +101,10 @@ "modal.canvas.setting.first.option.trestle": "가대 표시", "modal.canvas.setting.first.option.flow": "흐름방향 표시", "modal.canvas.setting.first.option.total": "집계표 표시", + "modal.canvas.setting.first.option.dimension": "치수 표시", "modal.canvas.setting.first.option.corridor.dimension": "복도치수 표시", + "modal.canvas.setting.first.option.real.dimension": "실제치수 표시", + "modal.canvas.setting.first.option.none.dimension": "치수표시없음", "modal.canvas.setting.first.option.display": "화면 표시", "modal.canvas.setting.first.option.border": "테두리만", "modal.canvas.setting.first.option.line": "라인해치", From 0c97f9d4a80c5080b7b2070631d538b9d10eeddf Mon Sep 17 00:00:00 2001 From: minsik Date: Wed, 25 Sep 2024 17:10:00 +0900 Subject: [PATCH 2/5] =?UTF-8?q?-=20Canvas=20Setting=20=EB=A9=94=EB=89=B4?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/floor-plan/FloorPlan.jsx | 5 +- .../modal/setting01/FirstOption.jsx | 55 +++++++++++++------ .../modal/setting01/SecondOption.jsx | 5 +- src/store/settingAtom.js | 34 ++++++++---- 4 files changed, 71 insertions(+), 28 deletions(-) diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx index c3bf4095..c610948f 100644 --- a/src/components/floor-plan/FloorPlan.jsx +++ b/src/components/floor-plan/FloorPlan.jsx @@ -53,11 +53,14 @@ export default function FloorPlan() { const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] })) const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item })) const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] })) - + const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ + ...item, + })) // 데이터 설정 setSettingModalFirstOptions({ option1: optionData1, option2: optionData2, + dimensionDisplay: optionData5, }) setSettingModalSecondOptions({ option3: optionData3, diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx index 3be1eb46..e2ea3e89 100644 --- a/src/components/floor-plan/modal/setting01/FirstOption.jsx +++ b/src/components/floor-plan/modal/setting01/FirstOption.jsx @@ -9,7 +9,7 @@ export default function FirstOption() { const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요 const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState) const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState) - const { option1, option2 } = settingModalFirstOptions + const { option1, option2, dimensionDisplay } = settingModalFirstOptions const { option3, option4 } = settingModalSecondOptions const { getMessage } = useMessage() const { get, post } = useAxios() @@ -28,12 +28,17 @@ export default function FirstOption() { const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] })) const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item })) const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] })) + const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ + ...item, + })) // 데이터 설정 setSettingModalFirstOptions({ option1: optionData1, option2: optionData2, + dimensionDisplay: optionData5, }) + console.log('optionData5', optionData5) setSettingModalSecondOptions({ option3: optionData3, option4: optionData4, @@ -46,7 +51,7 @@ export default function FirstOption() { const onClickOption = async (option) => { option.selected = !option.selected - setSettingModalFirstOptions({ option1, option2 }) + setSettingModalFirstOptions({ option1, option2, dimensionDisplay }) setSettingModalSecondOptions({ option3, option4 }) try { @@ -106,30 +111,48 @@ export default function FirstOption() { } } + const onClickDimension = (item) => { + const options = settingModalFirstOptions?.dimensionDisplay.map((option) => { + option.selected = option.id === item.id + return option + }) + + setSettingModalFirstOptions({ option1, option2, dimensionDisplay: options }) + } + return ( <>

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

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

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

+
+ {settingModalFirstOptions?.dimensionDisplay?.map((item) => ( + + ))}

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

- {settingModalFirstOptions && - settingModalFirstOptions.option2.map((item) => ( - - ))} + {settingModalFirstOptions?.option2.map((item) => ( + + ))}
diff --git a/src/components/floor-plan/modal/setting01/SecondOption.jsx b/src/components/floor-plan/modal/setting01/SecondOption.jsx index 4904678d..be884aac 100644 --- a/src/components/floor-plan/modal/setting01/SecondOption.jsx +++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx @@ -28,11 +28,14 @@ export default function SecondOption() { const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] })) const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item })) const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] })) - + const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ + ...item, + })) // 데이터 설정 setSettingModalFirstOptions({ option1: optionData1, option2: optionData2, + dimensionDisplay: optionData5, }) setSettingModalSecondOptions({ option3: optionData3, diff --git a/src/store/settingAtom.js b/src/store/settingAtom.js index c00cc667..c917c215 100644 --- a/src/store/settingAtom.js +++ b/src/store/settingAtom.js @@ -6,21 +6,30 @@ export const settingModalFirstOptionsState = atom({ option1: [ { id: 1, column: 'assignDisplay', name: 'modal.canvas.setting.first.option.alloc', selected: false }, { id: 2, column: 'drawDisplay', name: 'modal.canvas.setting.first.option.outline', selected: false }, - { id: 3, column: 'gridDisplay', name: 'modal.canvas.setting.first.option.plan', selected: false }, - { id: 4, column: 'charDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: false }, - { id: 5, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.grid', selected: false }, - { id: 6, column: 'hallwayDimenDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: false }, - { id: 7, column: 'actualDimenDisplay', name: 'modal.canvas.setting.first.option.word', selected: false }, - { id: 8, column: 'noDimenDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: false }, - { id: 9, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.flow', selected: false }, - { id: 10, column: 'coordiDisplay', name: 'modal.canvas.setting.first.option.total', selected: false }, + { id: 3, column: 'charDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: false }, + { id: 4, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.grid', selected: false }, + { id: 5, column: 'hallwayDimenDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: false }, + { id: 6, column: 'actualDimenDisplay', name: 'modal.canvas.setting.first.option.word', selected: false }, + { id: 7, column: 'noDimenDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: false }, + { id: 8, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.flow', selected: false }, + { id: 9, column: 'coordiDisplay', name: 'modal.canvas.setting.first.option.total', selected: false }, { - id: 11, + id: 10, column: 'drawConverDisplay', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: false, }, ], + dimensionDisplay: [ + { + id: 1, + column: 'corridorDimension', + name: 'modal.canvas.setting.first.option.corridor.dimension', + selected: false, + }, + { id: 2, column: 'realDimension', name: 'modal.canvas.setting.first.option.real.dimension', selected: false }, + { id: 3, column: 'noneDimension', name: 'modal.canvas.setting.first.option.none.dimension', selected: false }, + ], option2: [ { id: 1, column: 'onlyBorder', name: 'modal.canvas.setting.first.option.border', selected: false }, { id: 2, column: 'lineHatch', name: 'modal.canvas.setting.first.option.line', selected: false }, @@ -41,7 +50,12 @@ export const settingModalSecondOptionsState = atom({ ], option4: [ { id: 1, column: 'adsorpRangeSmall', name: 'modal.canvas.setting.font.plan.absorption.small', selected: true }, - { id: 2, column: 'adsorpRangeSmallSemi', name: 'modal.canvas.setting.font.plan.absorption.small.semi', selected: false }, + { + id: 2, + column: 'adsorpRangeSmallSemi', + name: 'modal.canvas.setting.font.plan.absorption.small.semi', + selected: false, + }, { id: 3, column: 'adsorpRangeMedium', name: 'modal.canvas.setting.font.plan.absorption.medium', selected: false }, { id: 4, column: 'adsorpRangeLarge', name: 'modal.canvas.setting.font.plan.absorption.large', selected: false }, ], From e8fff6c1900c3bcb63dc8a4440d1c7656d31817e Mon Sep 17 00:00:00 2001 From: minsik Date: Wed, 25 Sep 2024 17:10:33 +0900 Subject: [PATCH 3/5] =?UTF-8?q?-=20=EC=A0=90.=EC=84=A0=20=EA=B7=B8?= =?UTF-8?q?=EB=A6=AC=EB=93=9C=20=EB=AA=A8=EB=8B=AC=20=EC=9C=84=EC=B9=98=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20-=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../floor-plan/modal/grid/DotLineGrid.jsx | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/src/components/floor-plan/modal/grid/DotLineGrid.jsx b/src/components/floor-plan/modal/grid/DotLineGrid.jsx index aaab09d9..a8828b81 100644 --- a/src/components/floor-plan/modal/grid/DotLineGrid.jsx +++ b/src/components/floor-plan/modal/grid/DotLineGrid.jsx @@ -17,18 +17,9 @@ export default function DotLineGrid(props) { }, { id: 4, name: '1/10' }, ] - - const HandleClickClose = () => { - // setClose(true) - // setTimeout(() => { - // setModalOption({ ...modalOption, gridoption: false }) - // setClose(false) - // }, 180) - } return ( - -
- {/*
*/} + +

{getMessage('modal.canvas.setting.grid.dot.line.setting')}

- -
  • onClickNav(1)}> - -
    • -
  • { - onClickNav(2) - setCurrentMenu(MENU.ROOF_COVERING.DEFAULT) - }} - > - -
    • -
  • { - onClickNav(3) - setCurrentMenu(MENU.BATCH_CANVAS.DEFAULT) - }} - > - -
    • -
  • { - onClickNav(4) - setCurrentMenu(MENU.MODULE_CIRCUIT_SETTING.DEFAULT) - }} - > - -
    • -
  • { - onClickNav(5) - setCurrentMenu(MENU.ESTIMATE.DEFAULT) - }} - > - -
    • -
  • { - onClickNav(6) - setCurrentMenu(MENU.POWER_GENERATION_SIMULATION.DEFAULT) - }} - > - -
    • - {/*{canvasMenus.map((menu) => {*/} - {/* return (*/} - {/*
  • onClickNav(menu.index)}>*/} - {/* */} - {/*
    • */} - {/* )*/} - {/*})}*/} + {canvasMenus.map((menu) => { + return ( +
  • onClickNav(menu)}> + +
    • + ) + })}
    {menuNumber !== 6 && menuNumber !== 5 && ( From 5fe7ec26baf03f7262a46d99ba8ecb429c2c4f8d Mon Sep 17 00:00:00 2001 From: yjnoh Date: Thu, 26 Sep 2024 10:05:45 +0900 Subject: [PATCH 5/5] =?UTF-8?q?=EC=88=98=EB=8F=99=EC=85=80=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 --- src/hooks/useMode.js | 50 ++++++++++++++++++++++++++++++++------------ 1 file changed, 37 insertions(+), 13 deletions(-) diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js index 978c342b..c2b29121 100644 --- a/src/hooks/useMode.js +++ b/src/hooks/useMode.js @@ -38,6 +38,7 @@ import { isObjectNotEmpty } from '@/util/common-utils' import * as turf from '@turf/turf' import { INPUT_TYPE, Mode } from '@/common/common' import { m } from 'framer-motion' +import { set } from 'react-hook-form' export function useMode() { const [mode, setMode] = useRecoilState(modeState) @@ -4949,25 +4950,26 @@ export function useMode() { if (trestlePolygons.length !== 0) { let lastPointPosition = { x: 0, y: 0 } + let fabricPolygon = null + let inside = false + let turfPolygon + let manualDrawCells = drewRoofCells // - canvas.off() canvas.on('mouse:move', (e) => { //마우스 이벤트 삭제 후 재추가 const mousePoint = canvas.getPointer(e.e) const turfPoint = turf.point([mousePoint.x, mousePoint.y]) - let inside = false - for (let i = 0; i < trestlePolygons.length; i++) { - const turfPolygon = polygonToTurfPolygon(trestlePolygons[i]) + turfPolygon = polygonToTurfPolygon(trestlePolygons[i]) if (turf.booleanPointInPolygon(turfPoint, turfPolygon)) { //turf에 보면 폴리곤안에 포인트가 있는지 함수가 있다 const direction = trestlePolygons[i].direction //도형의 방향 let width = direction === 'south' || direction === 'north' ? 172.2 : 113.4 let height = direction === 'south' || direction === 'north' ? 113.4 : 172.2 - if (Math.abs(mousePoint.x - lastPointPosition.x) >= 4 || Math.abs(mousePoint.y - lastPointPosition.y) >= 4) { + if (Math.abs(mousePoint.x - lastPointPosition.x) >= 5 || Math.abs(mousePoint.y - lastPointPosition.y) >= 5) { let isDrawing = false - let fabricPolygon + if (isDrawing) return canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tmpCell')) //움직일때 일단 지워가면서 움직임 @@ -4981,7 +4983,7 @@ export function useMode() { fabricPolygon = new QPolygon(points, { fill: '#BFFD9F', stroke: 'black', - selectable: true, // 선택 가능하게 설정 + selectable: false, // 선택 가능하게 설정 lockMovementX: true, // X 축 이동 잠금 lockMovementY: true, // Y 축 이동 잠금 lockRotation: true, // 회전 잠금 @@ -4994,17 +4996,13 @@ export function useMode() { canvas?.add(fabricPolygon) //움직여가면서 추가됨 lastPointPosition = { x: mousePoint.x, y: mousePoint.y } - - canvas?.on('mouse:up', (e) => { - //마우스 클릭시 set으로 해당 위치에 셀을 넣음 - fabricPolygon.set({ name: 'cell' }) - fabricPolygon.setCoords() - }) } canvas?.renderAll() inside = true break + } else { + inside = false } } @@ -5013,6 +5011,29 @@ export function useMode() { canvas?.renderAll() } }) + + canvas?.on('mouse:up', (e) => { + if (!inside) return + if (fabricPolygon) { + const turfCellPolygon = polygonToTurfPolygon(fabricPolygon) + + if (turf.booleanWithin(turfCellPolygon, turfPolygon)) { + //마우스 클릭시 set으로 해당 위치에 셀을 넣음 + const isOverlap = manualDrawCells.some((cell) => turf.booleanOverlap(turfCellPolygon, polygonToTurfPolygon(cell))) + if (!isOverlap) { + //안겹치면 넣는다 + fabricPolygon.set({ name: 'cell' }) + fabricPolygon.setCoords() + manualDrawCells.push(fabricPolygon) + } else { + alert('셀끼리 겹치면 안되죠?') + } + } else { + alert('나갔으요!!') + } + setDrewRoofCells(manualDrawCells) + } + }) } } @@ -5086,6 +5107,7 @@ export function useMode() { // console.log('bbox', bbox) const boxes = [] + const installedCellsArray = [] for (let x = bbox[0]; x < bbox[2]; x += width) { for (let y = bbox[1]; y < bbox[3]; y += height) { @@ -5193,6 +5215,7 @@ export function useMode() { parentId: trestle.parentId, }) canvas?.add(fabricPolygon) + drawCellsArray.push(fabricPolygon) } } else { //도머가 없을땐 그냥 그림 @@ -5209,6 +5232,7 @@ export function useMode() { parentId: trestle.parentId, }) canvas?.add(fabricPolygon) + drawCellsArray.push(fabricPolygon) } } }