diff --git a/src/components/fabric/QLine.js b/src/components/fabric/QLine.js index e9049ca8..7881712e 100644 --- a/src/components/fabric/QLine.js +++ b/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) { - 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)) - } + this.length = calcLinePlaneSize(this) / 10 }, addLengthText() { diff --git a/src/hooks/usePolygon.js b/src/hooks/usePolygon.js index 86c9a2b9..12d7e188 100644 --- a/src/hooks/usePolygon.js +++ b/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