@nasser-sw/fabric 7.0.1-beta2 → 7.0.1-beta4

package/dist/index.js

@@ -360,7 +360,7 @@
   }
   const cache = new Cache();
 
-  var version = "7.0.1-beta1";
+  var version = "7.0.1-beta3";
 
   // use this syntax so babel plugin see this import here
   const VERSION = version;
@@ -17577,33 +17577,29 @@
     }
   }
 
-  // @TODO this code is terrible and Line should be a special case of polyline.
-
   const coordProps = ['x1', 'x2', 'y1', 'y2'];
-  /**
-   * A Class to draw a line
-   * A bunch of methods will be added to Polyline to handle the line case
-   * The line class is very strange to work with, is all special, it hardly aligns
-   * to what a developer want everytime there is an angle
-   * @deprecated
-   */
   class Line extends FabricObject {
-    /**
-     * Constructor
-     * @param {Array} [points] Array of points
-     * @param {Object} [options] Options object
-     * @return {Line} thisArg
-     */
     constructor() {
-      let [x1, y1, x2, y2] = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0, 0, 0];
+      let [x1, y1, x2, y2] = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0, 100, 0];
       let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       super();
-      Object.assign(this, Line.ownDefaults);
+      _defineProperty(this, "hitStrokeWidth", 'auto');
+      _defineProperty(this, "_updatingEndpoints", false);
+      _defineProperty(this, "_useEndpointCoords", true);
       this.setOptions(options);
       this.x1 = x1;
       this.x2 = x2;
       this.y1 = y1;
       this.y2 = y2;
+      if (options.hitStrokeWidth !== undefined) {
+        this.hitStrokeWidth = options.hitStrokeWidth;
+      }
+      this.hasBorders = false;
+      this.hasControls = true;
+      this.selectable = true;
+      this.hoverCursor = 'move';
+      this.perPixelTargetFind = false;
+      this.strokeLineCap = 'butt';
       this._setWidthHeight();
       const {
         left,
@@ -17611,96 +17607,323 @@
       } = options;
       typeof left === 'number' && this.set(LEFT, left);
       typeof top === 'number' && this.set(TOP, top);
+      this._setupLineControls();
+    }
+    _setupLineControls() {
+      this.controls = {
+        p1: new Control({
+          x: 0,
+          y: 0,
+          cursorStyle: 'move',
+          actionHandler: this._endpointActionHandler.bind(this),
+          positionHandler: this._p1PositionHandler.bind(this),
+          render: this._renderEndpointControl.bind(this),
+          sizeX: 12,
+          sizeY: 12
+        }),
+        p2: new Control({
+          x: 0,
+          y: 0,
+          cursorStyle: 'move',
+          actionHandler: this._endpointActionHandler.bind(this),
+          positionHandler: this._p2PositionHandler.bind(this),
+          render: this._renderEndpointControl.bind(this),
+          sizeX: 12,
+          sizeY: 12
+        })
+      };
+    }
+    _p1PositionHandler() {
+      var _this$canvas;
+      const vpt = ((_this$canvas = this.canvas) === null || _this$canvas === void 0 ? void 0 : _this$canvas.viewportTransform) || [1, 0, 0, 1, 0, 0];
+      return new Point(this.x1, this.y1).transform(vpt);
+    }
+    _p2PositionHandler() {
+      var _this$canvas2;
+      const vpt = ((_this$canvas2 = this.canvas) === null || _this$canvas2 === void 0 ? void 0 : _this$canvas2.viewportTransform) || [1, 0, 0, 1, 0, 0];
+      return new Point(this.x2, this.y2).transform(vpt);
+    }
+    _renderEndpointControl(ctx, left, top) {
+      const size = 12;
+      ctx.save();
+      ctx.fillStyle = '#007bff';
+      ctx.strokeStyle = '#ffffff';
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.arc(left, top, size / 2, 0, 2 * Math.PI);
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+    }
+    drawBorders(ctx) {
+      let styleOverride = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      if (this._useEndpointCoords) {
+        this._drawLineBorders(ctx, styleOverride);
+        return this;
+      }
+      return super.drawBorders(ctx, styleOverride, {});
+    }
+    _drawLineBorders(ctx) {
+      var _this$canvas3;
+      let styleOverride = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      const vpt = ((_this$canvas3 = this.canvas) === null || _this$canvas3 === void 0 ? void 0 : _this$canvas3.viewportTransform) || [1, 0, 0, 1, 0, 0];
+      ctx.save();
+      ctx.setTransform(vpt[0], vpt[1], vpt[2], vpt[3], vpt[4], vpt[5]);
+      ctx.strokeStyle = styleOverride.borderColor || this.borderColor || 'rgba(100, 200, 200, 0.5)';
+      ctx.lineWidth = (this.strokeWidth || 1) + 5;
+      ctx.lineCap = this.strokeLineCap || 'butt';
+      ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1;
+      ctx.beginPath();
+      ctx.moveTo(this.x1, this.y1);
+      ctx.lineTo(this.x2, this.y2);
+      ctx.stroke();
+      ctx.restore();
+    }
+    _renderControls(ctx) {
+      let styleOverride = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      ctx.save();
+      ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1;
+      this.drawControls(ctx, styleOverride);
+      ctx.restore();
+    }
+    getBoundingRect() {
+      if (this._useEndpointCoords) {
+        const {
+          x1,
+          y1,
+          x2,
+          y2
+        } = this;
+        const effectiveStrokeWidth = this.hitStrokeWidth === 'auto' ? this.strokeWidth : this.hitStrokeWidth;
+        const padding = Math.max(effectiveStrokeWidth / 2 + 5, 10);
+        return {
+          left: Math.min(x1, x2) - padding,
+          top: Math.min(y1, y2) - padding,
+          width: Math.abs(x2 - x1) + padding * 2 || padding * 2,
+          height: Math.abs(y2 - y1) + padding * 2 || padding * 2
+        };
+      }
+      return super.getBoundingRect();
+    }
+    setCoords() {
+      if (this._useEndpointCoords) {
+        const minX = Math.min(this.x1, this.x2);
+        const maxX = Math.max(this.x1, this.x2);
+        const minY = Math.min(this.y1, this.y2);
+        const maxY = Math.max(this.y1, this.y2);
+        const effectiveStrokeWidth = this.hitStrokeWidth === 'auto' ? this.strokeWidth : this.hitStrokeWidth;
+        const hitPadding = Math.max(effectiveStrokeWidth / 2 + 5, 10);
+        this.left = minX - hitPadding + (maxX - minX + hitPadding * 2) / 2;
+        this.top = minY - hitPadding + (maxY - minY + hitPadding * 2) / 2;
+        this.width = Math.abs(this.x2 - this.x1) + hitPadding * 2;
+        this.height = Math.abs(this.y2 - this.y1) + hitPadding * 2;
+      }
+      super.setCoords();
+    }
+    getCoords() {
+      if (this._useEndpointCoords) {
+        const deltaX = this.x2 - this.x1;
+        const deltaY = this.y2 - this.y1;
+        const length = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+        if (length === 0) {
+          return super.getCoords();
+        }
+        const effectiveStrokeWidth = this.hitStrokeWidth === 'auto' ? this.strokeWidth : this.hitStrokeWidth;
+        const halfWidth = Math.max(effectiveStrokeWidth / 2 + 2, 5);
+
+        // Unit vector perpendicular to line
+        const perpX = -deltaY / length;
+        const perpY = deltaX / length;
+
+        // Four corners of oriented rectangle
+        return [new Point(this.x1 + perpX * halfWidth, this.y1 + perpY * halfWidth), new Point(this.x2 + perpX * halfWidth, this.y2 + perpY * halfWidth), new Point(this.x2 - perpX * halfWidth, this.y2 - perpY * halfWidth), new Point(this.x1 - perpX * halfWidth, this.y1 - perpY * halfWidth)];
+      }
+      return super.getCoords();
     }
+    containsPoint(point) {
+      if (this._useEndpointCoords) {
+        var _this$canvas4;
+        if (((_this$canvas4 = this.canvas) === null || _this$canvas4 === void 0 ? void 0 : _this$canvas4.getActiveObject()) === this) {
+          return super.containsPoint(point);
+        }
+        const distance = this._distanceToLineSegment(point.x, point.y);
+        const effectiveStrokeWidth = this.hitStrokeWidth === 'auto' ? this.strokeWidth : this.hitStrokeWidth || 1;
+        const tolerance = Math.max(effectiveStrokeWidth / 2 + 2, 5);
+        return distance <= tolerance;
+      }
+      return super.containsPoint(point);
+    }
+    _distanceToLineSegment(px, py) {
+      const x1 = this.x1,
+        y1 = this.y1,
+        x2 = this.x2,
+        y2 = this.y2;
+      const pd2 = (x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2);
+      if (pd2 === 0) {
+        return Math.sqrt((px - x1) * (px - x1) + (py - y1) * (py - y1));
+      }
+      const u = ((px - x1) * (x2 - x1) + (py - y1) * (y2 - y1)) / pd2;
+      let closestX, closestY;
+      if (u < 0) {
+        closestX = x1;
+        closestY = y1;
+      } else if (u > 1) {
+        closestX = x2;
+        closestY = y2;
+      } else {
+        closestX = x1 + u * (x2 - x1);
+        closestY = y1 + u * (y2 - y1);
+      }
+      return Math.sqrt((px - closestX) * (px - closestX) + (py - closestY) * (py - closestY));
+    }
+    _endpointActionHandler(eventData, transformData, x, y) {
+      var _this$canvas6;
+      const controlKey = transformData.corner;
+      const pointer = new Point(x, y);
+      let newX = pointer.x;
+      let newY = pointer.y;
+      if (eventData.shiftKey) {
+        const otherControl = controlKey === 'p1' ? 'p2' : 'p1';
+        const otherX = this[otherControl === 'p1' ? 'x1' : 'x2'];
+        const otherY = this[otherControl === 'p1' ? 'y1' : 'y2'];
+        const snapped = this._snapToAngle(otherX, otherY, newX, newY);
+        newX = snapped.x;
+        newY = snapped.y;
+      }
+      if (this._useEndpointCoords) {
+        var _this$canvas5;
+        if (controlKey === 'p1') {
+          this.x1 = newX;
+          this.y1 = newY;
+        } else if (controlKey === 'p2') {
+          this.x2 = newX;
+          this.y2 = newY;
+        }
+        this.dirty = true;
+        this.setCoords();
+        (_this$canvas5 = this.canvas) === null || _this$canvas5 === void 0 || _this$canvas5.requestRenderAll();
+        return true;
+      }
 
-    /**
-     * @private
-     * @param {Object} [options] Options
-     */
+      // Fallback for old system
+      this._updatingEndpoints = true;
+      if (controlKey === 'p1') {
+        this.x1 = newX;
+        this.y1 = newY;
+      } else if (controlKey === 'p2') {
+        this.x2 = newX;
+        this.y2 = newY;
+      }
+      this._setWidthHeight();
+      this.dirty = true;
+      this._updatingEndpoints = false;
+      (_this$canvas6 = this.canvas) === null || _this$canvas6 === void 0 || _this$canvas6.requestRenderAll();
+      this.fire('modified', {
+        transform: transformData,
+        target: this,
+        e: eventData
+      });
+      return true;
+    }
+    _snapToAngle(fromX, fromY, toX, toY) {
+      const deltaX = toX - fromX;
+      const deltaY = toY - fromY;
+      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+      if (distance === 0) return {
+        x: toX,
+        y: toY
+      };
+      let angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
+      const snapIncrement = 15;
+      const snappedAngle = Math.round(angle / snapIncrement) * snapIncrement;
+      const snappedRadians = snappedAngle * (Math.PI / 180);
+      return {
+        x: fromX + Math.cos(snappedRadians) * distance,
+        y: fromY + Math.sin(snappedRadians) * distance
+      };
+    }
     _setWidthHeight() {
-      const {
-        x1,
-        y1,
-        x2,
-        y2
-      } = this;
-      this.width = Math.abs(x2 - x1);
-      this.height = Math.abs(y2 - y1);
-      const {
-        left,
-        top,
-        width,
-        height
-      } = makeBoundingBoxFromPoints([{
-        x: x1,
-        y: y1
-      }, {
-        x: x2,
-        y: y2
-      }]);
-      const position = new Point(left + width / 2, top + height / 2);
-      this.setPositionByOrigin(position, CENTER, CENTER);
+      let skipReposition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      this.width = Math.abs(this.x2 - this.x1) || 1;
+      this.height = Math.abs(this.y2 - this.y1) || 1;
+      if (!skipReposition && !this._updatingEndpoints) {
+        const {
+          left,
+          top,
+          width,
+          height
+        } = makeBoundingBoxFromPoints([{
+          x: this.x1,
+          y: this.y1
+        }, {
+          x: this.x2,
+          y: this.y2
+        }]);
+        this.setPositionByOrigin(new Point(left + width / 2, top + height / 2), CENTER, CENTER);
+      }
     }
-
-    /**
-     * @private
-     * @param {String} key
-     * @param {*} value
-     */
     _set(key, value) {
+      const oldLeft = this.left;
+      const oldTop = this.top;
       super._set(key, value);
       if (coordProps.includes(key)) {
-        // this doesn't make sense very much, since setting x1 when top or left
-        // are already set, is just going to show a strange result since the
-        // line will move way more than the developer expect.
-        // in fabric5 it worked only when the line didn't have extra transformations,
-        // in fabric6 too. With extra transform they behave bad in different ways.
-        // This needs probably a good rework or a tutorial if you have to create a dynamic line
         this._setWidthHeight();
+        this.dirty = true;
+      }
+      if ((key === 'left' || key === 'top') && this.canvas && !this._updatingEndpoints) {
+        const deltaX = this.left - oldLeft;
+        const deltaY = this.top - oldTop;
+        if (deltaX !== 0 || deltaY !== 0) {
+          this._updatingEndpoints = true;
+          this.x1 += deltaX;
+          this.y1 += deltaY;
+          this.x2 += deltaX;
+          this.y2 += deltaY;
+          this._updatingEndpoints = false;
+        }
       }
       return this;
     }
-
-    /**
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
-     */
+    render(ctx) {
+      if (this._useEndpointCoords) {
+        this._renderDirectly(ctx);
+        return;
+      }
+      super.render(ctx);
+    }
+    _renderDirectly(ctx) {
+      var _this$canvas7, _this$stroke;
+      if (!this.visible) return;
+      ctx.save();
+      const vpt = ((_this$canvas7 = this.canvas) === null || _this$canvas7 === void 0 ? void 0 : _this$canvas7.viewportTransform) || [1, 0, 0, 1, 0, 0];
+      ctx.transform(vpt[0], vpt[1], vpt[2], vpt[3], vpt[4], vpt[5]);
+      ctx.globalAlpha = this.opacity;
+      ctx.strokeStyle = ((_this$stroke = this.stroke) === null || _this$stroke === void 0 ? void 0 : _this$stroke.toString()) || '#000';
+      ctx.lineWidth = this.strokeWidth;
+      ctx.lineCap = this.strokeLineCap || 'butt';
+      ctx.beginPath();
+      ctx.moveTo(this.x1, this.y1);
+      ctx.lineTo(this.x2, this.y2);
+      ctx.stroke();
+      ctx.restore();
+    }
     _render(ctx) {
+      if (this._useEndpointCoords) return;
       ctx.beginPath();
       const p = this.calcLinePoints();
       ctx.moveTo(p.x1, p.y1);
       ctx.lineTo(p.x2, p.y2);
       ctx.lineWidth = this.strokeWidth;
-
-      // TODO: test this
-      // make sure setting "fill" changes color of a line
-      // (by copying fillStyle to strokeStyle, since line is stroked, not filled)
       const origStrokeStyle = ctx.strokeStyle;
       if (isFiller(this.stroke)) {
         ctx.strokeStyle = this.stroke.toLive(ctx);
-      } else {
-        var _this$stroke;
-        ctx.strokeStyle = (_this$stroke = this.stroke) !== null && _this$stroke !== void 0 ? _this$stroke : ctx.fillStyle;
       }
       this.stroke && this._renderStroke(ctx);
       ctx.strokeStyle = origStrokeStyle;
     }
-
-    /**
-     * This function is an helper for svg import. it returns the center of the object in the svg
-     * untransformed coordinates
-     * @private
-     * @return {Point} center point from element coordinates
-     */
     _findCenterFromElement() {
       return new Point((this.x1 + this.x2) / 2, (this.y1 + this.y2) / 2);
     }
-
-    /**
-     * Returns object representation of an instance
-     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
-     * @return {Object} object representation of an instance
-     */
     toObject() {
       let propertiesToInclude = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       return {
@@ -17708,32 +17931,25 @@
         ...this.calcLinePoints()
       };
     }
-
-    /*
-     * Calculate object dimensions from its properties
-     * @private
-     */
     _getNonTransformedDimensions() {
       const dim = super._getNonTransformedDimensions();
-      if (this.strokeLineCap === 'butt') {
-        if (this.width === 0) {
-          dim.y -= this.strokeWidth;
-        }
-        if (this.height === 0) {
-          dim.x -= this.strokeWidth;
-        }
+      if (this.strokeLineCap === 'round') {
+        dim.x += this.strokeWidth;
+        dim.y += this.strokeWidth;
       }
       return dim;
     }
-
-    /**
-     * Recalculates line points given width and height
-     * Those points are simply placed around the center,
-     * This is not useful outside internal render functions and svg output
-     * Is not meant to be for the developer.
-     * @private
-     */
     calcLinePoints() {
+      if (this._updatingEndpoints) {
+        const centerX = (this.x1 + this.x2) / 2;
+        const centerY = (this.y1 + this.y2) / 2;
+        return {
+          x1: this.x1 - centerX,
+          y1: this.y1 - centerY,
+          x2: this.x2 - centerX,
+          y2: this.y2 - centerY
+        };
+      }
       const {
         x1: _x1,
         x2: _x2,
@@ -17742,27 +17958,15 @@
         width,
         height
       } = this;
-      const xMult = _x1 <= _x2 ? -1 : 1,
-        yMult = _y1 <= _y2 ? -1 : 1,
-        x1 = xMult * width / 2,
-        y1 = yMult * height / 2,
-        x2 = xMult * -width / 2,
-        y2 = yMult * -height / 2;
+      const xMult = _x1 <= _x2 ? -1 : 1;
+      const yMult = _y1 <= _y2 ? -1 : 1;
       return {
-        x1,
-        x2,
-        y1,
-        y2
+        x1: xMult * width / 2,
+        y1: yMult * height / 2,
+        x2: xMult * -width / 2,
+        y2: yMult * -height / 2
       };
     }
-
-    /* _FROM_SVG_START_ */
-
-    /**
-     * Returns svg representation of an instance
-     * @return {Array} an array of strings with the specific svg representation
-     * of the instance
-     */
     _toSVG() {
       const {
         x1,
@@ -17772,18 +17976,6 @@
       } = this.calcLinePoints();
       return ['<line ', 'COMMON_PARTS', `x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" />\n`];
     }
-
-    /**
-     * List of attribute names to account for when parsing SVG element (used by {@link Line.fromElement})
-     * @see http://www.w3.org/TR/SVG/shapes.html#LineElement
-     */
-
-    /**
-     * Returns Line instance from an SVG element
-     * @param {HTMLElement} element Element to parse
-     * @param {Object} [options] Options object
-     * @param {Function} [callback] callback function invoked after parsing
-     */
     static async fromElement(element, options, cssRules) {
       const {
         x1 = 0,
@@ -17794,14 +17986,6 @@
       } = parseAttributes(element, this.ATTRIBUTE_NAMES, cssRules);
       return new this([x1, y1, x2, y2], parsedAttributes);
     }
-
-    /* _FROM_SVG_END_ */
-
-    /**
-     * Returns Line instance from an object representation
-     * @param {Object} object Object to create an instance from
-     * @returns {Promise<Line>}
-     */
     static fromObject(_ref) {
       let {
         x1,
@@ -17818,32 +18002,195 @@
       });
     }
   }
+  _defineProperty(Line, "type", 'Line');
+  _defineProperty(Line, "cacheProperties", [...cacheProperties, ...coordProps]);
+  _defineProperty(Line, "ATTRIBUTE_NAMES", SHARED_ATTRIBUTES.concat(coordProps));
+  classRegistry.setClass(Line);
+  classRegistry.setSVGClass(Line);
+
   /**
-   * x value or first line edge
-   * @type number
+   * Calculate the distance between two points
    */
+  function pointDistance(p1, p2) {
+    return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+  }
+
   /**
-   * y value or first line edge
-   * @type number
+   * Normalize a vector
    */
+  function normalizeVector(vector) {
+    const length = Math.sqrt(vector.x * vector.x + vector.y * vector.y);
+    if (length === 0) return {
+      x: 0,
+      y: 0
+    };
+    return {
+      x: vector.x / length,
+      y: vector.y / length
+    };
+  }
+
   /**
-   * x value or second line edge
-   * @type number
+   * Get the maximum allowed radius for a corner based on adjacent edge lengths
    */
+  function getMaxRadius(prevPoint, currentPoint, nextPoint) {
+    const dist1 = pointDistance(prevPoint, currentPoint);
+    const dist2 = pointDistance(currentPoint, nextPoint);
+    return Math.min(dist1, dist2) / 2;
+  }
+
   /**
-   * y value or second line edge
-   * @type number
+   * Calculate rounded corner data for a single corner
    */
-  _defineProperty(Line, "type", 'Line');
-  _defineProperty(Line, "cacheProperties", [...cacheProperties, ...coordProps]);
-  _defineProperty(Line, "ATTRIBUTE_NAMES", SHARED_ATTRIBUTES.concat(coordProps));
-  classRegistry.setClass(Line);
-  classRegistry.setSVGClass(Line);
+  function calculateRoundedCorner(prevPoint, currentPoint, nextPoint, radius) {
+    // Calculate edge vectors
+    const edge1 = {
+      x: currentPoint.x - prevPoint.x,
+      y: currentPoint.y - prevPoint.y
+    };
+    const edge2 = {
+      x: nextPoint.x - currentPoint.x,
+      y: nextPoint.y - currentPoint.y
+    };
+
+    // Normalize edge vectors
+    const norm1 = normalizeVector(edge1);
+    const norm2 = normalizeVector(edge2);
+
+    // Calculate the maximum allowed radius
+    const maxRadius = getMaxRadius(prevPoint, currentPoint, nextPoint);
+    const actualRadius = Math.min(radius, maxRadius);
+
+    // Calculate start and end points of the rounded corner
+    const startPoint = {
+      x: currentPoint.x - norm1.x * actualRadius,
+      y: currentPoint.y - norm1.y * actualRadius
+    };
+    const endPoint = {
+      x: currentPoint.x + norm2.x * actualRadius,
+      y: currentPoint.y + norm2.y * actualRadius
+    };
+
+    // Calculate control points for bezier curve
+    // Using the magic number kRect for optimal circular approximation
+    const controlOffset = actualRadius * kRect;
+    const cp1 = {
+      x: startPoint.x + norm1.x * controlOffset,
+      y: startPoint.y + norm1.y * controlOffset
+    };
+    const cp2 = {
+      x: endPoint.x - norm2.x * controlOffset,
+      y: endPoint.y - norm2.y * controlOffset
+    };
+    return {
+      corner: currentPoint,
+      start: startPoint,
+      end: endPoint,
+      cp1,
+      cp2,
+      actualRadius
+    };
+  }
+
+  /**
+   * Apply corner radius to a polygon defined by points
+   */
+  function applyCornerRadiusToPolygon(points, radius) {
+    let radiusAsPercentage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    if (points.length < 3) {
+      throw new Error('Polygon must have at least 3 points');
+    }
+
+    // Calculate bounding box if radius is percentage-based
+    let actualRadius = radius;
+    if (radiusAsPercentage) {
+      const minX = Math.min(...points.map(p => p.x));
+      const maxX = Math.max(...points.map(p => p.x));
+      const minY = Math.min(...points.map(p => p.y));
+      const maxY = Math.max(...points.map(p => p.y));
+      const width = maxX - minX;
+      const height = maxY - minY;
+      const minDimension = Math.min(width, height);
+      actualRadius = radius / 100 * minDimension;
+    }
+    const roundedCorners = [];
+    for (let i = 0; i < points.length; i++) {
+      const prevIndex = (i - 1 + points.length) % points.length;
+      const nextIndex = (i + 1) % points.length;
+      const prevPoint = points[prevIndex];
+      const currentPoint = points[i];
+      const nextPoint = points[nextIndex];
+      const roundedCorner = calculateRoundedCorner(prevPoint, currentPoint, nextPoint, actualRadius);
+      roundedCorners.push(roundedCorner);
+    }
+    return roundedCorners;
+  }
+
+  /**
+   * Render a rounded polygon to a canvas context
+   */
+  function renderRoundedPolygon(ctx, roundedCorners) {
+    let closed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    if (roundedCorners.length === 0) return;
+    ctx.beginPath();
+
+    // Start at the first corner's start point
+    const firstCorner = roundedCorners[0];
+    ctx.moveTo(firstCorner.start.x, firstCorner.start.y);
+    for (let i = 0; i < roundedCorners.length; i++) {
+      const corner = roundedCorners[i];
+      const nextIndex = (i + 1) % roundedCorners.length;
+      const nextCorner = roundedCorners[nextIndex];
+
+      // Draw the rounded corner using bezier curve
+      ctx.bezierCurveTo(corner.cp1.x, corner.cp1.y, corner.cp2.x, corner.cp2.y, corner.end.x, corner.end.y);
+
+      // Draw line to next corner's start point (if not the last segment in open path)
+      if (i < roundedCorners.length - 1 || closed) {
+        ctx.lineTo(nextCorner.start.x, nextCorner.start.y);
+      }
+    }
+    if (closed) {
+      ctx.closePath();
+    }
+  }
+
+  /**
+   * Generate SVG path data for a rounded polygon
+   */
+  function generateRoundedPolygonPath(roundedCorners) {
+    let closed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    if (roundedCorners.length === 0) return '';
+    const pathData = [];
+    const firstCorner = roundedCorners[0];
+
+    // Move to first corner's start point
+    pathData.push(`M ${firstCorner.start.x} ${firstCorner.start.y}`);
+    for (let i = 0; i < roundedCorners.length; i++) {
+      const corner = roundedCorners[i];
+      const nextIndex = (i + 1) % roundedCorners.length;
+      const nextCorner = roundedCorners[nextIndex];
+
+      // Add bezier curve for the rounded corner
+      pathData.push(`C ${corner.cp1.x} ${corner.cp1.y} ${corner.cp2.x} ${corner.cp2.y} ${corner.end.x} ${corner.end.y}`);
+
+      // Add line to next corner's start point (if not the last segment in open path)
+      if (i < roundedCorners.length - 1 || closed) {
+        pathData.push(`L ${nextCorner.start.x} ${nextCorner.start.y}`);
+      }
+    }
+    if (closed) {
+      pathData.push('Z');
+    }
+    return pathData.join(' ');
+  }
 
   const triangleDefaultValues = {
     width: 100,
-    height: 100
+    height: 100,
+    cornerRadius: 0
   };
+  const TRIANGLE_PROPS = ['cornerRadius'];
   class Triangle extends FabricObject {
     static getDefaults() {
       return {
@@ -17862,34 +18209,90 @@
       this.setOptions(options);
     }
 
+    /**
+     * Get triangle points as an array of XY coordinates
+     * @private
+     */
+    _getTrianglePoints() {
+      const widthBy2 = this.width / 2;
+      const heightBy2 = this.height / 2;
+      return [{
+        x: -widthBy2,
+        y: heightBy2
+      },
+      // bottom left
+      {
+        x: 0,
+        y: -heightBy2
+      },
+      // top center
+      {
+        x: widthBy2,
+        y: heightBy2
+      } // bottom right
+      ];
+    }
+
     /**
      * @private
      * @param {CanvasRenderingContext2D} ctx Context to render on
      */
     _render(ctx) {
-      const widthBy2 = this.width / 2,
-        heightBy2 = this.height / 2;
-      ctx.beginPath();
-      ctx.moveTo(-widthBy2, heightBy2);
-      ctx.lineTo(0, -heightBy2);
-      ctx.lineTo(widthBy2, heightBy2);
-      ctx.closePath();
+      if (this.cornerRadius > 0) {
+        // Render rounded triangle
+        const points = this._getTrianglePoints();
+        const roundedCorners = applyCornerRadiusToPolygon(points, this.cornerRadius);
+        renderRoundedPolygon(ctx, roundedCorners, true);
+      } else {
+        // Render sharp triangle (original implementation)
+        const widthBy2 = this.width / 2;
+        const heightBy2 = this.height / 2;
+        ctx.beginPath();
+        ctx.moveTo(-widthBy2, heightBy2);
+        ctx.lineTo(0, -heightBy2);
+        ctx.lineTo(widthBy2, heightBy2);
+        ctx.closePath();
+      }
       this._renderPaintInOrder(ctx);
     }
 
+    /**
+     * Returns object representation of an instance
+     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
+     * @return {Object} object representation of an instance
+     */
+    toObject() {
+      let propertiesToInclude = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      return super.toObject([...TRIANGLE_PROPS, ...propertiesToInclude]);
+    }
+
     /**
      * Returns svg representation of an instance
      * @return {Array} an array of strings with the specific svg representation
      * of the instance
      */
     _toSVG() {
-      const widthBy2 = this.width / 2,
-        heightBy2 = this.height / 2,
-        points = `${-widthBy2} ${heightBy2},0 ${-heightBy2},${widthBy2} ${heightBy2}`;
-      return ['<polygon ', 'COMMON_PARTS', 'points="', points, '" />'];
+      if (this.cornerRadius > 0) {
+        // Generate rounded triangle as path
+        const points = this._getTrianglePoints();
+        const roundedCorners = applyCornerRadiusToPolygon(points, this.cornerRadius);
+        const pathData = generateRoundedPolygonPath(roundedCorners, true);
+        return ['<path ', 'COMMON_PARTS', `d="${pathData}" />`];
+      } else {
+        // Original sharp triangle implementation
+        const widthBy2 = this.width / 2;
+        const heightBy2 = this.height / 2;
+        const points = `${-widthBy2} ${heightBy2},0 ${-heightBy2},${widthBy2} ${heightBy2}`;
+        return ['<polygon ', 'COMMON_PARTS', 'points="', points, '" />'];
+      }
     }
   }
+  /**
+   * Corner radius for rounded triangle corners
+   * @type Number
+   */
   _defineProperty(Triangle, "type", 'Triangle');
+  _defineProperty(Triangle, "cacheProperties", [...cacheProperties, ...TRIANGLE_PROPS]);
   _defineProperty(Triangle, "ownDefaults", triangleDefaultValues);
   classRegistry.setClass(Triangle);
   classRegistry.setSVGClass(Triangle);
@@ -18054,7 +18457,8 @@
     /**
      * @deprecated transient option soon to be removed in favor of a different design
      */
-    exactBoundingBox: false
+    exactBoundingBox: false,
+    cornerRadius: 0
   };
   class Polyline extends FabricObject {
     static getDefaults() {
@@ -18268,7 +18672,7 @@
     toObject() {
       let propertiesToInclude = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       return {
-        ...super.toObject(propertiesToInclude),
+        ...super.toObject(['cornerRadius', ...propertiesToInclude]),
         points: this.points.map(_ref => {
           let {
             x,
@@ -18288,14 +18692,28 @@
      * of the instance
      */
     _toSVG() {
-      const points = [],
-        diffX = this.pathOffset.x,
-        diffY = this.pathOffset.y,
-        NUM_FRACTION_DIGITS = config.NUM_FRACTION_DIGITS;
-      for (let i = 0, len = this.points.length; i < len; i++) {
-        points.push(toFixed(this.points[i].x - diffX, NUM_FRACTION_DIGITS), ',', toFixed(this.points[i].y - diffY, NUM_FRACTION_DIGITS), ' ');
+      if (this.cornerRadius > 0 && this.points.length >= 3) {
+        // Generate rounded polygon/polyline as path
+        const diffX = this.pathOffset.x;
+        const diffY = this.pathOffset.y;
+        const adjustedPoints = this.points.map(point => ({
+          x: point.x - diffX,
+          y: point.y - diffY
+        }));
+        const roundedCorners = applyCornerRadiusToPolygon(adjustedPoints, this.cornerRadius);
+        const pathData = generateRoundedPolygonPath(roundedCorners, !this.isOpen());
+        return ['<path ', 'COMMON_PARTS', `d="${pathData}" />\n`];
+      } else {
+        // Original sharp corners implementation
+        const points = [];
+        const diffX = this.pathOffset.x;
+        const diffY = this.pathOffset.y;
+        const NUM_FRACTION_DIGITS = config.NUM_FRACTION_DIGITS;
+        for (let i = 0, len = this.points.length; i < len; i++) {
+          points.push(toFixed(this.points[i].x - diffX, NUM_FRACTION_DIGITS), ',', toFixed(this.points[i].y - diffY, NUM_FRACTION_DIGITS), ' ');
+        }
+        return [`<${this.constructor.type.toLowerCase()} `, 'COMMON_PARTS', `points="${points.join('')}" />\n`];
       }
-      return [`<${this.constructor.type.toLowerCase()} `, 'COMMON_PARTS', `points="${points.join('')}" />\n`];
     }
 
     /**
@@ -18311,13 +18729,24 @@
         // NaN comes from parseFloat of a empty string in parser
         return;
       }
-      ctx.beginPath();
-      ctx.moveTo(this.points[0].x - x, this.points[0].y - y);
-      for (let i = 0; i < len; i++) {
-        const point = this.points[i];
-        ctx.lineTo(point.x - x, point.y - y);
+      if (this.cornerRadius > 0 && len >= 3) {
+        // Render with rounded corners
+        const adjustedPoints = this.points.map(point => ({
+          x: point.x - x,
+          y: point.y - y
+        }));
+        const roundedCorners = applyCornerRadiusToPolygon(adjustedPoints, this.cornerRadius);
+        renderRoundedPolygon(ctx, roundedCorners, !this.isOpen());
+      } else {
+        // Original sharp corners implementation
+        ctx.beginPath();
+        ctx.moveTo(this.points[0].x - x, this.points[0].y - y);
+        for (let i = 0; i < len; i++) {
+          const point = this.points[i];
+          ctx.lineTo(point.x - x, point.y - y);
+        }
+        !this.isOpen() && ctx.closePath();
       }
-      !this.isOpen() && ctx.closePath();
       this._renderPaintInOrder(ctx);
     }
 
@@ -18382,10 +18811,15 @@
    * @type Boolean
    * @default false
    */
+  /**
+   * Corner radius for rounded corners
+   * @type Number
+   * @default 0
+   */
   _defineProperty(Polyline, "ownDefaults", polylineDefaultValues);
   _defineProperty(Polyline, "type", 'Polyline');
   _defineProperty(Polyline, "layoutProperties", [SKEW_X, SKEW_Y, 'strokeLineCap', 'strokeLineJoin', 'strokeMiterLimit', 'strokeWidth', 'strokeUniform', 'points']);
-  _defineProperty(Polyline, "cacheProperties", [...cacheProperties, 'points']);
+  _defineProperty(Polyline, "cacheProperties", [...cacheProperties, 'points', 'cornerRadius']);
   _defineProperty(Polyline, "ATTRIBUTE_NAMES", [...SHARED_ATTRIBUTES]);
   classRegistry.setClass(Polyline);
   classRegistry.setSVGClass(Polyline);
@@ -18679,8 +19113,8 @@
   // Global measurement context - reused for performance
   let measurementContext = null;
 
-  /**
-   * Get or create the shared measurement context
+  /**
+   * Get or create the shared measurement context
    */
   function getMeasurementContext() {
     if (!measurementContext) {
@@ -18693,8 +19127,8 @@
     return measurementContext;
   }
 
-  /**
-   * Measure a single grapheme
+  /**
+   * Measure a single grapheme
    */
   function measureGrapheme(grapheme, options, ctx) {
     // Check cache first
@@ -18727,8 +19161,8 @@
     return measurement;
   }
 
-  /**
-   * Measure a grapheme with kerning relative to previous character
+  /**
+   * Measure a grapheme with kerning relative to previous character
    */
   function measureGraphemeWithKerning(grapheme, previousGrapheme, options, ctx) {
     // Get individual measurement
@@ -18769,8 +19203,8 @@
     };
   }
 
-  /**
-   * Get font metrics for layout calculations
+  /**
+   * Get font metrics for layout calculations
    */
   function getFontMetrics(options) {
     var _metrics$fontBounding, _metrics$fontBounding2, _metrics$actualBoundi, _metrics$actualBoundi2;
@@ -18805,8 +19239,8 @@
     return result;
   }
 
-  /**
-   * Apply font styling to canvas context
+  /**
+   * Apply font styling to canvas context
    */
   function applyFontStyle(ctx, options) {
     const fontDeclaration = getFontDeclaration(options);
@@ -18823,8 +19257,8 @@
     ctx.textBaseline = 'alphabetic';
   }
 
-  /**
-   * Generate font declaration string
+  /**
+   * Generate font declaration string
    */
   function getFontDeclaration(options) {
     const {
@@ -18839,8 +19273,8 @@
     return `${fontStyle} ${fontWeight} ${fontSize}px ${normalizedFamily}`;
   }
 
-  /**
-   * LRU Cache implementation for measurements
+  /**
+   * LRU Cache implementation for measurements
    */
   class LRUCache {
     constructor() {
@@ -18902,8 +19336,8 @@
     }
   }
 
-  /**
-   * Advanced measurement cache with font-aware keys
+  /**
+   * Advanced measurement cache with font-aware keys
    */
   class MeasurementCache {
     constructor() {
@@ -18930,8 +19364,8 @@
     }
   }
 
-  /**
-   * Kerning cache for character pairs
+  /**
+   * Kerning cache for character pairs
    */
   class KerningCache {
     constructor() {
@@ -18959,8 +19393,8 @@
     }
   }
 
-  /**
-   * Font metrics cache
+  /**
+   * Font metrics cache
    */
   class FontMetricsCache {
     constructor() {
@@ -18987,17 +19421,17 @@
   const kerningCache = new KerningCache();
   const fontMetricsCache = new FontMetricsCache();
 
-  /**
-   * Unicode and Internationalization Support
-   * 
-   * Enhanced Unicode handling for complex scripts, RTL/LTR text,
-   * and grapheme cluster boundary detection.
+  /**
+   * Unicode and Internationalization Support
+   * 
+   * Enhanced Unicode handling for complex scripts, RTL/LTR text,
+   * and grapheme cluster boundary detection.
    */
 
 
-  /**
-   * Enhanced grapheme segmentation using Intl.Segmenter when available
-   * with fallback to existing graphemeSplit implementation
+  /**
+   * Enhanced grapheme segmentation using Intl.Segmenter when available
+   * with fallback to existing graphemeSplit implementation
    */
   function segmentGraphemes(text) {
     // Use native Intl.Segmenter if available
@@ -19017,15 +19451,15 @@
     return graphemeSplit(text);
   }
 
-  /**
-   * Ellipsis Text Truncation System
-   * 
-   * Implements text truncation with ellipsis when content exceeds bounds,
-   * using binary search for optimal truncation points.
+  /**
+   * Ellipsis Text Truncation System
+   * 
+   * Implements text truncation with ellipsis when content exceeds bounds,
+   * using binary search for optimal truncation points.
    */
 
-  /**
-   * Apply ellipsis truncation to text based on width/height constraints
+  /**
+   * Apply ellipsis truncation to text based on width/height constraints
    */
   function applyEllipsis(text, options) {
     const {
@@ -19095,8 +19529,8 @@
     };
   }
 
-  /**
-   * Truncate text based on width constraint using binary search
+  /**
+   * Truncate text based on width constraint using binary search
    */
   function truncateByWidth(text, maxWidth, ellipsisChar, ellipsisWidth, measureFn) {
     const graphemes = segmentGraphemes(text);
@@ -19146,8 +19580,8 @@
     };
   }
 
-  /**
-   * Truncate text based on height constraint
+  /**
+   * Truncate text based on height constraint
    */
   function truncateByHeight(text, maxHeight, ellipsisChar, measureFn) {
     var _measureFn;
@@ -19195,19 +19629,19 @@
     return truncateByWidth(lines[0], firstLineWidth, ellipsisChar, 0, measureFn);
   }
 
-  /**
-   * Core Text Layout Engine
-   * 
-   * Implements Konva-compatible text layout with support for:
-   * - Multiple wrap modes (word/char/none)
-   * - Ellipsis truncation
-   * - Justify alignment with proper space distribution
-   * - RTL/LTR text direction
-   * - Advanced grapheme handling
+  /**
+   * Core Text Layout Engine
+   * 
+   * Implements Konva-compatible text layout with support for:
+   * - Multiple wrap modes (word/char/none)
+   * - Ellipsis truncation
+   * - Justify alignment with proper space distribution
+   * - RTL/LTR text direction
+   * - Advanced grapheme handling
    */
 
-  /**
-   * Main text layout function - converts text and options into positioned layout
+  /**
+   * Main text layout function - converts text and options into positioned layout
    */
   function layoutText(options) {
     var _ellipsisResult;
@@ -19326,8 +19760,8 @@
     };
   }
 
-  /**
-   * Layout a single paragraph with wrapping
+  /**
+   * Layout a single paragraph with wrapping
    */
   function layoutParagraph(text, options) {
     const {
@@ -19362,8 +19796,8 @@
     return layoutLines;
   }
 
-  /**
-   * Layout a single line of text (no wrapping)
+  /**
+   * Layout a single line of text (no wrapping)
    */
   function layoutSingleLine(text, options) {
     let textOffset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
@@ -19433,8 +19867,8 @@
     };
   }
 
-  /**
-   * Word-based wrapping algorithm
+  /**
+   * Word-based wrapping algorithm
    */
   function wrapByWords(text, maxWidth, options) {
     const lines = [];
@@ -19467,8 +19901,8 @@
     return lines.length > 0 ? lines : [''];
   }
 
-  /**
-   * Character-based wrapping algorithm  
+  /**
+   * Character-based wrapping algorithm  
    */
   function wrapByCharacters(text, maxWidth, options) {
     const lines = [];
@@ -19490,8 +19924,8 @@
     return lines.length > 0 ? lines : [''];
   }
 
-  /**
-   * Apply text alignment to lines
+  /**
+   * Apply text alignment to lines
    */
   function applyAlignment(lines, align, containerWidth, options) {
     return lines.map(line => {
@@ -19525,8 +19959,8 @@
     });
   }
 
-  /**
-   * Apply justify alignment by expanding spaces
+  /**
+   * Apply justify alignment by expanding spaces
    */
   function applyJustification(line, containerWidth, options) {
     const spaces = line.graphemes.filter(g => /\s/.test(g)).length;
@@ -19549,8 +19983,8 @@
     return line;
   }
 
-  /**
-   * Calculate vertical alignment offset
+  /**
+   * Calculate vertical alignment offset
    */
   function calculateVerticalOffset(contentHeight, containerHeight, align) {
     switch (align) {
@@ -19564,8 +19998,8 @@
     }
   }
 
-  /**
-   * Handle height overflow with ellipsis
+  /**
+   * Handle height overflow with ellipsis
    */
   function handleHeightOverflow(existingLines, overflowLine, remainingHeight, options) {
     // If ellipsis is enabled, try to fit part of the overflow line
@@ -19594,8 +20028,8 @@
     };
   }
 
-  /**
-   * Create empty line for empty paragraphs
+  /**
+   * Create empty line for empty paragraphs
    */
   function createEmptyLine(options) {
     const height = options.fontSize * options.lineHeight;
@@ -19611,8 +20045,8 @@
     };
   }
 
-  /**
-   * Measure width of a line of text
+  /**
+   * Measure width of a line of text
    */
   function measureLineWidth(text, options) {
     const graphemes = segmentGraphemes(text);
@@ -19629,8 +20063,8 @@
     return width;
   }
 
-  /**
-   * Convert layout options to measurement options
+  /**
+   * Convert layout options to measurement options
    */
   function createMeasurementOptions(options) {
     return {
@@ -19873,15 +20307,15 @@
     }
   }
 
-  /**
-   * Browser Line Break Extraction
-   * 
-   * Captures exact line breaks as rendered by the browser to ensure
-   * pixel-perfect consistency between DOM editing and canvas rendering.
+  /**
+   * Browser Line Break Extraction
+   * 
+   * Captures exact line breaks as rendered by the browser to ensure
+   * pixel-perfect consistency between DOM editing and canvas rendering.
    */
 
-  /**
-   * Segment text into graphemes safely using Intl.Segmenter or fallback
+  /**
+   * Segment text into graphemes safely using Intl.Segmenter or fallback
    */
   function segmentIntoGraphemes(text) {
     if (typeof Intl !== 'undefined' && Intl.Segmenter) {
@@ -19895,9 +20329,9 @@
     return Array.from(text);
   }
 
-  /**
-   * Extract line break information from a textarea by creating a mirror element
-   * with identical computed styles and measuring grapheme positions.
+  /**
+   * Extract line break information from a textarea by creating a mirror element
+   * with identical computed styles and measuring grapheme positions.
    */
   function extractLinesFromDOM(textarea) {
     const text = textarea.value;
@@ -19992,16 +20426,16 @@
     }
   }
 
-  /**
-   * Create a hash of layout-affecting properties to detect when browser lines are still valid
+  /**
+   * Create a hash of layout-affecting properties to detect when browser lines are still valid
    */
   function createLayoutHash(target) {
     const properties = [target.text, target.width, target.height, target.fontFamily, target.fontSize, target.fontWeight, target.fontStyle, target.lineHeight, target.charSpacing, target.textAlign, target.direction];
     return properties.map(p => String(p)).join('|');
   }
 
-  /**
-   * Check if stored browser lines are still valid for the current target state
+  /**
+   * Check if stored browser lines are still valid for the current target state
    */
   function areBrowserLinesValid(target, storedHash) {
     if (!storedHash || !target.__lastBrowserLines) {
@@ -20011,24 +20445,24 @@
     return currentHash === storedHash;
   }
 
-  /**
-   * Store browser lines on a target object with validity hash
+  /**
+   * Store browser lines on a target object with validity hash
    */
   function storeBrowserLines(target, lines, layoutHash) {
     target.__lastBrowserLines = lines;
     target.__lastBrowserLinesHash = createLayoutHash(target);
   }
 
-  /**
-   * Clear stored browser lines from a target object
+  /**
+   * Clear stored browser lines from a target object
    */
   function clearBrowserLines(target) {
     delete target.__lastBrowserLines;
     delete target.__lastBrowserLinesHash;
   }
 
-  /**
-   * Get stored browser lines if they're still valid
+  /**
+   * Get stored browser lines if they're still valid
    */
   function getBrowserLines(target) {
     const lines = target.__lastBrowserLines;
@@ -20041,9 +20475,9 @@
 
   let measuringContext;
 
-  /**
-   * Return a context for measurement of text string.
-   * if created it gets stored for reuse
+  /**
+   * Return a context for measurement of text string.
+   * if created it gets stored for reuse
    */
   function getMeasuringContext() {
     if (!measuringContext) {
@@ -20056,17 +20490,17 @@
     return measuringContext;
   }
 
-  /**
-   * Measure and return the info of a single grapheme.
-   * needs the the info of previous graphemes already filled
-   * Override to customize measuring
+  /**
+   * Measure and return the info of a single grapheme.
+   * needs the the info of previous graphemes already filled
+   * Override to customize measuring
    */
 
   // @TODO this is not complete
 
-  /**
-   * Text class
-   * @see {@link http://fabricjs.com/fabric-intro-part-2#text}
+  /**
+   * Text class
+   * @see {@link http://fabricjs.com/fabric-intro-part-2#text}
    */
   class FabricText extends StyledText {
     static getDefaults() {
@@ -20077,11 +20511,11 @@
     }
     constructor(text, options) {
       super();
-      /**
-       * contains characters bounding boxes
-       * This variable is considered to be protected.
-       * But for how mixins are implemented right now, we can't leave it private
-       * @protected
+      /**
+       * contains characters bounding boxes
+       * This variable is considered to be protected.
+       * But for how mixins are implemented right now, we can't leave it private
+       * @protected
        */
       _defineProperty(this, "__charBounds", []);
       Object.assign(this, FabricText.ownDefaults);
@@ -20098,9 +20532,9 @@
       this.setCoords();
     }
 
-    /**
-     * If text has a path, it will add the extra information needed
-     * for path and text calculations
+    /**
+     * If text has a path, it will add the extra information needed
+     * for path and text calculations
      */
     setPathInfo() {
       const path = this.path;
@@ -20109,10 +20543,10 @@
       }
     }
 
-    /**
-     * @private
-     * Divides text into lines of text and lines of graphemes.
-     * Uses browser lines when available for pixel-perfect consistency.
+    /**
+     * @private
+     * Divides text into lines of text and lines of graphemes.
+     * Uses browser lines when available for pixel-perfect consistency.
      */
     _splitText() {
       // Check if we have valid browser lines and should use them
@@ -20128,9 +20562,9 @@
       return newLines;
     }
 
-    /**
-     * Create TextLinesInfo from browser-extracted lines
-     * @private
+    /**
+     * Create TextLinesInfo from browser-extracted lines
+     * @private
      */
     _splitTextFromBrowserLines(browserLines) {
       const lines = [];
@@ -20164,10 +20598,10 @@
       return result;
     }
 
-    /**
-     * Initialize or update text dimensions.
-     * Updates this.width and this.height with the proper values.
-     * Does not return dimensions.
+    /**
+     * Initialize or update text dimensions.
+     * Updates this.width and this.height with the proper values.
+     * Does not return dimensions.
      */
     initDimensions() {
       // Use advanced layout if enabled
@@ -20190,8 +20624,8 @@
       }
     }
 
-    /**
-     * Enlarge space boxes and shift the others
+    /**
+     * Enlarge space boxes and shift the others
      */
     enlargeSpaces() {
       let diffSpace, currentLineWidth, numberOfSpaces, accumulatedSpace, line, charBound, spaces;
@@ -20250,18 +20684,18 @@
       }
     }
 
-    /**
-     * Advanced layout using new text engine (Konva-compatible)
-     * @private
+    /**
+     * Advanced layout using new text engine (Konva-compatible)
+     * @private
      */
     _layoutTextAdvanced() {
       const options = this._getAdvancedLayoutOptions();
       return layoutText(options);
     }
 
-    /**
-     * Get advanced layout options from current text properties
-     * @private
+    /**
+     * Get advanced layout options from current text properties
+     * @private
      */
     _getAdvancedLayoutOptions() {
       return {
@@ -20283,9 +20717,9 @@
       };
     }
 
-    /**
-     * Map Fabric textAlign to Konva align format
-     * @private
+    /**
+     * Map Fabric textAlign to Konva align format
+     * @private
      */
     _mapTextAlignToAlign(textAlign) {
       switch (textAlign) {
@@ -20306,8 +20740,8 @@
       }
     }
 
-    /**
-     * Enhanced initDimensions that uses advanced layout when enabled
+    /**
+     * Enhanced initDimensions that uses advanced layout when enabled
      */
     initDimensionsAdvanced() {
       if (!this.enableAdvancedLayout) {
@@ -20324,9 +20758,9 @@
       this.dirty = true;
     }
 
-    /**
-     * Convert new layout format to legacy _textLines and __charBounds format
-     * @private
+    /**
+     * Convert new layout format to legacy _textLines and __charBounds format
+     * @private
      */
     _convertLayoutToLegacyFormat(layout) {
       this._textLines = layout.lines.map(line => line.graphemes);
@@ -20348,30 +20782,30 @@
       }
     }
 
-    /**
-     * Detect if the text line is ended with an hard break
-     * text and itext do not have wrapping, return false
-     * @return {Boolean}
+    /**
+     * Detect if the text line is ended with an hard break
+     * text and itext do not have wrapping, return false
+     * @return {Boolean}
      */
     isEndOfWrapping(lineIndex) {
       return lineIndex === this._textLines.length - 1;
     }
 
-    /**
-     * Detect if a line has a linebreak and so we need to account for it when moving
-     * and counting style.
-     * It return always 1 for text and Itext. Textbox has its own implementation
-     * @return Number
+    /**
+     * Detect if a line has a linebreak and so we need to account for it when moving
+     * and counting style.
+     * It return always 1 for text and Itext. Textbox has its own implementation
+     * @return Number
      */
 
     missingNewlineOffset(_lineIndex) {
       return 1;
     }
 
-    /**
-     * Returns 2d representation (lineIndex and charIndex) of cursor
-     * @param {Number} selectionStart
-     * @param {Boolean} [skipWrapping] consider the location for unwrapped lines. useful to manage styles.
+    /**
+     * Returns 2d representation (lineIndex and charIndex) of cursor
+     * @param {Number} selectionStart
+     * @param {Boolean} [skipWrapping] consider the location for unwrapped lines. useful to manage styles.
      */
     get2DCursorLocation(selectionStart, skipWrapping) {
       const lines = skipWrapping ? this._unwrappedTextLines : this._textLines;
@@ -20391,24 +20825,24 @@
       };
     }
 
-    /**
-     * Returns string representation of an instance
-     * @return {String} String representation of text object
+    /**
+     * Returns string representation of an instance
+     * @return {String} String representation of text object
      */
     toString() {
       return `#<Text (${this.complexity()}): { "text": "${this.text}", "fontFamily": "${this.fontFamily}" }>`;
     }
 
-    /**
-     * Return the dimension and the zoom level needed to create a cache canvas
-     * big enough to host the object to be cached.
-     * @private
-     * @param {Object} dim.x width of object to be cached
-     * @param {Object} dim.y height of object to be cached
-     * @return {Object}.width width of canvas
-     * @return {Object}.height height of canvas
-     * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache
-     * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache
+    /**
+     * Return the dimension and the zoom level needed to create a cache canvas
+     * big enough to host the object to be cached.
+     * @private
+     * @param {Object} dim.x width of object to be cached
+     * @param {Object} dim.y height of object to be cached
+     * @return {Object}.width width of canvas
+     * @return {Object}.height height of canvas
+     * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache
+     * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache
      */
     _getCacheCanvasDimensions() {
       const dims = super._getCacheCanvasDimensions();
@@ -20418,9 +20852,9 @@
       return dims;
     }
 
-    /**
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
      */
     _render(ctx) {
       const path = this.path;
@@ -20433,9 +20867,9 @@
       this._renderTextDecoration(ctx, 'linethrough');
     }
 
-    /**
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
      */
     _renderText(ctx) {
       // Skip text rendering if in overlay editing mode
@@ -20451,15 +20885,15 @@
       }
     }
 
-    /**
-     * Set the font parameter of the context with the object properties or with charStyle
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
-     * @param {Object} [charStyle] object with font style properties
-     * @param {String} [charStyle.fontFamily] Font Family
-     * @param {Number} [charStyle.fontSize] Font size in pixels. ( without px suffix )
-     * @param {String} [charStyle.fontWeight] Font weight
-     * @param {String} [charStyle.fontStyle] Font style (italic|normal)
+    /**
+     * Set the font parameter of the context with the object properties or with charStyle
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
+     * @param {Object} [charStyle] object with font style properties
+     * @param {String} [charStyle.fontFamily] Font Family
+     * @param {Number} [charStyle.fontSize] Font size in pixels. ( without px suffix )
+     * @param {String} [charStyle.fontWeight] Font weight
+     * @param {String} [charStyle.fontStyle] Font style (italic|normal)
      */
     _setTextStyles(ctx, charStyle, forMeasuring) {
       ctx.textBaseline = 'alphabetic';
@@ -20479,11 +20913,11 @@
       ctx.font = this._getFontDeclaration(charStyle, forMeasuring);
     }
 
-    /**
-     * calculate and return the text Width measuring each line.
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
-     * @return {Number} Maximum width of Text object
+    /**
+     * calculate and return the text Width measuring each line.
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
+     * @return {Number} Maximum width of Text object
      */
     calcTextWidth() {
       let maxWidth = this.getLineWidth(0);
@@ -20496,23 +20930,23 @@
       return maxWidth;
     }
 
-    /**
-     * @private
-     * @param {String} method Method name ("fillText" or "strokeText")
-     * @param {CanvasRenderingContext2D} ctx Context to render on
-     * @param {String} line Text to render
-     * @param {Number} left Left position of text
-     * @param {Number} top Top position of text
-     * @param {Number} lineIndex Index of a line in a text
+    /**
+     * @private
+     * @param {String} method Method name ("fillText" or "strokeText")
+     * @param {CanvasRenderingContext2D} ctx Context to render on
+     * @param {String} line Text to render
+     * @param {Number} left Left position of text
+     * @param {Number} top Top position of text
+     * @param {Number} lineIndex Index of a line in a text
      */
     _renderTextLine(method, ctx, line, left, top, lineIndex) {
       this._renderChars(method, ctx, line, left, top, lineIndex);
     }
 
-    /**
-     * Renders the text background for lines, taking care of style
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
+    /**
+     * Renders the text background for lines, taking care of style
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
      */
     _renderTextLinesBackground(ctx) {
       if (!this.textBackgroundColor && !this.styleHas('textBackgroundColor')) {
@@ -20575,15 +21009,15 @@
       this._removeShadow(ctx);
     }
 
-    /**
-     * measure and return the width of a single character.
-     * possibly overridden to accommodate different measure logic or
-     * to hook some external lib for character measurement
-     * @private
-     * @param {String} _char, char to be measured
-     * @param {Object} charStyle style of char to be measured
-     * @param {String} [previousChar] previous char
-     * @param {Object} [prevCharStyle] style of previous char
+    /**
+     * measure and return the width of a single character.
+     * possibly overridden to accommodate different measure logic or
+     * to hook some external lib for character measurement
+     * @private
+     * @param {String} _char, char to be measured
+     * @param {Object} charStyle style of char to be measured
+     * @param {String} [previousChar] previous char
+     * @param {Object} [prevCharStyle] style of previous char
      */
     _measureChar(_char, charStyle, previousChar, prevCharStyle) {
       const fontCache = cache.getFontCache(charStyle),
@@ -20628,19 +21062,19 @@
       };
     }
 
-    /**
-     * Computes height of character at given position
-     * @param {Number} line the line index number
-     * @param {Number} _char the character index number
-     * @return {Number} fontSize of the character
+    /**
+     * Computes height of character at given position
+     * @param {Number} line the line index number
+     * @param {Number} _char the character index number
+     * @return {Number} fontSize of the character
      */
     getHeightOfChar(line, _char) {
       return this.getValueOfPropertyAt(line, _char, 'fontSize');
     }
 
-    /**
-     * measure a text line measuring all characters.
-     * @param {Number} lineIndex line number
+    /**
+     * measure a text line measuring all characters.
+     * @param {Number} lineIndex line number
      */
     measureLine(lineIndex) {
       const lineInfo = this._measureLine(lineIndex);
@@ -20653,11 +21087,11 @@
       return lineInfo;
     }
 
-    /**
-     * measure every grapheme of a line, populating __charBounds
-     * @param {Number} lineIndex
-     * @return {Object} object.width total width of characters
-     * @return {Object} object.numOfSpaces length of chars that match this._reSpacesAndTabs
+    /**
+     * measure every grapheme of a line, populating __charBounds
+     * @param {Number} lineIndex
+     * @return {Object} object.width total width of characters
+     * @return {Object} object.numOfSpaces length of chars that match this._reSpacesAndTabs
      */
     _measureLine(lineIndex) {
       let width = 0,
@@ -20720,13 +21154,13 @@
       };
     }
 
-    /**
-     * Calculate the angle  and the left,top position of the char that follow a path.
-     * It appends it to graphemeInfo to be reused later at rendering
-     * @private
-     * @param {Number} positionInPath to be measured
-     * @param {GraphemeBBox} graphemeInfo current grapheme box information
-     * @param {Object} startingPoint position of the point
+    /**
+     * Calculate the angle  and the left,top position of the char that follow a path.
+     * It appends it to graphemeInfo to be reused later at rendering
+     * @private
+     * @param {Number} positionInPath to be measured
+     * @param {GraphemeBBox} graphemeInfo current grapheme box information
+     * @param {Object} startingPoint position of the point
      */
     _setGraphemeOnPath(positionInPath, graphemeInfo) {
       const centerPosition = positionInPath + graphemeInfo.kernedWidth / 2,
@@ -20739,13 +21173,13 @@
       graphemeInfo.angle = info.angle + (this.pathSide === RIGHT ? Math.PI : 0);
     }
 
-    /**
-     *
-     * @param {String} grapheme to be measured
-     * @param {Number} lineIndex index of the line where the char is
-     * @param {Number} charIndex position in the line
-     * @param {String} [prevGrapheme] character preceding the one to be measured
-     * @returns {GraphemeBBox} grapheme bbox
+    /**
+     *
+     * @param {String} grapheme to be measured
+     * @param {Number} lineIndex index of the line where the char is
+     * @param {Number} charIndex position in the line
+     * @param {String} [prevGrapheme] character preceding the one to be measured
+     * @returns {GraphemeBBox} grapheme bbox
      */
     _getGraphemeBox(grapheme, lineIndex, charIndex, prevGrapheme, skipLeft) {
       const style = this.getCompleteStyleDeclaration(lineIndex, charIndex),
@@ -20773,10 +21207,10 @@
       return box;
     }
 
-    /**
-     * Calculate height of line at 'lineIndex'
-     * @param {Number} lineIndex index of line to calculate
-     * @return {Number}
+    /**
+     * Calculate height of line at 'lineIndex'
+     * @param {Number} lineIndex index of line to calculate
+     * @return {Number}
      */
     getHeightOfLine(lineIndex) {
       if (this.__lineHeights[lineIndex]) {
@@ -20792,8 +21226,8 @@
       return this.__lineHeights[lineIndex] = maxHeight * this.lineHeight * this._fontSizeMult;
     }
 
-    /**
-     * Calculate text box height
+    /**
+     * Calculate text box height
      */
     calcTextHeight() {
       let lineHeight,
@@ -20805,26 +21239,26 @@
       return height;
     }
 
-    /**
-     * @private
-     * @return {Number} Left offset
+    /**
+     * @private
+     * @return {Number} Left offset
      */
     _getLeftOffset() {
       return this.direction === 'ltr' ? -this.width / 2 : this.width / 2;
     }
 
-    /**
-     * @private
-     * @return {Number} Top offset
+    /**
+     * @private
+     * @return {Number} Top offset
      */
     _getTopOffset() {
       return -this.height / 2;
     }
 
-    /**
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
-     * @param {String} method Method name ("fillText" or "strokeText")
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
+     * @param {String} method Method name ("fillText" or "strokeText")
      */
     _renderTextCommon(ctx, method) {
       ctx.save();
@@ -20841,9 +21275,9 @@
       ctx.restore();
     }
 
-    /**
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
      */
     _renderTextFill(ctx) {
       if (!this.fill && !this.styleHas(FILL)) {
@@ -20852,9 +21286,9 @@
       this._renderTextCommon(ctx, 'fillText');
     }
 
-    /**
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
      */
     _renderTextStroke(ctx) {
       if ((!this.stroke || this.strokeWidth === 0) && this.isEmptyStyles()) {
@@ -20871,14 +21305,14 @@
       ctx.restore();
     }
 
-    /**
-     * @private
-     * @param {String} method fillText or strokeText.
-     * @param {CanvasRenderingContext2D} ctx Context to render on
-     * @param {Array} line Content of the line, splitted in an array by grapheme
-     * @param {Number} left
-     * @param {Number} top
-     * @param {Number} lineIndex
+    /**
+     * @private
+     * @param {String} method fillText or strokeText.
+     * @param {CanvasRenderingContext2D} ctx Context to render on
+     * @param {Array} line Content of the line, splitted in an array by grapheme
+     * @param {Number} left
+     * @param {Number} top
+     * @param {Number} lineIndex
      */
     _renderChars(method, ctx, line, left, top, lineIndex) {
       const lineHeight = this.getHeightOfLine(lineIndex),
@@ -20960,16 +21394,16 @@
       ctx.restore();
     }
 
-    /**
-     * This function try to patch the missing gradientTransform on canvas gradients.
-     * transforming a context to transform the gradient, is going to transform the stroke too.
-     * we want to transform the gradient but not the stroke operation, so we create
-     * a transformed gradient on a pattern and then we use the pattern instead of the gradient.
-     * this method has drawbacks: is slow, is in low resolution, needs a patch for when the size
-     * is limited.
-     * @private
-     * @param {TFiller} filler a fabric gradient instance
-     * @return {CanvasPattern} a pattern to use as fill/stroke style
+    /**
+     * This function try to patch the missing gradientTransform on canvas gradients.
+     * transforming a context to transform the gradient, is going to transform the stroke too.
+     * we want to transform the gradient but not the stroke operation, so we create
+     * a transformed gradient on a pattern and then we use the pattern instead of the gradient.
+     * this method has drawbacks: is slow, is in low resolution, needs a patch for when the size
+     * is limited.
+     * @private
+     * @param {TFiller} filler a fabric gradient instance
+     * @return {CanvasPattern} a pattern to use as fill/stroke style
      */
     _applyPatternGradientTransformText(filler) {
       // TODO: verify compatibility with strokeUniform
@@ -21025,12 +21459,12 @@
       };
     }
 
-    /**
-     * This function prepare the canvas for a stroke style, and stroke and strokeWidth
-     * need to be sent in as defined
-     * @param {CanvasRenderingContext2D} ctx
-     * @param {CompleteTextStyleDeclaration} style with stroke and strokeWidth defined
-     * @returns
+    /**
+     * This function prepare the canvas for a stroke style, and stroke and strokeWidth
+     * need to be sent in as defined
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {CompleteTextStyleDeclaration} style with stroke and strokeWidth defined
+     * @returns
      */
     _setStrokeStyles(ctx, _ref) {
       let {
@@ -21045,12 +21479,12 @@
       return this.handleFiller(ctx, 'strokeStyle', stroke);
     }
 
-    /**
-     * This function prepare the canvas for a ill style, and fill
-     * need to be sent in as defined
-     * @param {CanvasRenderingContext2D} ctx
-     * @param {CompleteTextStyleDeclaration} style with ill defined
-     * @returns
+    /**
+     * This function prepare the canvas for a ill style, and fill
+     * need to be sent in as defined
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {CompleteTextStyleDeclaration} style with ill defined
+     * @returns
      */
     _setFillStyles(ctx, _ref2) {
       let {
@@ -21059,16 +21493,16 @@
       return this.handleFiller(ctx, 'fillStyle', fill);
     }
 
-    /**
-     * @private
-     * @param {String} method
-     * @param {CanvasRenderingContext2D} ctx Context to render on
-     * @param {Number} lineIndex
-     * @param {Number} charIndex
-     * @param {String} _char
-     * @param {Number} left Left coordinate
-     * @param {Number} top Top coordinate
-     * @param {Number} lineHeight Height of the line
+    /**
+     * @private
+     * @param {String} method
+     * @param {CanvasRenderingContext2D} ctx Context to render on
+     * @param {Number} lineIndex
+     * @param {Number} charIndex
+     * @param {String} _char
+     * @param {Number} left Left coordinate
+     * @param {Number} top Top coordinate
+     * @param {Number} lineHeight Height of the line
      */
     _renderChar(method, ctx, lineIndex, charIndex, _char, left, top) {
       const decl = this._getStyleDeclaration(lineIndex, charIndex),
@@ -21097,30 +21531,30 @@
       ctx.restore();
     }
 
-    /**
-     * Turns the character into a 'superior figure' (i.e. 'superscript')
-     * @param {Number} start selection start
-     * @param {Number} end selection end
+    /**
+     * Turns the character into a 'superior figure' (i.e. 'superscript')
+     * @param {Number} start selection start
+     * @param {Number} end selection end
      */
     setSuperscript(start, end) {
       this._setScript(start, end, this.superscript);
     }
 
-    /**
-     * Turns the character into an 'inferior figure' (i.e. 'subscript')
-     * @param {Number} start selection start
-     * @param {Number} end selection end
+    /**
+     * Turns the character into an 'inferior figure' (i.e. 'subscript')
+     * @param {Number} start selection start
+     * @param {Number} end selection end
      */
     setSubscript(start, end) {
       this._setScript(start, end, this.subscript);
     }
 
-    /**
-     * Applies 'schema' at given position
-     * @private
-     * @param {Number} start selection start
-     * @param {Number} end selection end
-     * @param {Number} schema
+    /**
+     * Applies 'schema' at given position
+     * @private
+     * @param {Number} start selection start
+     * @param {Number} end selection end
+     * @param {Number} schema
      */
     _setScript(start, end, schema) {
       const loc = this.get2DCursorLocation(start, true),
@@ -21133,10 +21567,10 @@
       this.setSelectionStyles(style, start, end);
     }
 
-    /**
-     * @private
-     * @param {Number} lineIndex index text line
-     * @return {Number} Line left offset
+    /**
+     * @private
+     * @param {Number} lineIndex index text line
+     * @return {Number} Line left offset
      */
     _getLineLeftOffset(lineIndex) {
       const lineWidth = this.getLineWidth(lineIndex),
@@ -21186,8 +21620,8 @@
       return leftOffset;
     }
 
-    /**
-     * @private
+    /**
+     * @private
      */
     _clearCache() {
       this._forceClearCache = false;
@@ -21196,12 +21630,12 @@
       this.__charBounds = [];
     }
 
-    /**
-     * Measure a single line given its index. Used to calculate the initial
-     * text bounding box. The values are calculated and stored in __lineWidths cache.
-     * @private
-     * @param {Number} lineIndex line number
-     * @return {Number} Line width
+    /**
+     * Measure a single line given its index. Used to calculate the initial
+     * text bounding box. The values are calculated and stored in __lineWidths cache.
+     * @private
+     * @param {Number} lineIndex line number
+     * @return {Number} Line width
      */
     getLineWidth(lineIndex) {
       if (this.__lineWidths[lineIndex] !== undefined) {
@@ -21220,12 +21654,12 @@
       return 0;
     }
 
-    /**
-     * Retrieves the value of property at given character position
-     * @param {Number} lineIndex the line number
-     * @param {Number} charIndex the character number
-     * @param {String} property the property name
-     * @returns the value of 'property'
+    /**
+     * Retrieves the value of property at given character position
+     * @param {Number} lineIndex the line number
+     * @param {Number} charIndex the character number
+     * @param {String} property the property name
+     * @returns the value of 'property'
      */
     getValueOfPropertyAt(lineIndex, charIndex, property) {
       var _charStyle$property;
@@ -21233,9 +21667,9 @@
       return (_charStyle$property = charStyle[property]) !== null && _charStyle$property !== void 0 ? _charStyle$property : this[property];
     }
 
-    /**
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
      */
     _renderTextDecoration(ctx, type) {
       if (!this[type] && !this.styleHas(type)) {
@@ -21319,10 +21753,10 @@
       this._removeShadow(ctx);
     }
 
-    /**
-     * return font declaration string for canvas context
-     * @param {Object} [styleObject] object
-     * @returns {String} font declaration formatted for canvas context.
+    /**
+     * return font declaration string for canvas context
+     * @param {Object} [styleObject] object
+     * @returns {String} font declaration formatted for canvas context.
      */
     _getFontDeclaration() {
       let {
@@ -21336,9 +21770,9 @@
       return [fontStyle, fontWeight, `${forMeasuring ? this.CACHE_FONT_SIZE : fontSize}px`, parsedFontFamily].join(' ');
     }
 
-    /**
-     * Renders text instance on a specified context
-     * @param {CanvasRenderingContext2D} ctx Context to render on
+    /**
+     * Renders text instance on a specified context
+     * @param {CanvasRenderingContext2D} ctx Context to render on
      */
     render(ctx) {
       if (!this.visible) {
@@ -21353,22 +21787,22 @@
       super.render(ctx);
     }
 
-    /**
-     * Override this method to customize grapheme splitting
-     * @todo the util `graphemeSplit` needs to be injectable in some way.
-     * is more comfortable to inject the correct util rather than having to override text
-     * in the middle of the prototype chain
-     * @param {string} value
-     * @returns {string[]} array of graphemes
+    /**
+     * Override this method to customize grapheme splitting
+     * @todo the util `graphemeSplit` needs to be injectable in some way.
+     * is more comfortable to inject the correct util rather than having to override text
+     * in the middle of the prototype chain
+     * @param {string} value
+     * @returns {string[]} array of graphemes
      */
     graphemeSplit(value) {
       return graphemeSplit(value);
     }
 
-    /**
-     * Returns the text as an array of lines.
-     * @param {String} text text to split
-     * @returns  Lines in the text
+    /**
+     * Returns the text as an array of lines.
+     * @param {String} text text to split
+     * @returns  Lines in the text
      */
     _splitTextIntoLines(text) {
       const lines = text.split(this._reNewline),
@@ -21388,10 +21822,10 @@
       };
     }
 
-    /**
-     * Returns object representation of an instance
-     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
-     * @return {Object} Object representation of an instance
+    /**
+     * Returns object representation of an instance
+     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
+     * @return {Object} Object representation of an instance
      */
     toObject() {
       let propertiesToInclude = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -21434,23 +21868,23 @@
       return this;
     }
 
-    /**
-     * Returns complexity of an instance
-     * @return {Number} complexity
+    /**
+     * Returns complexity of an instance
+     * @return {Number} complexity
      */
     complexity() {
       return 1;
     }
 
-    /**
-     * List of generic font families
-     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#generic-name
+    /**
+     * List of generic font families
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#generic-name
      */
-
-    /**
-     * Returns FabricText instance from an SVG element (<b>not yet implemented</b>)
-     * @param {HTMLElement} element Element to parse
-     * @param {Object} [options] Options object
+
+    /**
+     * Returns FabricText instance from an SVG element (<b>not yet implemented</b>)
+     * @param {HTMLElement} element Element to parse
+     * @param {Object} [options] Options object
      */
     static async fromElement(element, options, cssRules) {
       const parsedAttributes = parseAttributes(element, FabricText.ATTRIBUTE_NAMES, cssRules);
@@ -21489,10 +21923,10 @@
         scaledDiff = lineHeightDiff * textHeightScaleFactor,
         textHeight = text.getScaledHeight() + scaledDiff;
       let offX = 0;
-      /*
-        Adjust positioning:
-          x/y attributes in SVG correspond to the bottom-left corner of text bounding box
-          fabric output by default at top, left.
+      /*
+        Adjust positioning:
+          x/y attributes in SVG correspond to the bottom-left corner of text bounding box
+          fabric output by default at top, left.
       */
       if (textAnchor === CENTER) {
         offX = text.getScaledWidth() / 2;
@@ -21510,10 +21944,10 @@
 
     /* _FROM_SVG_END_ */
 
-    /**
-     * Returns FabricText instance from an object representation
-     * @param {Object} object plain js Object to create an instance from
-     * @returns {Promise<FabricText>}
+    /**
+     * Returns FabricText instance from an object representation
+     * @param {Object} object plain js Object to create an instance from
+     * @returns {Promise<FabricText>}
      */
     static fromObject(object) {
       return this._fromObject({
@@ -21524,10 +21958,10 @@
       });
     }
   }
-  /**
-   * Properties that requires a text layout recalculation when changed
-   * @type string[]
-   * @protected
+  /**
+   * Properties that requires a text layout recalculation when changed
+   * @type string[]
+   * @protected
    */
   _defineProperty(FabricText, "textLayoutProperties", textLayoutProperties);
   _defineProperty(FabricText, "cacheProperties", [...cacheProperties, ...additionalProps]);
@@ -21535,9 +21969,9 @@
   _defineProperty(FabricText, "type", 'Text');
   _defineProperty(FabricText, "genericFonts", ['serif', 'sans-serif', 'monospace', 'cursive', 'fantasy', 'system-ui', 'ui-serif', 'ui-sans-serif', 'ui-monospace', 'ui-rounded', 'math', 'emoji', 'fangsong']);
   /* _FROM_SVG_START_ */
-  /**
-   * List of attribute names to account for when parsing SVG element (used by {@link FabricText.fromElement})
-   * @see: http://www.w3.org/TR/SVG/text.html#TextElement
+  /**
+   * List of attribute names to account for when parsing SVG element (used by {@link FabricText.fromElement})
+   * @see: http://www.w3.org/TR/SVG/text.html#TextElement
    */
   _defineProperty(FabricText, "ATTRIBUTE_NAMES", SHARED_ATTRIBUTES.concat('x', 'y', 'dx', 'dy', 'font-family', 'font-style', 'font-weight', 'font-size', 'letter-spacing', 'text-decoration', 'text-anchor'));
   applyMixins(FabricText, [TextSVGExportMixin]);
@@ -21924,8 +22358,8 @@
       // We don't need to save/restore them here as it would conflict with IText's restoration
     }
 
-    /**
-     * Get the container element for the overlay (parent of upperCanvasEl)
+    /**
+     * Get the container element for the overlay (parent of upperCanvasEl)
      */
     getCanvasContainer() {
       const upperCanvas = this.canvas.upperCanvasEl;
@@ -21939,8 +22373,8 @@
       return container;
     }
 
-    /**
-     * Create the overlay DOM structure
+    /**
+     * Create the overlay DOM structure
      */
     createOverlayDOM() {
       // Host div for positioning and overflow control
@@ -21995,8 +22429,8 @@
       document.body.appendChild(this.hostDiv);
     }
 
-    /**
-     * Attach all event listeners
+    /**
+     * Attach all event listeners
      */
     attachEventListeners() {
       // Textarea events
@@ -22016,8 +22450,8 @@
       this.setupViewportChangeDetection();
     }
 
-    /**
-     * Remove all event listeners
+    /**
+     * Remove all event listeners
      */
     removeEventListeners() {
       this.textarea.removeEventListener('input', this.boundHandlers.onInput);
@@ -22034,16 +22468,16 @@
       this.restoreViewportChangeDetection();
     }
 
-    /**
-     * Simple method to refresh positioning when canvas changes
+    /**
+     * Simple method to refresh positioning when canvas changes
      */
     updatePosition() {
       this.applyOverlayStyle();
     }
 
-    /**
-     * Update the Fabric object bounds to match current textarea size
-     * This ensures Fabric.js selection controls follow the growing textbox
+    /**
+     * Update the Fabric object bounds to match current textarea size
+     * This ensures Fabric.js selection controls follow the growing textbox
      */
     updateObjectBounds() {
       if (this.isDestroyed) return;
@@ -22077,15 +22511,15 @@
       }
     }
 
-    /**
-     * Convert Fabric charSpacing (1/1000 em) to CSS letter-spacing (px)
+    /**
+     * Convert Fabric charSpacing (1/1000 em) to CSS letter-spacing (px)
      */
     letterSpacingPx(charSpacing, fontSize) {
       return charSpacing / 1000 * fontSize;
     }
 
-    /**
-     * Detect text direction using first strong directional character
+    /**
+     * Detect text direction using first strong directional character
      */
     firstStrongDir(text) {
       // Hebrew: \u0590-\u05FF, Arabic: \u0600-\u06FF, \u0750-\u077F, \uFB50-\uFDFF, \uFE70-\uFEFF
@@ -22315,8 +22749,8 @@
       // Initial bounds are set correctly by Fabric.js - don't force update here
     }
 
-    /**
-     * Debug method to compare textarea and canvas object bounding boxes
+    /**
+     * Debug method to compare textarea and canvas object bounding boxes
      */
     debugBoundingBoxComparison() {
       const target = this.target;
@@ -22386,8 +22820,8 @@
       console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
     }
 
-    /**
-     * Debug method to compare text wrapping between textarea and Fabric text object
+    /**
+     * Debug method to compare text wrapping between textarea and Fabric text object
      */
     debugTextWrapping() {
       const target = this.target;
@@ -22472,8 +22906,8 @@
       console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
     }
 
-    /**
-     * Focus the textarea and position cursor at end
+    /**
+     * Focus the textarea and position cursor at end
      */
     focusTextarea() {
       // For overlay editing, we want to keep the object in "selection mode" not "editing mode"
@@ -22508,8 +22942,8 @@
       this.canvas.requestRenderAll();
     }
 
-    /**
-     * Refresh overlay positioning and styling
+    /**
+     * Refresh overlay positioning and styling
      */
     refresh() {
       if (this.isDestroyed) return;
@@ -22517,8 +22951,8 @@
       // Don't update object bounds on every refresh - only when textarea actually resizes
     }
 
-    /**
-     * Destroy the overlay editor
+    /**
+     * Destroy the overlay editor
      */
     destroy() {
       let commit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
@@ -22686,8 +23120,8 @@
       }
     }
 
-    /**
-     * Setup detection for viewport changes (zoom/pan)
+    /**
+     * Setup detection for viewport changes (zoom/pan)
      */
     setupViewportChangeDetection() {
       // Store original methods
@@ -22716,8 +23150,8 @@
       };
     }
 
-    /**
-     * Restore original viewport methods
+    /**
+     * Restore original viewport methods
      */
     restoreViewportChangeDetection() {
       if (this.canvas.__originalSetZoom) {
@@ -22732,8 +23166,8 @@
     }
   }
 
-  /**
-   * Enter overlay text editing mode for a text object
+  /**
+   * Enter overlay text editing mode for a text object
    */
   function enterTextOverlayEdit(canvas, target, options) {
     // If already in overlay editing, destroy existing editor first
@@ -22757,35 +23191,35 @@
     return editor;
   }
 
-  /**
-   *  extend this regex to support non english languages
-   *
-   *  - ` `      Matches a SPACE character (char code 32).
-   *  - `\n`     Matches a LINE FEED character (char code 10).
-   *  - `.`     Matches a "." character (char code 46).
-   *  - `,`      Matches a "," character (char code 44).
-   *  - `;`      Matches a ";" character (char code 59).
-   *  - `!`      Matches a "!" character (char code 33).
-   *  - `\?`     Matches a "?" character (char code 63).
-   *  - `\-`     Matches a "-" character (char code 45).
+  /**
+   *  extend this regex to support non english languages
+   *
+   *  - ` `      Matches a SPACE character (char code 32).
+   *  - `\n`     Matches a LINE FEED character (char code 10).
+   *  - `.`     Matches a "." character (char code 46).
+   *  - `,`      Matches a "," character (char code 44).
+   *  - `;`      Matches a ";" character (char code 59).
+   *  - `!`      Matches a "!" character (char code 33).
+   *  - `\?`     Matches a "?" character (char code 63).
+   *  - `\-`     Matches a "-" character (char code 45).
    */
   // eslint-disable-next-line no-useless-escape
   const reNonWord = /[ \n\.,;!\?\-]/;
   class ITextBehavior extends FabricText {
     constructor() {
       super(...arguments);
-      /**
-       * Helps determining when the text is in composition, so that the cursor
-       * rendering is altered.
+      /**
+       * Helps determining when the text is in composition, so that the cursor
+       * rendering is altered.
        */
       _defineProperty(this, "_currentCursorOpacity", 1);
     }
-    /**
-     * Keeps track if the IText object was selected before the actual click.
-     * This because we want to delay enter editing by a click.
+    /**
+     * Keeps track if the IText object was selected before the actual click.
+     * This because we want to delay enter editing by a click.
      */
-    /**
-     * Initializes all the interactive behavior of IText
+    /**
+     * Initializes all the interactive behavior of IText
      */
     initBehavior() {
       this._tick = this._tick.bind(this);
@@ -22798,8 +23232,8 @@
       return super.onDeselect(options);
     }
 
-    /**
-     * @private
+    /**
+     * @private
      */
     _animateCursor(_ref) {
       let {
@@ -22824,8 +23258,8 @@
       });
     }
 
-    /**
-     * changes the cursor from visible to invisible
+    /**
+     * changes the cursor from visible to invisible
      */
     _tick(delay) {
       this._currentTickState = this._animateCursor({
@@ -22836,8 +23270,8 @@
       });
     }
 
-    /**
-     * Changes the cursor from invisible to visible
+    /**
+     * Changes the cursor from invisible to visible
      */
     _onTickComplete() {
       var _this$_currentTickCom;
@@ -22849,16 +23283,16 @@
       });
     }
 
-    /**
-     * Initializes delayed cursor
+    /**
+     * Initializes delayed cursor
      */
     initDelayedCursor(restart) {
       this.abortCursorAnimation();
       this._tick(restart ? 0 : this.cursorDelay);
     }
 
-    /**
-     * Aborts cursor animation, clears all timeouts and clear textarea context if necessary
+    /**
+     * Aborts cursor animation, clears all timeouts and clear textarea context if necessary
      */
     abortCursorAnimation() {
       let shouldClear = false;
@@ -22876,9 +23310,9 @@
       }
     }
 
-    /**
-     * Restart tue cursor animation if either is in complete state ( between animations )
-     * or if it never started before
+    /**
+     * Restart tue cursor animation if either is in complete state ( between animations )
+     * or if it never started before
      */
     restartCursorIfNeeded() {
       if ([this._currentTickState, this._currentTickCompleteState].some(cursorAnimation => !cursorAnimation || cursorAnimation.isDone())) {
@@ -22886,8 +23320,8 @@
       }
     }
 
-    /**
-     * Selects entire text
+    /**
+     * Selects entire text
      */
     selectAll() {
       this.selectionStart = 0;
@@ -22897,26 +23331,26 @@
       return this;
     }
 
-    /**
-     * Selects entire text and updates the visual state
+    /**
+     * Selects entire text and updates the visual state
      */
     cmdAll() {
       this.selectAll();
       this.renderCursorOrSelection();
     }
 
-    /**
-     * Returns selected text
-     * @return {String}
+    /**
+     * Returns selected text
+     * @return {String}
      */
     getSelectedText() {
       return this._text.slice(this.selectionStart, this.selectionEnd).join('');
     }
 
-    /**
-     * Find new selection index representing start of current word according to current selection index
-     * @param {Number} startFrom Current selection index
-     * @return {Number} New selection index
+    /**
+     * Find new selection index representing start of current word according to current selection index
+     * @param {Number} startFrom Current selection index
+     * @return {Number} New selection index
      */
     findWordBoundaryLeft(startFrom) {
       let offset = 0,
@@ -22936,10 +23370,10 @@
       return startFrom - offset;
     }
 
-    /**
-     * Find new selection index representing end of current word according to current selection index
-     * @param {Number} startFrom Current selection index
-     * @return {Number} New selection index
+    /**
+     * Find new selection index representing end of current word according to current selection index
+     * @param {Number} startFrom Current selection index
+     * @return {Number} New selection index
      */
     findWordBoundaryRight(startFrom) {
       let offset = 0,
@@ -22959,10 +23393,10 @@
       return startFrom + offset;
     }
 
-    /**
-     * Find new selection index representing start of current line according to current selection index
-     * @param {Number} startFrom Current selection index
-     * @return {Number} New selection index
+    /**
+     * Find new selection index representing start of current line according to current selection index
+     * @param {Number} startFrom Current selection index
+     * @return {Number} New selection index
      */
     findLineBoundaryLeft(startFrom) {
       let offset = 0,
@@ -22974,10 +23408,10 @@
       return startFrom - offset;
     }
 
-    /**
-     * Find new selection index representing end of current line according to current selection index
-     * @param {Number} startFrom Current selection index
-     * @return {Number} New selection index
+    /**
+     * Find new selection index representing end of current line according to current selection index
+     * @param {Number} startFrom Current selection index
+     * @return {Number} New selection index
      */
     findLineBoundaryRight(startFrom) {
       let offset = 0,
@@ -22989,11 +23423,11 @@
       return startFrom + offset;
     }
 
-    /**
-     * Finds index corresponding to beginning or end of a word
-     * @param {Number} selectionStart Index of a character
-     * @param {Number} direction 1 or -1
-     * @return {Number} Index of the beginning or end of a word
+    /**
+     * Finds index corresponding to beginning or end of a word
+     * @param {Number} selectionStart Index of a character
+     * @param {Number} direction 1 or -1
+     * @return {Number} Index of the beginning or end of a word
      */
     searchWordBoundary(selectionStart, direction) {
       const text = this._text;
@@ -23011,9 +23445,9 @@
       return index;
     }
 
-    /**
-     * Selects the word that contains the char at index selectionStart
-     * @param {Number} selectionStart Index of a character
+    /**
+     * Selects the word that contains the char at index selectionStart
+     * @param {Number} selectionStart Index of a character
      */
     selectWord(selectionStart) {
       selectionStart = selectionStart !== null && selectionStart !== void 0 ? selectionStart : this.selectionStart;
@@ -23029,9 +23463,9 @@
       this.renderCursorOrSelection();
     }
 
-    /**
-     * Selects the line that contains selectionStart
-     * @param {Number} selectionStart Index of a character
+    /**
+     * Selects the line that contains selectionStart
+     * @param {Number} selectionStart Index of a character
      */
     selectLine(selectionStart) {
       selectionStart = selectionStart !== null && selectionStart !== void 0 ? selectionStart : this.selectionStart;
@@ -23043,8 +23477,8 @@
       this._updateTextarea();
     }
 
-    /**
-     * Enters editing state
+    /**
+     * Enters editing state
      */
     enterEditing(e) {
       if (this.isEditing || !this.editable) {
@@ -23064,8 +23498,8 @@
       }
     }
 
-    /**
-     * runs the actual logic that enter from editing state, see {@link enterEditing}
+    /**
+     * runs the actual logic that enter from editing state, see {@link enterEditing}
      */
     enterEditingImpl() {
       if (this.canvas) {
@@ -23089,8 +23523,8 @@
       }
     }
 
-    /**
-     * Enter overlay editing mode using DOM textarea overlay
+    /**
+     * Enter overlay editing mode using DOM textarea overlay
      */
     enterOverlayEditing() {
       this._saveEditingProps();
@@ -23111,8 +23545,8 @@
       });
     }
 
-    /**
-     * Commit overlay editing changes
+    /**
+     * Commit overlay editing changes
      */
     commitOverlayEdit(text) {
       const overlayEditor = this.__overlayEditor;
@@ -23136,8 +23570,8 @@
       this.canvas && this.canvas.requestRenderAll();
     }
 
-    /**
-     * Cancel overlay editing without changes
+    /**
+     * Cancel overlay editing without changes
      */
     cancelOverlayEdit() {
       // Restore original text
@@ -23145,8 +23579,8 @@
       this.exitEditing();
     }
 
-    /**
-     * called by {@link Canvas#textEditingManager}
+    /**
+     * called by {@link Canvas#textEditingManager}
      */
     updateSelectionOnMouseMove(e) {
       if (this.getActiveControl()) {
@@ -23174,8 +23608,8 @@
       }
     }
 
-    /**
-     * @private
+    /**
+     * @private
      */
     _setEditingProps() {
       this.hoverCursor = 'text';
@@ -23187,8 +23621,8 @@
       this.lockMovementX = this.lockMovementY = true;
     }
 
-    /**
-     * convert from textarea to grapheme indexes
+    /**
+     * convert from textarea to grapheme indexes
      */
     fromStringToGraphemeSelection(start, end, text) {
       const smallerTextStart = text.slice(0, start),
@@ -23207,8 +23641,8 @@
       };
     }
 
-    /**
-     * convert from fabric to textarea values
+    /**
+     * convert from fabric to textarea values
      */
     fromGraphemeToStringSelection(start, end, graphemes) {
       const smallerTextStart = graphemes.slice(0, start),
@@ -23227,8 +23661,8 @@
       };
     }
 
-    /**
-     * @private
+    /**
+     * @private
      */
     _updateTextarea() {
       this.cursorOffsetCache = {};
@@ -23243,8 +23677,8 @@
       this.updateTextareaPosition();
     }
 
-    /**
-     * @private
+    /**
+     * @private
      */
     updateFromTextArea() {
       if (!this.hiddenTextarea) {
@@ -23264,8 +23698,8 @@
       this.updateTextareaPosition();
     }
 
-    /**
-     * @private
+    /**
+     * @private
      */
     updateTextareaPosition() {
       if (this.selectionStart === this.selectionEnd) {
@@ -23275,9 +23709,9 @@
       }
     }
 
-    /**
-     * @private
-     * @return {Object} style contains style for hiddenTextarea
+    /**
+     * @private
+     * @return {Object} style contains style for hiddenTextarea
      */
     _calcTextareaPosition() {
       if (!this.canvas) {
@@ -23324,8 +23758,8 @@
       };
     }
 
-    /**
-     * @private
+    /**
+     * @private
      */
     _saveEditingProps() {
       this._savedProps = {
@@ -23342,8 +23776,8 @@
       };
     }
 
-    /**
-     * @private
+    /**
+     * @private
      */
     _restoreEditingProps() {
       if (!this._savedProps) {
@@ -23363,9 +23797,9 @@
       delete this._savedProps;
     }
 
-    /**
-     * runs the actual logic that exits from editing state, see {@link exitEditing}
-     * But it does not fire events
+    /**
+     * runs the actual logic that exits from editing state, see {@link exitEditing}
+     * But it does not fire events
      */
     exitEditingImpl() {
       const hiddenTextarea = this.hiddenTextarea;
@@ -23386,8 +23820,8 @@
       }
     }
 
-    /**
-     * Exits from editing state and fires relevant events
+    /**
+     * Exits from editing state and fires relevant events
      */
     exitEditing() {
       const isTextChanged = this._textBeforeEdit !== this.text;
@@ -23406,8 +23840,8 @@
       return this;
     }
 
-    /**
-     * @private
+    /**
+     * @private
      */
     _removeExtraneousStyles() {
       for (const prop in this.styles) {
@@ -23417,10 +23851,10 @@
       }
     }
 
-    /**
-     * remove and reflow a style block from start to end.
-     * @param {Number} start linear start position for removal (included in removal)
-     * @param {Number} end linear end position for removal ( excluded from removal )
+    /**
+     * remove and reflow a style block from start to end.
+     * @param {Number} start linear start position for removal (included in removal)
+     * @param {Number} end linear end position for removal ( excluded from removal )
      */
     removeStyleFromTo(start, end) {
       const {
@@ -23473,10 +23907,10 @@
       }
     }
 
-    /**
-     * Shifts line styles up or down
-     * @param {Number} lineIndex Index of a line
-     * @param {Number} offset Can any number?
+    /**
+     * Shifts line styles up or down
+     * @param {Number} lineIndex Index of a line
+     * @param {Number} offset Can any number?
      */
     shiftLineStyles(lineIndex, offset) {
       const clonedStyles = Object.assign({}, this.styles);
@@ -23491,15 +23925,15 @@
       }
     }
 
-    /**
-     * Handle insertion of more consecutive style lines for when one or more
-     * newlines gets added to the text. Since current style needs to be shifted
-     * first we shift the current style of the number lines needed, then we add
-     * new lines from the last to the first.
-     * @param {Number} lineIndex Index of a line
-     * @param {Number} charIndex Index of a char
-     * @param {Number} qty number of lines to add
-     * @param {Array} copiedStyle Array of objects styles
+    /**
+     * Handle insertion of more consecutive style lines for when one or more
+     * newlines gets added to the text. Since current style needs to be shifted
+     * first we shift the current style of the number lines needed, then we add
+     * new lines from the last to the first.
+     * @param {Number} lineIndex Index of a line
+     * @param {Number} charIndex Index of a char
+     * @param {Number} qty number of lines to add
+     * @param {Array} copiedStyle Array of objects styles
      */
     insertNewlineStyleObject(lineIndex, charIndex, qty, copiedStyle) {
       const newLineStyles = {};
@@ -23559,12 +23993,12 @@
       this._forceClearCache = true;
     }
 
-    /**
-     * Inserts style object for a given line/char index
-     * @param {Number} lineIndex Index of a line
-     * @param {Number} charIndex Index of a char
-     * @param {Number} quantity number Style object to insert, if given
-     * @param {Array} copiedStyle array of style objects
+    /**
+     * Inserts style object for a given line/char index
+     * @param {Number} lineIndex Index of a line
+     * @param {Number} charIndex Index of a char
+     * @param {Number} quantity number Style object to insert, if given
+     * @param {Array} copiedStyle array of style objects
      */
     insertCharStyleObject(lineIndex, charIndex, quantity, copiedStyle) {
       if (!this.styles) {
@@ -23613,11 +24047,11 @@
       }
     }
 
-    /**
-     * Inserts style object(s)
-     * @param {Array} insertedText Characters at the location where style is inserted
-     * @param {Number} start cursor index for inserting style
-     * @param {Array} [copiedStyle] array of style objects to insert.
+    /**
+     * Inserts style object(s)
+     * @param {Array} insertedText Characters at the location where style is inserted
+     * @param {Number} start cursor index for inserting style
+     * @param {Array} [copiedStyle] array of style objects to insert.
      */
     insertNewStyleBlock(insertedText, start, copiedStyle) {
       const cursorLoc = this.get2DCursorLocation(start, true),
@@ -23658,12 +24092,12 @@
       }
     }
 
-    /**
-     * Removes characters from start/end
-     * start/end ar per grapheme position in _text array.
-     *
-     * @param {Number} start
-     * @param {Number} end default to start + 1
+    /**
+     * Removes characters from start/end
+     * start/end ar per grapheme position in _text array.
+     *
+     * @param {Number} start
+     * @param {Number} end default to start + 1
      */
     removeChars(start) {
       let end = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : start + 1;
@@ -23676,17 +24110,17 @@
       this._removeExtraneousStyles();
     }
 
-    /**
-     * insert characters at start position, before start position.
-     * start  equal 1 it means the text get inserted between actual grapheme 0 and 1
-     * if style array is provided, it must be as the same length of text in graphemes
-     * if end is provided and is bigger than start, old text is replaced.
-     * start/end ar per grapheme position in _text array.
-     *
-     * @param {String} text text to insert
-     * @param {Array} style array of style objects
-     * @param {Number} start
-     * @param {Number} end default to start + 1
+    /**
+     * insert characters at start position, before start position.
+     * start  equal 1 it means the text get inserted between actual grapheme 0 and 1
+     * if style array is provided, it must be as the same length of text in graphemes
+     * if end is provided and is bigger than start, old text is replaced.
+     * start/end ar per grapheme position in _text array.
+     *
+     * @param {String} text text to insert
+     * @param {Array} style array of style objects
+     * @param {Number} start
+     * @param {Number} end default to start + 1
      */
     insertChars(text, style, start) {
       let end = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : start;
@@ -23703,9 +24137,9 @@
       this._removeExtraneousStyles();
     }
 
-    /**
-     * Set the selectionStart and selectionEnd according to the new position of cursor
-     * mimic the key - mouse navigation when shift is pressed.
+    /**
+     * Set the selectionStart and selectionEnd according to the new position of cursor
+     * mimic the key - mouse navigation when shift is pressed.
      */
     setSelectionStartEndWithShift(start, end, newSelection) {
       if (newSelection <= start) {
@@ -24328,8 +24762,8 @@
     }
   }
 
-  /**
-   * `LEFT_CLICK === 0`
+  /**
+   * `LEFT_CLICK === 0`
    */
   const notALeftClick = e => !!e.button;
   class ITextClickBehavior extends ITextKeyBehavior {
@@ -24347,36 +24781,36 @@
       super.initBehavior();
     }
 
-    /**
-     * If this method returns true a mouse move operation over a text selection
-     * will not prevent the native mouse event allowing the browser to start a drag operation.
-     * shouldStartDragging can be read 'do not prevent default for mouse move event'
-     * To prevent drag and drop between objects both shouldStartDragging and onDragStart should return false
-     * @returns
+    /**
+     * If this method returns true a mouse move operation over a text selection
+     * will not prevent the native mouse event allowing the browser to start a drag operation.
+     * shouldStartDragging can be read 'do not prevent default for mouse move event'
+     * To prevent drag and drop between objects both shouldStartDragging and onDragStart should return false
+     * @returns
      */
     shouldStartDragging() {
       return this.draggableTextDelegate.isActive();
     }
 
-    /**
-     * @public override this method to control whether instance should/shouldn't become a drag source,
-     * @see also {@link DraggableTextDelegate#isActive}
-     * To prevent drag and drop between objects both shouldStartDragging and onDragStart should return false
-     * @returns {boolean} should handle event
+    /**
+     * @public override this method to control whether instance should/shouldn't become a drag source,
+     * @see also {@link DraggableTextDelegate#isActive}
+     * To prevent drag and drop between objects both shouldStartDragging and onDragStart should return false
+     * @returns {boolean} should handle event
      */
     onDragStart(e) {
       return this.draggableTextDelegate.onDragStart(e);
     }
 
-    /**
-     * @public override this method to control whether instance should/shouldn't become a drop target
+    /**
+     * @public override this method to control whether instance should/shouldn't become a drop target
      */
     canDrop(e) {
       return this.draggableTextDelegate.canDrop(e);
     }
 
-    /**
-     * Default handler for double click, select a word or enter overlay editing
+    /**
+     * Default handler for double click, select a word or enter overlay editing
      */
     doubleClickHandler(options) {
       // Check if we should enter overlay editing mode
@@ -24393,8 +24827,8 @@
       this.renderCursorOrSelection();
     }
 
-    /**
-     * Default handler for triple click, select a line
+    /**
+     * Default handler for triple click, select a line
      */
     tripleClickHandler(options) {
       if (!this.isEditing) {
@@ -24404,13 +24838,13 @@
       this.renderCursorOrSelection();
     }
 
-    /**
-     * Default event handler for the basic functionalities needed on _mouseDown
-     * can be overridden to do something different.
-     * Scope of this implementation is: find the click position, set selectionStart
-     * find selectionEnd, initialize the drawing of either cursor or selection area
-     * initializing a mousedDown on a text area will cancel fabricjs knowledge of
-     * current compositionMode. It will be set to false.
+    /**
+     * Default event handler for the basic functionalities needed on _mouseDown
+     * can be overridden to do something different.
+     * Scope of this implementation is: find the click position, set selectionStart
+     * find selectionEnd, initialize the drawing of either cursor or selection area
+     * initializing a mousedDown on a text area will cancel fabricjs knowledge of
+     * current compositionMode. It will be set to false.
      */
     _mouseDownHandler(_ref) {
       let {
@@ -24438,9 +24872,9 @@
       this.selected || (this.selected = alreadySelected || this.isEditing);
     }
 
-    /**
-     * standard handler for mouse up, overridable
-     * @private
+    /**
+     * standard handler for mouse up, overridable
+     * @private
      */
     mouseUpHandler(_ref2) {
       let {
@@ -24471,9 +24905,9 @@
       }
     }
 
-    /**
-     * Changes cursor location in a text depending on passed pointer (x/y) object
-     * @param {TPointerEvent} e Event object
+    /**
+     * Changes cursor location in a text depending on passed pointer (x/y) object
+     * @param {TPointerEvent} e Event object
      */
     setCursorByClick(e) {
       const newSelection = this.getSelectionStartFromPointer(e),
@@ -24491,10 +24925,10 @@
       }
     }
 
-    /**
-     * Returns index of a character corresponding to where an object was clicked
-     * @param {TPointerEvent} e Event object
-     * @return {Number} Index of a character
+    /**
+     * Returns index of a character corresponding to where an object was clicked
+     * @param {TPointerEvent} e Event object
+     * @return {Number} Index of a character
      */
     getSelectionStartFromPointer(e) {
       const mouseOffset = this.canvas.getScenePoint(e).transform(invertTransform(this.calcTransformMatrix())).add(new Point(-this._getLeftOffset(), -this._getTopOffset()));
@@ -24540,15 +24974,15 @@
     }
   }
 
-  /**
-   * Hit Testing and Cursor Positioning System
-   * 
-   * Maps pointer coordinates to text positions and provides cursor rectangles
-   * for interactive text editing with grapheme-aware boundaries.
+  /**
+   * Hit Testing and Cursor Positioning System
+   * 
+   * Maps pointer coordinates to text positions and provides cursor rectangles
+   * for interactive text editing with grapheme-aware boundaries.
    */
 
-  /**
-   * Hit test a point against laid out text to find insertion position
+  /**
+   * Hit test a point against laid out text to find insertion position
    */
   function hitTest(x, y, layout, options) {
     if (layout.lines.length === 0) {
@@ -24592,8 +25026,8 @@
     };
   }
 
-  /**
-   * Get cursor rectangle for a given insertion index
+  /**
+   * Get cursor rectangle for a given insertion index
    */
   function getCursorRect(insertionIndex, layout, options) {
     if (layout.lines.length === 0) {
@@ -24640,8 +25074,8 @@
 
   // Private helper functions
 
-  /**
-   * Find which line contains the given Y coordinate
+  /**
+   * Find which line contains the given Y coordinate
    */
   function findLineAtY(y, lines) {
     var _lines;
@@ -24664,8 +25098,8 @@
     };
   }
 
-  /**
-   * Find character position within a line at given X coordinate
+  /**
+   * Find character position within a line at given X coordinate
    */
   function findCharAtX(x, line, options) {
     if (line.bounds.length === 0) {
@@ -24771,8 +25205,8 @@
     };
   }
 
-  /**
-   * Calculate total insertion index from line and character indices
+  /**
+   * Calculate total insertion index from line and character indices
    */
   function calculateInsertionIndex(lineIndex, graphemeIndex, layout) {
     let insertionIndex = 0;
@@ -24791,8 +25225,8 @@
     return insertionIndex;
   }
 
-  /**
-   * Find line and grapheme position from insertion index
+  /**
+   * Find line and grapheme position from insertion index
    */
   function findPositionFromIndex(insertionIndex, layout) {
     let currentIndex = 0;
@@ -24834,8 +25268,8 @@
     };
   }
 
-  /**
-   * Calculate Y position of a line
+  /**
+   * Calculate Y position of a line
    */
   function calculateLineY(lineIndex, layout, options) {
     let y = 0;
@@ -24938,48 +25372,48 @@
 
   // @TODO this is not complete
 
-  /**
-   * @fires changed
-   * @fires selection:changed
-   * @fires editing:entered
-   * @fires editing:exited
-   * @fires dragstart
-   * @fires drag drag event firing on the drag source
-   * @fires dragend
-   * @fires copy
-   * @fires cut
-   * @fires paste
-   *
-   * #### Supported key combinations
-   * ```
-   *   Move cursor:                    left, right, up, down
-   *   Select character:               shift + left, shift + right
-   *   Select text vertically:         shift + up, shift + down
-   *   Move cursor by word:            alt + left, alt + right
-   *   Select words:                   shift + alt + left, shift + alt + right
-   *   Move cursor to line start/end:  cmd + left, cmd + right or home, end
-   *   Select till start/end of line:  cmd + shift + left, cmd + shift + right or shift + home, shift + end
-   *   Jump to start/end of text:      cmd + up, cmd + down
-   *   Select till start/end of text:  cmd + shift + up, cmd + shift + down or shift + pgUp, shift + pgDown
-   *   Delete character:               backspace
-   *   Delete word:                    alt + backspace
-   *   Delete line:                    cmd + backspace
-   *   Forward delete:                 delete
-   *   Copy text:                      ctrl/cmd + c
-   *   Paste text:                     ctrl/cmd + v
-   *   Cut text:                       ctrl/cmd + x
-   *   Select entire text:             ctrl/cmd + a
-   *   Quit editing                    tab or esc
-   * ```
-   *
-   * #### Supported mouse/touch combination
-   * ```
-   *   Position cursor:                click/touch
-   *   Create selection:               click/touch & drag
-   *   Create selection:               click & shift + click
-   *   Select word:                    double click
-   *   Select line:                    triple click
-   * ```
+  /**
+   * @fires changed
+   * @fires selection:changed
+   * @fires editing:entered
+   * @fires editing:exited
+   * @fires dragstart
+   * @fires drag drag event firing on the drag source
+   * @fires dragend
+   * @fires copy
+   * @fires cut
+   * @fires paste
+   *
+   * #### Supported key combinations
+   * ```
+   *   Move cursor:                    left, right, up, down
+   *   Select character:               shift + left, shift + right
+   *   Select text vertically:         shift + up, shift + down
+   *   Move cursor by word:            alt + left, alt + right
+   *   Select words:                   shift + alt + left, shift + alt + right
+   *   Move cursor to line start/end:  cmd + left, cmd + right or home, end
+   *   Select till start/end of line:  cmd + shift + left, cmd + shift + right or shift + home, shift + end
+   *   Jump to start/end of text:      cmd + up, cmd + down
+   *   Select till start/end of text:  cmd + shift + up, cmd + shift + down or shift + pgUp, shift + pgDown
+   *   Delete character:               backspace
+   *   Delete word:                    alt + backspace
+   *   Delete line:                    cmd + backspace
+   *   Forward delete:                 delete
+   *   Copy text:                      ctrl/cmd + c
+   *   Paste text:                     ctrl/cmd + v
+   *   Cut text:                       ctrl/cmd + x
+   *   Select entire text:             ctrl/cmd + a
+   *   Quit editing                    tab or esc
+   * ```
+   *
+   * #### Supported mouse/touch combination
+   * ```
+   *   Position cursor:                click/touch
+   *   Create selection:               click/touch & drag
+   *   Create selection:               click & shift + click
+   *   Select word:                    double click
+   *   Select line:                    triple click
+   * ```
    */
   class IText extends ITextClickBehavior {
     static getDefaults() {
@@ -24994,10 +25428,10 @@
       return type === 'itext' ? 'i-text' : type;
     }
 
-    /**
-     * Constructor
-     * @param {String} text Text string
-     * @param {Object} [options] Options object
+    /**
+     * Constructor
+     * @param {String} text Text string
+     * @param {Object} [options] Options object
      */
     constructor(text, options) {
       super(text, {
@@ -25007,11 +25441,11 @@
       this.initBehavior();
     }
 
-    /**
-     * While editing handle differently
-     * @private
-     * @param {string} key
-     * @param {*} value
+    /**
+     * While editing handle differently
+     * @private
+     * @param {string} key
+     * @param {*} value
      */
     _set(key, value) {
       if (this.isEditing && this._savedProps && key in this._savedProps) {
@@ -25026,28 +25460,28 @@
       return super._set(key, value);
     }
 
-    /**
-     * Sets selection start (left boundary of a selection)
-     * @param {Number} index Index to set selection start to
+    /**
+     * Sets selection start (left boundary of a selection)
+     * @param {Number} index Index to set selection start to
      */
     setSelectionStart(index) {
       index = Math.max(index, 0);
       this._updateAndFire('selectionStart', index);
     }
 
-    /**
-     * Sets selection end (right boundary of a selection)
-     * @param {Number} index Index to set selection end to
+    /**
+     * Sets selection end (right boundary of a selection)
+     * @param {Number} index Index to set selection end to
      */
     setSelectionEnd(index) {
       index = Math.min(index, this.text.length);
       this._updateAndFire('selectionEnd', index);
     }
 
-    /**
-     * @private
-     * @param {String} property 'selectionStart' or 'selectionEnd'
-     * @param {Number} index new position of property
+    /**
+     * @private
+     * @param {String} property 'selectionStart' or 'selectionEnd'
+     * @param {Number} index new position of property
      */
     _updateAndFire(property, index) {
       if (this[property] !== index) {
@@ -25057,9 +25491,9 @@
       this._updateTextarea();
     }
 
-    /**
-     * Fires the even of selection changed
-     * @private
+    /**
+     * Fires the even of selection changed
+     * @private
      */
     _fireSelectionChanged() {
       this.fire('selection:changed');
@@ -25068,25 +25502,25 @@
       });
     }
 
-    /**
-     * Initialize text dimensions. Render all text on given context
-     * or on a offscreen canvas to get the text width with measureText.
-     * Updates this.width and this.height with the proper values.
-     * Does not return dimensions.
-     * @private
+    /**
+     * Initialize text dimensions. Render all text on given context
+     * or on a offscreen canvas to get the text width with measureText.
+     * Updates this.width and this.height with the proper values.
+     * Does not return dimensions.
+     * @private
      */
     initDimensions() {
       this.isEditing && this.initDelayedCursor();
       super.initDimensions();
     }
 
-    /**
-     * Gets style of a current selection/cursor (at the start position)
-     * if startIndex or endIndex are not provided, selectionStart or selectionEnd will be used.
-     * @param {Number} startIndex Start index to get styles at
-     * @param {Number} endIndex End index to get styles at, if not specified selectionEnd or startIndex + 1
-     * @param {Boolean} [complete] get full style or not
-     * @return {Array} styles an array with one, zero or more Style objects
+    /**
+     * Gets style of a current selection/cursor (at the start position)
+     * if startIndex or endIndex are not provided, selectionStart or selectionEnd will be used.
+     * @param {Number} startIndex Start index to get styles at
+     * @param {Number} endIndex End index to get styles at, if not specified selectionEnd or startIndex + 1
+     * @param {Boolean} [complete] get full style or not
+     * @return {Array} styles an array with one, zero or more Style objects
      */
     getSelectionStyles() {
       let startIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.selectionStart || 0;
@@ -25095,11 +25529,11 @@
       return super.getSelectionStyles(startIndex, endIndex, complete);
     }
 
-    /**
-     * Sets style of a current selection, if no selection exist, do not set anything.
-     * @param {Object} [styles] Styles object
-     * @param {Number} [startIndex] Start index to get styles at
-     * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1
+    /**
+     * Sets style of a current selection, if no selection exist, do not set anything.
+     * @param {Object} [styles] Styles object
+     * @param {Number} [startIndex] Start index to get styles at
+     * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1
      */
     setSelectionStyles(styles) {
       let startIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.selectionStart || 0;
@@ -25107,10 +25541,10 @@
       return super.setSelectionStyles(styles, startIndex, endIndex);
     }
 
-    /**
-     * Returns 2d representation (lineIndex and charIndex) of cursor (or selection start)
-     * @param {Number} [selectionStart] Optional index. When not given, current selectionStart is used.
-     * @param {Boolean} [skipWrapping] consider the location for unwrapped lines. useful to manage styles.
+    /**
+     * Returns 2d representation (lineIndex and charIndex) of cursor (or selection start)
+     * @param {Number} [selectionStart] Optional index. When not given, current selectionStart is used.
+     * @param {Boolean} [skipWrapping] consider the location for unwrapped lines. useful to manage styles.
      */
     get2DCursorLocation() {
       let selectionStart = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.selectionStart;
@@ -25118,9 +25552,9 @@
       return super.get2DCursorLocation(selectionStart, skipWrapping);
     }
 
-    /**
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
      */
     render(ctx) {
       super.render(ctx);
@@ -25130,9 +25564,9 @@
       this.renderCursorOrSelection();
     }
 
-    /**
-     * @override block cursor/selection logic while rendering the exported canvas
-     * @todo this workaround should be replaced with a more robust solution
+    /**
+     * @override block cursor/selection logic while rendering the exported canvas
+     * @todo this workaround should be replaced with a more robust solution
      */
     toCanvasElement(options) {
       const isEditing = this.isEditing;
@@ -25142,9 +25576,9 @@
       return canvas;
     }
 
-    /**
-     * Renders cursor or selection (depending on what exists)
-     * it does on the contextTop. If contextTop is not available, do nothing.
+    /**
+     * Renders cursor or selection (depending on what exists)
+     * it does on the contextTop. If contextTop is not available, do nothing.
      */
     renderCursorOrSelection() {
       if (!this.isEditing || !this.canvas) {
@@ -25200,12 +25634,12 @@
       ctx.restore();
     }
 
-    /**
-     * Finds and returns an array of clip paths that are applied to the parent
-     * group(s) of the current FabricObject instance. The object's hierarchy is
-     * traversed upwards (from the current object towards the root of the canvas),
-     * checking each parent object for the presence of a `clipPath` that is not
-     * absolutely positioned.
+    /**
+     * Finds and returns an array of clip paths that are applied to the parent
+     * group(s) of the current FabricObject instance. The object's hierarchy is
+     * traversed upwards (from the current object towards the root of the canvas),
+     * checking each parent object for the presence of a `clipPath` that is not
+     * absolutely positioned.
      */
     findAncestorsWithClipPath() {
       const clipPathAncestors = [];
@@ -25220,13 +25654,13 @@
       return clipPathAncestors;
     }
 
-    /**
-     * Returns cursor boundaries (left, top, leftOffset, topOffset)
-     * left/top are left/top of entire text box
-     * leftOffset/topOffset are offset from that left/top point of a text box
-     * @private
-     * @param {number} [index] index from start
-     * @param {boolean} [skipCaching]
+    /**
+     * Returns cursor boundaries (left, top, leftOffset, topOffset)
+     * left/top are left/top of entire text box
+     * leftOffset/topOffset are offset from that left/top point of a text box
+     * @private
+     * @param {number} [index] index from start
+     * @param {boolean} [skipCaching]
      */
     _getCursorBoundaries() {
       let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.selectionStart;
@@ -25240,11 +25674,11 @@
       return this._getCursorBoundariesOriginal(index, skipCaching);
     }
 
-    /**
-     * Caches and returns cursor left/top offset relative to instance's center point
-     * @private
-     * @param {number} index index from start
-     * @param {boolean} [skipCaching]
+    /**
+     * Caches and returns cursor left/top offset relative to instance's center point
+     * @private
+     * @param {number} index index from start
+     * @param {boolean} [skipCaching]
      */
     _getCursorBoundariesOffsets(index, skipCaching) {
       if (skipCaching) {
@@ -25256,9 +25690,9 @@
       return this.cursorOffsetCache = this.__getCursorBoundariesOffsets(index);
     }
 
-    /**
-     * Enhanced cursor boundaries using advanced hit testing when available
-     * @private
+    /**
+     * Enhanced cursor boundaries using advanced hit testing when available
+     * @private
      */
     _getCursorBoundariesAdvanced(index) {
       if (!this.enableAdvancedLayout || !this._layoutTextAdvanced) {
@@ -25274,9 +25708,9 @@
       };
     }
 
-    /**
-     * Enhanced selection start from pointer using BiDi-aware hit testing
-     * @override
+    /**
+     * Enhanced selection start from pointer using BiDi-aware hit testing
+     * @override
      */
     getSelectionStartFromPointer(e) {
       if (!this.enableAdvancedLayout || !this._layoutTextAdvanced) {
@@ -25290,9 +25724,9 @@
       return Math.min(hitResult.charIndex, this._text.length);
     }
 
-    /**
-     * Original cursor boundaries implementation
-     * @private
+    /**
+     * Original cursor boundaries implementation
+     * @private
      */
     _getCursorBoundariesOriginal(index, skipCaching) {
       const left = this._getLeftOffset(),
@@ -25306,10 +25740,10 @@
       };
     }
 
-    /**
-     * Calculates cursor left/top offset relative to instance's center point
-     * @private
-     * @param {number} index index from start
+    /**
+     * Calculates cursor left/top offset relative to instance's center point
+     * @private
+     * @param {number} index index from start
      */
     __getCursorBoundariesOffsets(index) {
       let topOffset = 0,
@@ -25343,29 +25777,29 @@
       return boundaries;
     }
 
-    /**
-     * Renders cursor on context Top, outside the animation cycle, on request
-     * Used for the drag/drop effect.
-     * If contextTop is not available, do nothing.
+    /**
+     * Renders cursor on context Top, outside the animation cycle, on request
+     * Used for the drag/drop effect.
+     * If contextTop is not available, do nothing.
      */
     renderCursorAt(selectionStart) {
       this._renderCursor(this.canvas.contextTop, this._getCursorBoundaries(selectionStart, true), selectionStart);
     }
 
-    /**
-     * Renders cursor
-     * @param {Object} boundaries
-     * @param {CanvasRenderingContext2D} ctx transformed context to draw on
+    /**
+     * Renders cursor
+     * @param {Object} boundaries
+     * @param {CanvasRenderingContext2D} ctx transformed context to draw on
      */
     renderCursor(ctx, boundaries) {
       this._renderCursor(ctx, boundaries, this.selectionStart);
     }
 
-    /**
-     * Return the data needed to render the cursor for given selection start
-     * The left,top are relative to the object, while width and height are prescaled
-     * to look think with canvas zoom and object scaling,
-     * so they depend on canvas and object scaling
+    /**
+     * Return the data needed to render the cursor for given selection start
+     * The left,top are relative to the object, while width and height are prescaled
+     * to look think with canvas zoom and object scaling,
+     * so they depend on canvas and object scaling
      */
     getCursorRenderingData() {
       let selectionStart = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.selectionStart;
@@ -25388,9 +25822,9 @@
       };
     }
 
-    /**
-     * Render the cursor at the given selectionStart.
-     * @param {CanvasRenderingContext2D} ctx transformed context to draw on
+    /**
+     * Render the cursor at the given selectionStart.
+     * @param {CanvasRenderingContext2D} ctx transformed context to draw on
      */
     _renderCursor(ctx, boundaries, selectionStart) {
       const {
@@ -25406,10 +25840,10 @@
       ctx.fillRect(left, top, width, height);
     }
 
-    /**
-     * Renders text selection
-     * @param {Object} boundaries Object with left/top/leftOffset/topOffset
-     * @param {CanvasRenderingContext2D} ctx transformed context to draw on
+    /**
+     * Renders text selection
+     * @param {Object} boundaries Object with left/top/leftOffset/topOffset
+     * @param {CanvasRenderingContext2D} ctx transformed context to draw on
      */
     renderSelection(ctx, boundaries) {
       const selection = {
@@ -25419,8 +25853,8 @@
       this._renderSelection(ctx, selection, boundaries);
     }
 
-    /**
-     * Renders drag start text selection
+    /**
+     * Renders drag start text selection
      */
     renderDragSourceEffect() {
       const dragStartSelection = this.draggableTextDelegate.getDragStartSelection();
@@ -25431,12 +25865,12 @@
       this.renderCursorAt(dragSelection);
     }
 
-    /**
-     * Renders text selection
-     * @private
-     * @param {{ selectionStart: number, selectionEnd: number }} selection
-     * @param {Object} boundaries Object with left/top/leftOffset/topOffset
-     * @param {CanvasRenderingContext2D} ctx transformed context to draw on
+    /**
+     * Renders text selection
+     * @private
+     * @param {{ selectionStart: number, selectionEnd: number }} selection
+     * @param {Object} boundaries Object with left/top/leftOffset/topOffset
+     * @param {CanvasRenderingContext2D} ctx transformed context to draw on
      */
     _renderSelection(ctx, selection, boundaries) {
       const selectionStart = selection.selectionStart,
@@ -25498,34 +25932,34 @@
       }
     }
 
-    /**
-     * High level function to know the height of the cursor.
-     * the currentChar is the one that precedes the cursor
-     * Returns fontSize of char at the current cursor
-     * Unused from the library, is for the end user
-     * @return {Number} Character font size
+    /**
+     * High level function to know the height of the cursor.
+     * the currentChar is the one that precedes the cursor
+     * Returns fontSize of char at the current cursor
+     * Unused from the library, is for the end user
+     * @return {Number} Character font size
      */
     getCurrentCharFontSize() {
       const cp = this._getCurrentCharIndex();
       return this.getValueOfPropertyAt(cp.l, cp.c, 'fontSize');
     }
 
-    /**
-     * High level function to know the color of the cursor.
-     * the currentChar is the one that precedes the cursor
-     * Returns color (fill) of char at the current cursor
-     * if the text object has a pattern or gradient for filler, it will return that.
-     * Unused by the library, is for the end user
-     * @return {String | TFiller} Character color (fill)
+    /**
+     * High level function to know the color of the cursor.
+     * the currentChar is the one that precedes the cursor
+     * Returns color (fill) of char at the current cursor
+     * if the text object has a pattern or gradient for filler, it will return that.
+     * Unused by the library, is for the end user
+     * @return {String | TFiller} Character color (fill)
      */
     getCurrentCharColor() {
       const cp = this._getCurrentCharIndex();
       return this.getValueOfPropertyAt(cp.l, cp.c, FILL);
     }
 
-    /**
-     * Returns the cursor position for the getCurrent.. functions
-     * @private
+    /**
+     * Returns the cursor position for the getCurrent.. functions
+     * @private
      */
     _getCurrentCharIndex() {
       const cursorPosition = this.get2DCursorLocation(this.selectionStart, true),
@@ -25541,52 +25975,52 @@
       super.dispose();
     }
   }
-  /**
-   * Index where text selection starts (or where cursor is when there is no selection)
-   * @type Number
+  /**
+   * Index where text selection starts (or where cursor is when there is no selection)
+   * @type Number
    */
-  /**
-   * Index where text selection ends
-   * @type Number
+  /**
+   * Index where text selection ends
+   * @type Number
    */
-  /**
-   * Color of text selection
-   * @type String
+  /**
+   * Color of text selection
+   * @type String
    */
-  /**
-   * Indicates whether text is in editing mode
-   * @type Boolean
+  /**
+   * Indicates whether text is in editing mode
+   * @type Boolean
    */
-  /**
-   * Indicates whether a text can be edited
-   * @type Boolean
+  /**
+   * Indicates whether a text can be edited
+   * @type Boolean
    */
-  /**
-   * Border color of text object while it's in editing mode
-   * @type String
+  /**
+   * Border color of text object while it's in editing mode
+   * @type String
    */
-  /**
-   * Width of cursor (in px)
-   * @type Number
+  /**
+   * Width of cursor (in px)
+   * @type Number
    */
-  /**
-   * Color of text cursor color in editing mode.
-   * if not set (default) will take color from the text.
-   * if set to a color value that fabric can understand, it will
-   * be used instead of the color of the text at the current position.
-   * @type String
+  /**
+   * Color of text cursor color in editing mode.
+   * if not set (default) will take color from the text.
+   * if set to a color value that fabric can understand, it will
+   * be used instead of the color of the text at the current position.
+   * @type String
    */
-  /**
-   * Delay between cursor blink (in ms)
-   * @type Number
+  /**
+   * Delay between cursor blink (in ms)
+   * @type Number
    */
-  /**
-   * Duration of cursor fade in (in ms)
-   * @type Number
+  /**
+   * Duration of cursor fade in (in ms)
+   * @type Number
    */
-  /**
-   * Indicates whether internal text char widths can be cached
-   * @type Boolean
+  /**
+   * Indicates whether internal text char widths can be cached
+   * @type Boolean
    */
   _defineProperty(IText, "ownDefaults", iTextDefaultValues);
   _defineProperty(IText, "type", 'IText');
@@ -25608,11 +26042,11 @@
 
   // @TODO this is not complete
 
-  /**
-   * Textbox class, based on IText, allows the user to resize the text rectangle
-   * and wraps lines automatically. Textboxes have their Y scaling locked, the
-   * user can only change width. Height is adjusted automatically based on the
-   * wrapping of lines.
+  /**
+   * Textbox class, based on IText, allows the user to resize the text rectangle
+   * and wraps lines automatically. Textboxes have their Y scaling locked, the
+   * user can only change width. Height is adjusted automatically based on the
+   * wrapping of lines.
    */
   class Textbox extends IText {
     static getDefaults() {
@@ -25622,10 +26056,10 @@
       };
     }
 
-    /**
-     * Constructor
-     * @param {String} text Text string
-     * @param {Object} [options] Options object
+    /**
+     * Constructor
+     * @param {String} text Text string
+     * @param {Object} [options] Options object
      */
     constructor(text, options) {
       super(text, {
@@ -25635,10 +26069,10 @@
       this.initializeEventListeners();
     }
 
-    /**
-     * Creates the default control object.
-     * If you prefer to have on instance of controls shared among all objects
-     * make this function return an empty object and add controls to the ownDefaults object
+    /**
+     * Creates the default control object.
+     * If you prefer to have on instance of controls shared among all objects
+     * make this function return an empty object and add controls to the ownDefaults object
      */
     static createControls() {
       return {
@@ -25646,11 +26080,11 @@
       };
     }
 
-    /**
-     * Unlike superclass's version of this function, Textbox does not update
-     * its width.
-     * @private
-     * @override
+    /**
+     * Unlike superclass's version of this function, Textbox does not update
+     * its width.
+     * @private
+     * @override
      */
     initDimensions() {
       if (!this.initialized) {
@@ -25679,9 +26113,9 @@
       this.height = this.calcTextHeight();
     }
 
-    /**
-     * Advanced dimensions calculation using new layout engine
-     * @private
+    /**
+     * Advanced dimensions calculation using new layout engine
+     * @private
      */
     initDimensionsAdvanced() {
       if (!this.initialized) {
@@ -25736,9 +26170,9 @@
       this.dirty = true;
     }
 
-    /**
-     * Generate style map from new layout format
-     * @private
+    /**
+     * Generate style map from new layout format
+     * @private
      */
     _generateStyleMapFromLayout(layout) {
       const map = {};
@@ -25760,12 +26194,12 @@
       return map;
     }
 
-    /**
-     * Generate an object that translates the style object so that it is
-     * broken up by visual lines (new lines and automatic wrapping).
-     * The original text styles object is broken up by actual lines (new lines only),
-     * which is only sufficient for Text / IText
-     * @private
+    /**
+     * Generate an object that translates the style object so that it is
+     * broken up by visual lines (new lines and automatic wrapping).
+     * The original text styles object is broken up by actual lines (new lines only),
+     * which is only sufficient for Text / IText
+     * @private
      */
     _generateStyleMap(textInfo) {
       let realLineCount = 0,
@@ -25792,10 +26226,10 @@
       return map;
     }
 
-    /**
-     * Returns true if object has a style property or has it on a specified line
-     * @param {Number} lineIndex
-     * @return {Boolean}
+    /**
+     * Returns true if object has a style property or has it on a specified line
+     * @param {Number} lineIndex
+     * @return {Boolean}
      */
     styleHas(property, lineIndex) {
       if (this._styleMap && !this.isWrapping) {
@@ -25807,10 +26241,10 @@
       return super.styleHas(property, lineIndex);
     }
 
-    /**
-     * Returns true if object has no styling or no styling in a line
-     * @param {Number} lineIndex , lineIndex is on wrapped lines.
-     * @return {Boolean}
+    /**
+     * Returns true if object has no styling or no styling in a line
+     * @param {Number} lineIndex , lineIndex is on wrapped lines.
+     * @return {Boolean}
      */
     isEmptyStyles(lineIndex) {
       if (!this.styles) {
@@ -25847,11 +26281,11 @@
       return true;
     }
 
-    /**
-     * @protected
-     * @param {Number} lineIndex
-     * @param {Number} charIndex
-     * @return {TextStyleDeclaration} a style object reference to the existing one or a new empty object when undefined
+    /**
+     * @protected
+     * @param {Number} lineIndex
+     * @param {Number} charIndex
+     * @return {TextStyleDeclaration} a style object reference to the existing one or a new empty object when undefined
      */
     _getStyleDeclaration(lineIndex, charIndex) {
       if (this._styleMap && !this.isWrapping) {
@@ -25865,59 +26299,59 @@
       return super._getStyleDeclaration(lineIndex, charIndex);
     }
 
-    /**
-     * @param {Number} lineIndex
-     * @param {Number} charIndex
-     * @param {Object} style
-     * @private
+    /**
+     * @param {Number} lineIndex
+     * @param {Number} charIndex
+     * @param {Object} style
+     * @private
      */
     _setStyleDeclaration(lineIndex, charIndex, style) {
       const map = this._styleMap[lineIndex];
       super._setStyleDeclaration(map.line, map.offset + charIndex, style);
     }
 
-    /**
-     * @param {Number} lineIndex
-     * @param {Number} charIndex
-     * @private
+    /**
+     * @param {Number} lineIndex
+     * @param {Number} charIndex
+     * @private
      */
     _deleteStyleDeclaration(lineIndex, charIndex) {
       const map = this._styleMap[lineIndex];
       super._deleteStyleDeclaration(map.line, map.offset + charIndex);
     }
 
-    /**
-     * probably broken need a fix
-     * Returns the real style line that correspond to the wrapped lineIndex line
-     * Used just to verify if the line does exist or not.
-     * @param {Number} lineIndex
-     * @returns {Boolean} if the line exists or not
-     * @private
+    /**
+     * probably broken need a fix
+     * Returns the real style line that correspond to the wrapped lineIndex line
+     * Used just to verify if the line does exist or not.
+     * @param {Number} lineIndex
+     * @returns {Boolean} if the line exists or not
+     * @private
      */
     _getLineStyle(lineIndex) {
       const map = this._styleMap[lineIndex];
       return !!this.styles[map.line];
     }
 
-    /**
-     * Set the line style to an empty object so that is initialized
-     * @param {Number} lineIndex
-     * @param {Object} style
-     * @private
+    /**
+     * Set the line style to an empty object so that is initialized
+     * @param {Number} lineIndex
+     * @param {Object} style
+     * @private
      */
     _setLineStyle(lineIndex) {
       const map = this._styleMap[lineIndex];
       super._setLineStyle(map.line);
     }
 
-    /**
-     * Wraps text using the 'width' property of Textbox. First this function
-     * splits text on newlines, so we preserve newlines entered by the user.
-     * Then it wraps each line using the width of the Textbox by calling
-     * _wrapLine().
-     * @param {Array} lines The string array of text that is split into lines
-     * @param {Number} desiredWidth width you want to wrap to
-     * @returns {Array} Array of lines
+    /**
+     * Wraps text using the 'width' property of Textbox. First this function
+     * splits text on newlines, so we preserve newlines entered by the user.
+     * Then it wraps each line using the width of the Textbox by calling
+     * _wrapLine().
+     * @param {Array} lines The string array of text that is split into lines
+     * @param {Number} desiredWidth width you want to wrap to
+     * @returns {Array} Array of lines
      */
     _wrapText(lines, desiredWidth) {
       this.isWrapping = true;
@@ -25931,12 +26365,12 @@
       return wrapped;
     }
 
-    /**
-     * For each line of text terminated by an hard line stop,
-     * measure each word width and extract the largest word from all.
-     * The returned words here are the one that at the end will be rendered.
-     * @param {string[]} lines the lines we need to measure
-     *
+    /**
+     * For each line of text terminated by an hard line stop,
+     * measure each word width and extract the largest word from all.
+     * The returned words here are the one that at the end will be rendered.
+     * @param {string[]} lines the lines we need to measure
+     *
      */
     getGraphemeDataForRender(lines) {
       const splitByGrapheme = this.splitByGrapheme,
@@ -25969,17 +26403,17 @@
       };
     }
 
-    /**
-     * Helper function to measure a string of text, given its lineIndex and charIndex offset
-     * It gets called when charBounds are not available yet.
-     * Override if necessary
-     * Use with {@link Textbox#wordSplit}
-     *
-     * @param {CanvasRenderingContext2D} ctx
-     * @param {String} text
-     * @param {number} lineIndex
-     * @param {number} charOffset
-     * @returns {number}
+    /**
+     * Helper function to measure a string of text, given its lineIndex and charIndex offset
+     * It gets called when charBounds are not available yet.
+     * Override if necessary
+     * Use with {@link Textbox#wordSplit}
+     *
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {String} text
+     * @param {number} lineIndex
+     * @param {number} charOffset
+     * @returns {number}
      */
     _measureWord(word, lineIndex) {
       let charOffset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
@@ -25994,26 +26428,26 @@
       return width;
     }
 
-    /**
-     * Override this method to customize word splitting
-     * Use with {@link Textbox#_measureWord}
-     * @param {string} value
-     * @returns {string[]} array of words
+    /**
+     * Override this method to customize word splitting
+     * Use with {@link Textbox#_measureWord}
+     * @param {string} value
+     * @returns {string[]} array of words
      */
     wordSplit(value) {
       return value.split(this._wordJoiners);
     }
 
-    /**
-     * Wraps a line of text using the width of the Textbox as desiredWidth
-     * and leveraging the known width o words from GraphemeData
-     * @private
-     * @param {Number} lineIndex
-     * @param {Number} desiredWidth width you want to wrap the line to
-     * @param {GraphemeData} graphemeData an object containing all the lines' words width.
-     * @param {Number} reservedSpace space to remove from wrapping for custom functionalities
-     * @returns {Array} Array of line(s) into which the given text is wrapped
-     * to.
+    /**
+     * Wraps a line of text using the width of the Textbox as desiredWidth
+     * and leveraging the known width o words from GraphemeData
+     * @private
+     * @param {Number} lineIndex
+     * @param {Number} desiredWidth width you want to wrap the line to
+     * @param {GraphemeData} graphemeData an object containing all the lines' words width.
+     * @param {Number} reservedSpace space to remove from wrapping for custom functionalities
+     * @returns {Array} Array of line(s) into which the given text is wrapped
+     * to.
      */
     _wrapLine(lineIndex, desiredWidth, _ref) {
       let {
@@ -26071,11 +26505,11 @@
       return graphemeLines;
     }
 
-    /**
-     * Detect if the text line is ended with an hard break
-     * text and itext do not have wrapping, return false
-     * @param {Number} lineIndex text to split
-     * @return {Boolean}
+    /**
+     * Detect if the text line is ended with an hard break
+     * text and itext do not have wrapping, return false
+     * @param {Number} lineIndex text to split
+     * @return {Boolean}
      */
     isEndOfWrapping(lineIndex) {
       if (!this._styleMap[lineIndex + 1]) {
@@ -26089,12 +26523,12 @@
       return false;
     }
 
-    /**
-     * Detect if a line has a linebreak and so we need to account for it when moving
-     * and counting style.
-     * This is important only for splitByGrapheme at the end of wrapping.
-     * If we are not wrapping the offset is always 1
-     * @return Number
+    /**
+     * Detect if a line has a linebreak and so we need to account for it when moving
+     * and counting style.
+     * This is important only for splitByGrapheme at the end of wrapping.
+     * If we are not wrapping the offset is always 1
+     * @return Number
      */
     missingNewlineOffset(lineIndex, skipWrapping) {
       if (this.splitByGrapheme && !skipWrapping) {
@@ -26103,12 +26537,12 @@
       return 1;
     }
 
-    /**
-     * Gets lines of text to render in the Textbox. This function calculates
-     * text wrapping on the fly every time it is called.
-     * @param {String} text text to split
-     * @returns {Array} Array of lines in the Textbox.
-     * @override
+    /**
+     * Gets lines of text to render in the Textbox. This function calculates
+     * text wrapping on the fly every time it is called.
+     * @param {String} text text to split
+     * @returns {Array} Array of lines in the Textbox.
+     * @override
      */
     _splitTextIntoLines(text) {
       const newText = super._splitTextIntoLines(text),
@@ -26140,9 +26574,9 @@
       }
     }
 
-    /**
-     * Initialize event listeners for safety snap functionality
-     * @private
+    /**
+     * Initialize event listeners for safety snap functionality
+     * @private
      */
     initializeEventListeners() {
       var _this$canvas;
@@ -26185,12 +26619,12 @@
       });
     }
 
-    /**
-     * Safety snap to prevent glyph clipping after manual resize.
-     * Similar to Polotno - checks if any glyphs are too close to edges
-     * and automatically expands width if needed.
-     * @private
-     * @param resizeOrigin - Which side was used for resizing ('left' or 'right')
+    /**
+     * Safety snap to prevent glyph clipping after manual resize.
+     * Similar to Polotno - checks if any glyphs are too close to edges
+     * and automatically expands width if needed.
+     * @private
+     * @param resizeOrigin - Which side was used for resizing ('left' or 'right')
      */
     safetySnapWidth(resizeOrigin) {
       // For Textbox objects, we always want to check for clipping regardless of isWrapping flag
@@ -26257,31 +26691,31 @@
       }
     }
 
-    /**
-     * Returns object representation of an instance
-     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
-     * @return {Object} object representation of an instance
+    /**
+     * Returns object representation of an instance
+     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
+     * @return {Object} object representation of an instance
      */
     toObject() {
       let propertiesToInclude = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       return super.toObject(['minWidth', 'splitByGrapheme', ...propertiesToInclude]);
     }
   }
-  /**
-   * Minimum width of textbox, in pixels.
-   * @type Number
-   */
-  /**
-   * Minimum calculated width of a textbox, in pixels.
-   * fixed to 2 so that an empty textbox cannot go to 0
-   * and is still selectable without text.
-   * @type Number
-   */
-  /**
-   * Use this boolean property in order to split strings that have no white space concept.
-   * this is a cheap way to help with chinese/japanese
-   * @type Boolean
-   * @since 2.6.0
+  /**
+   * Minimum width of textbox, in pixels.
+   * @type Number
+   */
+  /**
+   * Minimum calculated width of a textbox, in pixels.
+   * fixed to 2 so that an empty textbox cannot go to 0
+   * and is still selectable without text.
+   * @type Number
+   */
+  /**
+   * Use this boolean property in order to split strings that have no white space concept.
+   * this is a cheap way to help with chinese/japanese
+   * @type Boolean
+   * @since 2.6.0
    */
   _defineProperty(Textbox, "type", 'Textbox');
   _defineProperty(Textbox, "textLayoutProperties", [...IText.textLayoutProperties, 'width']);