From fd9b723523e219586f438e550972573b2bd69f70 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Fri, 8 Nov 2024 11:25:58 +0900
Subject: [PATCH] =?UTF-8?q?=EB=94=94=EC=8A=A4=ED=94=8C=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=20=EC=84=A4=EC=A0=95=20-=20=EC=B9=98=EC=88=98=ED=91=9C?=
 =?UTF-8?q?=EC=8B=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/fabric/QPolygon.js    |  6 ++---
 src/hooks/option/useCanvasSetting.js | 36 ++++++++++++++++++++++++++--
 src/hooks/usePolygon.js              |  5 ++--
 src/store/settingAtom.js             |  1 +
 4 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js
index d1f97e0e..a248412e 100644
--- a/src/components/fabric/QPolygon.js
+++ b/src/components/fabric/QPolygon.js
@@ -790,7 +790,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   setViewLengthText(isView) {
     this.canvas
       ?.getObjects()
-      .filter((obj) => obj.name === 'lengthText' && obj.parent === this)
+      .filter((obj) => obj.name === 'lengthText' && obj.parentId === this.id)
       .forEach((text) => {
         text.set({ visible: isView })
       })
@@ -803,9 +803,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     this.scaleY = scale
     this.addLengthText()
   },
-  divideLine() {
-    // splitPolygonWithLines(this)
-  },
+
   calcOriginCoords() {
     const points = this.points
     const minX = Math.min(...points.map((p) => p.x))
diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js
index 02691887..549cc9a4 100644
--- a/src/hooks/option/useCanvasSetting.js
+++ b/src/hooks/option/useCanvasSetting.js
@@ -5,7 +5,7 @@ import { globalLocaleStore } from '@/store/localeAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { useAxios } from '@/hooks/useAxios'
 import { useSwal } from '@/hooks/useSwal'
-import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
+import { corridorDimensionSelector, settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
 import { setSurfaceShapePattern } from '@/util/canvas-util'
 import { POLYGON_TYPE } from '@/common/common'
 
@@ -17,6 +17,8 @@ export function useCanvasSetting() {
   const { option1, option2, dimensionDisplay } = settingModalFirstOptions
   const { option3, option4 } = settingModalSecondOptions
 
+  const corridorDimension = useRecoilValue(corridorDimensionSelector)
+
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { get, post } = useAxios(globalLocaleState)
   const { getMessage } = useMessage()
@@ -27,6 +29,36 @@ export function useCanvasSetting() {
 
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
 
+  useEffect(() => {
+    if (!canvas) {
+      return
+    }
+    const { column } = corridorDimension
+    const lengthTexts = canvas.getObjects().filter((obj) => obj.name === 'lengthText')
+    switch (column) {
+      case 'corridorDimension':
+        lengthTexts.forEach((obj) => {
+          if (obj.planeSize) {
+            obj.set({ text: obj.planeSize.toString() })
+          }
+        })
+        break
+      case 'realDimension':
+        lengthTexts.forEach((obj) => {
+          if (obj.actualSize) {
+            obj.set({ text: obj.actualSize.toString() })
+          }
+        })
+        break
+      case 'noneDimension':
+        lengthTexts.forEach((obj) => {
+          obj.set({ text: '' })
+        })
+        break
+    }
+    canvas.renderAll()
+  }, [corridorDimension])
+
   useEffect(() => {
     console.log('useCanvasSetting useEffect 실행1')
     fetchSettings()
@@ -257,7 +289,7 @@ export function useCanvasSetting() {
           optionName = ['7']
           break
         case 'flowDisplay': //흐름방향 표시
-          optionName = ['arrow']
+          optionName = ['arrow', 'flowText']
           break
         case 'trestleDisplay': //가대 표시
           optionName = ['8']
diff --git a/src/hooks/usePolygon.js b/src/hooks/usePolygon.js
index 9ea8b3b7..699b4f09 100644
--- a/src/hooks/usePolygon.js
+++ b/src/hooks/usePolygon.js
@@ -693,8 +693,7 @@ export const usePolygon = () => {
           }
         }
       })
-
-      const direction = newRoofs.length === 1 ? polygon.direction : representLine.direction
+      const direction = polygon.direction ?? representLine.direction
       const polygonDirection = polygon.direction
 
       switch (direction) {
@@ -723,7 +722,7 @@ export const usePolygon = () => {
         originY: 'center',
         selectable: true,
         defense: defense,
-        direction: newRoofs.length === 1 ? polygonDirection : defense,
+        direction: polygonDirection ?? defense,
         pitch: pitch,
       })
 
diff --git a/src/store/settingAtom.js b/src/store/settingAtom.js
index fede515e..869cc004 100644
--- a/src/store/settingAtom.js
+++ b/src/store/settingAtom.js
@@ -185,6 +185,7 @@ export const corridorDimensionSelector = selector({
     const settingModalFirstOptions = get(settingModalFirstOptionsState)
     return settingModalFirstOptions.dimensionDisplay.find((option) => option.selected)
   },
+  dangerouslyAllowMutability: true,
 })
 
 // 디스플레이 설정 - 화면 표시