fabric 7.0.0 → 7.2.0

package/dist/index.mjs

@@ -356,7 +356,7 @@ class Cache {
 }
 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;
@@ -2191,6 +2191,111 @@ const staticCanvasDefaults = {
   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.
@@ -2960,7 +3065,8 @@ class StaticCanvas extends createCollectionMixin(CommonMethods) {
     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);
@@ -3639,20 +3745,6 @@ const sendObjectToPlane = (object, from, to) => {
   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,
@@ -3855,33 +3947,6 @@ function getLocalPoint(_ref, originX, originY, x, y) {
   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, ' ');
 
 /**
@@ -4628,7 +4693,7 @@ const colorPropToSVG = function (prop, value) {
   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();
@@ -4681,7 +4746,7 @@ class FabricObjectSVGExportMixin {
       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('');
   }
 
   /**
@@ -4689,7 +4754,7 @@ class FabricObjectSVGExportMixin {
    * @return {String}
    */
   getSvgFilter() {
-    return this.shadow ? `filter: url(#SVGID_${this.shadow.id});` : '';
+    return this.shadow ? `filter: url(#SVGID_${escapeXml(this.shadow.id)});` : '';
   }
 
   /**
@@ -4697,7 +4762,7 @@ class FabricObjectSVGExportMixin {
    * @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('');
   }
 
   /**
@@ -4810,7 +4875,7 @@ class FabricObjectSVGExportMixin {
     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)}" ` : '';
   }
 }
 
@@ -4948,7 +5013,6 @@ const reViewBoxAttrValue = new RegExp(String.raw`^\s*(${reNum})${viewportSeparat
 
 (?:$|\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)');
@@ -5007,14 +5071,15 @@ class Shadow {
   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;
@@ -5022,7 +5087,7 @@ class Shadow {
     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`;
   }
 
   /**
@@ -6432,7 +6497,7 @@ class ObjectGeometry extends CommonMethods {
   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(),
@@ -7173,6 +7238,9 @@ let FabricObject$1 = class FabricObject extends ObjectGeometry {
     } else {
       this._renderBackground(ctx);
     }
+    this.fire('before:render', {
+      ctx
+    });
     this._render(ctx);
     this._drawClipPath(ctx, this.clipPath, context);
     this.fill = originalFill;
@@ -8173,6 +8241,20 @@ _defineProperty(FabricObject$1, "customProperties", []);
 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
@@ -8215,34 +8297,62 @@ function wrapWithFixedAnchor(actionHandler) {
   };
 }
 
-/**
- * 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
@@ -8255,33 +8365,24 @@ const changeWidth = wrapWithFireEvent(RESIZING, wrapWithFixedAnchor(changeObject
  * @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();
   }
@@ -8300,25 +8401,19 @@ function renderCircleControl(ctx, left, top, styleOverride, fabricObject) {
  * @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);
   }
@@ -8436,6 +8531,14 @@ class Control {
     _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 )
@@ -8578,6 +8681,41 @@ class Control {
     };
   }
 
+  /**
+   * 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.
@@ -10217,136 +10355,31 @@ const cloneStyles = style => {
 };
 
 /**
- * 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++) {
@@ -10904,7 +10937,7 @@ class Rect extends FabricObject {
       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`];
   }
 
   /**
@@ -11869,7 +11902,7 @@ class Group extends createCollectionMixin(FabricObject) {
    * @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('');
   }
@@ -13171,6 +13204,288 @@ const canvasDefaults = {
   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
@@ -13541,11 +13856,13 @@ class SelectableCanvas extends StaticCanvas {
    * 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
     };
@@ -13553,6 +13870,9 @@ class SelectableCanvas extends StaticCanvas {
       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;
@@ -13592,37 +13912,52 @@ class SelectableCanvas extends StaticCanvas {
         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;
@@ -16035,7 +16370,8 @@ class Gradient {
     }
     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,
@@ -16043,7 +16379,11 @@ class Gradient {
         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,
@@ -16053,9 +16393,15 @@ class Gradient {
         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
@@ -16063,16 +16409,17 @@ class Gradient {
           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,
@@ -16388,7 +16735,7 @@ class Pattern {
       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_ */
 
@@ -16670,8 +17017,7 @@ class Path extends FabricObject {
    * 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`];
   }
 
   /**
@@ -17222,15 +17568,17 @@ class Circle extends FabricObject {
    * 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,
@@ -17802,17 +18150,13 @@ class Line extends FabricObject {
       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
     };
   }
 
@@ -18030,7 +18374,7 @@ class Ellipse extends FabricObject {
    * 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`];
   }
 
   /**
@@ -18348,14 +18692,17 @@ class Polyline extends FabricObject {
    * 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`];
   }
 
   /**
@@ -18478,7 +18825,6 @@ class StyledText extends FabricObject {
     };
     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;
         }
@@ -18504,9 +18850,7 @@ class StyledText extends FabricObject {
     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;
@@ -18782,7 +19126,7 @@ class TextSVGExportMixin extends FabricObjectSVGExportMixin {
     } = _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'];
   }
 
   /**
@@ -18798,7 +19142,7 @@ class TextSVGExportMixin extends FabricObjectSVGExportMixin {
       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++) {
@@ -18906,7 +19250,7 @@ class TextSVGExportMixin extends FabricObjectSVGExportMixin {
       } = 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;
@@ -18914,7 +19258,7 @@ class TextSVGExportMixin extends FabricObjectSVGExportMixin {
         boxWidth += kernedWidth;
       }
     }
-    currentColor && textBgRects.push(...createSVGInlineRect(lastColor, leftOffset + boxStart, textTopOffset, boxWidth, heightOfLine));
+    currentColor && textBgRects.push(createSVGInlineRect(lastColor, leftOffset + boxStart, textTopOffset, boxWidth, heightOfLine));
   }
 
   /**
@@ -18941,7 +19285,6 @@ class TextSVGExportMixin extends FabricObjectSVGExportMixin {
       fontSize,
       fontStyle,
       fontWeight,
-      deltaY,
       textDecorationThickness,
       linethrough,
       overline,
@@ -18953,7 +19296,7 @@ class TextSVGExportMixin extends FabricObjectSVGExportMixin {
       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('');
   }
 
   /**
@@ -24517,13 +24860,13 @@ class FabricImage extends FabricObject {
     }
     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
@@ -24531,7 +24874,7 @@ class FabricImage extends FabricObject {
     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) {
@@ -25514,258 +25857,6 @@ function loadSVGFromURL(url, reviver) {
   });
 }
 
-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;
 };