fabric 5.3.0 → 6.0.0-beta3

package/src/filters/Convolute.ts

@@ -0,0 +1,184 @@
+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>> = {
+  opaque: false,
+  matrix: [0, 0, 0, 0, 1, 0, 0, 0, 0],
+};
+
+/**
+ * Adapted from <a href="http://www.html5rocks.com/en/tutorials/canvas/imagefilters/">html5rocks article</a>
+ * @example <caption>Sharpen filter</caption>
+ * const filter = new Convolute({
+ *   matrix: [ 0, -1,  0,
+ *            -1,  5, -1,
+ *             0, -1,  0 ]
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ * canvas.renderAll();
+ * @example <caption>Blur filter</caption>
+ * const filter = new Convolute({
+ *   matrix: [ 1/9, 1/9, 1/9,
+ *             1/9, 1/9, 1/9,
+ *             1/9, 1/9, 1/9 ]
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ * canvas.renderAll();
+ * @example <caption>Emboss filter</caption>
+ * const filter = new Convolute({
+ *   matrix: [ 1,   1,  1,
+ *             1, 0.7, -1,
+ *            -1,  -1, -1 ]
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ * canvas.renderAll();
+ * @example <caption>Emboss filter with opaqueness</caption>
+ * const filter = new Convolute({
+ *   opaque: true,
+ *   matrix: [ 1,   1,  1,
+ *             1, 0.7, -1,
+ *            -1,  -1, -1 ]
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ * canvas.renderAll();
+ */
+export class Convolute extends BaseFilter {
+  /*
+   * Opaque value (true/false)
+   */
+  declare opaque: boolean;
+
+  /*
+   * matrix for the filter, max 9x9
+   */
+  declare matrix: number[];
+
+  static defaults = convoluteDefaultValues;
+
+  getCacheKey() {
+    return `${this.type}_${Math.sqrt(this.matrix.length)}_${
+      this.opaque ? 1 : 0
+    }` as keyof typeof fragmentSource;
+  }
+
+  getFragmentSource() {
+    return fragmentSource[this.getCacheKey()];
+  }
+
+  /**
+   * 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(options: T2DPipelineState) {
+    const imageData = options.imageData,
+      data = imageData.data,
+      weights = this.matrix,
+      side = Math.round(Math.sqrt(weights.length)),
+      halfSide = Math.floor(side / 2),
+      sw = imageData.width,
+      sh = imageData.height,
+      output = options.ctx.createImageData(sw, sh),
+      dst = output.data,
+      // go through the destination image pixels
+      alphaFac = this.opaque ? 1 : 0;
+    let r, g, b, a, dstOff, scx, scy, srcOff, wt, x, y, cx, cy;
+
+    for (y = 0; y < sh; y++) {
+      for (x = 0; x < sw; x++) {
+        dstOff = (y * sw + x) * 4;
+        // calculate the weighed sum of the source image pixels that
+        // fall under the convolution matrix
+        r = 0;
+        g = 0;
+        b = 0;
+        a = 0;
+
+        for (cy = 0; cy < side; cy++) {
+          for (cx = 0; cx < side; cx++) {
+            scy = y + cy - halfSide;
+            scx = x + cx - halfSide;
+
+            // eslint-disable-next-line max-depth
+            if (scy < 0 || scy >= sh || scx < 0 || scx >= sw) {
+              continue;
+            }
+
+            srcOff = (scy * sw + scx) * 4;
+            wt = weights[cy * side + cx];
+
+            r += data[srcOff] * wt;
+            g += data[srcOff + 1] * wt;
+            b += data[srcOff + 2] * wt;
+            // eslint-disable-next-line max-depth
+            if (!alphaFac) {
+              a += data[srcOff + 3] * wt;
+            }
+          }
+        }
+        dst[dstOff] = r;
+        dst[dstOff + 1] = g;
+        dst[dstOff + 2] = b;
+        if (!alphaFac) {
+          dst[dstOff + 3] = a;
+        } else {
+          dst[dstOff + 3] = data[dstOff + 3];
+        }
+      }
+    }
+    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.
+   *
+   * @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.uniform1fv(uniformLocations.uMatrix, this.matrix);
+  }
+
+  /**
+   * Returns object representation of an instance
+   * @return {Object} Object representation of an instance
+   */
+  toObject() {
+    return {
+      ...super.toObject(),
+      opaque: this.opaque,
+      matrix: [...this.matrix],
+    };
+  }
+}
+
+classRegistry.setClass(Convolute);

package/src/filters/FilterBackend.ts

@@ -0,0 +1,34 @@
+import { config } from '../config';
+import { getEnv } from '../env';
+import { createCanvasElement } from '../util/misc/dom';
+import { Canvas2dFilterBackend } from './Canvas2dFilterBackend';
+import { WebGLFilterBackend } from './WebGLFilterBackend';
+
+export type FilterBackend = WebGLFilterBackend | Canvas2dFilterBackend;
+
+let filterBackend: FilterBackend;
+
+/**
+ * Verifies if it is possible to initialize webgl or fallback on a canvas2d filtering backend
+ */
+export function initFilterBackend(): FilterBackend {
+  const { WebGLProbe } = getEnv();
+  WebGLProbe.queryWebGL(createCanvasElement());
+  if (config.enableGLFiltering && WebGLProbe.isSupported(config.textureSize)) {
+    return new WebGLFilterBackend({ tileSize: config.textureSize });
+  } else {
+    return new Canvas2dFilterBackend();
+  }
+}
+
+/**
+ * Get the current fabricJS filter backend  or initialize one if not available yet
+ * @param [strict] pass `true` to create the backend if it wasn't created yet (default behavior),
+ * pass `false` to get the backend ref without mutating it
+ */
+export function getFilterBackend(strict = true): FilterBackend {
+  if (!filterBackend && strict) {
+    filterBackend = initFilterBackend();
+  }
+  return filterBackend;
+}

package/src/filters/GLProbes/GLProbe.ts

@@ -0,0 +1,11 @@
+export enum GLPrecision {
+  low = 'lowp',
+  medium = 'mediump',
+  high = 'highp',
+}
+
+export abstract class GLProbe {
+  declare GLPrecision: GLPrecision | undefined;
+  abstract queryWebGL(canvas: HTMLCanvasElement): void;
+  abstract isSupported(textureSize: number): boolean;
+}

package/src/filters/GLProbes/NodeGLProbe.ts

@@ -0,0 +1,15 @@
+import { GLProbe } from './GLProbe';
+
+/**
+ * @todo GL rendering in node is possible:
+ * - https://github.com/stackgl/headless-gl
+ * - https://github.com/akira-cn/node-canvas-webgl
+ */
+export class NodeGLProbe extends GLProbe {
+  queryWebGL() {
+    // noop
+  }
+  isSupported() {
+    return false;
+  }
+}

package/src/filters/GLProbes/WebGLProbe.ts

@@ -0,0 +1,46 @@
+import { GLPrecision, GLProbe } from './GLProbe';
+
+/**
+ * Lazy initialize WebGL constants
+ */
+export class WebGLProbe extends GLProbe {
+  declare maxTextureSize?: number;
+
+  /**
+   * Tests if webgl supports certain precision
+   * @param {WebGL} Canvas WebGL context to test on
+   * @param {GLPrecision} Precision to test can be any of following
+   * @returns {Boolean} Whether the user's browser WebGL supports given precision.
+   */
+  private testPrecision(
+    gl: WebGLRenderingContext,
+    precision: GLPrecision
+  ): boolean {
+    const fragmentSource = `precision ${precision} float;\nvoid main(){}`;
+    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+    if (!fragmentShader) {
+      return false;
+    }
+    gl.shaderSource(fragmentShader, fragmentSource);
+    gl.compileShader(fragmentShader);
+    return !!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS);
+  }
+
+  /**
+   * query browser for WebGL
+   */
+  queryWebGL(canvas: HTMLCanvasElement) {
+    const gl = canvas.getContext('webgl');
+    if (gl) {
+      this.maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE);
+      this.GLPrecision = Object.values(GLPrecision).find((precision) =>
+        this.testPrecision(gl, precision)
+      );
+      console.log(`fabric: max texture size ${this.maxTextureSize}`);
+    }
+  }
+
+  isSupported(textureSize: number) {
+    return !!this.maxTextureSize && this.maxTextureSize >= textureSize;
+  }
+}

package/src/filters/Gamma.ts

@@ -0,0 +1,110 @@
+import type { TClassProperties } from '../typedefs';
+import { BaseFilter } from './BaseFilter';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../ClassRegistry';
+import { fragmentSource } from './shaders/gamma';
+export type GammaInput = [number, number, number];
+
+export const gammaDefaultValues: Partial<TClassProperties<Gamma>> = {
+  mainParameter: 'gamma',
+  gamma: [1, 1, 1],
+};
+
+/**
+ * Gamma filter class
+ * @example
+ * const filter = new Gamma({
+ *   gamma: [1, 0.5, 2.1]
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ */
+export class Gamma extends BaseFilter {
+  /**
+   * Gamma array value, from 0.01 to 2.2.
+   * @param {Array} gamma
+   * @default
+   */
+  declare gamma: GammaInput;
+  declare rgbValues?: {
+    r: Uint8Array;
+    g: Uint8Array;
+    b: Uint8Array;
+  };
+
+  static defaults = gammaDefaultValues;
+
+  getFragmentSource() {
+    return fragmentSource;
+  }
+
+  constructor({ gamma = [1, 1, 1], ...options }: { gamma?: GammaInput } = {}) {
+    super(options);
+    this.gamma = gamma;
+  }
+
+  /**
+   * Apply the Gamma 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) {
+    const gamma = this.gamma,
+      rInv = 1 / gamma[0],
+      gInv = 1 / gamma[1],
+      bInv = 1 / gamma[2];
+
+    if (!this.rgbValues) {
+      this.rgbValues = {
+        r: new Uint8Array(256),
+        g: new Uint8Array(256),
+        b: new Uint8Array(256),
+      };
+    }
+
+    // This is an optimization - pre-compute a look-up table for each color channel
+    // instead of performing these pow calls for each pixel in the image.
+    const rgb = this.rgbValues;
+    for (let i = 0; i < 256; i++) {
+      rgb.r[i] = Math.pow(i / 255, rInv) * 255;
+      rgb.g[i] = Math.pow(i / 255, gInv) * 255;
+      rgb.b[i] = Math.pow(i / 255, bInv) * 255;
+    }
+    for (let i = 0; i < data.length; i += 4) {
+      data[i] = rgb.r[data[i]];
+      data[i + 1] = rgb.g[data[i + 1]];
+      data[i + 2] = rgb.b[data[i + 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: WebGLRenderingContext,
+    program: WebGLProgram
+  ): TWebGLUniformLocationMap {
+    return {
+      uGamma: gl.getUniformLocation(program, 'uGamma'),
+    };
+  }
+
+  /**
+   * 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.uniform3fv(uniformLocations.uGamma, this.gamma);
+  }
+}
+
+classRegistry.setClass(Gamma);

package/src/filters/Grayscale.ts

@@ -0,0 +1,102 @@
+import type { TClassProperties } from '../typedefs';
+import { BaseFilter } from './BaseFilter';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../ClassRegistry';
+import { fragmentSource } from './shaders/grayscale';
+
+export type TGrayscaleMode = 'average' | 'lightness' | 'luminosity';
+
+export const grayscaleDefaultValues: Partial<TClassProperties<Grayscale>> = {
+  mode: 'average',
+  mainParameter: 'mode',
+};
+
+/**
+ * Grayscale image filter class
+ * @example
+ * const filter = new Grayscale();
+ * object.filters.push(filter);
+ * object.applyFilters();
+ */
+export class Grayscale extends BaseFilter {
+  declare mode: TGrayscaleMode;
+
+  static defaults = grayscaleDefaultValues;
+
+  /**
+   * Apply the Grayscale 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) {
+    for (let i = 0, value: number; i < data.length; i += 4) {
+      switch (this.mode) {
+        case 'average':
+          value = (data[i] + data[i + 1] + data[i + 2]) / 3;
+          break;
+        case 'lightness':
+          value =
+            (Math.min(data[i], data[i + 1], data[i + 2]) +
+              Math.max(data[i], data[i + 1], data[i + 2])) /
+            2;
+          break;
+        case 'luminosity':
+          value = 0.21 * data[i] + 0.72 * data[i + 1] + 0.07 * data[i + 2];
+          break;
+      }
+
+      data[i] = value;
+      data[i + 1] = value;
+      data[i + 2] = value;
+    }
+  }
+
+  getCacheKey() {
+    return `${this.type}_${this.mode}`;
+  }
+
+  getFragmentSource() {
+    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.
+   *
+   * @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 mode = 1;
+    gl.uniform1i(uniformLocations.uMode, mode);
+  }
+
+  /**
+   * Grayscale filter isNeutralState implementation
+   * The filter is never neutral
+   * on the image
+   **/
+  isNeutralState() {
+    return false;
+  }
+}
+
+classRegistry.setClass(Grayscale);

package/src/filters/HueRotation.ts

@@ -0,0 +1,62 @@
+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',
+  };
+
+/**
+ * HueRotation filter class
+ * @example
+ * const filter = new HueRotation({
+ *   rotation: -0.5
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ */
+// @ts-expect-error some babbling about mainParameter
+export class HueRotation extends ColorMatrix {
+  /**
+   * HueRotation value, from -1 to 1.
+   */
+  declare rotation: number;
+
+  static defaults = hueRotationDefaultValues;
+
+  calculateMatrix() {
+    const rad = this.rotation * Math.PI,
+      cosine = cos(rad),
+      sine = sin(rad),
+      aThird = 1 / 3,
+      aThirdSqtSin = Math.sqrt(aThird) * sine,
+      OneMinusCos = 1 - cosine;
+    this.matrix = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0];
+    this.matrix[0] = cosine + OneMinusCos / 3;
+    this.matrix[1] = aThird * OneMinusCos - aThirdSqtSin;
+    this.matrix[2] = aThird * OneMinusCos + aThirdSqtSin;
+    this.matrix[5] = aThird * OneMinusCos + aThirdSqtSin;
+    this.matrix[6] = cosine + aThird * OneMinusCos;
+    this.matrix[7] = aThird * OneMinusCos - aThirdSqtSin;
+    this.matrix[10] = aThird * OneMinusCos - aThirdSqtSin;
+    this.matrix[11] = aThird * OneMinusCos + aThirdSqtSin;
+    this.matrix[12] = cosine + aThird * OneMinusCos;
+  }
+
+  isNeutralState() {
+    this.calculateMatrix();
+    return super.isNeutralState();
+  }
+
+  applyTo(options: TWebGLPipelineState | T2DPipelineState) {
+    this.calculateMatrix();
+    super.applyTo(options);
+  }
+}
+
+classRegistry.setClass(HueRotation);

package/src/filters/Invert.ts

@@ -0,0 +1,99 @@
+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>> = {
+  alpha: false,
+  invert: true,
+  mainParameter: 'invert',
+};
+
+/**
+ * @example
+ * const filter = new Invert();
+ * object.filters.push(filter);
+ * object.applyFilters(canvas.renderAll.bind(canvas));
+ */
+export class Invert extends BaseFilter {
+  /**
+   * Invert also alpha.
+   * @param {Boolean} alpha
+   * @default
+   **/
+  declare alpha: boolean;
+
+  /**
+   * Filter invert. if false, does nothing
+   * @param {Boolean} invert
+   * @default
+   */
+  declare invert: boolean;
+
+  static defaults = invertDefaultValues;
+
+  /**
+   * Apply the Invert 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) {
+    for (let i = 0; i < data.length; i += 4) {
+      data[i] = 255 - data[i];
+      data[i + 1] = 255 - data[i + 1];
+      data[i + 2] = 255 - data[i + 2];
+
+      if (this.alpha) {
+        data[i + 3] = 255 - data[i + 3];
+      }
+    }
+  }
+
+  protected getFragmentSource(): string {
+    return fragmentSource;
+  }
+
+  /**
+   * Invert filter isNeutralState implementation
+   * Used only in image applyFilters to discard filters that will not have an effect
+   * on the image
+   * @param {Object} options
+   **/
+  isNeutralState() {
+    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.
+   *
+   * @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.uniform1i(uniformLocations.uInvert, Number(this.invert));
+    gl.uniform1i(uniformLocations.uAlpha, Number(this.alpha));
+  }
+}
+
+classRegistry.setClass(Invert);