fabric 6.0.0 → 6.0.2

package/dist/index.node.cjs

@@ -459,7 +459,7 @@ class Cache {
 }
 const cache = new Cache();
 
-var version = "6.0.0";
+var version = "6.0.2";
 
 // use this syntax so babel plugin see this import here
 const VERSION = version;
@@ -481,6 +481,22 @@ const BOTTOM = 'bottom';
 const RIGHT = 'right';
 const NONE = 'none';
 const reNewline = /\r?\n/;
+const MOVING = 'moving';
+const SCALING = 'scaling';
+const ROTATING = 'rotating';
+const ROTATE = 'rotate';
+const SKEWING = 'skewing';
+const RESIZING = 'resizing';
+const MODIFY_POLY = 'modifyPoly';
+const CHANGED = 'changed';
+const SCALE = 'scale';
+const SCALE_X = 'scaleX';
+const SCALE_Y = 'scaleY';
+const SKEW_X = 'skewX';
+const SKEW_Y = 'skewY';
+const FILL = 'fill';
+const STROKE = 'stroke';
+const MODIFIED = 'modified';
 
 /*
  * This Map connects the objects type value with their
@@ -671,6 +687,14 @@ class Observable {
     }
   }
 
+  /**
+   * Unsubscribe all event listeners for eventname.
+   * Do not use this pattern. You could kill internal fabricJS events.
+   * We know we should have protected events for internal flows, but we don't have yet
+   * @deprecated
+   * @param {string} eventName event name (eg. 'after:render')
+   */
+
   /**
    * unsubscribe an event listener
    * @param {string} eventName event name (eg. 'after:render')
@@ -1929,6 +1953,7 @@ const loadImage = function (url) {
   });
 };
 /**
+ * @TODO type this correctly.
  * Creates corresponding fabric instances from their object representations
  * @param {Object[]} objects Objects to enliven
  * @param {EnlivenObjectOptions} [options]
@@ -2839,7 +2864,7 @@ const createSVGRect = function (color, _ref) {
     height
   } = _ref;
   let precision = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : config.NUM_FRACTION_DIGITS;
-  const svgColor = colorPropToSVG('fill', color, false);
+  const svgColor = colorPropToSVG(FILL, color, false);
   const [x, y, w, h] = [left, top, width, height].map(value => toFixed(value, precision));
   return "<rect ".concat(svgColor, " x=\"").concat(x, "\" y=\"").concat(y, "\" width=\"").concat(w, "\" height=\"").concat(h, "\"></rect>");
 };
@@ -4741,7 +4766,7 @@ const dragHandler = (eventData, transform, x, y) => {
   moveX && target.set(LEFT, newLeft);
   moveY && target.set(TOP, newTop);
   if (moveX || moveY) {
-    fireEvent('moving', commonEventInfo(eventData, transform, x, y));
+    fireEvent(MOVING, commonEventInfo(eventData, transform, x, y));
   }
   return moveX || moveY;
 };
@@ -4769,8 +4794,8 @@ class FabricObjectSVGExportMixin {
       opacity = typeof this.opacity !== 'undefined' ? this.opacity : '1',
       visibility = this.visible ? '' : ' visibility: hidden;',
       filter = skipShadow ? '' : this.getSvgFilter(),
-      fill = colorPropToSVG('fill', this.fill),
-      stroke = colorPropToSVG('stroke', this.stroke);
+      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('');
   }
 
@@ -4900,7 +4925,7 @@ class FabricObjectSVGExportMixin {
     return reviver ? reviver(markup.join('')) : markup.join('');
   }
   addPaintOrder() {
-    return this.paintFirst !== 'fill' ? " paint-order=\"".concat(this.paintFirst, "\" ") : '';
+    return this.paintFirst !== FILL ? " paint-order=\"".concat(this.paintFirst, "\" ") : '';
   }
 }
 
@@ -6288,8 +6313,8 @@ class ObjectGeometry extends ObjectOrigin {
    * @return {void}
    */
   scale(value) {
-    this._set('scaleX', value);
-    this._set('scaleY', value);
+    this._set(SCALE_X, value);
+    this._set(SCALE_Y, value);
     this.setCoords();
   }
 
@@ -6676,7 +6701,7 @@ class AnimatableObject extends StackedObject {
  * List of properties to consider for animating colors.
  * @type String[]
  */
-_defineProperty(AnimatableObject, "colorProperties", ['fill', 'stroke', 'backgroundColor']);
+_defineProperty(AnimatableObject, "colorProperties", [FILL, STROKE, 'backgroundColor']);
 
 function getSvgRegex(arr) {
   return new RegExp('^(' + arr.join('|') + ')\\b', 'i');
@@ -6892,8 +6917,8 @@ classRegistry.setClass(Shadow, 'shadow');
 
 const cloneDeep = object => JSON.parse(JSON.stringify(object));
 
-const stateProperties = [TOP, LEFT, 'scaleX', 'scaleY', 'flipX', 'flipY', 'originX', 'originY', 'angle', 'opacity', 'globalCompositeOperation', 'shadow', 'visible', 'skewX', 'skewY'];
-const cacheProperties = ['fill', 'stroke', 'strokeWidth', 'strokeDashArray', 'width', 'height', 'paintFirst', 'strokeUniform', 'strokeLineCap', 'strokeDashOffset', 'strokeLineJoin', 'strokeMiterLimit', 'backgroundColor', 'clipPath'];
+const stateProperties = [TOP, LEFT, SCALE_X, SCALE_Y, 'flipX', 'flipY', 'originX', 'originY', 'angle', 'opacity', 'globalCompositeOperation', 'shadow', 'visible', SKEW_X, SKEW_Y];
+const cacheProperties = [FILL, STROKE, 'strokeWidth', 'strokeDashArray', 'width', 'height', 'paintFirst', 'strokeUniform', 'strokeLineCap', 'strokeDashOffset', 'strokeLineJoin', 'strokeMiterLimit', 'backgroundColor', 'clipPath'];
 const fabricObjectDefaultValues = {
   // see composeMatrix() to see order of transforms. First defaults listed based on this
   top: 0,
@@ -6914,7 +6939,7 @@ const fabricObjectDefaultValues = {
   strokeUniform: false,
   padding: 0,
   opacity: 1,
-  paintFirst: 'fill',
+  paintFirst: FILL,
   fill: 'rgb(0,0,0)',
   fillRule: 'nonzero',
   stroke: null,
@@ -7005,18 +7030,20 @@ let FabricObject$1 = class FabricObject extends AnimatableObject {
   }
 
   /**
-   * The class type. Used to identify which class this is.
-   * This is used for serialization purposes and internally it can be used
-   * to identify classes. As a developer you could use `instance of Class`
-   * but to avoid importing all the code and blocking tree shaking we try
-   * to avoid doing that.
+   * The class type.
+   * This is used for serialization and deserialization purposes and internally it can be used
+   * to identify classes.
+   * When we transform a class in a plain JS object we need a way to recognize which class it was,
+   * and the type is the way we do that. It has no other purposes and you should not give one.
+   * Hard to reach on instances and please do not use to drive instance's logic (this.constructor.type).
+   * To idenfity a class use instanceof class ( instanceof Rect ).
+   * We do not do that in fabricJS code because we want to try to have code splitting possible.
    */
 
   /**
    * Legacy identifier of the class. Prefer using utils like isType or instanceOf
    * Will be removed in fabric 7 or 8.
-   * The setter exists because is very hard to catch all the ways in which a type value
-   * could be set in the instance
+   * The setter exists to avoid type errors in old code and possibly current deserialization code.
    * @TODO add sustainable warning message
    * @type string
    * @deprecated
@@ -7387,10 +7414,10 @@ let FabricObject$1 = class FabricObject extends AnimatableObject {
    * @param {*} value
    */
   _set(key, value) {
-    if (key === 'scaleX' || key === 'scaleY') {
+    if (key === SCALE_X || key === SCALE_Y) {
       value = this._constrainScale(value);
     }
-    if (key === 'scaleX' && value < 0) {
+    if (key === SCALE_X && value < 0) {
       this.flipX = !this.flipX;
       value *= -1;
     } else if (key === 'scaleY' && value < 0) {
@@ -7511,7 +7538,7 @@ let FabricObject$1 = class FabricObject extends AnimatableObject {
    * @returns Boolean
    */
   needsItsOwnCache() {
-    if (this.paintFirst === 'stroke' && this.hasFill() && this.hasStroke() && !!this.shadow) {
+    if (this.paintFirst === STROKE && this.hasFill() && this.hasStroke() && !!this.shadow) {
       return true;
     }
     if (this.clipPath) {
@@ -7806,7 +7833,7 @@ let FabricObject$1 = class FabricObject extends AnimatableObject {
    * @param {CanvasRenderingContext2D} ctx Context to render on
    */
   _renderPaintInOrder(ctx) {
-    if (this.paintFirst === 'stroke') {
+    if (this.paintFirst === STROKE) {
       this._renderStroke(ctx);
       this._renderFill(ctx);
     } else {
@@ -8283,7 +8310,7 @@ const changeObjectWidth = (eventData, transform, x, y) => {
   }
   return false;
 };
-const changeWidth = wrapWithFireEvent('resizing', wrapWithFixedAnchor(changeObjectWidth));
+const changeWidth = wrapWithFireEvent(RESIZING, wrapWithFixedAnchor(changeObjectWidth));
 
 /**
  * Render a round control, as per fabric features.
@@ -8301,7 +8328,7 @@ function renderCircleControl(ctx, left, top, styleOverride, fabricObject) {
   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',
+    methodName = transparentCorners ? STROKE : FILL,
     stroke = !transparentCorners && (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor);
   let myLeft = left,
     myTop = top,
@@ -8348,7 +8375,7 @@ function renderSquareControl(ctx, left, top, styleOverride, fabricObject) {
   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',
+    methodName = transparentCorners ? STROKE : FILL,
     stroke = !transparentCorners && (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor),
     xSizeBy2 = xSize / 2,
     ySizeBy2 = ySize / 2;
@@ -8393,7 +8420,7 @@ class Control {
      * @type {String}
      * @default 'scale'
      */
-    _defineProperty(this, "actionName", 'scale');
+    _defineProperty(this, "actionName", SCALE);
     /**
      * Drawing angle of the control.
      * NOT used for now, but name marked as needed for internal logic
@@ -8711,7 +8738,7 @@ const rotateObjectWithSnapping = (eventData, _ref, x, y) => {
   target.angle = angle;
   return hasRotated;
 };
-const rotationWithSnapping = wrapWithFireEvent('rotating', wrapWithFixedAnchor(rotateObjectWithSnapping));
+const rotationWithSnapping = wrapWithFireEvent(ROTATING, wrapWithFixedAnchor(rotateObjectWithSnapping));
 
 /**
  * Inspect event and fabricObject properties to understand if the scaling action
@@ -8860,12 +8887,12 @@ function scaleObject(eventData, transform, x, y) {
   const oldScaleX = target.scaleX,
     oldScaleY = target.scaleY;
   if (!by) {
-    !isLocked(target, 'lockScalingX') && target.set('scaleX', scaleX);
-    !isLocked(target, 'lockScalingY') && target.set('scaleY', scaleY);
+    !isLocked(target, 'lockScalingX') && target.set(SCALE_X, scaleX);
+    !isLocked(target, 'lockScalingY') && target.set(SCALE_Y, scaleY);
   } else {
     // forbidden cases already handled on top here.
-    by === 'x' && target.set('scaleX', scaleX);
-    by === 'y' && target.set('scaleY', scaleY);
+    by === 'x' && target.set(SCALE_X, scaleX);
+    by === 'y' && target.set(SCALE_Y, scaleY);
   }
   return oldScaleX !== target.scaleX || oldScaleY !== target.scaleY;
 }
@@ -8912,24 +8939,24 @@ const scaleObjectY = (eventData, transform, x, y) => {
     by: 'y'
   });
 };
-const scalingEqually = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectFromCorner));
-const scalingX = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectX));
-const scalingY = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectY));
+const scalingEqually = wrapWithFireEvent(SCALING, wrapWithFixedAnchor(scaleObjectFromCorner));
+const scalingX = wrapWithFireEvent(SCALING, wrapWithFixedAnchor(scaleObjectX));
+const scalingY = wrapWithFireEvent(SCALING, wrapWithFixedAnchor(scaleObjectY));
 
 const _excluded$d = ["target", "ex", "ey", "skewingSide"];
 const AXIS_KEYS = {
   x: {
     counterAxis: 'y',
-    scale: 'scaleX',
-    skew: 'skewX',
+    scale: SCALE_X,
+    skew: SKEW_X,
     lockSkewing: 'lockSkewingX',
     origin: 'originX',
     flip: 'flipX'
   },
   y: {
     counterAxis: 'x',
-    scale: 'scaleY',
-    skew: 'skewY',
+    scale: SCALE_Y,
+    skew: SKEW_Y,
     lockSkewing: 'lockSkewingY',
     origin: 'originY',
     flip: 'flipY'
@@ -9008,7 +9035,7 @@ function skewObject(axis, _ref, pointer) {
       }),
       dimAfter = target._getTransformedDimensions(),
       compensationFactor = skewX !== 0 ? dimBefore.x / dimAfter.x : 1;
-    compensationFactor !== 1 && target.set('scaleX', compensationFactor * scaleX);
+    compensationFactor !== 1 && target.set(SCALE_X, compensationFactor * scaleX);
   }
   return changed;
 }
@@ -9054,7 +9081,7 @@ function skewHandler(axis, eventData, transform, x, y) {
     // anchor to the opposite side of the skewing direction
     // normalize value from [-1, 1] to origin value [0, 1]
     origin = -skewingDirection * 0.5 + 0.5;
-  const finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor((eventData, transform, x, y) => skewObject(axis, transform, new Point(x, y))));
+  const finalHandler = wrapWithFireEvent(SKEWING, wrapWithFixedAnchor((eventData, transform, x, y) => skewObject(axis, transform, new Point(x, y))));
   return finalHandler(eventData, _objectSpread2(_objectSpread2({}, transform), {}, {
     [originKey]: origin,
     skewingSide
@@ -9102,11 +9129,11 @@ const scaleOrSkewActionName = (eventData, control, fabricObject) => {
   const isAlternative = isAltAction(eventData, fabricObject);
   if (control.x === 0) {
     // then is scaleY or skewX
-    return isAlternative ? 'skewX' : 'scaleY';
+    return isAlternative ? SKEW_X : SCALE_Y;
   }
   if (control.y === 0) {
     // then is scaleY or skewX
-    return isAlternative ? 'skewY' : 'scaleX';
+    return isAlternative ? SKEW_Y : SCALE_X;
   }
   return '';
 };
@@ -9208,7 +9235,7 @@ const createObjectDefaultControls = () => ({
     cursorStyleHandler: rotationStyleHandler,
     offsetY: -40,
     withConnection: true,
-    actionName: 'rotate'
+    actionName: ROTATE
   })
 });
 const createResizeControls = () => ({
@@ -9217,14 +9244,14 @@ const createResizeControls = () => ({
     y: 0,
     actionHandler: changeWidth,
     cursorStyleHandler: scaleSkewCursorStyleHandler,
-    actionName: 'resizing'
+    actionName: RESIZING
   }),
   ml: new Control({
     x: -0.5,
     y: 0,
     actionHandler: changeWidth,
     cursorStyleHandler: scaleSkewCursorStyleHandler,
-    actionName: 'resizing'
+    actionName: RESIZING
   })
 });
 const createTextboxDefaultControls = () => _objectSpread2(_objectSpread2({}, createObjectDefaultControls()), createResizeControls());
@@ -9268,7 +9295,7 @@ class InteractiveFabricObject extends FabricObject$1 {
       const transform = targetCanvas._currentTransform,
         target = transform.target,
         action = transform.action;
-      if (this === target && action && action.startsWith('scale')) {
+      if (this === target && action && action.startsWith(SCALE)) {
         return false;
       }
     }
@@ -10424,7 +10451,7 @@ const stylesFromArray = (styles, text) => {
  * Attributes parsed from all SVG elements
  * @type array
  */
-const SHARED_ATTRIBUTES = ['display', 'transform', 'fill', 'fill-opacity', 'fill-rule', 'opacity', 'stroke', 'stroke-dasharray', 'stroke-linecap', 'stroke-dashoffset', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'id', 'paint-order', 'vector-effect', 'instantiated_by_use', 'clip-path'];
+const SHARED_ATTRIBUTES = ['display', 'transform', FILL, 'fill-opacity', 'fill-rule', 'opacity', STROKE, 'stroke-dasharray', 'stroke-linecap', 'stroke-dashoffset', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'id', 'paint-order', 'vector-effect', 'instantiated_by_use', 'clip-path'];
 
 function selectorMatches(element, selector) {
   const nodeName = element.nodeName;
@@ -10556,7 +10583,7 @@ function parseTransformAttribute(attributeValue) {
       case 'translate':
         matrix = createTranslateMatrix(arg0, arg1);
         break;
-      case 'rotate':
+      case ROTATE:
         matrix = createRotateMatrix({
           angle: arg0
         }, {
@@ -10564,13 +10591,13 @@ function parseTransformAttribute(attributeValue) {
           y: arg2
         });
         break;
-      case 'scale':
+      case SCALE:
         matrix = createScaleMatrix(arg0, arg1);
         break;
-      case 'skewX':
+      case SKEW_X:
         matrix = createSkewXMatrix(arg0);
         break;
-      case 'skewY':
+      case SKEW_Y:
         matrix = createSkewYMatrix(arg0);
         break;
       case 'matrix':
@@ -10588,7 +10615,7 @@ function normalizeValue(attr, value, parentAttributes, fontSize) {
   const isArray = Array.isArray(value);
   let parsed;
   let ouputValue = value;
-  if ((attr === 'fill' || attr === 'stroke') && value === NONE) {
+  if ((attr === FILL || attr === STROKE) && value === NONE) {
     ouputValue = '';
   } else if (attr === 'strokeUniform') {
     return value === 'non-scaling-stroke';
@@ -10621,13 +10648,13 @@ function normalizeValue(attr, value, parentAttributes, fontSize) {
     // parseUnit returns px and we convert it to em
     parsed = parseUnit(value, fontSize) / fontSize * 1000;
   } else if (attr === 'paintFirst') {
-    const fillIndex = value.indexOf('fill');
-    const strokeIndex = value.indexOf('stroke');
-    ouputValue = 'fill';
+    const fillIndex = value.indexOf(FILL);
+    const strokeIndex = value.indexOf(STROKE);
+    ouputValue = FILL;
     if (fillIndex > -1 && strokeIndex > -1 && strokeIndex < fillIndex) {
-      ouputValue = 'stroke';
+      ouputValue = STROKE;
     } else if (fillIndex === -1 && strokeIndex > -1) {
-      ouputValue = 'stroke';
+      ouputValue = STROKE;
     }
   } else if (attr === 'href' || attr === 'xlink:href' || attr === 'font') {
     return value;
@@ -11001,16 +11028,21 @@ class LayoutStrategy {
       return this.calcBoundingBox(objects, context);
     }
   }
-  shouldPerformLayout(context) {
-    return context.type === LAYOUT_TYPE_INITIALIZATION || context.type === LAYOUT_TYPE_IMPERATIVE || !!context.prevStrategy && context.strategy !== context.prevStrategy;
+  shouldPerformLayout(_ref) {
+    let {
+      type,
+      prevStrategy,
+      strategy
+    } = _ref;
+    return type === LAYOUT_TYPE_INITIALIZATION || type === LAYOUT_TYPE_IMPERATIVE || !!prevStrategy && strategy !== prevStrategy;
   }
-  shouldLayoutClipPath(_ref) {
+  shouldLayoutClipPath(_ref2) {
     let {
       type,
       target: {
         clipPath
       }
-    } = _ref;
+    } = _ref2;
     return type !== LAYOUT_TYPE_INITIALIZATION && clipPath && !clipPath.absolutePositioned;
   }
   getInitialSize(context, result) {
@@ -11021,15 +11053,16 @@ class LayoutStrategy {
    * Override this method to customize layout.
    */
   calcBoundingBox(objects, context) {
-    if (context.type === LAYOUT_TYPE_IMPERATIVE && context.overrides) {
+    const {
+      type,
+      target
+    } = context;
+    if (type === LAYOUT_TYPE_IMPERATIVE && context.overrides) {
       return context.overrides;
     }
     if (objects.length === 0) {
       return;
     }
-    const {
-      target
-    } = context;
     const {
       left,
       top,
@@ -11039,7 +11072,7 @@ class LayoutStrategy {
     const bboxSize = new Point(width, height);
     const bboxLeftTop = new Point(left, top);
     const bboxCenter = bboxLeftTop.add(bboxSize.scalarDivide(2));
-    if (context.type === LAYOUT_TYPE_INITIALIZATION) {
+    if (type === LAYOUT_TYPE_INITIALIZATION) {
       const actualSize = this.getInitialSize(context, {
         size: bboxSize,
         center: bboxCenter
@@ -11123,7 +11156,7 @@ class LayoutManager {
     const {
       target
     } = context;
-    return ['modified', 'moving', 'resizing', 'rotating', 'scaling', 'skewing', 'changed', 'modifyPoly'].map(key => object.on(key, e => this.performLayout(key === 'modified' ? {
+    return [MODIFIED, MOVING, RESIZING, ROTATING, SCALING, SKEWING, CHANGED, MODIFY_POLY].map(key => object.on(key, e => this.performLayout(key === MODIFIED ? {
       type: LAYOUT_TYPE_OBJECT_MODIFIED,
       trigger: key,
       e,
@@ -11195,13 +11228,15 @@ class LayoutManager {
   }
   getLayoutResult(context) {
     const {
-      target
+      target,
+      strategy,
+      type
     } = context;
-    const result = context.strategy.calcLayoutResult(context, target.getObjects());
+    const result = strategy.calcLayoutResult(context, target.getObjects());
     if (!result) {
       return;
     }
-    const prevCenter = context.type === LAYOUT_TYPE_INITIALIZATION ? new Point() : target.getRelativeCenterPoint();
+    const prevCenter = type === LAYOUT_TYPE_INITIALIZATION ? new Point() : target.getRelativeCenterPoint();
     const {
       center: nextCenter,
       correction = new Point(),
@@ -11209,7 +11244,7 @@ class LayoutManager {
     } = result;
     const offset = prevCenter.subtract(nextCenter).add(correction).transform(
     // in `initialization` we do not account for target's transformation matrix
-    context.type === LAYOUT_TYPE_INITIALIZATION ? iMatrix : invertTransform(target.calcOwnMatrix()), true).add(relativeCorrection);
+    type === LAYOUT_TYPE_INITIALIZATION ? iMatrix : invertTransform(target.calcOwnMatrix()), true).add(relativeCorrection);
     return {
       result,
       prevCenter,
@@ -11314,8 +11349,11 @@ class LayoutManager {
     target.set('dirty', true);
   }
   dispose() {
-    this._subscriptions.forEach(disposers => disposers.forEach(d => d()));
-    this._subscriptions.clear();
+    const {
+      _subscriptions
+    } = this;
+    _subscriptions.forEach(disposers => disposers.forEach(d => d()));
+    _subscriptions.clear();
   }
   toObject() {
     return {
@@ -12873,8 +12911,8 @@ const _assignTransformMatrixProps = object => {
     } = qrDecompose(object.transformMatrix);
     object.flipX = false;
     object.flipY = false;
-    object.set('scaleX', scaleX);
-    object.set('scaleY', scaleY);
+    object.set(SCALE_X, scaleX);
+    object.set(SCALE_Y, scaleY);
     object.angle = angle;
     object.skewX = skewX;
     object.skewY = 0;
@@ -13498,9 +13536,9 @@ class SelectableCanvas extends StaticCanvas$1 {
       return;
     }
     let centerTransform;
-    if (action === 'scale' || action === 'scaleX' || action === 'scaleY' || action === 'resizing') {
+    if (action === SCALE || action === SCALE_X || action === SCALE_Y || action === RESIZING) {
       centerTransform = this.centeredScaling || target.centeredScaling;
-    } else if (action === 'rotate') {
+    } else if (action === ROTATE) {
       centerTransform = this.centeredRotation || target.centeredRotation;
     }
     return centerTransform ? !modifierKeyPressed : modifierKeyPressed;
@@ -14129,7 +14167,7 @@ class SelectableCanvas extends StaticCanvas$1 {
     target.setCoords();
     if (transform.actionPerformed) {
       this.fire('object:modified', options);
-      target.fire('modified', options);
+      target.fire(MODIFIED, options);
     }
   }
 
@@ -14216,7 +14254,7 @@ class SelectableCanvas extends StaticCanvas$1 {
       group
     } = instance;
     if (group && isActiveSelection(group) && this._activeObject === group) {
-      const layoutProps = ['angle', 'flipX', 'flipY', LEFT, 'scaleX', 'scaleY', 'skewX', 'skewY', TOP];
+      const layoutProps = ['angle', 'flipX', 'flipY', LEFT, SCALE_X, SCALE_Y, SKEW_X, SKEW_Y, TOP];
       const originalValues = pick(instance, layoutProps);
       addTransformToObject(instance, group.calcOwnMatrix());
       return originalValues;
@@ -16946,7 +16984,7 @@ class Circle extends FabricObject {
    * @return {Number}
    */
   getRadiusX() {
-    return this.get('radius') * this.get('scaleX');
+    return this.get('radius') * this.get(SCALE_X);
   }
 
   /**
@@ -16954,7 +16992,7 @@ class Circle extends FabricObject {
    * @return {Number}
    */
   getRadiusY() {
-    return this.get('radius') * this.get('scaleY');
+    return this.get('radius') * this.get(SCALE_Y);
   }
 
   /**
@@ -17775,7 +17813,7 @@ class Ellipse extends FabricObject {
    * @return {Number}
    */
   getRx() {
-    return this.get('rx') * this.get('scaleX');
+    return this.get('rx') * this.get(SCALE_X);
   }
 
   /**
@@ -17783,7 +17821,7 @@ class Ellipse extends FabricObject {
    * @return {Number}
    */
   getRy() {
-    return this.get('ry') * this.get('scaleY');
+    return this.get('ry') * this.get(SCALE_Y);
   }
 
   /**
@@ -18089,7 +18127,7 @@ class Polyline extends FabricObject {
   _set(key, value) {
     const changed = this.initialized && this[key] !== value;
     const output = super._set(key, value);
-    if (this.exactBoundingBox && changed && ((key === 'scaleX' || key === 'scaleY') && this.strokeUniform && this.constructor.layoutProperties.includes('strokeUniform') || this.constructor.layoutProperties.includes(key))) {
+    if (this.exactBoundingBox && changed && ((key === SCALE_X || key === SCALE_Y) && this.strokeUniform && this.constructor.layoutProperties.includes('strokeUniform') || this.constructor.layoutProperties.includes(key))) {
       this.setDimensions();
     }
     return output;
@@ -18208,7 +18246,7 @@ class Polyline extends FabricObject {
  */
 _defineProperty(Polyline, "ownDefaults", polylineDefaultValues);
 _defineProperty(Polyline, "type", 'Polyline');
-_defineProperty(Polyline, "layoutProperties", ['skewX', 'skewY', 'strokeLineCap', 'strokeLineJoin', 'strokeMiterLimit', 'strokeWidth', 'strokeUniform', 'points']);
+_defineProperty(Polyline, "layoutProperties", [SKEW_X, SKEW_Y, 'strokeLineCap', 'strokeLineJoin', 'strokeMiterLimit', 'strokeWidth', 'strokeUniform', 'points']);
 _defineProperty(Polyline, "cacheProperties", [...cacheProperties, 'points']);
 _defineProperty(Polyline, "ATTRIBUTE_NAMES", [...SHARED_ATTRIBUTES]);
 classRegistry.setClass(Polyline);
@@ -18228,7 +18266,7 @@ const fontProperties = ['fontSize', 'fontWeight', 'fontFamily', 'fontStyle'];
 const textDecorationProperties = ['underline', 'overline', 'linethrough'];
 const textLayoutProperties = [...fontProperties, 'lineHeight', 'text', 'charSpacing', 'textAlign', 'styles', 'path', 'pathStartOffset', 'pathSide', 'pathAlign'];
 const additionalProps = [...textLayoutProperties, ...textDecorationProperties, 'textBackgroundColor', 'direction'];
-const styleProperties = [...fontProperties, ...textDecorationProperties, 'stroke', 'strokeWidth', 'fill', 'deltaY', 'textBackgroundColor'];
+const styleProperties = [...fontProperties, ...textDecorationProperties, STROKE, 'strokeWidth', FILL, 'deltaY', 'textBackgroundColor'];
 
 // @TODO: Many things here are configuration related and shouldn't be on the class nor prototype
 // regexes, list of properties that are not suppose to change by instances, magic consts.
@@ -18750,7 +18788,7 @@ class TextSVGExportMixin extends FabricObjectSVGExportMixin {
       deltaY
     } = style;
     const textDecoration = this.getSvgTextDecoration(style);
-    return [stroke ? colorPropToSVG('stroke', stroke) : '', strokeWidth ? "stroke-width: ".concat(strokeWidth, "; ") : '', fontFamily ? "font-family: ".concat(!fontFamily.includes("'") && !fontFamily.includes('"') ? "'".concat(fontFamily, "'") : fontFamily, "; ") : '', fontSize ? "font-size: ".concat(fontSize, "px; ") : '', fontStyle ? "font-style: ".concat(fontStyle, "; ") : '', fontWeight ? "font-weight: ".concat(fontWeight, "; ") : '', textDecoration ? "text-decoration: ".concat(textDecoration, "; ") : textDecoration, fill ? colorPropToSVG('fill', fill) : '', deltaY ? "baseline-shift: ".concat(-deltaY, "; ") : '', useWhiteSpace ? 'white-space: pre; ' : ''].join('');
+    return [stroke ? colorPropToSVG(STROKE, stroke) : '', strokeWidth ? "stroke-width: ".concat(strokeWidth, "; ") : '', fontFamily ? "font-family: ".concat(!fontFamily.includes("'") && !fontFamily.includes('"') ? "'".concat(fontFamily, "'") : fontFamily, "; ") : '', fontSize ? "font-size: ".concat(fontSize, "px; ") : '', fontStyle ? "font-style: ".concat(fontStyle, "; ") : '', fontWeight ? "font-weight: ".concat(fontWeight, "; ") : '', textDecoration ? "text-decoration: ".concat(textDecoration, "; ") : textDecoration, fill ? colorPropToSVG(FILL, fill) : '', deltaY ? "baseline-shift: ".concat(-deltaY, "; ") : '', useWhiteSpace ? 'white-space: pre; ' : ''].join('');
   }
 
   /**
@@ -18984,7 +19022,7 @@ class FabricText extends StyledText {
    * @param {CanvasRenderingContext2D} ctx Context to render on
    */
   _renderText(ctx) {
-    if (this.paintFirst === 'stroke') {
+    if (this.paintFirst === STROKE) {
       this._renderTextStroke(ctx);
       this._renderTextFill(ctx);
     } else {
@@ -19388,7 +19426,7 @@ class FabricText extends StyledText {
    * @param {CanvasRenderingContext2D} ctx Context to render on
    */
   _renderTextFill(ctx) {
-    if (!this.fill && !this.styleHas('fill')) {
+    if (!this.fill && !this.styleHas(FILL)) {
       return;
     }
     this._renderTextCommon(ctx, 'fillText');
@@ -19775,7 +19813,7 @@ class FabricText extends StyledText {
       let boxStart = 0;
       let boxWidth = 0;
       let lastDecoration = this.getValueOfPropertyAt(i, 0, type);
-      let lastFill = this.getValueOfPropertyAt(i, 0, 'fill');
+      let lastFill = this.getValueOfPropertyAt(i, 0, FILL);
       let currentDecoration;
       let currentFill;
       const top = topOffset + maxHeight * (1 - this._fontSizeFraction);
@@ -19784,7 +19822,7 @@ class FabricText extends StyledText {
       for (let j = 0, jlen = line.length; j < jlen; j++) {
         const charBox = this.__charBounds[i][j];
         currentDecoration = this.getValueOfPropertyAt(i, j, type);
-        currentFill = this.getValueOfPropertyAt(i, j, 'fill');
+        currentFill = this.getValueOfPropertyAt(i, j, FILL);
         const currentSize = this.getHeightOfChar(i, j);
         const currentDy = this.getValueOfPropertyAt(i, j, 'deltaY');
         if (path && currentDecoration && currentFill) {
@@ -20311,7 +20349,7 @@ class DraggableTextDelegate {
       target.hiddenTextarea.value = target.text;
       target._updateTextarea();
       target.hiddenTextarea.focus();
-      target.fire('changed', {
+      target.fire(CHANGED, {
         index: insertAt + selectionStartOffset,
         action: 'drop'
       });
@@ -20357,7 +20395,7 @@ class DraggableTextDelegate {
             target.selectionStart = target.selectionEnd = selectionStart;
             target.hiddenTextarea && (target.hiddenTextarea.value = target.text);
             target._updateTextarea();
-            target.fire('changed', {
+            target.fire(CHANGED, {
               index: selectionStart,
               action: 'dragend'
             });
@@ -20935,7 +20973,7 @@ class ITextBehavior extends FabricText {
       this.setCoords();
     }
     this.fire('editing:exited');
-    isTextChanged && this.fire('modified');
+    isTextChanged && this.fire(MODIFIED);
     if (this.canvas) {
       this.canvas.fire('text:editing:exited', {
         target: this
@@ -21414,7 +21452,7 @@ class ITextKeyBehavior extends ITextBehavior {
     }
     const updateAndFire = () => {
       this.updateFromTextArea();
-      this.fire('changed');
+      this.fire(CHANGED);
       if (this.canvas) {
         this.canvas.fire('text:changed', {
           target: this
@@ -22515,7 +22553,7 @@ class IText extends ITextClickBehavior {
       // and why can't happen at the top of the function
       this.renderSelection(ctx, boundaries);
     }
-    ctx.fillStyle = this.cursorColor || this.getValueOfPropertyAt(lineIndex, charIndex, 'fill');
+    ctx.fillStyle = this.cursorColor || this.getValueOfPropertyAt(lineIndex, charIndex, FILL);
     ctx.globalAlpha = this._currentCursorOpacity;
     ctx.fillRect(boundaries.left + boundaries.leftOffset - cursorWidth / 2, topOffset + boundaries.top + dy, cursorWidth, charHeight);
   }
@@ -22632,7 +22670,7 @@ class IText extends ITextClickBehavior {
    */
   getCurrentCharColor() {
     const cp = this._getCurrentCharIndex();
-    return this.getValueOfPropertyAt(cp.l, cp.c, 'fill');
+    return this.getValueOfPropertyAt(cp.l, cp.c, FILL);
   }
 
   /**
@@ -23222,7 +23260,8 @@ class ClipPathLayout extends LayoutStrategy {
       target
     } = context;
     const {
-      clipPath
+      clipPath,
+      group
     } = target;
     if (!clipPath || !this.shouldPerformLayout(context)) {
       return;
@@ -23234,9 +23273,8 @@ class ClipPathLayout extends LayoutStrategy {
     } = makeBoundingBoxFromPoints(getObjectBounds(target, clipPath));
     const size = new Point(width, height);
     if (clipPath.absolutePositioned) {
-      var _target$group;
       //  we want the center point to exist in group's containing plane
-      const clipPathCenter = sendPointToPlane(clipPath.getRelativeCenterPoint(), undefined, (_target$group = target.group) === null || _target$group === void 0 ? void 0 : _target$group.calcTransformMatrix());
+      const clipPathCenter = sendPointToPlane(clipPath.getRelativeCenterPoint(), undefined, group ? group.calcTransformMatrix() : undefined);
       return {
         center: clipPathCenter,
         size
@@ -24202,7 +24240,7 @@ class FabricImage extends FabricObject {
       strokeSvg = ["\t<rect x=\"".concat(x, "\" y=\"").concat(y, "\" width=\"").concat(this.width, "\" height=\"").concat(this.height, "\" style=\"").concat(this.getSvgStyles(), "\" />\n")];
       this.fill = origFill;
     }
-    if (this.paintFirst !== 'fill') {
+    if (this.paintFirst !== FILL) {
       svgString = svgString.concat(strokeSvg, imageMarkup);
     } else {
       svgString = svgString.concat(imageMarkup, strokeSvg);
@@ -24949,8 +24987,8 @@ class ElementsParser {
     const klass = findTag(el);
     if (klass) {
       const obj = await klass.fromElement(el, this.options, this.cssRules);
-      this.resolveGradient(obj, el, 'fill');
-      this.resolveGradient(obj, el, 'stroke');
+      this.resolveGradient(obj, el, FILL);
+      this.resolveGradient(obj, el, STROKE);
       if (obj instanceof FabricImage && obj._originalElement) {
         removeTransformMatrixForSvgParsing(obj, obj.parsePreserveAspectRatioAttribute());
       } else {
@@ -25176,7 +25214,7 @@ function loadSVGFromURL(url, reviver) {
   });
 }
 
-const ACTION_NAME = 'modifyPoly';
+const ACTION_NAME = MODIFY_POLY;
 /**
  * This function locates the controls.
  * It'll be used both for drawing and for interaction.
@@ -26075,7 +26113,7 @@ class Blur extends BaseFilter {
    */
   sendUniformData(gl, uniformLocations) {
     const delta = this.chooseRightDelta();
-    gl.uniform2fv(uniformLocations.delta, delta);
+    gl.uniform2fv(uniformLocations.uDelta, delta);
   }
   isNeutralState() {
     return this.blur === 0;
@@ -27030,7 +27068,7 @@ class Pixelate extends BaseFilter {
 }
 _defineProperty(Pixelate, "type", 'Pixelate');
 _defineProperty(Pixelate, "defaults", pixelateDefaultValues);
-_defineProperty(Pixelate, "uniformLocations", ['uBlockSize']);
+_defineProperty(Pixelate, "uniformLocations", ['uBlocksize']);
 classRegistry.setClass(Pixelate);
 
 const fragmentShader = "\nprecision highp float;\nuniform sampler2D uTexture;\nuniform vec4 uLow;\nuniform vec4 uHigh;\nvarying vec2 vTexCoord;\nvoid main() {\n  gl_FragColor = texture2D(uTexture, vTexCoord);\n  if(all(greaterThan(gl_FragColor.rgb,uLow.rgb)) && all(greaterThan(uHigh.rgb,gl_FragColor.rgb))) {\n    gl_FragColor.a = 0.0;\n  }\n}\n";
@@ -27759,6 +27797,7 @@ exports.Gradient = Gradient;
 exports.Group = Group;
 exports.IText = IText;
 exports.Image = FabricImage;
+exports.InteractiveFabricObject = InteractiveFabricObject;
 exports.Intersection = Intersection;
 exports.LayoutManager = LayoutManager;
 exports.LayoutStrategy = LayoutStrategy;