From d8a7986120b1f1d22c6a925b3fdd5b83877a90d2 Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Mon, 26 May 2025 17:30:03 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[1046]=20-=20=EB=8C=93=EA=B8=80=201.=20?= =?UTF-8?q?=EC=9E=84=EC=9D=98=EA=B7=B8=EB=A6=AC=EB=93=9C=20=EC=9A=B0?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=ED=9D=A1=EC=B0=A9=EC=A0=90=EC=97=90=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=202.=20=EC=9E=84=EC=9D=98=EA=B7=B8=EB=A6=AC?= =?UTF-8?q?=EB=93=9C=20=EC=83=9D=EC=84=B1=20=ED=9B=84=20mouseLine=20?= =?UTF-8?q?=EC=95=88=EA=B7=B8=EB=A0=A4=EC=A7=80=EB=8A=94=20=ED=98=84?= =?UTF-8?q?=EC=83=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useEvent.js | 22 ++++++++++++++++++---- src/hooks/useTempGrid.js | 5 +++-- 2 files changed, 21 insertions(+), 6 deletions(-) diff --git a/src/hooks/useEvent.js b/src/hooks/useEvent.js index 59c5d895..d701bcd9 100644 --- a/src/hooks/useEvent.js +++ b/src/hooks/useEvent.js @@ -2,7 +2,14 @@ import { useRef } from 'react' import { useRecoilValue, useSetRecoilState } from 'recoil' import { canvasState, canvasZoomState, currentMenuState, textModeState } from '@/store/canvasAtom' import { fabric } from 'fabric' -import { calculateDistance, calculateDistancePoint, calculateIntersection, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util' +import { + calculateDistance, + calculateDistancePoint, + calculateIntersection, + distanceBetweenPoints, + findClosestPoint, + getInterSectionLineNotOverCoordinate, +} from '@/util/canvas-util' import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint' import { useDotLineGrid } from '@/hooks/useDotLineGrid' import { useTempGrid } from '@/hooks/useTempGrid' @@ -146,7 +153,7 @@ export function useEvent() { ...innerLinePoints, ] - if (dotLineGridSetting.LINE || canvas.getObjects().filter((obj) => ['lineGrid', 'tempGrid'].includes(obj.name)).length > 0) { + if (dotLineGridSetting.LINE || canvas.getObjects().filter((obj) => ['lineGrid', 'tempGrid'].includes(obj.name)).length > 1) { const closestLine = getClosestLineGrid(pointer) const horizonLines = canvas.getObjects().filter((obj) => ['lineGrid', 'tempGrid'].includes(obj.name) && obj.direction === 'horizontal') @@ -260,7 +267,9 @@ export function useEvent() { arrivalPoint = guideIntersectionPoint } } - } catch (e) {} + } catch (e) { + console.error(e) + } const horizontalLine = new fabric.Line([-4 * canvas.width, arrivalPoint.y, 4 * canvas.width, arrivalPoint.y], { stroke: 'red', @@ -298,7 +307,12 @@ export function useEvent() { e.preventDefault() e.stopPropagation() //임의 그리드 모드일 경우 - let pointer = { x: e.offsetX, y: e.offsetY } + let originPointer = { x: e.offsetX, y: e.offsetY } + const mouseLines = canvas.getObjects().filter((obj) => obj.name === 'mouseLine') + let pointer = getInterSectionLineNotOverCoordinate(mouseLines[0], mouseLines[1]) || { + x: Math.round(originPointer.x), + y: Math.round(originPointer.y), + } const tempGrid = new fabric.Line([-1500, pointer.y, 2500, pointer.y], { stroke: gridColor, diff --git a/src/hooks/useTempGrid.js b/src/hooks/useTempGrid.js index c875bcb3..c0a7dcc1 100644 --- a/src/hooks/useTempGrid.js +++ b/src/hooks/useTempGrid.js @@ -2,6 +2,7 @@ import { canvasState, tempGridModeState } from '@/store/canvasAtom' import { useRecoilState, useRecoilValue } from 'recoil' import { gridColorState } from '@/store/gridAtom' import { gridDisplaySelector } from '@/store/settingAtom' +import { useMouse } from '@/hooks/useMouse' const GRID_PADDING = 5 export function useTempGrid() { @@ -9,10 +10,10 @@ export function useTempGrid() { const gridColor = useRecoilValue(gridColorState) const isGridDisplay = useRecoilValue(gridDisplaySelector) const [tempGridMode, setTempGridMode] = useRecoilState(tempGridModeState) - + const { getIntersectMousePoint } = useMouse() const tempGridModeStateLeftClickEvent = (e) => { //임의 그리드 모드일 경우 - let pointer = canvas.getPointer(e.e) + let pointer = getIntersectMousePoint(e) const tempGrid = new fabric.Line([pointer.x, -1500, pointer.x, 2500], { stroke: gridColor, From ed68a93b20423dd8d0e5a2f86fd854d08679aa6e Mon Sep 17 00:00:00 2001 From: yjnoh Date: Mon, 26 May 2025 17:33:45 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[1059]=20:=20[HANASYS=20DESIGN=E3=80=91?= =?UTF-8?q?=E6=96=87=E5=AD=97=E4=BD=9C=E6=88=90=E3=81=AB=E3=81=A4=E3=81=84?= =?UTF-8?q?=E3=81=A6]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [작업내용] : 텍스트 입력 모드 토글로 종료 모드 기능 추가 --- src/common/common.js | 1 + src/hooks/common/useCommonUtils.js | 76 +++++++++++++++++++----------- 2 files changed, 50 insertions(+), 27 deletions(-) diff --git a/src/common/common.js b/src/common/common.js index 0fe0a002..0982ba6b 100644 --- a/src/common/common.js +++ b/src/common/common.js @@ -210,6 +210,7 @@ export const SAVE_KEY = [ 'toFixed', 'startPoint', 'endPoint', + 'editable', 'isSortedPoints', ] diff --git a/src/hooks/common/useCommonUtils.js b/src/hooks/common/useCommonUtils.js index d5c1bd01..fd021135 100644 --- a/src/hooks/common/useCommonUtils.js +++ b/src/hooks/common/useCommonUtils.js @@ -22,12 +22,12 @@ export function useCommonUtils() { const lengthTextFont = useRecoilValue(fontSelector('lengthText')) const commonTextFont = useRecoilValue(fontSelector('commonText')) const [commonUtils, setCommonUtilsState] = useRecoilState(commonUtilsState) - const { addPopup } = usePopup() + const { addPopup, closeAll } = usePopup() const { drawDirectionArrow, addLengthText } = usePolygon() const { applyDormers } = useObjectBatch({}) useEffect(() => { - if (commonUtils.text) { + if (commonUtils.text || !commonUtils.text) { commonTextMode() } else if (commonUtils.dimension) { commonDimensionMode() @@ -38,35 +38,57 @@ export function useCommonUtils() { const commonTextMode = () => { let textbox + closeAll() if (commonUtils.text) { - commonTextKeyEvent() - addCanvasMouseEventListener('mouse:down', (event) => { - const pointer = canvas?.getPointer(event.e) + setTimeout(() => { + commonTextKeyEvent() + addCanvasMouseEventListener('mouse:down', (event) => { + const pointer = canvas?.getPointer(event.e) - textbox = new fabric.Textbox('', { - left: pointer.x, - top: pointer.y, - width: 200, - editable: true, - name: 'commonText', - visible: wordDisplay, - fill: commonTextFont.fontColor.value, - fontFamily: commonTextFont.fontFamily.value, - fontSize: commonTextFont.fontSize.value, - fontStyle: commonTextFont.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal', - fontWeight: commonTextFont.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal', - selectable: true, - lockMovementX: true, - lockMovementY: true, - originX: 'center', - originY: 'center', + textbox = new fabric.Textbox('', { + left: pointer.x, + top: pointer.y, + width: 200, + editable: true, + name: 'commonText', + visible: wordDisplay, + fill: commonTextFont.fontColor.value, + fontFamily: commonTextFont.fontFamily.value, + fontSize: commonTextFont.fontSize.value, + fontStyle: commonTextFont.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal', + fontWeight: commonTextFont.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal', + selectable: true, + lockMovementX: true, + lockMovementY: true, + originX: 'center', + originY: 'center', + }) + + canvas?.add(textbox) + canvas.setActiveObject(textbox) + textbox.enterEditing() + textbox.selectAll() }) + }, 100) + } else { + const activeObject = canvas?.getActiveObject() + if (activeObject && activeObject.name === 'commonText') { + if (activeObject && activeObject.isEditing) { + if (activeObject.text === '') { + canvas?.remove(activeObject) + } else { + activeObject.exitEditing() + } + //정책 협의 + const texts = canvas.getObjects().filter((obj) => obj.name === 'commonText') + texts.forEach((text) => { + text.set({ editable: false }) + }) + canvas.renderAll() + } + } - canvas?.add(textbox) - canvas.setActiveObject(textbox) - textbox.enterEditing() - textbox.selectAll() - }) + initEvent() } }