src/components/fabric/QPolygon.js

@@ -6,7 +6,6 @@ import { calculateAngle, drawGableRoof, drawRidgeRoof, drawShedRoof, toGeoJSON }
 import * as turf from '@turf/turf'
 import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
 import Big from 'big.js'
-import { drawSkeletonRidgeRoof } from '@/util/skeleton-utils'
 
 export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   type: 'QPolygon',
@@ -376,9 +375,27 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
       const dy = Big(end.y).minus(Big(start.y))
       const length = dx.pow(2).plus(dy.pow(2)).sqrt().times(10).round().toNumber()
 
+      const direction = getDirectionByPoint(start, end)
+
+      let left, top
+
+      if (direction === 'bottom') {
+        left = (start.x + end.x) / 2 - 50
+        top = (start.y + end.y) / 2
+      } else if (direction === 'top') {
+        left = (start.x + end.x) / 2 + 30
+        top = (start.y + end.y) / 2
+      } else if (direction === 'left') {
+        left = (start.x + end.x) / 2
+        top = (start.y + end.y) / 2 - 30
+      } else if (direction === 'right') {
+        left = (start.x + end.x) / 2
+        top = (start.y + end.y) / 2 + 30
+      }
+
       let midPoint
 
-      midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2)
+      midPoint = new fabric.Point(left, top)
 
       const degree = Big(Math.atan2(dy.toNumber(), dx.toNumber())).times(180).div(Math.PI).toNumber()