From 493317b27112896c9c8a767de5edb7adc90934f6 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Thu, 12 Sep 2024 15:45:02 +0900
Subject: [PATCH] =?UTF-8?q?line,=20polygon=20=EA=B4=80=EB=A0=A8=20hook=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modal/outerlinesetting/OuterLineWall.jsx  |  8 ++--
 src/hooks/useLine.js                          | 43 +++++++++++++++++++
 src/hooks/usePolygon.js                       |  8 ++++
 3 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 src/hooks/useLine.js
 create mode 100644 src/hooks/usePolygon.js

diff --git a/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx b/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx
index f3699a50..a44abb81 100644
--- a/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx
+++ b/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx
@@ -17,11 +17,13 @@ import {
   outerLineTypeState,
 } from '@/store/outerLineAtom'
 import { QLine } from '@/components/fabric/QLine'
+import { useLine } from '@/hooks/useLine'
 
 export default function OuterLineWall() {
   const [modalOption, setModalOption] = useRecoilState(modalState) //modal 열림닫힘 state
   const { getMessage } = useMessage()
   const { addCanvasMouseEventListener, addDocumentEventListener } = useEvent()
+  const { addLineText, removeLineText } = useLine()
   const length1Ref = useRef(null)
   const length2Ref = useRef(null)
   const [length1, setLength1] = useRecoilState(outerLineLength1State)
@@ -59,6 +61,7 @@ export default function OuterLineWall() {
       .filter((obj) => obj.name === 'outerLine')
       .forEach((obj) => {
         canvas?.remove(obj)
+        removeLineText(obj)
       })
     canvas?.remove(canvas?.getObjects().find((obj) => obj.name === 'startPoint'))
     if (points.length === 0) {
@@ -95,15 +98,14 @@ export default function OuterLineWall() {
       name: 'outerLine',
     })
 
-    line.setViewLengthText(true)
-
     canvas?.add(line)
+    addLineText(line)
   }
 
   const keydown = (e) => {
     const key = e.key
 
-    const lengthNum = Number(length1Ref.current.value)
+    const lengthNum = Number(length1Ref.current.value) / 10
     if (lengthNum === 0) {
       return
     }
diff --git a/src/hooks/useLine.js b/src/hooks/useLine.js
new file mode 100644
index 00000000..81ebd1db
--- /dev/null
+++ b/src/hooks/useLine.js
@@ -0,0 +1,43 @@
+import { useRecoilValue } from 'recoil'
+import { canvasState, fontSizeState } from '@/store/canvasAtom'
+
+export const useLine = () => {
+  const canvas = useRecoilValue(canvasState)
+  const fontSize = useRecoilValue(fontSizeState)
+
+  const addLineText = (line) => {
+    removeLineText(line)
+
+    const text = new fabric.Text(getLengthByLine(line).toFixed(0), {
+      left: (line.x2 + line.x1) / 2,
+      top: (line.y2 + line.y1) / 2,
+      parent: line,
+      name: 'lengthTxt',
+      fontSize: fontSize,
+    })
+
+    canvas?.add(text)
+  }
+
+  const removeLineText = (line) => {
+    canvas?.remove(canvas?.getObjects().find((obj) => obj.parent === line))
+  }
+
+  const getLengthByLine = (line) => {
+    const scaleX = line.scaleX
+    const scaleY = line.scaleY
+    const x1 = line.left
+    const y1 = line.top
+    const x2 = line.left + line.width * scaleX
+    const y2 = line.top + line.height * scaleY
+    const dx = x2 - x1
+    const dy = y2 - y1
+
+    return Number(Math.sqrt(dx * dx + dy * dy).toFixed(0)) * 10
+  }
+
+  return {
+    addLineText,
+    removeLineText,
+  }
+}
diff --git a/src/hooks/usePolygon.js b/src/hooks/usePolygon.js
new file mode 100644
index 00000000..72354443
--- /dev/null
+++ b/src/hooks/usePolygon.js
@@ -0,0 +1,8 @@
+import { canvasState } from '@/store/canvasAtom'
+import { useRecoilValue } from 'recoil'
+
+export const usePolygon = () => {
+  const canvas = useRecoilValue(canvasState)
+
+  return {}
+}