캔버스 설정 작업중

src/components/common/font/FontSetting.jsx

@@ -1,11 +1,10 @@
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { usePopup } from '@/hooks/usePopup'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { fontSelector, globalFontAtom } from '@/store/fontAtom'
-import { useFont } from '@/hooks/common/useFont'
 
 const fonts = [
   { name: 'MS PGothic', value: 'MS PGothic' },

src/components/floor-plan/modal/grid/DotLineGrid.jsx

@@ -17,17 +17,31 @@ const TYPE = {
   LINE: 'LINE',
 }
 
+const defaultDotLineGridSetting = {
+  INTERVAL: {
+    type: 2, // 1: 가로,세로 간격 수동, 2: 비율 간격
+    ratioInterval: 910,
+    verticalInterval: 910,
+    horizontalInterval: 910,
+    dimension: 1, // 치수
+  },
+  DOT: false,
+  LINE: false,
+}
+
 export default function DotLineGrid(props) {
   // const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
   const [close, setClose] = useState(false)
   const { id, setIsShow, pos = { x: 840, y: -815 } } = props
   const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
-  const gridColor = useRecoilValue(gridColorState)
+
   const canvas = useRecoilValue(canvasState)
-  const isGridDisplay = useRecoilValue(gridDisplaySelector)
 
   const [dotLineGridSetting, setDotLineGridSettingState] = useRecoilState(dotLineGridSettingState)
+  const [currentSetting, setCurrentSetting] = useState(
+    JSON.stringify(dotLineGridSetting) === JSON.stringify(defaultDotLineGridSetting) ? { ...defaultDotLineGridSetting } : { ...dotLineGridSetting },
+  )
   const resetDotLineGridSetting = useResetRecoilState(dotLineGridSettingState)
   const interval = useRecoilValue(dotLineIntervalSelector)
 
@@ -70,7 +84,7 @@ export default function DotLineGrid(props) {
 
   const handleCheckBoxChange = (e) => {
     const { value, checked } = e.target
-    setDotLineGridSettingState((prev) => {
+    setCurrentSetting((prev) => {
       return {
         ...prev,
         [value]: checked,
@@ -101,160 +115,35 @@ export default function DotLineGrid(props) {
       setSelectOption(matchedOption)
 
       // 서버에서 받은 데이터로 상태 업데이트
-      setDotLineGridSettingState(patternData)
+      setCurrentSetting(patternData)
     } catch (error) {
       console.error('Data fetching error:', error)
     }
   }
 
   const handleSave = async () => {
-    if (!dotLineGridSetting.DOT && !dotLineGridSetting.LINE) {
+    if (!currentSetting.DOT && !currentSetting.LINE) {
       swalFire({ text: '배치할 그리드를 설정해주세요.' })
       return
     }
     try {
       const patternData = {
         objectNo,
-        dotGridDisplay: dotLineGridSetting.DOT,
+        dotGridDisplay: currentSetting.DOT,
-        lineGridDisplay: dotLineGridSetting.LINE,
+        lineGridDisplay: currentSetting.LINE,
-        gridType: dotLineGridSetting.INTERVAL.type,
+        gridType: currentSetting.INTERVAL.type,
-        gridHorizon: dotLineGridSetting.INTERVAL.horizontalInterval / 10,
+        gridHorizon: currentSetting.INTERVAL.horizontalInterval / 10,
-        gridVertical: dotLineGridSetting.INTERVAL.verticalInterval / 10,
+        gridVertical: currentSetting.INTERVAL.verticalInterval / 10,
-        gridRatio: dotLineGridSetting.INTERVAL.ratioInterval / 10,
+        gridRatio: currentSetting.INTERVAL.ratioInterval / 10,
-        gridDimen: dotLineGridSetting.INTERVAL.dimension,
+        gridDimen: currentSetting.INTERVAL.dimension,
       }
 
       // HTTP POST 요청 보내기
       await post({ url: `/api/canvas-management/canvas-grid-settings`, data: patternData }).then((res) => {
         swalFire({ text: getMessage(res.returnMessage) })
-
+        setDotLineGridSettingState({ ...currentSetting })
-        // 1. 점.선 그리드 설정으로 만들어진 기존 오브젝트 제거
+        closePopup(id)
-        canvas
-          ?.getObjects()
-          .filter((obj) => obj.name === 'lineGrid')
-          .forEach((obj) => canvas?.remove(obj))
-        canvas
-          ?.getObjects()
-          .filter((obj) => obj.name === 'dotGrid')
-          .forEach((obj) => canvas?.remove(obj))
-
-        //const horizontalInterval = interval.horizontalInterval
-        //const verticalInterval = interval.verticalInterval
-
-        if (patternData.dotGridDisplay) {
-          const circle = new fabric.Circle({
-            radius: 2,
-            fill: 'red',
-            strokeWidth: 0.7,
-            originX: 'center',
-            originY: 'center',
-            selectable: false,
-            lockMovementX: true,
-            lockMovementY: true,
-            lockRotation: true,
-            lockScalingX: true,
-            lockScalingY: true,
-          })
-
-          const patternSourceCanvas = new fabric.StaticCanvas(null, {
-            width: patternData.gridHorizon,
-            height: patternData.gridVertical,
-          })
-
-          patternSourceCanvas.add(circle)
-
-          circle.set({
-            left: patternSourceCanvas.width / 2,
-            top: patternSourceCanvas.height / 2,
-          })
-
-          patternSourceCanvas.renderAll()
-
-          const pattern = new fabric.Pattern({
-            source: patternSourceCanvas.getElement(),
-            repeat: 'repeat',
-          })
-
-          const backgroundPolygon = new fabric.Polygon(
-            [
-              { x: 0, y: 0 },
-              { x: canvas.width, y: 0 },
-              { x: canvas.width, y: canvas.height },
-              { x: 0, y: canvas.height },
-            ],
-            {
-              fill: pattern,
-              selectable: false,
-              name: 'dotGrid',
-              visible: isGridDisplay,
-            },
-          )
-
-          canvas.add(backgroundPolygon)
-          backgroundPolygon.sendToBack()
-          canvas.renderAll()
-        }
-
-        if (patternData.lineGridDisplay) {
-          for (let i = 0; i < canvas.height / patternData.gridVertical + 1; i++) {
-            const horizontalLine = new fabric.Line(
-              [
-                0,
-                i * patternData.gridVertical - patternData.gridVertical / 2,
-                canvas.width,
-                i * patternData.gridVertical - patternData.gridVertical / 2,
-              ],
-              {
-                stroke: gridColor,
-                strokeWidth: 1,
-                selectable: true,
-                lockMovementX: true,
-                lockMovementY: true,
-                lockRotation: true,
-                lockScalingX: true,
-                lockScalingY: true,
-                name: 'lineGrid',
-                strokeDashArray: [5, 2],
-                opacity: 0.3,
-                direction: 'horizontal',
-                visible: isGridDisplay,
-              },
-            )
-            canvas.add(horizontalLine)
-          }
-
-          for (let i = 0; i < canvas.width / patternData.gridHorizon + 1; i++) {
-            const verticalLine = new fabric.Line(
-              [
-                i * patternData.gridHorizon - patternData.gridHorizon / 2,
-                0,
-                i * patternData.gridHorizon - patternData.gridHorizon / 2,
-                canvas.height,
-              ],
-              {
-                stroke: gridColor,
-                strokeWidth: 1,
-                selectable: true,
-                lockMovementX: true,
-                lockMovementY: true,
-                lockRotation: true,
-                lockScalingX: true,
-                lockScalingY: true,
-                name: 'lineGrid',
-                strokeDashArray: [5, 2],
-                opacity: 0.3,
-                direction: 'vertical',
-                visible: isGridDisplay,
-              },
-            )
-            canvas.add(verticalLine)
-          }
-        }
-
-        canvas.renderAll()
       })
-      setShowDotLineGridModal(false)
-      closePopup(id)
     } catch (error) {
       swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
     }
@@ -263,7 +152,7 @@ export default function DotLineGrid(props) {
   const handleRadioChange = (e) => {
     const { value, name, checked, selected } = e.target
 
-    setDotLineGridSettingState((prev) => {
+    setCurrentSetting((prev) => {
       return {
         ...prev,
         INTERVAL: {
@@ -276,7 +165,7 @@ export default function DotLineGrid(props) {
 
   const changeInput = (value, e) => {
     const { name } = e.target
-    setDotLineGridSettingState((prev) => {
+    setCurrentSetting((prev) => {
       return {
         ...prev,
         INTERVAL: {
@@ -289,7 +178,7 @@ export default function DotLineGrid(props) {
 
   const changeDimension = (result) => {
     const { value } = result
-    setDotLineGridSettingState((prev) => {
+    setCurrentSetting((prev) => {
       return {
         ...prev,
         INTERVAL: {
@@ -310,6 +199,7 @@ export default function DotLineGrid(props) {
       ?.getObjects()
       .filter((obj) => obj.name === 'dotGrid')
       .forEach((obj) => canvas?.remove(obj))
+
     resetDotLineGridSetting()
     setSelectOption(SelectOption[0])
   }
@@ -332,11 +222,11 @@ export default function DotLineGrid(props) {
         <div className="modal-body">
           <div className="grid-check-form">
             <div className="d-check-box pop">
-              <input type="checkbox" id="ch01" value={TYPE.DOT} onChange={handleCheckBoxChange} checked={dotLineGridSetting.DOT} />
+              <input type="checkbox" id="ch01" value={TYPE.DOT} onChange={handleCheckBoxChange} checked={currentSetting.DOT} />
               <label htmlFor="ch01">{getMessage('modal.canvas.setting.grid.dot.line.setting.dot.display')}</label>
             </div>
             <div className="d-check-box pop">
-              <input type="checkbox" id="ch02" value={TYPE.LINE} onChange={handleCheckBoxChange} checked={dotLineGridSetting.LINE} />
+              <input type="checkbox" id="ch02" value={TYPE.LINE} onChange={handleCheckBoxChange} checked={currentSetting.LINE} />
               <label htmlFor="ch02">{getMessage('modal.canvas.setting.grid.dot.line.setting.line.display')}</label>
             </div>
           </div>
@@ -349,8 +239,8 @@ export default function DotLineGrid(props) {
                   id="ra01"
                   value={1}
                   onChange={handleRadioChange}
-                  checked={(dotLineGridSetting.DOT || dotLineGridSetting.LINE) && dotLineGridSetting.INTERVAL.type === 1}
+                  checked={(currentSetting.DOT || currentSetting.LINE) && currentSetting.INTERVAL.type === 1}
-                  readOnly={!dotLineGridSetting.DOT && !dotLineGridSetting.LINE}
+                  readOnly={!currentSetting.DOT && !currentSetting.LINE}
                 />
                 <label htmlFor="ra01"></label>
               </div>
@@ -361,7 +251,7 @@ export default function DotLineGrid(props) {
                     type="text"
                     className="input-origin"
                     name={`horizontalInterval`}
-                    value={dotLineGridSetting.INTERVAL.horizontalInterval}
+                    value={currentSetting.INTERVAL.horizontalInterval}
                     onChange={(e) => onlyNumberInputChange(e, changeInput)}
                   />
                 </div>
@@ -374,7 +264,7 @@ export default function DotLineGrid(props) {
                     type="text"
                     className="input-origin"
                     name={`verticalInterval`}
-                    value={dotLineGridSetting.INTERVAL.verticalInterval}
+                    value={currentSetting.INTERVAL.verticalInterval}
                     onChange={(e) => onlyNumberInputChange(e, changeInput)}
                   />
                 </div>
@@ -389,8 +279,8 @@ export default function DotLineGrid(props) {
                   id="ra02"
                   value={2}
                   onChange={handleRadioChange}
-                  checked={(dotLineGridSetting.DOT || dotLineGridSetting.LINE) && dotLineGridSetting.INTERVAL.type === 2}
+                  checked={(currentSetting.DOT || currentSetting.LINE) && currentSetting.INTERVAL.type === 2}
-                  readOnly={!dotLineGridSetting.DOT && !dotLineGridSetting.LINE}
+                  readOnly={!currentSetting.DOT && !currentSetting.LINE}
                 />
                 <label htmlFor="ra02"></label>
               </div>
@@ -401,7 +291,7 @@ export default function DotLineGrid(props) {
                     type="text"
                     className="input-origin"
                     name={`ratioInterval`}
-                    value={dotLineGridSetting.INTERVAL.ratioInterval}
+                    value={currentSetting.INTERVAL.ratioInterval}
                     onChange={(e) => onlyNumberInputChange(e, changeInput)}
                   />
                 </div>

src/hooks/common/useCanvasConfigInitialize.js

@@ -1,12 +1,31 @@
-import { use, useEffect } from 'react'
+import { useEffect } from 'react'
-import { useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
-import { settingModalFirstOptionsState } from '@/store/settingAtom'
+import { roofDisplaySelector, settingModalFirstOptionsState } from '@/store/settingAtom'
-import { canvasState } from '@/store/canvasAtom'
+import { canvasState, dotLineGridSettingState } from '@/store/canvasAtom'
 import { setSurfaceShapePattern } from '@/util/canvas-util'
+import { useFont } from '@/hooks/common/useFont'
+import { useGrid } from '@/hooks/common/useGrid'
+import { globalFontAtom } from '@/store/fontAtom'
 
 export function useCanvasConfigInitialize() {
   const canvas = useRecoilValue(canvasState)
-  const settingModalFirstOptions = useRecoilValue(settingModalFirstOptionsState)
+  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
+  const roofDisplay = useRecoilValue(roofDisplaySelector)
+  const setGlobalFonts = useSetRecoilState(globalFontAtom)
+  const setDotLineGridSetting = useSetRecoilState(dotLineGridSettingState)
+  const {} = useFont()
+  const {} = useGrid()
+
+  useEffect(() => {
+    if (!canvas) return
+    canvas
+      .getObjects()
+      .filter((polygon) => polygon.name === 'roof')
+      .forEach((polygon) => {
+        setSurfaceShapePattern(polygon, roofDisplay.column)
+      })
+    canvas.renderAll()
+  }, [roofDisplay])
 
   const canvasLoadInit = () => {
     roofInit() //화면표시 초기화
@@ -14,18 +33,32 @@ export function useCanvasConfigInitialize() {
 
   //치수표시, 화면표시, 글꼴등 초기화
   const roofInit = () => {
-    if (canvas) {
+    setSettingModalFirstOptions((prev) => {
-      const roofDisplay = settingModalFirstOptions.option2.filter((item) => item.selected)
+      // ...prev에서 내부에 있는 option2 객체의 주소값도 다르게 만들어줘
+      const option1 = prev.option1.map((option) => {
+        return { ...option }
+      })
+      const option2 = prev.option2.map((option) => {
+        return { ...option }
+      })
+      const dimensionDisplay = prev.dimensionDisplay.map((option) => {
+        return { ...option }
+      })
+      return { ...prev, option1, option2, dimensionDisplay }
+    })
 
-      canvas
+    setDotLineGridSetting((prev) => {
-        .getObjects()
+      return { ...prev }
-        .filter((polygon) => polygon.name === 'roof')
+    })
-        .forEach((polygon) => {
-          setSurfaceShapePattern(polygon, roofDisplay[0].column)
-        })
 
-      canvas.renderAll()
+    setGlobalFonts((prev) => {
-    }
+      const commonText = { ...prev.commonText }
+      const dimensionLineText = { ...prev.dimensionLineText }
+      const flowText = { ...prev.flowText }
+      const lengthText = { ...prev.lengthText }
+      const circuitNumberText = { ...prev.circuitNumberText }
+      return { commonText, dimensionLineText, flowText, lengthText, circuitNumberText }
+    })
   }
 
   return { canvasLoadInit }

src/hooks/common/useGrid.js

@@ -0,0 +1,145 @@
+import { useRecoilValue } from 'recoil'
+import { canvasState, dotLineGridSettingState } from '@/store/canvasAtom'
+import { useEffect } from 'react'
+import { gridColorState } from '@/store/gridAtom'
+import { gridDisplaySelector } from '@/store/settingAtom'
+
+export function useGrid() {
+  const canvas = useRecoilValue(canvasState)
+
+  const dotLineGridSetting = useRecoilValue(dotLineGridSettingState)
+  const gridColor = useRecoilValue(gridColorState)
+  const isGridDisplay = useRecoilValue(gridDisplaySelector)
+
+  useEffect(() => {
+    if (!canvas) {
+      return
+    }
+    const patternData = {
+      dotGridDisplay: dotLineGridSetting.DOT,
+      lineGridDisplay: dotLineGridSetting.LINE,
+      gridType: dotLineGridSetting.INTERVAL.type,
+      gridHorizon: dotLineGridSetting.INTERVAL.horizontalInterval / 10,
+      gridVertical: dotLineGridSetting.INTERVAL.verticalInterval / 10,
+      gridRatio: dotLineGridSetting.INTERVAL.ratioInterval / 10,
+      gridDimen: dotLineGridSetting.INTERVAL.dimension,
+    }
+
+    // 1. 점.선 그리드 설정으로 만들어진 기존 오브젝트 제거
+    canvas
+      ?.getObjects()
+      .filter((obj) => obj.name === 'lineGrid')
+      .forEach((obj) => canvas?.remove(obj))
+    canvas
+      ?.getObjects()
+      .filter((obj) => obj.name === 'dotGrid')
+      .forEach((obj) => canvas?.remove(obj))
+
+    //const horizontalInterval = interval.horizontalInterval
+    //const verticalInterval = interval.verticalInterval
+
+    if (patternData.dotGridDisplay) {
+      const circle = new fabric.Circle({
+        radius: 2,
+        fill: 'red',
+        strokeWidth: 0.7,
+        originX: 'center',
+        originY: 'center',
+        selectable: false,
+        lockMovementX: true,
+        lockMovementY: true,
+        lockRotation: true,
+        lockScalingX: true,
+        lockScalingY: true,
+      })
+
+      const patternSourceCanvas = new fabric.StaticCanvas(null, {
+        width: patternData.gridHorizon,
+        height: patternData.gridVertical,
+      })
+
+      patternSourceCanvas.add(circle)
+
+      circle.set({
+        left: patternSourceCanvas.width / 2,
+        top: patternSourceCanvas.height / 2,
+      })
+
+      patternSourceCanvas.renderAll()
+
+      const pattern = new fabric.Pattern({
+        source: patternSourceCanvas.getElement(),
+        repeat: 'repeat',
+      })
+
+      const backgroundPolygon = new fabric.Polygon(
+        [
+          { x: 0, y: 0 },
+          { x: canvas.width, y: 0 },
+          { x: canvas.width, y: canvas.height },
+          { x: 0, y: canvas.height },
+        ],
+        {
+          fill: pattern,
+          selectable: false,
+          name: 'dotGrid',
+          visible: isGridDisplay,
+        },
+      )
+
+      canvas.add(backgroundPolygon)
+      backgroundPolygon.sendToBack()
+      canvas.renderAll()
+    }
+
+    if (patternData.lineGridDisplay) {
+      for (let i = 0; i < canvas.height / patternData.gridVertical + 1; i++) {
+        const horizontalLine = new fabric.Line(
+          [0, i * patternData.gridVertical - patternData.gridVertical / 2, canvas.width, i * patternData.gridVertical - patternData.gridVertical / 2],
+          {
+            stroke: gridColor,
+            strokeWidth: 1,
+            selectable: true,
+            lockMovementX: true,
+            lockMovementY: true,
+            lockRotation: true,
+            lockScalingX: true,
+            lockScalingY: true,
+            name: 'lineGrid',
+            strokeDashArray: [5, 2],
+            opacity: 0.3,
+            direction: 'horizontal',
+            visible: isGridDisplay,
+          },
+        )
+        canvas.add(horizontalLine)
+      }
+
+      for (let i = 0; i < canvas.width / patternData.gridHorizon + 1; i++) {
+        const verticalLine = new fabric.Line(
+          [i * patternData.gridHorizon - patternData.gridHorizon / 2, 0, i * patternData.gridHorizon - patternData.gridHorizon / 2, canvas.height],
+          {
+            stroke: gridColor,
+            strokeWidth: 1,
+            selectable: true,
+            lockMovementX: true,
+            lockMovementY: true,
+            lockRotation: true,
+            lockScalingX: true,
+            lockScalingY: true,
+            name: 'lineGrid',
+            strokeDashArray: [5, 2],
+            opacity: 0.3,
+            direction: 'vertical',
+            visible: isGridDisplay,
+          },
+        )
+        canvas.add(verticalLine)
+      }
+    }
+
+    canvas.renderAll()
+  }, [dotLineGridSetting])
+
+  return {}
+}

src/hooks/usePolygon.js

@@ -5,20 +5,20 @@ import { getDirectionByPoint } from '@/util/canvas-util'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { isSamePoint } from '@/util/qpolygon-utils'
 import { flowDisplaySelector } from '@/store/settingAtom'
+import { fontSelector } from '@/store/fontAtom'
 
 export const usePolygon = () => {
   const canvas = useRecoilValue(canvasState)
   const isFlowDisplay = useRecoilValue(flowDisplaySelector)
-  const fontSize = useRecoilValue(fontSizeState)
+  const flowFontOptions = useRecoilValue(fontSelector('flowText'))
-  const fontFamily = useRecoilValue(fontFamilyState)
+  const lengthTextFontOptions = useRecoilValue(fontSelector('lengthText'))
 
   const addPolygon = (points, options) => {
     const polygon = new QPolygon(points, {
       ...options,
+      fontSize: lengthTextFontOptions.fontSize.value,
       fill: options.fill || 'transparent',
       stroke: options.stroke || '#000000',
-      fontSize: fontSize,
-      fontFamily: fontFamily,
       selectable: true,
     })
 
@@ -53,9 +53,8 @@ export const usePolygon = () => {
       const text = new fabric.Text(length.toString(), {
         left: midPoint.x,
         top: midPoint.y,
-        fontSize: fontSize,
-        fontFamily: fontFamily,
         parentId: polygon.id,
+        fontSize: lengthTextFontOptions.fontSize.value,
         minX: Math.min(start.x, end.x),
         maxX: Math.max(start.x, end.x),
         minY: Math.min(start.y, end.y),
@@ -403,8 +402,10 @@ export const usePolygon = () => {
   const addTextByArrows = (arrows, txt, canvas) => {
     arrows.forEach((arrow, index) => {
       const text = new fabric.Text(`${txt}${index + 1} (${arrow.pitch}寸)`, {
-        fontSize: fontSize,
+        fontSize: flowFontOptions.fontSize.value,
-        fill: 'black',
+        fill: flowFontOptions.fontColor.value,
+        fontFamily: flowFontOptions.fontFamily.value,
+        fontWeight: flowFontOptions.fontWeight.value,
         originX: 'center',
         originY: 'center',
         name: 'flowText',