fabric 5.3.0 → 6.0.0-beta1

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

@@ -0,0 +1,47 @@
+import type { TClassProperties } from '../typedefs';
+import { BaseFilter } from './BaseFilter';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+/**
+ * Saturate filter class
+ * @example
+ * const filter = new Saturation({
+ *   saturation: 1
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ */
+export declare class Saturation extends BaseFilter {
+    /**
+     * Saturation value, from -1 to 1.
+     * Increases/decreases the color saturation.
+     * A value of 0 has no effect.
+     *
+     * @param {Number} saturation
+     * @default
+     */
+    saturation: number;
+    /**
+     * Apply the Saturation 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<Saturation>;
+}
+export declare const saturationDefaultValues: Partial<TClassProperties<Saturation>>;
+//# sourceMappingURL=Saturation.d.ts.map

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

@@ -0,0 +1,47 @@
+import type { TClassProperties } from '../typedefs';
+import { BaseFilter } from './BaseFilter';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+/**
+ * Vibrance filter class
+ * @example
+ * const filter = new Vibrance({
+ *   vibrance: 1
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ */
+export declare class Vibrance extends BaseFilter {
+    /**
+     * Vibrance value, from -1 to 1.
+     * Increases/decreases the saturation of more muted colors with less effect on saturated colors.
+     * A value of 0 has no effect.
+     *
+     * @param {Number} vibrance
+     * @default
+     */
+    vibrance: number;
+    /**
+     * Apply the Vibrance 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<Vibrance>;
+}
+export declare const vibranceDefaultValues: Partial<TClassProperties<Vibrance>>;
+//# sourceMappingURL=Vibrance.d.ts.map

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

@@ -0,0 +1,126 @@
+import { TWebGLPipelineState, TProgramCache, TTextureCache, TPipelineResources } from './typedefs';
+export declare class WebGLFilterBackend {
+    tileSize: number;
+    /**
+     * Define ...
+     **/
+    aPosition: Float32Array;
+    /**
+     * If GLPut data is the fastest operation, or if forced, this buffer will be used
+     * to transfer the data back in the 2d logic
+     **/
+    imageBuffer?: ArrayBuffer;
+    canvas: HTMLCanvasElement;
+    /**
+     * The Webgl context that will execute the operations for filtering
+     **/
+    gl: WebGLRenderingContext;
+    /**
+     * Keyed map for shader cache
+     **/
+    programCache: TProgramCache;
+    /**
+     * Keyed map for texture cache
+     **/
+    textureCache: TTextureCache;
+    /**
+     * Contains GPU info for debug
+     **/
+    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 }?: {
+        tileSize?: number | undefined;
+    });
+    /**
+     * Setup a WebGL context suitable for filtering, and bind any needed event handlers.
+     */
+    setupGLContext(width: number, height: number): void;
+    /**
+     * Pick a method to copy data from GL context to 2d canvas.  In some browsers using
+     * drawImage should be faster, but is also bugged for a small combination of old hardware
+     * and drivers.
+     * putImageData is faster than drawImage for that specific operation.
+     */
+    chooseFastestCopyGLTo2DMethod(width: number, height: number): void;
+    /**
+     * Create a canvas element and associated WebGL context and attaches them as
+     * class properties to the GLFilterBackend class.
+     */
+    createWebGLCanvas(width: number, height: number): void;
+    /**
+     * 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: any[], source: TexImageSource, width: number, height: number, targetCanvas: HTMLCanvasElement, cacheKey?: string): TWebGLPipelineState | undefined;
+    /**
+     * Detach event listeners, remove references, and clean up caches.
+     */
+    dispose(): void;
+    /**
+     * Wipe out WebGL-related caches.
+     */
+    clearWebGLCaches(): void;
+    /**
+     * 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 {HTMLImageElement|HTMLCanvasElement} textureImageSource A source for the texture data.
+     * @returns {WebGLTexture}
+     */
+    createTexture(gl: WebGLRenderingContext, width: number, height: number, textureImageSource?: TexImageSource): WebGLTexture | null;
+    /**
+     * 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): any;
+    /**
+     * 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): void;
+    /**
+     * 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): void;
+    /**
+     * 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(): any;
+}
+//# sourceMappingURL=WebGLFilterBackend.d.ts.map

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

@@ -0,0 +1,28 @@
+export declare enum WebGLPrecision {
+    low = "lowp",
+    medium = "mediump",
+    high = "highp"
+}
+/**
+ * Lazy initialize WebGL constants
+ */
+declare class WebGLProbe {
+    maxTextureSize?: number;
+    webGLPrecision: WebGLPrecision | undefined;
+    /**
+     * Tests if webgl supports certain precision
+     * @param {WebGL} Canvas WebGL context to test on
+     * @param {WebGLPrecision} Precision to test can be any of following
+     * @returns {Boolean} Whether the user's browser WebGL supports given precision.
+     */
+    private testPrecision;
+    /**
+     * query browser for WebGL
+     * @returns config object if true
+     */
+    queryWebGL(): void;
+    isSupported(textureSize: number): boolean | 0 | undefined;
+}
+export declare const webGLProbe: WebGLProbe;
+export {};
+//# sourceMappingURL=WebGLProbe.d.ts.map

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

@@ -0,0 +1,49 @@
+import type { WebGLFilterBackend } from './WebGLFilterBackend';
+import type { Canvas2dFilterBackend } from './Canvas2dFilterBackend';
+export type TProgramCache = any;
+export type TTextureCache = any;
+export type TPipelineResources = {
+    blendImage?: HTMLCanvasElement;
+    blurLayer1?: HTMLCanvasElement;
+    blurLayer2?: HTMLCanvasElement;
+} & Record<string, unknown>;
+export type TWebGLPipelineState = {
+    filterBackend: WebGLFilterBackend;
+    originalWidth: number;
+    originalHeight: number;
+    sourceWidth: number;
+    sourceHeight: number;
+    destinationWidth: number;
+    destinationHeight: number;
+    context: WebGLRenderingContext;
+    sourceTexture: WebGLTexture | null;
+    targetTexture: WebGLTexture | null;
+    originalTexture: WebGLTexture;
+    passes: number;
+    webgl: boolean;
+    aPosition: Float32Array;
+    programCache: TProgramCache;
+    pass: number;
+    targetCanvas: HTMLCanvasElement;
+};
+export type T2DPipelineState = {
+    sourceWidth: number;
+    sourceHeight: number;
+    filterBackend: Canvas2dFilterBackend;
+    canvasEl: HTMLCanvasElement;
+    imageData: ImageData;
+    originalEl: CanvasImageSource;
+    originalImageData?: ImageData;
+    ctx: CanvasRenderingContext2D;
+    helpLayer?: HTMLCanvasElement;
+};
+export type TWebGLUniformLocationMap = Record<string, WebGLUniformLocation | null>;
+export type TWebGLAttributeLocationMap = Record<string, number>;
+export type TWebGLProgramCacheItem = {
+    program: WebGLProgram;
+    attributeLocations: TWebGLAttributeLocationMap;
+    uniformLocations: TWebGLUniformLocationMap;
+};
+export type TApplyFilterArgs = {};
+export declare const isWebGLPipelineState: (options: TWebGLPipelineState | T2DPipelineState) => options is TWebGLPipelineState;
+//# sourceMappingURL=typedefs.d.ts.map

package/dist/src/gradient/Gradient.d.ts

@@ -0,0 +1,149 @@
+import type { FabricObject } from '../shapes/Object/FabricObject';
+import { TMat2D } from '../typedefs';
+import { ColorStop, GradientCoords, GradientOptions, GradientType, GradientUnits, SVGOptions } from './typedefs';
+/**
+ * Gradient class
+ * @class Gradient
+ * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#gradients}
+ */
+export declare class Gradient<S, T extends GradientType = S extends GradientType ? S : 'linear'> {
+    /**
+     * Horizontal offset for aligning gradients coming from SVG when outside pathgroups
+     * @type Number
+     * @default 0
+     */
+    offsetX: number;
+    /**
+     * Vertical offset for aligning gradients coming from SVG when outside pathgroups
+     * @type Number
+     * @default 0
+     */
+    offsetY: number;
+    /**
+     * A transform matrix to apply to the gradient before painting.
+     * Imported from svg gradients, is not applied with the current transform in the center.
+     * Before this transform is applied, the origin point is at the top left corner of the object
+     * plus the addition of offsetY and offsetX.
+     * @type Number[]
+     * @default null
+     */
+    gradientTransform: TMat2D | null;
+    /**
+     * coordinates units for coords.
+     * If `pixels`, the number of coords are in the same unit of width / height.
+     * If set as `percentage` the coords are still a number, but 1 means 100% of width
+     * for the X and 100% of the height for the y. It can be bigger than 1 and negative.
+     * allowed values pixels or percentage.
+     * @type GradientUnits
+     * @default 'pixels'
+     */
+    gradientUnits: GradientUnits;
+    /**
+     * Gradient type linear or radial
+     * @type GradientType
+     * @default 'linear'
+     */
+    type: T;
+    /**
+     * Defines how the gradient is located in space and spread
+     * @type GradientCoords
+     */
+    coords: GradientCoords<T>;
+    /**
+     * Defines how many colors a gradient has and how they are located on the axis
+     * defined by coords
+     * @type GradientCoords
+     */
+    colorStops: ColorStop[];
+    /**
+     * If true, this object will not be exported during the serialization of a canvas
+     * @type boolean
+     */
+    excludeFromExport?: boolean;
+    /**
+     * ID used for SVG export functionalities
+     * @type number | string
+     */
+    readonly id: string | number;
+    constructor({ type, gradientUnits, coords, colorStops, offsetX, offsetY, gradientTransform, id, }: GradientOptions<T>);
+    /**
+     * Adds another colorStop
+     * @param {Record<string, string>} colorStop Object with offset and color
+     * @return {Gradient} thisArg
+     */
+    addColorStop(colorStops: Record<string, string>): this;
+    /**
+     * Returns object representation of a gradient
+     * @param {string[]} [propertiesToInclude] Any properties that you might want to additionally include in the output
+     * @return {object}
+     */
+    toObject(propertiesToInclude?: (keyof this | string)[]): Partial<this> & {
+        type: T;
+        coords: GradientCoords<T>;
+        colorStops: ColorStop[];
+        offsetX: number;
+        offsetY: number;
+        gradientUnits: GradientUnits;
+        gradientTransform: number[] | null;
+    };
+    /**
+     * Returns SVG representation of an gradient
+     * @param {FabricObject} object Object to create a gradient for
+     * @return {String} SVG representation of an gradient (linear/radial)
+     */
+    toSVG(object: FabricObject, { additionalTransform: preTransform }?: {
+        additionalTransform?: string;
+    }): string;
+    /**
+     * Returns an instance of CanvasGradient
+     * @param {CanvasRenderingContext2D} ctx Context to render on
+     * @return {CanvasGradient}
+     */
+    toLive(ctx: CanvasRenderingContext2D): CanvasGradient;
+    /**
+     * Returns {@link Gradient} instance from an SVG element
+     * @static
+     * @memberOf Gradient
+     * @param {SVGGradientElement} el SVG gradient element
+     * @param {FabricObject} instance
+     * @param {String} opacity A fill-opacity or stroke-opacity attribute to multiply to each stop's opacity.
+     * @param {SVGOptions} svgOptions an object containing the size of the SVG in order to parse correctly gradients
+     * that uses gradientUnits as 'userSpaceOnUse' and percentages.
+     * @return {Gradient} Gradient instance
+     * @see http://www.w3.org/TR/SVG/pservers.html#LinearGradientElement
+     * @see http://www.w3.org/TR/SVG/pservers.html#RadialGradientElement
+     *
+     *  @example
+     *
+     *  <linearGradient id="linearGrad1">
+     *    <stop offset="0%" stop-color="white"/>
+     *    <stop offset="100%" stop-color="black"/>
+     *  </linearGradient>
+     *
+     *  OR
+     *
+     *  <linearGradient id="linearGrad2">
+     *    <stop offset="0" style="stop-color:rgb(255,255,255)"/>
+     *    <stop offset="1" style="stop-color:rgb(0,0,0)"/>
+     *  </linearGradient>
+     *
+     *  OR
+     *
+     *  <radialGradient id="radialGrad1">
+     *    <stop offset="0%" stop-color="white" stop-opacity="1" />
+     *    <stop offset="50%" stop-color="black" stop-opacity="0.5" />
+     *    <stop offset="100%" stop-color="white" stop-opacity="1" />
+     *  </radialGradient>
+     *
+     *  OR
+     *
+     *  <radialGradient id="radialGrad2">
+     *    <stop offset="0" stop-color="rgb(255,255,255)" />
+     *    <stop offset="0.5" stop-color="rgb(0,0,0)" />
+     *    <stop offset="1" stop-color="rgb(255,255,255)" />
+     *  </radialGradient>
+     *
+     */
+    static fromElement(el: SVGGradientElement, instance: FabricObject, svgOptions: SVGOptions): Gradient<GradientType>;
+}
+//# sourceMappingURL=Gradient.d.ts.map

package/dist/src/gradient/constants.d.ts

@@ -0,0 +1,15 @@
+export declare const linearDefaultCoords: {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+};
+export declare const radialDefaultCoords: {
+    r1: number;
+    r2: number;
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+};
+//# sourceMappingURL=constants.d.ts.map

package/dist/src/gradient/parser/index.d.ts

@@ -0,0 +1,4 @@
+export * from './misc';
+export * from './parseColorStops';
+export * from './parseCoords';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/gradient/parser/misc.d.ts

@@ -0,0 +1,4 @@
+import { GradientType, GradientUnits } from '../typedefs';
+export declare function parseType(el: SVGGradientElement): GradientType;
+export declare function parseGradientUnits(el: SVGGradientElement): GradientUnits;
+//# sourceMappingURL=misc.d.ts.map

package/dist/src/gradient/parser/parseColorStops.d.ts

@@ -0,0 +1,6 @@
+export declare function parseColorStops(el: SVGGradientElement, opacityAttr: string | null): {
+    offset: number;
+    color: string;
+    opacity: number;
+}[];
+//# sourceMappingURL=parseColorStops.d.ts.map

package/dist/src/gradient/parser/parseCoords.d.ts

@@ -0,0 +1,17 @@
+import { TSize } from '../../typedefs';
+export declare function parseLinearCoords(el: SVGGradientElement): {
+    x1: string | number;
+    y1: string | number;
+    x2: string;
+    y2: string | number;
+};
+export declare function parseRadialCoords(el: SVGGradientElement): {
+    x1: string;
+    y1: string;
+    r1: number;
+    x2: string;
+    y2: string;
+    r2: string;
+};
+export declare function parseCoords(el: SVGGradientElement, size: TSize): Record<"x1" | "y1" | "x2" | "y2", number>;
+//# sourceMappingURL=parseCoords.d.ts.map

package/dist/src/gradient/typedefs.d.ts

@@ -0,0 +1,93 @@
+import { Percent, TMat2D } from '../typedefs';
+export type GradientUnits = 'pixels' | 'percentage';
+export type GradientType = 'linear' | 'radial';
+export type GradientCoordValue = number | Percent | string;
+export type ColorStop = {
+    color: string;
+    offset: number;
+    opacity?: number;
+};
+export type LinearGradientCoords<T extends GradientCoordValue> = {
+    /**
+     * X coordiante of the first point
+     */
+    x1: T;
+    /**
+     * Y coordiante of the first point
+     */
+    y1: T;
+    /**
+     * X coordiante of the second point
+     */
+    x2: T;
+    /**
+     * Y coordiante of the second point
+     */
+    y2: T;
+};
+export type RadialGradientCoords<T extends GradientCoordValue> = {
+    /**
+     * X coordiante of the first focal point
+     */
+    x1: T;
+    /**
+     * Y coordiante of the first focal point
+     */
+    y1: T;
+    /**
+     * X coordiante of the second focal point
+     */
+    x2: T;
+    /**
+     * Y coordiante of the second focal point
+     */
+    y2: T;
+    /**
+     * radius of the inner circle
+     */
+    r1: T;
+    /**
+     * radius of the outer circle
+     */
+    r2: T;
+};
+export type GradientCoords<T extends GradientType> = T extends 'linear' ? LinearGradientCoords<number> : RadialGradientCoords<number>;
+export type GradientOptions<T extends GradientType> = {
+    type?: T;
+    gradientUnits?: GradientUnits;
+    colorStops?: ColorStop[];
+    coords: Partial<GradientCoords<T>>;
+    /**
+     * @todo rename?
+     */
+    gradientTransform?: TMat2D;
+    id?: string;
+    /**
+     * SVG import compatibility
+     */
+    offsetX?: number;
+    /**
+     * SVG import compatibility
+     */
+    offsetY?: number;
+};
+export type SVGOptions = {
+    /**
+     * width part of the viewBox attribute on svg
+     */
+    viewBoxWidth: number;
+    /**
+     * height part of the viewBox attribute on svg
+     */
+    viewBoxHeight: number;
+    /**
+     * width part of the svg tag if viewBox is not specified
+     */
+    width: number;
+    /**
+     * height part of the svg tag if viewBox is not specified
+     */
+    height: number;
+    opacity: string | null;
+};
+//# sourceMappingURL=typedefs.d.ts.map

package/dist/src/mixins/eraser_brush.mixin.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=eraser_brush.mixin.d.ts.map

package/dist/src/mixins/stateful.mixin.d.ts

@@ -0,0 +1,18 @@
+export declare class StatefulMixin {
+    /**
+     * Returns true if object state (one of its state properties) was changed
+     * @param {String} [propertySet] optional name for the set of property we want to save
+     * @return {Boolean} true if instance' state has changed since `{@link fabric.Object#saveState}` was called
+     */
+    private hasStateChanged;
+    private saveProps;
+    /**
+     * Saves state of an object
+     * @param {Object} [options] Object with additional `stateProperties` array to include when saving state
+     * @param {string[]} [options.stateProperties] Object with additional `stateProperties` array to include when saving state
+     * @param {string} [options.propertySet] name for the property set to save
+     * @return {fabric.Object} thisArg
+     */
+    private saveState;
+}
+//# sourceMappingURL=stateful.mixin.d.ts.map

package/dist/src/parkinglot/canvas_animation.mixin.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=canvas_animation.mixin.d.ts.map

package/dist/src/parkinglot/straighten.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=straighten.d.ts.map

package/dist/src/parser/applyViewboxTransform.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Add a <g> element that envelop all child elements and makes the viewbox transformMatrix descend on all elements
+ */
+export declare function applyViewboxTransform(element: any): {};
+//# sourceMappingURL=applyViewboxTransform.d.ts.map

package/dist/src/parser/attributes.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Attributes parsed from all SVG elements
+ * @type array
+ */
+export declare const SHARED_ATTRIBUTES: string[];
+//# sourceMappingURL=attributes.d.ts.map