src/common/common.js

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

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()
+      setTimeout(() => {
-      addCanvasMouseEventListener('mouse:down', (event) => {
+        commonTextKeyEvent()
-        const pointer = canvas?.getPointer(event.e)
+        addCanvasMouseEventListener('mouse:down', (event) => {
+          const pointer = canvas?.getPointer(event.e)
 
-        textbox = new fabric.Textbox('', {
+          textbox = new fabric.Textbox('', {
-          left: pointer.x,
+            left: pointer.x,
-          top: pointer.y,
+            top: pointer.y,
-          width: 200,
+            width: 200,
-          editable: true,
+            editable: true,
-          name: 'commonText',
+            name: 'commonText',
-          visible: wordDisplay,
+            visible: wordDisplay,
-          fill: commonTextFont.fontColor.value,
+            fill: commonTextFont.fontColor.value,
-          fontFamily: commonTextFont.fontFamily.value,
+            fontFamily: commonTextFont.fontFamily.value,
-          fontSize: commonTextFont.fontSize.value,
+            fontSize: commonTextFont.fontSize.value,
-          fontStyle: commonTextFont.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
+            fontStyle: commonTextFont.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
-          fontWeight: commonTextFont.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
+            fontWeight: commonTextFont.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
-          selectable: true,
+            selectable: true,
-          lockMovementX: true,
+            lockMovementX: true,
-          lockMovementY: true,
+            lockMovementY: true,
-          originX: 'center',
+            originX: 'center',
-          originY: '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)
+      initEvent()
-        canvas.setActiveObject(textbox)
-        textbox.enterEditing()
-        textbox.selectAll()
-      })
     }
   }
 

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,

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,