fabric 5.3.0 → 6.0.0-beta1

package/dist/src/shapes/IText/ITextKeyBehavior.d.ts

@@ -0,0 +1,193 @@
+import { TPointerEvent } from '../../EventTypeDefs';
+import { ITextBehavior, ITextEvents } from './ITextBehavior';
+import type { TKeyMapIText } from './constants';
+export declare abstract class ITextKeyBehavior<EventSpec extends ITextEvents = ITextEvents> extends ITextBehavior<EventSpec> {
+    /**
+     * For functionalities on keyDown
+     * Map a special key to a function of the instance/prototype
+     * If you need different behavior for ESC or TAB or arrows, you have to change
+     * this map setting the name of a function that you build on the IText or
+     * your prototype.
+     * the map change will affect all Instances unless you need for only some text Instances
+     * in that case you have to clone this object and assign your Instance.
+     * this.keysMap = Object.assign({}, this.keysMap);
+     * The function must be in IText.prototype.myFunction And will receive event as args[0]
+     */
+    keysMap: TKeyMapIText;
+    keysMapRtl: TKeyMapIText;
+    /**
+     * For functionalities on keyUp + ctrl || cmd
+     */
+    ctrlKeysMapUp: TKeyMapIText;
+    /**
+     * For functionalities on keyDown + ctrl || cmd
+     */
+    ctrlKeysMapDown: TKeyMapIText;
+    hiddenTextarea: HTMLTextAreaElement | null;
+    /**
+     * DOM container to append the hiddenTextarea.
+     * An alternative to attaching to the document.body.
+     * Useful to reduce laggish redraw of the full document.body tree and
+     * also with modals event capturing that won't let the textarea take focus.
+     * @type HTMLElement
+     * @default
+     */
+    hiddenTextareaContainer?: HTMLElement | null;
+    private _clickHandlerInitialized;
+    private _copyDone;
+    private fromPaste;
+    /**
+     * Initializes hidden textarea (needed to bring up keyboard in iOS)
+     */
+    initHiddenTextarea(): void;
+    onClick(): void;
+    /**
+     * Override this method to customize cursor behavior on textbox blur
+     */
+    blur(): void;
+    /**
+     * Handles keydown event
+     * only used for arrows and combination of modifier keys.
+     * @param {KeyboardEvent} e Event object
+     */
+    onKeyDown(e: KeyboardEvent): void;
+    /**
+     * Handles keyup event
+     * We handle KeyUp because ie11 and edge have difficulties copy/pasting
+     * if a copy/cut event fired, keyup is dismissed
+     * @param {KeyboardEvent} e Event object
+     */
+    onKeyUp(e: KeyboardEvent): void;
+    /**
+     * Handles onInput event
+     * @param {Event} e Event object
+     */
+    onInput(e: Event): void;
+    /**
+     * Composition start
+     */
+    onCompositionStart(): void;
+    /**
+     * Composition end
+     */
+    onCompositionEnd(): void;
+    onCompositionUpdate(e: any): void;
+    /**
+     * Copies selected text
+     */
+    copy(): void;
+    /**
+     * Pastes text
+     */
+    paste(): void;
+    /**
+     * Finds the width in pixels before the cursor on the same line
+     * @private
+     * @param {Number} lineIndex
+     * @param {Number} charIndex
+     * @return {Number} widthBeforeCursor width before cursor
+     */
+    _getWidthBeforeCursor(lineIndex: number, charIndex: number): number;
+    /**
+     * Gets start offset of a selection
+     * @param {TPointerEvent} e Event object
+     * @param {Boolean} isRight
+     * @return {Number}
+     */
+    getDownCursorOffset(e: KeyboardEvent, isRight: boolean): number;
+    /**
+     * private
+     * Helps finding if the offset should be counted from Start or End
+     * @param {KeyboardEvent} e Event object
+     * @param {Boolean} isRight
+     * @return {Number}
+     */
+    _getSelectionForOffset(e: KeyboardEvent, isRight: boolean): number;
+    /**
+     * @param {KeyboardEvent} e Event object
+     * @param {Boolean} isRight
+     * @return {Number}
+     */
+    getUpCursorOffset(e: KeyboardEvent, isRight: boolean): number;
+    /**
+     * for a given width it founds the matching character.
+     * @private
+     */
+    _getIndexOnLine(lineIndex: number, width: number): number;
+    /**
+     * Moves cursor down
+     * @param {TPointerEvent} e Event object
+     */
+    moveCursorDown(e: TPointerEvent): void;
+    /**
+     * Moves cursor up
+     * @param {TPointerEvent} e Event object
+     */
+    moveCursorUp(e: TPointerEvent): void;
+    /**
+     * Moves cursor up or down, fires the events
+     * @param {String} direction 'Up' or 'Down'
+     * @param {TPointerEvent} e Event object
+     */
+    _moveCursorUpOrDown(direction: 'Up' | 'Down', e: TPointerEvent): void;
+    /**
+     * Moves cursor with shift
+     * @param {Number} offset
+     */
+    moveCursorWithShift(offset: number): boolean;
+    /**
+     * Moves cursor up without shift
+     * @param {Number} offset
+     */
+    moveCursorWithoutShift(offset: number): boolean;
+    /**
+     * Moves cursor left
+     * @param {TPointerEvent} e Event object
+     */
+    moveCursorLeft(e: TPointerEvent): void;
+    /**
+     * @private
+     * @return {Boolean} true if a change happened
+     */
+    _move(e: any, prop: any, direction: any): boolean;
+    /**
+     * @private
+     */
+    _moveLeft(e: any, prop: any): boolean;
+    /**
+     * @private
+     */
+    _moveRight(e: any, prop: any): boolean;
+    /**
+     * Moves cursor left without keeping selection
+     * @param {TPointerEvent} e
+     */
+    moveCursorLeftWithoutShift(e: TPointerEvent): boolean;
+    /**
+     * Moves cursor left while keeping selection
+     * @param {TPointerEvent} e
+     */
+    moveCursorLeftWithShift(e: TPointerEvent): boolean | undefined;
+    /**
+     * Moves cursor right
+     * @param {TPointerEvent} e Event object
+     */
+    moveCursorRight(e: TPointerEvent): void;
+    /**
+     * Moves cursor right or Left, fires event
+     * @param {String} direction 'Left', 'Right'
+     * @param {TPointerEvent} e Event object
+     */
+    _moveCursorLeftOrRight(direction: string, e: TPointerEvent): void;
+    /**
+     * Moves cursor right while keeping selection
+     * @param {TPointerEvent} e
+     */
+    moveCursorRightWithShift(e: TPointerEvent): boolean | undefined;
+    /**
+     * Moves cursor right without keeping selection
+     * @param {TPointerEvent} e Event object
+     */
+    moveCursorRightWithoutShift(e: TPointerEvent): boolean;
+}
+//# sourceMappingURL=ITextKeyBehavior.d.ts.map

package/dist/src/shapes/IText/constants.d.ts

@@ -0,0 +1,13 @@
+import type { IText } from './IText';
+export type TKeyMapIText = Record<KeyboardEvent['keyCode'], keyof IText>;
+export declare const keysMap: TKeyMapIText;
+export declare const keysMapRtl: TKeyMapIText;
+/**
+ * For functionalities on keyUp + ctrl || cmd
+ */
+export declare const ctrlKeysMapUp: TKeyMapIText;
+/**
+ * For functionalities on keyDown + ctrl || cmd
+ */
+export declare const ctrlKeysMapDown: TKeyMapIText;
+//# sourceMappingURL=constants.d.ts.map

package/dist/src/shapes/Image.d.ts

@@ -0,0 +1,283 @@
+import type { BaseFilter } from '../filters/BaseFilter';
+import { TClassProperties, TSize } from '../typedefs';
+import { LoadImageOptions } from '../util/misc/objectEnlive';
+import { FabricObject } from './Object/FabricObject';
+export type ImageSource = HTMLImageElement | HTMLVideoElement | HTMLCanvasElement;
+/**
+ * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#images}
+ */
+export declare class Image extends FabricObject {
+    /**
+     * When calling {@link Image.getSrc}, return value from element src with `element.getAttribute('src')`.
+     * This allows for relative urls as image src.
+     * @since 2.7.0
+     * @type Boolean
+     * @default false
+     */
+    srcFromAttribute: boolean;
+    /**
+     * private
+     * contains last value of scaleX to detect
+     * if the Image got resized after the last Render
+     * @type Number
+     */
+    protected _lastScaleX: number;
+    /**
+     * private
+     * contains last value of scaleY to detect
+     * if the Image got resized after the last Render
+     * @type Number
+     */
+    protected _lastScaleY: number;
+    /**
+     * private
+     * contains last value of scaling applied by the apply filter chain
+     * @type Number
+     */
+    protected _filterScalingX: number;
+    /**
+     * private
+     * contains last value of scaling applied by the apply filter chain
+     * @type Number
+     */
+    protected _filterScalingY: number;
+    /**
+     * minimum scale factor under which any resizeFilter is triggered to resize the image
+     * 0 will disable the automatic resize. 1 will trigger automatically always.
+     * number bigger than 1 are not implemented yet.
+     * @type Number
+     */
+    minimumScaleTrigger: number;
+    /**
+     * key used to retrieve the texture representing this image
+     * @since 2.0.0
+     * @type String
+     * @default
+     */
+    cacheKey: string;
+    /**
+     * Image crop in pixels from original image size.
+     * @since 2.0.0
+     * @type Number
+     * @default
+     */
+    cropX: number;
+    /**
+     * Image crop in pixels from original image size.
+     * @since 2.0.0
+     * @type Number
+     * @default
+     */
+    cropY: number;
+    /**
+     * Indicates whether this canvas will use image smoothing when painting this image.
+     * Also influence if the cacheCanvas for this image uses imageSmoothing
+     * @since 4.0.0-beta.11
+     * @type Boolean
+     * @default
+     */
+    imageSmoothing: boolean;
+    preserveAspectRatio: string;
+    protected src: string;
+    filters: BaseFilter[];
+    resizeFilter: BaseFilter;
+    protected _element: ImageSource;
+    protected _originalElement: ImageSource;
+    protected _filteredEl: ImageSource;
+    /**
+     * Constructor
+     * Image can be initialized with any canvas drawable or a string.
+     * The string should be a url and will be loaded as an image.
+     * Canvas and Image element work out of the box, while videos require extra code to work.
+     * Please check video element events for seeking.
+     * @param {ImageSource | string} element Image element
+     * @param {Object} [options] Options object
+     */
+    constructor(elementId: string, options?: any);
+    constructor(element: ImageSource, options?: any);
+    /**
+     * Returns image element which this instance if based on
+     */
+    getElement(): ImageSource;
+    /**
+     * Sets image element for this instance to a specified one.
+     * If filters defined they are applied to new image.
+     * You might need to call `canvas.renderAll` and `object.setCoords` after replacing, to render new image and update controls area.
+     * @param {HTMLImageElement} element
+     * @param {Partial<TSize>} [size] Options object
+     */
+    setElement(element: ImageSource, size?: Partial<TSize>): void;
+    /**
+     * Delete a single texture if in webgl mode
+     */
+    removeTexture(key: string): void;
+    /**
+     * Delete textures, reference to elements and eventually JSDOM cleanup
+     */
+    dispose(): void;
+    /**
+     * Get the crossOrigin value (of the corresponding image element)
+     */
+    getCrossOrigin(): any;
+    /**
+     * Returns original size of an image
+     */
+    getOriginalSize(): {
+        width: any;
+        height: any;
+    };
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
+     */
+    _stroke(ctx: CanvasRenderingContext2D): void;
+    /**
+     * Returns object representation of an instance
+     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
+     * @return {Object} Object representation of an instance
+     */
+    toObject(propertiesToInclude?: (keyof this)[]): Record<string, any>;
+    /**
+     * Returns true if an image has crop applied, inspecting values of cropX,cropY,width,height.
+     * @return {Boolean}
+     */
+    hasCrop(): boolean;
+    /**
+     * Returns svg representation of an instance
+     * @return {string[]} an array of strings with the specific svg representation
+     * of the instance
+     */
+    _toSVG(): string[];
+    /**
+     * Returns source of an image
+     * @param {Boolean} filtered indicates if the src is needed for svg
+     * @return {String} Source of an image
+     */
+    getSrc(filtered?: boolean): any;
+    /**
+     * Alias for getSrc
+     * @param filtered
+     * @deprecated
+     */
+    getSvgSrc(filtered?: boolean): any;
+    /**
+     * Loads and sets source of an image\
+     * **IMPORTANT**: It is recommended to abort loading tasks before calling this method to prevent race conditions and unnecessary networking
+     * @param {String} src Source string (URL)
+     * @param {LoadImageOptions} [options] Options object
+     */
+    setSrc(src: string, { crossOrigin, signal }?: LoadImageOptions): Promise<void>;
+    /**
+     * Returns string representation of an instance
+     * @return {String} String representation of an instance
+     */
+    toString(): string;
+    applyResizeFilters(): void;
+    /**
+     * Applies filters assigned to this image (from "filters" array) or from filter param
+     * @method applyFilters
+     * @param {Array} filters to be applied
+     * @param {Boolean} forResizing specify if the filter operation is a resize operation
+     */
+    applyFilters(filters?: BaseFilter[]): void;
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
+     */
+    _render(ctx: CanvasRenderingContext2D): void;
+    /**
+     * Paint the cached copy of the object on the target context.
+     * it will set the imageSmoothing for the draw operation
+     * @param {CanvasRenderingContext2D} ctx Context to render on
+     */
+    drawCacheOnCanvas(ctx: CanvasRenderingContext2D): void;
+    /**
+     * Decide if the object should cache or not. Create its own cache level
+     * needsItsOwnCache should be used when the object drawing method requires
+     * a cache step. None of the fabric classes requires it.
+     * Generally you do not cache objects in groups because the group outside is cached.
+     * This is the special image version where we would like to avoid caching where possible.
+     * Essentially images do not benefit from caching. They may require caching, and in that
+     * case we do it. Also caching an image usually ends in a loss of details.
+     * A full performance audit should be done.
+     * @return {Boolean}
+     */
+    shouldCache(): boolean;
+    _renderFill(ctx: CanvasRenderingContext2D): void;
+    /**
+     * needed to check if image needs resize
+     * @private
+     */
+    _needsResize(): boolean;
+    /**
+     * @private
+     * @deprecated unused
+     */
+    _resetWidthHeight(): void;
+    /**
+     * @private
+     * Set the width and the height of the image object, using the element or the
+     * options.
+     */
+    _setWidthHeight({ width, height }?: Partial<TSize>): void;
+    /**
+     * Calculate offset for center and scale factor for the image in order to respect
+     * the preserveAspectRatio attribute
+     * @private
+     */
+    parsePreserveAspectRatioAttribute(): {
+        width: number;
+        height: number;
+        scaleX: number;
+        scaleY: number;
+        offsetLeft: number;
+        offsetTop: number;
+        cropX: number;
+        cropY: number;
+    };
+    /**
+     * Default CSS class name for canvas
+     * @static
+     * @type String
+     * @default
+     */
+    static CSS_CANVAS: string;
+    /**
+     * List of attribute names to account for when parsing SVG element (used by {@link Image.fromElement})
+     * @static
+     * @see {@link http://www.w3.org/TR/SVG/struct.html#ImageElement}
+     */
+    static ATTRIBUTE_NAMES: string[];
+    /**
+     * Creates an instance of Image from its object representation
+     * @static
+     * @param {Object} object Object to create an instance from
+     * @param {object} [options] Options object
+     * @param {AbortSignal} [options.signal] handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
+     * @returns {Promise<Image>}
+     */
+    static fromObject({ filters: f, resizeFilter: rf, src, crossOrigin, ...object }: any, options: {
+        signal: AbortSignal;
+    }): Promise<Image>;
+    /**
+     * Creates an instance of Image from an URL string
+     * @static
+     * @param {String} url URL to create an image from
+     * @param {LoadImageOptions} [options] Options object
+     * @returns {Promise<Image>}
+     */
+    static fromURL(url: string, options?: LoadImageOptions): Promise<Image>;
+    /**
+     * Returns {@link Image} instance from an SVG element
+     * @static
+     * @param {SVGElement} element Element to parse
+     * @param {Object} [options] Options object
+     * @param {AbortSignal} [options.signal] handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
+     * @param {Function} callback Callback to execute when Image object is created
+     */
+    static fromElement(element: SVGElement, callback: (image: Image) => any, options?: {
+        signal?: AbortSignal;
+    }): void;
+}
+export declare const imageDefaultValues: Partial<TClassProperties<Image>>;
+//# sourceMappingURL=Image.d.ts.map

package/dist/src/shapes/Line.d.ts

@@ -0,0 +1,117 @@
+import { TClassProperties } from '../typedefs';
+import { FabricObject } from './Object/FabricObject';
+import { Point } from '../Point';
+export declare class Line extends FabricObject {
+    /**
+     * x value or first line edge
+     * @type Number
+     * @default
+     */
+    x1: number;
+    /**
+     * y value or first line edge
+     * @type Number
+     * @default
+     */
+    y1: number;
+    /**
+     * x value or second line edge
+     * @type Number
+     * @default
+     */
+    x2: number;
+    /**
+     * y value or second line edge
+     * @type Number
+     * @default
+     */
+    y2: number;
+    /**
+     * Constructor
+     * @param {Array} [points] Array of points
+     * @param {Object} [options] Options object
+     * @return {Line} thisArg
+     */
+    constructor(points?: number[], options?: Partial<TClassProperties<Line>>);
+    /**
+     * @private
+     * @param {Object} [options] Options
+     */
+    _setWidthHeight({ left, top }?: Partial<TClassProperties<Line>>): void;
+    /**
+     * @private
+     * @param {String} key
+     * @param {*} value
+     */
+    _set(key: string, value: any): this;
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
+     */
+    _render(ctx: CanvasRenderingContext2D): void;
+    /**
+     * This function is an helper for svg import. it returns the center of the object in the svg
+     * untransformed coordinates
+     * @private
+     * @return {Point} center point from element coordinates
+     */
+    _findCenterFromElement(): Point;
+    /**
+     * Returns object representation of an instance
+     * @method toObject
+     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
+     * @return {Object} object representation of an instance
+     */
+    toObject(propertiesToInclude: string[]): {
+        [x: string]: any;
+    };
+    _getNonTransformedDimensions(): Point;
+    /**
+     * Recalculates line points given width and height
+     * @private
+     */
+    calcLinePoints(): Record<string, number>;
+    private makeEdgeToOriginGetter;
+    /**
+     * @private
+     * @return {Number} leftToOriginX Distance from left edge of canvas to originX of Line.
+     */
+    _getLeftToOriginX(): number;
+    /**
+     * @private
+     * @return {Number} leftToOriginX Distance from left edge of canvas to originX of Line.
+     */
+    _getTopToOriginY(): number;
+    /**
+     * Returns svg representation of an instance
+     * @return {Array} an array of strings with the specific svg representation
+     * of the instance
+     */
+    _toSVG(): (string | number)[];
+    /**
+     * List of attribute names to account for when parsing SVG element (used by {@link Line.fromElement})
+     * @static
+     * @memberOf Line
+     * @see http://www.w3.org/TR/SVG/shapes.html#LineElement
+     */
+    static ATTRIBUTE_NAMES: string[];
+    /**
+     * Returns Line instance from an SVG element
+     * @static
+     * @memberOf Line
+     * @param {SVGElement} element Element to parse
+     * @param {Object} [options] Options object
+     * @param {Function} [callback] callback function invoked after parsing
+     */
+    static fromElement(element: SVGElement, callback: (line: Line) => any): void;
+    /**
+     * Returns Line instance from an object representation
+     * @static
+     * @memberOf Line
+     * @param {Object} object Object to create an instance from
+     * @returns {Promise<Line>}
+     */
+    static fromObject({ x1, y1, x2, y2, ...object }: Record<string, any>): Promise<import("./Object/Object").FabricObject<import("../EventTypeDefs").ObjectEvents>>;
+}
+export declare const lineDefaultValues: Partial<TClassProperties<Line>>;
+//# sourceMappingURL=Line.d.ts.map

package/dist/src/shapes/Object/AnimatableObject.d.ts

@@ -0,0 +1,33 @@
+import { TColorArg } from '../../color/Color';
+import { ObjectEvents } from '../../EventTypeDefs';
+import { TAnimation } from '../../util/animation/animate';
+import type { AnimationOptions } from '../../util/animation/types';
+import { StackedObject } from './StackedObject';
+export declare abstract class AnimatableObject<EventSpec extends ObjectEvents = ObjectEvents> extends StackedObject<EventSpec> {
+    /**
+     * List of properties to consider for animating colors.
+     * @type String[]
+     */
+    colorProperties: string[];
+    /**
+     * Animates object's properties
+     * @param {Record<string, number | number[] | TColorArg>} animatable map of keys and end values
+     * @param {Partial<AnimationOptions<T>>} options
+     * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#animation}
+     * @return {Record<string, TAnimation<T>>} map of animation contexts
+     *
+     * As object — multiple properties
+     *
+     * object.animate({ left: ..., top: ... });
+     * object.animate({ left: ..., top: ... }, { duration: ... });
+     */
+    animate<T extends number | number[] | TColorArg>(animatable: Record<string, T>, options?: Partial<AnimationOptions<T>>): Record<string, TAnimation<T>>;
+    /**
+     * @private
+     * @param {String} key Property to animate
+     * @param {String} to Value to animate to
+     * @param {Object} [options] Options object
+     */
+    _animate<T extends number | number[] | TColorArg>(key: string, endValue: T, options?: Partial<AnimationOptions<T>>): TAnimation<T>;
+}
+//# sourceMappingURL=AnimatableObject.d.ts.map

package/dist/src/shapes/Object/FabricObject.d.ts

@@ -0,0 +1,9 @@
+import { ObjectEvents } from '../../EventTypeDefs';
+import { FabricObjectSVGExportMixin } from './FabricObjectSVGExportMixin';
+import { InteractiveFabricObject } from './InteractiveObject';
+export interface FabricObject<EventSpec extends ObjectEvents = ObjectEvents> extends FabricObjectSVGExportMixin {
+}
+export declare class FabricObject<EventSpec extends ObjectEvents = ObjectEvents> extends InteractiveFabricObject<EventSpec> {
+}
+export { cacheProperties, stateProperties } from './defaultValues';
+//# sourceMappingURL=FabricObject.d.ts.map