Redo coords

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- 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)

src/Collection.ts

@@ -325,11 +325,11 @@ export function createCollectionMixin<TBase extends Constructor>(Base: TBase) {
         if (
           object.selectable &&
           object.visible &&
-          ((includeIntersecting && object.intersectsWithRect(tl, br, true)) ||
-            object.isContainedWithinRect(tl, br, true) ||
+          (object.isContainedWithinRect(tl, br, true) ||
             (includeIntersecting &&
-              object.containsPoint(tl, undefined, true)) ||
-            (includeIntersecting && object.containsPoint(br, undefined, true)))
+              (object.intersectsWithRect(tl, br, true) ||
+                object.containsPoint(tl, true) ||
+                object.containsPoint(br, true))))
         ) {
           objects.push(object);
         }

src/canvas/SelectableCanvas.ts

@@ -1001,24 +1001,23 @@ export class SelectableCanvas<
 
   /**
    * Checks point is inside the object.
-   * @param {Object} [pointer] x,y object of point coordinates we want to check.
    * @param {FabricObject} obj Object to test against
-   * @param {Object} [globalPointer] x,y object of point coordinates relative to canvas used to search per pixel target.
+   * @param {Object} [globalPointer] x,y object of point coordinates relative to canvas top left physical viewport corner
+   *  (used to measure the position of the mouse pointer on canvas) used to search per pixel target.
    * @return {Boolean} true if point is contained within an area of given object
    * @private
    */
-  _checkTarget(
-    pointer: Point,
-    obj: FabricObject,
-    globalPointer: Point
-  ): boolean {
+  _checkTarget(obj: FabricObject, globalPointer: Point): boolean {
     if (
       obj &&
       obj.visible &&
       obj.evented &&
       // http://www.geog.ubc.ca/courses/klink/gis.notes/ncgia/u32.html
       // http://idav.ucdavis.edu/~okreylos/TAship/Spring2000/PointInPolygon.html
-      obj.containsPoint(pointer)
+      obj.containsPoint(
+        sendPointToPlane(globalPointer, undefined, this.viewportTransform),
+        true
+      )
     ) {
       if (
         (this.perPixelTargetFind || obj.perPixelTargetFind) &&
@@ -1052,11 +1051,8 @@ export class SelectableCanvas<
     // until we call this function specifically to search inside the activeGroup
     while (i--) {
       const objToCheck = objects[i];
-      const pointerToUse = objToCheck.group
-        ? this._normalizePointer(objToCheck.group, pointer)
-        : pointer;
-      if (this._checkTarget(pointerToUse, objToCheck, pointer)) {
-        target = objects[i];
+      if (this._checkTarget(objToCheck, pointer)) {
+        target = objToCheck;
         if (isCollection(target) && target.subTargetCheck) {
           const subTarget = this._searchPossibleTargets(
             target._objects as FabricObject[],

src/canvas/StaticCanvas.ts

@@ -13,7 +13,6 @@ import type { Rect } from '../shapes/Rect';
 import {
   Constructor,
   ImageFormat,
-  TCornerPoint,
   TDataUrlOptions,
   TFiller,
   TMat2D,
@@ -210,18 +209,7 @@ export class StaticCanvas<
   declare enableRetinaScaling: boolean;
 
   /**
-   * Describe canvas element extension over design
-   * properties are tl,tr,bl,br.
-   * if canvas is not zoomed/panned those points are the four corner of canvas
-   * if canvas is viewportTransformed you those points indicate the extension
-   * of canvas element in plain untrasformed coordinates
-   * The coordinates get updated with @method calcViewportBoundaries.
-   */
-  declare vptCoords: TCornerPoint;
-
-  /**
-   * Based on vptCoords and object.aCoords, skip rendering of objects that
-   * are not included in current viewport.
+   * Skip rendering of objects that are not included in current viewport.
    * May greatly help in applications with crowded canvas and use of zoom/pan
    * If One of the corner of the bounding box of the object is on the canvas
    * the objects get rendered.
@@ -312,7 +300,6 @@ export class StaticCanvas<
       height: this.height || this.lowerCanvasEl.height || 0,
     });
     this.viewportTransform = [...this.viewportTransform];
-    this.calcViewportBoundaries();
   }
 
   protected initElements(el: string | HTMLCanvasElement) {
@@ -580,7 +567,6 @@ export class StaticCanvas<
     if (overlayObject) {
       overlayObject.setCoords();
     }
-    this.calcViewportBoundaries();
     this.renderOnAddRemove && this.requestRenderAll();
   }
 
@@ -711,28 +697,25 @@ export class StaticCanvas<
   }
 
   /**
-   * Calculate the position of the 4 corner of canvas with current viewportTransform.
-   * helps to determinate when an object is in the current rendering viewport using
-   * object absolute coordinates ( aCoords )
-   * @return {Object} points.tl
-   * @chainable
+   * Describe the visible bounding box of the canvas
+   * if canvas is **NOT** transformed the points are equal to the four corners of the `HTMLCanvasElement`
+   * if canvas is transformed the points describe the distance from canvas origin,
+   * `tl` being the viewport origin which is the `tl` corner of the `HTMLCanvasElement`.
    */
-  calcViewportBoundaries(): TCornerPoint {
-    const width = this.width,
-      height = this.height,
-      iVpt = invertTransform(this.viewportTransform),
-      a = transformPoint({ x: 0, y: 0 }, iVpt),
-      b = transformPoint({ x: width, y: height }, iVpt),
-      // we don't support vpt flipping
-      // but the code is robust enough to mostly work with flipping
+  getViewportBBox() {
+    // we don't support vpt flipping
+    // but the code is robust enough to mostly work with flipping
+    const iVpt = invertTransform(this.viewportTransform),
+      a = new Point().transform(iVpt),
+      b = new Point(this.width, this.height).transform(iVpt),
       min = a.min(b),
       max = a.max(b);
-    return (this.vptCoords = {
+    return {
       tl: min,
       tr: new Point(max.x, min.y),
       bl: new Point(min.x, max.y),
       br: max,
-    });
+    };
   }
 
   cancelRequestedRender() {
@@ -758,7 +741,6 @@ export class StaticCanvas<
 
     const v = this.viewportTransform,
       path = this.clipPath;
-    this.calcViewportBoundaries();
     this.clearContext(ctx);
     ctx.imageSmoothingEnabled = this.imageSmoothingEnabled;
     // @ts-ignore node-canvas stuff
@@ -824,9 +806,11 @@ export class StaticCanvas<
    * @param {Array} objects to render
    */
   _renderObjects(ctx: CanvasRenderingContext2D, objects: FabricObject[]) {
-    for (let i = 0, len = objects.length; i < len; ++i) {
-      objects[i] && objects[i].render(ctx);
-    }
+    objects.forEach((object) => {
+      object &&
+        (!this.skipOffscreen || !object.skipOffscreen || object.isOnScreen()) &&
+        object.render(ctx);
+    });
   }
 
   /**
@@ -1629,12 +1613,10 @@ export class StaticCanvas<
     this.viewportTransform = newVp;
     this.width = scaledWidth;
     this.height = scaledHeight;
-    this.calcViewportBoundaries();
     this.renderCanvas(canvasEl.getContext('2d')!, objectsToRender);
     this.viewportTransform = vp;
     this.width = originalWidth;
     this.height = originalHeight;
-    this.calcViewportBoundaries();
     this.enableRetinaScaling = originalRetina;
     return canvasEl;
   }

src/controls/Control.ts

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { halfPI } from '../constants';
 import {
   ControlActionHandler,
   TPointerEvent,
@@ -8,9 +7,8 @@ import {
 import { Point } from '../Point';
 import type { FabricObject } from '../shapes/Object/Object';
 import { TDegree, TMat2D } from '../typedefs';
-import { cos } from '../util/misc/cos';
+import { mapValues } from '../util/internals';
 import { degreesToRadians } from '../util/misc/radiansDegreesConversion';
-import { sin } from '../util/misc/sin';
 import {
   ControlRenderingStyleOverride,
   renderCircleControl,
@@ -276,10 +274,16 @@ export class Control {
     fabricObject: FabricObject,
     currentControl: Control
   ) {
-    return new Point(
-      this.x * dim.x + this.offsetX,
-      this.y * dim.y + this.offsetY
-    ).transform(finalMatrix);
+    // // legacy
+    // return new Point(
+    //   this.x * dim.x + this.offsetX,
+    //   this.y * dim.y + this.offsetY
+    // ).transform(finalMatrix);
+
+    const bbox = fabricObject.bbox;
+    return new Point(this.x, this.y)
+      .transform(bbox.getTransformation())
+      .add(new Point(this.offsetX, this.offsetY).rotate(bbox.rotation));
   }
 
   /**
@@ -298,38 +302,26 @@ export class Control {
     centerY: number,
     isTouch: boolean
   ) {
-    let cosHalfOffset, sinHalfOffset, cosHalfOffsetComp, sinHalfOffsetComp;
-    const xSize = isTouch ? this.touchSizeX : this.sizeX,
-      ySize = isTouch ? this.touchSizeY : this.sizeY;
-    if (xSize && ySize && xSize !== ySize) {
-      // handle rectangular corners
-      const controlTriangleAngle = Math.atan2(ySize, xSize);
-      const cornerHypotenuse = Math.sqrt(xSize * xSize + ySize * ySize) / 2;
-      const newTheta = controlTriangleAngle - degreesToRadians(objectAngle);
-      const newThetaComp =
-        halfPI - controlTriangleAngle - degreesToRadians(objectAngle);
-      cosHalfOffset = cornerHypotenuse * cos(newTheta);
-      sinHalfOffset = cornerHypotenuse * sin(newTheta);
-      // use complementary angle for two corners
-      cosHalfOffsetComp = cornerHypotenuse * cos(newThetaComp);
-      sinHalfOffsetComp = cornerHypotenuse * sin(newThetaComp);
-    } else {
-      // handle square corners
-      // use default object corner size unless size is defined
-      const cornerSize = xSize && ySize ? xSize : objectCornerSize;
-      const cornerHypotenuse = cornerSize * Math.SQRT1_2;
-      // complementary angles are equal since they're both 45 degrees
-      const newTheta = degreesToRadians(45 - objectAngle);
-      cosHalfOffset = cosHalfOffsetComp = cornerHypotenuse * cos(newTheta);
-      sinHalfOffset = sinHalfOffsetComp = cornerHypotenuse * sin(newTheta);
-    }
-
-    return {
-      tl: new Point(centerX - sinHalfOffsetComp, centerY - cosHalfOffsetComp),
-      tr: new Point(centerX + cosHalfOffset, centerY - sinHalfOffset),
-      bl: new Point(centerX - cosHalfOffset, centerY + sinHalfOffset),
-      br: new Point(centerX + sinHalfOffsetComp, centerY + cosHalfOffsetComp),
-    };
+    const size = isTouch
+      ? new Point(
+          this.touchSizeX || objectCornerSize,
+          this.touchSizeY || objectCornerSize
+        )
+      : new Point(
+          this.sizeX || objectCornerSize,
+          this.sizeY || objectCornerSize
+        );
+    const rotation = degreesToRadians(objectAngle);
+    const center = new Point(centerX, centerY);
+    return mapValues(
+      {
+        tl: new Point(-0.5, -0.5),
+        tr: new Point(0.5, -0.5),
+        bl: new Point(-0.5, 0.5),
+        br: new Point(0.5, 0.5),
+      },
+      (origin) => origin.multiply(size).rotate(rotation).add(center)
+    );
   }
 
   /**

src/controls/polyControl.ts

@@ -51,7 +51,7 @@ const polyActionHandler = (
     pointIndex = transform.pointIndex,
     mouseLocalPosition = getLocalPoint(transform, 'center', 'center', x, y),
     polygonBaseSize = getSize(poly),
-    size = poly._getTransformedDimensions(),
+    size = poly.bbox.sendToParent().getDimensionsVector(),
     sizeFactor = polygonBaseSize.divide(size),
     adjustFlip = new Point(poly.flipX ? -1 : 1, poly.flipY ? -1 : 1);
 

src/controls/scale.ts

@@ -17,6 +17,7 @@ import {
 } from './util';
 import { wrapWithFireEvent } from './wrapWithFireEvent';
 import { wrapWithFixedAnchor } from './wrapWithFixedAnchor';
+import { BBox } from '../shapes/Object/BBox';
 
 type ScaleTransform = Transform & {
   gestureScale?: number;
@@ -160,8 +161,8 @@ function scaleObject(
     ) {
       return false;
     }
-
-    dim = target._getTransformedDimensions();
+    // TODO: use setCoords instead?
+    dim = BBox.rotated(target).sendToParent().getDimensionsVector();
     // missing detection of flip and logic to switch the origin
     if (scaleProportionally && !by) {
       // uniform scaling

src/controls/skew.ts

@@ -19,6 +19,7 @@ import {
 } from './util';
 import { wrapWithFireEvent } from './wrapWithFireEvent';
 import { wrapWithFixedAnchor } from './wrapWithFixedAnchor';
+import { sizeAfterTransform } from '../util/misc/objectTransforms';
 
 export type SkewTransform = Transform & { skewingSide: -1 | 1 };
 
@@ -84,10 +85,11 @@ function skewObject(
   { target, ex, ey, skewingSide, ...transform }: SkewTransform,
   pointer: Point
 ) {
-  const { skew: skewKey } = AXIS_KEYS[axis],
+  const { skew: skewKey, counterAxis } = AXIS_KEYS[axis],
+    { scaleX, scaleY, skewX, skewY, width, height } = target,
     offset = pointer
       .subtract(new Point(ex, ey))
-      .divide(new Point(target.scaleX, target.scaleY))[axis],
+      .divide(new Point(scaleX, scaleY))[axis],
     skewingBefore = target[skewKey],
     skewingStart = transform[skewKey],
     shearingStart = Math.tan(degreesToRadians(skewingStart)),
@@ -96,18 +98,11 @@ function skewObject(
     // then:
     // a' = a + b * skewA => skewA = (a' - a) / b
     // the value b is tricky since skewY is applied before skewX
-    b =
-      axis === 'y'
-        ? target._getTransformedDimensions({
-            scaleX: 1,
-            scaleY: 1,
-            // since skewY is applied before skewX, b (=width) is not affected by skewX
-            skewX: 0,
-          }).x
-        : target._getTransformedDimensions({
-            scaleX: 1,
-            scaleY: 1,
-          }).y;
+    b = sizeAfterTransform(width, height, {
+      skewY,
+      // since skewY is applied before skewX, b (=width) is not affected by skewX
+      skewX: axis === 'y' ? 0 : skewX,
+    })[counterAxis];
 
   const shearing =
     (2 * offset * skewingSide) /
@@ -117,19 +112,22 @@ function skewObject(
     shearingStart;
 
   const skewing = radiansToDegrees(Math.atan(shearing));
-
   target.set(skewKey, skewing);
   const changed = skewingBefore !== target[skewKey];
 
   if (changed && axis === 'y') {
     // we don't want skewing to affect scaleX
     // so we factor it by the inverse skewing diff to make it seem unchanged to the viewer
-    const { skewX, scaleX } = target,
-      dimBefore = target._getTransformedDimensions({ skewY: skewingBefore }),
-      dimAfter = target._getTransformedDimensions(),
-      compensationFactor = skewX !== 0 ? dimBefore.x / dimAfter.x : 1;
+    const dimBefore = sizeAfterTransform(target.width, target.height, {
+        scaleX,
+        scaleY,
+        skewX,
+        skewY,
+      }),
+      dimAfter = sizeAfterTransform(target.width, target.height, target),
+      compensationFactor = target.skewX !== 0 ? dimBefore.x / dimAfter.x : 1;
     compensationFactor !== 1 &&
-      target.set('scaleX', compensationFactor * scaleX);
+      target.set('scaleX', compensationFactor * target.scaleX);
   }
 
   return changed;