폰트 셋팅 및 uuid 추가

src/components/common/font/FontSetting.jsx

@@ -1,8 +1,10 @@
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { usePopup } from '@/hooks/usePopup'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { fontSelector, globalFontAtom } from '@/store/fontAtom'
 
 const fonts = [
   { name: 'MS PGothic', value: 'MS PGothic' },
@@ -43,19 +45,38 @@ const fontColors = [
   { name: '남색', value: 'darkblue' },
 ]
 export default function FontSetting(props) {
-  const { id, setIsShow, font, setFont, fontSize, setFontSize, pos = { x: 455, y: 180 } } = props
+  const { id, setIsShow, pos = { x: 455, y: 180 }, type } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
-  const [originFont, setOriginFont] = useState(font)
+  const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
-  const [originFontSize, setOriginFontSize] = useState(fontSize)
+  const currentFont = useRecoilValue(fontSelector(type))
-  const [selectedFont, setSelectedFont] = useState(font ? font : fonts[0])
+
-  const [selectedFontSize, setSelectedFontSize] = useState(fontSize ? fontSize : fontSizes[0])
+  const [selectedFont, setSelectedFont] = useState(currentFont.fontFamily)
-  const [selectedFontColor, setSelectedFontColor] = useState(null)
+  const [selectedFontWeight, setSelectedFontWeight] = useState(currentFont.fontWeight)
+  const [selectedFontSize, setSelectedFontSize] = useState(currentFont.fontSize)
+  const [selectedFontColor, setSelectedFontColor] = useState(currentFont.fontColor)
+
+  const handleSaveBtn = () => {
+    setGlobalFont((prev) => {
+      return {
+        ...prev,
+        [type]: {
+          fontFamily: selectedFont,
+          fontSize: selectedFontSize,
+          fontColor: selectedFontColor,
+          fontWeight: selectedFontWeight,
+        },
+      }
+    })
+    setIsShow(false)
+    closePopup(id)
+  }
+
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap lrr mount`}>
         <div className="modal-head">
-          <h1 className="title">{getMessage('modal.font')} </h1>
+          <h1 className="title">{getMessage('modal.font')}</h1>
           <button
             className="modal-close"
             onClick={() => {
@@ -78,7 +99,7 @@ export default function FontSetting(props) {
               <div className="font-option-item">
                 <div className="option-item-tit">{getMessage('modal.font.style')}(Y)</div>
                 <div className="grid-select">
-                  <QSelectBox options={fontOptions} onChange={(e) => setSelectedFont(e)} />
+                  <QSelectBox options={fontOptions} value={selectedFontWeight} onChange={(e) => setSelectedFontWeight(e)} />
                 </div>
               </div>
               <div className="font-option-item">
@@ -112,15 +133,7 @@ export default function FontSetting(props) {
             <div className="normal-font">{getMessage('modal.font.setting.info')}</div>
           </div>
           <div className="grid-btn-wrap">
-            <button
+            <button className="btn-frame modal act" onClick={handleSaveBtn}>
-              className="btn-frame modal act"
-              onClick={() => {
-                setIsShow(false)
-                setFont(selectedFont)
-                setFontSize(selectedFontSize)
-                closePopup(id)
-              }}
-            >
               {getMessage('modal.common.save')}
             </button>
           </div>

src/components/fabric/QLine.js

@@ -57,11 +57,10 @@ export const QLine = fabric.util.createClass(fabric.Line, {
     })
 
     this.on('removed', () => {
-      const thisText = this.canvas.getObjects().find((obj) => obj.name === 'lengthText' && obj.parentId === this.id)
+      const children = this.canvas.getObjects().filter((obj) => obj.parentId === this.id)
-      if (thisText) {
+      children.forEach((child) => {
-        this.canvas.remove(thisText)
+        this.canvas.remove(child)
-      }
+      })
-      this.text = null
     })
   },
 

src/components/fabric/QPolygon.js

@@ -132,22 +132,10 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     })
 
     this.on('removed', () => {
-      const thisText = this.canvas.getObjects().filter((obj) => obj.name === 'lengthText' && obj.parentId === this.id)
+      const children = this.canvas.getObjects().filter((obj) => obj.parentId === this.id)
-      thisText.forEach((text) => {
+      children.forEach((child) => {
-        this.canvas.remove(text)
+        this.canvas.remove(child)
       })
-      this.texts = null
-
-      if (this.arrow) {
-        this.canvas.remove(this.arrow)
-        this.canvas
-          .getObjects()
-          .filter((obj) => obj.name === 'directionText' && obj.parent === this.arrow)
-          .forEach((text) => {
-            this.canvas.remove(text)
-          })
-        this.arrow = null
-      }
     })
 
     // polygon.fillCell({ width: 50, height: 30, padding: 10 })

src/components/floor-plan/modal/setting01/SecondOption.jsx

@@ -203,12 +203,34 @@ export default function SecondOption() {
         }
 
         break
-      case 'font1': //문자 글꼴변경
+      case 'font1': {
-      case 'font2': //흐름 방향 글꼴 변경
+        //문자 글꼴변경
-      case 'font3': //치수 글꼴변경
+        setShowFontSettingModal(true)
+        fontProps.type = 'commonText'
+        fontProps.id = fontId + 1
+        addPopup(fontId + 1, 2, <FontSetting {...fontProps} />)
+        break
+      }
+      case 'font2': {
+        //흐름 방향 글꼴 변경
+        setShowFontSettingModal(true)
+        fontProps.type = 'flowText'
+        fontProps.id = fontId + 2
+        addPopup(fontId + 2, 2, <FontSetting {...fontProps} />)
+        break
+      }
+      case 'font3': {
+        //치수 글꼴변경
+        setShowFontSettingModal(true)
+        fontProps.type = 'lengthText'
+        fontProps.id = fontId + 3
+        addPopup(fontId + 3, 2, <FontSetting {...fontProps} />)
+        break
+      }
       case 'font4': //회로번호 글꼴변경
         setShowFontSettingModal(true)
-
+        fontProps.type = 'circuitNumberText'
+        fontProps.id = fontId
         addPopup(fontId, 2, <FontSetting {...fontProps} />)
         break
       case 'planSize':

src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx

@@ -92,6 +92,7 @@ export default function DimensionLineSetting(props) {
       x: 455,
       y: 180,
     },
+    type: 'dimensionLineText',
   }
   const popupHandle = (type) => {
     switch (type) {

src/hooks/roofcover/useAuxiliaryDrawing.js

@@ -241,7 +241,8 @@ export function useAuxiliaryDrawing(id) {
 
           const x = lastPoint.x + length * Math.cos(radian)
           const y = lastPoint.y - length * Math.sin(radian)
-          return [...prev, { x, y }]
+          mousePointerArr.current.push({ x, y })
+          drawLine()
         }
       }
     },

src/hooks/useCanvas.js

@@ -92,6 +92,7 @@ export function useCanvas(id) {
     // settings for all canvas in the app
     fabric.Object.prototype.transparentCorners = false
     fabric.Object.prototype.id = uuidv4()
+    fabric.Object.prototype.uuid = uuidv4()
     fabric.Object.prototype.selectable = true
     fabric.Object.prototype.lockMovementX = true
     fabric.Object.prototype.lockMovementY = true

src/hooks/usePolygon.js

@@ -190,7 +190,7 @@ export const usePolygon = () => {
         break
     }
 
-    arrow = new fabric.Polygon(points, {
+    arrow = new QPolygon(points, {
       selectable: false,
       name: 'arrow',
       fill: 'transparent',
@@ -200,8 +200,10 @@ export const usePolygon = () => {
       stickeyPoint: stickeyPoint,
       visible: isFlowDisplay,
       pitch: polygon.pitch,
+      parentId: polygon.id,
     })
 
+    arrow.setViewLengthText(false)
     polygon.arrow = arrow
     polygon.canvas.add(arrow)
     polygon.canvas.renderAll()
@@ -410,6 +412,7 @@ export const usePolygon = () => {
         left: arrow.stickeyPoint.x,
         top: arrow.stickeyPoint.y,
         parent: arrow,
+        parentId: arrow.id,
         visible: isFlowDisplay,
       })
       canvas.add(text)

src/store/fontAtom.js

@@ -0,0 +1,29 @@
+import { atom, selectorFamily } from 'recoil'
+
+const defaultFont = {
+  fontFamily: { name: 'MS PGothic', value: 'MS PGothic' },
+  fontWeight: { name: '보통', value: 'normal' },
+  fontSize: { name: '16', value: '16' },
+  fontColor: { name: '검정색', value: 'black' },
+}
+
+export const globalFontAtom = atom({
+  key: 'fontAtom',
+  default: {
+    commonText: defaultFont,
+    dimensionLineText: defaultFont,
+    flowText: defaultFont,
+    lengthText: defaultFont,
+    circuitNumberText: defaultFont,
+  },
+})
+
+export const fontSelector = selectorFamily({
+  key: 'fontSelector',
+  get:
+    (type) =>
+    ({ get }) => {
+      const fontAtom = get(globalFontAtom)
+      return fontAtom[type]
+    },
+})