fix(polyline): stroke bounding rect calculation typescript

src/shapes/polyline.class.ts

@@ -4,6 +4,8 @@ import { config } from '../config';
 import { Point } from '../point.class';
 import { makeBoundingBoxFromPoints } from '../util/misc/boundingBoxFromPoints';
 
+const degreesToRadians = fabric.util.degreesToRadians;
+
 (function (global) {
   var fabric = global.fabric || (global.fabric = {}),
     extend = fabric.util.object.extend,
@@ -81,33 +83,33 @@ import { makeBoundingBoxFromPoints } from '../util/misc/boundingBoxFromPoints';
 
       _setPositionDimensions: function (options) {
         options || (options = {});
-        var calcDim = this._calcDimensions(options),
-          correctLeftTop,
-          correctSize = this.exactBoundingBox ? this.strokeWidth : 0;
-        this.width = calcDim.width - correctSize;
-        this.height = calcDim.height - correctSize;
-        if (!options.fromSVG) {
-          correctLeftTop = this.translateToGivenOrigin(
-            {
-              // this looks bad, but is one way to keep it optional for now.
-              x: calcDim.left - this.strokeWidth / 2 + correctSize / 2,
-              y: calcDim.top - this.strokeWidth / 2 + correctSize / 2,
-            },
-            'left',
-            'top',
-            this.originX,
-            this.originY
+        const calcDim = this._calcDimensions(options), 
+          correctSize = new Point(
+            this.strokeUniform ? this.strokeWidth / this.scaleX : this.strokeWidth,
+            this.strokeUniform ? this.strokeWidth / this.scaleY : this.strokeWidth
           );
+        let correctLeftTop;
+        this.width = calcDim.width - correctSize.x;
+        this.height = calcDim.height - correctSize.y;
+        if (!options.fromSVG) {
+            correctLeftTop = this.translateToGivenOrigin({
+                x: this.left,
+                y: this.top
+            }, 'left', 'top', this.originX, this.originY);
         }
         if (typeof options.left === 'undefined') {
-          this.left = options.fromSVG ? calcDim.left : correctLeftTop.x;
+            this.left = options.fromSVG ? calcDim.left : correctLeftTop.x;
         }
         if (typeof options.top === 'undefined') {
-          this.top = options.fromSVG ? calcDim.top : correctLeftTop.y;
+            this.top = options.fromSVG ? calcDim.top : correctLeftTop.y;
         }
+        var offsetX = calcDim.left + calcDim.width/2,
+            offsetY = calcDim.top + calcDim.height/2;
+        var pathOffsetX = offsetX - offsetY * Math.tan(degreesToRadians(this.skewX))
+        var pathOffsetY = offsetY - pathOffsetX * Math.tan(degreesToRadians(this.skewY))
         this.pathOffset = {
-          x: calcDim.left + this.width / 2 + correctSize / 2,
-          y: calcDim.top + this.height / 2 + correctSize / 2,
+            x: pathOffsetX,
+            y: pathOffsetY
         };
       },
 
@@ -122,9 +124,7 @@ import { makeBoundingBoxFromPoints } from '../util/misc/boundingBoxFromPoints';
        * @private
        */
       _calcDimensions: function () {
-        const points = this.exactBoundingBox
-          ? this._projectStrokeOnPoints()
-          : this.points.map((p) => new Point(p));
+        const points = this._projectStrokeOnPoints().map(elem => elem.projectedPoint);
         if (points.length === 0) {
           return makeBoundingBoxFromPoints([new Point(0, 0)]);
         }
@@ -142,6 +142,46 @@ import { makeBoundingBoxFromPoints } from '../util/misc/boundingBoxFromPoints';
         });
       },
 
+      /**
+       * Changes dimensioning logic when it has skew
+       * @private
+       */
+      _getTransformedDimensions(...args) {
+        const noSkew = this.skewX === 0 && this.skewY === 0;
+        if (noSkew) {
+          return this.callSuper('_getTransformedDimensions', ...args);
+        }
+
+        let preScalingStrokeValue, postScalingStrokeValue; 
+        const strokeWidth = this.strokeWidth;
+        if (this.strokeUniform) {
+            preScalingStrokeValue = 0;
+            postScalingStrokeValue = strokeWidth;
+        }
+        else {
+            preScalingStrokeValue = strokeWidth;
+            postScalingStrokeValue = 0;
+        }
+        const dimX = this.width + preScalingStrokeValue, 
+          dimY = this.height + preScalingStrokeValue, 
+          finalDimensions = new Point(dimX * this.scaleX, dimY * this.scaleY);
+        return finalDimensions.scalarAdd(postScalingStrokeValue);
+      },
+
+      /**
+       * Recalculates dimensions when changing skew and scale
+       * @private
+       */
+      _set(key, value) {
+        const output = this.callSuper('_set', key, value);
+        if (key === 'scaleX' || key === 'scaleY' ) {
+          this.strokeUniform && this.strokeLineJoin !== 'round' && this._setPositionDimensions();
+        } else if (key === 'skewX' || key === 'skewY') { // TODO: check if you really need to recalculate for all cases
+          this._setPositionDimensions();
+        };
+        return output 
+      },
+
       /* _TO_SVG_START_ */
       /**
        * Returns svg representation of an instance

src/util/misc/hypot.ts

@@ -0,0 +1,16 @@
+/**
+ * Returns the square root of the sum of squares of its arguments\
+ * Chrome implements `Math#hypot` with a calculation that affects percision so we hard code it as a util
+ * @see https://stackoverflow.com/questions/62931950/different-results-of-math-hypot-on-chrome-and-firefox
+ * @static
+ * @memberOf fabric.util
+ * @param {...number} values
+ * @return {number}
+ */
+export const hypot = (...values: number[]): number => {
+    let sumOfSquares = 0;
+    for (let i = 0; i < values.length; i++) {
+        sumOfSquares += values[i] * values[i];
+    }
+    return Math.sqrt(sumOfSquares);
+}

src/util/misc/misc.ts

@@ -2,6 +2,7 @@
 import { fabric } from '../../../HEADER';
 import { cos } from './cos';
 import { sin } from './sin';
+import { hypot } from './hypot'
 import {
   rotateVector,
   createVector,
@@ -103,6 +104,7 @@ import { createClass } from '../lang_class';
 fabric.util = {
   cos,
   sin,
+  hypot,
   rotateVector,
   createVector,
   calcAngleBetweenVectors,