Redo coords

CHANGELOG.md

@@ -299,12 +299,16 @@
 - fix(IText): layout change regression caused by #8663 (`text` was changed but layout was skipped) [#8711](https://github.com/fabricjs/fabric.js/pull/8711)
 - fix(IText, Textbox): fix broken text input [#8775](https://github.com/fabricjs/fabric.js/pull/8775)
 - ci(): `.codesandbox` [#8135](https://github.com/fabricjs/fabric.js/pull/8135)
+- fix(): redo object geometry [#8767](https://github.com/fabricjs/fabric.js/pull/8767)
 - ci(): disallow circular deps [#8759](https://github.com/fabricjs/fabric.js/pull/8759)
 - fix(): env WebGL import cycle [#8758](https://github.com/fabricjs/fabric.js/pull/8758)
 - chore(TS): remove controls from prototype. BREAKING: controls aren't shared anymore [#8753](https://github.com/fabricjs/fabric.js/pull/8753)
 - chore(TS): remove object `type` from prototype [#8714](https://github.com/fabricjs/fabric.js/pull/8714)
 - chore(TS): type Object props [#8677](https://github.com/fabricjs/fabric.js/issues/8677)
+- fix(Geometry): `_getCoords` not respecting group [#8747](https://github.com/fabricjs/fabric.js/issues/8747)
 - chore(TS): remove default values from filter prototypes [#8742](https://github.com/fabricjs/fabric.js/issues/8742)
+- refactor(): Control connection rendering [#8745](https://github.com/fabricjs/fabric.js/issues/8745)
+  **BREAKING**: `Control#render` method signature
 - chore(TS): remove default values from Objects prototypes, ( filters in a followup ) [#8719](https://github.com/fabricjs/fabric.js/issues/8719)
 - fix(Intersection): bug causing selection edge case [#8735](https://github.com/fabricjs/fabric.js/pull/8735)
 - chore(TS): class interface for options/brevity [#8674](https://github.com/fabricjs/fabric.js/issues/8674)

e2e/tests/controls/hit-regions/index.ts

@@ -33,7 +33,6 @@ beforeAll((canvas) => {
   });
   canvas.add(group);
   canvas.centerObject(group);
-  group.setCoords();
   canvas.setActiveObject(rect);
   canvas.renderAll();
   return { rect, group };

e2e/utils/ObjectUtil.ts

@@ -39,7 +39,7 @@ export class ObjectUtil<T extends FabricObject = FabricObject> {
 
   getObjectControlPoint(controlName: string) {
     return this.executeInBrowser(
-      (object, { controlName }) => object.oCoords[controlName],
+      (object, { controlName }) => object.getControlCoords()[controlName],
       { controlName }
     );
   }

lib/aligning_guidelines.js

@@ -101,7 +101,7 @@ function initAligningGuidelines(canvas) {
             ? (activeObjectTop + activeObjectHeight / 2 + aligningLineOffset)
             : (activeObjectTop - activeObjectHeight / 2 - aligningLineOffset)
         });
-        activeObject.setPositionByOrigin(new fabric.Point(objectLeft, activeObjectTop), 'center', 'center');
+        activeObject.setXY(new fabric.Point(objectLeft, activeObjectTop), 'center', 'center');
       }
 
       // snap by the left edge
@@ -116,7 +116,7 @@ function initAligningGuidelines(canvas) {
             ? (activeObjectTop + activeObjectHeight / 2 + aligningLineOffset)
             : (activeObjectTop - activeObjectHeight / 2 - aligningLineOffset)
         });
-        activeObject.setPositionByOrigin(new fabric.Point(objectLeft - objectWidth / 2 + activeObjectWidth / 2, activeObjectTop), 'center', 'center');
+        activeObject.setXY(new fabric.Point(objectLeft - objectWidth / 2 + activeObjectWidth / 2, activeObjectTop), 'center', 'center');
       }
 
       // snap by the right edge
@@ -131,7 +131,7 @@ function initAligningGuidelines(canvas) {
             ? (activeObjectTop + activeObjectHeight / 2 + aligningLineOffset)
             : (activeObjectTop - activeObjectHeight / 2 - aligningLineOffset)
         });
-        activeObject.setPositionByOrigin(new fabric.Point(objectLeft + objectWidth / 2 - activeObjectWidth / 2, activeObjectTop), 'center', 'center');
+        activeObject.setXY(new fabric.Point(objectLeft + objectWidth / 2 - activeObjectWidth / 2, activeObjectTop), 'center', 'center');
       }
 
       // snap by the vertical center line
@@ -146,7 +146,7 @@ function initAligningGuidelines(canvas) {
             ? (activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset)
             : (activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset)
         });
-        activeObject.setPositionByOrigin(new fabric.Point(activeObjectLeft, objectTop), 'center', 'center');
+        activeObject.setXY(new fabric.Point(activeObjectLeft, objectTop), 'center', 'center');
       }
 
       // snap by the top edge
@@ -161,7 +161,7 @@ function initAligningGuidelines(canvas) {
             ? (activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset)
             : (activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset)
         });
-        activeObject.setPositionByOrigin(new fabric.Point(activeObjectLeft, objectTop - objectHeight / 2 + activeObjectHeight / 2), 'center', 'center');
+        activeObject.setXY(new fabric.Point(activeObjectLeft, objectTop - objectHeight / 2 + activeObjectHeight / 2), 'center', 'center');
       }
 
       // snap by the bottom edge
@@ -176,7 +176,7 @@ function initAligningGuidelines(canvas) {
             ? (activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset)
             : (activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset)
         });
-        activeObject.setPositionByOrigin(new fabric.Point(activeObjectLeft, objectTop + objectHeight / 2 - activeObjectHeight / 2), 'center', 'center');
+        activeObject.setXY(new fabric.Point(activeObjectLeft, objectTop + objectHeight / 2 - activeObjectHeight / 2), 'center', 'center');
       }
     }
 

lib/centering_guidelines.js

@@ -63,7 +63,7 @@ function initCenteringGuidelines(canvas) {
     isInHorizontalCenter = Math.round(objectCenter.y) in canvasHeightCenterMap;
 
     if (isInHorizontalCenter || isInVerticalCenter) {
-      object.setPositionByOrigin(new fabric.Point((isInVerticalCenter ? canvasWidthCenter : objectCenter.x), (isInHorizontalCenter ? canvasHeightCenter : objectCenter.y)), 'center', 'center');
+      object.setXY(new fabric.Point((isInVerticalCenter ? canvasWidthCenter : objectCenter.x), (isInHorizontalCenter ? canvasHeightCenter : objectCenter.y)), 'center', 'center');
     }
   });
 

src/BBox/BBox.ts

@@ -0,0 +1,176 @@
+import { iMatrix } from '../constants';
+import { Point } from '../Point';
+import type { ObjectBBox } from '../shapes/Object/ObjectBBox';
+import type { TMat2D } from '../typedefs';
+import { mapValues } from '../util/internals';
+import { makeBoundingBoxFromPoints } from '../util/misc/boundingBoxFromPoints';
+import {
+  calcBaseChangeMatrix,
+  sendPointToPlane,
+} from '../util/misc/planeChange';
+import { radiansToDegrees } from '../util/misc/radiansDegreesConversion';
+import { createVector } from '../util/misc/vectors';
+import type { ViewportBBoxPlanes } from './ViewportBBox';
+import { ViewportBBox } from './ViewportBBox';
+
+export interface BBoxPlanes extends ViewportBBoxPlanes {
+  parent(): TMat2D;
+  self(): TMat2D;
+}
+
+export class BBox extends ViewportBBox {
+  protected declare readonly planes: BBoxPlanes;
+
+  protected constructor(transform: TMat2D, planes: BBoxPlanes) {
+    super(transform, planes);
+  }
+
+  /**
+   * Use this to operate on the object's own transformation.\
+   * Used to position the object in the relative plane
+   */
+  sendToParent() {
+    return this.sendToPlane(this.planes.parent());
+  }
+
+  /**
+   * Use this to operate in a transform-less plane
+   *
+   * e.g.
+   * {@link getBBox} will return the following:
+   *
+   * ```js
+   * let w = object.width;
+   * let h = object.height;
+   * let s = object.strokeWidth;
+   * let sx, sy, px, py; // non linear stroke/padding factors transformed back to the object plane
+   * ```
+   *
+   * | case                              | left          |  top          |  width       |  height      |
+   * | ---                               | ---           |  ---          |  ---         |  ---         |
+   * | no `stroke`/`padding`             | `-w / 2`      | `-h / 2`      | `w`          | `h`          |
+   * | `strokeUniform = false`           | `-w / 2 - s`  | `-h / 2 - s`  | `w + s * 2`  | `h + s * 2`  |
+   * | `strokeUniform = true || padding` | `-w / 2 - sx` | `-h / 2 - sy` | `w + sx * 2` | `h + sy * 2` |
+   *
+   */
+  sendToSelf() {
+    return this.sendToPlane(this.planes.self());
+  }
+
+  static getViewportCoords(target: ObjectBBox) {
+    const coords = target.calcCoords();
+    if (target.needsViewportCoords()) {
+      return coords;
+    } else {
+      const vpt = target.getViewportTransform();
+      return mapValues(coords, (coord) => sendPointToPlane(coord, vpt));
+    }
+  }
+
+  static getPlanes(target: ObjectBBox): BBoxPlanes {
+    const self = target.calcTransformMatrix();
+    const parent = target.group?.calcTransformMatrix() || iMatrix;
+    const viewport = target.getViewportTransform();
+    return {
+      self() {
+        return self;
+      },
+      parent() {
+        return parent;
+      },
+      viewport() {
+        return viewport;
+      },
+    };
+  }
+
+  static bbox(target: ObjectBBox) {
+    const coords = this.getViewportCoords(target);
+    const bbox = makeBoundingBoxFromPoints(Object.values(coords));
+    const transform = calcBaseChangeMatrix(
+      undefined,
+      [new Point(bbox.width, 0), new Point(0, bbox.height)],
+      coords.tl.midPointFrom(coords.br)
+    );
+    return new this(transform, this.getPlanes(target));
+  }
+
+  /**
+   *
+   * @param target
+   * @returns the bbox that respects rotation and flipping
+   */
+  static rotated(target: ObjectBBox) {
+    const coords = this.getViewportCoords(target);
+    const rotation = this.calcRotation(coords);
+    const center = coords.tl.midPointFrom(coords.br);
+    const bbox = makeBoundingBoxFromPoints(
+      Object.values(coords).map((coord) => coord.rotate(-rotation.x, center))
+    );
+    const transform = calcBaseChangeMatrix(
+      undefined,
+      [
+        // flipX/Y are taken into consideration in `rotation`
+        new Point(bbox.width, 0).rotate(rotation.x),
+        new Point(0, bbox.height).rotate(rotation.y),
+      ],
+      center
+    );
+    return new this(transform, this.getPlanes(target));
+  }
+
+  static legacy(target: ObjectBBox) {
+    const coords = this.getViewportCoords(target);
+    const rotation = this.calcRotation(coords);
+    const center = coords.tl.midPointFrom(coords.br);
+    const viewportBBox = makeBoundingBoxFromPoints(Object.values(coords));
+    const rotatedBBox = makeBoundingBoxFromPoints(
+      Object.values(coords).map((coord) => coord.rotate(-rotation.x, center))
+    );
+    const bboxTransform = calcBaseChangeMatrix(
+      undefined,
+      [
+        new Point(rotatedBBox.width / viewportBBox.width, 0),
+        new Point(0, rotatedBBox.height / viewportBBox.height),
+      ],
+      center
+    );
+    const legacyCoords = mapValues(coords, (coord) =>
+      coord.transform(bboxTransform)
+    );
+    const legacyBBox = makeBoundingBoxFromPoints(Object.values(legacyCoords));
+    const transform = calcBaseChangeMatrix(
+      undefined,
+      [new Point(1, 0).rotate(rotation.x), new Point(0, 1).rotate(rotation.y)],
+      center
+    );
+    return {
+      angle: radiansToDegrees(rotation.x),
+      getCoords() {
+        return legacyCoords;
+      },
+      getTransformation() {
+        return transform;
+      },
+      getBBox() {
+        return legacyBBox;
+      },
+      getBBoxVector() {
+        return new Point(legacyBBox.width, legacyBBox.height);
+      },
+      transform(ctx: CanvasRenderingContext2D) {
+        ctx.transform(...transform);
+      },
+    };
+  }
+
+  static transformed(target: ObjectBBox) {
+    const coords = this.getViewportCoords(target);
+    const transform = calcBaseChangeMatrix(
+      undefined,
+      [createVector(coords.tl, coords.tr), createVector(coords.tl, coords.bl)],
+      coords.tl.midPointFrom(coords.br)
+    );
+    return new this(transform, this.getPlanes(target));
+  }
+}

src/BBox/OwnBBox.ts

@@ -0,0 +1,41 @@
+import { iMatrix } from '../constants';
+import type { ObjectBBox } from '../shapes/Object/ObjectBBox';
+import type { TMat2D } from '../typedefs';
+import { mapValues } from '../util/internals';
+import { multiplyTransformMatrices } from '../util/misc/matrix';
+import { sendPointToPlane } from '../util/misc/planeChange';
+import type { BBoxPlanes } from './BBox';
+import { BBox } from './BBox';
+
+/**
+ * Performance optimization
+ */
+export class OwnBBox extends BBox {
+  constructor(transform: TMat2D, planes: BBoxPlanes) {
+    super(transform, planes);
+  }
+
+  getCoords() {
+    const from = multiplyTransformMatrices(
+      this.planes.viewport(),
+      this.planes.self()
+    );
+    return mapValues(super.getCoords(), (coord) =>
+      sendPointToPlane(coord, from)
+    );
+  }
+
+  static getPlanes(target: ObjectBBox): BBoxPlanes {
+    return {
+      self() {
+        return target.calcTransformMatrix();
+      },
+      parent() {
+        return target.group?.calcTransformMatrix() || iMatrix;
+      },
+      viewport() {
+        return target.getViewportTransform();
+      },
+    };
+  }
+}