Compare commits

..

No commits in common. "c8823712a49b4f9e3a91ef37019206292291717d" and "a5a137013573cd419a5803b880d83d3aa90aa41c" have entirely different histories.

4 changed files with 33 additions and 71 deletions

View File

@ -210,7 +210,6 @@ export const SAVE_KEY = [
'toFixed', 'toFixed',
'startPoint', 'startPoint',
'endPoint', 'endPoint',
'editable',
'isSortedPoints', 'isSortedPoints',
] ]

View File

@ -22,12 +22,12 @@ export function useCommonUtils() {
const lengthTextFont = useRecoilValue(fontSelector('lengthText')) const lengthTextFont = useRecoilValue(fontSelector('lengthText'))
const commonTextFont = useRecoilValue(fontSelector('commonText')) const commonTextFont = useRecoilValue(fontSelector('commonText'))
const [commonUtils, setCommonUtilsState] = useRecoilState(commonUtilsState) const [commonUtils, setCommonUtilsState] = useRecoilState(commonUtilsState)
const { addPopup, closeAll } = usePopup() const { addPopup } = usePopup()
const { drawDirectionArrow, addLengthText } = usePolygon() const { drawDirectionArrow, addLengthText } = usePolygon()
const { applyDormers } = useObjectBatch({}) const { applyDormers } = useObjectBatch({})
useEffect(() => { useEffect(() => {
if (commonUtils.text || !commonUtils.text) { if (commonUtils.text) {
commonTextMode() commonTextMode()
} else if (commonUtils.dimension) { } else if (commonUtils.dimension) {
commonDimensionMode() commonDimensionMode()
@ -38,9 +38,7 @@ export function useCommonUtils() {
const commonTextMode = () => { const commonTextMode = () => {
let textbox let textbox
closeAll()
if (commonUtils.text) { if (commonUtils.text) {
setTimeout(() => {
commonTextKeyEvent() commonTextKeyEvent()
addCanvasMouseEventListener('mouse:down', (event) => { addCanvasMouseEventListener('mouse:down', (event) => {
const pointer = canvas?.getPointer(event.e) const pointer = canvas?.getPointer(event.e)
@ -69,26 +67,6 @@ export function useCommonUtils() {
textbox.enterEditing() textbox.enterEditing()
textbox.selectAll() 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()
}
}
initEvent()
} }
} }

View File

@ -2,14 +2,7 @@ import { useRef } from 'react'
import { useRecoilValue, useSetRecoilState } from 'recoil' import { useRecoilValue, useSetRecoilState } from 'recoil'
import { canvasState, canvasZoomState, currentMenuState, textModeState } from '@/store/canvasAtom' import { canvasState, canvasZoomState, currentMenuState, textModeState } from '@/store/canvasAtom'
import { fabric } from 'fabric' import { fabric } from 'fabric'
import { import { calculateDistance, calculateDistancePoint, calculateIntersection, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util'
calculateDistance,
calculateDistancePoint,
calculateIntersection,
distanceBetweenPoints,
findClosestPoint,
getInterSectionLineNotOverCoordinate,
} from '@/util/canvas-util'
import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint' import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
import { useDotLineGrid } from '@/hooks/useDotLineGrid' import { useDotLineGrid } from '@/hooks/useDotLineGrid'
import { useTempGrid } from '@/hooks/useTempGrid' import { useTempGrid } from '@/hooks/useTempGrid'
@ -153,7 +146,7 @@ export function useEvent() {
...innerLinePoints, ...innerLinePoints,
] ]
if (dotLineGridSetting.LINE || canvas.getObjects().filter((obj) => ['lineGrid', 'tempGrid'].includes(obj.name)).length > 1) { if (dotLineGridSetting.LINE || canvas.getObjects().filter((obj) => ['lineGrid', 'tempGrid'].includes(obj.name)).length > 0) {
const closestLine = getClosestLineGrid(pointer) const closestLine = getClosestLineGrid(pointer)
const horizonLines = canvas.getObjects().filter((obj) => ['lineGrid', 'tempGrid'].includes(obj.name) && obj.direction === 'horizontal') const horizonLines = canvas.getObjects().filter((obj) => ['lineGrid', 'tempGrid'].includes(obj.name) && obj.direction === 'horizontal')
@ -267,9 +260,7 @@ export function useEvent() {
arrivalPoint = guideIntersectionPoint arrivalPoint = guideIntersectionPoint
} }
} }
} catch (e) { } catch (e) {}
console.error(e)
}
const horizontalLine = new fabric.Line([-4 * canvas.width, arrivalPoint.y, 4 * canvas.width, arrivalPoint.y], { const horizontalLine = new fabric.Line([-4 * canvas.width, arrivalPoint.y, 4 * canvas.width, arrivalPoint.y], {
stroke: 'red', stroke: 'red',
@ -307,12 +298,7 @@ export function useEvent() {
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
//임의 그리드 모드일 경우 //임의 그리드 모드일 경우
let originPointer = { x: e.offsetX, y: e.offsetY } let pointer = { 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], { const tempGrid = new fabric.Line([-1500, pointer.y, 2500, pointer.y], {
stroke: gridColor, stroke: gridColor,

View File

@ -2,7 +2,6 @@ import { canvasState, tempGridModeState } from '@/store/canvasAtom'
import { useRecoilState, useRecoilValue } from 'recoil' import { useRecoilState, useRecoilValue } from 'recoil'
import { gridColorState } from '@/store/gridAtom' import { gridColorState } from '@/store/gridAtom'
import { gridDisplaySelector } from '@/store/settingAtom' import { gridDisplaySelector } from '@/store/settingAtom'
import { useMouse } from '@/hooks/useMouse'
const GRID_PADDING = 5 const GRID_PADDING = 5
export function useTempGrid() { export function useTempGrid() {
@ -10,10 +9,10 @@ export function useTempGrid() {
const gridColor = useRecoilValue(gridColorState) const gridColor = useRecoilValue(gridColorState)
const isGridDisplay = useRecoilValue(gridDisplaySelector) const isGridDisplay = useRecoilValue(gridDisplaySelector)
const [tempGridMode, setTempGridMode] = useRecoilState(tempGridModeState) const [tempGridMode, setTempGridMode] = useRecoilState(tempGridModeState)
const { getIntersectMousePoint } = useMouse()
const tempGridModeStateLeftClickEvent = (e) => { const tempGridModeStateLeftClickEvent = (e) => {
//임의 그리드 모드일 경우 //임의 그리드 모드일 경우
let pointer = getIntersectMousePoint(e) let pointer = canvas.getPointer(e.e)
const tempGrid = new fabric.Line([pointer.x, -1500, pointer.x, 2500], { const tempGrid = new fabric.Line([pointer.x, -1500, pointer.x, 2500], {
stroke: gridColor, stroke: gridColor,