From 88a1194e1c721d3320e3e7daa3f943d64de5a4e0 Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Mon, 28 Oct 2024 13:48:21 +0900 Subject: [PATCH] =?UTF-8?q?offset=EC=9A=A9=20=EB=8B=A8=EC=9C=84,=20flow?= =?UTF-8?q?=EC=9A=A9=20=EB=8B=A8=EC=9C=84=20=EB=8B=A4=EB=A6=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/common/useCanvasConfigInitialize.js | 16 ++++++++++++---- src/hooks/roofcover/useRoofShapeSetting.js | 8 +++++++- src/hooks/useLine.js | 16 +++++++++++++--- src/store/canvasAtom.js | 11 +++++++++++ 4 files changed, 43 insertions(+), 8 deletions(-) diff --git a/src/hooks/common/useCanvasConfigInitialize.js b/src/hooks/common/useCanvasConfigInitialize.js index 2b31bbda..f49b4cb9 100644 --- a/src/hooks/common/useCanvasConfigInitialize.js +++ b/src/hooks/common/useCanvasConfigInitialize.js @@ -1,7 +1,7 @@ import { useEffect } from 'react' import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil' import { basicSettingState, roofDisplaySelector, settingModalFirstOptionsState } from '@/store/settingAtom' -import { canvasState, dotLineGridSettingState, pitchText, pitchTextSelector } from '@/store/canvasAtom' +import { canvasState, dotLineGridSettingState, pitchText, pitchTextSelector, showAngleUnitSelector } from '@/store/canvasAtom' import { getChonByDegree, getDegreeByChon, setSurfaceShapePattern } from '@/util/canvas-util' import { useFont } from '@/hooks/common/useFont' import { useGrid } from '@/hooks/common/useGrid' @@ -16,6 +16,7 @@ export function useCanvasConfigInitialize() { const setGlobalFonts = useSetRecoilState(globalFontAtom) const setDotLineGridSetting = useSetRecoilState(dotLineGridSettingState) const pitchText = useRecoilValue(pitchTextSelector) + const angleUnit = useRecoilValue(showAngleUnitSelector) const {} = useFont() const {} = useGrid() const {} = useRoof() @@ -33,15 +34,22 @@ export function useCanvasConfigInitialize() { useEffect(() => { if (!canvas) return - const texts = canvas.getObjects().filter((obj) => obj.name === 'pitchText' || obj.name === 'flowText') + const offsetTexts = canvas.getObjects().filter((obj) => obj.name === 'pitchText') + const flowTexts = canvas.getObjects().filter((obj) => obj.name === 'flowText') if (basicSetting.roofAngleSet === 'slope') { - texts.forEach((obj) => { + offsetTexts.forEach((obj) => { + obj.set({ text: `${obj.originText}-∠${obj.pitch}${angleUnit}` }) + }) + flowTexts.forEach((obj) => { obj.set({ text: `${obj.originText}-∠${obj.pitch}${pitchText}` }) }) } if (basicSetting.roofAngleSet === 'flat') { - texts.forEach((obj) => { + offsetTexts.forEach((obj) => { + obj.set({ text: `${obj.originText}-∠${getDegreeByChon(obj.pitch)}${angleUnit}` }) + }) + flowTexts.forEach((obj) => { obj.set({ text: `${obj.originText}-∠${getDegreeByChon(obj.pitch)}${pitchText}` }) }) } diff --git a/src/hooks/roofcover/useRoofShapeSetting.js b/src/hooks/roofcover/useRoofShapeSetting.js index 9aab5da7..e0d850f4 100644 --- a/src/hooks/roofcover/useRoofShapeSetting.js +++ b/src/hooks/roofcover/useRoofShapeSetting.js @@ -38,6 +38,8 @@ export function useRoofShapeSetting(id) { const setCurrentMenu = useSetRecoilState(currentMenuState) const outerLineFix = useRecoilValue(outerLineFixState) + const isFixRef = useRef(false) + const pitchRef = useRef(null) const jerkinHeadPitchRef = useRef(null) @@ -60,6 +62,10 @@ export function useRoofShapeSetting(id) { } return () => { + if (!isFixRef.current) { + return + } + const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') const pitchTexts = canvas.getObjects().filter((obj) => obj.name === 'pitchText') canvas.remove(...pitchTexts) @@ -83,7 +89,6 @@ export function useRoofShapeSetting(id) { }) addPitchText(line) - line.setViewLengthText(false) } }) canvas.renderAll() @@ -388,6 +393,7 @@ export function useRoofShapeSetting(id) { canvas?.renderAll() roof.drawHelpLine() // setShowRoofShapeSettingModal(false) + isFixRef.current = true closePopup(id) } diff --git a/src/hooks/useLine.js b/src/hooks/useLine.js index 62ec937a..7bf01a47 100644 --- a/src/hooks/useLine.js +++ b/src/hooks/useLine.js @@ -1,5 +1,13 @@ import { useRecoilValue } from 'recoil' -import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, fontFamilyState, fontSizeState } from '@/store/canvasAtom' +import { + ANGLE_TYPE, + canvasState, + currentAngleTypeSelector, + fontFamilyState, + fontSizeState, + pitchTextSelector, + showAngleUnitSelector, +} from '@/store/canvasAtom' import { QLine } from '@/components/fabric/QLine' import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util' @@ -8,6 +16,8 @@ export const useLine = () => { const fontSize = useRecoilValue(fontSizeState) const fontFamily = useRecoilValue(fontFamilyState) const currentAngleType = useRecoilValue(currentAngleTypeSelector) + const pitchText = useRecoilValue(pitchTextSelector) + const angleUnit = useRecoilValue(showAngleUnitSelector) const addLine = (points = [], options) => { const line = new QLine(points, { @@ -81,8 +91,8 @@ export const useLine = () => { const textStr = currentAngleType === ANGLE_TYPE.SLOPE - ? `${attributes.offset ? attributes.offset * 10 : attributes.width * 10}${attributes.pitch ? '-∠' + attributes.pitch : ''}` - : `${attributes.offset ? attributes.offset * 10 : attributes.width * 10}${attributes.pitch ? '-∠' + getDegreeByChon(attributes.pitch) : ''}` + ? `${attributes.offset ? attributes.offset * 10 : attributes.width * 10}${attributes.pitch ? '-∠' + attributes.pitch + angleUnit : ''}` + : `${attributes.offset ? attributes.offset * 10 : attributes.width * 10}${attributes.pitch ? '-∠' + getDegreeByChon(attributes.pitch) + angleUnit : ''}` if (direction === 'top') { left = (startPoint.x + endPoint.x) / 2 diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js index 2eade854..bdce5876 100644 --- a/src/store/canvasAtom.js +++ b/src/store/canvasAtom.js @@ -353,3 +353,14 @@ export const pitchTextSelector = selector({ return roofAngleSet === 'slope' ? '寸' : '度' }, }) + +//각도 표시, offset 길이에서는 각도가 한자가 아닌 도형으로 표시되어야 한다. +export const showAngleUnitSelector = selector({ + key: 'showAngleUnitSelector', + get: ({ get }) => { + const basicSettingStateValue = get(basicSettingState) + const roofAngleSet = basicSettingStateValue.roofAngleSet + + return roofAngleSet === 'slope' ? '寸' : '°' + }, +})