fix(polyline): stroke bounding rect calculation typescript

.eslintrc.js

@@ -30,7 +30,7 @@ module.exports = {
       {
         selector: '[callee.object.name="Math"][callee.property.name="hypot"]',
         message:
-          '`Math.hypot` is not accurate on chrome, import `hypot` from `util` instead.',
+          '`Math.hypot` is not accurate on chrome, use `Math.sqrt` instead.\nSee https://stackoverflow.com/questions/62931950/different-results-of-math-hypot-on-chrome-and-firefox',
       },
       {
         selector: 'VariableDeclarator[init.name="Math"]',

.eslintrc.json

@@ -132,7 +132,7 @@
       "error",
       {
         "selector": "[callee.object.name='Math'][callee.property.name='hypot']",
-        "message": "`Math.hypot` is not accurate on chrome, import `hypot` from `util` instead"
+        "message": "`Math.hypot` is not accurate on chrome, use `Math.sqrt` instead.\nSee https://stackoverflow.com/questions/62931950/different-results-of-math-hypot-on-chrome-and-firefox"
       },
       {
         "selector": "VariableDeclarator[init.name='Math']",

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## [next]
 
+- BREAKING fix(polyline/polygon): stroke bounding box for all line join/cap cases [#8344](https://github.com/fabricjs/fabric.js/pull/8344)
+  BREAKING: `_setPositionDimensions` was removed in favor of `setDimensions`
 - fix(textStyles): Handle style objects with only a textBackgroundColor property in stylesToArray [#8365](https://github.com/fabricjs/fabric.js/pull/8365)
 - chore(): fix typos in intersection file [#8345](https://github.com/fabricjs/fabric.js/pull/8345)
 - fix(textStyles): Handle empty style object in stylesToArray [#8357](https://github.com/fabricjs/fabric.js/pull/8357)

src/point.class.ts

@@ -1,7 +1,7 @@
 import { fabric } from '../HEADER';
 import { TMat2D, TRadian } from './typedefs';
-import { sin } from './util/misc/sin';
 import { cos } from './util/misc/cos';
+import { sin } from './util/misc/sin';
 
 export interface IPoint {
   x: number;

src/shapes/path.class.ts

@@ -1,6 +1,11 @@
 //@ts-nocheck
 
 import { config } from '../config';
+import { parseAttributes } from '../parser/parseAttributes';
+import { Point } from '../point.class';
+import { PathData } from '../typedefs';
+import { makeBoundingBoxFromPoints } from '../util/misc/boundingBoxFromPoints';
+import { getBoundsOfCurve, makePathSimpler, parsePath } from '../util/path';
 
 (function (global) {
   var fabric = global.fabric || (global.fabric = {}),
@@ -49,23 +54,27 @@ import { config } from '../config';
         options = clone(options || {});
         delete options.path;
         this.callSuper('initialize', options);
-        this._setPath(path || [], options);
+        const pathTL = this._setPath(path || []);
+        const origin = this.translateToGivenOrigin(
+          new Point(options.left ?? pathTL.x, options.top ?? pathTL.y),
+          typeof options.left === 'number' ? this.originX : 'left',
+          typeof options.top === 'number' ? this.originY : 'top',
+          this.originX,
+          this.originY
+        );
+        this.setPositionByOrigin(origin, this.originX, this.originY);
       },
 
       /**
        * @private
-       * @param {Array|String} path Path data (sequence of coordinates and corresponding "command" tokens)
-       * @param {Object} [options] Options object
+       * @param {PathData | string} path Path data (sequence of coordinates and corresponding "command" tokens)
+       * @returns {Point} top left position of the bounding box, useful for complementary positioning
        */
-      _setPath: function (path, options) {
-        this.path = fabric.util.makePathSimpler(
-          Array.isArray(path) ? path : fabric.util.parsePath(path)
-        );
-
-        fabric.Polyline.prototype._setPositionDimensions.call(
-          this,
-          options || {}
+      _setPath: function (path: PathData | string) {
+        this.path = makePathSimpler(
+          Array.isArray(path) ? path : parsePath(path)
         );
+        return this.setDimensions();
       },
 
       /**
@@ -261,64 +270,75 @@ import { config } from '../config';
         return this.path.length;
       },
 
+      /**
+       * @returns {Point} top left position of the bounding box, useful for complementary positioning
+       */
+      setDimensions: function () {
+        const { left, top, width, height, pathOffset } = this._calcDimensions();
+        this.set({ width, height, pathOffset });
+        return new Point(left, top);
+      },
+
       /**
        * @private
        */
       _calcDimensions: function () {
-        var aX = [],
-          aY = [],
-          current, // current instruction
-          subpathStartX = 0,
+        const bounds: Point[] = [];
+        let subpathStartX = 0,
           subpathStartY = 0,
           x = 0, // current x
-          y = 0, // current y
-          bounds;
-
-        for (var i = 0, len = this.path.length; i < len; ++i) {
-          current = this.path[i];
+          y = 0; // current y
 
+        for (let i = 0; i < this.path.length; ++i) {
+          const current = this.path[i]; // current instruction
           switch (
             current[0] // first letter
           ) {
             case 'L': // lineto, absolute
               x = current[1];
               y = current[2];
-              bounds = [];
+              bounds.push(
+                new Point(subpathStartX, subpathStartY),
+                new Point(x, y)
+              );
               break;
 
             case 'M': // moveTo, absolute
               x = current[1];
               y = current[2];
               subpathStartX = x;
               subpathStartY = y;
-              bounds = [];
               break;
 
             case 'C': // bezierCurveTo, absolute
-              bounds = fabric.util.getBoundsOfCurve(
-                x,
-                y,
-                current[1],
-                current[2],
-                current[3],
-                current[4],
-                current[5],
-                current[6]
+              bounds.push(
+                ...getBoundsOfCurve(
+                  x,
+                  y,
+                  current[1],
+                  current[2],
+                  current[3],
+                  current[4],
+                  current[5],
+                  current[6]
+                )
               );
               x = current[5];
               y = current[6];
               break;
 
             case 'Q': // quadraticCurveTo, absolute
-              bounds = fabric.util.getBoundsOfCurve(
-                x,
-                y,
-                current[1],
-                current[2],
-                current[1],
-                current[2],
-                current[3],
-                current[4]
+              bounds.push(
+                ...getBoundsOfCurve(
+                  x,
+                  y,
+                  current[1],
+                  current[2],
+                  current[1],
+                  current[2],
+                  current[3],
+                  current[4]
+                )
               );
               x = current[3];
               y = current[4];
@@ -330,26 +350,19 @@ import { config } from '../config';
               y = subpathStartY;
               break;
           }
-          bounds.forEach(function (point) {
-            aX.push(point.x);
-            aY.push(point.y);
-          });
-          aX.push(x);
-          aY.push(y);
         }
 
-        var minX = Math.min(...aX) || 0,
-          minY = Math.min(...aY) || 0,
-          maxX = Math.max(...aX) || 0,
-          maxY = Math.max(...aY) || 0,
-          deltaX = maxX - minX,
-          deltaY = maxY - minY;
+        const bbox = makeBoundingBoxFromPoints(bounds);
+        const strokeCorrection = this.fromSVG ? 0 : this.strokeWidth / 2;
 
         return {
-          left: minX,
-          top: minY,
-          width: deltaX,
-          height: deltaY,
+          ...bbox,
+          left: bbox.left - strokeCorrection,
+          top: bbox.top - strokeCorrection,
+          pathOffset: new Point(
+            bbox.left + bbox.width / 2,
+            bbox.top + bbox.height / 2
+          ),
         };
       },
     }
@@ -387,13 +400,19 @@ import { config } from '../config';
    * @param {Function} [callback] Options callback invoked after parsing is finished
    */
   fabric.Path.fromElement = function (element, callback, options) {
-    var parsedAttributes = fabric.parseAttributes(
+    const parsedAttributes = parseAttributes(
       element,
       fabric.Path.ATTRIBUTE_NAMES
     );
-    parsedAttributes.fromSVG = true;
     callback(
-      new fabric.Path(parsedAttributes.d, extend(parsedAttributes, options))
+      new fabric.Path(parsedAttributes.d, {
+        ...parsedAttributes,
+        ...options,
+        // we pass undefined to instruct the constructor to position the object using the bbox
+        left: undefined,
+        top: undefined,
+        fromSVG: true,
+      })
     );
   };
   /* _FROM_SVG_END_ */

src/shapes/polygon.class.ts

@@ -1,7 +1,10 @@
 //@ts-nocheck
+
+import { projectStrokeOnPoints } from '../util/misc/projectStroke';
+
 (function (global) {
-  var fabric = global.fabric || (global.fabric = {}),
-    projectStrokeOnPoints = fabric.util.projectStrokeOnPoints;
+  var fabric = global.fabric || (global.fabric = {});
+
   /**
    * Polygon class
    * @class fabric.Polygon