option의 sort를 확인해 정렬 방식 수정

src/components/fabric/QPolygon.js

@@ -2,7 +2,7 @@ import { fabric } from 'fabric'
 import { v4 as uuidv4 } from 'uuid'
 import { QLine } from '@/components/fabric/QLine'
 import { distanceBetweenPoints, findTopTwoIndexesByDistance, getDirectionByPoint, sortedPointLessEightPoint, sortedPoints } from '@/util/canvas-util'
-import { drawHelpLineInHexagon } from '@/util/qpolygon-utils'
+import { calculateAngle, dividePolygon, drawHelpLineInHexagon } from '@/util/qpolygon-utils'
 
 export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   type: 'QPolygon',
@@ -19,10 +19,25 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
       point.x = Math.round(point.x)
       point.y = Math.round(point.y)
     })
-    if (points.length <= 8) {
+    options.sort = options.sort ?? true
+    if (!options.sort && points.length <= 8) {
       points = sortedPointLessEightPoint(points)
     } else {
-      points = sortedPoints(points)
+      let isDiagonal = false
+      points.forEach((point, i) => {
+        if (isDiagonal) {
+          return
+        }
+        const nextPoint = points[(i + 1) % points.length]
+        const angle = calculateAngle(point, nextPoint)
+        if (!(Math.abs(angle) === 0 || Math.abs(angle) === 180)) {
+          isDiagonal = true
+        }
+      })
+
+      if (!isDiagonal) {
+        points = sortedPoints(points)
+      }
     }
 
     this.callSuper('initialize', points, options)
@@ -77,6 +92,9 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), {
       type: this.type,
       text: this.text,
+      hips: this.hips,
+      ridges: this.ridges,
+      connectRidges: this.connectRidges,
     })
   },
   init: function () {
@@ -119,6 +137,8 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
         direction: getDirectionByPoint(point, nextPoint),
         idx: i,
       })
+      line.startPoint = point
+      line.endPoint = nextPoint
       this.lines.push(line)
     })
   },
@@ -326,5 +346,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
       text.set({ visible: isView })
     })
   },
-  divideLine() {},
+  divideLine() {
+    dividePolygon(this)
+  },
 })