fabric 5.3.0 → 6.0.0-beta1

package/src/filters/Invert.ts

@@ -0,0 +1,117 @@
+import type { TClassProperties } from '../typedefs';
+import { BaseFilter } from './BaseFilter';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
+
+/**
+ * @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;
+
+  /**
+   * 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];
+      }
+    }
+  }
+
+  /**
+   * 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));
+  }
+
+  static async fromObject(object: any) {
+    return new Invert(object);
+  }
+}
+
+export const invertDefaultValues: Partial<TClassProperties<Invert>> = {
+  type: 'Invert',
+  alpha: false,
+  fragmentSource: `
+    precision highp float;
+    uniform sampler2D uTexture;
+    uniform int uInvert;
+    uniform int uAlpha;
+    varying vec2 vTexCoord;
+    void main() {
+      vec4 color = texture2D(uTexture, vTexCoord);
+      if (uInvert == 1) {
+        if (uAlpha == 1) {
+          gl_FragColor = vec4(1.0 - color.r,1.0 -color.g,1.0 -color.b,1.0 -color.a);
+        } else {
+          gl_FragColor = vec4(1.0 - color.r,1.0 -color.g,1.0 -color.b,color.a);
+        }
+      } else {
+        gl_FragColor = color;
+      }
+    }
+    `,
+  invert: true,
+  mainParameter: 'invert',
+};
+
+Object.assign(Invert.prototype, invertDefaultValues);
+classRegistry.setClass(Invert);

package/src/filters/Noise.ts

@@ -0,0 +1,109 @@
+import type { TClassProperties } from '../typedefs';
+import { BaseFilter } from './BaseFilter';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
+
+/**
+ * Noise filter class
+ * @example
+ * const filter = new Noise({
+ *   noise: 700
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ * canvas.renderAll();
+ */
+export class Noise extends BaseFilter {
+  /**
+   * Noise value, from
+   * @param {Number} noise
+   * @default
+   */
+  declare noise: 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.noise === 0) {
+      return;
+    }
+    const noise = this.noise;
+    for (let i = 0; i < data.length; i += 4) {
+      const rand = (0.5 - Math.random()) * noise;
+      data[i] += rand;
+      data[i + 1] += rand;
+      data[i + 2] += rand;
+    }
+  }
+
+  /**
+   * 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.
+   *
+   * @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.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 { ...super.toObject(), noise: this.noise };
+  }
+
+  static async fromObject(object: any) {
+    return new Noise(object);
+  }
+}
+
+export const noiseDefaultValues: Partial<TClassProperties<Noise>> = {
+  type: 'Noise',
+  fragmentSource: `
+    precision highp float;
+    uniform sampler2D uTexture;
+    uniform float uStepH;
+    uniform float uNoise;
+    uniform float uSeed;
+    varying vec2 vTexCoord;
+    float rand(vec2 co, float seed, float vScale) {
+      return fract(sin(dot(co.xy * vScale ,vec2(12.9898 , 78.233))) * 43758.5453 * (seed + 0.01) / 2.0);
+    }
+    void main() {
+      vec4 color = texture2D(uTexture, vTexCoord);
+      color.rgb += (0.5 - rand(vTexCoord, uSeed, 0.1 / uStepH)) * uNoise;
+      gl_FragColor = color;
+    }
+    `,
+  mainParameter: 'noise',
+  noise: 0,
+};
+
+Object.assign(Noise.prototype, noiseDefaultValues);
+classRegistry.setClass(Noise);

package/src/filters/Pixelate.ts

@@ -0,0 +1,114 @@
+import type { TClassProperties } from '../typedefs';
+import { BaseFilter } from './BaseFilter';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
+
+/**
+ * Pixelate filter class
+ * @example
+ * const filter = new Pixelate({
+ *   blocksize: 8
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ */
+export class Pixelate extends BaseFilter {
+  declare blocksize: number;
+
+  /**
+   * Apply the Pixelate 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, width, height } }: T2DPipelineState) {
+    for (let i = 0; i < height; i += this.blocksize) {
+      for (let j = 0; j < width; j += this.blocksize) {
+        const index = i * 4 * width + j * 4;
+        const r = data[index];
+        const g = data[index + 1];
+        const b = data[index + 2];
+        const a = data[index + 3];
+
+        for (let _i = i; _i < Math.min(i + this.blocksize, height); _i++) {
+          for (let _j = j; _j < Math.min(j + this.blocksize, width); _j++) {
+            const index = _i * 4 * width + _j * 4;
+            data[index] = r;
+            data[index + 1] = g;
+            data[index + 2] = b;
+            data[index + 3] = a;
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Indicate when the filter is not gonna apply changes to the image
+   **/
+  isNeutralState() {
+    return this.blocksize === 1;
+  }
+
+  /**
+   * 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.
+   *
+   * @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.uBlocksize, this.blocksize);
+  }
+
+  static async fromObject(object: any) {
+    return new Pixelate(object);
+  }
+}
+
+export const pixelateDefaultValues: Partial<TClassProperties<Pixelate>> = {
+  type: 'Pixelate',
+  blocksize: 4,
+  mainParameter: 'blocksize',
+  fragmentSource: `
+    precision highp float;
+    uniform sampler2D uTexture;
+    uniform float uBlocksize;
+    uniform float uStepW;
+    uniform float uStepH;
+    varying vec2 vTexCoord;
+    void main() {
+      float blockW = uBlocksize * uStepW;
+      float blockH = uBlocksize * uStepW;
+      int posX = int(vTexCoord.x / blockW);
+      int posY = int(vTexCoord.y / blockH);
+      float fposX = float(posX);
+      float fposY = float(posY);
+      vec2 squareCoords = vec2(fposX * blockW, fposY * blockH);
+      vec4 color = texture2D(uTexture, squareCoords);
+      gl_FragColor = color;
+    }
+    `,
+};
+
+Object.assign(Pixelate.prototype, pixelateDefaultValues);
+classRegistry.setClass(Pixelate);

package/src/filters/RemoveColor.ts

@@ -0,0 +1,148 @@
+import { Color } from '../color/Color';
+import type { TClassProperties } from '../typedefs';
+import { BaseFilter } from './BaseFilter';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
+
+/**
+ * Remove white filter class
+ * @example
+ * const filter = new RemoveColor({
+ *   threshold: 0.2,
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ * canvas.renderAll();
+ */
+export class RemoveColor extends BaseFilter {
+  /**
+   * Color to remove, in any format understood by {@link Color}.
+   * @param {String} type
+   * @default
+   */
+  declare color: string;
+
+  /**
+   * distance to actual color, as value up or down from each r,g,b
+   * between 0 and 1
+   **/
+  declare distance: number;
+
+  /**
+   * For color to remove inside distance, use alpha channel for a smoother deletion
+   * NOT IMPLEMENTED YET
+   **/
+  declare useAlpha: boolean;
+
+  /**
+   * Applies filter to canvas element
+   * @param {Object} canvasEl Canvas element to apply filter to
+   */
+  applyTo2d({ imageData: { data } }: T2DPipelineState) {
+    const distance = this.distance * 255,
+      source = new Color(this.color).getSource(),
+      lowC = [source[0] - distance, source[1] - distance, source[2] - distance],
+      highC = [
+        source[0] + distance,
+        source[1] + distance,
+        source[2] + distance,
+      ];
+
+    for (let i = 0; i < data.length; i += 4) {
+      const r = data[i];
+      const g = data[i + 1];
+      const b = data[i + 2];
+
+      if (
+        r > lowC[0] &&
+        g > lowC[1] &&
+        b > lowC[2] &&
+        r < highC[0] &&
+        g < highC[1] &&
+        b < highC[2]
+      ) {
+        data[i + 3] = 0;
+      }
+    }
+  }
+
+  /**
+   * 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 {
+      uLow: gl.getUniformLocation(program, 'uLow'),
+      uHigh: gl.getUniformLocation(program, 'uHigh'),
+    };
+  }
+
+  /**
+   * 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 source = new Color(this.color).getSource(),
+      distance = this.distance,
+      lowC = [
+        0 + source[0] / 255 - distance,
+        0 + source[1] / 255 - distance,
+        0 + source[2] / 255 - distance,
+        1,
+      ],
+      highC = [
+        source[0] / 255 + distance,
+        source[1] / 255 + distance,
+        source[2] / 255 + distance,
+        1,
+      ];
+    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 { ...super.toObject(), color: this.color, distance: this.distance };
+  }
+
+  static async fromObject(object: any) {
+    return new RemoveColor(object);
+  }
+}
+
+export const removeColorDefaultValues: Partial<TClassProperties<RemoveColor>> =
+  {
+    type: 'RemoveColor',
+    color: '#FFFFFF',
+    fragmentSource: `
+      precision highp float;
+      uniform sampler2D uTexture;
+      uniform vec4 uLow;
+      uniform vec4 uHigh;
+      varying vec2 vTexCoord;
+      void main() {
+        gl_FragColor = texture2D(uTexture, vTexCoord);
+        if(all(greaterThan(gl_FragColor.rgb,uLow.rgb)) && all(greaterThan(uHigh.rgb,gl_FragColor.rgb))) {
+          gl_FragColor.a = 0.0;
+        }
+      }
+      `,
+    distance: 0.02,
+    useAlpha: false,
+  };
+
+Object.assign(RemoveColor.prototype, removeColorDefaultValues);
+classRegistry.setClass(RemoveColor);