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