fabric 7.4.0 → 7.5.0-beta.1

package/src/filters/WebGLFilterBackend.spec.ts

@@ -1,50 +0,0 @@
-import { afterEach, describe, expect, it } from 'vitest';
-import { config } from '../config';
-import { initFilterBackend } from './FilterBackend';
-import { WebGLFilterBackend } from './WebGLFilterBackend';
-import { Canvas2dFilterBackend } from './Canvas2dFilterBackend';
-import { isJSDOM } from '../../vitest.extend';
-
-describe('WebGL', () => {
-  afterEach(() => {
-    config.restoreDefaults();
-  });
-
-  it('initFilterBackend exists', () => {
-    expect(initFilterBackend, 'initFilterBackend is a function').toBeTypeOf(
-      'function',
-    );
-  });
-
-  it('initFilterBackend node', (context) => {
-    context.skip(!isJSDOM());
-
-    expect(
-      initFilterBackend(),
-      'should init 2d backend on node',
-    ).toBeInstanceOf(Canvas2dFilterBackend);
-  });
-
-  it('initFilterBackend browser', (context) => {
-    context.skip(isJSDOM());
-
-    expect(
-      config.enableGLFiltering,
-      'enableGLFiltering should be enabled by default',
-    ).toBeTruthy();
-    expect(
-      initFilterBackend(),
-      'should init webGL backend on browser',
-    ).toBeInstanceOf(WebGLFilterBackend);
-    config.configure({ textureSize: Infinity });
-    expect(
-      initFilterBackend(),
-      'should fallback to 2d backend if textureSize is too big',
-    ).toBeInstanceOf(Canvas2dFilterBackend);
-    config.configure({ enableGLFiltering: false });
-    expect(
-      initFilterBackend(),
-      'should init 2d backend if enableGLFiltering is false',
-    ).toBeInstanceOf(Canvas2dFilterBackend);
-  });
-});

package/src/filters/WebGLFilterBackend.ts

@@ -1,416 +0,0 @@
-import { config } from '../config';
-import { createCanvasElementFor } from '../util/misc/dom';
-import type {
-  TWebGLPipelineState,
-  TProgramCache,
-  TTextureCache,
-  TPipelineResources,
-} from './typedefs';
-import type { BaseFilter } from './BaseFilter';
-
-export class WebGLFilterBackend {
-  declare tileSize: number;
-
-  /**
-   * Define ...
-   **/
-  aPosition: Float32Array = new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]);
-
-  /**
-   * If GLPut data is the fastest operation, or if forced, this buffer will be used
-   * to transfer the data back in the 2d logic
-   **/
-  declare imageBuffer?: ArrayBuffer;
-
-  declare canvas: HTMLCanvasElement;
-
-  /**
-   * The Webgl context that will execute the operations for filtering
-   **/
-  declare gl: WebGLRenderingContext;
-
-  /**
-   * Keyed map for shader cache
-   **/
-  declare programCache: TProgramCache;
-
-  /**
-   * Keyed map for texture cache
-   **/
-  declare textureCache: TTextureCache;
-
-  /**
-   * Contains GPU info for debug
-   **/
-  declare gpuInfo: any;
-
-  /**
-   * 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 = {};
-
-  constructor({ tileSize = config.textureSize } = {}) {
-    this.tileSize = tileSize;
-    this.setupGLContext(tileSize, tileSize);
-    this.captureGPUInfo();
-  }
-
-  /**
-   * Setup a WebGL context suitable for filtering, and bind any needed event handlers.
-   */
-  setupGLContext(width: number, height: number): void {
-    this.dispose();
-    this.createWebGLCanvas(width, height);
-  }
-
-  /**
-   * Create a canvas element and associated WebGL context and attaches them as
-   * class properties to the GLFilterBackend class.
-   */
-  createWebGLCanvas(width: number, height: number): void {
-    const canvas = createCanvasElementFor({ width, height });
-    const glOptions = {
-        alpha: true,
-        premultipliedAlpha: false,
-        depth: false,
-        stencil: false,
-        antialias: false,
-      },
-      gl = canvas.getContext('webgl', glOptions) as WebGLRenderingContext;
-
-    if (!gl) {
-      return;
-    }
-    gl.clearColor(0, 0, 0, 0);
-    // this canvas can fire webglcontextlost and webglcontextrestored
-    this.canvas = canvas;
-    this.gl = gl;
-  }
-
-  /**
-   * Attempts to apply the requested filters to the source provided, drawing the filtered output
-   * to the provided target canvas.
-   *
-   * @param {Array} filters The filters to apply.
-   * @param {TexImageSource} source The source to be filtered.
-   * @param {Number} width The width of the source input.
-   * @param {Number} height The height of the source input.
-   * @param {HTMLCanvasElement} targetCanvas The destination for filtered output to be drawn.
-   * @param {String|undefined} cacheKey A key used to cache resources related to the source. If
-   * omitted, caching will be skipped.
-   */
-  applyFilters(
-    filters: BaseFilter<string>[],
-    source: TexImageSource,
-    width: number,
-    height: number,
-    targetCanvas: HTMLCanvasElement,
-    cacheKey?: string,
-  ): TWebGLPipelineState | undefined {
-    const gl = this.gl;
-    const ctx = targetCanvas.getContext('2d');
-    if (!gl || !ctx) {
-      return;
-    }
-    let cachedTexture;
-    if (cacheKey) {
-      cachedTexture = this.getCachedTexture(cacheKey, source);
-    }
-    const pipelineState: TWebGLPipelineState = {
-      originalWidth:
-        (source as HTMLImageElement).width ||
-        (source as HTMLImageElement).naturalWidth ||
-        0,
-      originalHeight:
-        (source as HTMLImageElement).height ||
-        (source as HTMLImageElement).naturalHeight ||
-        0,
-      sourceWidth: width,
-      sourceHeight: height,
-      destinationWidth: width,
-      destinationHeight: height,
-      context: gl,
-      sourceTexture: this.createTexture(
-        gl,
-        width,
-        height,
-        !cachedTexture ? source : undefined,
-      ),
-      targetTexture: this.createTexture(gl, width, height),
-      originalTexture:
-        cachedTexture ||
-        this.createTexture(
-          gl,
-          width,
-          height,
-          !cachedTexture ? source : undefined,
-        ),
-      passes: filters.length,
-      webgl: true,
-      aPosition: this.aPosition,
-      programCache: this.programCache,
-      pass: 0,
-      filterBackend: this,
-      targetCanvas: targetCanvas,
-    };
-    const tempFbo = gl.createFramebuffer();
-    gl.bindFramebuffer(gl.FRAMEBUFFER, tempFbo);
-    filters.forEach((filter: any) => {
-      filter && filter.applyTo(pipelineState);
-    });
-    resizeCanvasIfNeeded(pipelineState);
-    this.copyGLTo2D(gl, pipelineState);
-    gl.bindTexture(gl.TEXTURE_2D, null);
-    gl.deleteTexture(pipelineState.sourceTexture);
-    gl.deleteTexture(pipelineState.targetTexture);
-    gl.deleteFramebuffer(tempFbo);
-    ctx.setTransform(1, 0, 0, 1, 0, 0);
-    return pipelineState;
-  }
-
-  /**
-   * Detach event listeners, remove references, and clean up caches.
-   */
-  dispose() {
-    if (this.canvas) {
-      // we are disposing, we don't care about the fact
-      // that the canvas shouldn't be null.
-      // @ts-expect-error disposing
-      this.canvas = null;
-      // @ts-expect-error disposing
-      this.gl = null;
-    }
-    this.clearWebGLCaches();
-  }
-
-  /**
-   * Wipe out WebGL-related caches.
-   */
-  clearWebGLCaches() {
-    this.programCache = {};
-    this.textureCache = {};
-  }
-
-  /**
-   * Create a WebGL texture object.
-   *
-   * Accepts specific dimensions to initialize the texture to or a source image.
-   *
-   * @param {WebGLRenderingContext} gl The GL context to use for creating the texture.
-   * @param {number} width The width to initialize the texture at.
-   * @param {number} height The height to initialize the texture.
-   * @param {TexImageSource} textureImageSource A source for the texture data.
-   * @param {number} filter gl.NEAREST default or gl.LINEAR filters for the texture.
-   * This filter is very useful for LUTs filters. If you need interpolation use gl.LINEAR
-   * @returns {WebGLTexture}
-   */
-  createTexture(
-    gl: WebGLRenderingContext,
-    width: number,
-    height: number,
-    textureImageSource?: TexImageSource,
-    filter?:
-      | WebGLRenderingContextBase['NEAREST']
-      | WebGLRenderingContextBase['LINEAR'],
-  ): WebGLTexture {
-    const {
-      NEAREST,
-      TEXTURE_2D,
-      RGBA,
-      UNSIGNED_BYTE,
-      CLAMP_TO_EDGE,
-      TEXTURE_MAG_FILTER,
-      TEXTURE_MIN_FILTER,
-      TEXTURE_WRAP_S,
-      TEXTURE_WRAP_T,
-    } = gl;
-    const texture = gl.createTexture();
-    gl.bindTexture(TEXTURE_2D, texture);
-    gl.texParameteri(TEXTURE_2D, TEXTURE_MAG_FILTER, filter || NEAREST);
-    gl.texParameteri(TEXTURE_2D, TEXTURE_MIN_FILTER, filter || NEAREST);
-    gl.texParameteri(TEXTURE_2D, TEXTURE_WRAP_S, CLAMP_TO_EDGE);
-    gl.texParameteri(TEXTURE_2D, TEXTURE_WRAP_T, CLAMP_TO_EDGE);
-    if (textureImageSource) {
-      gl.texImage2D(
-        TEXTURE_2D,
-        0,
-        RGBA,
-        RGBA,
-        UNSIGNED_BYTE,
-        textureImageSource,
-      );
-    } else {
-      gl.texImage2D(
-        TEXTURE_2D,
-        0,
-        RGBA,
-        width,
-        height,
-        0,
-        RGBA,
-        UNSIGNED_BYTE,
-        null,
-      );
-    }
-    // disabled because website and issues with different typescript version
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-    return texture!;
-  }
-
-  /**
-   * Can be optionally used to get a texture from the cache array
-   *
-   * If an existing texture is not found, a new texture is created and cached.
-   *
-   * @param {String} uniqueId A cache key to use to find an existing texture.
-   * @param {HTMLImageElement|HTMLCanvasElement} textureImageSource A source to use to create the
-   * texture cache entry if one does not already exist.
-   */
-  getCachedTexture(
-    uniqueId: string,
-    textureImageSource: TexImageSource,
-    filter?:
-      | WebGLRenderingContextBase['NEAREST']
-      | WebGLRenderingContextBase['LINEAR'],
-  ): WebGLTexture | null {
-    const { textureCache } = this;
-    if (textureCache[uniqueId]) {
-      return textureCache[uniqueId];
-    } else {
-      const texture = this.createTexture(
-        this.gl,
-        (textureImageSource as HTMLImageElement).width,
-        (textureImageSource as HTMLImageElement).height,
-        textureImageSource,
-        filter,
-      );
-      if (texture) {
-        textureCache[uniqueId] = texture;
-      }
-      return texture;
-    }
-  }
-
-  /**
-   * Clear out cached resources related to a source image that has been
-   * filtered previously.
-   *
-   * @param {String} cacheKey The cache key provided when the source image was filtered.
-   */
-  evictCachesForKey(cacheKey: string) {
-    if (this.textureCache[cacheKey]) {
-      this.gl.deleteTexture(this.textureCache[cacheKey]);
-      delete this.textureCache[cacheKey];
-    }
-  }
-
-  /**
-   * Copy an input WebGL canvas on to an output 2D canvas.
-   *
-   * The WebGL canvas is assumed to be upside down, with the top-left pixel of the
-   * desired output image appearing in the bottom-left corner of the WebGL canvas.
-   *
-   * @param {WebGLRenderingContext} sourceContext The WebGL context to copy from.
-   * @param {Object} pipelineState The 2D target canvas to copy on to.
-   */
-  copyGLTo2D(gl: WebGLRenderingContext, pipelineState: TWebGLPipelineState) {
-    const glCanvas = gl.canvas,
-      targetCanvas = pipelineState.targetCanvas,
-      ctx = targetCanvas.getContext('2d');
-    if (!ctx) {
-      return;
-    }
-    ctx.translate(0, targetCanvas.height); // move it down again
-    ctx.scale(1, -1); // vertical flip
-    // where is my image on the big glcanvas?
-    const sourceY = glCanvas.height - targetCanvas.height;
-    ctx.drawImage(
-      glCanvas,
-      0,
-      sourceY,
-      targetCanvas.width,
-      targetCanvas.height,
-      0,
-      0,
-      targetCanvas.width,
-      targetCanvas.height,
-    );
-  }
-
-  /**
-   * Copy an input WebGL canvas on to an output 2D canvas using 2d canvas' putImageData
-   * API. Measurably faster than using ctx.drawImage in Firefox (version 54 on OSX Sierra).
-   *
-   * @param {WebGLRenderingContext} sourceContext The WebGL context to copy from.
-   * @param {HTMLCanvasElement} targetCanvas The 2D target canvas to copy on to.
-   * @param {Object} pipelineState The 2D target canvas to copy on to.
-   */
-  copyGLTo2DPutImageData(
-    this: Required<WebGLFilterBackend>,
-    gl: WebGLRenderingContext,
-    pipelineState: TWebGLPipelineState,
-  ) {
-    const targetCanvas = pipelineState.targetCanvas,
-      ctx = targetCanvas.getContext('2d'),
-      dWidth = pipelineState.destinationWidth,
-      dHeight = pipelineState.destinationHeight,
-      numBytes = dWidth * dHeight * 4;
-    if (!ctx) {
-      return;
-    }
-    const u8 = new Uint8Array(this.imageBuffer, 0, numBytes);
-    const u8Clamped = new Uint8ClampedArray(this.imageBuffer, 0, numBytes);
-
-    gl.readPixels(0, 0, dWidth, dHeight, gl.RGBA, gl.UNSIGNED_BYTE, u8);
-    const imgData = new ImageData(u8Clamped, dWidth, dHeight);
-    ctx.putImageData(imgData, 0, 0);
-  }
-
-  /**
-   * Attempt to extract GPU information strings from a WebGL context.
-   *
-   * Useful information when debugging or blacklisting specific GPUs.
-   *
-   * @returns {Object} A GPU info object with renderer and vendor strings.
-   */
-  captureGPUInfo() {
-    if (this.gpuInfo) {
-      return this.gpuInfo;
-    }
-    const gl = this.gl,
-      gpuInfo = { renderer: '', vendor: '' };
-    if (!gl) {
-      return gpuInfo;
-    }
-    const ext = gl.getExtension('WEBGL_debug_renderer_info');
-    if (ext) {
-      const renderer = gl.getParameter(ext.UNMASKED_RENDERER_WEBGL);
-      const vendor = gl.getParameter(ext.UNMASKED_VENDOR_WEBGL);
-      if (renderer) {
-        gpuInfo.renderer = renderer.toLowerCase();
-      }
-      if (vendor) {
-        gpuInfo.vendor = vendor.toLowerCase();
-      }
-    }
-    this.gpuInfo = gpuInfo;
-    return gpuInfo;
-  }
-}
-
-function resizeCanvasIfNeeded(pipelineState: TWebGLPipelineState): void {
-  const targetCanvas = pipelineState.targetCanvas,
-    width = targetCanvas.width,
-    height = targetCanvas.height,
-    dWidth = pipelineState.destinationWidth,
-    dHeight = pipelineState.destinationHeight;
-
-  if (width !== dWidth || height !== dHeight) {
-    targetCanvas.width = dWidth;
-    targetCanvas.height = dHeight;
-  }
-}

package/src/filters/filters.ts

@@ -1,30 +0,0 @@
-export { BaseFilter } from './BaseFilter';
-export type { TBlendMode } from './BlendColor';
-export { BlendColor } from './BlendColor';
-export { BlendImage } from './BlendImage';
-export { Blur } from './Blur';
-export { Brightness } from './Brightness';
-export { ColorMatrix } from './ColorMatrix';
-export {
-  BlackWhite,
-  Brownie,
-  Kodachrome,
-  Polaroid,
-  Sepia,
-  Technicolor,
-  Vintage,
-} from './ColorMatrixFilters';
-export { Composed } from './Composed';
-export { Contrast } from './Contrast';
-export { Convolute } from './Convolute';
-export { Gamma } from './Gamma';
-export { Grayscale } from './Grayscale';
-export { HueRotation } from './HueRotation';
-export { Invert } from './Invert';
-export { Noise } from './Noise';
-export { Pixelate } from './Pixelate';
-export { RemoveColor } from './RemoveColor';
-export type { TResizeType } from './Resize';
-export { Resize } from './Resize';
-export { Saturation } from './Saturation';
-export { Vibrance } from './Vibrance';

package/src/filters/index.ts

@@ -1,12 +0,0 @@
-export * as filters from './filters';
-
-export {
-  getFilterBackend,
-  initFilterBackend,
-  setFilterBackend,
-} from './FilterBackend';
-export { Canvas2dFilterBackend } from './Canvas2dFilterBackend';
-export { WebGLFilterBackend } from './WebGLFilterBackend';
-export { isWebGLPipelineState, isPutImageFaster } from './utils';
-
-export type * from './typedefs';

package/src/filters/shaders/baseFilter.ts

@@ -1,17 +0,0 @@
-export const highPsourceCode = `precision highp float`;
-
-export const identityFragmentShader = `
-    ${highPsourceCode};
-    varying vec2 vTexCoord;
-    uniform sampler2D uTexture;
-    void main() {
-      gl_FragColor = texture2D(uTexture, vTexCoord);
-    }`;
-
-export const vertexSource = `
-    attribute vec2 aPosition;
-    varying vec2 vTexCoord;
-    void main() {
-      vTexCoord = aPosition;
-      gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);
-    }`;

package/src/filters/shaders/blendColor.ts

@@ -1,33 +0,0 @@
-export const blendColorFragmentSource = {
-  multiply: 'gl_FragColor.rgb *= uColor.rgb;\n',
-  screen:
-    'gl_FragColor.rgb = 1.0 - (1.0 - gl_FragColor.rgb) * (1.0 - uColor.rgb);\n',
-  add: 'gl_FragColor.rgb += uColor.rgb;\n',
-  difference: 'gl_FragColor.rgb = abs(gl_FragColor.rgb - uColor.rgb);\n',
-  subtract: 'gl_FragColor.rgb -= uColor.rgb;\n',
-  lighten: 'gl_FragColor.rgb = max(gl_FragColor.rgb, uColor.rgb);\n',
-  darken: 'gl_FragColor.rgb = min(gl_FragColor.rgb, uColor.rgb);\n',
-  exclusion:
-    'gl_FragColor.rgb += uColor.rgb - 2.0 * (uColor.rgb * gl_FragColor.rgb);\n',
-  overlay: `
-    if (uColor.r < 0.5) {
-      gl_FragColor.r *= 2.0 * uColor.r;
-    } else {
-      gl_FragColor.r = 1.0 - 2.0 * (1.0 - gl_FragColor.r) * (1.0 - uColor.r);
-    }
-    if (uColor.g < 0.5) {
-      gl_FragColor.g *= 2.0 * uColor.g;
-    } else {
-      gl_FragColor.g = 1.0 - 2.0 * (1.0 - gl_FragColor.g) * (1.0 - uColor.g);
-    }
-    if (uColor.b < 0.5) {
-      gl_FragColor.b *= 2.0 * uColor.b;
-    } else {
-      gl_FragColor.b = 1.0 - 2.0 * (1.0 - gl_FragColor.b) * (1.0 - uColor.b);
-    }
-    `,
-  tint: `
-    gl_FragColor.rgb *= (1.0 - uColor.a);
-    gl_FragColor.rgb += uColor.rgb;
-    `,
-} as const;

package/src/filters/shaders/blendImage.ts

@@ -1,44 +0,0 @@
-import type { TBlendImageMode } from '../BlendImage';
-
-export const fragmentSource: Record<TBlendImageMode, string> = {
-  multiply: `
-    precision highp float;
-    uniform sampler2D uTexture;
-    uniform sampler2D uImage;
-    uniform vec4 uColor;
-    varying vec2 vTexCoord;
-    varying vec2 vTexCoord2;
-    void main() {
-      vec4 color = texture2D(uTexture, vTexCoord);
-      vec4 color2 = texture2D(uImage, vTexCoord2);
-      color.rgba *= color2.rgba;
-      gl_FragColor = color;
-    }
-    `,
-  mask: `
-    precision highp float;
-    uniform sampler2D uTexture;
-    uniform sampler2D uImage;
-    uniform vec4 uColor;
-    varying vec2 vTexCoord;
-    varying vec2 vTexCoord2;
-    void main() {
-      vec4 color = texture2D(uTexture, vTexCoord);
-      vec4 color2 = texture2D(uImage, vTexCoord2);
-      color.a = color2.a;
-      gl_FragColor = color;
-    }
-    `,
-} as const;
-
-export const 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);
-    }
-    ` as const;

package/src/filters/shaders/blur.ts

@@ -1,30 +0,0 @@
-export const fragmentSource = `
-    precision highp float;
-    uniform sampler2D uTexture;
-    uniform vec2 uDelta;
-    varying vec2 vTexCoord;
-    const float nSamples = 15.0;
-    vec3 v3offset = vec3(12.9898, 78.233, 151.7182);
-    float random(vec3 scale) {
-      /* use the fragment position for a different seed per-pixel */
-      return fract(sin(dot(gl_FragCoord.xyz, scale)) * 43758.5453);
-    }
-    void main() {
-      vec4 color = vec4(0.0);
-      float totalC = 0.0;
-      float totalA = 0.0;
-      float offset = random(v3offset);
-      for (float t = -nSamples; t <= nSamples; t++) {
-        float percent = (t + offset - 0.5) / nSamples;
-        vec4 sample = texture2D(uTexture, vTexCoord + uDelta * percent);
-        float weight = 1.0 - abs(percent);
-        float alpha = weight * sample.a;
-        color.rgb += sample.rgb * alpha;
-        color.a += alpha;
-        totalA += weight;
-        totalC += alpha;
-      }
-      gl_FragColor.rgb = color.rgb / totalC;
-      gl_FragColor.a = color.a / totalA;
-    }
-  ` as const;

package/src/filters/shaders/brightness.ts

@@ -1,11 +0,0 @@
-export const 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;
-  }
-`;

package/src/filters/shaders/colorMatrix.ts

@@ -1,12 +0,0 @@
-export const 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;
-  }`;

package/src/filters/shaders/constrast.ts

@@ -1,11 +0,0 @@
-export const 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;
-  }`;