fabric 5.3.0 → 6.0.0-beta1

package/dist/src/filters/BaseFilter.d.ts

@@ -0,0 +1,156 @@
+import type { T2DPipelineState, TWebGLAttributeLocationMap, TWebGLPipelineState, TWebGLProgramCacheItem, TWebGLUniformLocationMap } from './typedefs';
+export type AbstractBaseFilterOptions<T> = {
+    mainParameter: string;
+    vertexSource: string;
+    fragmentSource: T;
+};
+export type BaseFilterOptions = AbstractBaseFilterOptions<string>;
+export interface AnyFilter extends AbstractBaseFilter<string | Record<string, string>> {
+}
+export declare abstract class AbstractBaseFilter<T> {
+    /**
+     * Filter type
+     * @param {String} type
+     * @default
+     */
+    type: string;
+    /**
+     * Array of attributes to send with buffers. do not modify
+     * @private
+     */
+    vertexSource: string;
+    fragmentSource: T;
+    /**
+     * Name of the parameter that can be changed in the filter.
+     * Some filters have more than one parameter and there is no
+     * mainParameter
+     * @private
+     */
+    mainParameter?: keyof this;
+    /**
+     * Constructor
+     * @param {Object} [options] Options object
+     */
+    constructor(options?: Partial<AbstractBaseFilterOptions<T>> & Record<string, any>);
+    abstract getFragmentSource(): string;
+    /**
+     * Compile this filter's shader program.
+     *
+     * @param {WebGLRenderingContext} gl The GL canvas context to use for shader compilation.
+     * @param {String} fragmentSource fragmentShader source for compilation
+     * @param {String} vertexSource vertexShader source for compilation
+     */
+    createProgram(gl: WebGLRenderingContext, fragmentSource?: string, vertexSource?: string): {
+        program: WebGLProgram;
+        attributeLocations: TWebGLAttributeLocationMap;
+        uniformLocations: TWebGLUniformLocationMap;
+    };
+    /**
+     * Return a map of attribute names to WebGLAttributeLocation objects.
+     *
+     * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program.
+     * @param {WebGLShaderProgram} program The shader program from which to take attribute locations.
+     * @returns {Object} A map of attribute names to attribute locations.
+     */
+    getAttributeLocations(gl: WebGLRenderingContext, program: WebGLProgram): TWebGLAttributeLocationMap;
+    /**
+     * Return a map of uniform names to WebGLUniformLocation objects.
+     *
+     * Intended to be overridden by subclasses.
+     *
+     * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program.
+     * @param {WebGLShaderProgram} program The shader program from which to take uniform locations.
+     * @returns {Object} A map of uniform names to uniform locations.
+     */
+    abstract getUniformLocations(gl: WebGLRenderingContext, program: WebGLProgram): TWebGLUniformLocationMap;
+    /**
+     * Send attribute data from this filter to its shader program on the GPU.
+     *
+     * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program.
+     * @param {Object} attributeLocations A map of shader attribute names to their locations.
+     */
+    sendAttributeData(gl: WebGLRenderingContext, attributeLocations: Record<string, number>, aPositionData: Float32Array): void;
+    _setupFrameBuffer(options: TWebGLPipelineState): void;
+    _swapTextures(options: TWebGLPipelineState): void;
+    /**
+     * Generic isNeutral implementation for one parameter based filters.
+     * Used only in image applyFilters to discard filters that will not have an effect
+     * on the image
+     * Other filters may need their own version ( ColorMatrix, HueRotation, gamma, ComposedFilter )
+     * @param {Object} options
+     **/
+    isNeutralState(options?: any): boolean;
+    /**
+     * Apply this filter to the input image data provided.
+     *
+     * Determines whether to use WebGL or Canvas2D based on the options.webgl flag.
+     *
+     * @param {Object} options
+     * @param {Number} options.passes The number of filters remaining to be executed
+     * @param {Boolean} options.webgl Whether to use webgl to render the filter.
+     * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered.
+     * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn.
+     * @param {WebGLRenderingContext} options.context The GL context used for rendering.
+     * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type.
+     */
+    applyTo(options: TWebGLPipelineState | T2DPipelineState): void;
+    abstract applyTo2d(options: T2DPipelineState): void;
+    getCacheKey(): string;
+    /**
+     * Retrieves the cached shader.
+     * @param {Object} options
+     * @param {WebGLRenderingContext} options.context The GL context used for rendering.
+     * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type.
+     * @return {WebGLProgram} the compiled program shader
+     */
+    retrieveShader(options: TWebGLPipelineState): TWebGLProgramCacheItem;
+    /**
+     * Apply this filter using webgl.
+     *
+     * @param {Object} options
+     * @param {Number} options.passes The number of filters remaining to be executed
+     * @param {Boolean} options.webgl Whether to use webgl to render the filter.
+     * @param {WebGLTexture} options.originalTexture The texture of the original input image.
+     * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered.
+     * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn.
+     * @param {WebGLRenderingContext} options.context The GL context used for rendering.
+     * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type.
+     */
+    applyToWebGL(options: TWebGLPipelineState): void;
+    bindAdditionalTexture(gl: WebGLRenderingContext, texture: WebGLTexture, textureUnit: number): void;
+    unbindAdditionalTexture(gl: WebGLRenderingContext, textureUnit: number): void;
+    getMainParameter(): this[keyof this] | undefined;
+    setMainParameter(value: any): void;
+    /**
+     * Send uniform data from this filter to its shader program on the GPU.
+     *
+     * Intended to be overridden by subclasses.
+     *
+     * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program.
+     * @param {Object} uniformLocations A map of shader uniform names to their locations.
+     */
+    abstract sendUniformData(gl: WebGLRenderingContext, uniformLocations: TWebGLUniformLocationMap): void;
+    /**
+     * If needed by a 2d filter, this functions can create an helper canvas to be used
+     * remember that options.targetCanvas is available for use till end of chain.
+     */
+    createHelpLayer(options: T2DPipelineState): void;
+    /**
+     * Returns object representation of an instance
+     * @return {Object} Object representation of an instance
+     */
+    toObject(): {
+        type: string;
+    };
+    /**
+     * Returns a JSON representation of an instance
+     * @return {Object} JSON
+     */
+    toJSON(): {
+        type: string;
+    };
+}
+export declare abstract class BaseFilter extends AbstractBaseFilter<string> {
+    getFragmentSource(): string;
+}
+//# sourceMappingURL=BaseFilter.d.ts.map

package/dist/src/filters/BlendColor.d.ts

@@ -0,0 +1,80 @@
+import { TClassProperties } from '../typedefs';
+import { AbstractBaseFilter } from './BaseFilter';
+import { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+/**
+ * Color Blend filter class
+ * @example
+ * const filter = new BlendColor({
+ *  color: '#000',
+ *  mode: 'multiply'
+ * });
+ *
+ * const filter = new BlendImage({
+ *  image: fabricImageObject,
+ *  mode: 'multiply',
+ *  alpha: 0.5
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ * canvas.renderAll();
+ */
+export declare class BlendColor extends AbstractBaseFilter<Record<string, string>> {
+    /**
+     * Color to make the blend operation with. default to a reddish color since black or white
+     * gives always strong result.
+     * @type String
+     * @default
+     **/
+    color: string;
+    mode: 'multiply' | 'add' | 'diff' | 'difference' | 'screen' | 'subtract' | 'darken' | 'lighten' | 'overlay' | 'exclusion' | 'tint';
+    /**
+     * alpha value. represent the strength of the blend color operation.
+     * @type Number
+     * @default
+     **/
+    alpha: number;
+    /**
+     * build the fragment source for the filters, joining the common part with
+     * the specific one.
+     * @param {String} mode the mode of the filter, a key of this.fragmentSource
+     * @return {String} the source to be compiled
+     * @private
+     */
+    buildSource(mode: string): string;
+    getCacheKey(): string;
+    getFragmentSource(): string;
+    /**
+     * Apply the Blend 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): void;
+    /**
+     * 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;
+    /**
+     * 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): void;
+    /**
+     * Returns object representation of an instance
+     * @return {Object} Object representation of an instance
+     */
+    toObject(): {
+        type: string;
+        color: string;
+        mode: "darken" | "difference" | "exclusion" | "lighten" | "multiply" | "overlay" | "screen" | "add" | "diff" | "subtract" | "tint";
+        alpha: number;
+    };
+    static fromObject(object: any): Promise<BlendColor>;
+}
+export declare const blendColorDefaultValues: Partial<TClassProperties<BlendColor>>;
+//# sourceMappingURL=BlendColor.d.ts.map

package/dist/src/filters/BlendImage.d.ts

@@ -0,0 +1,90 @@
+import { Image } from '../shapes/Image';
+import type { TClassProperties } from '../typedefs';
+import { AbstractBaseFilter } from './BaseFilter';
+import type { T2DPipelineState, TWebGLPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { WebGLFilterBackend } from './WebGLFilterBackend';
+/**
+ * Image Blend filter class
+ * @example
+ * const filter = new filters.BlendColor({
+ *  color: '#000',
+ *  mode: 'multiply'
+ * });
+ *
+ * const filter = new BlendImage({
+ *  image: fabricImageObject,
+ *  mode: 'multiply',
+ *  alpha: 0.5
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ * canvas.renderAll();
+ */
+export declare class BlendImage extends AbstractBaseFilter<Record<string, string>> {
+    /**
+     * Color to make the blend operation with. default to a reddish color since black or white
+     * gives always strong result.
+     **/
+    image: Image;
+    mode: 'multiply' | 'mask';
+    /**
+     * alpha value. represent the strength of the blend image operation.
+     * not implemented.
+     **/
+    alpha: number;
+    getCacheKey(): string;
+    getFragmentSource(): string;
+    applyToWebGL(options: TWebGLPipelineState): void;
+    createTexture(backend: WebGLFilterBackend, image: Image): any;
+    /**
+     * Calculate a transformMatrix to adapt the image to blend over
+     * @param {Object} options
+     * @param {WebGLRenderingContext} options.context The GL context used for rendering.
+     * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type.
+     */
+    calculateMatrix(): number[];
+    /**
+     * Apply the Blend 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 }, filterBackend: { resources }, }: T2DPipelineState): void;
+    /**
+     * 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;
+    /**
+     * 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): void;
+    /**
+     * Returns object representation of an instance
+     * @return {Object} Object representation of an instance
+     */
+    toObject(): {
+        type: string;
+        image: Record<string, any>;
+        mode: "multiply" | "mask";
+        alpha: number;
+    };
+    /**
+     * Create filter instance from an object representation
+     * @static
+     * @param {object} object Object to create an instance from
+     * @param {object} [options]
+     * @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(object: Record<string, any>, options: {
+        signal: AbortSignal;
+    }): Promise<BlendImage>;
+}
+export declare const blendImageDefaultValues: Partial<TClassProperties<BlendImage>>;
+//# sourceMappingURL=BlendImage.d.ts.map

package/dist/src/filters/Blur.d.ts

@@ -0,0 +1,50 @@
+import type { TClassProperties } from '../typedefs';
+import { BaseFilter } from './BaseFilter';
+import type { TWebGLPipelineState, T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+/**
+ * Blur filter class
+ * @example
+ * const filter = new Blur({
+ *   blur: 0.5
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ * canvas.renderAll();
+ */
+export declare class Blur extends BaseFilter {
+    /**
+     * blur value, in percentage of image dimensions.
+     * specific to keep the image blur constant at different resolutions
+     * range between 0 and 1.
+     * @type Number
+     * @default
+     */
+    blur: number;
+    horizontal: boolean;
+    aspectRatio: number;
+    applyTo(options: TWebGLPipelineState | T2DPipelineState): void;
+    applyTo2d(options: T2DPipelineState): void;
+    simpleBlur({ ctx, imageData, filterBackend: { resources }, }: T2DPipelineState): ImageData;
+    /**
+     * 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;
+    /**
+     * 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): void;
+    /**
+     * choose right value of image percentage to blur with
+     * @returns {Array} a numeric array with delta values
+     */
+    chooseRightDelta(): number[];
+    static fromObject(object: any): Promise<Blur>;
+}
+export declare const blurDefaultValues: Partial<TClassProperties<Blur>>;
+//# sourceMappingURL=Blur.d.ts.map

package/dist/src/filters/Boilerplate.d.ts

@@ -0,0 +1,46 @@
+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 declare 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
+     */
+    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): void;
+    /**
+     * 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;
+    /**
+     * 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): void;
+    static fromObject(object: any): Promise<MyFilter>;
+}
+export declare const myFilterDefaultValues: Partial<TClassProperties<MyFilter>>;
+//# sourceMappingURL=Boilerplate.d.ts.map

package/dist/src/filters/Brightness.d.ts

@@ -0,0 +1,46 @@
+import type { TClassProperties } from '../typedefs';
+import { BaseFilter } from './BaseFilter';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+/**
+ * Brightness filter class
+ * @example
+ * const filter = new Brightness({
+ *   brightness: 0.05
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ */
+export declare 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
+     */
+    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): void;
+    /**
+     * 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;
+    /**
+     * 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): void;
+    static fromObject(object: any): Promise<Brightness>;
+}
+export declare const brightnessDefaultValues: Partial<TClassProperties<Brightness>>;
+//# sourceMappingURL=Brightness.d.ts.map

package/dist/src/filters/Canvas2dFilterBackend.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Canvas 2D filter backend.
+ */
+import type { BaseFilter } from './BaseFilter';
+import { T2DPipelineState, TPipelineResources } from './typedefs';
+export declare 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;
+}
+//# sourceMappingURL=Canvas2dFilterBackend.d.ts.map

package/dist/src/filters/ColorMatrix.d.ts

@@ -0,0 +1,62 @@
+import type { TClassProperties } from '../typedefs';
+import { BaseFilter } from './BaseFilter';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+/**
+   * 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 declare 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
+     */
+    matrix: number[];
+    /**
+     * Lock the colormatrix on the color part, skipping alpha, mainly for non webgl scenario
+     * to save some calculation
+     * @type Boolean
+     * @default true
+     */
+    colorsOnly: boolean;
+    setOptions({ matrix, ...options }: Record<string, any>): void;
+    /**
+     * 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): void;
+    /**
+     * 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;
+    /**
+     * 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): void;
+    static fromObject(object: any): Promise<ColorMatrix>;
+}
+export declare const colorMatrixDefaultValues: Partial<TClassProperties<ColorMatrix>>;
+//# sourceMappingURL=ColorMatrix.d.ts.map