BREAKING refactor(util): boundingBoxFromPoints, removed transform (#…

…8269)

src/util/misc/boundingBoxFromPoints.ts

@@ -1,35 +1,26 @@
 import { Point } from '../../point.class';
-import { TMat2D } from '../../typedefs';
-import { transformPoint } from './matrix';
 
 /**
- * Returns coordinates of points's bounding rectangle (left, top, width, height)
- * This function does not make sense.
- * - it mutates the input in case transform is present
- * - is used in 2 instances of the app one with the transform one without
+ * Calculates bounding box (left, top, width, height) from given `points`
  * @static
  * @memberOf fabric.util
- * @param {Point[]} points 4 points array
- * @param {TMat2D} [transform] an array of 6 numbers representing a 2x3 transform matrix
+ * @param {Point[]} points
  * @return {Object} Object with left, top, width, height properties
  */
-export const makeBoundingBoxFromPoints = (points: Point[], transform: TMat2D) => {
-  if (transform) {
-    for (let i = 0; i < points.length; i++) {
-      points[i] = transformPoint(points[i], transform);
+export const makeBoundingBoxFromPoints = (points: Point[]) => {
+  const { min, max } = points.reduce(({ min, max }, curr) => {
+    return {
+      min: min.min(curr),
+      max: max.max(curr)
     }
-  }
-  const left = Math.min(points[0].x, points[1].x, points[2].x, points[3].x),
-        right = Math.max(points[0].x, points[1].x, points[2].x, points[3].x),
-        width = right - left,
-        top = Math.min(points[0].y, points[1].y, points[2].y, points[3].y),
-        bottom = Math.max(points[0].y, points[1].y, points[2].y, points[3].y),
-        height = bottom - top;
+  }, { min: points[0], max: points[0] });
+
+  const size = max.subtract(min);
 
   return {
-    left,
-    top,
-    width,
-    height,
+    left: min.x,
+    top: min.y,
+    width: size.x,
+    height: size.y,
   };
-};
+}

src/util/misc/objectTransforms.ts

@@ -107,14 +107,14 @@ export const saveObjectTransform = (
   * @returns {Point} size
   */
 export const sizeAfterTransform = (width: number, height: number, options: TScaleMatrixArgs) => {
- const dimX = width / 2, dimY = height / 2,
-     points = [
-       new Point(-dimX, -dimY),
-       new Point(dimX, -dimY),
-       new Point(-dimX, dimY),
-       new Point(dimX, dimY),
-     ],
-     transformMatrix = calcDimensionsMatrix(options),
-     bbox = makeBoundingBoxFromPoints(points, transformMatrix);
+  const dimX = width / 2, dimY = height / 2,
+      transformMatrix = calcDimensionsMatrix(options),
+      points = [
+        new Point(-dimX, -dimY),
+        new Point(dimX, -dimY),
+        new Point(-dimX, dimY),
+        new Point(dimX, dimY),
+      ].map(p => p.transform(transformMatrix)),
+      bbox = makeBoundingBoxFromPoints(points);
  return new Point(bbox.width, bbox.height);
 };

test/unit/util.js

@@ -915,6 +915,20 @@
 
   QUnit.test('makeBoundingBoxFromPoints', function(assert) {
     assert.ok(typeof fabric.util.makeBoundingBoxFromPoints === 'function');
+    assert.deepEqual(fabric.util.makeBoundingBoxFromPoints([
+      new fabric.Point(50, 50),
+      new fabric.Point(-50, 50),
+      new fabric.Point(50, -50),
+      new fabric.Point(-50, -50),
+      new fabric.Point(50, 50),
+      new fabric.Point(80, -30),
+      new fabric.Point(100, 50),
+    ]), {
+      left: -50,
+      top: -50,
+      width: 150,
+      height: 100
+    }, 'bbox should match');
   });
 
   QUnit.test('parseUnit', function(assert) {