fabric 7.0.0 → 7.2.0

package/dist/index.js

@@ -362,7 +362,7 @@
   }
   const cache = new Cache();
 
-  var version = "7.0.0";
+  var version = "7.2.0";
 
   // use this syntax so babel plugin see this import here
   const VERSION = version;
@@ -2197,6 +2197,111 @@
     patternQuality: 'best'
   };
 
+  /**
+   * Capitalizes a string
+   * @param {String} string String to capitalize
+   * @param {Boolean} [firstLetterOnly] If true only first letter is capitalized
+   * and other letters stay untouched, if false first letter is capitalized
+   * and other letters are converted to lowercase.
+   * @return {String} Capitalized version of a string
+   */
+  const capitalize = function (string) {
+    let firstLetterOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    return `${string.charAt(0).toUpperCase()}${firstLetterOnly ? string.slice(1) : string.slice(1).toLowerCase()}`;
+  };
+
+  /**
+   * Escapes XML in a string
+   * @param {String} string String to escape
+   * @return {String} Escaped version of a string
+   */
+  const escapeXml = stringOrNumber => stringOrNumber.toString().replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&apos;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  let segmenter;
+  const getSegmenter = () => {
+    if (!segmenter) {
+      segmenter = 'Intl' in getFabricWindow() && 'Segmenter' in Intl && new Intl.Segmenter(undefined, {
+        granularity: 'grapheme'
+      });
+    }
+    return segmenter;
+  };
+
+  /**
+   * Divide a string in the user perceived single units
+   * @param {String} textstring String to escape
+   * @return {Array} array containing the graphemes
+   */
+  const graphemeSplit = textstring => {
+    segmenter || getSegmenter();
+    if (segmenter) {
+      const segments = segmenter.segment(textstring);
+      return Array.from(segments).map(_ref => {
+        let {
+          segment
+        } = _ref;
+        return segment;
+      });
+    }
+
+    //Fallback
+    return graphemeSplitImpl(textstring);
+  };
+  const graphemeSplitImpl = textstring => {
+    const graphemes = [];
+    for (let i = 0, chr; i < textstring.length; i++) {
+      if ((chr = getWholeChar(textstring, i)) === false) {
+        continue;
+      }
+      graphemes.push(chr);
+    }
+    return graphemes;
+  };
+
+  // taken from mdn in the charAt doc page.
+  const getWholeChar = (str, i) => {
+    const code = str.charCodeAt(i);
+    if (isNaN(code)) {
+      return ''; // Position not found
+    }
+    if (code < 0xd800 || code > 0xdfff) {
+      return str.charAt(i);
+    }
+
+    // High surrogate (could change last hex to 0xDB7F to treat high private
+    // surrogates as single characters)
+    if (0xd800 <= code && code <= 0xdbff) {
+      if (str.length <= i + 1) {
+        throw 'High surrogate without following low surrogate';
+      }
+      const next = str.charCodeAt(i + 1);
+      if (0xdc00 > next || next > 0xdfff) {
+        throw 'High surrogate without following low surrogate';
+      }
+      return str.charAt(i) + str.charAt(i + 1);
+    }
+    // Low surrogate (0xDC00 <= code && code <= 0xDFFF)
+    if (i === 0) {
+      throw 'Low surrogate without preceding high surrogate';
+    }
+    const prev = str.charCodeAt(i - 1);
+
+    // (could change last hex to 0xDB7F to treat high private
+    // surrogates as single characters)
+    if (0xd800 > prev || prev > 0xdbff) {
+      throw 'Low surrogate without preceding high surrogate';
+    }
+    // We can pass over low surrogates now as the second component
+    // in a pair which we have already processed
+    return false;
+  };
+
+  var lang_string = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    capitalize: capitalize,
+    escapeXml: escapeXml,
+    graphemeSplit: graphemeSplit
+  });
+
   /**
    * Having both options in TCanvasSizeOptions set to true transform the call in a calcOffset
    * Better try to restrict with types to avoid confusion.
@@ -2966,7 +3071,8 @@
       this._setSVGPreamble(markup, options);
       this._setSVGHeader(markup, options);
       if (this.clipPath) {
-        markup.push(`<g clip-path="url(#${this.clipPath.clipPathId})" >\n`);
+        var _this$clipPath$clipPa;
+        markup.push(`<g clip-path="url(#${escapeXml((_this$clipPath$clipPa = this.clipPath.clipPathId) !== null && _this$clipPath$clipPa !== void 0 ? _this$clipPath$clipPa : '')})" >\n`);
       }
       this._setSVGBgOverlayColor(markup, 'background');
       this._setSVGBgOverlayImage(markup, 'backgroundImage', reviver);
@@ -3645,20 +3751,6 @@
     return t;
   };
 
-  const fireEvent = (eventName, options) => {
-    var _target$canvas;
-    const {
-      transform: {
-        target
-      }
-    } = options;
-    (_target$canvas = target.canvas) === null || _target$canvas === void 0 || _target$canvas.fire(`object:${eventName}`, {
-      ...options,
-      target
-    });
-    target.fire(eventName, options);
-  };
-
   const originOffset = {
     left: -0.5,
     top: -0.5,
@@ -3861,33 +3953,6 @@
     return localPoint;
   }
 
-  /**
-   * Action handler
-   * @private
-   * @param {Event} eventData javascript event that is doing the transform
-   * @param {Object} transform javascript object containing a series of information around the current transform
-   * @param {number} x current mouse x position, canvas normalized
-   * @param {number} y current mouse y position, canvas normalized
-   * @return {Boolean} true if the translation occurred
-   */
-  const dragHandler = (eventData, transform, x, y) => {
-    const {
-        target,
-        offsetX,
-        offsetY
-      } = transform,
-      newLeft = x - offsetX,
-      newTop = y - offsetY,
-      moveX = !isLocked(target, 'lockMovementX') && target.left !== newLeft,
-      moveY = !isLocked(target, 'lockMovementY') && target.top !== newTop;
-    moveX && target.set(LEFT, newLeft);
-    moveY && target.set(TOP, newTop);
-    if (moveX || moveY) {
-      fireEvent(MOVING, commonEventInfo(eventData, transform, x, y));
-    }
-    return moveX || moveY;
-  };
-
   const normalizeWs = value => value.replace(/\s+/g, ' ');
 
   /**
@@ -4634,7 +4699,7 @@
     if (!value) {
       colorValue = 'none';
     } else if (value.toLive) {
-      colorValue = `url(#SVGID_${value.id})`;
+      colorValue = `url(#SVGID_${escapeXml(value.id)})`;
     } else {
       const color = new Color(value),
         opacity = color.getAlpha();
@@ -4687,7 +4752,7 @@
         filter = skipShadow ? '' : this.getSvgFilter(),
         fill = colorPropToSVG(FILL, this.fill),
         stroke = colorPropToSVG(STROKE, this.stroke);
-      return [stroke, 'stroke-width: ', strokeWidth, '; ', 'stroke-dasharray: ', strokeDashArray, '; ', 'stroke-linecap: ', strokeLineCap, '; ', 'stroke-dashoffset: ', strokeDashOffset, '; ', 'stroke-linejoin: ', strokeLineJoin, '; ', 'stroke-miterlimit: ', strokeMiterLimit, '; ', fill, 'fill-rule: ', fillRule, '; ', 'opacity: ', opacity, ';', filter, visibility].join('');
+      return [stroke, 'stroke-width: ', strokeWidth, '; ', 'stroke-dasharray: ', strokeDashArray, '; ', 'stroke-linecap: ', strokeLineCap, '; ', 'stroke-dashoffset: ', strokeDashOffset, '; ', 'stroke-linejoin: ', strokeLineJoin, '; ', 'stroke-miterlimit: ', strokeMiterLimit, '; ', fill, 'fill-rule: ', fillRule, '; ', 'opacity: ', opacity, ';', filter, visibility].map(v => escapeXml(v)).join('');
     }
 
     /**
@@ -4695,7 +4760,7 @@
      * @return {String}
      */
     getSvgFilter() {
-      return this.shadow ? `filter: url(#SVGID_${this.shadow.id});` : '';
+      return this.shadow ? `filter: url(#SVGID_${escapeXml(this.shadow.id)});` : '';
     }
 
     /**
@@ -4703,7 +4768,7 @@
      * @return {String}
      */
     getSvgCommons() {
-      return [this.id ? `id="${this.id}" ` : '', this.clipPath ? `clip-path="url(#${this.clipPath.clipPathId})" ` : ''].join('');
+      return [this.id ? `id="${escapeXml(String(this.id))}" ` : '', this.clipPath ? `clip-path="url(#${this.clipPath.clipPathId})" ` : ''].join('');
     }
 
     /**
@@ -4816,7 +4881,7 @@
       return reviver ? reviver(markup.join('')) : markup.join('');
     }
     addPaintOrder() {
-      return this.paintFirst !== FILL ? ` paint-order="${this.paintFirst}" ` : '';
+      return this.paintFirst !== FILL ? ` paint-order="${escapeXml(this.paintFirst)}" ` : '';
     }
   }
 
@@ -4954,7 +5019,6 @@
 
   (?:$|\s): This captures either the end of the line or a whitespace character. It ensures that the match ends either at the end of the string or with a whitespace character.
      */
-  // eslint-disable-next-line max-len
 
   const shadowOffsetRegex = '(-?\\d+(?:\\.\\d*)?(?:px)?(?:\\s?|$))?';
   const reOffsetsAndBlur = new RegExp('(?:\\s|^)' + shadowOffsetRegex + shadowOffsetRegex + '(' + reNum + '?(?:px)?)?(?:\\s?|$)(?:$|\\s)');
@@ -5013,14 +5077,15 @@
     toSVG(object) {
       const offset = rotateVector(new Point(this.offsetX, this.offsetY), degreesToRadians(-object.angle)),
         BLUR_BOX = 20,
+        NUM_FRACTION_DIGITS = config.NUM_FRACTION_DIGITS,
         color = new Color(this.color);
       let fBoxX = 40,
         fBoxY = 40;
       if (object.width && object.height) {
         //http://www.w3.org/TR/SVG/filters.html#FilterEffectsRegion
         // we add some extra space to filter box to contain the blur ( 20 )
-        fBoxX = toFixed((Math.abs(offset.x) + this.blur) / object.width, config.NUM_FRACTION_DIGITS) * 100 + BLUR_BOX;
-        fBoxY = toFixed((Math.abs(offset.y) + this.blur) / object.height, config.NUM_FRACTION_DIGITS) * 100 + BLUR_BOX;
+        fBoxX = toFixed((Math.abs(offset.x) + this.blur) / object.width, NUM_FRACTION_DIGITS) * 100 + BLUR_BOX;
+        fBoxY = toFixed((Math.abs(offset.y) + this.blur) / object.height, NUM_FRACTION_DIGITS) * 100 + BLUR_BOX;
       }
       if (object.flipX) {
         offset.x *= -1;
@@ -5028,7 +5093,7 @@
       if (object.flipY) {
         offset.y *= -1;
       }
-      return `<filter id="SVGID_${this.id}" y="-${fBoxY}%" height="${100 + 2 * fBoxY}%" x="-${fBoxX}%" width="${100 + 2 * fBoxX}%" >\n\t<feGaussianBlur in="SourceAlpha" stdDeviation="${toFixed(this.blur ? this.blur / 2 : 0, config.NUM_FRACTION_DIGITS)}"></feGaussianBlur>\n\t<feOffset dx="${toFixed(offset.x, config.NUM_FRACTION_DIGITS)}" dy="${toFixed(offset.y, config.NUM_FRACTION_DIGITS)}" result="oBlur" ></feOffset>\n\t<feFlood flood-color="${color.toRgb()}" flood-opacity="${color.getAlpha()}"/>\n\t<feComposite in2="oBlur" operator="in" />\n\t<feMerge>\n\t\t<feMergeNode></feMergeNode>\n\t\t<feMergeNode in="SourceGraphic"></feMergeNode>\n\t</feMerge>\n</filter>\n`;
+      return `<filter id="SVGID_${escapeXml(this.id)}" y="-${fBoxY}%" height="${100 + 2 * fBoxY}%" x="-${fBoxX}%" width="${100 + 2 * fBoxX}%" >\n\t<feGaussianBlur in="SourceAlpha" stdDeviation="${toFixed(this.blur ? this.blur / 2 : 0, NUM_FRACTION_DIGITS)}"></feGaussianBlur>\n\t<feOffset dx="${toFixed(offset.x, NUM_FRACTION_DIGITS)}" dy="${toFixed(offset.y, NUM_FRACTION_DIGITS)}" result="oBlur" ></feOffset>\n\t<feFlood flood-color="${color.toRgb()}" flood-opacity="${color.getAlpha()}"/>\n\t<feComposite in2="oBlur" operator="in" />\n\t<feMerge>\n\t\t<feMergeNode></feMergeNode>\n\t\t<feMergeNode in="SourceGraphic"></feMergeNode>\n\t</feMerge>\n</filter>\n`;
     }
 
     /**
@@ -6438,7 +6503,7 @@
     calcOwnMatrix() {
       const key = this.transformMatrixKey(true),
         cache = this.ownMatrixCache;
-      if (cache && cache.key === key) {
+      if (cache && cache.key.every((x, i) => x === key[i])) {
         return cache.value;
       }
       const center = this.getRelativeCenterPoint(),
@@ -7179,6 +7244,9 @@
       } else {
         this._renderBackground(ctx);
       }
+      this.fire('before:render', {
+        ctx
+      });
       this._render(ctx);
       this._drawClipPath(ctx, this.clipPath, context);
       this.fill = originalFill;
@@ -8179,6 +8247,20 @@
   classRegistry.setClass(FabricObject$1);
   classRegistry.setClass(FabricObject$1, 'object');
 
+  const fireEvent = (eventName, options) => {
+    var _target$canvas;
+    const {
+      transform: {
+        target
+      }
+    } = options;
+    (_target$canvas = target.canvas) === null || _target$canvas === void 0 || _target$canvas.fire(`object:${eventName}`, {
+      ...options,
+      target
+    });
+    target.fire(eventName, options);
+  };
+
   /**
    * Wrap an action handler with firing an event if the action is performed
    * @param {TModificationEvents} eventName the event we want to fire
@@ -8221,34 +8303,62 @@
     };
   }
 
-  /**
-   * Action handler to change object's width
-   * Needs to be wrapped with `wrapWithFixedAnchor` to be effective
-   * @param {Event} eventData javascript event that is doing the transform
-   * @param {Object} transform javascript object containing a series of information around the current transform
-   * @param {number} x current mouse x position, canvas normalized
-   * @param {number} y current mouse y position, canvas normalized
-   * @return {Boolean} true if some change happened
-   */
-  const changeObjectWidth = (eventData, transform, x, y) => {
+  const changeObjectDimensionGen = (dimension, origin, xorY, scale) => (eventData, transform, x, y) => {
     const localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y);
+    const localPointValue = localPoint[xorY];
     //  make sure the control changes width ONLY from it's side of target
-    if (resolveOrigin(transform.originX) === resolveOrigin(CENTER) || resolveOrigin(transform.originX) === resolveOrigin(RIGHT) && localPoint.x < 0 || resolveOrigin(transform.originX) === resolveOrigin(LEFT) && localPoint.x > 0) {
+    const originValue = resolveOrigin(transform[origin]);
+    if (originValue === 0 || originValue > 0 && localPointValue < 0 || originValue < 0 && localPointValue > 0) {
       const {
           target
         } = transform,
-        strokePadding = target.strokeWidth / (target.strokeUniform ? target.scaleX : 1),
+        strokePadding = target.strokeWidth / (target.strokeUniform ? target[scale] : 1),
         multiplier = isTransformCentered(transform) ? 2 : 1,
-        oldWidth = target.width,
-        newWidth = Math.abs(localPoint.x * multiplier / target.scaleX) - strokePadding;
-      target.set('width', Math.max(newWidth, 1));
+        oldWidth = target[dimension],
+        newWidth = Math.abs(localPointValue * multiplier / target[scale]) - strokePadding;
+      target.set(dimension, Math.max(newWidth, 1));
       //  check against actual target width in case `newWidth` was rejected
-      return oldWidth !== target.width;
+      return oldWidth !== target[dimension];
     }
     return false;
   };
+
+  /**
+   * Action handler to change object's width
+   * Needs to be wrapped with `wrapWithFixedAnchor` to be effective
+   * You want to use this only if you are building a new control handler and you want
+   * to reuse some logic. use "changeWidth" if you are looking to just use a control for width
+   * @param {Event} eventData javascript event that is doing the transform
+   * @param {Object} transform javascript object containing a series of information around the current transform
+   * @param {number} x current mouse x position, canvas normalized
+   * @param {number} y current mouse y position, canvas normalized
+   * @return {Boolean} true if some change happened
+   */
+  const changeObjectWidth = changeObjectDimensionGen('width', 'originX', 'x', 'scaleX');
+
+  /**
+   * Action handler to change object's height
+   * Needs to be wrapped with `wrapWithFixedAnchor` to be effective
+   * You want to use this only if you are building a new control handler and you want
+   * to reuse some logic. use "changeHeight" if you are looking to just use a control for height
+   * @param {Event} eventData javascript event that is doing the transform
+   * @param {Object} transform javascript object containing a series of information around the current transform
+   * @param {number} x current mouse x position, canvas normalized
+   * @param {number} y current mouse y position, canvas normalized
+   * @return {Boolean} true if some change happened
+   */
+  const changeObjectHeight = changeObjectDimensionGen('height', 'originY', 'y', 'scaleY');
+
+  /**
+   * Control handler for changing width
+   */
   const changeWidth = wrapWithFireEvent(RESIZING, wrapWithFixedAnchor(changeObjectWidth));
 
+  /**
+   * Control handler for changing height
+   */
+  const changeHeight = wrapWithFireEvent(RESIZING, wrapWithFixedAnchor(changeObjectHeight));
+
   /**
    * Render a round control, as per fabric features.
    * This function is written to respect object properties like transparentCorners, cornerSize
@@ -8261,33 +8371,24 @@
    * @param {FabricObject} fabricObject the fabric object for which we are rendering controls
    */
   function renderCircleControl(ctx, left, top, styleOverride, fabricObject) {
-    styleOverride = styleOverride || {};
-    const xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize,
-      ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize,
-      transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ? styleOverride.transparentCorners : fabricObject.transparentCorners,
-      methodName = transparentCorners ? STROKE : FILL,
-      stroke = !transparentCorners && (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor);
-    let myLeft = left,
-      myTop = top,
-      size;
     ctx.save();
-    ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor || '';
-    ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor || '';
+    const {
+      stroke,
+      xSize,
+      ySize,
+      opName
+    } = this.commonRenderProps(ctx, left, top, fabricObject, styleOverride);
+    let size = xSize;
     // TODO: use proper ellipse code.
     if (xSize > ySize) {
-      size = xSize;
       ctx.scale(1.0, ySize / xSize);
-      myTop = top * xSize / ySize;
     } else if (ySize > xSize) {
       size = ySize;
       ctx.scale(xSize / ySize, 1.0);
-      myLeft = left * ySize / xSize;
-    } else {
-      size = xSize;
     }
     ctx.beginPath();
-    ctx.arc(myLeft, myTop, size / 2, 0, twoMathPi, false);
-    ctx[methodName]();
+    ctx.arc(0, 0, size / 2, 0, twoMathPi, false);
+    ctx[opName]();
     if (stroke) {
       ctx.stroke();
     }
@@ -8306,25 +8407,19 @@
    * @param {FabricObject} fabricObject the fabric object for which we are rendering controls
    */
   function renderSquareControl(ctx, left, top, styleOverride, fabricObject) {
-    styleOverride = styleOverride || {};
-    const xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize,
-      ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize,
-      transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ? styleOverride.transparentCorners : fabricObject.transparentCorners,
-      methodName = transparentCorners ? STROKE : FILL,
-      stroke = !transparentCorners && (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor),
+    ctx.save();
+    const {
+        stroke,
+        xSize,
+        ySize,
+        opName
+      } = this.commonRenderProps(ctx, left, top, fabricObject, styleOverride),
       xSizeBy2 = xSize / 2,
       ySizeBy2 = ySize / 2;
-    ctx.save();
-    ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor || '';
-    ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor || '';
-    ctx.translate(left, top);
-    //  angle is relative to canvas plane
-    const angle = fabricObject.getTotalAngle();
-    ctx.rotate(degreesToRadians(angle));
     // this does not work, and fixed with ( && ) does not make sense.
     // to have real transparent corners we need the controls on upperCanvas
     // transparentCorners || ctx.clearRect(-xSizeBy2, -ySizeBy2, xSize, ySize);
-    ctx[`${methodName}Rect`](-xSizeBy2, -ySizeBy2, xSize, ySize);
+    ctx[`${opName}Rect`](-xSizeBy2, -ySizeBy2, xSize, ySize);
     if (stroke) {
       ctx.strokeRect(-xSizeBy2, -ySizeBy2, xSize, ySize);
     }
@@ -8442,6 +8537,14 @@
       _defineProperty(this, "withConnection", false);
       Object.assign(this, options);
     }
+    getTransformAnchorPoint() {
+      var _this$transformAnchor;
+      return (// return the control transformAnchorPoint
+        (_this$transformAnchor = this.transformAnchorPoint) !== null && _this$transformAnchor !== void 0 ? _this$transformAnchor :
+        // otherwise will return the opposite origin of where the control is located.
+        new Point(-this.x + 0.5, -this.y + 0.5)
+      );
+    }
 
     /**
      * The control actionHandler, provide one to handle action ( control being moved )
@@ -8584,6 +8687,41 @@
       };
     }
 
+    /**
+     * This is an helper method to prepare the canvas to render a control
+     * It detectes common control properties and sets the correct fill and
+     * stroke styles on the context. It does not execute translations or
+     * rotations since different controls need differnt combination of these.
+     */
+    commonRenderProps(ctx, left, top, fabricObject) {
+      let styleOverride = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+      const {
+          cornerSize,
+          cornerColor,
+          transparentCorners,
+          cornerStrokeColor
+        } = styleOverride,
+        sizeFromProps = cornerSize || fabricObject.cornerSize,
+        xSize = this.sizeX || sizeFromProps,
+        ySize = this.sizeY || sizeFromProps,
+        transparent = typeof transparentCorners !== 'undefined' ? transparentCorners : fabricObject.transparentCorners,
+        opName = transparent ? STROKE : FILL,
+        strokeColor = cornerStrokeColor || fabricObject.cornerStrokeColor,
+        stroke = !transparent && !!strokeColor;
+      ctx.fillStyle = cornerColor || fabricObject.cornerColor || '';
+      ctx.strokeStyle = strokeColor || '';
+      ctx.translate(left, top);
+      //  angle is relative to canvas plane
+      ctx.rotate(degreesToRadians(fabricObject.getTotalAngle()));
+      return {
+        stroke,
+        xSize,
+        ySize,
+        transparentCorners: transparent,
+        opName
+      };
+    }
+
     /**
      * Render function for the control.
      * When this function runs the context is unscaled. unrotate. Just retina scaled.
@@ -10223,136 +10361,31 @@
   };
 
   /**
-   * Capitalizes a string
-   * @param {String} string String to capitalize
-   * @param {Boolean} [firstLetterOnly] If true only first letter is capitalized
-   * and other letters stay untouched, if false first letter is capitalized
-   * and other letters are converted to lowercase.
-   * @return {String} Capitalized version of a string
+   * @param {Object} prevStyle first style to compare
+   * @param {Object} thisStyle second style to compare
+   * @param {boolean} forTextSpans whether to check overline, underline, and line-through properties
+   * @return {boolean} true if the style changed
    */
-  const capitalize = function (string) {
-    let firstLetterOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    return `${string.charAt(0).toUpperCase()}${firstLetterOnly ? string.slice(1) : string.slice(1).toLowerCase()}`;
+  const hasStyleChanged = function (prevStyle, thisStyle) {
+    let forTextSpans = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    return prevStyle.fill !== thisStyle.fill || prevStyle.stroke !== thisStyle.stroke || prevStyle.strokeWidth !== thisStyle.strokeWidth || prevStyle.fontSize !== thisStyle.fontSize || prevStyle.fontFamily !== thisStyle.fontFamily || prevStyle.fontWeight !== thisStyle.fontWeight || prevStyle.fontStyle !== thisStyle.fontStyle || prevStyle.textDecorationThickness !== thisStyle.textDecorationThickness || prevStyle.textBackgroundColor !== thisStyle.textBackgroundColor || prevStyle.deltaY !== thisStyle.deltaY || forTextSpans && (prevStyle.overline !== thisStyle.overline || prevStyle.underline !== thisStyle.underline || prevStyle.linethrough !== thisStyle.linethrough);
   };
 
   /**
-   * Escapes XML in a string
-   * @param {String} string String to escape
-   * @return {String} Escaped version of a string
+   * Returns the array form of a text object's inline styles property with styles grouped in ranges
+   * rather than per character. This format is less verbose, and is better suited for storage
+   * so it is used in serialization (not during runtime).
+   * @param {object} styles per character styles for a text object
+   * @param {String} text the text string that the styles are applied to
+   * @return {{start: number, end: number, style: object}[]}
    */
-  const escapeXml = string => string.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&apos;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-  let segmenter;
-  const getSegmenter = () => {
-    if (!segmenter) {
-      segmenter = 'Intl' in getFabricWindow() && 'Segmenter' in Intl && new Intl.Segmenter(undefined, {
-        granularity: 'grapheme'
-      });
-    }
-    return segmenter;
-  };
-
-  /**
-   * Divide a string in the user perceived single units
-   * @param {String} textstring String to escape
-   * @return {Array} array containing the graphemes
-   */
-  const graphemeSplit = textstring => {
-    segmenter || getSegmenter();
-    if (segmenter) {
-      const segments = segmenter.segment(textstring);
-      return Array.from(segments).map(_ref => {
-        let {
-          segment
-        } = _ref;
-        return segment;
-      });
-    }
-
-    //Fallback
-    return graphemeSplitImpl(textstring);
-  };
-  const graphemeSplitImpl = textstring => {
-    const graphemes = [];
-    for (let i = 0, chr; i < textstring.length; i++) {
-      if ((chr = getWholeChar(textstring, i)) === false) {
-        continue;
-      }
-      graphemes.push(chr);
-    }
-    return graphemes;
-  };
-
-  // taken from mdn in the charAt doc page.
-  const getWholeChar = (str, i) => {
-    const code = str.charCodeAt(i);
-    if (isNaN(code)) {
-      return ''; // Position not found
-    }
-    if (code < 0xd800 || code > 0xdfff) {
-      return str.charAt(i);
-    }
-
-    // High surrogate (could change last hex to 0xDB7F to treat high private
-    // surrogates as single characters)
-    if (0xd800 <= code && code <= 0xdbff) {
-      if (str.length <= i + 1) {
-        throw 'High surrogate without following low surrogate';
-      }
-      const next = str.charCodeAt(i + 1);
-      if (0xdc00 > next || next > 0xdfff) {
-        throw 'High surrogate without following low surrogate';
-      }
-      return str.charAt(i) + str.charAt(i + 1);
-    }
-    // Low surrogate (0xDC00 <= code && code <= 0xDFFF)
-    if (i === 0) {
-      throw 'Low surrogate without preceding high surrogate';
-    }
-    const prev = str.charCodeAt(i - 1);
-
-    // (could change last hex to 0xDB7F to treat high private
-    // surrogates as single characters)
-    if (0xd800 > prev || prev > 0xdbff) {
-      throw 'Low surrogate without preceding high surrogate';
-    }
-    // We can pass over low surrogates now as the second component
-    // in a pair which we have already processed
-    return false;
-  };
-
-  var lang_string = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    capitalize: capitalize,
-    escapeXml: escapeXml,
-    graphemeSplit: graphemeSplit
-  });
-
-  /**
-   * @param {Object} prevStyle first style to compare
-   * @param {Object} thisStyle second style to compare
-   * @param {boolean} forTextSpans whether to check overline, underline, and line-through properties
-   * @return {boolean} true if the style changed
-   */
-  const hasStyleChanged = function (prevStyle, thisStyle) {
-    let forTextSpans = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    return prevStyle.fill !== thisStyle.fill || prevStyle.stroke !== thisStyle.stroke || prevStyle.strokeWidth !== thisStyle.strokeWidth || prevStyle.fontSize !== thisStyle.fontSize || prevStyle.fontFamily !== thisStyle.fontFamily || prevStyle.fontWeight !== thisStyle.fontWeight || prevStyle.fontStyle !== thisStyle.fontStyle || prevStyle.textDecorationThickness !== thisStyle.textDecorationThickness || prevStyle.textBackgroundColor !== thisStyle.textBackgroundColor || prevStyle.deltaY !== thisStyle.deltaY || forTextSpans && (prevStyle.overline !== thisStyle.overline || prevStyle.underline !== thisStyle.underline || prevStyle.linethrough !== thisStyle.linethrough);
-  };
-
-  /**
-   * Returns the array form of a text object's inline styles property with styles grouped in ranges
-   * rather than per character. This format is less verbose, and is better suited for storage
-   * so it is used in serialization (not during runtime).
-   * @param {object} styles per character styles for a text object
-   * @param {String} text the text string that the styles are applied to
-   * @return {{start: number, end: number, style: object}[]}
-   */
-  const stylesToArray = (styles, text) => {
-    const textLines = text.split('\n'),
-      stylesArray = [];
-    let charIndex = -1,
-      prevStyle = {};
-    // clone style structure to prevent mutation
-    styles = cloneStyles(styles);
+  const stylesToArray = (styles, text) => {
+    const textLines = text.split('\n'),
+      stylesArray = [];
+    let charIndex = -1,
+      prevStyle = {};
+    // clone style structure to prevent mutation
+    styles = cloneStyles(styles);
 
     //loop through each textLine
     for (let i = 0; i < textLines.length; i++) {
@@ -10910,7 +10943,7 @@
         rx,
         ry
       } = this;
-      return ['<rect ', 'COMMON_PARTS', `x="${-width / 2}" y="${-height / 2}" rx="${rx}" ry="${ry}" width="${width}" height="${height}" />\n`];
+      return ['<rect ', 'COMMON_PARTS', `x="${-width / 2}" y="${-height / 2}" rx="${escapeXml(rx)}" ry="${escapeXml(ry)}" width="${escapeXml(width)}" height="${escapeXml(height)}" />\n`];
     }
 
     /**
@@ -11875,7 +11908,7 @@
      * @return {String}
      */
     getSvgStyles() {
-      const opacity = typeof this.opacity !== 'undefined' && this.opacity !== 1 ? `opacity: ${this.opacity};` : '',
+      const opacity = typeof this.opacity !== 'undefined' && this.opacity !== 1 ? `opacity: ${escapeXml(this.opacity)};` : '',
         visibility = this.visible ? '' : ' visibility: hidden;';
       return [opacity, this.getSvgFilter(), visibility].join('');
     }
@@ -13177,6 +13210,288 @@
     preserveObjectStacking: true
   };
 
+  /**
+   * Action handler
+   * @private
+   * @param {Event} eventData javascript event that is doing the transform
+   * @param {Object} transform javascript object containing a series of information around the current transform
+   * @param {number} x current mouse x position, canvas normalized
+   * @param {number} y current mouse y position, canvas normalized
+   * @return {Boolean} true if the translation occurred
+   */
+  const dragHandler = (eventData, transform, x, y) => {
+    const {
+        target,
+        offsetX,
+        offsetY
+      } = transform,
+      newLeft = x - offsetX,
+      newTop = y - offsetY,
+      moveX = !isLocked(target, 'lockMovementX') && target.left !== newLeft,
+      moveY = !isLocked(target, 'lockMovementY') && target.top !== newTop;
+    moveX && target.set(LEFT, newLeft);
+    moveY && target.set(TOP, newTop);
+    if (moveX || moveY) {
+      fireEvent(MOVING, commonEventInfo(eventData, transform, x, y));
+    }
+    return moveX || moveY;
+  };
+
+  const ACTION_NAME$1 = MODIFY_POLY;
+  /**
+   * This function locates the controls.
+   * It'll be used both for drawing and for interaction.
+   */
+  const createPolyPositionHandler = pointIndex => {
+    return function (dim, finalMatrix, polyObject) {
+      const {
+        points,
+        pathOffset
+      } = polyObject;
+      return new Point(points[pointIndex]).subtract(pathOffset).transform(multiplyTransformMatrices(polyObject.getViewportTransform(), polyObject.calcTransformMatrix()));
+    };
+  };
+
+  /**
+   * This function defines what the control does.
+   * It'll be called on every mouse move after a control has been clicked and is being dragged.
+   * The function receives as argument the mouse event, the current transform object
+   * and the current position in canvas coordinate `transform.target` is a reference to the
+   * current object being transformed.
+   */
+  const polyActionHandler = (eventData, transform, x, y) => {
+    const {
+      target,
+      pointIndex
+    } = transform;
+    const poly = target;
+    const mouseLocalPosition = sendPointToPlane(new Point(x, y), undefined, poly.calcOwnMatrix());
+    poly.points[pointIndex] = mouseLocalPosition.add(poly.pathOffset);
+    poly.setDimensions();
+    poly.set('dirty', true);
+    return true;
+  };
+
+  /**
+   * Keep the polygon in the same position when we change its `width`/`height`/`top`/`left`.
+   */
+  const factoryPolyActionHandler = (pointIndex, fn) => {
+    return function (eventData, transform, x, y) {
+      const poly = transform.target,
+        anchorPoint = new Point(poly.points[(pointIndex > 0 ? pointIndex : poly.points.length) - 1]),
+        anchorPointInParentPlane = anchorPoint.subtract(poly.pathOffset).transform(poly.calcOwnMatrix()),
+        actionPerformed = fn(eventData, {
+          ...transform,
+          pointIndex
+        }, x, y);
+      const newAnchorPointInParentPlane = anchorPoint.subtract(poly.pathOffset).transform(poly.calcOwnMatrix());
+      const diff = newAnchorPointInParentPlane.subtract(anchorPointInParentPlane);
+      poly.left -= diff.x;
+      poly.top -= diff.y;
+      return actionPerformed;
+    };
+  };
+  const createPolyActionHandler = pointIndex => wrapWithFireEvent(ACTION_NAME$1, factoryPolyActionHandler(pointIndex, polyActionHandler));
+  function createPolyControls(arg0) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const controls = {};
+    for (let idx = 0; idx < (typeof arg0 === 'number' ? arg0 : arg0.points.length); idx++) {
+      controls[`p${idx}`] = new Control({
+        actionName: ACTION_NAME$1,
+        positionHandler: createPolyPositionHandler(idx),
+        actionHandler: createPolyActionHandler(idx),
+        ...options
+      });
+    }
+    return controls;
+  }
+
+  const ACTION_NAME = 'modifyPath';
+  const calcPathPointPosition = (pathObject, commandIndex, pointIndex) => {
+    const {
+      path,
+      pathOffset
+    } = pathObject;
+    const command = path[commandIndex];
+    return new Point(command[pointIndex] - pathOffset.x, command[pointIndex + 1] - pathOffset.y).transform(multiplyTransformMatrices(pathObject.getViewportTransform(), pathObject.calcTransformMatrix()));
+  };
+  const movePathPoint = (pathObject, x, y, commandIndex, pointIndex) => {
+    const {
+      path,
+      pathOffset
+    } = pathObject;
+    const anchorCommand = path[(commandIndex > 0 ? commandIndex : path.length) - 1];
+    const anchorPoint = new Point(anchorCommand[pointIndex], anchorCommand[pointIndex + 1]);
+    const anchorPointInParentPlane = anchorPoint.subtract(pathOffset).transform(pathObject.calcOwnMatrix());
+    const mouseLocalPosition = sendPointToPlane(new Point(x, y), undefined, pathObject.calcOwnMatrix());
+    path[commandIndex][pointIndex] = mouseLocalPosition.x + pathOffset.x;
+    path[commandIndex][pointIndex + 1] = mouseLocalPosition.y + pathOffset.y;
+    pathObject.setDimensions();
+    const newAnchorPointInParentPlane = anchorPoint.subtract(pathObject.pathOffset).transform(pathObject.calcOwnMatrix());
+    const diff = newAnchorPointInParentPlane.subtract(anchorPointInParentPlane);
+    pathObject.left -= diff.x;
+    pathObject.top -= diff.y;
+    pathObject.set('dirty', true);
+    return true;
+  };
+
+  /**
+   * This function locates the controls.
+   * It'll be used both for drawing and for interaction.
+   */
+  function pathPositionHandler(dim, finalMatrix, pathObject) {
+    const {
+      commandIndex,
+      pointIndex
+    } = this;
+    return calcPathPointPosition(pathObject, commandIndex, pointIndex);
+  }
+
+  /**
+   * This function defines what the control does.
+   * It'll be called on every mouse move after a control has been clicked and is being dragged.
+   * The function receives as argument the mouse event, the current transform object
+   * and the current position in canvas coordinate `transform.target` is a reference to the
+   * current object being transformed.
+   */
+  function pathActionHandler(eventData, transform, x, y) {
+    const {
+      target
+    } = transform;
+    const {
+      commandIndex,
+      pointIndex
+    } = this;
+    const actionPerformed = movePathPoint(target, x, y, commandIndex, pointIndex);
+    {
+      fireEvent(this.actionName, {
+        ...commonEventInfo(eventData, transform, x, y),
+        commandIndex,
+        pointIndex
+      });
+    }
+    return actionPerformed;
+  }
+  const indexFromPrevCommand = previousCommandType => previousCommandType === 'C' ? 5 : previousCommandType === 'Q' ? 3 : 1;
+  class PathPointControl extends Control {
+    constructor(options) {
+      super(options);
+    }
+    render(ctx, left, top, styleOverride, fabricObject) {
+      const overrides = {
+        ...styleOverride,
+        cornerColor: this.controlFill,
+        cornerStrokeColor: this.controlStroke,
+        transparentCorners: !this.controlFill
+      };
+      super.render(ctx, left, top, overrides, fabricObject);
+    }
+  }
+  class PathControlPointControl extends PathPointControl {
+    constructor(options) {
+      super(options);
+    }
+    render(ctx, left, top, styleOverride, fabricObject) {
+      const {
+        path
+      } = fabricObject;
+      const {
+        commandIndex,
+        pointIndex,
+        connectToCommandIndex,
+        connectToPointIndex
+      } = this;
+      ctx.save();
+      ctx.strokeStyle = this.controlStroke;
+      if (this.connectionDashArray) {
+        ctx.setLineDash(this.connectionDashArray);
+      }
+      const [commandType] = path[commandIndex];
+      const point = calcPathPointPosition(fabricObject, connectToCommandIndex, connectToPointIndex);
+      if (commandType === 'Q') {
+        // one control point connects to 2 points
+        const point2 = calcPathPointPosition(fabricObject, commandIndex, pointIndex + 2);
+        ctx.moveTo(point2.x, point2.y);
+        ctx.lineTo(left, top);
+      } else {
+        ctx.moveTo(left, top);
+      }
+      ctx.lineTo(point.x, point.y);
+      ctx.stroke();
+      ctx.restore();
+      super.render(ctx, left, top, styleOverride, fabricObject);
+    }
+  }
+  const createControl = (commandIndexPos, pointIndexPos, isControlPoint, options, connectToCommandIndex, connectToPointIndex) => new (isControlPoint ? PathControlPointControl : PathPointControl)({
+    commandIndex: commandIndexPos,
+    pointIndex: pointIndexPos,
+    actionName: ACTION_NAME,
+    positionHandler: pathPositionHandler,
+    actionHandler: pathActionHandler,
+    connectToCommandIndex,
+    connectToPointIndex,
+    ...options,
+    ...(isControlPoint ? options.controlPointStyle : options.pointStyle)
+  });
+  function createPathControls(path) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const controls = {};
+    let previousCommandType = 'M';
+    path.path.forEach((command, commandIndex) => {
+      const commandType = command[0];
+      if (commandType !== 'Z') {
+        controls[`c_${commandIndex}_${commandType}`] = createControl(commandIndex, command.length - 2, false, options);
+      }
+      switch (commandType) {
+        case 'C':
+          controls[`c_${commandIndex}_C_CP_1`] = createControl(commandIndex, 1, true, options, commandIndex - 1, indexFromPrevCommand(previousCommandType));
+          controls[`c_${commandIndex}_C_CP_2`] = createControl(commandIndex, 3, true, options, commandIndex, 5);
+          break;
+        case 'Q':
+          controls[`c_${commandIndex}_Q_CP_1`] = createControl(commandIndex, 1, true, options, commandIndex, 3);
+          break;
+      }
+      previousCommandType = commandType;
+    });
+    return controls;
+  }
+
+  var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    changeHeight: changeHeight,
+    changeObjectHeight: changeObjectHeight,
+    changeObjectWidth: changeObjectWidth,
+    changeWidth: changeWidth,
+    createObjectDefaultControls: createObjectDefaultControls,
+    createPathControls: createPathControls,
+    createPolyActionHandler: createPolyActionHandler,
+    createPolyControls: createPolyControls,
+    createPolyPositionHandler: createPolyPositionHandler,
+    createResizeControls: createResizeControls,
+    createTextboxDefaultControls: createTextboxDefaultControls,
+    dragHandler: dragHandler,
+    factoryPolyActionHandler: factoryPolyActionHandler,
+    getLocalPoint: getLocalPoint,
+    polyActionHandler: polyActionHandler,
+    renderCircleControl: renderCircleControl,
+    renderSquareControl: renderSquareControl,
+    rotationStyleHandler: rotationStyleHandler,
+    rotationWithSnapping: rotationWithSnapping,
+    scaleCursorStyleHandler: scaleCursorStyleHandler,
+    scaleOrSkewActionName: scaleOrSkewActionName,
+    scaleSkewCursorStyleHandler: scaleSkewCursorStyleHandler,
+    scalingEqually: scalingEqually,
+    scalingX: scalingX,
+    scalingXOrSkewingY: scalingXOrSkewingY,
+    scalingY: scalingY,
+    scalingYOrSkewingX: scalingYOrSkewingX,
+    skewCursorStyleHandler: skewCursorStyleHandler,
+    skewHandlerX: skewHandlerX,
+    skewHandlerY: skewHandlerY,
+    wrapWithFireEvent: wrapWithFireEvent,
+    wrapWithFixedAnchor: wrapWithFixedAnchor
+  });
+
   /**
    * Canvas class
    * @class Canvas
@@ -13547,11 +13862,13 @@
      * Given the control clicked, determine the origin of the transform.
      * This is bad because controls can totally have custom names
      * should disappear before release 4.0
+     * Fabric 7.1, jan 2026 we are still using this.
+     * Needs to go.
      * @private
      * @deprecated
      */
     _getOriginFromCorner(target, controlName) {
-      const origin = {
+      const origin = controlName ? target.controls[controlName].getTransformAnchorPoint() : {
         x: target.originX,
         y: target.originY
       };
@@ -13559,6 +13876,9 @@
         return origin;
       }
 
+      // this part down here is deprecated.
+      // It is left to do not change the standard behavior in the middle of a major version
+      // but when possible `getTransformAnchorPoint` will be the only source of truth
       // is a left control ?
       if (['ml', 'tl', 'bl'].includes(controlName)) {
         origin.x = RIGHT;
@@ -13598,37 +13918,52 @@
           x: CENTER,
           y: CENTER
         } : this._getOriginFromCorner(target, corner),
+        {
+          scaleX,
+          scaleY,
+          skewX,
+          skewY,
+          left,
+          top,
+          angle,
+          width,
+          height,
+          cropX,
+          cropY
+        } = target,
         /**
          * relative to target's containing coordinate plane
          * both agree on every point
          **/
         transform = {
-          target: target,
+          target,
           action,
           actionHandler,
           actionPerformed: false,
           corner,
-          scaleX: target.scaleX,
-          scaleY: target.scaleY,
-          skewX: target.skewX,
-          skewY: target.skewY,
-          offsetX: pointer.x - target.left,
-          offsetY: pointer.y - target.top,
+          scaleX,
+          scaleY,
+          skewX,
+          skewY,
+          offsetX: pointer.x - left,
+          offsetY: pointer.y - top,
           originX: origin.x,
           originY: origin.y,
           ex: pointer.x,
           ey: pointer.y,
           lastX: pointer.x,
           lastY: pointer.y,
-          theta: degreesToRadians(target.angle),
-          width: target.width,
-          height: target.height,
+          theta: degreesToRadians(angle),
+          width,
+          height,
           shiftKey: e.shiftKey,
           altKey,
           original: {
             ...saveObjectTransform(target),
             originX: origin.x,
-            originY: origin.y
+            originY: origin.y,
+            cropX,
+            cropY
           }
         };
       this._currentTransform = transform;
@@ -16041,7 +16376,8 @@
       }
       transform[4] -= offsetX;
       transform[5] -= offsetY;
-      const commonAttributes = [`id="SVGID_${this.id}"`, `gradientUnits="${gradientUnits}"`, `gradientTransform="${preTransform ? preTransform + ' ' : ''}${matrixToSVG(transform)}"`, ''].join(' ');
+      const commonAttributes = [`id="SVGID_${escapeXml(String(this.id))}"`, `gradientUnits="${gradientUnits}"`, `gradientTransform="${preTransform ? preTransform + ' ' : ''}${matrixToSVG(transform)}"`, ''].join(' ');
+      const sanitizeCoord = value => parseFloat(String(value));
       if (this.type === 'linear') {
         const {
           x1,
@@ -16049,7 +16385,11 @@
           x2,
           y2
         } = this.coords;
-        markup.push('<linearGradient ', commonAttributes, ' x1="', x1, '" y1="', y1, '" x2="', x2, '" y2="', y2, '">\n');
+        const sx1 = sanitizeCoord(x1);
+        const sy1 = sanitizeCoord(y1);
+        const sx2 = sanitizeCoord(x2);
+        const sy2 = sanitizeCoord(y2);
+        markup.push('<linearGradient ', commonAttributes, ' x1="', sx1, '" y1="', sy1, '" x2="', sx2, '" y2="', sy2, '">\n');
       } else if (this.type === 'radial') {
         const {
           x1,
@@ -16059,9 +16399,15 @@
           r1,
           r2
         } = this.coords;
-        const needsSwap = r1 > r2;
+        const sx1 = sanitizeCoord(x1);
+        const sy1 = sanitizeCoord(y1);
+        const sx2 = sanitizeCoord(x2);
+        const sy2 = sanitizeCoord(y2);
+        const sr1 = sanitizeCoord(r1);
+        const sr2 = sanitizeCoord(r2);
+        const needsSwap = sr1 > sr2;
         // svg radial gradient has just 1 radius. the biggest.
-        markup.push('<radialGradient ', commonAttributes, ' cx="', needsSwap ? x1 : x2, '" cy="', needsSwap ? y1 : y2, '" r="', needsSwap ? r1 : r2, '" fx="', needsSwap ? x2 : x1, '" fy="', needsSwap ? y2 : y1, '">\n');
+        markup.push('<radialGradient ', commonAttributes, ' cx="', needsSwap ? sx1 : sx2, '" cy="', needsSwap ? sy1 : sy2, '" r="', needsSwap ? sr1 : sr2, '" fx="', needsSwap ? sx2 : sx1, '" fy="', needsSwap ? sy2 : sy1, '">\n');
         if (needsSwap) {
           // svg goes from internal to external radius. if radius are inverted, swap color stops.
           colorStops.reverse(); //  mutates array
@@ -16069,16 +16415,17 @@
             colorStop.offset = 1 - colorStop.offset;
           });
         }
-        const minRadius = Math.min(r1, r2);
+        const minRadius = Math.min(sr1, sr2);
         if (minRadius > 0) {
           // i have to shift all colorStops and add new one in 0.
-          const maxRadius = Math.max(r1, r2),
+          const maxRadius = Math.max(sr1, sr2),
             percentageShift = minRadius / maxRadius;
           colorStops.forEach(colorStop => {
             colorStop.offset += percentageShift * (1 - colorStop.offset);
           });
         }
       }
+      // todo make a malicious script tag injection test with color and also apply a fix with escapeXml
       colorStops.forEach(_ref => {
         let {
           color,
@@ -16394,7 +16741,7 @@
         patternOffsetY = ifNaN(this.offsetY / height, 0),
         patternWidth = repeat === 'repeat-y' || repeat === 'no-repeat' ? 1 + Math.abs(patternOffsetX || 0) : ifNaN(patternSource.width / width, 0),
         patternHeight = repeat === 'repeat-x' || repeat === 'no-repeat' ? 1 + Math.abs(patternOffsetY || 0) : ifNaN(patternSource.height / height, 0);
-      return [`<pattern id="SVGID_${id}" x="${patternOffsetX}" y="${patternOffsetY}" width="${patternWidth}" height="${patternHeight}">`, `<image x="0" y="0" width="${patternSource.width}" height="${patternSource.height}" xlink:href="${this.sourceToString()}"></image>`, `</pattern>`, ''].join('\n');
+      return [`<pattern id="SVGID_${escapeXml(id)}" x="${patternOffsetX}" y="${patternOffsetY}" width="${patternWidth}" height="${patternHeight}">`, `<image x="0" y="0" width="${patternSource.width}" height="${patternSource.height}" xlink:href="${escapeXml(this.sourceToString())}"></image>`, `</pattern>`, ''].join('\n');
     }
     /* _TO_SVG_END_ */
 
@@ -16676,8 +17023,7 @@
      * of the instance
      */
     _toSVG() {
-      const path = joinPath(this.path, config.NUM_FRACTION_DIGITS);
-      return ['<path ', 'COMMON_PARTS', `d="${path}" stroke-linecap="round" />\n`];
+      return ['<path ', 'COMMON_PARTS', `d="${joinPath(this.path, config.NUM_FRACTION_DIGITS)}" stroke-linecap="round" />\n`];
     }
 
     /**
@@ -17228,15 +17574,17 @@
      * of the instance
      */
     _toSVG() {
-      const angle = (this.endAngle - this.startAngle) % 360;
+      const {
+        radius,
+        startAngle,
+        endAngle
+      } = this;
+      const angle = (endAngle - startAngle) % 360;
       if (angle === 0) {
-        return ['<circle ', 'COMMON_PARTS', 'cx="0" cy="0" ', 'r="', `${this.radius}`, '" />\n'];
+        return ['<circle ', 'COMMON_PARTS', 'cx="0" cy="0" ', 'r="', `${escapeXml(radius)}`, '" />\n'];
       } else {
-        const {
-          radius
-        } = this;
-        const start = degreesToRadians(this.startAngle),
-          end = degreesToRadians(this.endAngle),
+        const start = degreesToRadians(startAngle),
+          end = degreesToRadians(endAngle),
           startX = cos(start) * radius,
           startY = sin(start) * radius,
           endX = cos(end) * radius,
@@ -17808,17 +18156,13 @@
         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 ? -0.5 : 0.5,
+        yMult = _y1 <= _y2 ? -0.5 : 0.5;
       return {
-        x1,
-        x2,
-        y1,
-        y2
+        x1: xMult * width,
+        x2: xMult * -width,
+        y1: yMult * height,
+        y2: yMult * -height
       };
     }
 
@@ -18036,7 +18380,7 @@
      * of the instance
      */
     _toSVG() {
-      return ['<ellipse ', 'COMMON_PARTS', `cx="0" cy="0" rx="${this.rx}" ry="${this.ry}" />\n`];
+      return ['<ellipse ', 'COMMON_PARTS', `cx="0" cy="0" rx="${escapeXml(this.rx)}" ry="${escapeXml(this.ry)}" />\n`];
     }
 
     /**
@@ -18354,14 +18698,17 @@
      * of the instance
      */
     _toSVG() {
-      const points = [],
-        diffX = this.pathOffset.x,
+      const 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), ' ');
-      }
-      return [`<${this.constructor.type.toLowerCase()} `, 'COMMON_PARTS', `points="${points.join('')}" />\n`];
+      const points = this.points.map(_ref2 => {
+        let {
+          x,
+          y
+        } = _ref2;
+        return `${toFixed(x - diffX, NUM_FRACTION_DIGITS)},${toFixed(y - diffY, NUM_FRACTION_DIGITS)}`;
+      }).join(' ');
+      return [`<${escapeXml(this.constructor.type).toLowerCase()} `, 'COMMON_PARTS', `points="${points}" />\n`];
     }
 
     /**
@@ -18484,7 +18831,6 @@
       };
       for (const p1 in obj) {
         for (const p2 in obj[p1]) {
-          // eslint-disable-next-line no-unused-vars
           for (const p3 in obj[p1][p2]) {
             return false;
           }
@@ -18510,9 +18856,7 @@
       const obj = typeof lineIndex === 'undefined' ? this.styles : {
         0: this.styles[lineIndex]
       };
-      // eslint-disable-next-line
       for (const p1 in obj) {
-        // eslint-disable-next-line
         for (const p2 in obj[p1]) {
           if (typeof obj[p1][p2][property] !== 'undefined') {
             return true;
@@ -18788,7 +19132,7 @@
       } = _ref;
       const noShadow = true,
         textDecoration = this.getSvgTextDecoration(this);
-      return [textBgRects.join(''), '\t\t<text xml:space="preserve" ', `font-family="${this.fontFamily.replace(dblQuoteRegex, "'")}" `, `font-size="${this.fontSize}" `, this.fontStyle ? `font-style="${this.fontStyle}" ` : '', this.fontWeight ? `font-weight="${this.fontWeight}" ` : '', textDecoration ? `text-decoration="${textDecoration}" ` : '', this.direction === 'rtl' ? `direction="${this.direction}" ` : '', 'style="', this.getSvgStyles(noShadow), '"', this.addPaintOrder(), ' >', textSpans.join(''), '</text>\n'];
+      return [textBgRects.join(''), '\t\t<text xml:space="preserve" ', `font-family="${escapeXml(this.fontFamily.replace(dblQuoteRegex, "'"))}" `, `font-size="${escapeXml(this.fontSize)}" `, this.fontStyle ? `font-style="${escapeXml(this.fontStyle)}" ` : '', this.fontWeight ? `font-weight="${escapeXml(this.fontWeight)}" ` : '', textDecoration ? `text-decoration="${textDecoration}" ` : '', this.direction === 'rtl' ? `direction="rtl" ` : '', 'style="', this.getSvgStyles(noShadow), '"', this.addPaintOrder(), ' >', textSpans.join(''), '</text>\n'];
     }
 
     /**
@@ -18804,7 +19148,7 @@
         lineOffset;
 
       // bounding-box background
-      this.backgroundColor && textBgRects.push(...createSVGInlineRect(this.backgroundColor, -this.width / 2, -this.height / 2, this.width, this.height));
+      this.backgroundColor && textBgRects.push(createSVGInlineRect(this.backgroundColor, -this.width / 2, -this.height / 2, this.width, this.height));
 
       // text and text-background
       for (let i = 0, len = this._textLines.length; i < len; i++) {
@@ -18912,7 +19256,7 @@
         } = this.__charBounds[i][j];
         currentColor = this.getValueOfPropertyAt(i, j, 'textBackgroundColor');
         if (currentColor !== lastColor) {
-          lastColor && textBgRects.push(...createSVGInlineRect(lastColor, leftOffset + boxStart, textTopOffset, boxWidth, heightOfLine));
+          lastColor && textBgRects.push(createSVGInlineRect(lastColor, leftOffset + boxStart, textTopOffset, boxWidth, heightOfLine));
           boxStart = left;
           boxWidth = width;
           lastColor = currentColor;
@@ -18920,7 +19264,7 @@
           boxWidth += kernedWidth;
         }
       }
-      currentColor && textBgRects.push(...createSVGInlineRect(lastColor, leftOffset + boxStart, textTopOffset, boxWidth, heightOfLine));
+      currentColor && textBgRects.push(createSVGInlineRect(lastColor, leftOffset + boxStart, textTopOffset, boxWidth, heightOfLine));
     }
 
     /**
@@ -18947,7 +19291,6 @@
         fontSize,
         fontStyle,
         fontWeight,
-        deltaY,
         textDecorationThickness,
         linethrough,
         overline,
@@ -18959,7 +19302,7 @@
         linethrough: linethrough !== null && linethrough !== void 0 ? linethrough : this.linethrough
       });
       const thickness = textDecorationThickness || this.textDecorationThickness;
-      return [stroke ? colorPropToSVG(STROKE, stroke) : '', strokeWidth ? `stroke-width: ${strokeWidth}; ` : '', fontFamily ? `font-family: ${!fontFamily.includes("'") && !fontFamily.includes('"') ? `'${fontFamily}'` : fontFamily}; ` : '', fontSize ? `font-size: ${fontSize}px; ` : '', fontStyle ? `font-style: ${fontStyle}; ` : '', fontWeight ? `font-weight: ${fontWeight}; ` : '', textDecoration ? `text-decoration: ${textDecoration}; text-decoration-thickness: ${toFixed(thickness * this.getObjectScaling().y / 10, config.NUM_FRACTION_DIGITS)}%; ` : '', fill ? colorPropToSVG(FILL, fill) : '', deltaY ? `baseline-shift: ${-deltaY}; ` : '', useWhiteSpace ? 'white-space: pre; ' : ''].join('');
+      return [stroke ? colorPropToSVG(STROKE, stroke) : '', strokeWidth ? `stroke-width: ${escapeXml(strokeWidth)}; ` : '', fontFamily ? `font-family: ${!fontFamily.includes("'") && !fontFamily.includes('"') ? `'${escapeXml(fontFamily)}'` : escapeXml(fontFamily)}; ` : '', fontSize ? `font-size: ${escapeXml(fontSize)}px; ` : '', fontStyle ? `font-style: ${escapeXml(fontStyle)}; ` : '', fontWeight ? `font-weight: ${escapeXml(fontWeight)}; ` : '', textDecoration ? `text-decoration: ${textDecoration}; text-decoration-thickness: ${toFixed(thickness * this.getObjectScaling().y / 10, config.NUM_FRACTION_DIGITS)}%; ` : '', fill ? colorPropToSVG(FILL, fill) : '', useWhiteSpace ? 'white-space: pre; ' : ''].join('');
     }
 
     /**
@@ -24523,13 +24866,13 @@
       }
       if (this.hasCrop()) {
         const clipPathId = uid();
-        svgString.push('<clipPath id="imageCrop_' + clipPathId + '">\n', '\t<rect x="' + x + '" y="' + y + '" width="' + this.width + '" height="' + this.height + '" />\n', '</clipPath>\n');
+        svgString.push('<clipPath id="imageCrop_' + clipPathId + '">\n', '\t<rect x="' + x + '" y="' + y + '" width="' + escapeXml(this.width) + '" height="' + escapeXml(this.height) + '" />\n', '</clipPath>\n');
         clipPath = ' clip-path="url(#imageCrop_' + clipPathId + ')" ';
       }
       if (!this.imageSmoothing) {
         imageRendering = ' image-rendering="optimizeSpeed"';
       }
-      imageMarkup.push('\t<image ', 'COMMON_PARTS', `xlink:href="${this.getSvgSrc(true)}" x="${x - this.cropX}" y="${y - this.cropY
+      imageMarkup.push('\t<image ', 'COMMON_PARTS', `xlink:href="${escapeXml(this.getSrc(true))}" x="${x - this.cropX}" y="${y - this.cropY
     // we're essentially moving origin of transformation from top/left corner to the center of the shape
     // by wrapping it in container <g> element with actual transformation, then offsetting object to the top/left
     // so that object's center aligns with container's left/top
@@ -24537,7 +24880,7 @@
       if (this.stroke || this.strokeDashArray) {
         const origFill = this.fill;
         this.fill = null;
-        strokeSvg = [`\t<rect x="${x}" y="${y}" width="${this.width}" height="${this.height}" style="${this.getSvgStyles()}" />\n`];
+        strokeSvg = [`\t<rect x="${x}" y="${y}" width="${escapeXml(this.width)}" height="${escapeXml(this.height)}" style="${this.getSvgStyles()}" />\n`];
         this.fill = origFill;
       }
       if (this.paintFirst !== FILL) {
@@ -25520,258 +25863,6 @@
     });
   }
 
-  const ACTION_NAME$1 = MODIFY_POLY;
-  /**
-   * This function locates the controls.
-   * It'll be used both for drawing and for interaction.
-   */
-  const createPolyPositionHandler = pointIndex => {
-    return function (dim, finalMatrix, polyObject) {
-      const {
-        points,
-        pathOffset
-      } = polyObject;
-      return new Point(points[pointIndex]).subtract(pathOffset).transform(multiplyTransformMatrices(polyObject.getViewportTransform(), polyObject.calcTransformMatrix()));
-    };
-  };
-
-  /**
-   * This function defines what the control does.
-   * It'll be called on every mouse move after a control has been clicked and is being dragged.
-   * The function receives as argument the mouse event, the current transform object
-   * and the current position in canvas coordinate `transform.target` is a reference to the
-   * current object being transformed.
-   */
-  const polyActionHandler = (eventData, transform, x, y) => {
-    const {
-      target,
-      pointIndex
-    } = transform;
-    const poly = target;
-    const mouseLocalPosition = sendPointToPlane(new Point(x, y), undefined, poly.calcOwnMatrix());
-    poly.points[pointIndex] = mouseLocalPosition.add(poly.pathOffset);
-    poly.setDimensions();
-    poly.set('dirty', true);
-    return true;
-  };
-
-  /**
-   * Keep the polygon in the same position when we change its `width`/`height`/`top`/`left`.
-   */
-  const factoryPolyActionHandler = (pointIndex, fn) => {
-    return function (eventData, transform, x, y) {
-      const poly = transform.target,
-        anchorPoint = new Point(poly.points[(pointIndex > 0 ? pointIndex : poly.points.length) - 1]),
-        anchorPointInParentPlane = anchorPoint.subtract(poly.pathOffset).transform(poly.calcOwnMatrix()),
-        actionPerformed = fn(eventData, {
-          ...transform,
-          pointIndex
-        }, x, y);
-      const newAnchorPointInParentPlane = anchorPoint.subtract(poly.pathOffset).transform(poly.calcOwnMatrix());
-      const diff = newAnchorPointInParentPlane.subtract(anchorPointInParentPlane);
-      poly.left -= diff.x;
-      poly.top -= diff.y;
-      return actionPerformed;
-    };
-  };
-  const createPolyActionHandler = pointIndex => wrapWithFireEvent(ACTION_NAME$1, factoryPolyActionHandler(pointIndex, polyActionHandler));
-  function createPolyControls(arg0) {
-    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    const controls = {};
-    for (let idx = 0; idx < (typeof arg0 === 'number' ? arg0 : arg0.points.length); idx++) {
-      controls[`p${idx}`] = new Control({
-        actionName: ACTION_NAME$1,
-        positionHandler: createPolyPositionHandler(idx),
-        actionHandler: createPolyActionHandler(idx),
-        ...options
-      });
-    }
-    return controls;
-  }
-
-  const ACTION_NAME = 'modifyPath';
-  const calcPathPointPosition = (pathObject, commandIndex, pointIndex) => {
-    const {
-      path,
-      pathOffset
-    } = pathObject;
-    const command = path[commandIndex];
-    return new Point(command[pointIndex] - pathOffset.x, command[pointIndex + 1] - pathOffset.y).transform(multiplyTransformMatrices(pathObject.getViewportTransform(), pathObject.calcTransformMatrix()));
-  };
-  const movePathPoint = (pathObject, x, y, commandIndex, pointIndex) => {
-    const {
-      path,
-      pathOffset
-    } = pathObject;
-    const anchorCommand = path[(commandIndex > 0 ? commandIndex : path.length) - 1];
-    const anchorPoint = new Point(anchorCommand[pointIndex], anchorCommand[pointIndex + 1]);
-    const anchorPointInParentPlane = anchorPoint.subtract(pathOffset).transform(pathObject.calcOwnMatrix());
-    const mouseLocalPosition = sendPointToPlane(new Point(x, y), undefined, pathObject.calcOwnMatrix());
-    path[commandIndex][pointIndex] = mouseLocalPosition.x + pathOffset.x;
-    path[commandIndex][pointIndex + 1] = mouseLocalPosition.y + pathOffset.y;
-    pathObject.setDimensions();
-    const newAnchorPointInParentPlane = anchorPoint.subtract(pathObject.pathOffset).transform(pathObject.calcOwnMatrix());
-    const diff = newAnchorPointInParentPlane.subtract(anchorPointInParentPlane);
-    pathObject.left -= diff.x;
-    pathObject.top -= diff.y;
-    pathObject.set('dirty', true);
-    return true;
-  };
-
-  /**
-   * This function locates the controls.
-   * It'll be used both for drawing and for interaction.
-   */
-  function pathPositionHandler(dim, finalMatrix, pathObject) {
-    const {
-      commandIndex,
-      pointIndex
-    } = this;
-    return calcPathPointPosition(pathObject, commandIndex, pointIndex);
-  }
-
-  /**
-   * This function defines what the control does.
-   * It'll be called on every mouse move after a control has been clicked and is being dragged.
-   * The function receives as argument the mouse event, the current transform object
-   * and the current position in canvas coordinate `transform.target` is a reference to the
-   * current object being transformed.
-   */
-  function pathActionHandler(eventData, transform, x, y) {
-    const {
-      target
-    } = transform;
-    const {
-      commandIndex,
-      pointIndex
-    } = this;
-    const actionPerformed = movePathPoint(target, x, y, commandIndex, pointIndex);
-    {
-      fireEvent(this.actionName, {
-        ...commonEventInfo(eventData, transform, x, y),
-        commandIndex,
-        pointIndex
-      });
-    }
-    return actionPerformed;
-  }
-  const indexFromPrevCommand = previousCommandType => previousCommandType === 'C' ? 5 : previousCommandType === 'Q' ? 3 : 1;
-  class PathPointControl extends Control {
-    constructor(options) {
-      super(options);
-    }
-    render(ctx, left, top, styleOverride, fabricObject) {
-      const overrides = {
-        ...styleOverride,
-        cornerColor: this.controlFill,
-        cornerStrokeColor: this.controlStroke,
-        transparentCorners: !this.controlFill
-      };
-      super.render(ctx, left, top, overrides, fabricObject);
-    }
-  }
-  class PathControlPointControl extends PathPointControl {
-    constructor(options) {
-      super(options);
-    }
-    render(ctx, left, top, styleOverride, fabricObject) {
-      const {
-        path
-      } = fabricObject;
-      const {
-        commandIndex,
-        pointIndex,
-        connectToCommandIndex,
-        connectToPointIndex
-      } = this;
-      ctx.save();
-      ctx.strokeStyle = this.controlStroke;
-      if (this.connectionDashArray) {
-        ctx.setLineDash(this.connectionDashArray);
-      }
-      const [commandType] = path[commandIndex];
-      const point = calcPathPointPosition(fabricObject, connectToCommandIndex, connectToPointIndex);
-      if (commandType === 'Q') {
-        // one control point connects to 2 points
-        const point2 = calcPathPointPosition(fabricObject, commandIndex, pointIndex + 2);
-        ctx.moveTo(point2.x, point2.y);
-        ctx.lineTo(left, top);
-      } else {
-        ctx.moveTo(left, top);
-      }
-      ctx.lineTo(point.x, point.y);
-      ctx.stroke();
-      ctx.restore();
-      super.render(ctx, left, top, styleOverride, fabricObject);
-    }
-  }
-  const createControl = (commandIndexPos, pointIndexPos, isControlPoint, options, connectToCommandIndex, connectToPointIndex) => new (isControlPoint ? PathControlPointControl : PathPointControl)({
-    commandIndex: commandIndexPos,
-    pointIndex: pointIndexPos,
-    actionName: ACTION_NAME,
-    positionHandler: pathPositionHandler,
-    actionHandler: pathActionHandler,
-    connectToCommandIndex,
-    connectToPointIndex,
-    ...options,
-    ...(isControlPoint ? options.controlPointStyle : options.pointStyle)
-  });
-  function createPathControls(path) {
-    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    const controls = {};
-    let previousCommandType = 'M';
-    path.path.forEach((command, commandIndex) => {
-      const commandType = command[0];
-      if (commandType !== 'Z') {
-        controls[`c_${commandIndex}_${commandType}`] = createControl(commandIndex, command.length - 2, false, options);
-      }
-      switch (commandType) {
-        case 'C':
-          controls[`c_${commandIndex}_C_CP_1`] = createControl(commandIndex, 1, true, options, commandIndex - 1, indexFromPrevCommand(previousCommandType));
-          controls[`c_${commandIndex}_C_CP_2`] = createControl(commandIndex, 3, true, options, commandIndex, 5);
-          break;
-        case 'Q':
-          controls[`c_${commandIndex}_Q_CP_1`] = createControl(commandIndex, 1, true, options, commandIndex, 3);
-          break;
-      }
-      previousCommandType = commandType;
-    });
-    return controls;
-  }
-
-  var index = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    changeWidth: changeWidth,
-    createObjectDefaultControls: createObjectDefaultControls,
-    createPathControls: createPathControls,
-    createPolyActionHandler: createPolyActionHandler,
-    createPolyControls: createPolyControls,
-    createPolyPositionHandler: createPolyPositionHandler,
-    createResizeControls: createResizeControls,
-    createTextboxDefaultControls: createTextboxDefaultControls,
-    dragHandler: dragHandler,
-    factoryPolyActionHandler: factoryPolyActionHandler,
-    getLocalPoint: getLocalPoint,
-    polyActionHandler: polyActionHandler,
-    renderCircleControl: renderCircleControl,
-    renderSquareControl: renderSquareControl,
-    rotationStyleHandler: rotationStyleHandler,
-    rotationWithSnapping: rotationWithSnapping,
-    scaleCursorStyleHandler: scaleCursorStyleHandler,
-    scaleOrSkewActionName: scaleOrSkewActionName,
-    scaleSkewCursorStyleHandler: scaleSkewCursorStyleHandler,
-    scalingEqually: scalingEqually,
-    scalingX: scalingX,
-    scalingXOrSkewingY: scalingXOrSkewingY,
-    scalingY: scalingY,
-    scalingYOrSkewingX: scalingYOrSkewingX,
-    skewCursorStyleHandler: skewCursorStyleHandler,
-    skewHandlerX: skewHandlerX,
-    skewHandlerY: skewHandlerY,
-    wrapWithFireEvent: wrapWithFireEvent,
-    wrapWithFixedAnchor: wrapWithFixedAnchor
-  });
-
   const isWebGLPipelineState = options => {
     return options.webgl !== undefined;
   };