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() } } 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,