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

package/src/filters/BlendColor.ts

@@ -1,5 +1,4 @@
 import { Color } from '../color/Color';
-import type { TClassProperties } from '../typedefs';
 import { BaseFilter } from './BaseFilter';
 import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
 import { classRegistry } from '../ClassRegistry';
@@ -17,7 +16,13 @@ export type TBlendMode =
   | 'exclusion'
   | 'tint';
 
-export const blendColorDefaultValues: Partial<TClassProperties<BlendColor>> = {
+type BlendColorOwnProps = {
+  color: string;
+  mode: TBlendMode;
+  alpha: number;
+};
+
+export const blendColorDefaultValues: BlendColorOwnProps = {
   color: '#F95C63',
   mode: 'multiply',
   alpha: 1,
@@ -39,14 +44,14 @@ export const blendColorDefaultValues: Partial<TClassProperties<BlendColor>> = {
  * object.applyFilters();
  * canvas.renderAll();
  */
-export class BlendColor extends BaseFilter {
+export class BlendColor extends BaseFilter<'BlendColor', BlendColorOwnProps> {
   /**
    * Color to make the blend operation with. default to a reddish color since black or white
    * gives always strong result.
    * @type String
    * @default
    **/
-  declare color: string;
+  declare color: BlendColorOwnProps['color'];
 
   /**
    * Blend mode for the filter: one of multiply, add, difference, screen, subtract,
@@ -54,19 +59,20 @@ export class BlendColor extends BaseFilter {
    * @type String
    * @default
    **/
-  declare mode: TBlendMode;
-
+  declare mode: BlendColorOwnProps['mode'];
   /**
    * alpha value. represent the strength of the blend color operation.
    * @type Number
    * @default
    **/
-  declare alpha: number;
+  declare alpha: BlendColorOwnProps['alpha'];
 
   static defaults = blendColorDefaultValues;
 
   static type = 'BlendColor';
 
+  static uniformLocations = ['uColor'];
+
   getCacheKey() {
     return `${this.type}_${this.mode}`;
   }
@@ -168,21 +174,6 @@ export 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: WebGLRenderingContext,
-    program: WebGLProgram
-  ): TWebGLUniformLocationMap {
-    return {
-      uColor: gl.getUniformLocation(program, 'uColor'),
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
@@ -200,19 +191,6 @@ export 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,
-    };
-  }
 }
 
 classRegistry.setClass(BlendColor);

package/src/filters/BlendImage.ts

@@ -1,5 +1,4 @@
 import { FabricImage } from '../shapes/Image';
-import type { TClassProperties } from '../typedefs';
 import { createCanvasElement } from '../util/misc/dom';
 import { BaseFilter } from './BaseFilter';
 import type {
@@ -9,24 +8,18 @@ import type {
 } from './typedefs';
 import type { WebGLFilterBackend } from './WebGLFilterBackend';
 import { classRegistry } from '../ClassRegistry';
-import { fragmentSource } from './shaders/blendImage';
+import { fragmentSource, vertexSource } from './shaders/blendImage';
 
 export type TBlendImageMode = 'multiply' | 'mask';
 
-export const blendImageDefaultValues: Partial<TClassProperties<BlendImage>> = {
+type BlendImageOwnProps = {
+  mode: TBlendImageMode;
+  alpha: number;
+};
+
+export const blendImageDefaultValues: BlendImageOwnProps = {
   mode: 'multiply',
   alpha: 1,
-  vertexSource: `
-    attribute vec2 aPosition;
-    varying vec2 vTexCoord;
-    varying vec2 vTexCoord2;
-    uniform mat3 uTransformMatrix;
-    void main() {
-      vTexCoord = aPosition;
-      vTexCoord2 = (uTransformMatrix * vec3(aPosition, 1.0)).xy;
-      gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);
-    }
-    `,
 };
 
 /**
@@ -45,7 +38,7 @@ export const blendImageDefaultValues: Partial<TClassProperties<BlendImage>> = {
  * object.applyFilters();
  * canvas.renderAll();
  */
-export class BlendImage extends BaseFilter {
+export class BlendImage extends BaseFilter<'BlendImage', BlendImageOwnProps> {
   /**
    * Image to make the blend operation with.
    **/
@@ -60,18 +53,20 @@ export class BlendImage extends BaseFilter {
    * @type String
    * @default
    **/
-  declare mode: TBlendImageMode;
+  declare mode: BlendImageOwnProps['mode'];
 
   /**
    * alpha value. represent the strength of the blend image operation.
    * not implemented.
    **/
-  declare alpha: number;
+  declare alpha: BlendImageOwnProps['alpha'];
 
   static type = 'BlendImage';
 
   static defaults = blendImageDefaultValues;
 
+  static uniformLocations = ['uTransformMatrix', 'uImage'];
+
   getCacheKey() {
     return `${this.type}_${this.mode}`;
   }
@@ -80,6 +75,10 @@ export class BlendImage extends BaseFilter {
     return fragmentSource[this.mode];
   }
 
+  getVertexSource(): string {
+    return vertexSource;
+  }
+
   applyToWebGL(options: TWebGLPipelineState) {
     const gl = options.context,
       texture = this.createTexture(options.filterBackend, this.image);
@@ -171,22 +170,6 @@ export 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: WebGLRenderingContext,
-    program: WebGLProgram
-  ): TWebGLUniformLocationMap {
-    return {
-      uTransformMatrix: gl.getUniformLocation(program, 'uTransformMatrix'),
-      uImage: gl.getUniformLocation(program, 'uImage'),
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
@@ -204,14 +187,17 @@ export 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() {
+  toObject(): {
+    type: 'BlendImage';
+    image: ReturnType<FabricImage['toObject']>;
+  } & BlendImageOwnProps {
     return {
-      type: this.type,
+      ...super.toObject(),
       image: this.image && this.image.toObject(),
-      mode: this.mode,
-      alpha: this.alpha,
     };
   }
 
@@ -223,13 +209,13 @@ export 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(
+  static async fromObject(
     { type, image, ...filterOptions }: Record<string, any>,
     options: { signal: AbortSignal }
-  ) {
+  ): Promise<BaseFilter<'BlendImage', BlendImageOwnProps>> {
     return FabricImage.fromObject(image, options).then(
       (enlivedImage) =>
-        new this({ ...filterOptions, image: enlivedImage }) as BaseFilter
+        new this({ ...filterOptions, image: enlivedImage }) as BlendImage
     );
   }
 }

package/src/filters/Blur.ts

@@ -1,4 +1,3 @@
-import type { TClassProperties } from '../typedefs';
 import { createCanvasElement } from '../util/misc/dom';
 import { BaseFilter } from './BaseFilter';
 import type {
@@ -10,9 +9,12 @@ import { isWebGLPipelineState } from './utils';
 import { classRegistry } from '../ClassRegistry';
 import { fragmentSource } from './shaders/blur';
 
-export const blurDefaultValues: Partial<TClassProperties<Blur>> = {
+type BlurOwnProps = {
+  blur: number;
+};
+
+export const blurDefaultValues: BlurOwnProps = {
   blur: 0,
-  mainParameter: 'blur',
 };
 
 /**
@@ -25,7 +27,7 @@ export const blurDefaultValues: Partial<TClassProperties<Blur>> = {
  * object.applyFilters();
  * canvas.renderAll();
  */
-export class Blur extends BaseFilter {
+export class Blur extends BaseFilter<'Blur', BlurOwnProps> {
   /**
    * blur value, in percentage of image dimensions.
    * specific to keep the image blur constant at different resolutions
@@ -33,7 +35,7 @@ export class Blur extends BaseFilter {
    * @type Number
    * @default
    */
-  declare blur: number;
+  declare blur: BlurOwnProps['blur'];
 
   declare horizontal: boolean;
   declare aspectRatio: number;
@@ -42,6 +44,8 @@ export class Blur extends BaseFilter {
 
   static defaults = blurDefaultValues;
 
+  static uniformLocations = ['uDelta'];
+
   getFragmentSource(): string {
     return fragmentSource;
   }
@@ -121,21 +125,6 @@ export 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: WebGLRenderingContext,
-    program: WebGLProgram
-  ): TWebGLUniformLocationMap {
-    return {
-      delta: gl.getUniformLocation(program, 'uDelta'),
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
@@ -150,6 +139,10 @@ export class Blur extends BaseFilter {
     gl.uniform2fv(uniformLocations.delta, delta);
   }
 
+  isNeutralState() {
+    return this.blur === 0;
+  }
+
   /**
    * choose right value of image percentage to blur with
    * @returns {Array} a numeric array with delta values

package/src/filters/Boilerplate.ts

@@ -1,10 +1,12 @@
-import type { TClassProperties } from '../typedefs';
 import { BaseFilter } from './BaseFilter';
 import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
 
-export const myFilterDefaultValues: Partial<TClassProperties<MyFilter>> = {
+type MyFilterOwnProps = {
+  myParameter: number;
+};
+
+export const myFilterDefaultValues: MyFilterOwnProps = {
   myParameter: 0,
-  mainParameter: 'myParameter',
 };
 
 /**
@@ -16,7 +18,7 @@ export const myFilterDefaultValues: Partial<TClassProperties<MyFilter>> = {
  * object.filters.push(filter);
  * object.applyFilters();
  */
-export class MyFilter extends BaseFilter {
+export class MyFilter extends BaseFilter<'MyFilter', MyFilterOwnProps> {
   /**
    * MyFilter value, from -1 to 1.
    * translated to -255 to 255 for 2d
@@ -24,10 +26,14 @@ export class MyFilter extends BaseFilter {
    * @param {Number} myParameter
    * @default
    */
-  declare myParameter: number;
+  declare myParameter: MyFilterOwnProps['myParameter'];
+
+  static type = 'MyFilter';
 
   static defaults = myFilterDefaultValues;
 
+  static uniformLocations = ['uMyParameter'];
+
   getFragmentSource() {
     return `
       precision highp float;
@@ -58,21 +64,6 @@ export class MyFilter 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 {
-      uMyParameter: gl.getUniformLocation(program, 'uMyParameter'),
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
@@ -86,9 +77,9 @@ export class MyFilter extends BaseFilter {
     gl.uniform1f(uniformLocations.uMyParameter, this.myParameter);
   }
 
-  static async fromObject(object: any) {
+  static async fromObject(object: any): Promise<MyFilter> {
     // or overide with custom logic if your filter needs to
     // deserialize something that is not a plain value
-    return new this(object) as BaseFilter;
+    return new this(object);
   }
 }

package/src/filters/Brightness.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/brightness';
-export const brightnessDefaultValues: Partial<TClassProperties<Brightness>> = {
+
+type BrightnessOwnProps = {
+  brightness: number;
+};
+
+export const brightnessDefaultValues: BrightnessOwnProps = {
   brightness: 0,
-  mainParameter: 'brightness',
 };
 
 /**
@@ -17,7 +20,7 @@ export const brightnessDefaultValues: Partial<TClassProperties<Brightness>> = {
  * object.filters.push(filter);
  * object.applyFilters();
  */
-export class Brightness extends BaseFilter {
+export class Brightness extends BaseFilter<'Brightness', BrightnessOwnProps> {
   /**
    * Brightness value, from -1 to 1.
    * translated to -255 to 255 for 2d
@@ -25,12 +28,14 @@ export class Brightness extends BaseFilter {
    * @param {Number} brightness
    * @default
    */
-  declare brightness: number;
+  declare brightness: BrightnessOwnProps['brightness'];
 
   static type = 'Brightness';
 
   static defaults = brightnessDefaultValues;
 
+  static uniformLocations = ['uBrightness'];
+
   getFragmentSource() {
     return fragmentSource;
   }
@@ -42,9 +47,6 @@ export class Brightness extends BaseFilter {
    * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered.
    */
   applyTo2d({ imageData: { data } }: T2DPipelineState) {
-    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;
@@ -53,19 +55,8 @@ export class Brightness 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 {
-      uBrightness: gl.getUniformLocation(program, 'uBrightness'),
-    };
+  isNeutralState() {
+    return this.brightness === 0;
   }
 
   /**

package/src/filters/Canvas2dFilterBackend.ts

@@ -25,7 +25,7 @@ export class Canvas2dFilterBackend {
    * @param {HTMLCanvasElement} targetCanvas The destination for filtered output to be drawn.
    */
   applyFilters(
-    filters: BaseFilter[],
+    filters: BaseFilter<string, Record<string, any>>[],
     sourceElement: CanvasImageSource,
     sourceWidth: number,
     sourceHeight: number,

package/src/filters/ColorMatrix.ts

@@ -1,14 +1,21 @@
-import type { TClassProperties } from '../typedefs';
 import { BaseFilter } from './BaseFilter';
-import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import type {
+  T2DPipelineState,
+  TMatColorMatrix,
+  TWebGLUniformLocationMap,
+} from './typedefs';
 import { classRegistry } from '../ClassRegistry';
 import { fragmentSource } from './shaders/colorMatrix';
-export const colorMatrixDefaultValues: Partial<TClassProperties<ColorMatrix>> =
-  {
-    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,
-  };
+
+type ColorMatrixOwnProps = {
+  matrix: TMatColorMatrix;
+  colorsOnly: boolean;
+};
+
+export const colorMatrixDefaultValues: ColorMatrixOwnProps = {
+  matrix: [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0],
+  colorsOnly: true,
+};
 
 /**
    * Color Matrix filter class
@@ -26,7 +33,10 @@ export const colorMatrixDefaultValues: Partial<TClassProperties<ColorMatrix>> =
    * object.filters.push(filter);
    * object.applyFilters();
    */
-export class ColorMatrix extends BaseFilter {
+export class ColorMatrix<
+  Name extends string = 'ColorMatrix',
+  OwnProps extends object = ColorMatrixOwnProps
+> extends BaseFilter<Name, OwnProps> {
   /**
    * Colormatrix for pixels.
    * array of 20 floats. Numbers in positions 4, 9, 14, 19 loose meaning
@@ -35,7 +45,7 @@ export class ColorMatrix extends BaseFilter {
    * @param {Array} matrix array of 20 numbers.
    * @default
    */
-  declare matrix: number[];
+  declare matrix: ColorMatrixOwnProps['matrix'];
 
   /**
    * Lock the colormatrix on the color part, skipping alpha, mainly for non webgl scenario
@@ -43,19 +53,13 @@ export class ColorMatrix extends BaseFilter {
    * @type Boolean
    * @default true
    */
-  declare colorsOnly: boolean;
+  declare colorsOnly: ColorMatrixOwnProps['colorsOnly'];
 
   static type = 'ColorMatrix';
 
   static defaults = colorMatrixDefaultValues;
 
-  setOptions({ matrix, ...options }: Record<string, any>) {
-    if (matrix) {
-      // safeguard against mutation
-      this.matrix = [...matrix];
-    }
-    Object.assign(this, options);
-  }
+  static uniformLocations = ['uColorMatrix', 'uConstants'];
 
   getFragmentSource(): string {
     return fragmentSource;
@@ -93,22 +97,6 @@ export 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: WebGLRenderingContext,
-    program: WebGLProgram
-  ): TWebGLUniformLocationMap {
-    return {
-      uColorMatrix: gl.getUniformLocation(program, 'uColorMatrix'),
-      uConstants: gl.getUniformLocation(program, 'uConstants'),
-    };
-  }
-
   /**
    * Send data from this filter to its shader program's uniforms.
    *
@@ -142,6 +130,13 @@ export class ColorMatrix extends BaseFilter {
     gl.uniformMatrix4fv(uniformLocations.uColorMatrix, false, matrix);
     gl.uniform4fv(uniformLocations.uConstants, constants);
   }
+
+  toObject() {
+    return {
+      ...super.toObject(),
+      matrix: [...this.matrix] as TMatColorMatrix,
+    };
+  }
 }
 
 classRegistry.setClass(ColorMatrix);

package/src/filters/ColorMatrixFilters.ts

@@ -1,21 +1,27 @@
-import { ColorMatrix, colorMatrixDefaultValues } from './ColorMatrix';
+import { ColorMatrix } from './ColorMatrix';
 import { classRegistry } from '../ClassRegistry';
+import type { TMatColorMatrix } from './typedefs';
 
-export function createColorMatrixFilter(key: string, matrix: number[]) {
-  const newClass = class extends ColorMatrix {
+type FixedFiltersOwnProps = {
+  colorsOnly: boolean;
+};
+
+export function createColorMatrixFilter(key: string, matrix: TMatColorMatrix) {
+  const newClass = class extends ColorMatrix<typeof key, FixedFiltersOwnProps> {
     static type = key;
 
     static defaults = {
-      ...colorMatrixDefaultValues,
-      /**
-       * Lock the matrix export for this kind of static, parameter less filters.
-       */
-      mainParameter: undefined,
+      colorsOnly: false,
       matrix,
     };
+
+    //@ts-expect-error TS wants matrix to be exported.
+    toObject(): { type: string } & FixedFiltersOwnProps {
+      return { type: this.type, colorsOnly: this.colorsOnly };
+    }
   };
   classRegistry.setClass(newClass, key);
-  return newClass;
+  return newClass as typeof ColorMatrix<typeof key, FixedFiltersOwnProps>;
 }
 
 export const Brownie = createColorMatrixFilter(