From 0f1e7709b6a09b929d69e48570d13226220e899f Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Tue, 12 Nov 2024 13:32:07 +0900 Subject: [PATCH] =?UTF-8?q?=EB=AA=A8=EB=93=88=ED=9A=8C=EB=A1=9C=EA=B5=AC?= =?UTF-8?q?=EC=84=B1=20=EA=B8=B0=EB=B3=B8=EC=84=A4=EC=A0=95=20=3D>=20?= =?UTF-8?q?=EB=B0=A9=EC=9C=84=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 --- src/common/common.js | 3 +- .../floor-plan/modal/basic/BasicSetting.jsx | 17 ++- .../modal/basic/step/Orientation.jsx | 43 ++++--- src/hooks/popup/useFlowDirectionSetting.js | 2 +- src/hooks/popup/useOrientation.js | 25 +++++ src/hooks/usePolygon.js | 105 +++++++++++++++++- src/store/orientationAtom.js | 6 + src/util/canvas-util.js | 17 +++ 8 files changed, 192 insertions(+), 26 deletions(-) create mode 100644 src/hooks/popup/useOrientation.js create mode 100644 src/store/orientationAtom.js diff --git a/src/common/common.js b/src/common/common.js index 358852b5..5cbd3733 100644 --- a/src/common/common.js +++ b/src/common/common.js @@ -76,7 +76,6 @@ export const LINE_TYPE = { HIP: 'hip', RIDGE: 'ridge', GABLE: 'gable', - VALLEY: 'valley', VERGE: 'verge', ONESIDE_FLOW_RIDGE: 'onesideFlowRidge', //한쪽흐름 용마루 YOSEMUNE: 'yosemune', //요세무네 @@ -158,6 +157,8 @@ export const SAVE_KEY = [ 'lines', 'offset', 'arrow', + 'surfaceCompass', + 'moduleCompass', ] export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype] diff --git a/src/components/floor-plan/modal/basic/BasicSetting.jsx b/src/components/floor-plan/modal/basic/BasicSetting.jsx index 6a7a1d0e..51cf7280 100644 --- a/src/components/floor-plan/modal/basic/BasicSetting.jsx +++ b/src/components/floor-plan/modal/basic/BasicSetting.jsx @@ -1,7 +1,6 @@ import { useMessage } from '@/hooks/useMessage' import WithDraggable from '@/components/common/draggable/WithDraggable' -import { useState } from 'react' -import Orientation from '@/components/floor-plan/modal/basic/step/Orientation' +import { useEffect, useRef, useState } from 'react' import Module from '@/components/floor-plan/modal/basic/step/Module' import PitchModule from '@/components/floor-plan/modal/basic/step/pitch/PitchModule' import PitchPlacement from '@/components/floor-plan/modal/basic/step/pitch/PitchPlacement' @@ -9,12 +8,22 @@ import Placement from '@/components/floor-plan/modal/basic/step/Placement' import { useRecoilState } from 'recoil' import { canvasSettingState } from '@/store/canvasAtom' import { usePopup } from '@/hooks/usePopup' +import { Orientation } from '@/components/floor-plan/modal/basic/step/Orientation' export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) { const { getMessage } = useMessage() const { closePopup } = usePopup() const [tabNum, setTabNum] = useState(1) const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState) + const orientationRef = useRef(null) + + const handleBtnNextStep = () => { + if (tabNum === 1) { + orientationRef.current.handleNextStep() + } + setTabNum(tabNum + 1) + } + return (
@@ -32,7 +41,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
{getMessage('modal.module.basic.setting.module.placement')}
- {tabNum === 1 && } + {tabNum === 1 && } {/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/} {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && tabNum === 2 && } {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && tabNum === 3 && } @@ -49,7 +58,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) { )} {/*{tabNum !== 3 && }*/} {tabNum !== 3 && ( - )} diff --git a/src/components/floor-plan/modal/basic/step/Orientation.jsx b/src/components/floor-plan/modal/basic/step/Orientation.jsx index 98e10c0c..85ff6b33 100644 --- a/src/components/floor-plan/modal/basic/step/Orientation.jsx +++ b/src/components/floor-plan/modal/basic/step/Orientation.jsx @@ -1,22 +1,21 @@ -import { useState } from 'react' +import { forwardRef, useImperativeHandle, useState } from 'react' import { useMessage } from '@/hooks/useMessage' +import { useOrientation } from '@/hooks/popup/useOrientation' +import { getDegreeInOrientation } from '@/util/canvas-util' -export default function Orientation({ setTabNum }) { +export const Orientation = forwardRef(({ tabNum }, ref) => { const { getMessage } = useMessage() - const [compasDeg, setCompasDeg] = useState(0) + + const { nextStep, compasDeg, setCompasDeg } = useOrientation() + const [hasAnglePassivity, setHasAnglePassivity] = useState(false) - const getDegree = (degree) => { - if (degree % 15 === 0) return degree + useImperativeHandle(ref, () => ({ + handleNextStep, + })) - let value = Math.floor(degree / 15) - const remain = ((degree / 15) % 1).toFixed(5) - - if (remain > 0.4) { - value++ - } - - return value * 15 + const handleNextStep = () => { + nextStep() } return ( @@ -31,7 +30,7 @@ export default function Orientation({ setTabNum }) { {Array.from({ length: 180 / 15 }).map((dot, index) => (
setCompasDeg(15 * (12 + index))} > {index === 0 && 180°} @@ -39,13 +38,17 @@ export default function Orientation({ setTabNum }) {
))} {Array.from({ length: 180 / 15 }).map((dot, index) => ( -
setCompasDeg(15 * index)}> +
setCompasDeg(15 * index)} + > {index === 0 && 0°} {index === 6 && 90°}
))}
-
+
@@ -62,7 +65,11 @@ export default function Orientation({ setTabNum }) { className="input-origin block" value={compasDeg} readOnly={hasAnglePassivity} - onChange={(e) => setCompasDeg(e.target.value !== '' ? Number.parseInt(e.target.value) : 0)} + onChange={(e) => + setCompasDeg( + e.target.value !== '' && parseInt(e.target.value) <= 360 && parseInt(e.target.value) >= 0 ? Number.parseInt(e.target.value) : 0, + ) + } /> ° @@ -72,4 +79,4 @@ export default function Orientation({ setTabNum }) { ) -} +}) diff --git a/src/hooks/popup/useFlowDirectionSetting.js b/src/hooks/popup/useFlowDirectionSetting.js index 9611d807..9e77aa4a 100644 --- a/src/hooks/popup/useFlowDirectionSetting.js +++ b/src/hooks/popup/useFlowDirectionSetting.js @@ -21,7 +21,7 @@ export function useFlowDirectionSetting(id) { direction: direction, surfaceCompass: orientation, }) - // drawDirectionArrow(roof) + drawDirectionArrow(roof) canvas?.renderAll() closePopup(id) } diff --git a/src/hooks/popup/useOrientation.js b/src/hooks/popup/useOrientation.js new file mode 100644 index 00000000..4b8f4574 --- /dev/null +++ b/src/hooks/popup/useOrientation.js @@ -0,0 +1,25 @@ +import { useRecoilState, useRecoilValue } from 'recoil' +import { canvasState } from '@/store/canvasAtom' +import { usePolygon } from '@/hooks/usePolygon' +import { POLYGON_TYPE } from '@/common/common' +import { compasDegAtom } from '@/store/orientationAtom' + +// 모듈,회로 구성 탭 기본설정 > 방위설정 탭 +export function useOrientation() { + const canvas = useRecoilValue(canvasState) + const [compasDeg, setCompasDeg] = useRecoilState(compasDegAtom) + + const { drawDirectionArrow } = usePolygon() + + const nextStep = () => { + const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) + roofs.forEach((roof) => { + roof.set({ + moduleCompass: compasDeg, + }) + drawDirectionArrow(roof) + }) + } + + return { nextStep, compasDeg, setCompasDeg } +} diff --git a/src/hooks/usePolygon.js b/src/hooks/usePolygon.js index 1b1538c9..b0f902cd 100644 --- a/src/hooks/usePolygon.js +++ b/src/hooks/usePolygon.js @@ -1,7 +1,7 @@ import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, fontFamilyState, fontSizeState, pitchTextSelector } from '@/store/canvasAtom' import { useRecoilValue } from 'recoil' import { fabric } from 'fabric' -import { getDegreeByChon, getDirectionByPoint, isPointOnLine } from '@/util/canvas-util' +import { getDegreeByChon, getDegreeInOrientation, getDirectionByPoint, isPointOnLine } from '@/util/canvas-util' import { QPolygon } from '@/components/fabric/QPolygon' import { isSamePoint, removeDuplicatePolygons } from '@/util/qpolygon-utils' import { flowDisplaySelector } from '@/store/settingAtom' @@ -283,12 +283,113 @@ export const usePolygon = () => { //arrow의 compass 값으로 방향 글자 설정 필요 const drawDirectionStringToArrow2 = (polygon) => { const { direction, surfaceCompass, moduleCompass, arrow } = polygon + if (moduleCompass === null || moduleCompass === undefined) { + const textObj = new fabric.Text(`${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText}`, { + fontSize: flowFontOptions.fontSize.value, + fill: flowFontOptions.fontColor.value, + fontFamily: flowFontOptions.fontFamily.value, + fontWeight: flowFontOptions.fontWeight.value, + originX: 'center', + originY: 'center', + name: 'flowText', + selectable: false, + left: arrow.stickeyPoint.x, + top: arrow.stickeyPoint.y, + parent: arrow, + parentId: arrow.id, + visible: isFlowDisplay, + }) - if (!surfaceCompass && !moduleCompass) { + polygon.canvas.add(textObj) return } let text = '' + console.log('direction', direction, surfaceCompass, moduleCompass) + + const compassType = (375 - moduleCompass) / 15 + + if ([1, 25].includes(compassType)) { + direction === 'north' ? (text = '北') : direction === 'south' ? (text = '南') : direction === 'west' ? (text = '西') : (text = '東') + } else if ([2, 3].includes(compassType)) { + direction === 'north' + ? (text = '北北東') + : direction === 'south' + ? (text = '南南西') + : direction === 'west' + ? (text = '西北西') + : (text = '東南東') + } else if ([4].includes(compassType)) { + direction === 'north' ? (text = '北東') : direction === 'south' ? (text = '南西') : direction === 'west' ? (text = '北西') : (text = '南東') + } else if ([5, 6].includes(compassType)) { + direction === 'north' + ? (text = '東北東') + : direction === 'south' + ? (text = '西南西') + : direction === 'west' + ? (text = '北北西') + : (text = '南南東') + } else if ([7].includes(compassType)) { + direction === 'north' ? (text = '東') : direction === 'south' ? (text = '西') : direction === 'west' ? (text = '北') : (text = '南') + } else if ([8, 9].includes(compassType)) { + direction === 'north' + ? (text = '東南東') + : direction === 'south' + ? (text = '西北西') + : direction === 'west' + ? (text = '北北東') + : (text = '南南西') + } else if ([10].includes(compassType)) { + direction === 'north' ? (text = '南東') : direction === 'south' ? (text = '北西') : direction === 'west' ? (text = '南西') : (text = '北東') + } else if ([11, 12].includes(compassType)) { + direction === 'north' + ? (text = '南南東') + : direction === 'south' + ? (text = '北北西') + : direction === 'west' + ? (text = '東北東') + : (text = '西南西') + } else if ([13].includes(compassType)) { + direction === 'north' ? (text = '南') : direction === 'south' ? (text = '北') : direction === 'west' ? (text = '東') : (text = '西') + } else if ([14, 15].includes(compassType)) { + direction === 'north' + ? (text = '南南西') + : direction === 'south' + ? (text = '北北東') + : direction === 'west' + ? (text = '東南東') + : (text = '西北西') + } else if ([16].includes(compassType)) { + direction === 'north' ? (text = '南西') : direction === 'south' ? (text = '北東') : direction === 'west' ? (text = '南東') : (text = '北西') + } else if ([17, 18].includes(compassType)) { + direction === 'north' + ? (text = '西南西') + : direction === 'south' + ? (text = '東北東') + : direction === 'west' + ? (text = '南南東') + : (text = '北北西') + } else if ([19].includes(compassType)) { + direction === 'north' ? (text = '西') : direction === 'south' ? (text = '東') : direction === 'west' ? (text = '南') : (text = '北') + } else if ([20, 21].includes(compassType)) { + direction === 'north' + ? (text = '西北西') + : direction === 'south' + ? (text = '東南東') + : direction === 'west' + ? (text = '南南西') + : (text = '北北東') + } else if ([22].includes(compassType)) { + direction === 'north' ? (text = '北西') : direction === 'south' ? (text = '南東') : direction === 'west' ? (text = '南西') : (text = '北東') + } else if ([23, 24].includes(compassType)) { + direction === 'north' + ? (text = '北北西') + : direction === 'south' + ? (text = '南南東') + : direction === 'west' + ? (text = '西南西') + : (text = '東北東') + } // 東,西,南,北 if ([360].includes(surfaceCompass)) { diff --git a/src/store/orientationAtom.js b/src/store/orientationAtom.js new file mode 100644 index 00000000..d403c221 --- /dev/null +++ b/src/store/orientationAtom.js @@ -0,0 +1,6 @@ +import { atom } from 'recoil' + +export const compasDegAtom = atom({ + key: 'compasDegAtom', + default: 0, +}) diff --git a/src/util/canvas-util.js b/src/util/canvas-util.js index a78beb15..5f55092c 100644 --- a/src/util/canvas-util.js +++ b/src/util/canvas-util.js @@ -954,3 +954,20 @@ export const getAllRelatedObjects = (id, canvas) => { return result } + +// 모듈,회로 구성에서 사용하는 degree 범위 별 값 +export const getDegreeInOrientation = (degree) => { + if (degree >= 352) { + return 0 + } + if (degree % 15 === 0) return degree + + let value = Math.floor(degree / 15) + const remain = ((degree / 15) % 1).toFixed(5) + + if (remain > 0.4) { + value++ + } + + return value * 15 +}