line, polygon 관련 hook 추가

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
     }

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,
+  }
+}

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 {}
+}