fix(#8344): stroke projection

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- test(): stroke projection [#8374](https://github.com/fabricjs/fabric.js/pull/8374)
 - fix(Filters) Removing type from the options passed in the constructor [#9089](https://github.com/fabricjs/fabric.js/pull/9089)
 - feat(InteractiveObject): add `getActiveControl()` to expose `__corner` [#9102](https://github.com/fabricjs/fabric.js/pull/9102)
 - ci(sandbox): bump next.js [#9100](https://github.com/fabricjs/fabric.js/pull/9100)

src/shapes/Polyline.ts

@@ -7,7 +7,9 @@ import { Point } from '../Point';
 import type { Abortable, TClassProperties } from '../typedefs';
 import { classRegistry } from '../ClassRegistry';
 import { makeBoundingBoxFromPoints } from '../util/misc/boundingBoxFromPoints';
+import { calcDimensionsMatrix, transformPoint } from '../util/misc/matrix';
 import { projectStrokeOnPoints } from '../util/misc/projectStroke';
+import type { TProjectStrokeOnPointsOptions } from '../util/misc/projectStroke/types';
 import { degreesToRadians } from '../util/misc/radiansDegreesConversion';
 import { toFixed } from '../util/misc/toFixed';
 import { FabricObject, cacheProperties } from './Object/FabricObject';
@@ -85,6 +87,8 @@ export class Polyline<
 
   static cacheProperties = [...cacheProperties, 'points'];
 
+  strokeDiff: Point;
+
   /**
    * Constructor
    * @param {Array} points Array of points (where each point is an object with x and y)
@@ -117,19 +121,31 @@ export class Polyline<
     return true;
   }
 
-  private _projectStrokeOnPoints() {
-    return projectStrokeOnPoints(this.points, this, this.isOpen());
+  private _projectStrokeOnPoints(options: TProjectStrokeOnPointsOptions) {
+    return projectStrokeOnPoints(this.points, options, this.isOpen());
   }
 
   /**
    * Calculate the polygon bounding box
    * @private
    */
-  _calcDimensions() {
+  _calcDimensions(options?: Partial<TProjectStrokeOnPointsOptions>) {
+    options = {
+      scaleX: this.scaleX,
+      scaleY: this.scaleY,
+      skewX: this.skewX,
+      skewY: this.skewY,
+      strokeLineCap: this.strokeLineCap,
+      strokeLineJoin: this.strokeLineJoin,
+      strokeMiterLimit: this.strokeMiterLimit,
+      strokeUniform: this.strokeUniform,
+      strokeWidth: this.strokeWidth,
+      ...(options || {}),
+    };
     const points = this.exactBoundingBox
-      ? this._projectStrokeOnPoints().map(
-          (projection) => projection.projectedPoint
-        )
+      ? this._projectStrokeOnPoints(
+          options as TProjectStrokeOnPointsOptions
+        ).map((projection) => projection.projectedPoint)
       : this.points;
     if (points.length === 0) {
       return {
@@ -139,22 +155,30 @@ export class Polyline<
         height: 0,
         pathOffset: new Point(),
         strokeOffset: new Point(),
+        strokeDiff: new Point(),
       };
     }
-    const bbox = makeBoundingBoxFromPoints(points);
-    const bboxNoStroke = makeBoundingBoxFromPoints(this.points);
-    const offsetX = bbox.left + bbox.width / 2,
-      offsetY = bbox.top + bbox.height / 2;
-    const pathOffsetX =
-      offsetX - offsetY * Math.tan(degreesToRadians(this.skewX));
-    const pathOffsetY =
-      offsetY - pathOffsetX * Math.tan(degreesToRadians(this.skewY));
+    const bbox = makeBoundingBoxFromPoints(points),
+      // Remove scale effect, since it's applied after
+      matrix = calcDimensionsMatrix({ ...options, scaleX: 1, scaleY: 1 }),
+      bboxNoStroke = makeBoundingBoxFromPoints(
+        this.points.map((p) => transformPoint(p, matrix, true))
+      ),
+      offsetX = bbox.left + bbox.width / 2,
+      offsetY = bbox.top + bbox.height / 2,
+      pathOffsetX = offsetX - offsetY * Math.tan(degreesToRadians(this.skewX)),
+      pathOffsetY =
+        offsetY - pathOffsetX * Math.tan(degreesToRadians(this.skewY)),
+      scale = new Point(this.scaleX, this.scaleY);
     return {
       ...bbox,
       pathOffset: new Point(pathOffsetX, pathOffsetY),
-      strokeOffset: new Point(bboxNoStroke.left, bboxNoStroke.top).subtract(
-        new Point(bbox.left, bbox.top)
-      ),
+      strokeOffset: new Point(bboxNoStroke.left, bboxNoStroke.top)
+        .subtract(new Point(bbox.left, bbox.top))
+        .multiply(scale),
+      strokeDiff: new Point(bbox.width, bbox.height)
+        .subtract(new Point(bboxNoStroke.width, bboxNoStroke.height))
+        .multiply(scale),
     };
   }
 
@@ -174,9 +198,9 @@ export class Polyline<
   }
 
   setBoundingBox(adjustPosition?: boolean) {
-    const { left, top, width, height, pathOffset, strokeOffset } =
+    const { left, top, width, height, pathOffset, strokeOffset, strokeDiff } =
       this._calcDimensions();
-    this.set({ width, height, pathOffset, strokeOffset });
+    this.set({ width, height, pathOffset, strokeOffset, strokeDiff });
     adjustPosition &&
       this.setPositionByOrigin(
         new Point(left + width / 2, top + height / 2),
@@ -190,27 +214,48 @@ export class Polyline<
    */
   _getNonTransformedDimensions() {
     return this.exactBoundingBox
-      ? new Point(this.width, this.height)
+      ? // TODO: fix this
+        new Point(this.width, this.height)
       : super._getNonTransformedDimensions();
   }
 
   /**
    * @override stroke and skewing are taken into account when projecting stroke on points,
-   * therefore we don't want the default calculation to account for skewing as well
+   * therefore we don't want the default calculation to account for skewing as well.
+   * Though it is possible to pass `width` and `height` in `options`, doing so is very strange, use with discretion.
    *
    * @private
    */
-  _getTransformedDimensions(options?: any) {
-    return this.exactBoundingBox
-      ? super._getTransformedDimensions({
-          ...(options || {}),
-          // disable stroke bbox calculations
-          strokeWidth: 0,
-          // disable skewing bbox calculations
-          skewX: 0,
-          skewY: 0,
-        })
-      : super._getTransformedDimensions(options);
+  _getTransformedDimensions(options: any = {}) {
+    if (this.exactBoundingBox) {
+      let size: Point;
+      /* When `strokeUniform = true`, any changes to the properties require recalculating the `width` and `height` because 
+        the stroke projections are affected. 
+        When `strokeUniform = false`, we don't need to recalculate for scale transformations, as the effect of scale on 
+        projections follows a linear function (e.g. scaleX of 2 just multiply width by 2)*/
+      if (
+        Object.keys(options).some(
+          (key) =>
+            this.strokeUniform ||
+            (this.constructor as typeof Polyline).layoutProperties.includes(
+              key as keyof TProjectStrokeOnPointsOptions
+            )
+        )
+      ) {
+        const { width, height } = this._calcDimensions(options);
+        size = new Point(options.width ?? width, options.height ?? height);
+      } else {
+        size = new Point(
+          options.width ?? this.width,
+          options.height ?? this.height
+        );
+      }
+      return size.multiply(
+        new Point(options.scaleX || this.scaleX, options.scaleY || this.scaleY)
+      );
+    } else {
+      return super._getTransformedDimensions(options);
+    }
   }
 
   /**
@@ -221,13 +266,13 @@ export class Polyline<
     const changed = this.initialized && this[key as keyof this] !== value;
     const output = super._set(key, value);
     if (
+      this.exactBoundingBox &&
       changed &&
       (((key === 'scaleX' || key === 'scaleY') &&
         this.strokeUniform &&
         (this.constructor as typeof Polyline).layoutProperties.includes(
           'strokeUniform'
-        ) &&
-        this.strokeLineJoin !== 'round') ||
+        )) ||
         (this.constructor as typeof Polyline).layoutProperties.includes(
           key as keyof Polyline
         ))

src/util/index.ts

@@ -5,7 +5,12 @@ export {
   createVector,
   calcAngleBetweenVectors,
   getUnitVector,
-  getBisector,
+  calcVectorRotation,
+  crossProduct,
+  dotProduct,
+  getOrthonormalVector,
+  isBetweenVectors,
+  magnitude,
 } from './misc/vectors';
 export {
   degreesToRadians,

src/util/internals/findRight.ts

@@ -0,0 +1,11 @@
+export const findIndexRight = <T>(
+  array: T[],
+  predicate: (value: T, index: number, array: T[]) => boolean
+) => {
+  for (let index = array.length - 1; index >= 0; index--) {
+    if (predicate(array[index], index, array)) {
+      return index;
+    }
+  }
+  return -1;
+};

src/util/internals/index.ts

@@ -1,3 +1,4 @@
-export { getRandomInt } from './getRandomInt';
-export { ifNaN } from './ifNaN';
-export { removeFromArray } from './removeFromArray';
+export * from './findRight';
+export * from './getRandomInt';
+export * from './ifNaN';
+export * from './removeFromArray';

src/util/misc/projectStroke/StrokeLineCapProjections.ts

@@ -1,6 +1,6 @@
 import type { XY } from '../../../Point';
 import { Point } from '../../../Point';
-import { createVector, getOrthonormalVector, getUnitVector } from '../vectors';
+import { getOrthonormalVector, getUnitVector } from '../vectors';
 import { StrokeLineJoinProjections } from './StrokeLineJoinProjections';
 import { StrokeProjectionsBase } from './StrokeProjectionsBase';
 import type { TProjection, TProjectStrokeOnPointsOptions } from './types';
@@ -62,12 +62,32 @@ export class StrokeLineCapProjections extends StrokeProjectionsBase {
    * @see https://github.com/fabricjs/fabric.js/pull/8344#1-2-round
    */
   projectRound() {
-    return new StrokeLineJoinProjections(
-      this.A,
-      this.T,
-      this.T,
-      this.options
-    ).projectRound();
+    const projections: Point[] = [];
+
+    if (!this.isSkewed() && this.A.eq(this.T)) {
+      /* 1 point case without `skew`
+        When `strokeUniform` is true, scaling has no effect.
+        So we divide by scale, to remove its effect.
+      */
+      const projection = new Point(1, 1)
+        .scalarMultiply(this.strokeProjectionMagnitude)
+        .multiply(this.strokeUniformScalar);
+      projections.push(
+        this.applySkew(this.A.add(projection)),
+        this.applySkew(this.A.subtract(projection))
+      );
+    } else {
+      projections.push(
+        ...new StrokeLineJoinProjections(
+          this.A,
+          this.T,
+          this.T,
+          this.options
+        ).projectRound()
+      );
+    }
+
+    return projections;
   }
 
   /**
@@ -77,20 +97,35 @@ export class StrokeLineCapProjections extends StrokeProjectionsBase {
    * @see https://github.com/fabricjs/fabric.js/pull/8344#1-3-square
    */
   projectSquare() {
-    const orthogonalProjection = this.calcOrthogonalProjection(
-      this.A,
-      this.T,
-      this.strokeProjectionMagnitude
-    );
-    const strokePointingOut = this.scaleUnitVector(
-      getUnitVector(createVector(this.A, this.T)),
-      -this.strokeProjectionMagnitude
-    );
-    const projectedA = this.A.add(strokePointingOut);
-    return [
-      projectedA.add(orthogonalProjection),
-      projectedA.subtract(orthogonalProjection),
-    ].map((p) => this.applySkew(p));
+    const projections: Point[] = [];
+
+    if (this.A.eq(this.T)) {
+      /* 1 point case without `skew`
+        When `strokeUniform` is true, scaling has no effect.
+        So we divide by scale, to remove its effect.
+      */
+      const projection = new Point(1, 1)
+        .scalarMultiply(this.strokeProjectionMagnitude)
+        .multiply(this.strokeUniformScalar);
+      projections.push(this.A.add(projection), this.A.subtract(projection));
+    } else {
+      const orthogonalProjection = this.calcOrthogonalProjection(
+        this.A,
+        this.T,
+        this.strokeProjectionMagnitude
+      );
+      const strokePointingOut = this.scaleUnitVector(
+        getUnitVector(this.createSideVector(this.A, this.T)),
+        -this.strokeProjectionMagnitude
+      );
+      const projectedA = this.A.add(strokePointingOut);
+      projections.push(
+        projectedA.add(orthogonalProjection),
+        projectedA.subtract(orthogonalProjection)
+      );
+    }
+
+    return projections.map((p) => this.applySkew(p));
   }
 
   protected projectPoints() {