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

package/src/filters/Composed.ts

@@ -3,23 +3,29 @@ import type { T2DPipelineState, TWebGLPipelineState } from './typedefs';
 import { isWebGLPipelineState } from './utils';
 import { classRegistry } from '../ClassRegistry';
 
+type ComposedOwnProps = {
+  subFilters: BaseFilter<string, object>[];
+};
+
 /**
  * A container class that knows how to apply a sequence of filters to an input image.
  */
-export class Composed extends BaseFilter {
+export class Composed extends BaseFilter<'Composed', ComposedOwnProps> {
   /**
    * A non sparse array of filters to apply
    */
-  declare subFilters: BaseFilter[];
+  declare subFilters: ComposedOwnProps['subFilters'];
 
   static type = 'Composed';
 
-  constructor({
-    subFilters = [],
-    ...options
-  }: { subFilters?: BaseFilter[] } & Record<string, any> = {}) {
+  constructor(
+    options: { subFilters?: BaseFilter<string, object>[] } & Record<
+      string,
+      any
+    > = {}
+  ) {
     super(options);
-    this.subFilters = subFilters;
+    this.subFilters = options.subFilters || [];
   }
 
   /**
@@ -39,12 +45,15 @@ export class Composed extends BaseFilter {
 
   /**
    * Serialize this filter into JSON.
-   *
    * @returns {Object} A JSON representation of this filter.
    */
-  toObject() {
+  //@ts-expect-error TS doesn't like this toObject
+  toObject(): {
+    type: 'Composed';
+    subFilters: ReturnType<BaseFilter<string, object>['toObject']>[];
+  } {
     return {
-      ...super.toObject(),
+      type: this.type,
       subFilters: this.subFilters.map((filter) => filter.toObject()),
     };
   }
@@ -64,15 +73,16 @@ export class Composed extends BaseFilter {
   static fromObject(
     object: Record<string, any>,
     options: { signal: AbortSignal }
-  ) {
+  ): Promise<Composed> {
     return Promise.all(
-      ((object.subFilters || []) as BaseFilter[]).map((filter) =>
-        classRegistry
-          .getClass<typeof BaseFilter>(filter.type)
-          .fromObject(filter, options)
+      ((object.subFilters || []) as BaseFilter<string, object>[]).map(
+        (filter) =>
+          classRegistry
+            .getClass<typeof BaseFilter>(filter.type)
+            .fromObject(filter, options)
       )
     ).then(
-      (enlivedFilters) => new this({ subFilters: enlivedFilters }) as BaseFilter
+      (enlivedFilters) => new this({ subFilters: enlivedFilters }) as Composed
     );
   }
 }

package/src/filters/Contrast.ts

@@ -1,11 +1,14 @@
-import type { TClassProperties } from '../typedefs';
 import { BaseFilter } from './BaseFilter';
 import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
 import { classRegistry } from '../ClassRegistry';
 import { fragmentSource } from './shaders/constrast';
-export const contrastDefaultValues: Partial<TClassProperties<Contrast>> = {
+
+type ContrastOwnProps = {
+  contrast: number;
+};
+
+export const contrastDefaultValues: ContrastOwnProps = {
   contrast: 0,
-  mainParameter: 'contrast',
 };
 
 /**
@@ -17,21 +20,28 @@ export const contrastDefaultValues: Partial<TClassProperties<Contrast>> = {
  * object.filters.push(filter);
  * object.applyFilters();
  */
-export class Contrast extends BaseFilter {
+export class Contrast extends BaseFilter<'Contrast', ContrastOwnProps> {
   /**
    * contrast value, range from -1 to 1.
    * @param {Number} contrast
    * @default 0
    */
-  declare contrast: number;
+  declare contrast: ContrastOwnProps['contrast'];
 
   static type = 'Contrast';
 
   static defaults = contrastDefaultValues;
 
+  static uniformLocations = ['uContrast'];
+
   getFragmentSource() {
     return fragmentSource;
   }
+
+  isNeutralState() {
+    return this.contrast === 0;
+  }
+
   /**
    * Apply the Contrast operation to a Uint8Array representing the pixels of an image.
    *
@@ -39,9 +49,6 @@ export class Contrast extends BaseFilter {
    * @param {ImageData} options.imageData The Uint8Array to be filtered.
    */
   applyTo2d({ imageData: { data } }: T2DPipelineState) {
-    if (this.contrast === 0) {
-      return;
-    }
     const contrast = Math.floor(this.contrast * 255),
       contrastF = (259 * (contrast + 255)) / (255 * (259 - contrast));
 
@@ -52,21 +59,6 @@ export 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: WebGLRenderingContext,
-    program: WebGLProgram
-  ): TWebGLUniformLocationMap {
-    return {
-      uContrast: gl.getUniformLocation(program, 'uContrast'),
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *

package/src/filters/Convolute.ts

@@ -1,10 +1,14 @@
-import type { TClassProperties } from '../typedefs';
 import { BaseFilter } from './BaseFilter';
 import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
 import { classRegistry } from '../ClassRegistry';
 import { fragmentSource } from './shaders/convolute';
 
-export const convoluteDefaultValues: Partial<TClassProperties<Convolute>> = {
+export type ConvoluteOwnProps = {
+  opaque: boolean;
+  matrix: number[];
+};
+
+export const convoluteDefaultValues: ConvoluteOwnProps = {
   opaque: false,
   matrix: [0, 0, 0, 0, 1, 0, 0, 0, 0],
 };
@@ -49,21 +53,23 @@ export const convoluteDefaultValues: Partial<TClassProperties<Convolute>> = {
  * object.applyFilters();
  * canvas.renderAll();
  */
-export class Convolute extends BaseFilter {
+export class Convolute extends BaseFilter<'Convolute', ConvoluteOwnProps> {
   /*
    * Opaque value (true/false)
    */
-  declare opaque: boolean;
+  declare opaque: ConvoluteOwnProps['opaque'];
 
   /*
    * matrix for the filter, max 9x9
    */
-  declare matrix: number[];
+  declare matrix: ConvoluteOwnProps['matrix'];
 
   static type = 'Convolute';
 
   static defaults = convoluteDefaultValues;
 
+  static uniformLocations = ['uMatrix', 'uOpaque', 'uHalfSize', 'uSize'];
+
   getCacheKey() {
     return `${this.type}_${Math.sqrt(this.matrix.length)}_${
       this.opaque ? 1 : 0
@@ -139,24 +145,6 @@ export 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: WebGLRenderingContext,
-    program: WebGLProgram
-  ): TWebGLUniformLocationMap {
-    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.
    *

package/src/filters/Gamma.ts

@@ -1,12 +1,17 @@
-import type { TClassProperties } from '../typedefs';
 import { BaseFilter } from './BaseFilter';
-import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
 import { classRegistry } from '../ClassRegistry';
 import { fragmentSource } from './shaders/gamma';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+
+const GAMMA = 'Gamma' as const;
+
 export type GammaInput = [number, number, number];
 
-export const gammaDefaultValues: Partial<TClassProperties<Gamma>> = {
-  mainParameter: 'gamma',
+export type GammaOwnProps = {
+  gamma: GammaInput;
+};
+
+export const gammaDefaultValues: GammaOwnProps = {
   gamma: [1, 1, 1],
 };
 
@@ -19,30 +24,36 @@ export const gammaDefaultValues: Partial<TClassProperties<Gamma>> = {
  * object.filters.push(filter);
  * object.applyFilters();
  */
-export class Gamma extends BaseFilter {
+export class Gamma extends BaseFilter<typeof GAMMA, GammaOwnProps> {
   /**
    * Gamma array value, from 0.01 to 2.2.
    * @param {Array} gamma
    * @default
    */
-  declare gamma: GammaInput;
+  declare gamma: GammaOwnProps['gamma'];
   declare rgbValues?: {
     r: Uint8Array;
     g: Uint8Array;
     b: Uint8Array;
   };
 
-  static type = 'Gamma';
+  static type = GAMMA;
 
   static defaults = gammaDefaultValues;
 
+  static uniformLocations = ['uGamma'];
+
   getFragmentSource() {
     return fragmentSource;
   }
 
-  constructor({ gamma = [1, 1, 1], ...options }: { gamma?: GammaInput } = {}) {
+  constructor(options: { gamma?: GammaInput } = {}) {
     super(options);
-    this.gamma = gamma;
+    this.gamma =
+      options.gamma ||
+      ((
+        this.constructor as typeof Gamma
+      ).defaults.gamma.concat() as GammaInput);
   }
 
   /**
@@ -80,21 +91,6 @@ export 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: WebGLRenderingContext,
-    program: WebGLProgram
-  ): TWebGLUniformLocationMap {
-    return {
-      uGamma: gl.getUniformLocation(program, 'uGamma'),
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
@@ -107,6 +103,18 @@ export class Gamma extends BaseFilter {
   ) {
     gl.uniform3fv(uniformLocations.uGamma, this.gamma);
   }
+
+  isNeutralState() {
+    const { gamma } = this;
+    return gamma[0] === 1 && gamma[1] === 1 && gamma[2] === 1;
+  }
+
+  toObject(): { type: typeof GAMMA; gamma: GammaInput } {
+    return {
+      type: GAMMA,
+      gamma: this.gamma.concat() as GammaInput,
+    };
+  }
 }
 
 classRegistry.setClass(Gamma);

package/src/filters/Grayscale.ts

@@ -1,4 +1,3 @@
-import type { TClassProperties } from '../typedefs';
 import { BaseFilter } from './BaseFilter';
 import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
 import { classRegistry } from '../ClassRegistry';
@@ -6,9 +5,12 @@ import { fragmentSource } from './shaders/grayscale';
 
 export type TGrayscaleMode = 'average' | 'lightness' | 'luminosity';
 
-export const grayscaleDefaultValues: Partial<TClassProperties<Grayscale>> = {
+type GrayscaleOwnProps = {
+  mode: TGrayscaleMode;
+};
+
+export const grayscaleDefaultValues: GrayscaleOwnProps = {
   mode: 'average',
-  mainParameter: 'mode',
 };
 
 /**
@@ -18,13 +20,15 @@ export const grayscaleDefaultValues: Partial<TClassProperties<Grayscale>> = {
  * object.filters.push(filter);
  * object.applyFilters();
  */
-export class Grayscale extends BaseFilter {
+export class Grayscale extends BaseFilter<'Grayscale', GrayscaleOwnProps> {
   declare mode: TGrayscaleMode;
 
   static type = 'Grayscale';
 
   static defaults = grayscaleDefaultValues;
 
+  static uniformLocations = ['uMode'];
+
   /**
    * Apply the Grayscale operation to a Uint8Array representing the pixels of an image.
    *
@@ -62,21 +66,6 @@ export class Grayscale extends BaseFilter {
     return fragmentSource[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: WebGLRenderingContext,
-    program: WebGLProgram
-  ): TWebGLUniformLocationMap {
-    return {
-      uMode: gl.getUniformLocation(program, 'uMode'),
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *

package/src/filters/HueRotation.ts

@@ -1,15 +1,16 @@
-import type { TClassProperties } from '../typedefs';
 import { cos } from '../util/misc/cos';
 import { sin } from '../util/misc/sin';
 import { ColorMatrix } from './ColorMatrix';
 import type { TWebGLPipelineState, T2DPipelineState } from './typedefs';
 import { classRegistry } from '../ClassRegistry';
 
-export const hueRotationDefaultValues: Partial<TClassProperties<HueRotation>> =
-  {
-    rotation: 0,
-    mainParameter: 'rotation',
-  };
+export type HueRotationOwnProps = {
+  rotation: number;
+};
+
+export const hueRotationDefaultValues: HueRotationOwnProps = {
+  rotation: 0,
+};
 
 /**
  * HueRotation filter class
@@ -20,12 +21,14 @@ export const hueRotationDefaultValues: Partial<TClassProperties<HueRotation>> =
  * object.filters.push(filter);
  * object.applyFilters();
  */
-// @ts-expect-error some babbling about mainParameter
-export class HueRotation extends ColorMatrix {
+export class HueRotation extends ColorMatrix<
+  'HueRotation',
+  HueRotationOwnProps
+> {
   /**
    * HueRotation value, from -1 to 1.
    */
-  declare rotation: number;
+  declare rotation: HueRotationOwnProps['rotation'];
 
   static type = 'HueRotation';
 
@@ -51,14 +54,21 @@ export class HueRotation extends ColorMatrix {
   }
 
   isNeutralState() {
-    this.calculateMatrix();
-    return super.isNeutralState();
+    return this.rotation === 0;
   }
 
   applyTo(options: TWebGLPipelineState | T2DPipelineState) {
     this.calculateMatrix();
     super.applyTo(options);
   }
+
+  //@ts-expect-error TS and classes with different methods
+  toObject(): { type: 'HueRotation'; rotation: number } {
+    return {
+      type: this.type,
+      rotation: this.rotation,
+    };
+  }
 }
 
 classRegistry.setClass(HueRotation);

package/src/filters/Invert.ts

@@ -1,13 +1,16 @@
-import type { TClassProperties } from '../typedefs';
 import { BaseFilter } from './BaseFilter';
 import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
 import { classRegistry } from '../ClassRegistry';
 import { fragmentSource } from './shaders/invert';
 
-export const invertDefaultValues: Partial<TClassProperties<Invert>> = {
+export type InvertOwnProps = {
+  alpha: boolean;
+  invert: boolean;
+};
+
+export const invertDefaultValues: InvertOwnProps = {
   alpha: false,
   invert: true,
-  mainParameter: 'invert',
 };
 
 /**
@@ -16,25 +19,27 @@ export const invertDefaultValues: Partial<TClassProperties<Invert>> = {
  * object.filters.push(filter);
  * object.applyFilters(canvas.renderAll.bind(canvas));
  */
-export class Invert extends BaseFilter {
+export class Invert extends BaseFilter<'Invert', InvertOwnProps> {
   /**
    * Invert also alpha.
    * @param {Boolean} alpha
    * @default
    **/
-  declare alpha: boolean;
+  declare alpha: InvertOwnProps['alpha'];
 
   /**
    * Filter invert. if false, does nothing
    * @param {Boolean} invert
    * @default
    */
-  declare invert: boolean;
+  declare invert: InvertOwnProps['invert'];
 
   static type = 'Invert';
 
   static defaults = invertDefaultValues;
 
+  static uniformLocations = ['uInvert', 'uAlpha'];
+
   /**
    * Apply the Invert operation to a Uint8Array representing the pixels of an image.
    *
@@ -67,22 +72,6 @@ export 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: WebGLRenderingContext,
-    program: WebGLProgram
-  ): TWebGLUniformLocationMap {
-    return {
-      uInvert: gl.getUniformLocation(program, 'uInvert'),
-      uAlpha: gl.getUniformLocation(program, 'uAlpha'),
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *

package/src/filters/Noise.ts

@@ -1,11 +1,13 @@
-import type { TClassProperties } from '../typedefs';
 import { BaseFilter } from './BaseFilter';
 import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
 import { classRegistry } from '../ClassRegistry';
 import { fragmentSource } from './shaders/noise';
 
-export const noiseDefaultValues: Partial<TClassProperties<Noise>> = {
-  mainParameter: 'noise',
+export type NoiseOwnProps = {
+  noise: number;
+};
+
+export const noiseDefaultValues: NoiseOwnProps = {
   noise: 0,
 };
 
@@ -19,18 +21,20 @@ export const noiseDefaultValues: Partial<TClassProperties<Noise>> = {
  * object.applyFilters();
  * canvas.renderAll();
  */
-export class Noise extends BaseFilter {
+export class Noise extends BaseFilter<'Noise', NoiseOwnProps> {
   /**
    * Noise value, from
    * @param {Number} noise
    * @default
    */
-  declare noise: number;
+  declare noise: NoiseOwnProps['noise'];
 
   static type = 'Noise';
 
   static defaults = noiseDefaultValues;
 
+  static uniformLocations = ['uNoise', 'uSeed'];
+
   getFragmentSource() {
     return fragmentSource;
   }
@@ -42,9 +46,6 @@ export class Noise extends BaseFilter {
    * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered.
    */
   applyTo2d({ imageData: { data } }: T2DPipelineState) {
-    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;
@@ -54,22 +55,6 @@ export 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: WebGLRenderingContext,
-    program: WebGLProgram
-  ): TWebGLUniformLocationMap {
-    return {
-      uNoise: gl.getUniformLocation(program, 'uNoise'),
-      uSeed: gl.getUniformLocation(program, 'uSeed'),
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
@@ -84,12 +69,8 @@ export class Noise extends BaseFilter {
     gl.uniform1f(uniformLocations.uSeed, Math.random());
   }
 
-  /**
-   * Returns object representation of an instance
-   * @return {Object} Object representation of an instance
-   */
-  toObject() {
-    return { ...super.toObject(), noise: this.noise };
+  isNeutralState() {
+    return this.noise === 0;
   }
 }
 

package/src/filters/Pixelate.ts

@@ -1,12 +1,14 @@
-import type { TClassProperties } from '../typedefs';
 import { BaseFilter } from './BaseFilter';
 import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
 import { classRegistry } from '../ClassRegistry';
 import { fragmentSource } from './shaders/pixelate';
 
-export const pixelateDefaultValues: Partial<TClassProperties<Pixelate>> = {
+export type PixelateOwnProps = {
+  blocksize: number;
+};
+
+export const pixelateDefaultValues: PixelateOwnProps = {
   blocksize: 4,
-  mainParameter: 'blocksize',
 };
 
 /**
@@ -18,13 +20,15 @@ export const pixelateDefaultValues: Partial<TClassProperties<Pixelate>> = {
  * object.filters.push(filter);
  * object.applyFilters();
  */
-export class Pixelate extends BaseFilter {
-  declare blocksize: number;
+export class Pixelate extends BaseFilter<'Pixelate', PixelateOwnProps> {
+  declare blocksize: PixelateOwnProps['blocksize'];
 
   static type = 'Pixelate';
 
   static defaults = pixelateDefaultValues;
 
+  static uniformLocations = ['uBlockSize'];
+
   /**
    * Apply the Pixelate operation to a Uint8ClampedArray representing the pixels of an image.
    *
@@ -64,23 +68,6 @@ export class Pixelate extends BaseFilter {
     return fragmentSource;
   }
 
-  /**
-   * 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: WebGLRenderingContext,
-    program: WebGLProgram
-  ): TWebGLUniformLocationMap {
-    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.
    *