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

package/dist/index.js

@@ -423,7 +423,7 @@
   }
   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;
@@ -2371,6 +2371,7 @@
      * @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]);
@@ -2396,7 +2397,7 @@
       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];
     }
 
     /**
@@ -3323,20 +3324,7 @@
      * @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();
     }
@@ -4388,7 +4376,7 @@
     };
   };
 
-  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,
@@ -4430,7 +4418,7 @@
         scaleX,
         scaleY
       } = _qrDecompose,
-      otherOptions = _objectWithoutProperties(_qrDecompose, _excluded$m),
+      otherOptions = _objectWithoutProperties(_qrDecompose, _excluded$i),
       center = new Point(translateX, translateY);
     object.flipX = false;
     object.flipY = false;
@@ -5345,14 +5333,14 @@
     }
   }
 
-  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
@@ -5367,14 +5355,14 @@
     }
   }
 
-  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])
@@ -5391,7 +5379,7 @@
 
   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;
@@ -5407,7 +5395,7 @@
           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), {}, {
@@ -6448,10 +6436,6 @@
     }
   }
 
-  /**
-   * Strict: only ancestors that are objects (without canvas)
-   */
-
   class StackedObject extends ObjectGeometry {
     /**
      * A reference to the parent of the object
@@ -6475,17 +6459,14 @@
     }
 
     /**
-     *
-     * @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;
@@ -6495,19 +6476,18 @@
      * 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 {
@@ -6554,11 +6534,10 @@
     /**
      *
      * @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;
     }
 
@@ -6572,16 +6551,15 @@
         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;
       }
@@ -6954,7 +6932,7 @@
     moveCursor: null
   };
 
-  const _excluded$i = ["type"],
+  const _excluded$e = ["type"],
     _excluded2$4 = ["extraParam"];
   /**
    * Root object class from which all 2d shape classes inherit from
@@ -7142,7 +7120,7 @@
         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;
@@ -7183,8 +7161,6 @@
         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;
@@ -7459,8 +7435,6 @@
     _removeCacheCanvas() {
       this._cacheCanvas = undefined;
       this._cacheContext = null;
-      this.cacheWidth = 0;
-      this.cacheHeight = 0;
     }
 
     /**
@@ -7619,15 +7593,18 @@
       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;
         }
@@ -8151,7 +8128,7 @@
      * @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
@@ -8902,7 +8879,7 @@
   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',
@@ -8952,7 +8929,7 @@
         ey,
         skewingSide
       } = _ref,
-      transform = _objectWithoutProperties(_ref, _excluded$h);
+      transform = _objectWithoutProperties(_ref, _excluded$d);
     const {
         skew: skewKey
       } = AXIS_KEYS[axis],
@@ -9538,6 +9515,9 @@
      * 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
      */
@@ -9561,7 +9541,6 @@
         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];
@@ -10794,7 +10773,7 @@
     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
@@ -10908,7 +10887,7 @@
           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,
@@ -11064,7 +11043,7 @@
   _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 {
@@ -11167,7 +11146,7 @@
         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,
@@ -11311,7 +11290,7 @@
   }
   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
@@ -11378,6 +11357,15 @@
       _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);
@@ -11387,7 +11375,7 @@
       });
 
       // 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,
@@ -11859,7 +11847,7 @@
           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), {}, {
@@ -14015,8 +14003,8 @@
       this._activeObject = object;
       if (isActiveSelection(object) && prevActiveObject !== object) {
         object.set('canvas', this);
-        object.setCoords();
       }
+      object.setCoords();
       return true;
     }
 
@@ -14269,7 +14257,7 @@
     }
   }
 
-  const _excluded$d = ["target", "oldTarget", "fireCanvas", "e"];
+  const _excluded$9 = ["target", "oldTarget", "fireCanvas", "e"];
   const addEventOptions = {
     passive: false
   };
@@ -15283,7 +15271,7 @@
           fireCanvas,
           e
         } = _ref,
-        data = _objectWithoutProperties(_ref, _excluded$d);
+        data = _objectWithoutProperties(_ref, _excluded$9);
       const {
         targetIn,
         targetOut,
@@ -15342,16 +15330,15 @@
      * @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);
@@ -15978,7 +15965,7 @@
   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}
@@ -16136,7 +16123,7 @@
           type,
           source
         } = _ref2,
-        serialized = _objectWithoutProperties(_ref2, _excluded$c);
+        serialized = _objectWithoutProperties(_ref2, _excluded$8);
       const img = await loadImage(source, _objectSpread2(_objectSpread2({}, options), {}, {
         crossOrigin: serialized.crossOrigin
       }));
@@ -16283,7 +16270,7 @@
     }
   }
 
-  const _excluded$b = ["path", "left", "top"],
+  const _excluded$7 = ["path", "left", "top"],
     _excluded2$2 = ["d"];
   class Path extends FabricObject {
     /**
@@ -16299,7 +16286,7 @@
           left,
           top
         } = _ref,
-        options = _objectWithoutProperties(_ref, _excluded$b);
+        options = _objectWithoutProperties(_ref, _excluded$7);
       super();
       Object.assign(this, Path.ownDefaults);
       this.setOptions(options);
@@ -16435,7 +16422,7 @@
     toClipPathSVG(reviver) {
       const additionalTransform = this._getOffsetTransform();
       return '\t' + this._createBaseClipPathSVGMarkup(this._toSVG(), {
-        reviver: reviver,
+        reviver,
         additionalTransform: additionalTransform
       });
     }
@@ -16448,7 +16435,7 @@
     toSVG(reviver) {
       const additionalTransform = this._getOffsetTransform();
       return this._createBaseSVGMarkup(this._toSVG(), {
-        reviver: reviver,
+        reviver,
         additionalTransform: additionalTransform
       });
     }
@@ -16871,7 +16858,7 @@
     }
   }
 
-  const _excluded$a = ["left", "top", "radius"];
+  const _excluded$6 = ["left", "top", "radius"];
   const CIRCLE_PROPS = ['radius', 'startAngle', 'endAngle', 'counterClockwise'];
   const circleDefaultValues = {
     radius: 0,
@@ -17005,7 +16992,7 @@
           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.
 
@@ -17388,7 +17375,7 @@
     }
   }
 
-  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.
 
@@ -17600,7 +17587,7 @@
           x2 = 0,
           y2 = 0
         } = _parseAttributes,
-        parsedAttributes = _objectWithoutProperties(_parseAttributes, _excluded$9);
+        parsedAttributes = _objectWithoutProperties(_parseAttributes, _excluded$5);
       return new this([x1, y1, x2, y2], parsedAttributes);
     }
 
@@ -17866,7 +17853,7 @@
     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
@@ -18149,7 +18136,7 @@
     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));
     }
 
@@ -18741,7 +18728,7 @@
     }
   }
 
-  const _excluded$7 = ["textAnchor", "textDecoration", "dx", "dy", "top", "left", "fontSize", "strokeWidth"];
+  const _excluded$3 = ["textAnchor", "textDecoration", "dx", "dy", "top", "left", "fontSize", "strokeWidth"];
   let measuringContext;
 
   /**
@@ -19945,7 +19932,7 @@
           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
@@ -23312,7 +23299,6 @@
     }
   }
 
-  const _excluded$6 = ["layoutManager"];
   const activeSelectionDefaultValues = {
     multiSelectionStacking: 'canvas-stacking'
   };
@@ -23348,16 +23334,20 @@
 
     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()
+      });
     }
 
     /**
@@ -23937,7 +23927,7 @@
     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.
 
@@ -24520,7 +24510,7 @@
           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),
@@ -25290,9 +25280,9 @@
 
   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 {
@@ -25313,30 +25303,21 @@
      * 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.
@@ -25347,7 +25328,7 @@
      */
     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'
@@ -25404,14 +25385,17 @@
     /**
      * 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;
     }
 
     /**
@@ -25461,18 +25445,7 @@
      **/
     // 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;
     }
 
     /**
@@ -25564,14 +25537,6 @@
       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.
@@ -25603,12 +25568,14 @@
      * @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;
+      }, {}));
     }
 
     /**
@@ -25625,6 +25592,12 @@
     }
   }
   _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',
@@ -25744,18 +25717,6 @@
       }
     }
 
-    /**
-     * 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.
      *
@@ -25770,19 +25731,6 @@
       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
@@ -25803,18 +25751,19 @@
    **/
   _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
   };
 
   /**
@@ -25840,6 +25789,9 @@
     getFragmentSource() {
       return fragmentSource$c[this.mode];
     }
+    getVertexSource() {
+      return vertexSource;
+    }
     applyToWebGL(options) {
       const gl = options.context,
         texture = this.createTexture(options.filterBackend, this.image);
@@ -25921,19 +25873,6 @@
       }
     }
 
-    /**
-     * 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.
      *
@@ -25948,15 +25887,14 @@
 
     /**
      * 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()
+      });
     }
 
     /**
@@ -25967,12 +25905,12 @@
      * @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
       })));
@@ -25996,13 +25934,13 @@
    **/
   _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
   };
 
   /**
@@ -26097,18 +26035,6 @@
       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.
      *
@@ -26119,6 +26045,9 @@
       const delta = this.chooseRightDelta();
       gl.uniform2fv(uniformLocations.delta, delta);
     }
+    isNeutralState() {
+      return this.blur === 0;
+    }
 
     /**
      * choose right value of image percentage to blur with
@@ -26156,13 +26085,13 @@
    */
   _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
   };
 
   /**
@@ -26191,9 +26120,6 @@
           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;
@@ -26201,17 +26127,8 @@
         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;
     }
 
     /**
@@ -26233,14 +26150,13 @@
    */
   _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
   };
 
@@ -26261,17 +26177,6 @@
      * 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;
     }
@@ -26305,19 +26210,6 @@
       }
     }
 
-    /**
-     * 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.
      *
@@ -26331,6 +26223,11 @@
       gl.uniformMatrix4fv(uniformLocations.uColorMatrix, false, matrix);
       gl.uniform4fv(uniformLocations.uConstants, constants);
     }
+    toObject() {
+      return _objectSpread2(_objectSpread2({}, super.toObject()), {}, {
+        matrix: [...this.matrix]
+      });
+    }
   }
   /**
    * Colormatrix for pixels.
@@ -26348,17 +26245,23 @@
    */
   _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;
   }
@@ -26370,20 +26273,14 @@
   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 || [];
     }
 
     /**
@@ -26403,13 +26300,14 @@
 
     /**
      * 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());
@@ -26438,8 +26336,7 @@
   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
   };
 
   /**
@@ -26455,6 +26352,10 @@
     getFragmentSource() {
       return fragmentSource$8;
     }
+    isNeutralState() {
+      return this.contrast === 0;
+    }
+
     /**
      * Apply the Contrast operation to a Uint8Array representing the pixels of an image.
      *
@@ -26467,9 +26368,6 @@
           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) {
@@ -26479,18 +26377,6 @@
       }
     }
 
-    /**
-     * 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.
      *
@@ -26508,6 +26394,7 @@
    */
   _defineProperty(Contrast, "type", 'Contrast');
   _defineProperty(Contrast, "defaults", contrastDefaultValues);
+  _defineProperty(Contrast, "uniformLocations", ['uContrast']);
   classRegistry.setClass(Contrast);
 
   const fragmentSource$7 = {
@@ -26635,21 +26522,6 @@
       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.
      *
@@ -26679,13 +26551,13 @@
    */
   _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]
   };
 
@@ -26703,13 +26575,9 @@
       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();
     }
 
     /**
@@ -26718,12 +26586,12 @@
      * @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],
@@ -26751,18 +26619,6 @@
       }
     }
 
-    /**
-     * 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.
      *
@@ -26772,14 +26628,27 @@
     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 = {
@@ -26789,8 +26658,7 @@
   };
 
   const grayscaleDefaultValues = {
-    mode: 'average',
-    mainParameter: 'mode'
+    mode: 'average'
   };
 
   /**
@@ -26837,18 +26705,6 @@
       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.
      *
@@ -26871,11 +26727,11 @@
   }
   _defineProperty(Grayscale, "type", 'Grayscale');
   _defineProperty(Grayscale, "defaults", grayscaleDefaultValues);
+  _defineProperty(Grayscale, "uniformLocations", ['uMode']);
   classRegistry.setClass(Grayscale);
 
   const hueRotationDefaultValues = {
-    rotation: 0,
-    mainParameter: 'rotation'
+    rotation: 0
   };
 
   /**
@@ -26887,7 +26743,6 @@
    * object.filters.push(filter);
    * object.applyFilters();
    */
-  // @ts-expect-error some babbling about mainParameter
   class HueRotation extends ColorMatrix {
     calculateMatrix() {
       const rad = this.rotation * Math.PI,
@@ -26908,13 +26763,20 @@
       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.
@@ -26927,8 +26789,7 @@
 
   const invertDefaultValues = {
     alpha: false,
-    invert: true,
-    mainParameter: 'invert'
+    invert: true
   };
 
   /**
@@ -26973,19 +26834,6 @@
       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.
      *
@@ -27009,12 +26857,12 @@
    */
   _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
   };
 
@@ -27045,9 +26893,6 @@
           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;
@@ -27057,19 +26902,6 @@
       }
     }
 
-    /**
-     * 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.
      *
@@ -27080,15 +26912,8 @@
       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;
     }
   }
   /**
@@ -27098,13 +26923,13 @@
    */
   _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
   };
 
   /**
@@ -27161,20 +26986,6 @@
       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.
      *
@@ -27187,6 +26998,7 @@
   }
   _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";
@@ -27236,19 +27048,6 @@
       }
     }
 
-    /**
-     * 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.
      *
@@ -27263,17 +27062,6 @@
       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}.
@@ -27290,14 +27078,14 @@
    **/
   _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
@@ -27307,19 +27095,6 @@
    * 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.
      *
@@ -27362,7 +27137,7 @@
       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++;
@@ -27705,20 +27480,6 @@
       }
       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
@@ -27743,10 +27504,15 @@
    */
   _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
@@ -27756,11 +27522,6 @@
    * object.filters.push(filter);
    * object.applyFilters();
    */
-
-  const saturationDefaultValues = {
-    saturation: 0,
-    mainParameter: 'saturation'
-  };
   class Saturation extends BaseFilter {
     getFragmentSource() {
       return fragmentSource$1;
@@ -27778,9 +27539,6 @@
           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]);
@@ -27790,18 +27548,6 @@
       }
     }
 
-    /**
-     * 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.
      *
@@ -27811,6 +27557,9 @@
     sendUniformData(gl, uniformLocations) {
       gl.uniform1f(uniformLocations.uSaturation, -this.saturation);
     }
+    isNeutralState() {
+      return this.saturation === 0;
+    }
   }
   /**
    * Saturation value, from -1 to 1.
@@ -27822,13 +27571,13 @@
    */
   _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
   };
 
   /**
@@ -27857,9 +27606,6 @@
           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]);
@@ -27871,27 +27617,18 @@
       }
     }
 
-    /**
-     * 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.
@@ -27903,6 +27640,7 @@
    */
   _defineProperty(Vibrance, "type", 'Vibrance');
   _defineProperty(Vibrance, "defaults", vibranceDefaultValues);
+  _defineProperty(Vibrance, "uniformLocations", ['uVibrance']);
   classRegistry.setClass(Vibrance);
 
   var filters = /*#__PURE__*/Object.freeze({