From 3527497d3a73578acfce60d311b3a6173ce81c39 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Thu, 6 Mar 2025 17:15:52 +0900
Subject: [PATCH] =?UTF-8?q?QPolygon=20addLengthText=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/fabric/QPolygon.js | 73 +++++++++++++++++++------------
 1 file changed, 45 insertions(+), 28 deletions(-)

diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js
index 2ec45422..3e889291 100644
--- a/src/components/fabric/QPolygon.js
+++ b/src/components/fabric/QPolygon.js
@@ -77,8 +77,8 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
     this.initOptions = options
 
-    this.init()
     this.initLines()
+    this.init()
     this.setShape()
   },
 
@@ -287,47 +287,64 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
         this.canvas.remove(text)
       })
 
-    let points = this.getCurrentPoints()
-
     this.texts = []
-    points.forEach((start, i) => {
-      const end = points[(i + 1) % points.length]
-      const dx = Big(end.x).minus(Big(start.x))
-      const dy = Big(end.y).minus(Big(start.y))
-      const length = dx.pow(2).plus(dy.pow(2)).sqrt().times(10).round().toNumber()
+    const lines = this.lines
 
-      let midPoint
+    lines.forEach((line, i) => {
+      const length = line.getLength()
+      const { planeSize, actualSize } = line.attributes
+      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
 
-      midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2)
+      let left, top
 
-      const degree = Big(Math.atan2(dy.toNumber(), dx.toNumber())).times(180).div(Math.PI).toNumber()
+      if (line.direction === 'right') {
+        left = (x1 + x2) / 2
+        top = (y1 + y2) / 2 + 10
+      } else if (line.direction === 'top') {
+        left = (x1 + x2) / 2 + 10
+        top = (y1 + y2) / 2
+      } else if (line.direction === 'left') {
+        left = (x1 + x2) / 2
+        top = (y1 + y2) / 2 - 30
+      } else if (line.direction === 'bottom') {
+        left = (x1 + x2) / 2 - 50
+        top = (y1 + y2) / 2
+      }
 
-      // Create new text object if it doesn't exist
-      const text = new fabric.Text(length.toString(), {
-        left: midPoint.x,
-        top: midPoint.y,
-        fontSize: this.fontSize,
-        parentId: this.id,
-        minX: Math.min(start.x, end.x),
-        maxX: Math.max(start.x, end.x),
-        minY: Math.min(start.y, end.y),
-        maxY: Math.max(start.y, end.y),
-        parentDirection: getDirectionByPoint(start, end),
+      const minX = line.left
+      const maxX = line.left + line.width
+      const minY = line.top
+      const maxY = line.top + line.length
+      const degree = (Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI
+
+      const text = new fabric.Textbox(planeSize ? planeSize.toString() : length.toString(), {
+        left: left,
+        top: top,
+        fontSize: this.fontSize.value,
+        minX,
+        maxX,
+        minY,
+        maxY,
+        parentDirection: line.direction,
         parentDegree: degree,
-        dirty: true,
-        editable: true,
+        parentId: this.id,
+        planeSize: planeSize ?? length,
+        actualSize: actualSize ?? length,
+        editable: false,
         selectable: true,
         lockRotation: true,
         lockScalingX: true,
         lockScalingY: true,
-        idx: i,
-        name: 'lengthText',
         parent: this,
+        name: 'lengthText',
       })
-
       this.texts.push(text)
       this.canvas.add(text)
-      this.canvas.renderAll()
     })
   },
   setFontSize(fontSize) {