diff --git a/src/common/common.js b/src/common/common.js index c78673ee..9de60c9a 100644 --- a/src/common/common.js +++ b/src/common/common.js @@ -1,4 +1,5 @@ export const MENU = { + PLAN_DRAWING: 'planDrawing', INITIAL_CANVAS_SETTING: 'initialCanvasSetting', // 배치면 초기설정 ROOF_COVERING: { EXTERIOR_WALL_LINE: 'exteriorWallLine', // 외벽선 그리기 diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index 9e0d9741..98c4cba6 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -20,13 +20,13 @@ import JA from '@/locales/ja.json' import { settingModalFirstOptionsState } from '@/store/settingAtom' const canvasMenus = [ - { index: 0, name: 'plan.menu.plan.drawing', icon: 'con00' }, - { index: 1, name: 'plan.menu.placement.surface.initial.setting', icon: 'con01' }, - { index: 2, name: 'plan.menu.roof.cover', icon: 'con02' }, - { index: 3, name: 'plan.menu.placement.surface', icon: 'con03' }, - { index: 4, name: 'plan.menu.module.circuit.setting', icon: 'con04' }, - { index: 5, name: 'plan.menu.estimate', icon: 'con06' }, - { index: 6, name: 'plan.menu.simulation', icon: 'con05' }, + { index: 0, name: 'plan.menu.plan.drawing', icon: 'con00', title: MENU.PLAN_DRAWING }, + { index: 1, name: 'plan.menu.placement.surface.initial.setting', icon: 'con01', title: MENU.INITIAL_CANVAS_SETTING }, + { index: 2, name: 'plan.menu.roof.cover', icon: 'con02', title: MENU.ROOF_COVERING.DEFAULT }, + { index: 3, name: 'plan.menu.placement.surface', icon: 'con03', title: MENU.BATCH_CANVAS.DEFAULT }, + { index: 4, name: 'plan.menu.module.circuit.setting', icon: 'con04', title: MENU.MODULE_CIRCUIT_SETTING.DEFAULT }, + { index: 5, name: 'plan.menu.estimate', icon: 'con06', title: MENU.ESTIMATE.DEFAULT }, + { index: 6, name: 'plan.menu.simulation', icon: 'con05', title: MENU.POWER_GENERATION_SIMULATION.DEFAULT }, ] export default function CanvasMenu(props) { @@ -49,11 +49,21 @@ export default function CanvasMenu(props) { const { saveCanvas } = usePlan() const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }] - const onClickNav = (number) => { - setMenuNumber(number) - if (number === 2) setType('outline') - if (number === 3) setType('surface') - if (number === 4) setType('module') + const onClickNav = (menu) => { + setMenuNumber(menu.index) + setCurrentMenu(menu.title) + + switch (menu.index) { + case 2: + setType('outline') + break + case 3: + setType('surface') + break + case 4: + setType('module') + break + } } const menuProps = { setShowOutlineModal, @@ -95,88 +105,16 @@ export default function CanvasMenu(props) {
{menuNumber !== 6 && menuNumber !== 5 && ( 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/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')}

+
+
+
{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/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx index 1c2cf20a..9c146485 100644 --- a/src/components/floor-plan/modal/setting01/FirstOption.jsx +++ b/src/components/floor-plan/modal/setting01/FirstOption.jsx @@ -10,7 +10,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() @@ -29,12 +29,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, @@ -47,7 +52,7 @@ export default function FirstOption() { const onClickOption = async (option) => { option.selected = !option.selected - setSettingModalFirstOptions({ option1, option2 }) + setSettingModalFirstOptions({ option1, option2, dimensionDisplay }) setSettingModalSecondOptions({ option3, option4 }) try { @@ -107,30 +112,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 e870cd73..e850f403 100644 --- a/src/components/floor-plan/modal/setting01/SecondOption.jsx +++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx @@ -32,11 +32,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/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) } } } 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": "라인해치", diff --git a/src/store/settingAtom.js b/src/store/settingAtom.js index 93cec544..5541cc14 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 },