fabric 5.3.0 → 6.0.0-beta1

package/src/filters/Boilerplate.ts

@@ -0,0 +1,91 @@
+import { TClassProperties } from '../typedefs';
+import { BaseFilter } from './BaseFilter';
+import { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+
+/**
+ * MyFilter filter class
+ * @example
+ * const filter = new MyFilter({
+ *   add here an example of how to use your filter
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ */
+export class MyFilter extends BaseFilter {
+  /**
+   * MyFilter value, from -1 to 1.
+   * translated to -255 to 255 for 2d
+   * 0.0039215686 is the part of 1 that get translated to 1 in 2d
+   * @param {Number} myParameter
+   * @default
+   */
+  declare myParameter: number;
+
+  /**
+   * Apply the MyFilter operation to a Uint8ClampedArray representing the pixels of an image.
+   *
+   * @param {Object} options
+   * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered.
+   */
+  applyTo2d(options: T2DPipelineState) {
+    if (this.myParameter === 0) {
+      // early return if the parameter value has a neutral value
+      return;
+    }
+
+    for (let i = 0; i < options.imageData.data.length; i += 4) {
+      // insert here your code to modify data[i]
+    }
+  }
+
+  /**
+   * 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.
+   *
+   * @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
+   */
+  sendUniformData(
+    gl: WebGLRenderingContext,
+    uniformLocations: TWebGLUniformLocationMap
+  ) {
+    gl.uniform1f(uniformLocations.uMyParameter, this.myParameter);
+  }
+
+  static async fromObject(object: any) {
+    return new MyFilter(object);
+  }
+}
+
+export const myFilterDefaultValues: Partial<TClassProperties<MyFilter>> = {
+  type: 'MyFilter',
+  fragmentSource: `
+    precision highp float;
+    uniform sampler2D uTexture;
+    uniform float uMyParameter;
+    varying vec2 vTexCoord;
+    void main() {
+      vec4 color = texture2D(uTexture, vTexCoord);
+      // add your gl code here
+      gl_FragColor = color;
+    }
+  `,
+  myParameter: 0,
+  mainParameter: 'myParameter',
+};
+
+Object.assign(MyFilter.prototype, myFilterDefaultValues);

package/src/filters/Brightness.ts

@@ -0,0 +1,93 @@
+import type { TClassProperties } from '../typedefs';
+import { BaseFilter } from './BaseFilter';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
+/**
+ * Brightness filter class
+ * @example
+ * const filter = new Brightness({
+ *   brightness: 0.05
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ */
+export class Brightness extends BaseFilter {
+  /**
+   * Brightness value, from -1 to 1.
+   * translated to -255 to 255 for 2d
+   * 0.0039215686 is the part of 1 that get translated to 1 in 2d
+   * @param {Number} brightness
+   * @default
+   */
+  declare brightness: number;
+
+  /**
+   * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image.
+   *
+   * @param {Object} options
+   * @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;
+      data[i + 1] = data[i + 1] + brightness;
+      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: WebGLRenderingContext,
+    program: WebGLProgram
+  ): TWebGLUniformLocationMap {
+    return {
+      uBrightness: gl.getUniformLocation(program, 'uBrightness'),
+    };
+  }
+
+  /**
+   * 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
+   */
+  sendUniformData(
+    gl: WebGLRenderingContext,
+    uniformLocations: TWebGLUniformLocationMap
+  ) {
+    gl.uniform1f(uniformLocations.uBrightness, this.brightness);
+  }
+
+  static async fromObject(object: any) {
+    return new Brightness(object);
+  }
+}
+
+export const brightnessDefaultValues: Partial<TClassProperties<Brightness>> = {
+  type: 'Brightness',
+  fragmentSource: `
+    precision highp float;
+    uniform sampler2D uTexture;
+    uniform float uBrightness;
+    varying vec2 vTexCoord;
+    void main() {
+      vec4 color = texture2D(uTexture, vTexCoord);
+      color.rgb += uBrightness;
+      gl_FragColor = color;
+    }
+  `,
+  brightness: 0,
+  mainParameter: 'brightness',
+};
+
+Object.assign(Brightness.prototype, brightnessDefaultValues);
+classRegistry.setClass(Brightness);

package/src/filters/Canvas2dFilterBackend.ts

@@ -0,0 +1,65 @@
+/**
+ * Canvas 2D filter backend.
+ */
+import type { BaseFilter } from './BaseFilter';
+import { T2DPipelineState, TPipelineResources } from './typedefs';
+
+export class Canvas2dFilterBackend {
+  /**
+   * Experimental. This object is a sort of repository of help layers used to avoid
+   * of recreating them during frequent filtering. If you are previewing a filter with
+   * a slider you probably do not want to create help layers every filter step.
+   * in this object there will be appended some canvases, created once, resized sometimes
+   * cleared never. Clearing is left to the developer.
+   **/
+  resources: TPipelineResources = {};
+
+  /**
+   * Apply a set of filters against a source image and draw the filtered output
+   * to the provided destination canvas.
+   *
+   * @param {EnhancedFilter} filters The filter to apply.
+   * @param {HTMLImageElement|HTMLCanvasElement} sourceElement The source to be filtered.
+   * @param {Number} sourceWidth The width of the source input.
+   * @param {Number} sourceHeight The height of the source input.
+   * @param {HTMLCanvasElement} targetCanvas The destination for filtered output to be drawn.
+   */
+  applyFilters(
+    filters: BaseFilter[],
+    sourceElement: CanvasImageSource,
+    sourceWidth: number,
+    sourceHeight: number,
+    targetCanvas: HTMLCanvasElement
+  ): T2DPipelineState | void {
+    const ctx = targetCanvas.getContext('2d');
+    if (!ctx) {
+      return;
+    }
+    ctx.drawImage(sourceElement, 0, 0, sourceWidth, sourceHeight);
+    const imageData = ctx.getImageData(0, 0, sourceWidth, sourceHeight);
+    const originalImageData = ctx.getImageData(0, 0, sourceWidth, sourceHeight);
+    const pipelineState: T2DPipelineState = {
+      sourceWidth,
+      sourceHeight,
+      imageData,
+      originalEl: sourceElement,
+      originalImageData,
+      canvasEl: targetCanvas,
+      ctx,
+      filterBackend: this,
+    };
+    filters.forEach((filter) => {
+      filter.applyTo(pipelineState);
+    });
+    const { imageData: imageDataPostFilter } = pipelineState;
+    if (
+      imageDataPostFilter.width !== sourceWidth ||
+      imageDataPostFilter.height !== sourceHeight
+    ) {
+      targetCanvas.width = imageDataPostFilter.width;
+      targetCanvas.height = imageDataPostFilter.height;
+    }
+    ctx.putImageData(imageDataPostFilter, 0, 0);
+    return pipelineState;
+  }
+}

package/src/filters/ColorMatrix.ts

@@ -0,0 +1,156 @@
+import type { TClassProperties } from '../typedefs';
+import { BaseFilter } from './BaseFilter';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
+/**
+   * Color Matrix filter class
+   * @see {@link http://fabricjs.com/image-filters|ImageFilters demo}
+   * @see {@Link http://phoboslab.org/log/2013/11/fast-image-filters-with-webgl demo}
+   * @example <caption>Kodachrome filter</caption>
+   * const filter = new ColorMatrix({
+   *  matrix: [
+       1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502,
+       -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203,
+       -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946,
+       0, 0, 0, 1, 0
+      ]
+   * });
+   * object.filters.push(filter);
+   * object.applyFilters();
+   */
+export class ColorMatrix extends BaseFilter {
+  /**
+   * Colormatrix for pixels.
+   * array of 20 floats. Numbers in positions 4, 9, 14, 19 loose meaning
+   * outside the -1, 1 range.
+   * 0.0039215686 is the part of 1 that get translated to 1 in 2d
+   * @param {Array} matrix array of 20 numbers.
+   * @default
+   */
+  declare matrix: number[];
+
+  /**
+   * Lock the colormatrix on the color part, skipping alpha, mainly for non webgl scenario
+   * to save some calculation
+   * @type Boolean
+   * @default true
+   */
+  declare colorsOnly: boolean;
+
+  setOptions({ matrix, ...options }: Record<string, any>) {
+    if (matrix) {
+      // safeguard against mutation
+      this.matrix = [...matrix];
+    }
+    Object.assign(this, options);
+  }
+
+  /**
+   * Apply the ColorMatrix operation to a Uint8Array representing the pixels of an image.
+   *
+   * @param {Object} options
+   * @param {ImageData} options.imageData The Uint8Array to be filtered.
+   */
+  applyTo2d(options: T2DPipelineState) {
+    const imageData = options.imageData,
+      data = imageData.data,
+      m = this.matrix,
+      colorsOnly = this.colorsOnly;
+
+    for (let i = 0; i < data.length; i += 4) {
+      const r = data[i];
+      const g = data[i + 1];
+      const b = data[i + 2];
+      if (colorsOnly) {
+        data[i] = r * m[0] + g * m[1] + b * m[2] + m[4] * 255;
+        data[i + 1] = r * m[5] + g * m[6] + b * m[7] + m[9] * 255;
+        data[i + 2] = r * m[10] + g * m[11] + b * m[12] + m[14] * 255;
+      } else {
+        const a = data[i + 3];
+        data[i] = r * m[0] + g * m[1] + b * m[2] + a * m[3] + m[4] * 255;
+        data[i + 1] = r * m[5] + g * m[6] + b * m[7] + a * m[8] + m[9] * 255;
+        data[i + 2] =
+          r * m[10] + g * m[11] + b * m[12] + a * m[13] + m[14] * 255;
+        data[i + 3] =
+          r * m[15] + g * m[16] + b * m[17] + a * m[18] + m[19] * 255;
+      }
+    }
+  }
+
+  /**
+   * 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.
+   *
+   * @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
+   */
+  sendUniformData(
+    gl: WebGLRenderingContext,
+    uniformLocations: TWebGLUniformLocationMap
+  ) {
+    const m = this.matrix,
+      matrix = [
+        m[0],
+        m[1],
+        m[2],
+        m[3],
+        m[5],
+        m[6],
+        m[7],
+        m[8],
+        m[10],
+        m[11],
+        m[12],
+        m[13],
+        m[15],
+        m[16],
+        m[17],
+        m[18],
+      ],
+      constants = [m[4], m[9], m[14], m[19]];
+    gl.uniformMatrix4fv(uniformLocations.uColorMatrix, false, matrix);
+    gl.uniform4fv(uniformLocations.uConstants, constants);
+  }
+
+  static async fromObject(object: any) {
+    return new ColorMatrix(object);
+  }
+}
+
+export const colorMatrixDefaultValues: Partial<TClassProperties<ColorMatrix>> =
+  {
+    type: 'ColorMatrix',
+    fragmentSource: `
+      precision highp float;
+      uniform sampler2D uTexture;
+      varying vec2 vTexCoord;
+      uniform mat4 uColorMatrix;
+      uniform vec4 uConstants;
+      void main() {
+        vec4 color = texture2D(uTexture, vTexCoord);
+        color *= uColorMatrix;
+        color += uConstants;
+        gl_FragColor = color;
+      }`,
+    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,
+  };
+
+Object.assign(ColorMatrix.prototype, colorMatrixDefaultValues);
+classRegistry.setClass(ColorMatrix);

package/src/filters/ColorMatrixFilters.ts

@@ -0,0 +1,106 @@
+import { ColorMatrix } from './ColorMatrix';
+import { classRegistry } from '../util/class_registry';
+
+export function createColorMatrixFilter(key: string, matrix: number[]) {
+  return class GeneratedColorMatrix extends ColorMatrix {
+    /**
+     * Filter type
+     * @param {String} type
+     * @default
+     */
+    type = key;
+
+    /**
+     * Colormatrix for the effect
+     * array of 20 floats. Numbers in positions 4, 9, 14, 19 loose meaning
+     * outside the -1, 1 range.
+     * @param {Array} matrix array of 20 numbers.
+     * @default
+     */
+    matrix = matrix;
+
+    /**
+     * Lock the matrix export for this kind of static, parameter less filters.
+     */
+    mainParameter = undefined;
+
+    /**
+     * Lock the colormatrix on the color part, skipping alpha
+     */
+    colorsOnly = true;
+
+    static async fromObject(object: any) {
+      return new GeneratedColorMatrix(object);
+    }
+  };
+}
+
+export const Brownie = createColorMatrixFilter(
+  'Brownie',
+  [
+    0.5997, 0.34553, -0.27082, 0, 0.186, -0.0377, 0.86095, 0.15059, 0, -0.1449,
+    0.24113, -0.07441, 0.44972, 0, -0.02965, 0, 0, 0, 1, 0,
+  ]
+);
+
+classRegistry.setClass(Brownie);
+
+export const Vintage = createColorMatrixFilter(
+  'Vintage',
+  [
+    0.62793, 0.32021, -0.03965, 0, 0.03784, 0.02578, 0.64411, 0.03259, 0,
+    0.02926, 0.0466, -0.08512, 0.52416, 0, 0.02023, 0, 0, 0, 1, 0,
+  ]
+);
+
+classRegistry.setClass(Vintage);
+
+export const Kodachrome = createColorMatrixFilter(
+  'Kodachrome',
+  [
+    1.12855, -0.39673, -0.03992, 0, 0.24991, -0.16404, 1.08352, -0.05498, 0,
+    0.09698, -0.16786, -0.56034, 1.60148, 0, 0.13972, 0, 0, 0, 1, 0,
+  ]
+);
+
+classRegistry.setClass(Kodachrome);
+
+export const Technicolor = createColorMatrixFilter(
+  'Technicolor',
+  [
+    1.91252, -0.85453, -0.09155, 0, 0.04624, -0.30878, 1.76589, -0.10601, 0,
+    -0.27589, -0.2311, -0.75018, 1.84759, 0, 0.12137, 0, 0, 0, 1, 0,
+  ]
+);
+
+classRegistry.setClass(Technicolor);
+
+export const Polaroid = createColorMatrixFilter(
+  'Polaroid',
+  [
+    1.438, -0.062, -0.062, 0, 0, -0.122, 1.378, -0.122, 0, 0, -0.016, -0.016,
+    1.483, 0, 0, 0, 0, 0, 1, 0,
+  ]
+);
+
+classRegistry.setClass(Polaroid);
+
+export 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,
+  ]
+);
+
+classRegistry.setClass(Sepia);
+
+export 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,
+  ]
+);
+
+classRegistry.setClass(BlackWhite);

package/src/filters/Composed.ts

@@ -0,0 +1,85 @@
+import type { TClassProperties } from '../typedefs';
+import {
+  type AnyFilter,
+  BaseFilter,
+  type BaseFilterOptions,
+} from './BaseFilter';
+import type { T2DPipelineState, TWebGLPipelineState } from './typedefs';
+import { isWebGLPipelineState } from './typedefs';
+import { classRegistry } from '../util/class_registry';
+
+/**
+ * A container class that knows how to apply a sequence of filters to an input image.
+ */
+// @ts-expect-error
+export class Composed extends BaseFilter {
+  /**
+   * A non sparse array of filters to apply
+   */
+  declare subFilters: AnyFilter[];
+
+  constructor({
+    subFilters = [],
+    ...options
+  }: Partial<BaseFilterOptions & { subFilters: AnyFilter[] }> = {}) {
+    super(options);
+    this.subFilters = subFilters;
+  }
+
+  /**
+   * Apply this container's filters to the input image provided.
+   *
+   * @param {Object} options
+   * @param {Number} options.passes The number of filters remaining to be applied.
+   */
+  applyTo(options: TWebGLPipelineState | T2DPipelineState) {
+    if (isWebGLPipelineState(options)) {
+      options.passes += this.subFilters.length - 1;
+    }
+    this.subFilters.forEach((filter) => {
+      filter.applyTo(options);
+    });
+  }
+
+  /**
+   * Serialize this filter into JSON.
+   *
+   * @returns {Object} A JSON representation of this filter.
+   */
+  toObject() {
+    return {
+      ...super.toObject(),
+      subFilters: this.subFilters.map((filter) => filter.toObject()),
+    };
+  }
+
+  isNeutralState() {
+    return !this.subFilters.some((filter) => !filter.isNeutralState());
+  }
+
+  /**
+   * Deserialize a JSON definition of a ComposedFilter into a concrete instance.
+   * @static
+   * @param {oject} object Object to create an instance from
+   * @param {object} [options]
+   * @param {AbortSignal} [options.signal] handle aborting `BlendImage` filter loading, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
+   * @returns {Promise<Composed>}
+   */
+  static fromObject(
+    object: Record<string, any>,
+    options: { signal: AbortSignal }
+  ) {
+    return Promise.all(
+      ((object.subFilters || []) as AnyFilter[]).map((filter) =>
+        classRegistry.getClass(filter.type).fromObject(filter, options)
+      )
+    ).then((enlivedFilters) => new Composed({ subFilters: enlivedFilters }));
+  }
+}
+
+export const composedDefaultValues: Partial<TClassProperties<Composed>> = {
+  type: 'Composed',
+};
+
+Object.assign(Composed.prototype, composedDefaultValues);
+classRegistry.setClass(Composed);

package/src/filters/Contrast.ts

@@ -0,0 +1,94 @@
+import type { TClassProperties } from '../typedefs';
+import { BaseFilter } from './BaseFilter';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
+
+/**
+ * Contrast filter class
+ * @example
+ * const filter = new Contrast({
+ *   contrast: 0.25
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ */
+export class Contrast extends BaseFilter {
+  /**
+   * contrast value, range from -1 to 1.
+   * @param {Number} contrast
+   * @default 0
+   */
+  declare contrast: number;
+
+  /**
+   * Apply the Contrast operation to a Uint8Array representing the pixels of an image.
+   *
+   * @param {Object} options
+   * @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));
+
+    for (let i = 0; i < data.length; i += 4) {
+      data[i] = contrastF * (data[i] - 128) + 128;
+      data[i + 1] = contrastF * (data[i + 1] - 128) + 128;
+      data[i + 2] = contrastF * (data[i + 2] - 128) + 128;
+    }
+  }
+
+  /**
+   * 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.
+   *
+   * @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
+   */
+  sendUniformData(
+    gl: WebGLRenderingContext,
+    uniformLocations: TWebGLUniformLocationMap
+  ) {
+    gl.uniform1f(uniformLocations.uContrast, this.contrast);
+  }
+
+  static async fromObject(object: any) {
+    return new Contrast(object);
+  }
+}
+
+export const contrastDefaultValues: Partial<TClassProperties<Contrast>> = {
+  type: 'Contrast',
+  fragmentSource: `
+    precision highp float;
+    uniform sampler2D uTexture;
+    uniform float uContrast;
+    varying vec2 vTexCoord;
+    void main() {
+      vec4 color = texture2D(uTexture, vTexCoord);
+      float contrastF = 1.015 * (uContrast + 1.0) / (1.0 * (1.015 - uContrast));
+      color.rgb = contrastF * (color.rgb - 0.5) + 0.5;
+      gl_FragColor = color;
+    }`,
+  contrast: 0,
+  mainParameter: 'contrast',
+};
+
+Object.assign(Contrast.prototype, contrastDefaultValues);
+classRegistry.setClass(Contrast);