@postermywall/fabricjs-2 6.0.0-rc2.0 → 6.0.0

package/dist/index.node.cjs

@@ -475,7 +475,7 @@ class Cache {
 }
 const cache = new Cache();
 
-var version = "6.0.0-rc2.0";
+var version = "6.0.0";
 
 // use this syntax so babel plugin see this import here
 const VERSION = version;
@@ -2423,6 +2423,7 @@ class Color {
    * @param {string} [color] optional in hex or rgb(a) or hsl format or from known color list
    */
   constructor(color) {
+    _defineProperty(this, "isUnrecognised", false);
     if (!color) {
       // we default to black as canvas does
       this.setSource([0, 0, 0, 1]);
@@ -2448,7 +2449,7 @@ class Color {
     return color === 'transparent' ? [255, 255, 255, 0] : Color.sourceFromHex(color) || Color.sourceFromRgb(color) || Color.sourceFromHsl(color) ||
     // color is not recognized
     // we default to black as canvas does
-    [0, 0, 0, 1];
+    (this.isUnrecognised = true) && [0, 0, 0, 1];
   }
 
   /**
@@ -3375,20 +3376,7 @@ let StaticCanvas$1 = class StaticCanvas extends createCollectionMixin(CommonMeth
    * @param {Array} vpt a Canvas 2D API transform matrix
    */
   setViewportTransform(vpt) {
-    const backgroundObject = this.backgroundImage,
-      overlayObject = this.overlayImage,
-      len = this._objects.length;
     this.viewportTransform = vpt;
-    for (let i = 0; i < len; i++) {
-      const object = this._objects[i];
-      object.group || object.setCoords();
-    }
-    if (backgroundObject) {
-      backgroundObject.setCoords();
-    }
-    if (overlayObject) {
-      overlayObject.setCoords();
-    }
     this.calcViewportBoundaries();
     this.renderOnAddRemove && this.requestRenderAll();
   }
@@ -4440,7 +4428,7 @@ const makeBoundingBoxFromPoints = points => {
   };
 };
 
-const _excluded$m = ["translateX", "translateY", "scaleX", "scaleY"];
+const _excluded$i = ["translateX", "translateY", "scaleX", "scaleY"];
 
 /**
  * given an object and a transform, apply the inverse transform to the object,
@@ -4482,7 +4470,7 @@ const applyTransformToObject = (object, transform) => {
       scaleX,
       scaleY
     } = _qrDecompose,
-    otherOptions = _objectWithoutProperties(_qrDecompose, _excluded$m),
+    otherOptions = _objectWithoutProperties(_qrDecompose, _excluded$i),
     center = new Point(translateX, translateY);
   object.flipX = false;
   object.flipY = false;
@@ -5397,14 +5385,14 @@ class AnimationBase {
   }
 }
 
-const _excluded$l = ["startValue", "endValue"];
+const _excluded$h = ["startValue", "endValue"];
 class ValueAnimation extends AnimationBase {
   constructor(_ref) {
     let {
         startValue = 0,
         endValue = 100
       } = _ref,
-      otherOptions = _objectWithoutProperties(_ref, _excluded$l);
+      otherOptions = _objectWithoutProperties(_ref, _excluded$h);
     super(_objectSpread2(_objectSpread2({}, otherOptions), {}, {
       startValue,
       byValue: endValue - startValue
@@ -5419,14 +5407,14 @@ class ValueAnimation extends AnimationBase {
   }
 }
 
-const _excluded$k = ["startValue", "endValue"];
+const _excluded$g = ["startValue", "endValue"];
 class ArrayAnimation extends AnimationBase {
   constructor(_ref) {
     let {
         startValue = [0],
         endValue = [100]
       } = _ref,
-      options = _objectWithoutProperties(_ref, _excluded$k);
+      options = _objectWithoutProperties(_ref, _excluded$g);
     super(_objectSpread2(_objectSpread2({}, options), {}, {
       startValue,
       byValue: endValue.map((value, i) => value - startValue[i])
@@ -5443,7 +5431,7 @@ class ArrayAnimation extends AnimationBase {
 
 const capValue = (min, value, max) => Math.max(min, Math.min(value, max));
 
-const _excluded$j = ["startValue", "endValue", "easing", "onChange", "onComplete", "abort"];
+const _excluded$f = ["startValue", "endValue", "easing", "onChange", "onComplete", "abort"];
 const defaultColorEasing = (timeElapsed, startValue, byValue, duration) => {
   const durationProgress = 1 - Math.cos(timeElapsed / duration * halfPI);
   return startValue + byValue * durationProgress;
@@ -5459,7 +5447,7 @@ class ColorAnimation extends AnimationBase {
         onComplete,
         abort
       } = _ref,
-      options = _objectWithoutProperties(_ref, _excluded$j);
+      options = _objectWithoutProperties(_ref, _excluded$f);
     const startColor = new Color(startValue).getSource();
     const endColor = new Color(endValue).getSource();
     super(_objectSpread2(_objectSpread2({}, options), {}, {
@@ -6500,10 +6488,6 @@ class ObjectGeometry extends ObjectOrigin {
   }
 }
 
-/**
- * Strict: only ancestors that are objects (without canvas)
- */
-
 class StackedObject extends ObjectGeometry {
   /**
    * A reference to the parent of the object
@@ -6527,17 +6511,14 @@ class StackedObject extends ObjectGeometry {
   }
 
   /**
-   *
-   * @param {boolean} [strict] returns only ancestors that are objects (without canvas)
    * @returns {Ancestors} ancestors (excluding `ActiveSelection`) from bottom to top
    */
-  getAncestors(strict) {
+  getAncestors() {
     const ancestors = [];
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     let parent = this;
     do {
-      var _parent$parent;
-      parent = parent instanceof StackedObject ? (_parent$parent = parent.parent) !== null && _parent$parent !== void 0 ? _parent$parent : !strict ? parent.canvas : undefined : undefined;
+      parent = parent instanceof StackedObject ? parent.parent : undefined;
       parent && ancestors.push(parent);
     } while (parent);
     return ancestors;
@@ -6547,19 +6528,18 @@ class StackedObject extends ObjectGeometry {
    * Compare ancestors
    *
    * @param {StackedObject} other
-   * @param {boolean} [strict] finds only ancestors that are objects (without canvas)
    * @returns {AncestryComparison} an object that represent the ancestry situation.
    */
-  findCommonAncestors(other, strict) {
+  findCommonAncestors(other) {
     if (this === other) {
       return {
         fork: [],
         otherFork: [],
-        common: [this, ...this.getAncestors(strict)]
+        common: [this, ...this.getAncestors()]
       };
     }
-    const ancestors = this.getAncestors(strict);
-    const otherAncestors = other.getAncestors(strict);
+    const ancestors = this.getAncestors();
+    const otherAncestors = other.getAncestors();
     //  if `this` has no ancestors and `this` is top ancestor of `other` we must handle the following case
     if (ancestors.length === 0 && otherAncestors.length > 0 && this === otherAncestors[otherAncestors.length - 1]) {
       return {
@@ -6606,11 +6586,10 @@ class StackedObject extends ObjectGeometry {
   /**
    *
    * @param {StackedObject} other
-   * @param {boolean} [strict] checks only ancestors that are objects (without canvas)
    * @returns {boolean}
    */
-  hasCommonAncestors(other, strict) {
-    const commonAncestors = this.findCommonAncestors(other, strict);
+  hasCommonAncestors(other) {
+    const commonAncestors = this.findCommonAncestors(other);
     return commonAncestors && !!commonAncestors.common.length;
   }
 
@@ -6624,16 +6603,15 @@ class StackedObject extends ObjectGeometry {
       return undefined;
     }
     const ancestorData = this.findCommonAncestors(other);
-    if (!ancestorData) {
-      return undefined;
-    }
     if (ancestorData.fork.includes(other)) {
       return true;
     }
     if (ancestorData.otherFork.includes(this)) {
       return false;
     }
-    const firstCommonAncestor = ancestorData.common[0];
+    // if there isn't a common ancestor, we take the canvas.
+    // if there is no canvas, there is nothing to compare
+    const firstCommonAncestor = ancestorData.common[0] || this.canvas;
     if (!firstCommonAncestor) {
       return undefined;
     }
@@ -7006,7 +6984,7 @@ const interactiveObjectDefaultValues = {
   moveCursor: null
 };
 
-const _excluded$i = ["type"],
+const _excluded$e = ["type"],
   _excluded2$4 = ["extraParam"];
 /**
  * Root object class from which all 2d shape classes inherit from
@@ -7194,7 +7172,7 @@ let FabricObject$1 = class FabricObject extends AnimatableObject {
       height = dims.height,
       zoomX = dims.zoomX,
       zoomY = dims.zoomY,
-      dimensionsChanged = width !== this.cacheWidth || height !== this.cacheHeight,
+      dimensionsChanged = width !== canvas.width || height !== canvas.height,
       zoomChanged = this.zoomX !== zoomX || this.zoomY !== zoomY;
     if (!canvas || !context) {
       return false;
@@ -7235,8 +7213,6 @@ let FabricObject$1 = class FabricObject extends AnimatableObject {
       drawingHeight = dims.y / 2;
       this.cacheTranslationX = Math.round(canvas.width / 2 - drawingWidth) + drawingWidth;
       this.cacheTranslationY = Math.round(canvas.height / 2 - drawingHeight) + drawingHeight;
-      this.cacheWidth = width;
-      this.cacheHeight = height;
       context.translate(this.cacheTranslationX, this.cacheTranslationY);
       context.scale(zoomX, zoomY);
       this.zoomX = zoomX;
@@ -7511,8 +7487,6 @@ let FabricObject$1 = class FabricObject extends AnimatableObject {
   _removeCacheCanvas() {
     this._cacheCanvas = undefined;
     this._cacheContext = null;
-    this.cacheWidth = 0;
-    this.cacheHeight = 0;
   }
 
   /**
@@ -7671,15 +7645,18 @@ let FabricObject$1 = class FabricObject extends AnimatableObject {
     if (this.isNotVisible()) {
       return false;
     }
-    if (this._cacheCanvas && this._cacheContext && !skipCanvas && this._updateCacheCanvas()) {
+    const canvas = this._cacheCanvas;
+    const ctx = this._cacheContext;
+    if (canvas && ctx && !skipCanvas && this._updateCacheCanvas()) {
       // in this case the context is already cleared.
       return true;
     } else {
       if (this.dirty || this.clipPath && this.clipPath.absolutePositioned) {
-        if (this._cacheCanvas && this._cacheContext && !skipCanvas) {
-          const width = this.cacheWidth / this.zoomX;
-          const height = this.cacheHeight / this.zoomY;
-          this._cacheContext.clearRect(-width / 2, -height / 2, width, height);
+        if (canvas && ctx && !skipCanvas) {
+          ctx.save();
+          ctx.setTransform(1, 0, 0, 1, 0, 0);
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+          ctx.restore();
         }
         return true;
       }
@@ -8203,7 +8180,7 @@ let FabricObject$1 = class FabricObject extends AnimatableObject {
    * @returns {Promise<FabricObject>}
    */
   static _fromObject(_ref2) {
-    let object = _objectWithoutProperties(_ref2, _excluded$i);
+    let object = _objectWithoutProperties(_ref2, _excluded$e);
     let _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
       {
         extraParam
@@ -8954,7 +8931,7 @@ const scalingEqually = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObj
 const scalingX = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectX));
 const scalingY = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectY));
 
-const _excluded$h = ["target", "ex", "ey", "skewingSide"];
+const _excluded$d = ["target", "ex", "ey", "skewingSide"];
 const AXIS_KEYS = {
   x: {
     counterAxis: 'y',
@@ -9004,7 +8981,7 @@ function skewObject(axis, _ref, pointer) {
       ey,
       skewingSide
     } = _ref,
-    transform = _objectWithoutProperties(_ref, _excluded$h);
+    transform = _objectWithoutProperties(_ref, _excluded$d);
   const {
       skew: skewKey
     } = AXIS_KEYS[axis],
@@ -9590,6 +9567,9 @@ class InteractiveFabricObject extends FabricObject$1 {
    * Draws corners of an object's bounding box.
    * Requires public properties: width, height
    * Requires public options: cornerSize, padding
+   * Be aware that since fabric 6.0 this function does not call setCoords anymore.
+   * setCoords needs to be called manually if the object of which we are rendering controls
+   * is outside the standard selection and transform process.
    * @param {CanvasRenderingContext2D} ctx Context to draw on
    * @param {ControlRenderingStyleOverride} styleOverride object to override the object style
    */
@@ -9613,7 +9593,6 @@ class InteractiveFabricObject extends FabricObject$1 {
       ctx.strokeStyle = options.cornerStrokeColor;
     }
     this._setLineDash(ctx, options.cornerDashArray);
-    this.setCoords();
     this.forEachControl((control, key) => {
       if (control.getVisibility(this, key)) {
         const p = this.oCoords[key];
@@ -10846,7 +10825,7 @@ function parseAttributes(element, attributes, cssRules) {
   return svgValidParentsRegEx.test(element.nodeName) ? mergedAttrs : setStrokeFillOpacity(mergedAttrs);
 }
 
-const _excluded$g = ["left", "top", "width", "height", "visible"];
+const _excluded$c = ["left", "top", "width", "height", "visible"];
 const rectDefaultValues = {
   rx: 0,
   ry: 0
@@ -10960,7 +10939,7 @@ class Rect extends FabricObject {
         height = 0,
         visible = true
       } = _parseAttributes,
-      restOfparsedAttributes = _objectWithoutProperties(_parseAttributes, _excluded$g);
+      restOfparsedAttributes = _objectWithoutProperties(_parseAttributes, _excluded$c);
     return new this(_objectSpread2(_objectSpread2(_objectSpread2({}, options), restOfparsedAttributes), {}, {
       left,
       top,
@@ -11116,7 +11095,7 @@ class FitContentLayout extends LayoutStrategy {
 _defineProperty(FitContentLayout, "type", 'fit-content');
 classRegistry.setClass(FitContentLayout);
 
-const _excluded$f = ["strategy"],
+const _excluded$b = ["strategy"],
   _excluded2$3 = ["target", "strategy", "bubbles", "prevStrategy"];
 const LAYOUT_MANAGER = 'layoutManager';
 class LayoutManager {
@@ -11219,7 +11198,7 @@ class LayoutManager {
       context
     });
     if (type === LAYOUT_TYPE_IMPERATIVE && context.deep) {
-      const tricklingContext = _objectWithoutProperties(context, _excluded$f);
+      const tricklingContext = _objectWithoutProperties(context, _excluded$b);
       // traverse the tree
       target.forEachObject(object => object.layoutManager && object.layoutManager.performLayout(_objectSpread2(_objectSpread2({}, tricklingContext), {}, {
         bubbles: false,
@@ -11363,7 +11342,7 @@ class LayoutManager {
 }
 classRegistry.setClass(LayoutManager, LAYOUT_MANAGER);
 
-const _excluded$e = ["type", "objects", "layoutManager"];
+const _excluded$a = ["type", "objects", "layoutManager"];
 /**
  * This class handles the specific case of creating a group using {@link Group#fromObject} and is not meant to be used in any other case.
  * We could have used a boolean in the constructor, as we did previously, but we think the boolean
@@ -11430,6 +11409,15 @@ class Group extends createCollectionMixin(FabricObject) {
     _defineProperty(this, "__objectSelectionDisposer", void 0);
     Object.assign(this, Group.ownDefaults);
     this.setOptions(options);
+    this.groupInit(objects, options);
+  }
+
+  /**
+   * Shared code between group and active selection
+   * Meant to be used by the constructor.
+   */
+  groupInit(objects, options) {
+    var _options$layoutManage;
     this._objects = [...objects]; // Avoid unwanted mutations of Collection to affect the caller
 
     this.__objectSelectionTracker = this.__objectSelectionMonitor.bind(this, true);
@@ -11439,7 +11427,7 @@ class Group extends createCollectionMixin(FabricObject) {
     });
 
     // perform initial layout
-    this.layoutManager = options.layoutManager || new LayoutManager();
+    this.layoutManager = (_options$layoutManage = options.layoutManager) !== null && _options$layoutManage !== void 0 ? _options$layoutManage : new LayoutManager();
     this.layoutManager.performLayout({
       type: LAYOUT_TYPE_INITIALIZATION,
       target: this,
@@ -11911,7 +11899,7 @@ class Group extends createCollectionMixin(FabricObject) {
         objects = [],
         layoutManager
       } = _ref2,
-      options = _objectWithoutProperties(_ref2, _excluded$e);
+      options = _objectWithoutProperties(_ref2, _excluded$a);
     return Promise.all([enlivenObjects(objects, abortable), enlivenObjectEnlivables(options, abortable)]).then(_ref3 => {
       let [objects, hydratedOptions] = _ref3;
       const group = new this(objects, _objectSpread2(_objectSpread2(_objectSpread2({}, options), hydratedOptions), {}, {
@@ -14067,8 +14055,8 @@ class SelectableCanvas extends StaticCanvas$1 {
     this._activeObject = object;
     if (isActiveSelection(object) && prevActiveObject !== object) {
       object.set('canvas', this);
-      object.setCoords();
     }
+    object.setCoords();
     return true;
   }
 
@@ -14321,7 +14309,7 @@ class TextEditingManager {
   }
 }
 
-const _excluded$d = ["target", "oldTarget", "fireCanvas", "e"];
+const _excluded$9 = ["target", "oldTarget", "fireCanvas", "e"];
 const addEventOptions = {
   passive: false
 };
@@ -15335,7 +15323,7 @@ let Canvas$1 = class Canvas extends SelectableCanvas {
         fireCanvas,
         e
       } = _ref,
-      data = _objectWithoutProperties(_ref, _excluded$d);
+      data = _objectWithoutProperties(_ref, _excluded$9);
     const {
       targetIn,
       targetOut,
@@ -15394,16 +15382,15 @@ let Canvas$1 = class Canvas extends SelectableCanvas {
    * @private
    */
   _performTransformAction(e, transform, pointer) {
-    const x = pointer.x,
-      y = pointer.y,
-      action = transform.action,
-      actionHandler = transform.actionHandler;
-    let actionPerformed = false;
-    // this object could be created from the function in the control handlers
+    const {
+      action,
+      actionHandler,
+      target
+    } = transform;
+    const actionPerformed = !!actionHandler && actionHandler(e, transform, pointer.x, pointer.y);
+    actionPerformed && target.setCoords();
 
-    if (actionHandler) {
-      actionPerformed = actionHandler(e, transform, x, y);
-    }
+    // this object could be created from the function in the control handlers
     if (action === 'drag' && actionPerformed) {
       transform.target.isMoving = true;
       this.setCursor(transform.target.moveCursor || this.moveCursor);
@@ -16030,7 +16017,7 @@ classRegistry.setClass(Gradient, 'gradient');
 classRegistry.setClass(Gradient, 'linear');
 classRegistry.setClass(Gradient, 'radial');
 
-const _excluded$c = ["type", "source"];
+const _excluded$8 = ["type", "source"];
 
 /**
  * @see {@link http://fabricjs.com/patterns demo}
@@ -16188,7 +16175,7 @@ class Pattern {
         type,
         source
       } = _ref2,
-      serialized = _objectWithoutProperties(_ref2, _excluded$c);
+      serialized = _objectWithoutProperties(_ref2, _excluded$8);
     const img = await loadImage(source, _objectSpread2(_objectSpread2({}, options), {}, {
       crossOrigin: serialized.crossOrigin
     }));
@@ -16335,7 +16322,7 @@ class BaseBrush {
   }
 }
 
-const _excluded$b = ["path", "left", "top"],
+const _excluded$7 = ["path", "left", "top"],
   _excluded2$2 = ["d"];
 class Path extends FabricObject {
   /**
@@ -16351,7 +16338,7 @@ class Path extends FabricObject {
         left,
         top
       } = _ref,
-      options = _objectWithoutProperties(_ref, _excluded$b);
+      options = _objectWithoutProperties(_ref, _excluded$7);
     super();
     Object.assign(this, Path.ownDefaults);
     this.setOptions(options);
@@ -16487,7 +16474,7 @@ class Path extends FabricObject {
   toClipPathSVG(reviver) {
     const additionalTransform = this._getOffsetTransform();
     return '\t' + this._createBaseClipPathSVGMarkup(this._toSVG(), {
-      reviver: reviver,
+      reviver,
       additionalTransform: additionalTransform
     });
   }
@@ -16500,7 +16487,7 @@ class Path extends FabricObject {
   toSVG(reviver) {
     const additionalTransform = this._getOffsetTransform();
     return this._createBaseSVGMarkup(this._toSVG(), {
-      reviver: reviver,
+      reviver,
       additionalTransform: additionalTransform
     });
   }
@@ -16923,7 +16910,7 @@ class PencilBrush extends BaseBrush {
   }
 }
 
-const _excluded$a = ["left", "top", "radius"];
+const _excluded$6 = ["left", "top", "radius"];
 const CIRCLE_PROPS = ['radius', 'startAngle', 'endAngle', 'counterClockwise'];
 const circleDefaultValues = {
   radius: 0,
@@ -17057,7 +17044,7 @@ class Circle extends FabricObject {
         top = 0,
         radius = 0
       } = _ref,
-      otherParsedAttributes = _objectWithoutProperties(_ref, _excluded$a);
+      otherParsedAttributes = _objectWithoutProperties(_ref, _excluded$6);
 
     // this probably requires to be fixed for default origins not being top/left.
 
@@ -17440,7 +17427,7 @@ class PatternBrush extends PencilBrush {
   }
 }
 
-const _excluded$9 = ["x1", "y1", "x2", "y2"],
+const _excluded$5 = ["x1", "y1", "x2", "y2"],
   _excluded2$1 = ["x1", "y1", "x2", "y2"];
 // @TODO this code is terrible and Line should be a special case of polyline.
 
@@ -17652,7 +17639,7 @@ class Line extends FabricObject {
         x2 = 0,
         y2 = 0
       } = _parseAttributes,
-      parsedAttributes = _objectWithoutProperties(_parseAttributes, _excluded$9);
+      parsedAttributes = _objectWithoutProperties(_parseAttributes, _excluded$5);
     return new this([x1, y1, x2, y2], parsedAttributes);
   }
 
@@ -17918,7 +17905,7 @@ function parsePointsAttribute(points) {
   return parsedPoints;
 }
 
-const _excluded$8 = ["left", "top"];
+const _excluded$4 = ["left", "top"];
 const polylineDefaultValues = {
   /**
    * @deprecated transient option soon to be removed in favor of a different design
@@ -18201,7 +18188,7 @@ class Polyline extends FabricObject {
   static async fromElement(element, options, cssRules) {
     const points = parsePointsAttribute(element.getAttribute('points')),
       _parseAttributes = parseAttributes(element, this.ATTRIBUTE_NAMES, cssRules),
-      parsedAttributes = _objectWithoutProperties(_parseAttributes, _excluded$8);
+      parsedAttributes = _objectWithoutProperties(_parseAttributes, _excluded$4);
     return new this(points, _objectSpread2(_objectSpread2({}, parsedAttributes), options));
   }
 
@@ -18793,7 +18780,7 @@ class TextSVGExportMixin extends FabricObjectSVGExportMixin {
   }
 }
 
-const _excluded$7 = ["textAnchor", "textDecoration", "dx", "dy", "top", "left", "fontSize", "strokeWidth"];
+const _excluded$3 = ["textAnchor", "textDecoration", "dx", "dy", "top", "left", "fontSize", "strokeWidth"];
 let measuringContext;
 
 /**
@@ -19997,7 +19984,7 @@ class FabricText extends StyledText {
         fontSize = DEFAULT_SVG_FONT_SIZE,
         strokeWidth = 1
       } = _options$parsedAttrib,
-      restOfOptions = _objectWithoutProperties(_options$parsedAttrib, _excluded$7);
+      restOfOptions = _objectWithoutProperties(_options$parsedAttrib, _excluded$3);
     const textContent = (element.textContent || '').replace(/^\s+|\s+$|\n+/g, '').replace(/\s+/g, ' ');
 
     // this code here is probably the usual issue for SVG center find
@@ -23364,7 +23351,6 @@ class ActiveSelectionLayoutManager extends LayoutManager {
   }
 }
 
-const _excluded$6 = ["layoutManager"];
 const activeSelectionDefaultValues = {
   multiSelectionStacking: 'canvas-stacking'
 };
@@ -23400,16 +23386,20 @@ class ActiveSelection extends Group {
 
   constructor() {
     let objects = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    let _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      {
-        layoutManager
-      } = _ref,
-      options = _objectWithoutProperties(_ref, _excluded$6);
-    super(objects, {
-      layoutManager: layoutManager !== null && layoutManager !== void 0 ? layoutManager : new ActiveSelectionLayoutManager()
-    });
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    super();
     Object.assign(this, ActiveSelection.ownDefaults);
     this.setOptions(options);
+    const {
+      left,
+      top,
+      layoutManager
+    } = options;
+    this.groupInit(objects, {
+      left,
+      top,
+      layoutManager: layoutManager !== null && layoutManager !== void 0 ? layoutManager : new ActiveSelectionLayoutManager()
+    });
   }
 
   /**
@@ -23989,7 +23979,7 @@ function setFilterBackend(backend) {
   filterBackend = backend;
 }
 
-const _excluded$5 = ["filters", "resizeFilter", "src", "crossOrigin", "type"];
+const _excluded$2 = ["filters", "resizeFilter", "src", "crossOrigin", "type"];
 
 // @todo Would be nice to have filtering code not imported directly.
 
@@ -24572,7 +24562,7 @@ class FabricImage extends FabricObject {
         crossOrigin,
         type
       } = _ref,
-      object = _objectWithoutProperties(_ref, _excluded$5);
+      object = _objectWithoutProperties(_ref, _excluded$2);
     return Promise.all([loadImage(src, _objectSpread2(_objectSpread2({}, options), {}, {
       crossOrigin
     })), f && enlivenObjects(f, options),
@@ -25342,9 +25332,9 @@ const isPutImageFaster = (width, height) => {
 
 const highPsourceCode = "precision highp float";
 const identityFragmentShader = "\n    ".concat(highPsourceCode, ";\n    varying vec2 vTexCoord;\n    uniform sampler2D uTexture;\n    void main() {\n      gl_FragColor = texture2D(uTexture, vTexCoord);\n    }");
-const vertexSource = "\n    attribute vec2 aPosition;\n    varying vec2 vTexCoord;\n    void main() {\n      vTexCoord = aPosition;\n      gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n    }";
+const vertexSource$1 = "\n    attribute vec2 aPosition;\n    varying vec2 vTexCoord;\n    void main() {\n      vTexCoord = aPosition;\n      gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n    }";
 
-const _excluded$4 = ["type"],
+const _excluded$1 = ["type"],
   _excluded2 = ["type"];
 const regex = new RegExp(highPsourceCode, 'g');
 class BaseFilter {
@@ -25365,30 +25355,21 @@ class BaseFilter {
    * to avoid doing that.
    */
 
-  /**
-   * Name of the parameter that can be changed in the filter.
-   * Some filters have more than one parameter and there is no
-   * mainParameter
-   * @private
-   */
-
   /**
    * Constructor
    * @param {Object} [options] Options object
    */
   constructor() {
     let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      options = _objectWithoutProperties(_ref, _excluded$4);
-    /**
-     * Array of attributes to send with buffers. do not modify
-     * @private
-     */
-    _defineProperty(this, "vertexSource", vertexSource);
+      options = _objectWithoutProperties(_ref, _excluded$1);
     Object.assign(this, this.constructor.defaults, options);
   }
   getFragmentSource() {
     return identityFragmentShader;
   }
+  getVertexSource() {
+    return vertexSource$1;
+  }
 
   /**
    * Compile this filter's shader program.
@@ -25399,7 +25380,7 @@ class BaseFilter {
    */
   createProgram(gl) {
     let fragmentSource = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getFragmentSource();
-    let vertexSource = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.vertexSource;
+    let vertexSource = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.getVertexSource();
     const {
       WebGLProbe: {
         GLPrecision = 'highp'
@@ -25456,14 +25437,17 @@ class BaseFilter {
   /**
    * Return a map of uniform names to WebGLUniformLocation objects.
    *
-   * Intended to be overridden by subclasses.
-   *
    * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program.
    * @param {WebGLShaderProgram} program The shader program from which to take uniform locations.
    * @returns {Object} A map of uniform names to uniform locations.
    */
   getUniformLocations(gl, program) {
-    return {};
+    const locations = this.constructor.uniformLocations;
+    const uniformLocations = {};
+    for (let i = 0; i < locations.length; i++) {
+      uniformLocations[locations[i]] = gl.getUniformLocation(program, locations[i]);
+    }
+    return uniformLocations;
   }
 
   /**
@@ -25513,18 +25497,7 @@ class BaseFilter {
    **/
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   isNeutralState(options) {
-    const main = this.mainParameter,
-      defaultValue = this.constructor.defaults[main];
-    if (main) {
-      const thisValue = this[main];
-      if (Array.isArray(defaultValue) && Array.isArray(thisValue)) {
-        return defaultValue.every((value, i) => value === thisValue[i]);
-      } else {
-        return defaultValue === thisValue;
-      }
-    } else {
-      return false;
-    }
+    return false;
   }
 
   /**
@@ -25616,14 +25589,6 @@ class BaseFilter {
     gl.bindTexture(gl.TEXTURE_2D, null);
     gl.activeTexture(gl.TEXTURE0);
   }
-  getMainParameter() {
-    return this.mainParameter ? this[this.mainParameter] : undefined;
-  }
-  setMainParameter(value) {
-    if (this.mainParameter) {
-      this[this.mainParameter] = value;
-    }
-  }
 
   /**
    * Send uniform data from this filter to its shader program on the GPU.
@@ -25655,12 +25620,14 @@ class BaseFilter {
    * @return {Object} Object representation of an instance
    */
   toObject() {
-    const mainP = this.mainParameter;
+    const defaultKeys = Object.keys(this.constructor.defaults);
     return _objectSpread2({
       type: this.type
-    }, mainP ? {
-      [mainP]: this[mainP]
-    } : {});
+    }, defaultKeys.reduce((acc, key) => {
+      //@ts-expect-error TS doesn't get i want an object that looks like this
+      acc[key] = this[key];
+      return acc;
+    }, {}));
   }
 
   /**
@@ -25677,6 +25644,12 @@ class BaseFilter {
   }
 }
 _defineProperty(BaseFilter, "type", 'BaseFilter');
+/**
+ * Contains the uniform locations for the fragment shader.
+ * uStepW and uStepH are handled by the BaseFilter, each filter class
+ * needs to specify all the one that are needed
+ */
+_defineProperty(BaseFilter, "uniformLocations", []);
 
 const blendColorFragmentSource = {
   multiply: 'gl_FragColor.rgb *= uColor.rgb;\n',
@@ -25796,18 +25769,6 @@ class BlendColor extends BaseFilter {
     }
   }
 
-  /**
-   * Return WebGL uniform locations for this filter's shader.
-   *
-   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-   * @param {WebGLShaderProgram} program This filter's compiled shader program.
-   */
-  getUniformLocations(gl, program) {
-    return {
-      uColor: gl.getUniformLocation(program, 'uColor')
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
@@ -25822,19 +25783,6 @@ class BlendColor extends BaseFilter {
     source[3] = this.alpha;
     gl.uniform4fv(uniformLocations.uColor, source);
   }
-
-  /**
-   * Returns object representation of an instance
-   * @return {Object} Object representation of an instance
-   */
-  toObject() {
-    return {
-      type: this.type,
-      color: this.color,
-      mode: this.mode,
-      alpha: this.alpha
-    };
-  }
 }
 /**
  * Color to make the blend operation with. default to a reddish color since black or white
@@ -25855,18 +25803,19 @@ class BlendColor extends BaseFilter {
  **/
 _defineProperty(BlendColor, "defaults", blendColorDefaultValues);
 _defineProperty(BlendColor, "type", 'BlendColor');
+_defineProperty(BlendColor, "uniformLocations", ['uColor']);
 classRegistry.setClass(BlendColor);
 
 const fragmentSource$c = {
   multiply: "\n    precision highp float;\n    uniform sampler2D uTexture;\n    uniform sampler2D uImage;\n    uniform vec4 uColor;\n    varying vec2 vTexCoord;\n    varying vec2 vTexCoord2;\n    void main() {\n      vec4 color = texture2D(uTexture, vTexCoord);\n      vec4 color2 = texture2D(uImage, vTexCoord2);\n      color.rgba *= color2.rgba;\n      gl_FragColor = color;\n    }\n    ",
   mask: "\n    precision highp float;\n    uniform sampler2D uTexture;\n    uniform sampler2D uImage;\n    uniform vec4 uColor;\n    varying vec2 vTexCoord;\n    varying vec2 vTexCoord2;\n    void main() {\n      vec4 color = texture2D(uTexture, vTexCoord);\n      vec4 color2 = texture2D(uImage, vTexCoord2);\n      color.a = color2.a;\n      gl_FragColor = color;\n    }\n    "
 };
+const vertexSource = "\n    attribute vec2 aPosition;\n    varying vec2 vTexCoord;\n    varying vec2 vTexCoord2;\n    uniform mat3 uTransformMatrix;\n    void main() {\n      vTexCoord = aPosition;\n      vTexCoord2 = (uTransformMatrix * vec3(aPosition, 1.0)).xy;\n      gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n    }\n    ";
 
-const _excluded$3 = ["type", "image"];
+const _excluded = ["type", "image"];
 const blendImageDefaultValues = {
   mode: 'multiply',
-  alpha: 1,
-  vertexSource: "\n    attribute vec2 aPosition;\n    varying vec2 vTexCoord;\n    varying vec2 vTexCoord2;\n    uniform mat3 uTransformMatrix;\n    void main() {\n      vTexCoord = aPosition;\n      vTexCoord2 = (uTransformMatrix * vec3(aPosition, 1.0)).xy;\n      gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n    }\n    "
+  alpha: 1
 };
 
 /**
@@ -25892,6 +25841,9 @@ class BlendImage extends BaseFilter {
   getFragmentSource() {
     return fragmentSource$c[this.mode];
   }
+  getVertexSource() {
+    return vertexSource;
+  }
   applyToWebGL(options) {
     const gl = options.context,
       texture = this.createTexture(options.filterBackend, this.image);
@@ -25973,19 +25925,6 @@ class BlendImage extends BaseFilter {
     }
   }
 
-  /**
-   * Return WebGL uniform locations for this filter's shader.
-   *
-   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-   * @param {WebGLShaderProgram} program This filter's compiled shader program.
-   */
-  getUniformLocations(gl, program) {
-    return {
-      uTransformMatrix: gl.getUniformLocation(program, 'uTransformMatrix'),
-      uImage: gl.getUniformLocation(program, 'uImage')
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
@@ -26000,15 +25939,14 @@ class BlendImage extends BaseFilter {
 
   /**
    * Returns object representation of an instance
+   * TODO: Handle the possibility of missing image better.
+   * As of now a BlendImage filter without image can't be used with fromObject
    * @return {Object} Object representation of an instance
    */
   toObject() {
-    return {
-      type: this.type,
-      image: this.image && this.image.toObject(),
-      mode: this.mode,
-      alpha: this.alpha
-    };
+    return _objectSpread2(_objectSpread2({}, super.toObject()), {}, {
+      image: this.image && this.image.toObject()
+    });
   }
 
   /**
@@ -26019,12 +25957,12 @@ class BlendImage extends BaseFilter {
    * @param {AbortSignal} [options.signal] handle aborting image loading, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
    * @returns {Promise<BlendImage>}
    */
-  static fromObject(_ref2, options) {
+  static async fromObject(_ref2, options) {
     let {
         type,
         image
       } = _ref2,
-      filterOptions = _objectWithoutProperties(_ref2, _excluded$3);
+      filterOptions = _objectWithoutProperties(_ref2, _excluded);
     return FabricImage.fromObject(image, options).then(enlivedImage => new this(_objectSpread2(_objectSpread2({}, filterOptions), {}, {
       image: enlivedImage
     })));
@@ -26048,13 +25986,13 @@ class BlendImage extends BaseFilter {
  **/
 _defineProperty(BlendImage, "type", 'BlendImage');
 _defineProperty(BlendImage, "defaults", blendImageDefaultValues);
+_defineProperty(BlendImage, "uniformLocations", ['uTransformMatrix', 'uImage']);
 classRegistry.setClass(BlendImage);
 
 const fragmentSource$b = "\n    precision highp float;\n    uniform sampler2D uTexture;\n    uniform vec2 uDelta;\n    varying vec2 vTexCoord;\n    const float nSamples = 15.0;\n    vec3 v3offset = vec3(12.9898, 78.233, 151.7182);\n    float random(vec3 scale) {\n      /* use the fragment position for a different seed per-pixel */\n      return fract(sin(dot(gl_FragCoord.xyz, scale)) * 43758.5453);\n    }\n    void main() {\n      vec4 color = vec4(0.0);\n      float total = 0.0;\n      float offset = random(v3offset);\n      for (float t = -nSamples; t <= nSamples; t++) {\n        float percent = (t + offset - 0.5) / nSamples;\n        float weight = 1.0 - abs(percent);\n        color += texture2D(uTexture, vTexCoord + uDelta * percent) * weight;\n        total += weight;\n      }\n      gl_FragColor = color / total;\n    }\n  ";
 
 const blurDefaultValues = {
-  blur: 0,
-  mainParameter: 'blur'
+  blur: 0
 };
 
 /**
@@ -26149,18 +26087,6 @@ class Blur extends BaseFilter {
     return newImageData;
   }
 
-  /**
-   * Return WebGL uniform locations for this filter's shader.
-   *
-   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-   * @param {WebGLShaderProgram} program This filter's compiled shader program.
-   */
-  getUniformLocations(gl, program) {
-    return {
-      delta: gl.getUniformLocation(program, 'uDelta')
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
@@ -26171,6 +26097,9 @@ class Blur extends BaseFilter {
     const delta = this.chooseRightDelta();
     gl.uniform2fv(uniformLocations.delta, delta);
   }
+  isNeutralState() {
+    return this.blur === 0;
+  }
 
   /**
    * choose right value of image percentage to blur with
@@ -26208,13 +26137,13 @@ class Blur extends BaseFilter {
  */
 _defineProperty(Blur, "type", 'Blur');
 _defineProperty(Blur, "defaults", blurDefaultValues);
+_defineProperty(Blur, "uniformLocations", ['uDelta']);
 classRegistry.setClass(Blur);
 
 const fragmentSource$a = "\n  precision highp float;\n  uniform sampler2D uTexture;\n  uniform float uBrightness;\n  varying vec2 vTexCoord;\n  void main() {\n    vec4 color = texture2D(uTexture, vTexCoord);\n    color.rgb += uBrightness;\n    gl_FragColor = color;\n  }\n";
 
 const brightnessDefaultValues = {
-  brightness: 0,
-  mainParameter: 'brightness'
+  brightness: 0
 };
 
 /**
@@ -26243,9 +26172,6 @@ class Brightness extends BaseFilter {
         data
       }
     } = _ref;
-    if (this.brightness === 0) {
-      return;
-    }
     const brightness = Math.round(this.brightness * 255);
     for (let i = 0; i < data.length; i += 4) {
       data[i] = data[i] + brightness;
@@ -26253,17 +26179,8 @@ class Brightness extends BaseFilter {
       data[i + 2] = data[i + 2] + brightness;
     }
   }
-
-  /**
-   * Return WebGL uniform locations for this filter's shader.
-   *
-   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-   * @param {WebGLShaderProgram} program This filter's compiled shader program.
-   */
-  getUniformLocations(gl, program) {
-    return {
-      uBrightness: gl.getUniformLocation(program, 'uBrightness')
-    };
+  isNeutralState() {
+    return this.brightness === 0;
   }
 
   /**
@@ -26285,14 +26202,13 @@ class Brightness extends BaseFilter {
  */
 _defineProperty(Brightness, "type", 'Brightness');
 _defineProperty(Brightness, "defaults", brightnessDefaultValues);
+_defineProperty(Brightness, "uniformLocations", ['uBrightness']);
 classRegistry.setClass(Brightness);
 
 const fragmentSource$9 = "\n  precision highp float;\n  uniform sampler2D uTexture;\n  varying vec2 vTexCoord;\n  uniform mat4 uColorMatrix;\n  uniform vec4 uConstants;\n  void main() {\n    vec4 color = texture2D(uTexture, vTexCoord);\n    color *= uColorMatrix;\n    color += uConstants;\n    gl_FragColor = color;\n  }";
 
-const _excluded$2 = ["matrix"];
 const colorMatrixDefaultValues = {
   matrix: [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0],
-  mainParameter: 'matrix',
   colorsOnly: true
 };
 
@@ -26313,17 +26229,6 @@ const colorMatrixDefaultValues = {
    * object.applyFilters();
    */
 class ColorMatrix extends BaseFilter {
-  setOptions(_ref) {
-    let {
-        matrix
-      } = _ref,
-      options = _objectWithoutProperties(_ref, _excluded$2);
-    if (matrix) {
-      // safeguard against mutation
-      this.matrix = [...matrix];
-    }
-    Object.assign(this, options);
-  }
   getFragmentSource() {
     return fragmentSource$9;
   }
@@ -26357,19 +26262,6 @@ class ColorMatrix extends BaseFilter {
     }
   }
 
-  /**
-   * Return WebGL uniform locations for this filter's shader.
-   *
-   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-   * @param {WebGLShaderProgram} program This filter's compiled shader program.
-   */
-  getUniformLocations(gl, program) {
-    return {
-      uColorMatrix: gl.getUniformLocation(program, 'uColorMatrix'),
-      uConstants: gl.getUniformLocation(program, 'uConstants')
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
@@ -26383,6 +26275,11 @@ class ColorMatrix extends BaseFilter {
     gl.uniformMatrix4fv(uniformLocations.uColorMatrix, false, matrix);
     gl.uniform4fv(uniformLocations.uConstants, constants);
   }
+  toObject() {
+    return _objectSpread2(_objectSpread2({}, super.toObject()), {}, {
+      matrix: [...this.matrix]
+    });
+  }
 }
 /**
  * Colormatrix for pixels.
@@ -26400,17 +26297,23 @@ class ColorMatrix extends BaseFilter {
  */
 _defineProperty(ColorMatrix, "type", 'ColorMatrix');
 _defineProperty(ColorMatrix, "defaults", colorMatrixDefaultValues);
+_defineProperty(ColorMatrix, "uniformLocations", ['uColorMatrix', 'uConstants']);
 classRegistry.setClass(ColorMatrix);
 
 function createColorMatrixFilter(key, matrix) {
   var _class;
-  const newClass = (_class = class newClass extends ColorMatrix {}, _defineProperty(_class, "type", key), _defineProperty(_class, "defaults", _objectSpread2(_objectSpread2({}, colorMatrixDefaultValues), {}, {
-    /**
-     * Lock the matrix export for this kind of static, parameter less filters.
-     */
-    mainParameter: undefined,
+  const newClass = (_class = class newClass extends ColorMatrix {
+    //@ts-expect-error TS wants matrix to be exported.
+    toObject() {
+      return {
+        type: this.type,
+        colorsOnly: this.colorsOnly
+      };
+    }
+  }, _defineProperty(_class, "type", key), _defineProperty(_class, "defaults", {
+    colorsOnly: false,
     matrix
-  })), _class);
+  }), _class);
   classRegistry.setClass(newClass, key);
   return newClass;
 }
@@ -26422,20 +26325,14 @@ const Polaroid = createColorMatrixFilter('Polaroid', [1.438, -0.062, -0.062, 0,
 const Sepia = createColorMatrixFilter('Sepia', [0.393, 0.769, 0.189, 0, 0, 0.349, 0.686, 0.168, 0, 0, 0.272, 0.534, 0.131, 0, 0, 0, 0, 0, 1, 0]);
 const BlackWhite = createColorMatrixFilter('BlackWhite', [1.5, 1.5, 1.5, 0, -1, 1.5, 1.5, 1.5, 0, -1, 1.5, 1.5, 1.5, 0, -1, 0, 0, 0, 1, 0]);
 
-const _excluded$1 = ["subFilters"];
-
 /**
  * A container class that knows how to apply a sequence of filters to an input image.
  */
 class Composed extends BaseFilter {
   constructor() {
-    let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      {
-        subFilters = []
-      } = _ref,
-      options = _objectWithoutProperties(_ref, _excluded$1);
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     super(options);
-    this.subFilters = subFilters;
+    this.subFilters = options.subFilters || [];
   }
 
   /**
@@ -26455,13 +26352,14 @@ class Composed extends BaseFilter {
 
   /**
    * Serialize this filter into JSON.
-   *
    * @returns {Object} A JSON representation of this filter.
    */
+  //@ts-expect-error TS doesn't like this toObject
   toObject() {
-    return _objectSpread2(_objectSpread2({}, super.toObject()), {}, {
+    return {
+      type: this.type,
       subFilters: this.subFilters.map(filter => filter.toObject())
-    });
+    };
   }
   isNeutralState() {
     return !this.subFilters.some(filter => !filter.isNeutralState());
@@ -26490,8 +26388,7 @@ classRegistry.setClass(Composed);
 const fragmentSource$8 = "\n  precision highp float;\n  uniform sampler2D uTexture;\n  uniform float uContrast;\n  varying vec2 vTexCoord;\n  void main() {\n    vec4 color = texture2D(uTexture, vTexCoord);\n    float contrastF = 1.015 * (uContrast + 1.0) / (1.0 * (1.015 - uContrast));\n    color.rgb = contrastF * (color.rgb - 0.5) + 0.5;\n    gl_FragColor = color;\n  }";
 
 const contrastDefaultValues = {
-  contrast: 0,
-  mainParameter: 'contrast'
+  contrast: 0
 };
 
 /**
@@ -26507,6 +26404,10 @@ class Contrast extends BaseFilter {
   getFragmentSource() {
     return fragmentSource$8;
   }
+  isNeutralState() {
+    return this.contrast === 0;
+  }
+
   /**
    * Apply the Contrast operation to a Uint8Array representing the pixels of an image.
    *
@@ -26519,9 +26420,6 @@ class Contrast extends BaseFilter {
         data
       }
     } = _ref;
-    if (this.contrast === 0) {
-      return;
-    }
     const contrast = Math.floor(this.contrast * 255),
       contrastF = 259 * (contrast + 255) / (255 * (259 - contrast));
     for (let i = 0; i < data.length; i += 4) {
@@ -26531,18 +26429,6 @@ class Contrast extends BaseFilter {
     }
   }
 
-  /**
-   * Return WebGL uniform locations for this filter's shader.
-   *
-   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-   * @param {WebGLShaderProgram} program This filter's compiled shader program.
-   */
-  getUniformLocations(gl, program) {
-    return {
-      uContrast: gl.getUniformLocation(program, 'uContrast')
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
@@ -26560,6 +26446,7 @@ class Contrast extends BaseFilter {
  */
 _defineProperty(Contrast, "type", 'Contrast');
 _defineProperty(Contrast, "defaults", contrastDefaultValues);
+_defineProperty(Contrast, "uniformLocations", ['uContrast']);
 classRegistry.setClass(Contrast);
 
 const fragmentSource$7 = {
@@ -26687,21 +26574,6 @@ class Convolute extends BaseFilter {
     options.imageData = output;
   }
 
-  /**
-   * Return WebGL uniform locations for this filter's shader.
-   *
-   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-   * @param {WebGLShaderProgram} program This filter's compiled shader program.
-   */
-  getUniformLocations(gl, program) {
-    return {
-      uMatrix: gl.getUniformLocation(program, 'uMatrix'),
-      uOpaque: gl.getUniformLocation(program, 'uOpaque'),
-      uHalfSize: gl.getUniformLocation(program, 'uHalfSize'),
-      uSize: gl.getUniformLocation(program, 'uSize')
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
@@ -26731,13 +26603,13 @@ class Convolute extends BaseFilter {
  */
 _defineProperty(Convolute, "type", 'Convolute');
 _defineProperty(Convolute, "defaults", convoluteDefaultValues);
+_defineProperty(Convolute, "uniformLocations", ['uMatrix', 'uOpaque', 'uHalfSize', 'uSize']);
 classRegistry.setClass(Convolute);
 
 const fragmentSource$6 = "\n  precision highp float;\n  uniform sampler2D uTexture;\n  uniform vec3 uGamma;\n  varying vec2 vTexCoord;\n  void main() {\n    vec4 color = texture2D(uTexture, vTexCoord);\n    vec3 correction = (1.0 / uGamma);\n    color.r = pow(color.r, correction.r);\n    color.g = pow(color.g, correction.g);\n    color.b = pow(color.b, correction.b);\n    gl_FragColor = color;\n    gl_FragColor.rgb *= color.a;\n  }\n";
 
-const _excluded = ["gamma"];
+const GAMMA = 'Gamma';
 const gammaDefaultValues = {
-  mainParameter: 'gamma',
   gamma: [1, 1, 1]
 };
 
@@ -26755,13 +26627,9 @@ class Gamma extends BaseFilter {
     return fragmentSource$6;
   }
   constructor() {
-    let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      {
-        gamma = [1, 1, 1]
-      } = _ref,
-      options = _objectWithoutProperties(_ref, _excluded);
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     super(options);
-    this.gamma = gamma;
+    this.gamma = options.gamma || this.constructor.defaults.gamma.concat();
   }
 
   /**
@@ -26770,12 +26638,12 @@ class Gamma extends BaseFilter {
    * @param {Object} options
    * @param {ImageData} options.imageData The Uint8Array to be filtered.
    */
-  applyTo2d(_ref2) {
+  applyTo2d(_ref) {
     let {
       imageData: {
         data
       }
-    } = _ref2;
+    } = _ref;
     const gamma = this.gamma,
       rInv = 1 / gamma[0],
       gInv = 1 / gamma[1],
@@ -26803,18 +26671,6 @@ class Gamma extends BaseFilter {
     }
   }
 
-  /**
-   * Return WebGL uniform locations for this filter's shader.
-   *
-   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-   * @param {WebGLShaderProgram} program This filter's compiled shader program.
-   */
-  getUniformLocations(gl, program) {
-    return {
-      uGamma: gl.getUniformLocation(program, 'uGamma')
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
@@ -26824,14 +26680,27 @@ class Gamma extends BaseFilter {
   sendUniformData(gl, uniformLocations) {
     gl.uniform3fv(uniformLocations.uGamma, this.gamma);
   }
+  isNeutralState() {
+    const {
+      gamma
+    } = this;
+    return gamma[0] === 1 && gamma[1] === 1 && gamma[2] === 1;
+  }
+  toObject() {
+    return {
+      type: GAMMA,
+      gamma: this.gamma.concat()
+    };
+  }
 }
 /**
  * Gamma array value, from 0.01 to 2.2.
  * @param {Array} gamma
  * @default
  */
-_defineProperty(Gamma, "type", 'Gamma');
+_defineProperty(Gamma, "type", GAMMA);
 _defineProperty(Gamma, "defaults", gammaDefaultValues);
+_defineProperty(Gamma, "uniformLocations", ['uGamma']);
 classRegistry.setClass(Gamma);
 
 const fragmentSource$5 = {
@@ -26841,8 +26710,7 @@ const fragmentSource$5 = {
 };
 
 const grayscaleDefaultValues = {
-  mode: 'average',
-  mainParameter: 'mode'
+  mode: 'average'
 };
 
 /**
@@ -26889,18 +26757,6 @@ class Grayscale extends BaseFilter {
     return fragmentSource$5[this.mode];
   }
 
-  /**
-   * Return WebGL uniform locations for this filter's shader.
-   *
-   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-   * @param {WebGLShaderProgram} program This filter's compiled shader program.
-   */
-  getUniformLocations(gl, program) {
-    return {
-      uMode: gl.getUniformLocation(program, 'uMode')
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
@@ -26923,11 +26779,11 @@ class Grayscale extends BaseFilter {
 }
 _defineProperty(Grayscale, "type", 'Grayscale');
 _defineProperty(Grayscale, "defaults", grayscaleDefaultValues);
+_defineProperty(Grayscale, "uniformLocations", ['uMode']);
 classRegistry.setClass(Grayscale);
 
 const hueRotationDefaultValues = {
-  rotation: 0,
-  mainParameter: 'rotation'
+  rotation: 0
 };
 
 /**
@@ -26939,7 +26795,6 @@ const hueRotationDefaultValues = {
  * object.filters.push(filter);
  * object.applyFilters();
  */
-// @ts-expect-error some babbling about mainParameter
 class HueRotation extends ColorMatrix {
   calculateMatrix() {
     const rad = this.rotation * Math.PI,
@@ -26960,13 +26815,20 @@ class HueRotation extends ColorMatrix {
     this.matrix[12] = cosine + aThird * OneMinusCos;
   }
   isNeutralState() {
-    this.calculateMatrix();
-    return super.isNeutralState();
+    return this.rotation === 0;
   }
   applyTo(options) {
     this.calculateMatrix();
     super.applyTo(options);
   }
+
+  //@ts-expect-error TS and classes with different methods
+  toObject() {
+    return {
+      type: this.type,
+      rotation: this.rotation
+    };
+  }
 }
 /**
  * HueRotation value, from -1 to 1.
@@ -26979,8 +26841,7 @@ const fragmentSource$4 = "\n  precision highp float;\n  uniform sampler2D uTextu
 
 const invertDefaultValues = {
   alpha: false,
-  invert: true,
-  mainParameter: 'invert'
+  invert: true
 };
 
 /**
@@ -27025,19 +26886,6 @@ class Invert extends BaseFilter {
     return !this.invert;
   }
 
-  /**
-   * Return WebGL uniform locations for this filter's shader.
-   *
-   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-   * @param {WebGLShaderProgram} program This filter's compiled shader program.
-   */
-  getUniformLocations(gl, program) {
-    return {
-      uInvert: gl.getUniformLocation(program, 'uInvert'),
-      uAlpha: gl.getUniformLocation(program, 'uAlpha')
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
@@ -27061,12 +26909,12 @@ class Invert extends BaseFilter {
  */
 _defineProperty(Invert, "type", 'Invert');
 _defineProperty(Invert, "defaults", invertDefaultValues);
+_defineProperty(Invert, "uniformLocations", ['uInvert', 'uAlpha']);
 classRegistry.setClass(Invert);
 
 const fragmentSource$3 = "\n  precision highp float;\n  uniform sampler2D uTexture;\n  uniform float uStepH;\n  uniform float uNoise;\n  uniform float uSeed;\n  varying vec2 vTexCoord;\n  float rand(vec2 co, float seed, float vScale) {\n    return fract(sin(dot(co.xy * vScale ,vec2(12.9898 , 78.233))) * 43758.5453 * (seed + 0.01) / 2.0);\n  }\n  void main() {\n    vec4 color = texture2D(uTexture, vTexCoord);\n    color.rgb += (0.5 - rand(vTexCoord, uSeed, 0.1 / uStepH)) * uNoise;\n    gl_FragColor = color;\n  }\n";
 
 const noiseDefaultValues = {
-  mainParameter: 'noise',
   noise: 0
 };
 
@@ -27097,9 +26945,6 @@ class Noise extends BaseFilter {
         data
       }
     } = _ref;
-    if (this.noise === 0) {
-      return;
-    }
     const noise = this.noise;
     for (let i = 0; i < data.length; i += 4) {
       const rand = (0.5 - Math.random()) * noise;
@@ -27109,19 +26954,6 @@ class Noise extends BaseFilter {
     }
   }
 
-  /**
-   * Return WebGL uniform locations for this filter's shader.
-   *
-   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-   * @param {WebGLShaderProgram} program This filter's compiled shader program.
-   */
-  getUniformLocations(gl, program) {
-    return {
-      uNoise: gl.getUniformLocation(program, 'uNoise'),
-      uSeed: gl.getUniformLocation(program, 'uSeed')
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
@@ -27132,15 +26964,8 @@ class Noise extends BaseFilter {
     gl.uniform1f(uniformLocations.uNoise, this.noise / 255);
     gl.uniform1f(uniformLocations.uSeed, Math.random());
   }
-
-  /**
-   * Returns object representation of an instance
-   * @return {Object} Object representation of an instance
-   */
-  toObject() {
-    return _objectSpread2(_objectSpread2({}, super.toObject()), {}, {
-      noise: this.noise
-    });
+  isNeutralState() {
+    return this.noise === 0;
   }
 }
 /**
@@ -27150,13 +26975,13 @@ class Noise extends BaseFilter {
  */
 _defineProperty(Noise, "type", 'Noise');
 _defineProperty(Noise, "defaults", noiseDefaultValues);
+_defineProperty(Noise, "uniformLocations", ['uNoise', 'uSeed']);
 classRegistry.setClass(Noise);
 
 const fragmentSource$2 = "\n  precision highp float;\n  uniform sampler2D uTexture;\n  uniform float uBlocksize;\n  uniform float uStepW;\n  uniform float uStepH;\n  varying vec2 vTexCoord;\n  void main() {\n    float blockW = uBlocksize * uStepW;\n    float blockH = uBlocksize * uStepW;\n    int posX = int(vTexCoord.x / blockW);\n    int posY = int(vTexCoord.y / blockH);\n    float fposX = float(posX);\n    float fposY = float(posY);\n    vec2 squareCoords = vec2(fposX * blockW, fposY * blockH);\n    vec4 color = texture2D(uTexture, squareCoords);\n    gl_FragColor = color;\n  }\n";
 
 const pixelateDefaultValues = {
-  blocksize: 4,
-  mainParameter: 'blocksize'
+  blocksize: 4
 };
 
 /**
@@ -27213,20 +27038,6 @@ class Pixelate extends BaseFilter {
     return fragmentSource$2;
   }
 
-  /**
-   * Return WebGL uniform locations for this filter's shader.
-   *
-   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-   * @param {WebGLShaderProgram} program This filter's compiled shader program.
-   */
-  getUniformLocations(gl, program) {
-    return {
-      uBlocksize: gl.getUniformLocation(program, 'uBlocksize'),
-      uStepW: gl.getUniformLocation(program, 'uStepW'),
-      uStepH: gl.getUniformLocation(program, 'uStepH')
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
@@ -27239,6 +27050,7 @@ class Pixelate extends BaseFilter {
 }
 _defineProperty(Pixelate, "type", 'Pixelate');
 _defineProperty(Pixelate, "defaults", pixelateDefaultValues);
+_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";
@@ -27288,19 +27100,6 @@ class RemoveColor extends BaseFilter {
     }
   }
 
-  /**
-   * Return WebGL uniform locations for this filter's shader.
-   *
-   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-   * @param {WebGLShaderProgram} program This filter's compiled shader program.
-   */
-  getUniformLocations(gl, program) {
-    return {
-      uLow: gl.getUniformLocation(program, 'uLow'),
-      uHigh: gl.getUniformLocation(program, 'uHigh')
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
@@ -27315,17 +27114,6 @@ class RemoveColor extends BaseFilter {
     gl.uniform4fv(uniformLocations.uLow, lowC);
     gl.uniform4fv(uniformLocations.uHigh, highC);
   }
-
-  /**
-   * Returns object representation of an instance
-   * @return {Object} Object representation of an instance
-   */
-  toObject() {
-    return _objectSpread2(_objectSpread2({}, super.toObject()), {}, {
-      color: this.color,
-      distance: this.distance
-    });
-  }
 }
 /**
  * Color to remove, in any format understood by {@link Color}.
@@ -27342,14 +27130,14 @@ class RemoveColor extends BaseFilter {
  **/
 _defineProperty(RemoveColor, "type", 'RemoveColor');
 _defineProperty(RemoveColor, "defaults", removeColorDefaultValues);
+_defineProperty(RemoveColor, "uniformLocations", ['uLow', 'uHigh']);
 classRegistry.setClass(RemoveColor);
 
 const resizeDefaultValues = {
   resizeType: 'hermite',
   scaleX: 1,
   scaleY: 1,
-  lanczosLobes: 3,
-  fragmentSourceTOP: "\n    precision highp float;\n    uniform sampler2D uTexture;\n    uniform vec2 uDelta;\n    varying vec2 vTexCoord;\n  "
+  lanczosLobes: 3
 };
 /**
  * Resize image filter class
@@ -27359,19 +27147,6 @@ const resizeDefaultValues = {
  * object.applyFilters(canvas.renderAll.bind(canvas));
  */
 class Resize extends BaseFilter {
-  /**
-   * Return WebGL uniform locations for this filter's shader.
-   *
-   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-   * @param {WebGLShaderProgram} program This filter's compiled shader program.
-   */
-  getUniformLocations(gl, program) {
-    return {
-      uDelta: gl.getUniformLocation(program, 'uDelta'),
-      uTaps: gl.getUniformLocation(program, 'uTaps')
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
@@ -27414,7 +27189,7 @@ class Resize extends BaseFilter {
     for (let i = 1; i <= filterWindow; i++) {
       offsets[i - 1] = "".concat(i, ".0 * uDelta");
     }
-    return "\n      ".concat(this.fragmentSourceTOP, "\n      uniform float uTaps[").concat(filterWindow, "];\n      void main() {\n        vec4 color = texture2D(uTexture, vTexCoord);\n        float sum = 1.0;\n        ").concat(offsets.map((offset, i) => "\n              color += texture2D(uTexture, vTexCoord + ".concat(offset, ") * uTaps[").concat(i, "] + texture2D(uTexture, vTexCoord - ").concat(offset, ") * uTaps[").concat(i, "];\n              sum += 2.0 * uTaps[").concat(i, "];\n            ")).join('\n'), "\n        gl_FragColor = color / sum;\n      }\n    ");
+    return "\n      precision highp float;\n      uniform sampler2D uTexture;\n      uniform vec2 uDelta;\n      varying vec2 vTexCoord;\n      uniform float uTaps[".concat(filterWindow, "];\n      void main() {\n        vec4 color = texture2D(uTexture, vTexCoord);\n        float sum = 1.0;\n        ").concat(offsets.map((offset, i) => "\n              color += texture2D(uTexture, vTexCoord + ".concat(offset, ") * uTaps[").concat(i, "] + texture2D(uTexture, vTexCoord - ").concat(offset, ") * uTaps[").concat(i, "];\n              sum += 2.0 * uTaps[").concat(i, "];\n            ")).join('\n'), "\n        gl_FragColor = color / sum;\n      }\n    ");
   }
   applyToForWebgl(options) {
     options.passes++;
@@ -27757,20 +27532,6 @@ class Resize extends BaseFilter {
     }
     return img2;
   }
-
-  /**
-   * Returns object representation of an instance
-   * @return {Object} Object representation of an instance
-   */
-  toObject() {
-    return {
-      type: this.type,
-      scaleX: this.scaleX,
-      scaleY: this.scaleY,
-      resizeType: this.resizeType,
-      lanczosLobes: this.lanczosLobes
-    };
-  }
 }
 /**
  * Resize type
@@ -27795,10 +27556,15 @@ class Resize extends BaseFilter {
  */
 _defineProperty(Resize, "type", 'Resize');
 _defineProperty(Resize, "defaults", resizeDefaultValues);
+_defineProperty(Resize, "uniformLocations", ['uDelta', 'uTaps']);
 classRegistry.setClass(Resize);
 
 const fragmentSource$1 = "\n  precision highp float;\n  uniform sampler2D uTexture;\n  uniform float uSaturation;\n  varying vec2 vTexCoord;\n  void main() {\n    vec4 color = texture2D(uTexture, vTexCoord);\n    float rgMax = max(color.r, color.g);\n    float rgbMax = max(rgMax, color.b);\n    color.r += rgbMax != color.r ? (rgbMax - color.r) * uSaturation : 0.00;\n    color.g += rgbMax != color.g ? (rgbMax - color.g) * uSaturation : 0.00;\n    color.b += rgbMax != color.b ? (rgbMax - color.b) * uSaturation : 0.00;\n    gl_FragColor = color;\n  }\n";
 
+const saturationDefaultValues = {
+  saturation: 0
+};
+
 /**
  * Saturate filter class
  * @example
@@ -27808,11 +27574,6 @@ const fragmentSource$1 = "\n  precision highp float;\n  uniform sampler2D uTextu
  * object.filters.push(filter);
  * object.applyFilters();
  */
-
-const saturationDefaultValues = {
-  saturation: 0,
-  mainParameter: 'saturation'
-};
 class Saturation extends BaseFilter {
   getFragmentSource() {
     return fragmentSource$1;
@@ -27830,9 +27591,6 @@ class Saturation extends BaseFilter {
         data
       }
     } = _ref;
-    if (this.saturation === 0) {
-      return;
-    }
     const adjust = -this.saturation;
     for (let i = 0; i < data.length; i += 4) {
       const max = Math.max(data[i], data[i + 1], data[i + 2]);
@@ -27842,18 +27600,6 @@ class Saturation extends BaseFilter {
     }
   }
 
-  /**
-   * Return WebGL uniform locations for this filter's shader.
-   *
-   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-   * @param {WebGLShaderProgram} program This filter's compiled shader program.
-   */
-  getUniformLocations(gl, program) {
-    return {
-      uSaturation: gl.getUniformLocation(program, 'uSaturation')
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
@@ -27863,6 +27609,9 @@ class Saturation extends BaseFilter {
   sendUniformData(gl, uniformLocations) {
     gl.uniform1f(uniformLocations.uSaturation, -this.saturation);
   }
+  isNeutralState() {
+    return this.saturation === 0;
+  }
 }
 /**
  * Saturation value, from -1 to 1.
@@ -27874,13 +27623,13 @@ class Saturation extends BaseFilter {
  */
 _defineProperty(Saturation, "type", 'Saturation');
 _defineProperty(Saturation, "defaults", saturationDefaultValues);
+_defineProperty(Saturation, "uniformLocations", ['uSaturation']);
 classRegistry.setClass(Saturation);
 
 const fragmentSource = "\n  precision highp float;\n  uniform sampler2D uTexture;\n  uniform float uVibrance;\n  varying vec2 vTexCoord;\n  void main() {\n    vec4 color = texture2D(uTexture, vTexCoord);\n    float max = max(color.r, max(color.g, color.b));\n    float avg = (color.r + color.g + color.b) / 3.0;\n    float amt = (abs(max - avg) * 2.0) * uVibrance;\n    color.r += max != color.r ? (max - color.r) * amt : 0.00;\n    color.g += max != color.g ? (max - color.g) * amt : 0.00;\n    color.b += max != color.b ? (max - color.b) * amt : 0.00;\n    gl_FragColor = color;\n  }\n";
 
 const vibranceDefaultValues = {
-  vibrance: 0,
-  mainParameter: 'vibrance'
+  vibrance: 0
 };
 
 /**
@@ -27909,9 +27658,6 @@ class Vibrance extends BaseFilter {
         data
       }
     } = _ref;
-    if (this.vibrance === 0) {
-      return;
-    }
     const adjust = -this.vibrance;
     for (let i = 0; i < data.length; i += 4) {
       const max = Math.max(data[i], data[i + 1], data[i + 2]);
@@ -27923,27 +27669,18 @@ class Vibrance extends BaseFilter {
     }
   }
 
-  /**
-   * Return WebGL uniform locations for this filter's shader.
-   *
-   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-   * @param {WebGLShaderProgram} program This filter's compiled shader program.
-   */
-  getUniformLocations(gl, program) {
-    return {
-      uVibrance: gl.getUniformLocation(program, 'uVibrance')
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
    * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
-   * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects
+   * @param {TWebGLUniformLocationMap} uniformLocations A map of string uniform names to WebGLUniformLocation objects
    */
   sendUniformData(gl, uniformLocations) {
     gl.uniform1f(uniformLocations.uVibrance, -this.vibrance);
   }
+  isNeutralState() {
+    return this.vibrance === 0;
+  }
 }
 /**
  * Vibrance value, from -1 to 1.
@@ -27955,6 +27692,7 @@ class Vibrance extends BaseFilter {
  */
 _defineProperty(Vibrance, "type", 'Vibrance');
 _defineProperty(Vibrance, "defaults", vibranceDefaultValues);
+_defineProperty(Vibrance, "uniformLocations", ['uVibrance']);
 classRegistry.setClass(Vibrance);
 
 var filters = /*#__PURE__*/Object.freeze({