src/components/fabric/QLine.js

@@ -1,6 +1,7 @@
 import { fabric } from 'fabric'
 import { v4 as uuidv4 } from 'uuid'
 import { getDirectionByPoint } from '@/util/canvas-util'
+import { calcLinePlaneSize } from '@/util/qpolygon-utils'
 
 export const QLine = fabric.util.createClass(fabric.Line, {
   type: 'QLine',
@@ -31,14 +32,16 @@ export const QLine = fabric.util.createClass(fabric.Line, {
     this.direction = options.direction ?? getDirectionByPoint({ x: this.x1, y: this.y1 }, { x: this.x2, y: this.y2 })
     this.textMode = options.textMode ?? 'plane' // plane:복시도, actual:실측, none:표시안함
     this.textVisible = options.textVisible ?? true
-    if (length !== 0) {
-      this.length = length
-    } else {
-      this.setLength()
-    }
 
     this.startPoint = { x: this.x1, y: this.y1 }
     this.endPoint = { x: this.x2, y: this.y2 }
+    try {
+      this.setLength()
+    } catch (e) {
+      setTimeout(() => {
+        this.setLength()
+      }, 100)
+    }
   },
 
   init: function () {
@@ -66,23 +69,7 @@ export const QLine = fabric.util.createClass(fabric.Line, {
   },
 
   setLength() {
-    if (this.attributes?.actualSize !== undefined && this.attributes?.planeSize !== undefined) {
+    this.length = calcLinePlaneSize(this) / 10
-      if (this.textMode === 'plane') {
-        this.length = this.attributes.planeSize / 10
-      } else if (this.textMode === 'actual') {
-        this.length = this.attributes.actualSize / 10
-      }
-    } else {
-      const scaleX = this.scaleX
-      const scaleY = this.scaleY
-      const x1 = this.left
-      const y1 = this.top
-      const x2 = this.left + this.width * scaleX
-      const y2 = this.top + this.height * scaleY
-      const dx = x2 - x1
-      const dy = y2 - y1
-      this.length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(1))
-    }
   },
 
   addLengthText() {

src/hooks/usePolygon.js

@@ -230,28 +230,28 @@ export const usePolygon = () => {
       case 'south':
         // lines중 가장 아래에 있는 라인을 찾는다.
         const line = lines.reduce((acc, cur) => {
-          return acc.y2 > cur.y2 ? acc : cur
+          return acc.y2 + acc.y1 > cur.y2 + cur.y1 ? acc : cur
         }, lines[0])
         centerPoint = { x: (line.x2 + line.x1) / 2, y: Math.max(line.y1, line.y2) }
         break
       case 'north':
         // lines중 가장 위에 있는 라인을 찾는다.
         const line2 = lines.reduce((acc, cur) => {
-          return acc.y2 < cur.y2 ? acc : cur
+          return acc.y2 + acc.y1 < cur.y2 + cur.y1 ? acc : cur
         }, lines[0])
         centerPoint = { x: (line2.x2 + line2.x1) / 2, y: Math.min(line2.y1, line2.y2) }
         break
       case 'west':
         // lines중 가장 왼쪽에 있는 라인을 찾는다.
         const line3 = lines.reduce((acc, cur) => {
-          return acc.x2 < cur.x2 ? acc : cur
+          return acc.x2 + acc.x1 < cur.x2 + cur.x1 ? acc : cur
         }, lines[0])
         centerPoint = { x: Math.min(line3.x1, line3.x2), y: (line3.y1 + line3.y2) / 2 }
         break
       case 'east':
         // lines중 가장 오른쪽에 있는 라인을 찾는다.
         const line4 = lines.reduce((acc, cur) => {
-          return acc.x2 > cur.x2 ? acc : cur
+          return acc.x2 + acc.x1 > cur.x2 + cur.x1 ? acc : cur
         }, lines[0])
         centerPoint = { x: Math.max(line4.x1, line4.x2), y: (line4.y1 + line4.y2) / 2 }
         break