fabric 6.0.0 → 6.0.2

package/dist/index.mjs

@@ -401,7 +401,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;
@@ -423,6 +423,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
@@ -613,6 +629,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')
@@ -1871,6 +1895,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]
@@ -2781,7 +2806,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>");
 };
@@ -4683,7 +4708,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;
 };
@@ -4711,8 +4736,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('');
   }
 
@@ -4842,7 +4867,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, "\" ") : '';
   }
 }
 
@@ -6230,8 +6255,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();
   }
 
@@ -6618,7 +6643,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');
@@ -6834,8 +6859,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,
@@ -6856,7 +6881,7 @@ const fabricObjectDefaultValues = {
   strokeUniform: false,
   padding: 0,
   opacity: 1,
-  paintFirst: 'fill',
+  paintFirst: FILL,
   fill: 'rgb(0,0,0)',
   fillRule: 'nonzero',
   stroke: null,
@@ -6947,18 +6972,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
@@ -7329,10 +7356,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) {
@@ -7453,7 +7480,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) {
@@ -7748,7 +7775,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 {
@@ -8225,7 +8252,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.
@@ -8243,7 +8270,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,
@@ -8290,7 +8317,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;
@@ -8335,7 +8362,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
@@ -8653,7 +8680,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
@@ -8802,12 +8829,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;
 }
@@ -8854,24 +8881,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'
@@ -8950,7 +8977,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;
 }
@@ -8996,7 +9023,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
@@ -9044,11 +9071,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 '';
 };
@@ -9150,7 +9177,7 @@ const createObjectDefaultControls = () => ({
     cursorStyleHandler: rotationStyleHandler,
     offsetY: -40,
     withConnection: true,
-    actionName: 'rotate'
+    actionName: ROTATE
   })
 });
 const createResizeControls = () => ({
@@ -9159,14 +9186,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());
@@ -9210,7 +9237,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;
       }
     }
@@ -10366,7 +10393,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;
@@ -10498,7 +10525,7 @@ function parseTransformAttribute(attributeValue) {
       case 'translate':
         matrix = createTranslateMatrix(arg0, arg1);
         break;
-      case 'rotate':
+      case ROTATE:
         matrix = createRotateMatrix({
           angle: arg0
         }, {
@@ -10506,13 +10533,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':
@@ -10530,7 +10557,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';
@@ -10563,13 +10590,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;
@@ -10943,16 +10970,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) {
@@ -10963,15 +10995,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,
@@ -10981,7 +11014,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
@@ -11065,7 +11098,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,
@@ -11137,13 +11170,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(),
@@ -11151,7 +11186,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,
@@ -11256,8 +11291,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 {
@@ -12815,8 +12853,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;
@@ -13440,9 +13478,9 @@ class SelectableCanvas extends StaticCanvas {
       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;
@@ -14071,7 +14109,7 @@ class SelectableCanvas extends StaticCanvas {
     target.setCoords();
     if (transform.actionPerformed) {
       this.fire('object:modified', options);
-      target.fire('modified', options);
+      target.fire(MODIFIED, options);
     }
   }
 
@@ -14158,7 +14196,7 @@ class SelectableCanvas extends StaticCanvas {
       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;
@@ -16888,7 +16926,7 @@ class Circle extends FabricObject {
    * @return {Number}
    */
   getRadiusX() {
-    return this.get('radius') * this.get('scaleX');
+    return this.get('radius') * this.get(SCALE_X);
   }
 
   /**
@@ -16896,7 +16934,7 @@ class Circle extends FabricObject {
    * @return {Number}
    */
   getRadiusY() {
-    return this.get('radius') * this.get('scaleY');
+    return this.get('radius') * this.get(SCALE_Y);
   }
 
   /**
@@ -17717,7 +17755,7 @@ class Ellipse extends FabricObject {
    * @return {Number}
    */
   getRx() {
-    return this.get('rx') * this.get('scaleX');
+    return this.get('rx') * this.get(SCALE_X);
   }
 
   /**
@@ -17725,7 +17763,7 @@ class Ellipse extends FabricObject {
    * @return {Number}
    */
   getRy() {
-    return this.get('ry') * this.get('scaleY');
+    return this.get('ry') * this.get(SCALE_Y);
   }
 
   /**
@@ -18031,7 +18069,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;
@@ -18150,7 +18188,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);
@@ -18170,7 +18208,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.
@@ -18692,7 +18730,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('');
   }
 
   /**
@@ -18926,7 +18964,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 {
@@ -19330,7 +19368,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');
@@ -19717,7 +19755,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);
@@ -19726,7 +19764,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) {
@@ -20253,7 +20291,7 @@ class DraggableTextDelegate {
       target.hiddenTextarea.value = target.text;
       target._updateTextarea();
       target.hiddenTextarea.focus();
-      target.fire('changed', {
+      target.fire(CHANGED, {
         index: insertAt + selectionStartOffset,
         action: 'drop'
       });
@@ -20299,7 +20337,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'
             });
@@ -20877,7 +20915,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
@@ -21356,7 +21394,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
@@ -22457,7 +22495,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);
   }
@@ -22574,7 +22612,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);
   }
 
   /**
@@ -23164,7 +23202,8 @@ class ClipPathLayout extends LayoutStrategy {
       target
     } = context;
     const {
-      clipPath
+      clipPath,
+      group
     } = target;
     if (!clipPath || !this.shouldPerformLayout(context)) {
       return;
@@ -23176,9 +23215,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
@@ -24144,7 +24182,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);
@@ -24891,8 +24929,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 {
@@ -25118,7 +25156,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.
@@ -26017,7 +26055,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;
@@ -26972,7 +27010,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";
@@ -27646,5 +27684,5 @@ var filters = /*#__PURE__*/Object.freeze({
   Vintage: Vintage
 });
 
-export { ActiveSelection, BaseBrush, FabricObject$1 as BaseFabricObject, Canvas, Canvas2dFilterBackend, CanvasDOMManager, Circle, CircleBrush, ClipPathLayout, Color, Control, Ellipse, FabricImage, FabricObject, FabricText, FitContentLayout, FixedLayout, Gradient, Group, IText, FabricImage as Image, Intersection, LayoutManager, LayoutStrategy, Line, FabricObject as Object, Observable, Path, Pattern, PatternBrush, PencilBrush, Point, Polygon, Polyline, Rect, Shadow, SprayBrush, StaticCanvas, StaticCanvasDOMManager, FabricText as Text, Textbox, Triangle, WebGLFilterBackend, cache, classRegistry, config, index as controlsUtils, createCollectionMixin, filters, getCSSRules, getEnv, getFabricDocument, getFabricWindow, getFilterBackend, iMatrix, initFilterBackend, isPutImageFaster, isWebGLPipelineState, loadSVGFromString, loadSVGFromURL, parseAttributes, parseFontDeclaration, parsePointsAttribute, parseSVGDocument, parseStyleAttribute, parseTransformAttribute, runningAnimations, setEnv, setFilterBackend, index$1 as util, VERSION as version };
+export { ActiveSelection, BaseBrush, FabricObject$1 as BaseFabricObject, Canvas, Canvas2dFilterBackend, CanvasDOMManager, Circle, CircleBrush, ClipPathLayout, Color, Control, Ellipse, FabricImage, FabricObject, FabricText, FitContentLayout, FixedLayout, Gradient, Group, IText, FabricImage as Image, InteractiveFabricObject, Intersection, LayoutManager, LayoutStrategy, Line, FabricObject as Object, Observable, Path, Pattern, PatternBrush, PencilBrush, Point, Polygon, Polyline, Rect, Shadow, SprayBrush, StaticCanvas, StaticCanvasDOMManager, FabricText as Text, Textbox, Triangle, WebGLFilterBackend, cache, classRegistry, config, index as controlsUtils, createCollectionMixin, filters, getCSSRules, getEnv, getFabricDocument, getFabricWindow, getFilterBackend, iMatrix, initFilterBackend, isPutImageFaster, isWebGLPipelineState, loadSVGFromString, loadSVGFromURL, parseAttributes, parseFontDeclaration, parsePointsAttribute, parseSVGDocument, parseStyleAttribute, parseTransformAttribute, runningAnimations, setEnv, setFilterBackend, index$1 as util, VERSION as version };
 //# sourceMappingURL=index.mjs.map