diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js index 1817862a..93e7ff65 100644 --- a/src/components/fabric/QPolygon.js +++ b/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) + }, })