Merge branches 'dev-ck' and 'dev' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into dev-ck

2024-10-23 17:07:47 +09:00 · 2024-10-23 17:07:47 +09:00 · f3035f29da
commit f3035f29da
parent 365722f096 0de81807bd
9 changed files with 101 additions and 44 deletions
--- a/src/components/common/font/FontSetting.jsx
+++ b/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 [originFontSize, setOriginFontSize] = useState(fontSize)
-  const [selectedFont, setSelectedFont] = useState(font ? font : fonts[0])
-  const [selectedFontSize, setSelectedFontSize] = useState(fontSize ? fontSize : fontSizes[0])
-  const [selectedFontColor, setSelectedFontColor] = useState(null)
+  const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
+  const currentFont = useRecoilValue(fontSelector(type))
+
+  const [selectedFont, setSelectedFont] = useState(currentFont.fontFamily)
+  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
-              className="btn-frame modal act"
-              onClick={() => {
-                setIsShow(false)
-                setFont(selectedFont)
-                setFontSize(selectedFontSize)
-                closePopup(id)
-              }}
-            >
+            <button className="btn-frame modal act" onClick={handleSaveBtn}>
              {getMessage('modal.common.save')}
            </button>
          </div>
--- a/src/components/fabric/QLine.js
+++ b/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)
-      if (thisText) {
-        this.canvas.remove(thisText)
-      }
-      this.text = null
+      const children = this.canvas.getObjects().filter((obj) => obj.parentId === this.id)
+      children.forEach((child) => {
+        this.canvas.remove(child)
+      })
    })
  },

--- a/src/components/fabric/QPolygon.js
+++ b/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)
-      thisText.forEach((text) => {
-        this.canvas.remove(text)
+      const children = this.canvas.getObjects().filter((obj) => obj.parentId === this.id)
+      children.forEach((child) => {
+        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 })
--- a/src/components/floor-plan/modal/setting01/SecondOption.jsx
+++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx
@ -203,12 +203,34 @@ export default function SecondOption() {
        }

        break
-      case 'font1': //문자 글꼴변경
-      case 'font2': //흐름 방향 글꼴 변경
-      case 'font3': //치수 글꼴변경
+      case 'font1': {
+        //문자 글꼴변경
+        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':
--- a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
+++ b/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) {
--- a/src/hooks/roofcover/useAuxiliaryDrawing.js
+++ b/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()
        }
      }
    },
--- a/src/hooks/useCanvas.js
+++ b/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
--- a/src/hooks/usePolygon.js
+++ b/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)
--- a/src/store/fontAtom.js
+++ b/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]
+    },
+})