From 4b83beec687241113a92de87ef38aec80f1be50e Mon Sep 17 00:00:00 2001 From: Bryan Krol Date: Mon, 18 Feb 2019 18:09:07 -0500 Subject: [PATCH 01/16] Started updating type defs. Currently up to Path --- types/fabric/fabric-impl.d.ts | 1714 +++++++++++++++++++++++---------- 1 file changed, 1194 insertions(+), 520 deletions(-) diff --git a/types/fabric/fabric-impl.d.ts b/types/fabric/fabric-impl.d.ts index 5cc59d0941..10b487180f 100644 --- a/types/fabric/fabric-impl.d.ts +++ b/types/fabric/fabric-impl.d.ts @@ -103,7 +103,7 @@ export function log(...values: any[]): void; export function warn(...values: any[]): void; /////////////////////////////////////////////////////////////////////////////// -// Data Object Interfaces - These intrface are not specific part of fabric, +// Data Object Interfaces - These interface are not specific part of fabric, // They are just helpful for for defining function parameters ////////////////////////////////////////////////////////////////////////////// interface IDataURLOptions { @@ -135,6 +135,9 @@ interface IDataURLOptions { * Cropping height. Introduced in v1.2.14 */ height?: number; + enableRetinaScaling?: boolean; + withoutTransform?: boolean; + withoutShadow?: boolean; } interface IEvent { @@ -175,6 +178,14 @@ interface IToSVGOptions { * Encoding of SVG output */ encoding: string; + /** + * desired width of svg with or without units + */ + width: number; + /** + * desired height of svg with or without units + */ + height: number; } interface IViewBox { @@ -611,32 +622,44 @@ interface IPatternOptions { */ offsetY: number; /** - * The source for the pattern + * crossOrigin value (one of "", "anonymous", "use-credentials") + * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes + * @type String + * @default */ - source: string | HTMLImageElement; - /** - * Transform matrix to change the pattern, imported from svgs - */ - patternTransform?: number[]; + crossOrigin: '' | 'anonymous' | 'use-credentials'; + /** + * Transform matrix to change the pattern, imported from svgs + */ + patternTransform?: number[]; } export interface Pattern extends IPatternOptions { } export class Pattern { constructor(options?: IPatternOptions); initialise(options?: IPatternOptions): Pattern; - /** - * Returns an instance of CanvasPattern - */ - toLive(ctx: CanvasRenderingContext2D): Pattern; /** * Returns object representation of a pattern + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} Object representation of a pattern instance */ - toObject(): any; + toObject: any; + /** * Returns SVG representation of a pattern + * @param {fabric.Object} object + * @return {String} SVG representation of a pattern */ toSVG(object: Object): string; + + /** + * Returns an instance of CanvasPattern + * @param {CanvasRenderingContext2D} ctx Context to create pattern + * @return {CanvasPattern} + */ + toLive(ctx: CanvasRenderingContext2D): CanvasPattern; + } export class Point { @@ -647,152 +670,222 @@ export class Point { /** * Adds another point to this one and returns another one + * @param {fabric.Point} that + * @return {fabric.Point} new Point instance with added values */ add(that: Point): Point; /** * Adds another point to this one + * @param {fabric.Point} that + * @return {fabric.Point} thisArg + * @chainable */ addEquals(that: Point): Point; /** * Adds value to this point and returns a new one + * @param {Number} scalar + * @return {fabric.Point} new Point with added value */ scalarAdd(scalar: number): Point; /** * Adds value to this point + * @param {Number} scalar + * @return {fabric.Point} thisArg + * @chainable */ scalarAddEquals(scalar: number): Point; /** * Subtracts another point from this point and returns a new one + * @param {fabric.Point} that + * @return {fabric.Point} new Point object with subtracted values */ subtract(that: Point): Point; /** * Subtracts another point from this point + * @param {fabric.Point} that + * @return {fabric.Point} thisArg + * @chainable */ subtractEquals(that: Point): Point; /** * Subtracts value from this point and returns a new one + * @param {Number} scalar + * @return {fabric.Point} */ scalarSubtract(scalar: number): Point; /** * Subtracts value from this point + * @param {Number} scalar + * @return {fabric.Point} thisArg + * @chainable */ scalarSubtractEquals(scalar: number): Point; /** - * Miltiplies this point by a value and returns a new one + * Multiplies this point by a value and returns a new one + * @param {Number} scalar + * @return {fabric.Point} */ multiply(scalar: number): Point; /** - * Miltiplies this point by a value + * Multiplies this point by a value + * @param {Number} scalar + * @return {fabric.Point} thisArg + * @chainable */ multiplyEquals(scalar: number): Point; /** * Divides this point by a value and returns a new one + * @param {Number} scalar + * @return {fabric.Point} */ divide(scalar: number): Point; /** * Divides this point by a value + * @param {Number} scalar + * @return {fabric.Point} thisArg + * @chainable */ divideEquals(scalar: number): Point; /** * Returns true if this point is equal to another one + * @param {fabric.Point} that + * @return {Boolean} */ eq(that: Point): Point; /** * Returns true if this point is less than another one + * @param {fabric.Point} that + * @return {Boolean} */ lt(that: Point): Point; /** * Returns true if this point is less than or equal to another one + * @param {fabric.Point} that + * @return {Boolean} */ lte(that: Point): Point; /** * Returns true if this point is greater another one + * @param {fabric.Point} that + * @return {Boolean} */ gt(that: Point): Point; /** * Returns true if this point is greater than or equal to another one + * @param {fabric.Point} that + * @return {Boolean} */ gte(that: Point): Point; /** * Returns new point which is the result of linear interpolation with this one and another one + * @param {fabric.Point} that + * @param {Number} t , position of interpolation, between 0 and 1 default 0.5 + * @return {fabric.Point} */ lerp(that: Point, t: number): Point; /** * Returns distance from this point and another one + * @param {fabric.Point} that + * @return {Number} */ distanceFrom(that: Point): number; /** * Returns the point between this point and another one + * @param {fabric.Point} that + * @return {fabric.Point} */ midPointFrom(that: Point): Point; /** * Returns a new point which is the min of this and another one + * @param {fabric.Point} that + * @return {fabric.Point} */ min(that: Point): Point; /** * Returns a new point which is the max of this and another one + * @param {fabric.Point} that + * @return {fabric.Point} */ max(that: Point): Point; /** * Returns string representation of this point + * @return {String} */ toString(): string; /** * Sets x/y of this point + * @param {Number} x + * @param {Number} y + * @chainable */ setXY(x: number, y: number): Point; + /** + * Sets x of this point + * @param {Number} x + * @chainable + */ + setX(x: number): Point; + + /** + * Sets y of this point + * @param {Number} y + * @chainable + */ + setY(y: number): Point; + /** * Sets x/y of this point from another point + * @param {fabric.Point} that + * @chainable */ setFromPoint(that: Point): Point; /** * Swaps x/y of this point and another point + * @param {fabric.Point} that */ swap(that: Point): Point; + + /** + * return a cloned instance of the point + * @return {fabric.Point} + */ + clone(): Point; } interface IShadowOptions { - /** - * Whether the shadow should affect stroke operations - */ - affectStrike: boolean; - /** - * Shadow blur - */ - blur: number; /** * Shadow color */ color: string; /** - * Indicates whether toObject should include default values + * Shadow blur */ - includeDefaultValues: boolean; + blur: number; /** * Shadow horizontal offset */ @@ -801,29 +894,42 @@ interface IShadowOptions { * Shadow vertical offset */ offsetY: number; + /** + * Whether the shadow should affect stroke operations + */ + affectStrike: boolean; + /** + * Indicates whether toObject should include default values + */ + includeDefaultValues: boolean; } export interface Shadow extends IShadowOptions { } export class Shadow { - constructor(options?: IShadowOptions); + constructor(options?: IShadowOptions| string); initialize(options?: IShadowOptions | string): Shadow; /** * Returns object representation of a shadow + * @return {Object} Object representation of a shadow instance */ toObject(): any; /** - * Returns a string representation of an instance, CSS3 text-shadow declaration + * Returns a string representation of an instance + * @see http://www.w3.org/TR/css-text-decor-3/#text-shadow + * @return {String} Returns CSS3 text-shadow declaration */ toString(): string; /** * Returns SVG representation of a shadow + * @param {fabric.Object} object + * @return {String} SVG representation of a shadow */ toSVG(object: Object): string; - /** - * Regex matching shadow offsetX, offsetY and blur, Static + * Regex matching shadow offsetX, offsetY and blur (ex: "2px 2px 10px rgba(0,0,0,0.2)", "rgb(0,255,0) 2px 2px") + * @static + * @field + * @memberOf fabric.Shadow */ - reOffsetsAndBlur: RegExp; - static reOffsetsAndBlur: RegExp; } @@ -852,162 +958,238 @@ interface ICanvasDimensionsOptions { } interface IStaticCanvasOptions { - /** - * Indicates whether the browser can be scrolled when using a touchscreen and dragging on the canvas - */ - allowTouchScrolling?: boolean; - - /** - * When true, canvas is scaled by devicePixelRatio for better rendering on retina screens - */ - enableRetinaScaling?: boolean; - - /** - * Indicates whether this canvas will use image smoothing, this is on by default in browsers - */ - imageSmoothingEnabled?: boolean; - - /** - * Indicates whether objects should remain in current stack position when selected. - * When false objects are brought to top and rendered as part of the selection group - */ - preserveObjectStacking?: boolean; - - /** - * The transformation (in the format of Canvas transform) which focuses the viewport - */ - viewportTransform?: number[]; - - freeDrawingColor?: string; - freeDrawingLineWidth?: number; - /** * Background color of canvas instance. - * Should be set via setBackgroundColor + * Should be set via {@link fabric.StaticCanvas#setBackgroundColor}. + * @type {(String|fabric.Pattern)} */ backgroundColor?: string | Pattern; /** * Background image of canvas instance. - * Should be set via setBackgroundImage - * Backwards incompatibility note: The "backgroundImageOpacity" and "backgroundImageStretch" properties are deprecated since 1.3.9. + * Should be set via {@link fabric.StaticCanvas#setBackgroundImage}. + * Backwards incompatibility note: The "backgroundImageOpacity" + * and "backgroundImageStretch" properties are deprecated since 1.3.9. + * Use {@link fabric.Image#opacity}, {@link fabric.Image#width} and {@link fabric.Image#height}. + * since 2.4.0 image caching is active, please when putting an image as background, add to the + * canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom + * vale. As an alternative you can disable image objectCaching + * @type fabric.Image */ - backgroundImage?: Image | string; - backgroundImageOpacity?: number; - backgroundImageStretch?: number; - /** - * Function that determines clipping of entire canvas area - * Being passed context as first argument. See clipping canvas area - */ - clipTo?(context: CanvasRenderingContext2D): void; - - /** - * Indicates whether object controls (borders/controls) are rendered above overlay image - */ - controlsAboveOverlay?: boolean; - - /** - * Indicates whether toObject/toDatalessObject should include default values - */ - includeDefaultValues?: boolean; + backgroundImage?: Image; /** * Overlay color of canvas instance. - * Should be set via setOverlayColor + * Should be set via {@link fabric.StaticCanvas#setOverlayColor} + * @since 1.3.9 + * @type {(String|fabric.Pattern)} */ overlayColor?: string | Pattern; /** * Overlay image of canvas instance. - * Should be set via setOverlayImage - * Backwards incompatibility note: The "overlayImageLeft" and "overlayImageTop" properties are deprecated since 1.3.9. + * Should be set via {@link fabric.StaticCanvas#setOverlayImage}. + * Backwards incompatibility note: The "overlayImageLeft" + * and "overlayImageTop" properties are deprecated since 1.3.9. + * Use {@link fabric.Image#left} and {@link fabric.Image#top}. + * since 2.4.0 image caching is active, please when putting an image as overlay, add to the + * canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom + * vale. As an alternative you can disable image objectCaching + * @type fabric.Image */ overlayImage?: Image; - overlayImageLeft?: number; - overlayImageTop?: number; /** - * Indicates whether add, insertAt and remove should also re-render canvas. - * Disabling this option could give a great performance boost when adding/removing a lot of objects to/from canvas at once - * (followed by a manual rendering after addition/deletion) + * Indicates whether toObject/toDatalessObject should include default values + * if set to false, takes precedence over the object value. + * @type Boolean + */ + includeDefaultValues?: boolean; + /** + * Indicates whether objects' state should be saved + * @type Boolean + */ + stateful?: boolean; + /** + * Indicates whether {@link fabric.Collection.add}, {@link fabric.Collection.insertAt} and {@link fabric.Collection.remove}, + * {@link fabric.StaticCanvas.moveTo}, {@link fabric.StaticCanvas.clear} and many more, should also re-render canvas. + * Disabling this option will not give a performance boost when adding/removing a lot of objects to/from canvas at once + * since the renders are quequed and executed one per frame. + * Disabling is suggested anyway and managing the renders of the app manually is not a big effort ( canvas.requestRenderAll() ) + * Left default to true to do not break documentation and old app, fiddles. + * @type Boolean */ renderOnAddRemove?: boolean; /** - * Indicates whether objects' state should be saved + * Function that determines clipping of entire canvas area + * Being passed context as first argument. + * If you are using code minification, ctx argument can be minified/manglied you should use + * as a workaround `var ctx = arguments[0];` in the function; + * See clipping canvas area in {@link https://github.com/kangax/fabric.js/wiki/FAQ} + * @deprecated since 2.0.0 + * @type Function */ - stateful?: boolean; + clipTo?(context: CanvasRenderingContext2D): void; + /** + * Indicates whether object controls (borders/controls) are rendered above overlay image + * @type Boolean + */ + controlsAboveOverlay?: boolean; + /** + * Indicates whether the browser can be scrolled when using a touchscreen and dragging on the canvas + * @type Boolean + */ + allowTouchScrolling?: boolean; + /** + * Indicates whether this canvas will use image smoothing, this is on by default in browsers + */ + imageSmoothingEnabled?: boolean; + /** + * The transformation (in the format of Canvas transform) which focuses the viewport + */ + viewportTransform?: number[]; + /** + * if set to false background image is not affected by viewport transform + * @since 1.6.3 + * @type Boolean + */ + backgroundVpt?: boolean; + /** + * if set to false overlay image is not affected by viewport transform + * @since 1.6.3 + * @type Boolean + */ + overlayVpt?: boolean; + /** + * When true, canvas is scaled by devicePixelRatio for better rendering on retina screens + * @type Boolean + */ + enableRetinaScaling?: boolean; + /** + * Describe canvas element extension over design + * properties are tl,tr,bl,br. + * if canvas is not zoomed/panned those points are the four corner of canvas + * if canvas is viewportTransformed you those points indicate the extension + * of canvas element in plain untrasformed coordinates + * The coordinates get updated with @method calcViewportBoundaries. + * @memberOf fabric.StaticCanvas.prototype + */ + vptCoords?: {tl: number, tr: number, bl: number, br: number} + /** + * Based on vptCoords and object.aCoords, skip rendering of objects that + * are not included in current viewport. + * May greatly help in applications with crowded canvas and use of zoom/pan + * If One of the corner of the bounding box of the object is on the canvas + * the objects get rendered. + * @memberOf fabric.StaticCanvas.prototype + * @type Boolean + */ + skipOffscreen?: boolean; + /** + * a fabricObject that, without stroke define a clipping area with their shape. filled in black + * the clipPath object gets used when the canvas has rendered, and the context is placed in the + * top left corner of the canvas. + * clipPath will clip away controls, if you do not want this to happen use controlsAboveOverlay = true + * @type fabric.Object + */ + clipPath?: Object; + /** + * When true, getSvgTransform() will apply the StaticCanvas.viewportTransform to the SVG transformation. When true, + * a zoomed canvas will then produce zoomed SVG output. + * @type Boolean + */ + svgViewportTransformation: boolean; } export interface StaticCanvas extends IObservable, IStaticCanvasOptions, ICollection, ICanvasAnimation { } export class StaticCanvas { /** * Constructor - * @param element element to initialize instance on - * @param [options] Options object + * @param {HTMLElement | String} el element to initialize instance on + * @param {Object} [options] Options object + * @return {Object} thisArg */ constructor(element: HTMLCanvasElement | string, options?: ICanvasOptions); /** * Calculates canvas element offset relative to the document * This method is also attached as "resize" event handler of window + * @return {fabric.Canvas} instance + * @chainable */ - calcOffset(): this; + calcOffset(): StaticCanvas; /** * Sets {@link fabric.StaticCanvas#overlayImage|overlay image} for this canvas - * @param image fabric.Image instance or URL of an image to set overlay to - * @param callback callback to invoke when image is loaded and set as an overlay - * @param [options] Optional options to set for the {@link fabric.Image|overlay image}. + * @param {(fabric.Image|String)} image fabric.Image instance or URL of an image to set overlay to + * @param {Function} callback callback to invoke when image is loaded and set as an overlay + * @param {Object} [options] Optional options to set for the {@link fabric.Image|overlay image}. + * @return {fabric.Canvas} thisArg + * @chainable */ - setOverlayImage(image: Image | string, callback: (img: HTMLImageElement) => void, options?: IImageOptions): this; + setOverlayImage(image: Image | string, callback: (img: HTMLImageElement | undefined) => void, options?: IImageOptions): StaticCanvas; /** * Sets {@link fabric.StaticCanvas#backgroundImage|background image} for this canvas - * @param image fabric.Image instance or URL of an image to set background to - * @param callback Callback to invoke when image is loaded and set as background - * @param [options] Optional options to set for the {@link fabric.Image|background image}. + * @param {(fabric.Image|String)} image fabric.Image instance or URL of an image to set background to + * @param {Function} callback Callback to invoke when image is loaded and set as background + * @param {Object} [options] Optional options to set for the {@link fabric.Image|background image}. + * @return {fabric.Canvas} thisArg + * @chainable */ - setBackgroundImage(image: Image | string, callback?: (img: HTMLImageElement) => void, options?: IImageOptions): this; + setBackgroundImage(image: Image | string, callback?: Function, options?: IImageOptions): StaticCanvas; /** - * Sets {@link fabric.StaticCanvas#overlayColor|background color} for this canvas - * @param overlayColor Color or pattern to set background color to - * @param callback Callback to invoke when background color is set + * Sets {@link fabric.StaticCanvas#overlayColor|foreground color} for this canvas + * @param {(String|fabric.Pattern)} overlayColor Color or pattern to set foreground color to + * @param {Function} callback Callback to invoke when foreground color is set + * @return {fabric.Canvas} thisArg + * @chainable */ - setOverlayColor(overlayColor: string | Pattern, callback: (pattern: Pattern | undefined) => void): this; + setOverlayColor(overlayColor: string | Pattern, callback: (pattern: Pattern | undefined) => void): StaticCanvas; /** * Sets {@link fabric.StaticCanvas#backgroundColor|background color} for this canvas - * @param backgroundColor Color or pattern to set background color to - * @param callback Callback to invoke when background color is set + * @param {(String|fabric.Pattern)} backgroundColor Color or pattern to set background color to + * @param {Function} callback Callback to invoke when background color is set + * @return {fabric.Canvas} thisArg + * @chainable */ setBackgroundColor(backgroundColor: string | Pattern, callback: (pattern: Pattern | undefined) => void): StaticCanvas; /** * Returns canvas width (in px) + * @return {Number} */ getWidth(): number; /** * Returns canvas height (in px) + * @return {Number} */ getHeight(): number; /** * Sets width of this canvas instance - * @param value Value to set width to - * @param [options] Options object + * @param {Number|String} value Value to set width to + * @param {Object} [options] Options object + * @return {fabric.Canvas} instance + * @chainable true */ - setWidth(value: number | string, options?: ICanvasDimensionsOptions): this; + setWidth(value: number | string, options?: ICanvasDimensionsOptions): StaticCanvas; /** * Sets height of this canvas instance * @param value Value to set height to * @param [options] Options object + * @return {fabric.Canvas} instance + * @chainable true */ - setHeight(value: number | string, options?: ICanvasDimensionsOptions): this; + setHeight(value: number | string, options?: ICanvasDimensionsOptions): StaticCanvas; /** * Sets dimensions (width, height) of this canvas instance. when options.cssOnly flag active you should also supply the unit of measure (px/%/em) * @param dimensions Object with width/height properties * @param [options] Options object + * @return {fabric.Canvas} thisArg + * @chainable */ - setDimensions(dimensions: ICanvasDimensions, options?: ICanvasDimensionsOptions): this; + setDimensions(dimensions: ICanvasDimensions, options?: ICanvasDimensionsOptions): StaticCanvas; /** * Returns canvas zoom level @@ -1016,191 +1198,297 @@ export class StaticCanvas { /** * Sets viewport transform of this canvas instance - * @param vpt the transform in the form of context.transform + * @param {Array} vpt the transform in the form of context.transform + * @return {fabric.Canvas} instance + * @chainable */ - setViewportTransform(vpt: number[]): this; + setViewportTransform(vpt: number[]): StaticCanvas; /** * Sets zoom level of this canvas instance, zoom centered around point - * @param point to zoom with respect to - * @param value to set zoom to, less than 1 zooms out + * @param {fabric.Point} point to zoom with respect to + * @param {Number} value to set zoom to, less than 1 zooms out + * @return {fabric.Canvas} instance + * @chainable true */ - zoomToPoint(point: Point, value: number): this; + zoomToPoint(point: Point, value: number): StaticCanvas; /** * Sets zoom level of this canvas instance - * @param value to set zoom to, less than 1 zooms out + * @param {Number} value to set zoom to, less than 1 zooms out + * @return {fabric.Canvas} instance + * @chainable */ - setZoom(value: number): this; + setZoom(value: number): StaticCanvas; /** * Pan viewport so as to place point at top left corner of canvas - * @param point to move to + * @param {fabric.Point} point to move to + * @return {fabric.Canvas} instance + * @chainable */ - absolutePan(point: Point): this; + absolutePan(point: Point): StaticCanvas; /** * Pans viewpoint relatively - * @param point (position vector) to move by + * @param {fabric.Point} point (position vector) to move by + * @return {fabric.Canvas} instance + * @chainable */ - relativePan(point: Point): this; + relativePan(point: Point): StaticCanvas; /** * Returns element corresponding to this instance + * @return {HTMLCanvasElement} */ getElement(): HTMLCanvasElement; - /** - * Returns currently selected object, if any - */ - getActiveObject(): Object; - - /** - * Returns currently selected group of object, if any - */ - getActiveGroup(): Group; - /** * Clears specified context of canvas element * @param ctx Context to clear * @chainable */ - clearContext(ctx: CanvasRenderingContext2D): this; + clearContext(ctx: CanvasRenderingContext2D): StaticCanvas; /** * Returns context of canvas where objects are drawn + * @return {CanvasRenderingContext2D} */ getContext(): CanvasRenderingContext2D; /** * Clears all contexts (background, main, top) of an instance - */ - clear(): this; - - /** - * Renders both the top canvas and the secondary container canvas. - * @param [allOnTop] Whether we want to force all images to be rendered on the top canvas + * @return {fabric.Canvas} thisArg * @chainable */ - renderAll(allOnTop?: boolean): this; + clear(): StaticCanvas; /** - * Append a renderAll request to next animation frame. a boolean flag will avoid appending more. + * Renders the canvas + * @return {fabric.Canvas} instance * @chainable */ - requestRenderAll(): this; + renderAll(): StaticCanvas; /** - * Method to render only the top canvas. - * Also used to render the group selection box. + * Function created to be instance bound at initialization + * used in requestAnimationFrame rendering + * Let the fabricJS call it. If you call it manually you could have more + * animationFrame stacking on to of each other + * for an imperative rendering, use canvas.renderAll + * @private + * @return {fabric.Canvas} instance * @chainable */ - renderTop(): StaticCanvas; + renderAndReset(): StaticCanvas; + + /** + * Append a renderAll request to next animation frame. + * unless one is already in progress, in that case nothing is done + * a boolean flag will avoid appending more. + * @return {fabric.Canvas} instance + * @chainable + */ + requestRenderAll(): StaticCanvas; + + /** + * Calculate the position of the 4 corner of canvas with current viewportTransform. + * helps to determinate when an object is in the current rendering viewport using + * object absolute coordinates ( aCoords ) + * @return {Object} points.tl + * @chainable + */ + calcViewportBoundaries(): StaticCanvas; + + cancelRequestedRender(): void; + + /** + * Renders background, objects, overlay and controls. + * @param {CanvasRenderingContext2D} ctx + * @param {Array} objects to render + * @return {fabric.Canvas} instance + * @chainable + */ + renderCanvas(ctx: CanvasRenderingContext2D, objects: Object[] ): StaticCanvas; + + /** + * Paint the cached clipPath on the lowerCanvasEl + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + drawClipPathOnCanvas(ctx: CanvasRenderingContext2D): void; /** * Returns coordinates of a center of canvas. * Returned value is an object with top and left properties + * @return {Object} object with "top" and "left" number values */ getCenter(): { top: number; left: number; }; - /** - * Centers object horizontally. - * You might need to call `setCoords` on an object after centering, to update controls area. - * @param object Object to center horizontally - */ - centerObjectH(object: Object): this; /** - * Centers object vertically. - * You might need to call `setCoords` on an object after centering, to update controls area. - * @param object Object to center vertically + * Centers object horizontally in the canvas + * @param {fabric.Object} object Object to center horizontally + * @return {fabric.Canvas} thisArg */ - centerObjectV(object: Object): this; + centerObjectH(object: Object): StaticCanvas; /** - * Centers object vertically and horizontally. - * You might need to call `setCoords` on an object after centering, to update controls area. - * @param object Object to center vertically and horizontally + * Centers object vertically in the canvas + * @param {fabric.Object} object Object to center vertically + * @return {fabric.Canvas} thisArg + * @chainable */ - centerObject(object: Object): this; + centerObjectV(object: Object): StaticCanvas; + + /** + * Centers object vertically and horizontally in the canvas + * @param {fabric.Object} object Object to center vertically and horizontally + * @return {fabric.Canvas} thisArg + * @chainable + */ + centerObject(object: Object): StaticCanvas; + + /** + * Centers object vertically and horizontally in the viewport + * @param {fabric.Object} object Object to center vertically and horizontally + * @return {fabric.Canvas} thisArg + * @chainable + */ + viewportCenterObject(object: Object): StaticCanvas; + + /** + * Centers object horizontally in the viewport, object.top is unchanged + * @param {fabric.Object} object Object to center vertically and horizontally + * @return {fabric.Canvas} thisArg + * @chainable + */ + viewportCenterObjectH(object: Object): StaticCanvas; + + /** + * Centers object Vertically in the viewport, object.top is unchanged + * @param {fabric.Object} object Object to center vertically and horizontally + * @return {fabric.Canvas} thisArg + * @chainable + */ + viewportCenterObjectV(object: Object): StaticCanvas; + + /** + * Calculate the point in canvas that correspond to the center of actual viewport. + * @return {fabric.Point} vpCenter, viewport center + */ + getVpCenter(): Point; /** * Returs dataless JSON representation of canvas - * @param [propertiesToInclude] Any properties that you might want to additionally include in the output + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {String} json string */ toDatalessJSON(propertiesToInclude?: string[]): string; /** * Returns object representation of canvas - * @param [propertiesToInclude] Any properties that you might want to additionally include in the output + * @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[]): any; /** * Returns dataless object representation of canvas - * @param [propertiesToInclude] Any properties that you might want to additionally include in the output + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance */ toDatalessObject(propertiesToInclude?: string[]): any; - /** - * When true, getSvgTransform() will apply the StaticCanvas.viewportTransform to the SVG transformation. When true, - * a zoomed canvas will then produce zoomed SVG output. - */ - svgViewportTransformation: boolean; - /** * Returns SVG representation of canvas * @param [options] Options object for SVG output * @param [reviver] Method for further parsing of svg elements, called after each fabric object converted into svg representation. + * @return {String} SVG string */ toSVG(options: IToSVGOptions, reviver?: Function): string; /** - * Moves an object to the bottom of the stack of drawn objects - * @param object Object to send to back + * Moves an object or the objects of a multiple selection + * to the bottom of the stack of drawn objects + * @param {fabric.Object} object Object to send to back + * @return {fabric.Canvas} thisArg * @chainable */ - sendToBack(object: Object): this; + sendToBack(object: Object): StaticCanvas; /** - * Moves an object to the top of the stack of drawn objects - * @param object Object to send + * Moves an object or the objects of a multiple selection + * to the top of the stack of drawn objects + * @param {fabric.Object} object Object to send + * @return {fabric.Canvas} thisArg * @chainable */ - bringToFront(object: Object): this; + bringToFront(object: Object): StaticCanvas; /** - * Moves an object down in stack of drawn objects - * @param object Object to send - * @param [intersecting] If `true`, send object behind next lower intersecting object + * Moves an object or a selection down in stack of drawn objects + * An optional paramter, intersecting allowes to move the object in behind + * the first intersecting object. Where intersection is calculated with + * bounding box. If no intersection is found, there will not be change in the + * stack. + * @param {fabric.Object} object Object to send + * @param {Boolean} [intersecting] If `true`, send object behind next lower intersecting object + * @return {fabric.Canvas} thisArg * @chainable */ - sendBackwards(object: Object): this; + sendBackwards(object: Object, intersecting?: boolean): StaticCanvas; /** - * Moves an object up in stack of drawn objects - * @param object Object to send - * @param [intersecting] If `true`, send object in front of next upper intersecting object + * Moves an object or a selection up in stack of drawn objects + * An optional paramter, intersecting allowes to move the object in front + * of the first intersecting object. Where intersection is calculated with + * bounding box. If no intersection is found, there will not be change in the + * stack. + * @param {fabric.Object} object Object to send + * @param {Boolean} [intersecting] If `true`, send object in front of next upper intersecting object + * @return {fabric.Canvas} thisArg * @chainable */ - bringForward(object: Object): this; + bringForward(object: Object, intersecting?: boolean): StaticCanvas; + /** * Moves an object to specified level in stack of drawn objects - * @param object Object to send - * @param index Position to move to + * @param {fabric.Object} object Object to send + * @param {Number} index Position to move to + * @return {fabric.Canvas} thisArg * @chainable */ - moveTo(object: Object, index: number): this; + moveTo(object: Object, index: number): StaticCanvas; /** - * Clears a canvas element and removes all event listeners - */ - dispose(): this; + * Clears a canvas element and dispose objects + * @return {fabric.Canvas} thisArg + * @chainable */ + dispose(): StaticCanvas; /** * Returns a string representation of an instance + * @return {String} string representation of an instance */ toString(): string; + /** + * @static + * @type String + * @default + */ + static EMPTY_JSON: string; + + /** + * Provides a way to check support of some of the canvas methods + * (either those of HTMLCanvasElement itself, or rendering context) + * + * @param {String} methodName Method to check support for; + * Could be one of "setLineDash" + * @return {Boolean | null} `true` if method is supported (or at least exists), + * `null` if canvas element or context can not be initialized + */ + supports(methodName: "getImageData" | "toDataURL" | "toDataURLWithQuality" | "setLineDash"): boolean; + /** * Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately * @param [options] Options object @@ -1208,29 +1496,17 @@ export class StaticCanvas { toDataURL(options?: IDataURLOptions): string; /** - * Provides a way to check support of some of the canvas methods - * (either those of HTMLCanvasElement itself, or rendering context) - * @param methodName Method to check support for; Could be one of "getImageData", "toDataURL", "toDataURLWithQuality" or "setLineDash" - * @return `true` if method is supported (or at least exists), null` if canvas element or context can not be initialized + * Returns JSON representation of canvas + * @param [propertiesToInclude] Any properties that you might want to additionally include in the output */ - supports(methodName: "getImageData" | "toDataURL" | "toDataURLWithQuality" | "setLineDash"): boolean; + static toJSON(propertiesToInclude?: string[]): string; - /** - * Populates canvas with data from the specified JSON. - * JSON format must conform to the one of toJSON formats - * @param json JSON string or object - * @param callback Callback, invoked when json is parsed - * and corresponding objects (e.g: {@link fabric.Image}) - * are initialized - * @param [reviver] Method for further parsing of JSON elements, called after each fabric object created. - */ - loadFromJSON(json: string | any, callback: () => void, reviver?: Function): this; /** * Clones canvas instance * @param [callback] Receives cloned instance as a first argument * @param [properties] Array of properties to include in the cloned canvas and children */ - clone(callback: (canvas: StaticCanvas) => void, properties?: string[]): void; + clone(callback: Function, properties?: string[]): void; /** * Clones canvas instance without cloning existing data. @@ -1238,48 +1514,26 @@ export class StaticCanvas { * but leaves data empty (so that you can populate it with your own) * @param [callback] Receives cloned instance as a first argument */ - cloneWithoutData(callback: (canvas: StaticCanvas) => void): void; - - /** - * Callback; invoked right before object is about to be scaled/rotated - */ - onBeforeScaleRotate(target: Object): void; - - // Functions from object straighten mixin - // -------------------------------------------------------------------------------------------------------------------------------- - - /** - * Straightens object, then rerenders canvas - * @param object Object to straighten - */ - straightenObject(object: Object): this; - - /** - * Same as straightenObject, but animated - * @param object Object to straighten - */ - fxStraightenObject(object: Object): this; - - static EMPTY_JSON: string; - /** - * Provides a way to check support of some of the canvas methods - * (either those of HTMLCanvasElement itself, or rendering context) - * @param methodName Method to check support for; Could be one of "getImageData", "toDataURL", "toDataURLWithQuality" or "setLineDash" - */ - static supports(methodName: "getImageData" | "toDataURL" | "toDataURLWithQuality" | "setLineDash"): boolean; - /** - * Returns JSON representation of canvas - * @param [propertiesToInclude] Any properties that you might want to additionally include in the output - */ - static toJSON(propertiesToInclude?: string[]): string; + cloneWithoutData(callback: Function): void; } interface ICanvasOptions extends IStaticCanvasOptions { /** * When true, objects can be transformed by one side (unproportionally) + * @type Boolean */ uniScaleTransform?: boolean; + /** + * Indicates which key enable unproportional scaling + * values: 'altKey', 'shiftKey', 'ctrlKey'. + * If `null` or 'none' or any other string that is not a modifier key + * feature is disabled feature disabled. + * @since 1.6.2 + * @type String + */ + uniScaleKey?: string; + /** * When true, objects use center point as the origin of scale transformation. * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). @@ -1292,6 +1546,28 @@ interface ICanvasOptions extends IStaticCanvasOptions { */ centeredRotation?: boolean; + /** + * Indicates which key enable centered Transform + * values: 'altKey', 'shiftKey', 'ctrlKey'. + * If `null` or 'none' or any other string that is not a modifier key + * feature is disabled feature disabled. + * @since 1.6.2 + * @type String + * @default + */ + centeredKey?: string; + + /** + * Indicates which key enable alternate action on corner + * values: 'altKey', 'shiftKey', 'ctrlKey'. + * If `null` or 'none' or any other string that is not a modifier key + * feature is disabled feature disabled. + * @since 1.6.2 + * @type String + * @default + */ + altActionKey?: string; + /** * Indicates that canvas is interactive. This property should not be changed. */ @@ -1302,6 +1578,32 @@ interface ICanvasOptions extends IStaticCanvasOptions { */ selection?: boolean; + /** + * Indicates which key or keys enable multiple click selection + * Pass value as a string or array of strings + * values: 'altKey', 'shiftKey', 'ctrlKey'. + * If `null` or empty or containing any other string that is not a modifier key + * feature is disabled. + * @since 1.6.2 + * @type String|Array + * @default + */ + selectionKey?: string; + + /** + * Indicates which key enable alternative selection + * in case of target overlapping with active object + * values: 'altKey', 'shiftKey', 'ctrlKey'. + * For a series of reason that come from the general expectations on how + * things should work, this feature works only for preserveObjectStacking true. + * If `null` or 'none' or any other string that is not a modifier key + * feature is disabled. + * @since 1.6.5 + * @type null|String + * @default + */ + altSelectionKey?: string; + /** * Color of selection */ @@ -1311,7 +1613,7 @@ interface ICanvasOptions extends IStaticCanvasOptions { * Default dash array pattern * If not empty the selection border is dashed */ - selectionDashArray?: any[]; + selectionDashArray?: number[]; /** * Color of the border of selection (usually slightly darker than color of selection itself) @@ -1323,6 +1625,13 @@ interface ICanvasOptions extends IStaticCanvasOptions { */ selectionLineWidth?: number; + /** + * Select only shapes that are fully contained in the dragged selection rectangle. + * @type Boolean + * @default + */ + selectionFullyContained?: boolean; + /** * Default cursor value used when hovering over an object on canvas */ @@ -1348,6 +1657,14 @@ interface ICanvasOptions extends IStaticCanvasOptions { */ rotationCursor?: string; + /** + * Cursor value used for disabled elements ( corners with disabled action ) + * @type String + * @since 2.0.0 + * @default + */ + notAllowedCursor?: string; + /** * Default element class that's given to wrapper (div) element of canvas */ @@ -1374,6 +1691,54 @@ interface ICanvasOptions extends IStaticCanvasOptions { * and then mouseup finalizes it and adds an instance of `fabric.Path` onto canvas. */ isDrawingMode?: boolean; + + /** + * Indicates whether objects should remain in current stack position when selected. + * When false objects are brought to top and rendered as part of the selection group + * @type Boolean + */ + preserveObjectStacking?: boolean; + + /** + * Indicates the angle that an object will lock to while rotating. + * @type Number + * @since 1.6.7 + */ + snapAngle?: number; + + /** + * Indicates the distance from the snapAngle the rotation will lock to the snapAngle. + * When `null`, the snapThreshold will default to the snapAngle. + * @type null|Number + * @since 1.6.7 + * @default + */ + snapThreshold?: null | number; + + /** + * Indicates if the right click on canvas can output the context menu or not + * @type Boolean + * @since 1.6.5 + * @default + */ + stopContextMenu?: boolean; + + /** + * Indicates if the canvas can fire right click events + * @type Boolean + * @since 1.6.5 + * @default + */ + fireRightClick?: boolean; + + /** + * Indicates if the canvas can fire middle click events + * @type Boolean + * @since 1.7.8 + * @default + */ + fireMiddleClick?: boolean; + } export interface Canvas extends StaticCanvas { } export interface Canvas extends ICanvasOptions { } @@ -1386,106 +1751,129 @@ export class Canvas { constructor(element: HTMLCanvasElement | string, options?: ICanvasOptions); _objects: Object[]; - /** - * Checks if point is contained within an area of given object - * @param e Event object - * @param target Object to test against - */ - containsPoint(e: Event, target: Object): boolean; - /** - * Deactivates all objects on canvas, removing any active group or object - * @return thisArg - */ - deactivateAll(): Canvas; - /** - * Deactivates all objects and dispatches appropriate events - * @param [e] Event (passed along when firing) - * @return thisArg - */ - deactivateAllWithDispatch(e?: Event): Canvas; - /** - * Discards currently active group - * @param [e] Event (passed along when firing) - * @return thisArg - */ - discardActiveGroup(e?: Event): Canvas; - /** - * Discards currently active object - * @param [e] Event (passed along when firing) - * @return thisArg + * Renders both the top canvas and the secondary container canvas. + * @return {fabric.Canvas} instance * @chainable */ - discardActiveObject(e?: Event): Canvas; + renderAll(): Canvas; /** - * Draws objects' controls (borders/controls) - * @param ctx Context to render controls on + * Method to render only the top canvas. + * Also used to render the group selection box. + * @return {fabric.Canvas} thisArg + * @chainable */ - drawControls(ctx: CanvasRenderingContext2D): void; + renderTop(): Canvas; + /** + * Checks if point is contained within an area of given object + * @param {Event} e Event object + * @param {fabric.Object} target Object to test against + * @param {Object} [point] x,y object of point coordinates we want to check. + * @return {Boolean} true if point is contained within an area of given object + */ + containsPoint(e: Event, target: Object, point?: {x: number, y: number}): boolean; + /** + * Returns true if object is transparent at a certain location + * @param {fabric.Object} target Object to check + * @param {Number} x Left coordinate + * @param {Number} y Top coordinate + * @return {Boolean} + */ + isTargetTransparent(target: Object, x: number, y: number): boolean; + /** + * Set the cursor type of the canvas element + * @param {String} value Cursor type of the canvas element. + * @see http://www.w3.org/TR/css3-ui/#cursor + */ + setCursor(value: string): void; /** * Method that determines what object we are clicking on - * @param e mouse event - * @param skipGroup when true, group is skipped and only objects are traversed through + * the skipGroup parameter is for internal use, is needed for shift+click action + * @param {Event} e mouse event + * @param {Boolean} skipGroup when true, activeGroup is skipped and only objects are traversed through + * @return {fabric.Object} the target found */ - findTarget(e: MouseEvent, skipGroup: boolean): Canvas; + findTarget(e: MouseEvent, skipGroup: boolean): Object; /** - * Returns currently active group - * @return Current group + * Returns pointer coordinates without the effect of the viewport + * @param {Object} pointer with "x" and "y" number values + * @return {Object} object with "x" and "y" number values */ - getActiveGroup(): Group; - /** - * Returns currently active object - * @return active object - */ - getActiveObject(): Object; - /** - * Returns an array with the current selected objects - * @return {Object[]} array of active objects - */ - getActiveObjects(): Object[]; + restorePointerVpt(pointer: Point): any; /** * Returns pointer coordinates relative to canvas. - * @return object with "x" and "y" number values + * Can return coordinates with or without viewportTransform. + * ignoreZoom false gives back coordinates that represent + * the point clicked on canvas element. + * ignoreZoom true gives back coordinates after being processed + * by the viewportTransform ( sort of coordinates of what is displayed + * on the canvas where you are clicking. + * ignoreZoom true = HTMLElement coordinates relative to top,left + * ignoreZoom false, default = fabric space coordinates, the same used for shape position + * To interact with your shapes top and left you want to use ignoreZoom true + * most of the time, while ignoreZoom false will give you coordinates + * compatible with the object.oCoords system. + * of the time. + * @param {Event} e + * @param {Boolean} ignoreZoom + * @return {Object} object with "x" and "y" number values */ - getPointer(e: Event, ignoreZoom?: boolean, upperCanvasEl?: CanvasRenderingContext2D): { x: number; y: number; }; + getPointer(e: Event, ignoreZoom: boolean): { x: number; y: number; }; /** * Returns context of canvas where object selection is drawn + * @return {CanvasRenderingContext2D} */ getSelectionContext(): CanvasRenderingContext2D; /** * Returns element on which object selection is drawn + * @return {HTMLCanvasElement} */ getSelectionElement(): HTMLCanvasElement; /** - * Returns true if object is transparent at a certain location - * @param target Object to check - * @param x Left coordinate - * @param y Top coordinate + * Returns currently active object + * @return {fabric.Object} active object */ - isTargetTransparent(target: Object, x: number, y: number): boolean; + getActiveObject(): Object; /** - * Sets active group to a speicified one - * @param group Group to set as a current one - * @param [e] Event (passed along when firing) + * Returns an array with the current selected objects + * @return {fabric.Object} active object */ - setActiveGroup(group: Group, e?: Event): Canvas; + getActiveObjects(): Object[]; /** * Sets given object as the only active object on canvas - * @param object Object to set as an active one - * @param [e] Event (passed along when firing "object:selected") + * @param {fabric.Object} object Object to set as an active one + * @param {Event} [e] Event (passed along when firing "object:selected") + * @return {fabric.Canvas} thisArg + * @chainable */ setActiveObject(object: Object, e?: Event): Canvas; /** - * Set the cursor type of the canvas element - * @param value Cursor type of the canvas element. - * @see http://www.w3.org/TR/css3-ui/#cursor + * Discards currently active object and fire events. If the function is called by fabric + * as a consequence of a mouse event, the event is passed as a parameter and + * sent to the fire function for the custom events. When used as a method the + * e param does not have any application. + * @param {event} e + * @return {fabric.Canvas} thisArg + * @chainable */ - setCursor(value: string): void; - + discardActiveObject(e?: Event): Canvas; /** - * Removes all event listeners + * Clears a canvas element and removes all event listeners + * @return {fabric.Canvas} thisArg + * @chainable */ - removeListeners(): void; + dispose(): Canvas; + /** + * Clears all contexts (background, main, top) of an instance + * @return {fabric.Canvas} thisArg + * @chainable + */ + clear(): Canvas; + /** + * Draws objects' controls (borders/controls) + * @param {CanvasRenderingContext2D} ctx Context to render controls on + */ + drawControls(ctx: CanvasRenderingContext2D): void; static EMPTY_JSON: string; /** @@ -1514,7 +1902,6 @@ interface ICircleOptions extends IObjectOptions { * Start angle of the circle, moving clockwise */ startAngle?: number; - /** * End angle of the circle */ @@ -1639,82 +2026,114 @@ export class Group { * @param objects Group objects * @param [options] Options object */ - constructor(items?: any[], options?: IObjectOptions); - - activateAllObjects(): Group; + constructor(objects?: Object[], options?: IObjectOptions, isAlreadyGrouped?: boolean); + /** + * Returns string representation of a group + */ + toString(): string; /** * Adds an object to a group; Then recalculates group's dimension, position. * @return thisArg * @chainable */ addWithUpdate(object: Object): Group; - containsPoint(point: Point): boolean; - /** - * Destroys a group (restoring state of its objects) - * @return thisArg - * @chainable - */ - destroy(): Group; - /** - * make a group an active selection, remove the group from canvas - * the group has to be on canvas for this to work. - * @return {fabric.ActiveSelection} thisArg - * @chainable - */ - toActiveSelection(): ActiveSelection; - /** - * Checks whether this group was moved (since `saveCoords` was called last) - * @return true if an object was moved (since fabric.Group#saveCoords was called) - */ - hasMoved(): boolean; /** * Removes an object from a group; Then recalculates group's dimension, position. * @return thisArg * @chainable */ removeWithUpdate(object: Object): Group; + /** + * Returns object representation of an instance + * @param [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return object representation of an instance + */ + toObject(propertiesToInclude?: string[]): any; + /** + * Returns object representation of an instance, in dataless mode. + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toDatalessObject(propertiesToInclude?: string[]): any; /** * Renders instance on a given context * @param ctx context to render instance on */ render(ctx: CanvasRenderingContext2D): void; /** - * Removes objects from a collection, then renders canvas (if `renderOnAddRemove` is not `false`) - * @param object Zero or more fabric instances - * @return thisArg - * @chainable + * Decide if the object should cache or not. Create its own cache level + * objectCaching is a global flag, wins over everything + * 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. + * @return {Boolean} */ - remove(...object: Object[]): Group; + shouldCache(): boolean; /** - * Saves coordinates of this instance (to be used together with `hasMoved`) - * @saveCoords - * @return thisArg + * Check if this object or a child object will cast a shadow + * @return {Boolean} + */ + willDrawShadow(): boolean; + /** + * Check if this group or its parent group are caching, recursively up + * @return {Boolean} + */ + isOnACache(): boolean; + /** + * Execute the drawing operation for an object on a specified context + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + drawObject(ctx: CanvasRenderingContext2D): void; + /** + * Check if cache is dirty + */ + isCacheDirty(skipCanvas?: boolean): boolean; + /** + * Realises the transform from this group onto the supplied object + * i.e. it tells you what would happen if the supplied object was in + * the group, and then the group was destroyed. It mutates the supplied + * object. + * @param {fabric.Object} object + * @return {fabric.Object} transformedObject + */ + realizeTransform(object: Object): Object; + /** + * Destroys a group (restoring state of its objects) + * @return {fabric.Group} thisArg * @chainable */ - saveCoords(): Group; + destroy(): Group; + /** + * make a group an active selection, remove the group from canvas + * the group has to be on canvas for this to work. + * @return {fabric.ActiveSelection} thisArg + * @chainable + */ + toActiveSelection(): ActiveSelection; + /** + * Destroys a group (restoring state of its objects) + * @return {fabric.Group} thisArg + * @chainable + */ + ungroupOnCanvas(): Group; /** * Sets coordinates of all group objects * @return thisArg * @chainable */ setObjectsCoords(): Group; - /** - * Returns object representation of an instance - * @param [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return object representation of an instance - */ - toObject(propertiesToInclude?: string[]): any; - /** - * Returns string represenation of a group - */ - toString(): string; /** * Returns svg representation of an instance * @param [reviver] Method for further parsing of svg representation. * @return svg representation of an instance */ toSVG(reviver?: Function): string; - + /** + * Returns svg clipPath representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + toClipPathSVG(reviver?: Function): string; /** * Returns {@link fabric.Group} instance from an object representation * @param object Object to create a group from @@ -1726,14 +2145,14 @@ export class Group { /////////////////////////////////////////////////////////////////////////////// // ActiveSelection ////////////////////////////////////////////////////////////////////////////// -export interface ActiveSelection extends Object, ICollection { } +export interface ActiveSelection extends Group, ICollection { } export class ActiveSelection { /** * Constructor * @param objects ActiveSelection objects * @param [options] Options object */ - constructor(items?: Object[], options?: IObjectOptions); + constructor(objects?: Object[], options?: IObjectOptions); /** * Change te activeSelection to a normal group, @@ -1742,14 +2161,6 @@ export class ActiveSelection { */ toGroup(): Group; - /** - * Removes objects from a collection, then renders canvas (if `renderOnAddRemove` is not `false`) - * @param object Zero or more fabric instances - * @return thisArg - * @chainable - */ - remove(...object: Object[]): Group; - /** * Returns string represenation of a group */ @@ -1770,6 +2181,36 @@ interface IImageOptions extends IObjectOptions { */ crossOrigin?: string; + /** + * When calling {@link fabric.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 + */ + srcFromAttribute?: boolean; + + /** + * 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; + + /** + * Image crop in pixels from original image size. + * @since 2.0.0 + * @type Number + */ + cropX?: number; + + /** + * Image crop in pixels from original image size. + * @since 2.0.0 + * @type Number + */ + cropY?: number; + /** * AlignX value, part of preserveAspectRatio (one of "none", "mid", "min", "max") * This parameter defines how the picture is aligned to its viewport when image element width differs from image width. @@ -1804,41 +2245,11 @@ export class Image { constructor(element: HTMLImageElement, objObjects: IObjectOptions); initialize(element?: string | HTMLImageElement, options?: IImageOptions): void; - /** - * Applies filters assigned to this image (from "filters" array) or from filter param - * @param {Array} filters to be applied - * @return {thisArg} return the fabric.Image object - * @chainable - */ - applyFilters(filters?: IBaseFilter[]): Image; - /** - * Returns a clone of an instance - * @param callback Callback is invoked with a clone as a first argument - * @param [propertiesToInclude] Any properties that you might want to additionally include in the output - */ - clone(callback?: Function, propertiesToInclude?: string[]): void; - /** - * Returns complexity of an instance - * @return complexity of this instance - */ - complexity(): number; /** * Returns image element which this instance if based on * @return Image element */ getElement(): HTMLImageElement; - /** - * Returns original size of an image - * @return Object with "width" and "height" properties - */ - getOriginalSize(): { width: number; height: number; }; - /** - * Returns source of an image - * @return Source of an image - */ - getSrc(): string; - render(ctx: CanvasRenderingContext2D, noTransform: boolean): void; - /** * Sets image element for this instance to a specified one. * If filters defined they are applied to new image. @@ -1847,10 +2258,23 @@ export class Image { * @param [options] Options object */ setElement(element: HTMLImageElement, callback: Function, options: IImageOptions): Image; + /** + * Delete a single texture if in webgl mode + */ + removeTexture(key: any): void; + /** + * Delete textures, reference to elements and eventually JSDOM cleanup + */ + dispose(): void; /** * Sets crossOrigin value (on an instance and corresponding image element) */ setCrossOrigin(value: string): Image; + /** + * Returns original size of an image + * @return Object with "width" and "height" properties + */ + getOriginalSize(): { width: number; height: number; }; /** * Returns object representation of an instance * @param [propertiesToInclude] Any properties that you might want to additionally include in the output @@ -1858,37 +2282,76 @@ export class Image { */ toObject(propertiesToInclude?: string[]): any; /** - * Returns string representation of an instance - * @return String representation of an instance + * Returns true if an image has crop applied, inspecting values of cropX,cropY,width,hight. + * @return {Boolean} */ - toString(): string; + hasCrop(): boolean; /** * Returns SVG representation of an instance * @param [reviver] Method for further parsing of svg representation. * @return svg representation of an instance */ toSVG(reviver?: Function): string; + /** + * Returns source of an image + * @return Source of an image + */ + getSrc(): string; /** * Sets source of an image - * @param src Source string (URL) - * @param [callback] Callback is invoked when image has been loaded (and all filters have been applied) - * @param [options] Options object + * @param {String} src Source string (URL) + * @param {Function} [callback] Callback is invoked when image has been loaded (and all filters have been applied) + * @param {Object} [options] Options object + * @return {fabric.Image} thisArg + * @chainable */ setSrc(src: string, callback?: Function, options?: IImageOptions): Image; - /** - * Creates an instance of fabric.Image from an URL string - * @param url URL to create an image from - * @param [callback] Callback to invoke when image is created (newly created image is passed as a first argument) - * @param [imgOptions] Options object + * Returns string representation of an instance + * @return String representation of an instance */ - static fromURL(url: string, callback?: (image: Image) => void, imgOptions?: IImageOptions): Image; + toString(): string; + applyResizeFilters(): void; + /** + * Applies filters assigned to this image (from "filters" array) or from filter param + * @param {Array} filters to be applied + * @return {thisArg} return the fabric.Image object + * @chainable + */ + applyFilters(filters?: IBaseFilter[]): Image; + /** + * Decide if the object should cache or not. Create its own cache level + * objectCaching is a global flag, wins over everything + * 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(): void; + /** + * Calculate offset for center and scale factor for the image in order to respect + * the preserveAspectRatio attribute + * @private + * @return {Object} + */ + parsePreserveAspectRatioAttribute(): any; /** * Creates an instance of fabric.Image from its object representation * @param object Object to create an instance from * @param [callback] Callback to invoke when an image instance is created */ static fromObject(object: any, callback: (image: Image) => void): void; + /** + * Creates an instance of fabric.Image from an URL string + * @param url URL to create an image from + * @param [callback] Callback to invoke when image is created (newly created image is passed as a first argument) + * @param [imgOptions] Options object + */ + static fromURL(url: string, callback?: Function, imgOptions?: IImageOptions): Image; /** * Returns Image instance from an SVG element * @param element Element to parse @@ -1900,7 +2363,6 @@ export class Image { * Default CSS class name for canvas */ static CSS_CANVAS: string; - static filters: IAllFilters; } @@ -1930,11 +2392,6 @@ export class Line { * @param [options] Options object */ constructor(points?: number[], objObjects?: IObjectOptions); - /** - * Returns complexity of an instance - * @return complexity - */ - complexity(): number; initialize(points?: number[], options?: ILineOptions): Line; /** * Returns object representation of an instance @@ -1949,8 +2406,6 @@ export class Line { * @return svg representation of an instance */ toSVG(reviver?: Function): string; - - static ATTRIBUTE_NAMES: string[]; /** * Returns fabric.Line instance from an SVG element * @param element Element to parse @@ -1962,8 +2417,8 @@ export class Line { * @param object Object to create an instance from */ static fromObject(object: any): Line; + static ATTRIBUTE_NAMES: string[]; } - interface IObjectOptions { /** * Type of an object (rect, circle, path, etc.). @@ -2012,17 +2467,7 @@ interface IObjectOptions { */ scaleY?: number; - /** - * Object skew factor (horizontal) - */ - skewX?: number; - - /** - * Object skew factor (vertical) - */ - skewY?: number; - - /** + /** * When true, an object is rendered as flipped horizontally */ flipX?: boolean; @@ -2042,6 +2487,21 @@ interface IObjectOptions { */ angle?: number; + /** + * Object skew factor (horizontal) + */ + skewX?: number; + + /** + * Object skew factor (vertical) + */ + skewY?: number; + + /** + * Size of object's controlling corners (in pixels) + */ + cornerSize?: number; + /** * When true, object's controlling corners are rendered as transparent inside (i.e. stroke instead of fill) */ @@ -2052,6 +2512,11 @@ interface IObjectOptions { */ hoverCursor?: string; + /** + * Default cursor value used when moving an object on canvas + */ + moveCursor?: string; + /** * Padding between object and its controlling borders (in pixels) */ @@ -2072,16 +2537,6 @@ interface IObjectOptions { */ cornerColor?: string; - /** - * Array specifying dash pattern of an object's control (hasBorder must be true) - */ - cornerDashArray?: number[]; - - /** - * Size of object's controlling corners (in pixels) - */ - cornerSize?: number; - /** * Color of controlling corners of an object (when it's active and transparentCorners false) */ @@ -2092,6 +2547,11 @@ interface IObjectOptions { */ cornerStyle?: "rect" | "circle"; + /** + * Array specifying dash pattern of an object's control (hasBorder must be true) + */ + cornerDashArray?: number[]; + /** * When true, this object will use center point as the origin of transformation * when being scaled via the controls. @@ -2129,9 +2589,11 @@ interface IObjectOptions { backgroundColor?: string; /** - * When `true`, object is cached on an additional canvas. + * Selection Background color of an object. colored layer behind the object when it is active. + * does not mix good with globalCompositeOperation methods. + * @type String */ - objectCaching?: boolean; + selectionBackgroundColor?: string; /** * When defined, an object is rendered via stroke and this property specifies its color @@ -2146,7 +2608,14 @@ interface IObjectOptions { /** * Array specifying dash pattern of an object's stroke (stroke must be defined) */ - strokeDashArray?: any[]; + strokeDashArray?: number[]; + + /** + * Line offset of an object's stroke + * @type Number + * @default + */ + strokeDashOffset?: number; /** * Line endings style of an object's stroke (one of "butt", "round", "square") @@ -2240,20 +2709,7 @@ interface IObjectOptions { */ clipTo?: Function; - /** - * A fabricObject that, without stroke define a clipping area with their shape. filled in black - * the clipPath object gets used when the object has rendered, and the context is placed in the center - * of the object cacheCanvas. - * If you want 0,0 of a clipPath to align with an object center, use clipPath.originX/Y to 'center' - */ - clipPath?: Object; - - /** - * When set to `true`, object's cache will be rerendered next render call. - */ - dirty?: boolean; - - /** + /** * When `true`, object horizontal movement is locked */ lockMovementX?: boolean; @@ -2283,11 +2739,126 @@ interface IObjectOptions { */ lockUniScaling?: boolean; + /** + * When `true`, object horizontal skewing is locked + * @type Boolean + */ + lockSkewingX?: boolean; + + /** + * When `true`, object vertical skewing is locked + * @type Boolean + */ + lockSkewingY?: boolean; + /** * When `true`, object cannot be flipped by scaling into negative values */ lockScalingFlip?: boolean; + /** + * When `true`, object is not exported in OBJECT/JSON + * since 1.6.3 + * @type Boolean + * @default + */ + excludeFromExport?: boolean; + + /** + * When `true`, object is cached on an additional canvas. + */ + objectCaching?: boolean; + + /** + * When `true`, object properties are checked for cache invalidation. In some particular + * situation you may want this to be disabled ( spray brush, very big, groups) + * or if your application does not allow you to modify properties for groups child you want + * to disable it for groups. + * default to false + * since 1.7.0 + * @type Boolean + * @default false + */ + statefullCache?: boolean; + + /** + * When `true`, cache does not get updated during scaling. The picture will get blocky if scaled + * too much and will be redrawn with correct details at the end of scaling. + * this setting is performance and application dependant. + * default to true + * since 1.7.0 + * @type Boolean + */ + noScaleCache?: boolean; + + /** + * When `false`, the stoke width will scale with the object. + * When `true`, the stroke will always match the exact pixel size entered for stroke width. + * default to false + * @since 2.6.0 + * @type Boolean + * @default false + * @type Boolean + */ + strokeUniform?: boolean; + + /** + * When set to `true`, object's cache will be rerendered next render call. + */ + dirty?: boolean; + + /** + * Determines if the fill or the stroke is drawn first (one of "fill" or "stroke") + * @type String + */ + paintFirst?: string; + + /** + * List of properties to consider when checking if state + * of an object is changed (fabric.Object#hasStateChanged) + * as well as for history (undo/redo) purposes + * @type Array + */ + stateProperties?: string[]; + + /** + * List of properties to consider when checking if cache needs refresh + * Those properties are checked by statefullCache ON ( or lazy mode if we want ) or from single + * calls to Object.set(key, value). If the key is in this list, the object is marked as dirty + * and refreshed at the next render + * @type Array + */ + cacheProperties?: string[]; + + /** + * A fabricObject that, without stroke define a clipping area with their shape. filled in black + * the clipPath object gets used when the object has rendered, and the context is placed in the center + * of the object cacheCanvas. + * If you want 0,0 of a clipPath to align with an object center, use clipPath.originX/Y to 'center' + */ + clipPath?: Object; + + /** + * Meaningful ONLY when the object is used as clipPath. + * if true, the clipPath will make the object clip to the outside of the clipPath + * since 2.4.0 + * @type boolean + * @default false + */ + inverted?: boolean; + + /** + * Meaningful ONLY when the object is used as clipPath. + * if true, the clipPath will have its top and left relative to canvas, and will + * not be influenced by the object transform. This will make the clipPath relative + * to the canvas, but clipping just a particular object. + * WARNING this is beta, this feature may change or be renamed. + * since 2.4.0 + * @type boolean + * @default false + */ + absolutePositioned?: boolean; + /** * Not used by fabric, just for convenience */ @@ -2366,17 +2937,16 @@ export class Object { getWidth(): number; setWidth(value: number): Object; - /* * Sets object's properties from options - * @param {Object} [options] Options object - */ + /* Sets object's properties from options + * @param {Object} [options] Options object + */ setOptions(options: IObjectOptions): void; /** * Transforms context when rendering an object - * @param ctx Context - * @param fromLeft When true, context is transformed to object's top/left corner. This is used when rendering text on Node + * @param {CanvasRenderingContext2D} ctx Context */ - transform(ctx: CanvasRenderingContext2D, fromLeft: boolean): void; + transform(ctx: CanvasRenderingContext2D): void; /** * Returns an object representation of an instance @@ -2396,63 +2966,107 @@ export class Object { toString(): string; /** - * Basic getter - * @param property Property name + * Return the object scale factor counting also the group scaling, zoom and retina + * @return {Object} object with scaleX and scaleY properties */ - get(property: K): this[K]; + getTotalObjectScaling(): {scaleX: number, scaleY: number}; /** - * Sets property to a given value. - * When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. - * If you need to update those, call `setCoords()`. - * @param key Property name - * @param value Property value (if function, the value is passed into it and its return value is used as a new one) + * Return the object opacity counting also the group property + * @return {Number} */ - set(key: K, value: this[K] | ((value: this[K]) => this[K])): this; - /** - * Sets property to a given value. - * When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. - * If you need to update those, call `setCoords()`. - * @param options Property object, iterate over the object properties - */ - set(options: Partial): this; - - /** - * Toggles specified property from `true` to `false` or from `false` to `true` - * @param property Property to toggle - */ - toggle(property: keyof this): this; - - /** - * Sets sourcePath of an object - * @param value Value to set sourcePath to - */ - setSourcePath(value: string): this; + getObjectOpacity(): number; /** * Retrieves viewportTransform from Object's canvas if possible */ - getViewportTransform(): boolean; + getViewportTransform(): any; /** * Renders an object on a specified context - * @param ctx Context to render on - * @param [noTransform] When true, context is not transformed + * @param {CanvasRenderingContext2D} ctx Context to render on */ - render(ctx: CanvasRenderingContext2D, noTransform?: boolean): void; + render(ctx: CanvasRenderingContext2D): void; + + /** + * When set to `true`, force the object to have its own cache, even if it is inside a group + * it may be needed when your object behave in a particular way on the cache and always needs + * its own isolated canvas to render correctly. + * Created to be overridden + * since 1.7.12 + * @returns false + */ + needsItsOwnCache(): boolean; + + /** + * Decide if the object should cache or not. Create its own cache level + * objectCaching is a global flag, wins over everything + * 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. + * @return {Boolean} + */ + shouldCache(): boolean; + + /** + * Check if this object or a child object will cast a shadow + * used by Group.shouldCache to know if child has a shadow recursively + * @return {Boolean} + */ + willDrawShadow(): boolean; + + /** + * Execute the drawing operation for an object clipPath + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + drawClipPathOnCache(ctx: CanvasRenderingContext2D): void; + + /** + * Execute the drawing operation for an object on a specified context + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + drawObject(ctx: CanvasRenderingContext2D): void; + + /** + * Paint the cached copy of the object on the target context. + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + drawCacheOnCanvas(ctx: CanvasRenderingContext2D): void; + + /** + * Check if cache is dirty + * @param {Boolean} skipCanvas skip canvas checks because this object is painted + * on parent canvas. + */ + isCacheDirty(): boolean; /** * Clones an instance, using a callback method will work for every object. * @param callback Callback is invoked with a clone as a first argument * @param [propertiesToInclude] Any properties that you might want to additionally include in the output */ - clone(callback: (clone: Object) => void, propertiesToInclude?: string[]): void; + clone(callback: Function, propertiesToInclude?: string[]): void; /** * Creates an instance of fabric.Image out of an object * @param callback callback, invoked with an instance as a first argument */ - cloneAsImage(callback: (image: Image) => void): this; + cloneAsImage(callback: Function, options?: IDataURLOptions): Object; + + /** + * Converts an object into a HTMLCanvas element + * @param {Object} options Options object + * @param {Number} [options.multiplier=1] Multiplier to scale by + * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 + * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 + * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 + * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 + * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 1.6.4 + * @param {Boolean} [options.withoutTransform] Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4 + * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2 + * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format + */ + toCanvasElement(options?: IDataURLOptions): string; /** * Converts an object into a data-url-like string @@ -2483,59 +3097,73 @@ export class Object { * @param property Property name 'stroke' or 'fill' * @param [options] Options object */ - setGradient(property: "stroke" | "fill", options: IGradientOptions): this; + setGradient(property: "stroke" | "fill", options: IGradientOptions): Object; + /** * Sets pattern fill of an object * @param options Options object */ - setPatternFill(options: IFillOptions): this; + setPatternFill(options: IFillOptions): Object; /** * Sets shadow of an object * @param [options] Options object or string (e.g. "2px 2px 10px rgba(0,0,0,0.2)") */ - setShadow(options?: string | Shadow): this; + setShadow(options?: string | Shadow): Object; /** * Sets "color" of an instance (alias of `set('fill', …)`) * @param color Color value */ - setColor(color: string): this; + setColor(color: string): Object; /** * Sets "angle" of an instance * @param angle Angle value */ - setAngle(angle: number): this; - - /** - * Sets "angle" of an instance - * @param angle Angle value - */ - rotate(angle: number): this; + rotate(angle: number): Object; /** * Centers object horizontally on canvas to which it was added last. * You might need to call `setCoords` on an object after centering, to update controls area. */ - centerH(): this; + centerH(): Object; + + /** + * Centers object horizontally on current viewport of canvas to which it was added last. + * You might need to call `setCoords` on an object after centering, to update controls area. + * @return {fabric.Object} thisArg + * @chainable + */ + viewportCenterH(): Object; /** * Centers object vertically on canvas to which it was added last. * You might need to call `setCoords` on an object after centering, to update controls area. */ - centerV(): this; + centerV(): Object; + + /** + * Centers object vertically on current viewport of canvas to which it was added last. + * You might need to call `setCoords` on an object after centering, to update controls area. + * @return {fabric.Object} thisArg + * @chainable + */ + viewportCenterV(): Object; /** * Centers object vertically and horizontally on canvas to which is was added last * You might need to call `setCoords` on an object after centering, to update controls area. */ - center(): this; + center(): Object; /** - * Removes object from canvas to which it was added last + * Centers object on current viewport of canvas to which it was added last. + * You might need to call `setCoords` on an object after centering, to update controls area. + * @return {fabric.Object} thisArg + * @chainable */ - remove(): Object; + viewportCenter(): Object; /** * Returns coordinates of a pointer relative to an object @@ -2544,6 +3172,52 @@ export class Object { */ getLocalPointer(e: Event, pointer?: { x: number, y: number }): { x: number, y: number }; + /** + * Basic getter + * @param property Property name + */ + get(property: K): this[K]; + + /** + * Sets property to a given value. + * When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. + * If you need to update those, call `setCoords()`. + * @param key Property name + * @param value Property value (if function, the value is passed into it and its return value is used as a new one) + */ + set(key: K, value: this[K] | ((value: this[K]) => this[K])): Object; + + /** + * Sets property to a given value. + * When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. + * If you need to update those, call `setCoords()`. + * @param options Property object, iterate over the object properties + */ + set(options: Partial): Object; + + /** + * Toggles specified property from `true` to `false` or from `false` to `true` + * @param property Property to toggle + */ + toggle(property: keyof this): Object; + + /** + * Sets sourcePath of an object + * @param value Value to set sourcePath to + */ + setSourcePath(value: string): Object; + + /** + * Sets "angle" of an instance + * @param angle Angle value + */ + setAngle(angle: number): Object; + + /** + * Removes object from canvas to which it was added last + */ + remove(): Object; + /** * Sets object's properties from options * @param [options] Options object @@ -2580,21 +3254,21 @@ export class Object { * @param [options] Object with additional `stateProperties` array to include when saving state * @return thisArg */ - saveState(options?: { stateProperties: any[] }): this; + saveState(options?: { stateProperties: any[] }): Object; /** * Setups state of an object */ - setupState(): this; + setupState(): Object; // functions from object straightening mixin // ----------------------------------------------------------------------------------------------------------------------------------- /** * Straightens an object (rotating it from current angle to one of 0, 90, 180, 270, etc. depending on which is closer) */ - straighten(): this; + straighten(): Object; /** * Same as straighten but with animation */ - fxStraighten(callbacks: Callbacks): this; + fxStraighten(callbacks: Callbacks): Object; // functions from object stacking mixin // ----------------------------------------------------------------------------------------------------------------------------------- @@ -2602,25 +3276,25 @@ export class Object { * Moves an object up in stack of drawn objects * @param [intersecting] If `true`, send object in front of next upper intersecting object */ - bringForward(intersecting?: boolean): this; + bringForward(intersecting?: boolean): Object; /** * Moves an object to the top of the stack of drawn objects */ - bringToFront(): this; + bringToFront(): Object; /** * Moves an object down in stack of drawn objects * @param [intersecting] If `true`, send object behind next lower intersecting object */ - sendBackwards(intersecting?: boolean): this; + sendBackwards(intersecting?: boolean): Object; /** * Moves an object to the bottom of the stack of drawn objects */ - sendToBack(): this; + sendToBack(): Object; /** * Moves an object to specified level in stack of drawn objects * @param index New position of object */ - moveTo(index: number): this; + moveTo(index: number): Object; // functions from object origin mixin // ----------------------------------------------------------------------------------------------------------------------------------- @@ -2680,7 +3354,7 @@ export class Object { * Requires public options: padding, borderColor * @param ctx Context to draw on */ - drawBorders(context: CanvasRenderingContext2D): this; + drawBorders(context: CanvasRenderingContext2D): Object; /** * Draws corners of an object's bounding box. @@ -2700,7 +3374,7 @@ export class Object { * @param controlName The name of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'. * @param visible true to set the specified control visible, false otherwise */ - setControlVisible(controlName: string, visible: boolean): this; + setControlVisible(controlName: string, visible: boolean): Object; /** * Sets the visibility state of object controls. @@ -2724,7 +3398,7 @@ export class Object { * Sets corner position coordinates based on current angle, width and height * See https://github.com/kangax/fabric.js/wiki/When-to-call-setCoords */ - setCoords(): this; + setCoords(): Object; /** * Returns coordinates of object's bounding rectangle (left, top, width, height) * @param absoluteopt use coordinates without viewportTransform @@ -2753,17 +3427,17 @@ export class Object { * @param value Scale factor * @return thisArg */ - scale(value: number): this; + scale(value: number): Object; /** * Scales an object to a given height, with respect to bounding box (scaling by x/y equally) * @param value New height value */ - scaleToHeight(value: number): this; + scaleToHeight(value: number): Object; /** * Scales an object to a given width, with respect to bounding box (scaling by x/y equally) * @param value New width value */ - scaleToWidth(value: number): this; + scaleToWidth(value: number): Object; /** * Checks if object intersects with another object * @param other Object to test From 222855ab264e23c8e26b32af38bd245c1ef1e9b4 Mon Sep 17 00:00:00 2001 From: Bryan Krol Date: Tue, 19 Feb 2019 17:17:43 -0500 Subject: [PATCH 02/16] Updated typedefs for shapes --- types/fabric/fabric-impl.d.ts | 1482 ++++++++++----------------------- 1 file changed, 453 insertions(+), 1029 deletions(-) diff --git a/types/fabric/fabric-impl.d.ts b/types/fabric/fabric-impl.d.ts index 10b487180f..f511e8f528 100644 --- a/types/fabric/fabric-impl.d.ts +++ b/types/fabric/fabric-impl.d.ts @@ -432,6 +432,12 @@ export class Color { */ toHex(): string; + /** + * Returns color representation in HEXA format + * @return {String} ex: FF5555CC + */ + toHexa(): string; + /** * Gets value of alpha channel for this color */ @@ -506,100 +512,87 @@ export class Color { interface IGradientOptions { /** - * @param [options.type] Type of gradient 'radial' or 'linear' + * Horizontal offset for aligning gradients coming from SVG when outside pathgroups + * @type Number */ + offsetX?: number; + /** + * Vertical offset for aligning gradients coming from SVG when outside pathgroups + * @type Number + */ + offsetY?: number; type?: string; - /** - * x-coordinate of start point - */ - x1?: number; - /** - * y-coordinate of start point - */ - y1?: number; - /** - * x-coordinate of end point - */ - x2?: number; - /** - * y-coordinate of end point - */ - y2?: number; - /** - * Radius of start point (only for radial gradients) - */ - r1?: number; - /** - * Radius of end point (only for radial gradients) - */ - r2?: number; + coords?: {x1: number, y1: number, x2: number, y2: number, r1: number, r2: number}; /** * Color stops object eg. {0:string; 1:string; */ colorStops?: any; + gradientTransform?: any; } -interface IGradient extends IGradientOptions { +export interface Gradient extends IGradientOptions { } +export class Gradient { /** * Adds another colorStop * @param colorStop Object with offset and color */ - addColorStop(colorStop: any): IGradient; + addColorStop(colorStop: any): Gradient; /** * Returns object representation of a gradient */ - toObject(): any; + toObject(propertiesToInclude?: any): any; /** * Returns SVG representation of an gradient - * @param object Object to create a gradient for - * @param normalize Whether coords should be normalized - * @return SVG representation of an gradient (linear/radial) + * @param {Object} object Object to create a gradient for + * @return {String} SVG representation of an gradient (linear/radial) */ - toSVG(object: Object, normalize?: boolean): string; - + toSVG(object: any): string; /** * Returns an instance of CanvasGradient * @param ctx Context to render on */ - toLive(ctx: CanvasRenderingContext2D, object?: PathGroup): CanvasGradient; -} -interface IGrandientStatic { - new(options?: IGradientOptions): IGradient; + toLive(ctx: CanvasRenderingContext2D): CanvasGradient; /** - * Returns instance from an SVG element - * @param el SVG gradient element + * Returns {@link fabric.Gradient} instance from an SVG element + * @static + * @memberOf fabric.Gradient + * @param {SVGGradientElement} el SVG gradient element + * @param {fabric.Object} instance + * @return {fabric.Gradient} Gradient instance + * @see http://www.w3.org/TR/SVG/pservers.html#LinearGradientElement + * @see http://www.w3.org/TR/SVG/pservers.html#RadialGradientElement */ - fromElement(el: SVGGradientElement, instance: Object): IGradient; + static fromElement(el: SVGGradientElement, instance: Object): Gradient; /** - * Returns instance from its object representation - * @param [options] Options object + * Returns {@link fabric.Gradient} instance from its object representation + * @static + * @memberOf fabric.Gradient + * @param {Object} obj + * @param {Object} [options] Options object */ - fromObject(obj: any, options: any[]): IGradient; + static forObject(obj: any, options?: IGradientOptions): Gradient; } - export class Intersection { constructor(status?: string); - /** * Appends a point to intersection */ - appendPoint(point: Point): void; + appendPoint(point: Point): Intersection; /** * Appends points to intersection */ - appendPoints(points: Point[]): void; - + appendPoints(points: Point[]): Intersection; /** - * Checks if polygon intersects another polygon + * Checks if one line intersects another */ - static intersectPolygonPolygon(points1: Point[], points2: Point[]): Intersection; + static intersectLineLine(a1: Point, a2: Point, b1: Point, b2: Point): Intersection; /** * Checks if line intersects polygon */ static intersectLinePolygon(a1: Point, a2: Point, points: Point[]): Intersection; /** - * Checks if one line intersects another + * Checks if polygon intersects another polygon */ - static intersectLineLine(a1: Point, a2: Point, b1: Point, b2: Point): Intersection; + static intersectPolygonPolygon(points1: Point[], points2: Point[]): Intersection; /** * Checks if polygon intersects rectangle */ @@ -610,24 +603,23 @@ interface IPatternOptions { /** * Repeat property of a pattern (one of repeat, repeat-x, repeat-y or no-repeat) */ - repeat: string; + repeat?: string; /** * Pattern horizontal offset from object's left/top corner */ - offsetX: number; + offsetX?: number; /** * Pattern vertical offset from object's left/top corner */ - offsetY: number; + offsetY?: number; /** * crossOrigin value (one of "", "anonymous", "use-credentials") * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes * @type String - * @default */ - crossOrigin: '' | 'anonymous' | 'use-credentials'; + crossOrigin?: '' | 'anonymous' | 'use-credentials'; /** * Transform matrix to change the pattern, imported from svgs */ @@ -636,45 +628,38 @@ interface IPatternOptions { export interface Pattern extends IPatternOptions { } export class Pattern { constructor(options?: IPatternOptions); - initialise(options?: IPatternOptions): Pattern; - /** * Returns object representation of a pattern * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} Object representation of a pattern instance */ - toObject: any; - + toObject(propertiesToInclude: any): any; /** * Returns SVG representation of a pattern * @param {fabric.Object} object * @return {String} SVG representation of a pattern */ toSVG(object: Object): string; - + setOptions(options: IPatternOptions): void; /** * Returns an instance of CanvasPattern * @param {CanvasRenderingContext2D} ctx Context to create pattern * @return {CanvasPattern} */ toLive(ctx: CanvasRenderingContext2D): CanvasPattern; - } - export class Point { x: number; y: number; - + type: string; constructor(x: number, y: number); - /** * Adds another point to this one and returns another one * @param {fabric.Point} that * @return {fabric.Point} new Point instance with added values */ add(that: Point): Point; - /** * Adds another point to this one * @param {fabric.Point} that @@ -682,14 +667,12 @@ export class Point { * @chainable */ addEquals(that: Point): Point; - /** * Adds value to this point and returns a new one * @param {Number} scalar * @return {fabric.Point} new Point with added value */ scalarAdd(scalar: number): Point; - /** * Adds value to this point * @param {Number} scalar @@ -697,14 +680,12 @@ export class Point { * @chainable */ scalarAddEquals(scalar: number): Point; - /** * Subtracts another point from this point and returns a new one * @param {fabric.Point} that * @return {fabric.Point} new Point object with subtracted values */ subtract(that: Point): Point; - /** * Subtracts another point from this point * @param {fabric.Point} that @@ -712,14 +693,12 @@ export class Point { * @chainable */ subtractEquals(that: Point): Point; - /** * Subtracts value from this point and returns a new one * @param {Number} scalar * @return {fabric.Point} */ scalarSubtract(scalar: number): Point; - /** * Subtracts value from this point * @param {Number} scalar @@ -727,14 +706,12 @@ export class Point { * @chainable */ scalarSubtractEquals(scalar: number): Point; - /** * Multiplies this point by a value and returns a new one * @param {Number} scalar * @return {fabric.Point} */ multiply(scalar: number): Point; - /** * Multiplies this point by a value * @param {Number} scalar @@ -742,14 +719,12 @@ export class Point { * @chainable */ multiplyEquals(scalar: number): Point; - /** * Divides this point by a value and returns a new one * @param {Number} scalar * @return {fabric.Point} */ divide(scalar: number): Point; - /** * Divides this point by a value * @param {Number} scalar @@ -757,42 +732,36 @@ export class Point { * @chainable */ divideEquals(scalar: number): Point; - /** * Returns true if this point is equal to another one * @param {fabric.Point} that * @return {Boolean} */ eq(that: Point): Point; - /** * Returns true if this point is less than another one * @param {fabric.Point} that * @return {Boolean} */ lt(that: Point): Point; - /** * Returns true if this point is less than or equal to another one * @param {fabric.Point} that * @return {Boolean} */ lte(that: Point): Point; - /** * Returns true if this point is greater another one * @param {fabric.Point} that * @return {Boolean} */ gt(that: Point): Point; - /** * Returns true if this point is greater than or equal to another one * @param {fabric.Point} that * @return {Boolean} */ gte(that: Point): Point; - /** * Returns new point which is the result of linear interpolation with this one and another one * @param {fabric.Point} that @@ -800,41 +769,35 @@ export class Point { * @return {fabric.Point} */ lerp(that: Point, t: number): Point; - /** * Returns distance from this point and another one * @param {fabric.Point} that * @return {Number} */ distanceFrom(that: Point): number; - /** * Returns the point between this point and another one * @param {fabric.Point} that * @return {fabric.Point} */ midPointFrom(that: Point): Point; - /** * Returns a new point which is the min of this and another one * @param {fabric.Point} that * @return {fabric.Point} */ min(that: Point): Point; - /** * Returns a new point which is the max of this and another one * @param {fabric.Point} that * @return {fabric.Point} */ max(that: Point): Point; - /** * Returns string representation of this point * @return {String} */ toString(): string; - /** * Sets x/y of this point * @param {Number} x @@ -842,76 +805,65 @@ export class Point { * @chainable */ setXY(x: number, y: number): Point; - /** * Sets x of this point * @param {Number} x * @chainable */ setX(x: number): Point; - /** * Sets y of this point * @param {Number} y * @chainable */ setY(y: number): Point; - /** * Sets x/y of this point from another point * @param {fabric.Point} that * @chainable */ setFromPoint(that: Point): Point; - /** * Swaps x/y of this point and another point * @param {fabric.Point} that */ swap(that: Point): Point; - /** * return a cloned instance of the point * @return {fabric.Point} */ clone(): Point; } - interface IShadowOptions { /** * Shadow color */ - color: string; + color?: string; /** * Shadow blur */ - blur: number; + blur?: number; /** * Shadow horizontal offset */ - offsetX: number; + offsetX?: number; /** * Shadow vertical offset */ - offsetY: number; + offsetY?: number; /** * Whether the shadow should affect stroke operations */ - affectStrike: boolean; + affectStrike?: boolean; /** * Indicates whether toObject should include default values */ - includeDefaultValues: boolean; + includeDefaultValues?: boolean; } export interface Shadow extends IShadowOptions { } export class Shadow { constructor(options?: IShadowOptions| string); initialize(options?: IShadowOptions | string): Shadow; - /** - * Returns object representation of a shadow - * @return {Object} Object representation of a shadow instance - */ - toObject(): any; /** * Returns a string representation of an instance * @see http://www.w3.org/TR/css-text-decor-3/#text-shadow @@ -924,6 +876,11 @@ export class Shadow { * @return {String} SVG representation of a shadow */ toSVG(object: Object): string; + /** + * Returns object representation of a shadow + * @return {Object} Object representation of a shadow instance + */ + toObject(): any; /** * Regex matching shadow offsetX, offsetY and blur (ex: "2px 2px 10px rgba(0,0,0,0.2)", "rgb(0,255,0) 2px 2px") * @static @@ -1910,12 +1867,6 @@ interface ICircleOptions extends IObjectOptions { export interface Circle extends Object, ICircleOptions { } export class Circle { constructor(options?: ICircleOptions); - - /** - * Returns complexity of an instance - * @return complexity of this instance - */ - complexity(): number; /** * Returns horizontal radius of an object (according to how an object is scaled) */ @@ -1928,20 +1879,12 @@ export class Circle { * Sets radius of an object (and updates width accordingly) */ setRadius(value: number): number; - - /** - * Returns object representation of an instance - * @param [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return object representation of an instance - */ - toObject(propertiesToInclude?: string[]): any; /** * Returns svg representation of an instance - * @param [reviver] Method for further parsing of svg representation. - * @return svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance */ - toSVG(reviver?: Function): string; - + _toSVG(): string; /** * List of attribute names to account for when parsing SVG element (used by {@link fabric.Circle.fromElement}) */ @@ -1972,65 +1915,59 @@ interface IEllipseOptions extends IObjectOptions { export interface Ellipse extends Object, IEllipseOptions { } export class Ellipse { constructor(options?: IEllipseOptions); - /** * Returns horizontal radius of an object (according to how an object is scaled) */ getRx(): number; - /** * Returns Vertical radius of an object (according to how an object is scaled) */ getRy(): number; - /** - * Returns object representation of an instance - * @param [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return object representation of an instance - */ - toObject(propertiesToInclude?: string[]): any; /** * Returns svg representation of an instance - * @param [reviver] Method for further parsing of svg representation. - * @return svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance */ - toSVG(reviver?: Function): string; - /** - * Returns complexity of an instance - * @return complexity - */ - complexity(): number; - + _toSVG(): string; /** * List of attribute names to account for when parsing SVG element (used by {@link fabric.Ellipse.fromElement}) */ static ATTRIBUTE_NAMES: string[]; - /** * Returns Ellipse instance from an SVG element * @param element Element to parse * @param [options] Options object */ static fromElement(element: SVGElement, options?: IEllipseOptions): Ellipse; - /** * Returns Ellipse instance from an object representation * @param object Object to create an instance from */ static fromObject(object: any): Ellipse; } - -export interface Group extends Object, ICollection { } +interface IGroupOptions extends IObjectOptions { + /** + * Indicates if click events should also check for subtargets + * @type Boolean + */ + subTargetCheck?: boolean; + /** + * setOnGroup is a method used for TextBox that is no more used since 2.0.0 The behavior is still + * available setting this boolean to true. + * @type Boolean + * @since 2.0.0 + * @default + */ + useSetOnGroup?: boolean; +} +export interface Group extends Object, ICollection, IGroupOptions { } export class Group { /** * Constructor * @param objects Group objects * @param [options] Options object */ - constructor(objects?: Object[], options?: IObjectOptions, isAlreadyGrouped?: boolean); - /** - * Returns string representation of a group - */ - toString(): string; + constructor(objects?: Object[], options?: IGroupOptions, isAlreadyGrouped?: boolean); /** * Adds an object to a group; Then recalculates group's dimension, position. * @return thisArg @@ -2043,18 +1980,6 @@ export class Group { * @chainable */ removeWithUpdate(object: Object): Group; - /** - * Returns object representation of an instance - * @param [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return object representation of an instance - */ - toObject(propertiesToInclude?: string[]): any; - /** - * Returns object representation of an instance, in dataless mode. - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} object representation of an instance - */ - toDatalessObject(propertiesToInclude?: string[]): any; /** * Renders instance on a given context * @param ctx context to render instance on @@ -2153,26 +2078,25 @@ export class ActiveSelection { * @param [options] Options object */ constructor(objects?: Object[], options?: IObjectOptions); - /** * Change te activeSelection to a normal group, * High level function that automatically adds it to canvas as * active object. no events fired. */ toGroup(): Group; - /** - * Returns string represenation of a group + * If returns true, deselection is cancelled. + * @since 2.0.0 + * @return {Boolean} [cancel] */ - toString(): string; - + onDeselect(): boolean; /** * Returns {@link fabric.ActiveSelection} instance from an object representation * @memberOf fabric.ActiveSelection * @param object Object to create a group from * @param [callback] Callback to invoke when an ActiveSelection instance is created */ - static fromObject(object: Group, callback: (activeSelection: ActiveSelection) => void): void; + static fromObject(object: any, callback: Function): void; } interface IImageOptions extends IObjectOptions { @@ -2180,7 +2104,6 @@ interface IImageOptions extends IObjectOptions { * crossOrigin value (one of "", "anonymous", "allow-credentials") */ crossOrigin?: string; - /** * When calling {@link fabric.Image.getSrc}, return value from element src with `element.getAttribute('src')`. * This allows for relative urls as image src. @@ -2188,7 +2111,6 @@ interface IImageOptions extends IObjectOptions { * @type Boolean */ srcFromAttribute?: boolean; - /** * minimum scale factor under which any resizeFilter is triggered to resize the image * 0 will disable the automatic resize. 1 will trigger automatically always. @@ -2196,40 +2118,24 @@ interface IImageOptions extends IObjectOptions { * @type Number */ minimumScaleTrigger?: number; - + /** + * key used to retrieve the texture representing this image + * @since 2.0.0 + * @type String + */ + cacheKey?: string; /** * Image crop in pixels from original image size. * @since 2.0.0 * @type Number */ cropX?: number; - /** * Image crop in pixels from original image size. * @since 2.0.0 * @type Number */ cropY?: number; - - /** - * AlignX value, part of preserveAspectRatio (one of "none", "mid", "min", "max") - * This parameter defines how the picture is aligned to its viewport when image element width differs from image width. - */ - alignX?: string; - - /** - * AlignY value, part of preserveAspectRatio (one of "none", "mid", "min", "max") - * This parameter defines how the picture is aligned to its viewport when image element height differs from image height. - */ - alignY?: string; - - /** - * meetOrSlice value, part of preserveAspectRatio (one of "meet", "slice"). - * if meet the image is always fully visibile, if slice the viewport is always filled with image. - * @see http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute - */ - meetOrSlice?: string; - /** * Image filter array */ @@ -2242,8 +2148,7 @@ export class Image { * @param element Image element * @param [options] Options object */ - constructor(element: HTMLImageElement, objObjects: IObjectOptions); - + constructor(element?: string | HTMLImageElement, options?: IImageOptions); initialize(element?: string | HTMLImageElement, options?: IImageOptions): void; /** * Returns image element which this instance if based on @@ -2275,23 +2180,17 @@ export class Image { * @return Object with "width" and "height" properties */ getOriginalSize(): { width: number; height: number; }; - /** - * Returns object representation of an instance - * @param [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return Object representation of an instance - */ - toObject(propertiesToInclude?: string[]): any; /** * Returns true if an image has crop applied, inspecting values of cropX,cropY,width,hight. * @return {Boolean} */ hasCrop(): boolean; /** - * Returns SVG representation of an instance - * @param [reviver] Method for further parsing of svg representation. - * @return svg representation of an instance + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance */ - toSVG(reviver?: Function): string; + _toSVG(): string; /** * Returns source of an image * @return Source of an image @@ -2306,11 +2205,6 @@ export class Image { * @chainable */ setSrc(src: string, callback?: Function, options?: IImageOptions): Image; - /** - * Returns string representation of an instance - * @return String representation of an instance - */ - toString(): string; applyResizeFilters(): void; /** * Applies filters assigned to this image (from "filters" array) or from filter param @@ -2319,19 +2213,6 @@ export class Image { * @chainable */ applyFilters(filters?: IBaseFilter[]): Image; - /** - * Decide if the object should cache or not. Create its own cache level - * objectCaching is a global flag, wins over everything - * 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(): void; /** * Calculate offset for center and scale factor for the image in order to respect * the preserveAspectRatio attribute @@ -2339,12 +2220,6 @@ export class Image { * @return {Object} */ parsePreserveAspectRatioAttribute(): any; - /** - * Creates an instance of fabric.Image from its object representation - * @param object Object to create an instance from - * @param [callback] Callback to invoke when an image instance is created - */ - static fromObject(object: any, callback: (image: Image) => void): void; /** * Creates an instance of fabric.Image from an URL string * @param url URL to create an image from @@ -2358,12 +2233,13 @@ export class Image { * @param callback Callback to execute when fabric.Image object is created * @param [options] Options object */ - static fromElement(element: SVGElement, callback: (image: Image) => void, options?: IImageOptions): void; + static fromElement(element: SVGElement, callback: Function, options?: IImageOptions): Image; /** * Default CSS class name for canvas */ static CSS_CANVAS: string; static filters: IAllFilters; + static ATTRIBUTE_NAMES: string[]; } interface ILineOptions extends IObjectOptions { @@ -2391,33 +2267,33 @@ export class Line { * @param [points] Array of points * @param [options] Options object */ - constructor(points?: number[], objObjects?: IObjectOptions); + constructor(points?: number[], objObjects?: ILineOptions); initialize(points?: number[], options?: ILineOptions): Line; /** - * Returns object representation of an instance - * @methd toObject - * @param [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return object representation of an instance + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance */ - toObject(propertiesToInclude: string[]): any; - /** - * Returns SVG representation of an instance - * @param [reviver] Method for further parsing of svg representation. - * @return svg representation of an instance - */ - toSVG(reviver?: Function): string; + _toSVG(): string; /** * Returns fabric.Line instance from an SVG element - * @param element Element to parse - * @param [options] Options object + * @static + * @memberOf fabric.Line + * @param {SVGElement} element Element to parse + * @param {Object} [options] Options object + * @param {Function} [callback] callback function invoked after parsing */ - static fromElement(element: SVGElement, options?: ILineOptions): Line; + static fromElement(element: SVGElement, callback?: Function, options?: ILineOptions): Line; /** * Returns fabric.Line instance from an object representation * @param object Object to create an instance from */ static fromObject(object: any): Line; static ATTRIBUTE_NAMES: string[]; + /** + * Produces a function that calculates distance from canvas edge to Line origin. + */ + makeEdgeToOriginGetter(propertyNames: {origin: number, axis1: any, axis2: any, dimension: any}, originValues: {nearest: any, center: any, farthest: any}): Function; } interface IObjectOptions { /** @@ -2635,7 +2511,7 @@ interface IObjectOptions { /** * Shadow object representing shadow of this shape */ - shadow?: Shadow | string; + shadow?: Shadow; /** * Opacity of object's controlling borders when object is active and moving @@ -2876,66 +2752,8 @@ interface IObjectOptions { } export interface Object extends IObservable, IObjectOptions, IObjectAnimation { } export class Object { - getCurrentWidth(): number; - getCurrentHeight(): number; - - getAngle(): number; - setAngle(value: number): Object; - - getBorderColor(): string; - setBorderColor(value: string): Object; - - getBorderScaleFactor(): number; - - getCornersize(): number; - setCornersize(value: number): Object; - - getFill(): string; - setFill(value: string): Object; - - getFillRule(): string; - setFillRule(value: string): Object; - - getFlipX(): boolean; - setFlipX(value: boolean): Object; - - getFlipY(): boolean; - setFlipY(value: boolean): Object; - - getHeight(): number; - setHeight(value: number): Object; - - getLeft(): number; - setLeft(value: number): Object; - - getOpacity(): number; - setOpacity(value: number): Object; - - overlayFill: string; - getOverlayFill(): string; - setOverlayFill(value: string): Object; - - getScaleX(): number; - setScaleX(value: number): Object; - - getScaleY(): number; - setScaleY(value: number): Object; - - getSkewX(): number; - setSkewX(value: number): Object; - - getSkewY(): number; - setSkewY(value: number): Object; - - setShadow(options: any): Object; - getShadow(): Object; - - stateProperties: any[]; - getTop(): number; - setTop(value: number): Object; - - getWidth(): number; - setWidth(value: number): Object; + constructor(options?: IObjectOptions); + initialize(options?: IObjectOptions): Object; /* Sets object's properties from options * @param {Object} [options] Options object @@ -2965,6 +2783,12 @@ export class Object { */ toString(): string; + /** + * Return the object scale factor counting also the group scaling + * @return {Object} object with scaleX and scaleY properties + */ + getObjectScaling(): {scaleX: number, scaleY: number}; + /** * Return the object scale factor counting also the group scaling, zoom and retina * @return {Object} object with scaleX and scaleY properties @@ -2977,6 +2801,14 @@ export class Object { */ getObjectOpacity(): number; + /** + * This callback function is called by the parent group of an object every + * time a non-delegated property changes on the group. It is passed the key + * and value as parameters. Not adding in this function's signature to avoid + * Travis build error about unused variables. + */ + setOnGroup(): void; + /** * Retrieves viewportTransform from Object's canvas if possible */ @@ -3103,7 +2935,7 @@ export class Object { * Sets pattern fill of an object * @param options Options object */ - setPatternFill(options: IFillOptions): Object; + setPatternFill(options: IFillOptions, callback: Function): Object; /** * Sets shadow of an object @@ -3455,17 +3287,7 @@ interface IPathOptions extends IObjectOptions { /** * Array of path points */ - path?: any[]; - - /** - * Minimum X from points values, necessary to offset points - */ - minX?: number; - - /** - * Minimum Y from points values, necessary to offset points - */ - minY?: number; + path?: Point[]; } export interface Path extends Object, IPathOptions { } export class Path { @@ -3474,178 +3296,54 @@ export class Path { * @param path Path data (sequence of coordinates and corresponding "command" tokens) * @param [options] Options object */ - constructor(path?: string | any[], options?: IPathOptions); + constructor(path?: string | Point[], options?: IPathOptions); pathOffset: Point; - initialize(path?: any[], options?: IPathOptions): Path; - + initialize(path?: Point[], options?: IPathOptions): Path; /** - * Returns number representation of an instance complexity - * @return complexity of this instance + * Returns svg clipPath representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance */ - complexity(): number; - - /** - * Renders path on a specified context - * @param ctx context to render path on - * @param [noTransform] When true, context is not transformed - */ - render(ctx: CanvasRenderingContext2D, noTransform: boolean): void; - /** - * Returns dataless object representation of an instance - * @param [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return object representation of an instance - */ - toDatalessObject(propertiesToInclude?: string[]): any; - /** - * Returns object representation of an instance - * @param [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return object representation of an instance - */ - toObject(propertiesToInclude?: string[]): any; - /** - * Returns string representation of an instance - * @return string representation of an instance - */ - toString(): string; + toClipPathSVG(reviver?: Function): string; /** * Returns svg representation of an instance * @param [reviver] Method for further parsing of svg representation. * @return svg representation of an instance */ toSVG(reviver?: Function): string; - /** * Creates an instance of fabric.Path from an SVG element * @param element to parse * @param callback Callback to invoke when an fabric.Path instance is created * @param [options] Options object */ - static fromElement(element: SVGElement, callback: (path: Path) => any, options?: IPathOptions): void; + static fromElement(element: SVGElement, callback: Function, options?: IPathOptions): Path; /** * Creates an instance of fabric.Path from an object * @param callback Callback to invoke when an fabric.Path instance is created */ - static fromObject(object: any, callback: (path: Path) => any): void; + static fromObject(object: any, callback: Function): Path; + /** + * List of attribute names to account for when parsing SVG element (used by `fabric.Polygon.fromElement`) + */ + static ATTRIBUTE_NAMES: string[]; } - -export class PathGroup extends Object { - /** - * Constructor - * @param [options] Options object - */ - constructor(paths: Path[], options?: IObjectOptions); - - initialize(paths: Path[], options?: IObjectOptions): void; - /** - * Returns number representation of object's complexity - * @return complexity - */ - complexity(): number; - /** - * Returns true if all paths in this group are of same color - * @return true if all paths are of the same color (`fill`) - */ - isSameColor(): boolean; - /** - * Renders this group on a specified context - * @param ctx Context to render this instance on - */ - render(ctx: CanvasRenderingContext2D): void; - /** - * Returns dataless object representation of this path group - * @param [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return dataless object representation of an instance - */ - toDatalessObject(propertiesToInclude?: string[]): any; - /** - * Returns object representation of this path group - * @param [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return object representation of an instance - */ - toObject(propertiesToInclude?: string[]): any; - /** - * Returns a string representation of this path group - * @return string representation of an object - */ - toString(): string; - /** - * Returns svg representation of an instance - * @param [reviver] Method for further parsing of svg representation. - * @return svg representation of an instance - */ - toSVG(reviver?: Function): string; - /** - * Returns all paths in this path group - * @return array of path objects included in this path group - */ - getObjects(): Path[]; - - static fromObject(object: any): PathGroup; - /** - * Creates fabric.PathGroup instance from an object representation - * @param object Object to create an instance from - * @param callback Callback to invoke when an fabric.PathGroup instance is created - */ - static fromObject(object: any, callback: (group: PathGroup) => any): void; -} - -interface IPolygonOptions extends IObjectOptions { - /** - * Points array - */ - points?: Point[]; - - /** - * Minimum X from points values, necessary to offset points - */ - minX?: number; - - /** - * Minimum Y from points values, necessary to offset points - */ - minY?: number; -} -export interface Polygon extends IPolygonOptions { } -export class Polygon extends Object { +export interface Polygon extends IPolylineOptions { } +export class Polygon extends Polyline { /** * Constructor * @param points Array of points * @param [options] Options object */ - constructor(points: Array<{ x: number; y: number }>, options?: IObjectOptions, skipOffset?: boolean); - - /** - * Returns complexity of an instance - * @return complexity of this instance - */ - complexity(): number; - - /** - * Returns object representation of an instance - * @param [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return object representation of an instance - */ - toObject(propertiesToInclude?: string[]): any; - /** - * Returns svg representation of an instance - * @param [reviver] Method for further parsing of svg representation. - * @return svg representation of an instance - */ - toSVG(reviver?: Function): string; - - /** - * List of attribute names to account for when parsing SVG element (used by `fabric.Polygon.fromElement`) - */ - static ATTRIBUTE_NAMES: string[]; - + constructor(points: Array<{ x: number; y: number }>, options?: IPolylineOptions); /** * Returns Polygon instance from an SVG element * @param element Element to parse * @param [options] Options object */ - static fromElement(element: SVGElement, options?: IPolygonOptions): Polygon; + static fromElement(element: SVGElement, options?: IPolylineOptions): Polygon; /** * Returns fabric.Polygon instance from an object representation * @param object Object to create an instance from @@ -3658,16 +3356,6 @@ interface IPolylineOptions extends IObjectOptions { * Points array */ points?: Point[]; - - /** - * Minimum X from points values, necessary to offset points - */ - minX?: number; - - /** - * Minimum Y from points values, necessary to offset points - */ - minY?: number; } export interface Polyline extends IPolylineOptions { } export class Polyline extends Object { @@ -3679,29 +3367,10 @@ export class Polyline extends Object { */ constructor(points: Array<{ x: number; y: number }>, options?: IPolylineOptions); initialize(points: Point[], options?: IPolylineOptions): void; - /** - * Returns complexity of an instance - * @return complexity of this instance - */ - complexity(): number; - /** - * Returns object representation of an instance - * @param [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return Object representation of an instance - */ - toObject(propertiesToInclude?: string[]): any; - /** - * Returns SVG representation of an instance - * @param [reviver] Method for further parsing of svg representation. - * @return svg representation of an instance - */ - toSVG(reviver?: Function): string; - /** * List of attribute names to account for when parsing SVG element (used by `fabric.Polygon.fromElement`) */ static ATTRIBUTE_NAMES: string[]; - /** * Returns Polyline instance from an SVG element * @param element Element to parse @@ -3716,8 +3385,6 @@ export class Polyline extends Object { } interface IRectOptions extends IObjectOptions { - x?: number; - y?: number; /** * Horizontal border radius */ @@ -3736,25 +3403,7 @@ export class Rect extends Object { * @param [options] Options object */ constructor(options?: IRectOptions); - initialize(points?: number[], options?: any): Rect; - /** - * Returns complexity of an instance - * @return complexity - */ - complexity(): number; - /** - * Returns object representation of an instance - * @param [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return object representation of an instance - */ - toObject(propertiesToInclude: any[]): any; - /** - * Returns svg representation of an instance - * @param [reviver] Method for further parsing of svg representation. - * @return svg representation of an instance - */ - toSVG(reviver?: Function): string; - + initialize(options?: IRectOptions): Rect; /** * List of attribute names to account for when parsing SVG element (used by `fabric.Rect.fromElement`) */ @@ -3771,607 +3420,389 @@ export class Rect extends Object { */ static fromObject(object: any): Rect; } - -interface ITextOptions extends IObjectOptions { +interface TextOptions extends IObjectOptions { /** * Font size (in pixels) + * @type Number */ fontSize?: number; /** * Font weight (e.g. bold, normal, 400, 600, 800) + * @type {(Number|String)} */ - fontWeight?: number | string; + fontWeight?: string | number; /** * Font family + * @type String */ fontFamily?: string; /** - * Text decoration Possible values?: "", "underline", "overline" or "line-through". - * Feels like this has been deprecated in favor of underline, overline, linethrough props + * Text decoration underline. + * @type Boolean */ - textDecoration?: string; - /** - * Text decoration underline. - * @type Boolean - * @default - */ - underline?: boolean; - /** - * Text decoration overline. - * @type Boolean - * @default - */ - overline?: boolean; - /** - * Text decoration linethrough. - * @type Boolean - * @default - */ - linethrough?: boolean; + underline?: boolean; /** - * Text alignment. Possible values?: "left", "center", or "right". + * Text decoration overline. + * @type Boolean */ - textAlign?: string; + overline?: boolean; /** - * Font style . Possible values?: "", "normal", "italic" or "oblique". + * Text decoration linethrough. + * @type Boolean */ - fontStyle?: string; + linethrough?: boolean; + /** + * Text alignment. Possible values: "left", "center", "right", "justify", + * "justify-left", "justify-center" or "justify-right". + * @type String + */ + textAlign?: 'left' | 'center' | 'right' | 'justify' | 'justify-left' | 'justify-center' | 'justify-right'; + /** + * Font style . Possible values: "", "normal", "italic" or "oblique". + * @type String + */ + fontStyle?: '' | 'normal' | 'italic' | 'oblique'; /** * Line height + * @type Number */ lineHeight?: number; - /** - * Character spacing - */ - charSpacing?: number; + /** + * Superscript schema object (minimum overlap) + * @type {Object} + */ + superscript?: {size: number, baseline: number}; + /** + * Subscript schema object (minimum overlap) + * @type {Object} + */ + subscript?: {size: number, baseline: number}; + /** + * Background color of text lines + * @type String + */ + textBackgroundColor?: string; /** * When defined, an object is rendered via stroke and this property specifies its color. - * Backwards incompatibility note?: This property was named "strokeStyle" until v1.1.6 + * Backwards incompatibility note: This property was named "strokeStyle" until v1.1.6 */ stroke?: string; /** * Shadow object representing shadow of this shape. - * Backwards incompatibility note?: This property was named "textShadow" (String) until v1.2.11 + * Backwards incompatibility note: This property was named "textShadow" (String) until v1.2.11 + * @type fabric.Shadow */ - shadow?: Shadow | string; + shadow?: Shadow; /** - * Background color of text lines + * additional space between characters + * expressed in thousands of em unit + * @type Number */ - textBackgroundColor?: string; - + charSpacing?: number; + /** + * Object containing character styles - top-level properties -> line numbers, + * 2nd-level properties - charater numbers + * @type Object + */ + styles?: any; + /** + * Baseline shift, stlyes only, keep at 0 for the main text object + * @type {Number} + */ + deltaY?: number; +} +export interface Text extends TextOptions { } +export class Text extends Object { + text?: string; + /** + * Constructor + * @param text Text string + * @param [options] Options object + */ + constructor(text: string, options?: TextOptions); + /** + * Return a context for measurement of text string. + * if created it gets stored for reuse + * @return {fabric.Text} thisArg + */ + getMeasuringContext(): CanvasRenderingContext2D; + /** + * Initialize or update text dimensions. + * Updates this.width and this.height with the proper values. + * Does not return dimensions. + */ + initDimensions(): void; + /** + * Enlarge space boxes and shift the others + */ + enlargeSpaces(): void; + /** + * Detect if the text line is ended with an hard break + * text and itext do not have wrapping, return false + * @return {Boolean} + */ + isEndOfWrapping(): boolean; + /** + * Returns string representation of an instance + */ + toString(): string; + /** + * Computes height of character at given position + * @param {Number} line the line number + * @param {Number} char the character number + * @return {Number} fontSize of the character + */ + getHeightOfChar(line: number, char: number): number; + /** + * measure a text line measuring all characters. + * @param {Number} lineIndex line number + * @return {Number} Line width + */ + measureLine(lineIndex: number): number; + /** + * Calculate height of line at 'lineIndex' + * @param {Number} lineIndex index of line to calculate + * @return {Number} + */ + getHeightOfLine(lineIndex: number): number; + /** + * Calculate text box height + */ + calcTextHeight(): number; + /** + * Turns the character into a 'superior figure' (i.e. 'superscript') + * @param {Number} start selection start + * @param {Number} end selection end + * @returns {fabric.Text} thisArg + * @chainable + */ + setSuperscript(start: number, end: number): Text; + /** + * Turns the character into an 'inferior figure' (i.e. 'subscript') + * @param {Number} start selection start + * @param {Number} end selection end + * @returns {fabric.Text} thisArg + * @chainable + */ + setSubscript(start: number, end: number): Text; + /** + * Retrieves the value of property at given character position + * @param {Number} lineIndex the line number + * @param {Number} charIndex the charater number + * @param {String} property the property name + * @returns the value of 'property' + */ + getValueOfPropertyAt(lineIndex: number, charIndex: number, property: string): any; + static DEFAULT_SVG_FONT_SIZE: number; + /** + * Returns fabric.Text instance from an SVG element (not yet implemented) + * @static + * @memberOf fabric.Text + * @param {SVGElement} element Element to parse + * @param {Function} callback callback function invoked after parsing + * @param {Object} [options] Options object + */ + static fromElement(element: SVGElement, callback?: Function, options?: TextOptions): Text; + /** + * Returns fabric.Text instance from an object representation + * @static + * @memberOf fabric.Text + * @param {Object} object Object to create an instance from + * @param {Function} [callback] Callback to invoke when an fabric.Text instance is created + */ + static fromObject(object: any, callback?: Function): Text; +} +interface ITextOptions extends TextOptions { + /** + * Index where text selection starts (or where cursor is when there is no selection) + * @type Number + */ + selectionStart?: number;/** + * Index where text selection ends + * @type Number + */ + selectionEnd?: number; + /** + * Color of text selection + * @type String + */ + selectionColor?: string; + /** + * Indicates whether text is in editing mode + * @type Boolean + */ + isEditing?: boolean; + /** + * Indicates whether a text can be edited + * @type Boolean + */ + editable?: boolean; + /** + * Border color of text object while it's in editing mode + * @type String + */ + editingBorderColor?: string; + /** + * Width of cursor (in px) + * @type Number + */ + cursorWidth?: number; + /** + * Color of default cursor (when not overwritten by character style) + * @type String + */ + cursorColor?: string; + /** + * Delay between cursor blink (in ms) + * @type Number + */ + cursorDelay?: number; + /** + * Duration of cursor fadein (in ms) + * @type Number + */ + cursorDuration?: number; + /** + * Indicates whether internal text char widths can be cached + * @type Boolean + */ + caching?: boolean; + /** + * Helps determining when the text is in composition, so that the cursor + * rendering is altered. + */ + inCompositionMode?: boolean; path?: string; useNative?: boolean; - text?: string; } -export interface Text extends ITextOptions { } -export class Text extends Object { +export interface IText extends ITextOptions, IObservable { } +export class IText extends Text { /** * Constructor * @param text Text string * @param [options] Options object */ constructor(text: string, options?: ITextOptions); + initialize(text: string, options?: ITextOptions): IText; /** - * Returns complexity of an instance + * Sets selection start (left boundary of a selection) + * @param {Number} index Index to set selection start to */ - complexity(): number; + setSelectionStart(index: number): void; /** - * Returns string representation of an instance + * Sets selection end (right boundary of a selection) + * @param {Number} index Index to set selection end to */ - toString(): string; + setSelectionEnd(index: number): void; /** - * Renders text instance on a specified context - * @param ctx Context to render on + * Prepare and clean the contextTop */ - render(ctx: CanvasRenderingContext2D, noTransform: boolean): void; + clearContextTop(skipRestor: boolean): void; /** - * Returns object representation of an instance - * @param [propertiesToInclude] Any properties that you might want to additionally include in the output + * Renders cursor or selection (depending on what exists) */ - toObject(propertiesToInclude?: string[]): any; + renderCursorOrSelection(): void; /** - * Returns SVG representation of an instance - * @param [reviver] Method for further parsing of svg representation. + * Renders cursor + * @param {Object} boundaries + * @param {CanvasRenderingContext2D} ctx transformed context to draw on */ - toSVG(reviver?: Function): string; + renderCursor(boundaries: any, ctx: CanvasRenderingContext2D): void; /** - * Retrieves object's fontSize + * Renders text selection + * @param {Object} boundaries Object with left/top/leftOffset/topOffset + * @param {CanvasRenderingContext2D} ctx transformed context to draw on */ - getFontSize(): number; + renderSelection(boundaries: any, ctx: CanvasRenderingContext2D): void; /** - * Sets object's fontSize - * @param fontSize Font size (in pixels) + * High level function to know the height of the cursor. + * the currentChar is the one that precedes the cursor + * Returns fontSize of char at the current cursor + * @return {Number} Character font size */ - setFontSize(fontSize: number): Text; + getCurrentCharFontSize(): number; /** - * Retrieves object's fontWeight + * High level function to know the color of the cursor. + * the currentChar is the one that precedes the cursor + * Returns color (fill) of char at the current cursor + * @return {String} Character color (fill) */ - getFontWeight(): number | string; + getCurrentCharColor(): string; /** - * Sets object's fontWeight - * @param fontWeight Font weight + * Returns fabric.IText instance from an object representation + * @static + * @memberOf fabric.IText + * @param {Object} object Object to create an instance from + * @param {function} [callback] invoked with new instance as argument */ - setFontWeight(fontWeight: string | number): Text; - /** - * Retrieves object's fontFamily - */ - getFontFamily(): string; - /** - * Sets object's fontFamily - * @param fontFamily Font family - */ - setFontFamily(fontFamily: string): Text; - /** - * Retrieves object's text - */ - getText(): string; - /** - * Sets object's text - * @param text Text - */ - setText(text: string): Text; - /** - * Retrieves object's textDecoration - */ - getTextDecoration(): string; - /** - * Sets object's textDecoration - * @param textDecoration Text decoration - */ - setTextDecoration(textDecoration: string): Text; - /** - * Retrieves object's underline - */ - getUnderline(): boolean; - /** - * Sets object's underline - * @param underline Text underline - */ - setUnderline(underline: boolean): Text; - /** - * Retrieves object's overline - */ - getOverline(): boolean; - /** - * Sets object's overline - * @param overline Text overline - */ - setOverline(overline: boolean): Text; - /** - * Retrieves object's linethrough - */ - getLinethrough(): boolean; - /** - * Sets object's linethrough - * @param linethrough Text linethrough - */ - setLinethrough(linethrough: boolean): Text; - /** - * Retrieves object's fontStyle - */ - getFontStyle(): string; - /** - * Sets object's fontStyle - * @param fontStyle Font style - */ - setFontStyle(fontStyle: string): Text; - /** - * Retrieves object's lineHeight - */ - getLineHeight(): number; - /** - * Sets object's lineHeight - * @param lineHeight Line height - */ - setLineHeight(lineHeight: number): Text; - /** - * Retrieves object's charSpacing - */ - getCharSpacing(): number; - /** - * Sets object's charSpacing - * @param charSpacing Character spacing - */ - setCharSpacing(charSpacing: number): Text; - /** - * Retrieves object's textAlign - */ - getTextAlign(): string; - /** - * Sets object's textAlign - * @param textAlign Text alignment - */ - setTextAlign(textAlign: string): Text; - /** - * Retrieves object's textBackgroundColor - */ - getTextBackgroundColor(): string; - /** - * Sets object's textBackgroundColor - * @param textBackgroundColor Text background color - */ - setTextBackgroundColor(textBackgroundColor: string): Text; - - /** - * List of attribute names to account for when parsing SVG element (used by `fabric.Text.fromElement`) - */ - static ATTRIBUTE_NAMES: string[]; - /** - * Default SVG font size - */ - static DEFAULT_SVG_FONT_SIZE: number; - - /** - * Returns fabric.Text instance from an SVG element (not yet implemented) - * @param element Element to parse - * @param [options] Options object - */ - static fromElement(element: SVGElement, options?: ITextOptions): Text; - /** - * Returns fabric.Text instance from an object representation - * @param object Object to create an instance from - */ - static fromObject(object: any): Text; + static fromObject(object: any, callback?: Function): IText; } - -interface IITextOptions extends IObjectOptions, ITextOptions { +interface ITextboxOptions extends ITextOptions { /** - * Index where text selection starts (or where cursor is when there is no selection) + * Minimum width of textbox, in pixels. + * @type Number */ - selectionStart?: number; - + minWidth?: number; /** - * Index where text selection ends + * Minimum calculated width of a textbox, in pixels. + * fixed to 2 so that an empty textbox cannot go to 0 + * and is still selectable without text. + * @type Number */ - selectionEnd?: number; - + dynamicMinWidth?: number; /** - * Color of text selection + * Override standard Object class values */ - selectionColor?: string; - + lockScalingFlip?: boolean; /** - * Indicates whether text is in editing mode + * Override standard Object class values + * Textbox needs this on false */ - isEditing?: boolean; - + noScaleCache?: boolean; /** - * Indicates whether a text can be edited + * Use this boolean property in order to split strings that have no white space concept. + * this is a cheap way to help with chinese/japaense + * @type Boolean + * @since 2.6.0 */ - editable?: boolean; - - /** - * Border color of text object while it's in editing mode - */ - editingBorderColor?: string; - - /** - * Width of cursor (in px) - */ - cursorWidth?: number; - - /** - * Color of default cursor (when not overwritten by character style) - */ - cursorColor?: string; - - /** - * Delay between cursor blink (in ms) - */ - cursorDelay?: number; - - /** - * Duration of cursor fadein (in ms) - */ - cursorDuration?: number; - - /** - * Object containing character styles - * (where top-level properties corresponds to line number and 2nd-level properties -- to char number in a line) - */ - styles?: any; - - /** - * Indicates whether internal text char widths can be cached - */ - caching?: boolean; + splitByGrapheme?: boolean; } -export interface Textbox extends IText {} +export interface Textbox extends ITextboxOptions, IObservable{} export class Textbox extends IText { /** * Constructor * @param text Text string * @param [options] Options object */ - constructor(text: string, options?: IITextOptions); - /** - * Detect if the text line is ended with an hard break - * text and itext do not have wrapping, return false - * @param {Number} lineIndex text to split - * @return {Boolean} - */ - isEndOfWrapping(lineIndex: number): boolean; - /** - * Get minimum width of text box - * @return {Number} - */ - getMinWidth(): number; - /** - * Selects entire text - * @return {fabric.Text} thisArg - * @chainable - */ - selectAll(): Textbox; - /** - * Selects a line based on the index - * @param {Number} selectionStart Index of a character - * @return {fabric.IText} thisArg - * @chainable - */ - selectLine(selectionStart: number): Textbox; - /** - * Enters editing state - * @return {fabric.Textbox} thisArg - * @chainable - */ - enterEditing(): Textbox; - /** - * Exits from editing state - * @return {fabric.Textbox} thisArg - * @chainable - */ - exitEditing(): Textbox; -} -export interface IText extends Text, IITextOptions { } -export class IText extends Object { + constructor(text: string, options?: ITextboxOptions); /** - * Constructor - * @param text Text string - * @param [options] Options object + * Returns true if object has a style property or has it ina specified line + * @param {Number} lineIndex + * @return {Boolean} */ - constructor(text: string, options?: IITextOptions); + styleHas(property: string, lineIndex: number): boolean; /** - * Returns true if object has no styling or no styling in a line - * @param {Number} lineIndex , lineIndex is on wrapped lines. + * Returns true if object has no styling or no styling in a line + * @param {Number} lineIndex , lineIndex is on wrapped lines. + * @return {Boolean} */ isEmptyStyles(lineIndex: number): boolean; - render(ctx: CanvasRenderingContext2D, noTransform: boolean): void; /** - * Returns object representation of an instance - * @param [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return object representation of an instance + * Detect if the text line is ended with an hard break + * text and itext do not have wrapping, return false + * @param {Number} lineIndex text to split + * @return {Boolean} */ - toObject(propertiesToInclude?: string[]): any; - - setText(value: string): Text; + isEndOfWrapping(lineIndex: number): boolean; /** - * Sets selection start (left boundary of a selection) - * @param index Index to set selection start to + * Returns fabric.Textbox instance from an object representation + * @static + * @memberOf fabric.Textbox + * @param {Object} object Object to create an instance from + * @param {Function} [callback] Callback to invoke when an fabric.Textbox instance is created */ - setSelectionStart(index: number): void; - /** - * Sets selection end (right boundary of a selection) - * @param index Index to set selection end to - */ - setSelectionEnd(index: number): void; - /** - * Gets style of a current selection/cursor (at the start position) - * @param [startIndex] Start index to get styles at - * @param [endIndex] End index to get styles at - * @return styles Style object at a specified (or current) index - */ - getSelectionStyles(startIndex: number, endIndex: number, complete?: boolean): any; - /** - * Sets style of a current selection - * @param [styles] Styles object - * @return thisArg - * @chainable - */ - setSelectionStyles(styles: any): Text; - - /** - * Renders cursor or selection (depending on what exists) - */ - renderCursorOrSelection(): void; - - /** - * Returns 2d representation (lineIndex and charIndex) of cursor (or selection start) - * @param [selectionStart] Optional index. When not given, current selectionStart is used. - */ - get2DCursorLocation(selectionStart?: number): void; - /** - * Returns complete style of char at the current cursor - * @param lineIndex Line index - * @param charIndex Char index - * @return Character style - */ - getCurrentCharStyle(lineIndex: number, charIndex: number): any; - - /** - * Returns fontSize of char at the current cursor - * @param lineIndex Line index - * @param charIndex Char index - * @return Character font size - */ - getCurrentCharFontSize(lineIndex: number, charIndex: number): number; - - /** - * Returns color (fill) of char at the current cursor - * @param lineIndex Line index - * @param charIndex Char index - * @return Character color (fill) - */ - getCurrentCharColor(lineIndex: number, charIndex: number): string; - /** - * Renders cursor - */ - renderCursor(boundaries: any): void; - - /** - * Renders text selection - * @param chars Array of characters - * @param boundaries Object with left/top/leftOffset/topOffset - */ - renderSelection(chars: string[], boundaries: any): void; - - // functions from itext behavior mixin - // ------------------------------------------------------------------------------------------------------------------------ - /** - * Initializes all the interactive behavior of IText - */ - initBehavior(): void; - - /** - * Initializes "selected" event handler - */ - initSelectedHandler(): void; - - /** - * Initializes "added" event handler - */ - initAddedHandler(): void; - - initRemovedHandler(): void; - - /** - * Initializes delayed cursor - */ - initDelayedCursor(restart: boolean): void; - - /** - * Aborts cursor animation and clears all timeouts - */ - abortCursorAnimation(): void; - - /** - * Selects entire text - */ - selectAll(): void; - - /** - * Returns selected text - */ - getSelectedText(): string; - - /** - * Find new selection index representing start of current word according to current selection index - * @param startFrom Surrent selection index - * @return New selection index - */ - findWordBoundaryLeft(startFrom: number): number; - - /** - * Find new selection index representing end of current word according to current selection index - * @param startFrom Current selection index - * @return New selection index - */ - findWordBoundaryRight(startFrom: number): number; - - /** - * Find new selection index representing start of current line according to current selection index - * @param startFrom Current selection index - */ - findLineBoundaryLeft(startFrom: number): number; - - /** - * Find new selection index representing end of current line according to current selection index - * @param startFrom Current selection index - */ - findLineBoundaryRight(startFrom: number): number; - - /** - * Returns number of newlines in selected text - */ - getNumNewLinesInSelectedText(): number; - - /** - * Finds index corresponding to beginning or end of a word - * @param selectionStart Index of a character - * @param direction: 1 or -1 - */ - searchWordBoundary(selectionStart: number, direction: number): number; - - /** - * Selects a word based on the index - * @param selectionStart Index of a character - */ - selectWord(selectionStart: number): void; - /** - * Selects a line based on the index - * @param selectionStart Index of a character - */ - selectLine(selectionStart: number): void; - - /** - * Enters editing state - */ - enterEditing(): IText; - - /** - * Initializes "mousemove" event handler - */ - initMouseMoveHandler(): void; - /** - * Exits from editing state - * @return thisArg - * @chainable - */ - exitEditing(): IText; - - /** - * Inserts a character where cursor is (replacing selection if one exists) - * @param _chars Characters to insert - */ - insertChars(_chars: string, useCopiedStyle?: boolean): void; - /** - * Inserts new style object - * @param lineIndex Index of a line - * @param charIndex Index of a char - * @param isEndOfLine True if it's end of line - */ - insertNewlineStyleObject(lineIndex: number, charIndex: number, isEndOfLine: boolean): void; - - /** - * Inserts style object for a given line/char index - * @param lineIndex Index of a line - * @param charIndex Index of a char - * @param [style] Style object to insert, if given - */ - insertCharStyleObject(lineIndex: number, charIndex: number, isEndOfLine: boolean): void; - - /** - * Inserts style object(s) - * @param _chars Characters at the location where style is inserted - * @param isEndOfLine True if it's end of line - * @param [useCopiedStyle] Style to insert - */ - insertStyleObjects(_chars: string, isEndOfLine: boolean, useCopiedStyle?: boolean): void; - - /** - * Shifts line styles up or down - * @param lineIndex Index of a line - * @param offset Can be -1 or +1 - */ - shiftLineStyles(lineIndex: number, offset: number): void; - - /** - * Removes style object - * @param isBeginningOfLine True if cursor is at the beginning of line - * @param [index] Optional index. When not given, current selectionStart is used. - */ - removeStyleObject(isBeginningOfLine: boolean, index?: number): void; - /** - * Inserts new line - */ - insertNewline(): void; - - /** - * Returns fabric.IText instance from an object representation - * @param object Object to create an instance from - */ - static fromObject(object: any): IText; + static fromObject(object: any, callback?: Function): Textbox; } - interface ITriangleOptions extends IObjectOptions { } export class Triangle extends Object { /** @@ -4379,19 +3810,12 @@ export class Triangle extends Object { * @param [options] Options object */ constructor(options?: ITriangleOptions); - - /** - * Returns complexity of an instance - * @return complexity of this instance - */ - complexity(): number; /** * Returns SVG representation of an instance * @param [reviver] Method for further parsing of svg representation. * @return svg representation of an instance */ toSVG(reviver?: Function): string; - /** * Returns Triangle instance from an object representation * @param object Object to create an instance from From acb6157ad35ff6113ae86a46a52c9785651fb795 Mon Sep 17 00:00:00 2001 From: Bryan Krol Date: Tue, 19 Feb 2019 20:19:04 -0500 Subject: [PATCH 03/16] Updated some of the definitions --- types/fabric/fabric-impl.d.ts | 177 ++++++++++++++++++++++++++++++---- 1 file changed, 159 insertions(+), 18 deletions(-) diff --git a/types/fabric/fabric-impl.d.ts b/types/fabric/fabric-impl.d.ts index f511e8f528..473c0aaf23 100644 --- a/types/fabric/fabric-impl.d.ts +++ b/types/fabric/fabric-impl.d.ts @@ -628,7 +628,6 @@ interface IPatternOptions { export interface Pattern extends IPatternOptions { } export class Pattern { constructor(options?: IPatternOptions); - initialise(options?: IPatternOptions): Pattern; /** * Returns object representation of a pattern * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output @@ -1472,6 +1471,32 @@ export class StaticCanvas { * @param [callback] Receives cloned instance as a first argument */ cloneWithoutData(callback: Function): void; + + /** + * Populates canvas with data from the specified dataless JSON. + * JSON format must conform to the one of {@link fabric.Canvas#toDatalessJSON} + * @deprecated since 1.2.2 + * @param {String|Object} json JSON string or object + * @param {Function} callback Callback, invoked when json is parsed + * and corresponding objects (e.g: {@link fabric.Image}) + * are initialized + * @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created. + * @return {fabric.Canvas} instance + * @chainable + * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#deserialization} + */ + loadFromDatalessJSON(json: any, callback?: Function, reviver?: Function): Canvas; + /** + * Populates canvas with data from the specified JSON. + * JSON format must conform to the one of {@link fabric.Canvas#toJSON} + * @param {String|Object} json JSON string or object + * @param {Function} callback Callback, invoked when json is parsed + * and corresponding objects (e.g: {@link fabric.Image}) + * are initialized + * @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created. + * @return {fabric.Canvas} instance + */ + loadFromJSON(json: any, callback?: Function, reviver?: Function): Canvas; } interface ICanvasOptions extends IStaticCanvasOptions { @@ -1775,7 +1800,7 @@ export class Canvas { * @param {Boolean} ignoreZoom * @return {Object} object with "x" and "y" number values */ - getPointer(e: Event, ignoreZoom: boolean): { x: number; y: number; }; + getPointer(e: Event, ignoreZoom?: boolean): { x: number; y: number; }; /** * Returns context of canvas where object selection is drawn * @return {CanvasRenderingContext2D} @@ -2149,7 +2174,6 @@ export class Image { * @param [options] Options object */ constructor(element?: string | HTMLImageElement, options?: IImageOptions); - initialize(element?: string | HTMLImageElement, options?: IImageOptions): void; /** * Returns image element which this instance if based on * @return Image element @@ -2268,7 +2292,6 @@ export class Line { * @param [options] Options object */ constructor(points?: number[], objObjects?: ILineOptions); - initialize(points?: number[], options?: ILineOptions): Line; /** * Returns svg representation of an instance * @return {Array} an array of strings with the specific svg representation @@ -3045,11 +3068,6 @@ export class Object { */ setAngle(angle: number): Object; - /** - * Removes object from canvas to which it was added last - */ - remove(): Object; - /** * Sets object's properties from options * @param [options] Options object @@ -3300,7 +3318,6 @@ export class Path { pathOffset: Point; - initialize(path?: Point[], options?: IPathOptions): Path; /** * Returns svg clipPath representation of an instance * @param {Function} [reviver] Method for further parsing of svg representation. @@ -3366,7 +3383,6 @@ export class Polyline extends Object { * @param [skipOffset] Whether points offsetting should be skipped */ constructor(points: Array<{ x: number; y: number }>, options?: IPolylineOptions); - initialize(points: Point[], options?: IPolylineOptions): void; /** * List of attribute names to account for when parsing SVG element (used by `fabric.Polygon.fromElement`) */ @@ -3403,7 +3419,6 @@ export class Rect extends Object { * @param [options] Options object */ constructor(options?: IRectOptions); - initialize(options?: IRectOptions): Rect; /** * List of attribute names to account for when parsing SVG element (used by `fabric.Rect.fromElement`) */ @@ -3510,10 +3525,10 @@ interface TextOptions extends IObjectOptions { * @type {Number} */ deltaY?: number; + text?: string; } export interface Text extends TextOptions { } export class Text extends Object { - text?: string; /** * Constructor * @param text Text string @@ -3541,7 +3556,7 @@ export class Text extends Object { * text and itext do not have wrapping, return false * @return {Boolean} */ - isEndOfWrapping(): boolean; + isEndOfWrapping(lineIndex: number): boolean; /** * Returns string representation of an instance */ @@ -3675,7 +3690,7 @@ interface ITextOptions extends TextOptions { path?: string; useNative?: boolean; } -export interface IText extends ITextOptions, IObservable { } +export interface IText extends ITextOptions { } export class IText extends Text { /** * Constructor @@ -3683,7 +3698,6 @@ export class IText extends Text { * @param [options] Options object */ constructor(text: string, options?: ITextOptions); - initialize(text: string, options?: ITextOptions): IText; /** * Sets selection start (left boundary of a selection) * @param {Number} index Index to set selection start to @@ -3736,6 +3750,133 @@ export class IText extends Text { * @param {function} [callback] invoked with new instance as argument */ static fromObject(object: any, callback?: Function): IText; + /** + * Initializes all the interactive behavior of IText + */ + initBehavior(): void; + onDeselect(): void; + /** + * Initializes "added" event handler + */ + initAddedHandler(): void; + /** + * Initializes delayed cursor + */ + initDelayedCursor(): void; + /** + * Aborts cursor animation and clears all timeouts + */ + abortCursorAnimation(): void; + /** + * Selects entire text + * @return {fabric.IText} thisArg + * @chainable + */ + selectAll(): IText; + /** + * Returns selected text + * @return {String} + */ + getSelectedText(): string; + /** + * Find new selection index representing start of current word according to current selection index + * @param {Number} startFrom Surrent selection index + * @return {Number} New selection index + */ + findWordBoundaryLeft(startFrom: number): number; + /** + * Find new selection index representing end of current word according to current selection index + * @param {Number} startFrom Current selection index + * @return {Number} New selection index + */ + findWordBoundaryRight(startFrom: number): number; + /** + * Find new selection index representing start of current line according to current selection index + * @param {Number} startFrom Current selection index + * @return {Number} New selection index + */ + findLineBoundaryLeft(startFrom: number): number; + /** + * Find new selection index representing end of current line according to current selection index + * @param {Number} startFrom Current selection index + * @return {Number} New selection index + */ + findLineBoundaryRight(startFrom: number): number; + /** + * Finds index corresponding to beginning or end of a word + * @param {Number} selectionStart Index of a character + * @param {Number} direction 1 or -1 + * @return {Number} Index of the beginning or end of a word + */ + searchWordBoundary(selectionStart: number, direction: number): number; + /** + * Selects a word based on the index + * @param {Number} selectionStart Index of a character + */ + selectWord(selectionStart: number): void; + /** + * Selects a line based on the index + * @param {Number} selectionStart Index of a character + * @return {fabric.IText} thisArg + * @chainable + */ + selectLine(selectionStart: number): IText; + /** + * Enters editing state + * @return {fabric.IText} thisArg + * @chainable + */ + enterEditing(): IText; + /** + * Initializes "mousemove" event handler + */ + initMouseMoveHandler(): void; + /** + * Exits from editing state + * @return {fabric.IText} thisArg + * @chainable + */ + exitEditing(): IText; + /** + * remove and reflow a style block from start to end. + * @param {Number} start linear start position for removal (included in removal) + * @param {Number} end linear end position for removal ( excluded from removal ) + */ + removeStyleFromTo(start: number, end: number): void; + /** + * Shifts line styles up or down + * @param {Number} lineIndex Index of a line + * @param {Number} offset Can any number? + */ + shiftLineStyles(lineIndex: number, offset: number): void; + /** + * Inserts new style object + * @param {Number} lineIndex Index of a line + * @param {Number} charIndex Index of a char + * @param {Number} qty number of lines to add + * @param {Array} copiedStyle Array of objects styles + */ + insertNewlineStyleObject(lineIndex: number, charIndex: number, qty: number, copiedStyle: any[]): void; + /** + * Inserts style object for a given line/char index + * @param {Number} lineIndex Index of a line + * @param {Number} charIndex Index of a char + * @param {Number} quantity number Style object to insert, if given + * @param {Array} copiedStyle array of style objecs + */ + insertCharStyleObject(lineIndex: number, charIndex: number, quantity: number, copiedStyle: any[]): void; + /** + * Inserts style object(s) + * @param {Array} insertedText Characters at the location where style is inserted + * @param {Number} start cursor index for inserting style + * @param {Array} [copiedStyle] array of style objects to insert. + */ + insertNewStyleBlock(insertedText: any[], start: number, copiedStyle: any[]): void; + /** + * Set the selectionStart and selectionEnd according to the ne postion of cursor + * mimic the key - mouse navigation when shift is pressed. + */ + setSelectionStartEndWithShift(start: number, end: number, newSelection: number): void; } interface ITextboxOptions extends ITextOptions { /** @@ -3767,7 +3908,7 @@ interface ITextboxOptions extends ITextOptions { */ splitByGrapheme?: boolean; } -export interface Textbox extends ITextboxOptions, IObservable{} +export interface Textbox extends ITextboxOptions{} export class Textbox extends IText { /** * Constructor @@ -4699,7 +4840,7 @@ interface IUtilMisc { * @param elements SVG elements to group * @param [options] Options object */ - groupSVGElements(elements: any[], options?: any, path?: any): PathGroup; + groupSVGElements(elements: any[], options?: any, path?: string): Object | Group; /** * Populates an object with properties of another object From 40d20c7022cc9af3ccce2019ea6c06e0ddbc96a3 Mon Sep 17 00:00:00 2001 From: Bryan Krol Date: Wed, 20 Feb 2019 11:32:10 -0500 Subject: [PATCH 04/16] Updated Canvas and StaticCanvas --- types/fabric/fabric-impl.d.ts | 147 ++++++++++++++++++++++++---------- 1 file changed, 106 insertions(+), 41 deletions(-) diff --git a/types/fabric/fabric-impl.d.ts b/types/fabric/fabric-impl.d.ts index 473c0aaf23..e00a180b6e 100644 --- a/types/fabric/fabric-impl.d.ts +++ b/types/fabric/fabric-impl.d.ts @@ -1051,6 +1051,12 @@ interface IStaticCanvasOptions { * @type Boolean */ svgViewportTransformation: boolean; + /** + * Animation duration (in ms) for fx* methods + * @type Number + */ + FX_DURATION?: number; + } export interface StaticCanvas extends IObservable, IStaticCanvasOptions, ICollection, ICanvasAnimation { } export class StaticCanvas { @@ -1068,7 +1074,7 @@ export class StaticCanvas { * @return {fabric.Canvas} instance * @chainable */ - calcOffset(): StaticCanvas; + calcOffset(): Canvas; /** * Sets {@link fabric.StaticCanvas#overlayImage|overlay image} for this canvas @@ -1078,7 +1084,7 @@ export class StaticCanvas { * @return {fabric.Canvas} thisArg * @chainable */ - setOverlayImage(image: Image | string, callback: (img: HTMLImageElement | undefined) => void, options?: IImageOptions): StaticCanvas; + setOverlayImage(image: Image | string, callback: Function, options?: IImageOptions): Canvas; /** * Sets {@link fabric.StaticCanvas#backgroundImage|background image} for this canvas @@ -1088,7 +1094,7 @@ export class StaticCanvas { * @return {fabric.Canvas} thisArg * @chainable */ - setBackgroundImage(image: Image | string, callback?: Function, options?: IImageOptions): StaticCanvas; + setBackgroundImage(image: Image | string, callback: Function, options?: IImageOptions): Canvas; /** * Sets {@link fabric.StaticCanvas#overlayColor|foreground color} for this canvas @@ -1097,7 +1103,7 @@ export class StaticCanvas { * @return {fabric.Canvas} thisArg * @chainable */ - setOverlayColor(overlayColor: string | Pattern, callback: (pattern: Pattern | undefined) => void): StaticCanvas; + setOverlayColor(overlayColor: string | Pattern, callback: Function): Canvas; /** * Sets {@link fabric.StaticCanvas#backgroundColor|background color} for this canvas @@ -1106,7 +1112,7 @@ export class StaticCanvas { * @return {fabric.Canvas} thisArg * @chainable */ - setBackgroundColor(backgroundColor: string | Pattern, callback: (pattern: Pattern | undefined) => void): StaticCanvas; + setBackgroundColor(backgroundColor: string | Pattern, callback: Function): Canvas; /** * Returns canvas width (in px) @@ -1127,7 +1133,7 @@ export class StaticCanvas { * @return {fabric.Canvas} instance * @chainable true */ - setWidth(value: number | string, options?: ICanvasDimensionsOptions): StaticCanvas; + setWidth(value: number | string, options?: ICanvasDimensionsOptions): Canvas; /** * Sets height of this canvas instance @@ -1136,7 +1142,7 @@ export class StaticCanvas { * @return {fabric.Canvas} instance * @chainable true */ - setHeight(value: number | string, options?: ICanvasDimensionsOptions): StaticCanvas; + setHeight(value: number | string, options?: ICanvasDimensionsOptions): Canvas; /** * Sets dimensions (width, height) of this canvas instance. when options.cssOnly flag active you should also supply the unit of measure (px/%/em) @@ -1145,7 +1151,7 @@ export class StaticCanvas { * @return {fabric.Canvas} thisArg * @chainable */ - setDimensions(dimensions: ICanvasDimensions, options?: ICanvasDimensionsOptions): StaticCanvas; + setDimensions(dimensions: ICanvasDimensions, options?: ICanvasDimensionsOptions): Canvas; /** * Returns canvas zoom level @@ -1158,7 +1164,7 @@ export class StaticCanvas { * @return {fabric.Canvas} instance * @chainable */ - setViewportTransform(vpt: number[]): StaticCanvas; + setViewportTransform(vpt: number[]): Canvas; /** * Sets zoom level of this canvas instance, zoom centered around point @@ -1167,7 +1173,7 @@ export class StaticCanvas { * @return {fabric.Canvas} instance * @chainable true */ - zoomToPoint(point: Point, value: number): StaticCanvas; + zoomToPoint(point: Point, value: number): Canvas; /** * Sets zoom level of this canvas instance @@ -1175,7 +1181,7 @@ export class StaticCanvas { * @return {fabric.Canvas} instance * @chainable */ - setZoom(value: number): StaticCanvas; + setZoom(value: number): Canvas; /** * Pan viewport so as to place point at top left corner of canvas @@ -1183,7 +1189,7 @@ export class StaticCanvas { * @return {fabric.Canvas} instance * @chainable */ - absolutePan(point: Point): StaticCanvas; + absolutePan(point: Point): Canvas; /** * Pans viewpoint relatively @@ -1191,7 +1197,7 @@ export class StaticCanvas { * @return {fabric.Canvas} instance * @chainable */ - relativePan(point: Point): StaticCanvas; + relativePan(point: Point): Canvas; /** * Returns element corresponding to this instance @@ -1204,7 +1210,7 @@ export class StaticCanvas { * @param ctx Context to clear * @chainable */ - clearContext(ctx: CanvasRenderingContext2D): StaticCanvas; + clearContext(ctx: CanvasRenderingContext2D): Canvas; /** * Returns context of canvas where objects are drawn @@ -1217,14 +1223,14 @@ export class StaticCanvas { * @return {fabric.Canvas} thisArg * @chainable */ - clear(): StaticCanvas; + clear(): Canvas; /** * Renders the canvas * @return {fabric.Canvas} instance * @chainable */ - renderAll(): StaticCanvas; + renderAll(): Canvas; /** * Function created to be instance bound at initialization @@ -1236,7 +1242,7 @@ export class StaticCanvas { * @return {fabric.Canvas} instance * @chainable */ - renderAndReset(): StaticCanvas; + renderAndReset(): Canvas; /** * Append a renderAll request to next animation frame. @@ -1245,7 +1251,7 @@ export class StaticCanvas { * @return {fabric.Canvas} instance * @chainable */ - requestRenderAll(): StaticCanvas; + requestRenderAll(): Canvas; /** * Calculate the position of the 4 corner of canvas with current viewportTransform. @@ -1254,9 +1260,7 @@ export class StaticCanvas { * @return {Object} points.tl * @chainable */ - calcViewportBoundaries(): StaticCanvas; - - cancelRequestedRender(): void; + calcViewportBoundaries(): {tl: Point, br: Point, tr: Point, bl: Point}; /** * Renders background, objects, overlay and controls. @@ -1265,7 +1269,7 @@ export class StaticCanvas { * @return {fabric.Canvas} instance * @chainable */ - renderCanvas(ctx: CanvasRenderingContext2D, objects: Object[] ): StaticCanvas; + renderCanvas(ctx: CanvasRenderingContext2D, objects: Object[] ): Canvas; /** * Paint the cached clipPath on the lowerCanvasEl @@ -1285,7 +1289,7 @@ export class StaticCanvas { * @param {fabric.Object} object Object to center horizontally * @return {fabric.Canvas} thisArg */ - centerObjectH(object: Object): StaticCanvas; + centerObjectH(object: Object): Canvas; /** * Centers object vertically in the canvas @@ -1293,7 +1297,7 @@ export class StaticCanvas { * @return {fabric.Canvas} thisArg * @chainable */ - centerObjectV(object: Object): StaticCanvas; + centerObjectV(object: Object): Canvas; /** * Centers object vertically and horizontally in the canvas @@ -1301,7 +1305,7 @@ export class StaticCanvas { * @return {fabric.Canvas} thisArg * @chainable */ - centerObject(object: Object): StaticCanvas; + centerObject(object: Object): Canvas; /** * Centers object vertically and horizontally in the viewport @@ -1309,7 +1313,7 @@ export class StaticCanvas { * @return {fabric.Canvas} thisArg * @chainable */ - viewportCenterObject(object: Object): StaticCanvas; + viewportCenterObject(object: Object): Canvas; /** * Centers object horizontally in the viewport, object.top is unchanged @@ -1317,7 +1321,7 @@ export class StaticCanvas { * @return {fabric.Canvas} thisArg * @chainable */ - viewportCenterObjectH(object: Object): StaticCanvas; + viewportCenterObjectH(object: Object): Canvas; /** * Centers object Vertically in the viewport, object.top is unchanged @@ -1325,7 +1329,7 @@ export class StaticCanvas { * @return {fabric.Canvas} thisArg * @chainable */ - viewportCenterObjectV(object: Object): StaticCanvas; + viewportCenterObjectV(object: Object): Canvas; /** * Calculate the point in canvas that correspond to the center of actual viewport. @@ -1360,7 +1364,7 @@ export class StaticCanvas { * @param [reviver] Method for further parsing of svg elements, called after each fabric object converted into svg representation. * @return {String} SVG string */ - toSVG(options: IToSVGOptions, reviver?: Function): string; + toSVG(options?: IToSVGOptions, reviver?: Function): string; /** * Moves an object or the objects of a multiple selection @@ -1369,7 +1373,7 @@ export class StaticCanvas { * @return {fabric.Canvas} thisArg * @chainable */ - sendToBack(object: Object): StaticCanvas; + sendToBack(object: Object): Canvas; /** * Moves an object or the objects of a multiple selection @@ -1378,7 +1382,7 @@ export class StaticCanvas { * @return {fabric.Canvas} thisArg * @chainable */ - bringToFront(object: Object): StaticCanvas; + bringToFront(object: Object): Canvas; /** * Moves an object or a selection down in stack of drawn objects @@ -1391,7 +1395,7 @@ export class StaticCanvas { * @return {fabric.Canvas} thisArg * @chainable */ - sendBackwards(object: Object, intersecting?: boolean): StaticCanvas; + sendBackwards(object: Object, intersecting?: boolean): Canvas; /** * Moves an object or a selection up in stack of drawn objects @@ -1404,7 +1408,7 @@ export class StaticCanvas { * @return {fabric.Canvas} thisArg * @chainable */ - bringForward(object: Object, intersecting?: boolean): StaticCanvas; + bringForward(object: Object, intersecting?: boolean): Canvas; /** * Moves an object to specified level in stack of drawn objects @@ -1413,13 +1417,13 @@ export class StaticCanvas { * @return {fabric.Canvas} thisArg * @chainable */ - moveTo(object: Object, index: number): StaticCanvas; + moveTo(object: Object, index: number): Canvas; /** * Clears a canvas element and dispose objects * @return {fabric.Canvas} thisArg * @chainable */ - dispose(): StaticCanvas; + dispose(): Canvas; /** * Returns a string representation of an instance @@ -1462,7 +1466,7 @@ export class StaticCanvas { * @param [callback] Receives cloned instance as a first argument * @param [properties] Array of properties to include in the cloned canvas and children */ - clone(callback: Function, properties?: string[]): void; + clone(callback?: any, properties?: string[]): void; /** * Clones canvas instance without cloning existing data. @@ -1470,7 +1474,7 @@ export class StaticCanvas { * but leaves data empty (so that you can populate it with your own) * @param [callback] Receives cloned instance as a first argument */ - cloneWithoutData(callback: Function): void; + cloneWithoutData(callback?: any): void; /** * Populates canvas with data from the specified dataless JSON. @@ -1485,7 +1489,7 @@ export class StaticCanvas { * @chainable * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#deserialization} */ - loadFromDatalessJSON(json: any, callback?: Function, reviver?: Function): Canvas; + loadFromDatalessJSON(json: any, callback: Function, reviver?: Function): Canvas; /** * Populates canvas with data from the specified JSON. * JSON format must conform to the one of {@link fabric.Canvas#toJSON} @@ -1496,7 +1500,64 @@ export class StaticCanvas { * @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created. * @return {fabric.Canvas} instance */ - loadFromJSON(json: any, callback?: Function, reviver?: Function): Canvas; + loadFromJSON(json: any, callback: Function, reviver?: Function): Canvas; + /** + * Creates markup containing SVG font faces, + * font URLs for font faces must be collected by developers + * and are not extracted from the DOM by fabricjs + * @param {Array} objects Array of fabric objects + * @return {String} + */ + createSVGFontFacesMarkup(objects: any[]): string; + /** + * Creates markup containing SVG referenced elements like patterns, gradients etc. + * @return {String} + */ + createSVGRefElementsMarkup(): string; + /** + * Centers object horizontally with animation. + * @param {fabric.Object} object Object to center + * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties + * @param {Function} [callbacks.onComplete] Invoked on completion + * @param {Function} [callbacks.onChange] Invoked on every step of animation + * @return {fabric.Canvas} thisArg + * @chainable + */ + fxCenterObjectH(object: Object, callbacks?: Callbacks): Canvas; + /** + * Centers object vertically with animation. + * @param {fabric.Object} object Object to center + * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties + * @param {Function} [callbacks.onComplete] Invoked on completion + * @param {Function} [callbacks.onChange] Invoked on every step of animation + * @return {fabric.Canvas} thisArg + * @chainable + */ + fxCenterObjectV(object: Object, callbacks?: Callbacks): Canvas; + /** + * Same as `fabric.Canvas#remove` but animated + * @param {fabric.Object} object Object to remove + * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties + * @param {Function} [callbacks.onComplete] Invoked on completion + * @param {Function} [callbacks.onChange] Invoked on every step of animation + * @return {fabric.Canvas} thisArg + * @chainable + */ + fxRemove(object: Object, callbacks?: Callbacks): Canvas; + /** + * Same as {@link fabric.Canvas.prototype.straightenObject}, but animated + * @param {fabric.Object} object Object to straighten + * @return {fabric.Canvas} thisArg + * @chainable + */ + fxStraightenObject(object: Object): Canvas; + /** + * Straightens object, then rerenders canvas + * @param {fabric.Object} object Object to straighten + * @return {fabric.Canvas} thisArg + * @chainable + */ + straightenObject(object: Object): Canvas; } interface ICanvasOptions extends IStaticCanvasOptions { @@ -1570,7 +1631,7 @@ interface ICanvasOptions extends IStaticCanvasOptions { * @type String|Array * @default */ - selectionKey?: string; + selectionKey?: string | string[]; /** * Indicates which key enable alternative selection @@ -1584,7 +1645,7 @@ interface ICanvasOptions extends IStaticCanvasOptions { * @type null|String * @default */ - altSelectionKey?: string; + altSelectionKey?: string | null; /** * Color of selection @@ -1869,6 +1930,10 @@ export class Canvas { * @param [propertiesToInclude] Any properties that you might want to additionally include in the output */ static toJSON(propertiesToInclude?: string[]): string; + /** + * Removes all event listeners + */ + removeListeners(): void; } /////////////////////////////////////////////////////////////////////////////// From 9fbdc9019b060ce0cb209f5aaf0abce218a6a910 Mon Sep 17 00:00:00 2001 From: Bryan Krol Date: Wed, 20 Feb 2019 12:13:45 -0500 Subject: [PATCH 05/16] Updated type defs based on findings in test that have been verified and updated tests to ensure they are up to date with the latest definitions based on fabricjs codebase --- types/fabric/fabric-impl.d.ts | 20 ++++++------ types/fabric/test/index.ts | 60 ++++++++++++----------------------- 2 files changed, 30 insertions(+), 50 deletions(-) diff --git a/types/fabric/fabric-impl.d.ts b/types/fabric/fabric-impl.d.ts index e00a180b6e..69c226988b 100644 --- a/types/fabric/fabric-impl.d.ts +++ b/types/fabric/fabric-impl.d.ts @@ -522,7 +522,7 @@ interface IGradientOptions { */ offsetY?: number; type?: string; - coords?: {x1: number, y1: number, x2: number, y2: number, r1: number, r2: number}; + coords?: {x1?: number, y1?: number, x2?: number, y2?: number, r1?: number, r2?: number}; /** * Color stops object eg. {0:string; 1:string; */ @@ -931,7 +931,7 @@ interface IStaticCanvasOptions { * vale. As an alternative you can disable image objectCaching * @type fabric.Image */ - backgroundImage?: Image; + backgroundImage?: Image | string; /** * Overlay color of canvas instance. * Should be set via {@link fabric.StaticCanvas#setOverlayColor} @@ -1050,7 +1050,7 @@ interface IStaticCanvasOptions { * a zoomed canvas will then produce zoomed SVG output. * @type Boolean */ - svgViewportTransformation: boolean; + svgViewportTransformation?: boolean; /** * Animation duration (in ms) for fx* methods * @type Number @@ -2335,19 +2335,19 @@ interface ILineOptions extends IObjectOptions { /** * x value or first line edge */ - x1: number; + x1?: number; /** * x value or second line edge */ - x2: number; + x2?: number; /** * y value or first line edge */ - y1: number; + y1?: number; /** * y value or second line edge */ - y2: number; + y2?: number; } export interface Line extends Object, ILineOptions { } export class Line { @@ -2599,7 +2599,7 @@ interface IObjectOptions { /** * Shadow object representing shadow of this shape */ - shadow?: Shadow; + shadow?: Shadow | string; /** * Opacity of object's controlling borders when object is active and moving @@ -3536,7 +3536,7 @@ interface TextOptions extends IObjectOptions { * "justify-left", "justify-center" or "justify-right". * @type String */ - textAlign?: 'left' | 'center' | 'right' | 'justify' | 'justify-left' | 'justify-center' | 'justify-right'; + textAlign?: string; /** * Font style . Possible values: "", "normal", "italic" or "oblique". * @type String @@ -3572,7 +3572,7 @@ interface TextOptions extends IObjectOptions { * Backwards incompatibility note: This property was named "textShadow" (String) until v1.2.11 * @type fabric.Shadow */ - shadow?: Shadow; + shadow?: Shadow | string; /** * additional space between characters * expressed in thousands of em unit diff --git a/types/fabric/test/index.ts b/types/fabric/test/index.ts index 9a5c0b24d2..cd8884710a 100644 --- a/types/fabric/test/index.ts +++ b/types/fabric/test/index.ts @@ -236,21 +236,21 @@ function sample4() { const topControl = $('top-control'); topControl.onchange = function(this: HTMLInputElement) { - rect.setTop(+this.value).setCoords(); + rect.set('top',+this.value).setCoords(); canvas.renderAll(); }; const leftControl = $('left-control'); leftControl.onchange = function(this: HTMLInputElement) { - rect.setLeft(+this.value).setCoords(); + rect.set('left',+this.value).setCoords(); canvas.renderAll(); }; function updateControls() { - scaleControl.value = rect.getScaleX().toString(); - angleControl.value = rect.getAngle().toString(); - leftControl.value = rect.getLeft().toString(); - topControl.value = rect.getTop().toString(); + scaleControl.value = rect.scaleX.toString(); + angleControl.value = rect.angle.toString(); + leftControl.value = rect.left.toString(); + topControl.value = rect.top.toString(); } canvas.on({ 'object:moving': updateControls, @@ -343,7 +343,7 @@ function sample6() { const distX = Math.abs(p.x - obj.left); const distY = Math.abs(p.y - obj.top); const dist = Math.round(Math.sqrt(Math.pow(distX, 2) + Math.pow(distY, 2))); - obj.setOpacity(1 / (dist / 20)); + obj.set('opacity', (1 / (dist / 20))); }); }); }); @@ -373,7 +373,7 @@ function sample7() { if (img.left > 900 || img.top > 500) { canvas.remove(img); } else { - img.setAngle(img.getAngle() + 2); + img.setAngle(img.angle + 2); } }); canvas.renderAll(); @@ -554,15 +554,8 @@ function sample8() { const removeSelectedEl = document.getElementById('remove-selected'); removeSelectedEl.onclick = () => { const activeObject = canvas.getActiveObject(); - const activeGroup = canvas.getActiveGroup(); if (activeObject) { canvas.remove(activeObject); - } else if (activeGroup) { - const objectsInGroup = activeGroup.getObjects(); - canvas.discardActiveGroup(); - objectsInGroup.forEach(object => { - canvas.remove(object); - }); } }; @@ -601,10 +594,9 @@ function sample8() { slider.onchange = function() { const activeObject = canvas.getActiveObject(); - const activeGroup = canvas.getActiveGroup(); - if (activeObject || activeGroup) { - (activeObject || activeGroup).setOpacity(parseInt(( this).value, 10) / 100); + if (activeObject) { + activeObject.set('opacity', (parseInt(( this).value, 10) / 100)); canvas.renderAll(); } }; @@ -632,10 +624,9 @@ function sample8() { colorpicker.onchange = function() { const activeObject = canvas.getActiveObject(); - const activeGroup = canvas.getActiveGroup(); - if (activeObject || activeGroup) { - (activeObject || activeGroup).setFill(( this).value); + if (activeObject) { + activeObject.set('fill', ( this).value); canvas.renderAll(); } }; @@ -768,16 +759,6 @@ function sample8() { updateComplexity(); }); - drawingColorEl.onchange = () => { - canvas.freeDrawingColor = drawingColorEl.value; - }; - drawingLineWidthEl.onchange = () => { - canvas.freeDrawingLineWidth = parseInt(drawingLineWidthEl.value, 10) || 1; // disallow 0, NaN, etc. - }; - - canvas.freeDrawingColor = drawingColorEl.value; - canvas.freeDrawingLineWidth = parseInt(drawingLineWidthEl.value, 10) || 1; - const text = `Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt @@ -802,7 +783,7 @@ laboris nisi ut aliquip ex ea commodo consequat.`; }; document.onkeydown = e => { - const obj = canvas.getActiveObject() || canvas.getActiveGroup(); + const obj = canvas.getActiveObject(); if (obj && e.keyCode === 8) { // this is horrible. need to fix, so that unified interface can be used if (obj.type === 'group') { @@ -832,8 +813,7 @@ laboris nisi ut aliquip ex ea commodo consequat.`; const obj = canvas.getActiveObject(); if (obj) { obj.setGradient("fill", { - x2: (getRandomInt(0, 1) ? 0 : obj.width), - y2: (getRandomInt(0, 1) ? 0 : obj.height), + coords: {x2: (getRandomInt(0, 1) ? 0 : obj.width), y2: (getRandomInt(0, 1) ? 0 : obj.height)}, colorStops: { 0: '#' + getRandomColor(), 1: '#' + getRandomColor() @@ -871,8 +851,8 @@ laboris nisi ut aliquip ex ea commodo consequat.`; cmdUnderlineBtn.onclick = function() { const activeObject = canvas.getActiveObject(); if (activeObject && activeObject.type === 'text') { - activeObject.textDecoration = (activeObject.textDecoration === 'underline' ? '' : 'underline'); - (this as HTMLElement).className = activeObject.textDecoration ? 'selected' : ''; + activeObject.underline = !activeObject.underline; + (this as HTMLElement).className = activeObject.underline ? 'selected' : ''; canvas.renderAll(); } }; @@ -884,8 +864,8 @@ laboris nisi ut aliquip ex ea commodo consequat.`; cmdLinethroughBtn.onclick = function() { const activeObject = canvas.getActiveObject(); if (activeObject && activeObject.type === 'text') { - activeObject.textDecoration = (activeObject.textDecoration === 'line-through' ? '' : 'line-through'); - (this as HTMLElement).className = activeObject.textDecoration ? 'selected' : ''; + activeObject.linethrough = !activeObject.linethrough; + (this as HTMLElement).className = activeObject.linethrough ? 'selected' : ''; canvas.renderAll(); } }; @@ -897,8 +877,8 @@ laboris nisi ut aliquip ex ea commodo consequat.`; cmdOverlineBtn.onclick = function() { const activeObject = canvas.getActiveObject(); if (activeObject && activeObject.type === 'text') { - activeObject.textDecoration = (activeObject.textDecoration === 'overline' ? '' : 'overline'); - (this as HTMLElement).className = activeObject.textDecoration ? 'selected' : ''; + activeObject.overline = !activeObject.overline; + (this as HTMLElement).className = activeObject.overline ? 'selected' : ''; canvas.renderAll(); } }; From e45bd0ef9f4d58ce7c87f2b828f696978b27bc3a Mon Sep 17 00:00:00 2001 From: Bryan Krol Date: Wed, 20 Feb 2019 12:19:18 -0500 Subject: [PATCH 06/16] Removed definitions that already existed and were creating conflicts --- types/fabric/fabric-impl.d.ts | 50 ++++++----------------------------- 1 file changed, 8 insertions(+), 42 deletions(-) diff --git a/types/fabric/fabric-impl.d.ts b/types/fabric/fabric-impl.d.ts index 69c226988b..48f9e56483 100644 --- a/types/fabric/fabric-impl.d.ts +++ b/types/fabric/fabric-impl.d.ts @@ -340,6 +340,14 @@ interface ICanvasAnimation { * @chainable */ fxRemove(object: Object): T; + + /** + * Same as {@link fabric.Canvas.prototype.straightenObject}, but animated + * @param {fabric.Object} object Object to straighten + * @return {fabric.Canvas} thisArg + * @chainable + */ + fxStraightenObject(object: Object): T; } interface IObjectAnimation { /** @@ -1051,11 +1059,6 @@ interface IStaticCanvasOptions { * @type Boolean */ svgViewportTransformation?: boolean; - /** - * Animation duration (in ms) for fx* methods - * @type Number - */ - FX_DURATION?: number; } export interface StaticCanvas extends IObservable, IStaticCanvasOptions, ICollection, ICanvasAnimation { } @@ -1514,43 +1517,6 @@ export class StaticCanvas { * @return {String} */ createSVGRefElementsMarkup(): string; - /** - * Centers object horizontally with animation. - * @param {fabric.Object} object Object to center - * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties - * @param {Function} [callbacks.onComplete] Invoked on completion - * @param {Function} [callbacks.onChange] Invoked on every step of animation - * @return {fabric.Canvas} thisArg - * @chainable - */ - fxCenterObjectH(object: Object, callbacks?: Callbacks): Canvas; - /** - * Centers object vertically with animation. - * @param {fabric.Object} object Object to center - * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties - * @param {Function} [callbacks.onComplete] Invoked on completion - * @param {Function} [callbacks.onChange] Invoked on every step of animation - * @return {fabric.Canvas} thisArg - * @chainable - */ - fxCenterObjectV(object: Object, callbacks?: Callbacks): Canvas; - /** - * Same as `fabric.Canvas#remove` but animated - * @param {fabric.Object} object Object to remove - * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties - * @param {Function} [callbacks.onComplete] Invoked on completion - * @param {Function} [callbacks.onChange] Invoked on every step of animation - * @return {fabric.Canvas} thisArg - * @chainable - */ - fxRemove(object: Object, callbacks?: Callbacks): Canvas; - /** - * Same as {@link fabric.Canvas.prototype.straightenObject}, but animated - * @param {fabric.Object} object Object to straighten - * @return {fabric.Canvas} thisArg - * @chainable - */ - fxStraightenObject(object: Object): Canvas; /** * Straightens object, then rerenders canvas * @param {fabric.Object} object Object to straighten From 48c4b1fc133a232fa37a625c467cfd7d7e248035 Mon Sep 17 00:00:00 2001 From: Bryan Krol Date: Wed, 20 Feb 2019 16:25:30 -0500 Subject: [PATCH 07/16] Updated definitions for Object and IObjectOptions --- types/fabric/fabric-impl.d.ts | 309 +++++++++++++++++++++++++++------- 1 file changed, 252 insertions(+), 57 deletions(-) diff --git a/types/fabric/fabric-impl.d.ts b/types/fabric/fabric-impl.d.ts index 48f9e56483..700e4eca97 100644 --- a/types/fabric/fabric-impl.d.ts +++ b/types/fabric/fabric-impl.d.ts @@ -2349,6 +2349,7 @@ export class Line { */ makeEdgeToOriginGetter(propertyNames: {origin: number, axis1: any, axis2: any, dimension: any}, originValues: {nearest: any, center: any, farthest: any}): Function; } + interface IObjectOptions { /** * Type of an object (rect, circle, path, etc.). @@ -2417,15 +2418,15 @@ interface IObjectOptions { */ angle?: number; - /** - * Object skew factor (horizontal) - */ - skewX?: number; + /** + * Object skew factor (horizontal) + */ + skewX?: number; - /** - * Object skew factor (vertical) - */ - skewY?: number; + /** + * Object skew factor (vertical) + */ + skewY?: number; /** * Size of object's controlling corners (in pixels) @@ -2457,10 +2458,10 @@ interface IObjectOptions { */ borderColor?: string; - /** - * Array specifying dash pattern of an object's border (hasBorder must be true) - */ - borderDashArray?: number[]; + /** + * Array specifying dash pattern of an object's border (hasBorder must be true) + */ + borderDashArray?: number[]; /** * Color of controlling corners of an object (when it's active) @@ -2761,12 +2762,12 @@ interface IObjectOptions { cacheProperties?: string[]; /** - * A fabricObject that, without stroke define a clipping area with their shape. filled in black - * the clipPath object gets used when the object has rendered, and the context is placed in the center - * of the object cacheCanvas. - * If you want 0,0 of a clipPath to align with an object center, use clipPath.originX/Y to 'center' - */ - clipPath?: Object; + * A fabricObject that, without stroke define a clipping area with their shape. filled in black + * the clipPath object gets used when the object has rendered, and the context is placed in the center + * of the object cacheCanvas. + * If you want 0,0 of a clipPath to align with an object center, use clipPath.originX/Y to 'center' + */ + clipPath?: Object; /** * Meaningful ONLY when the object is used as clipPath. @@ -2798,11 +2799,40 @@ interface IObjectOptions { * Not used by fabric, just for convenience */ data?: any; - - /** - * Describes the object's corner position in canvas object absolute properties. - */ - aCoords?: {bl: Point, br: Point, tl: Point, tr: Point}; + /** + * Describe object's corner position in canvas element coordinates. + * properties are tl,mt,tr,ml,mr,bl,mb,br,mtr for the main controls. + * each property is an object with x, y and corner. + * The `corner` property contains in a similar manner the 4 points of the + * interactive area of the corner. + * The coordinates depends from this properties: width, height, scaleX, scaleY + * skewX, skewY, angle, strokeWidth, viewportTransform, top, left, padding. + * The coordinates get updated with @method setCoords. + * You can calculate them without updating with @method calcCoords; + * @memberOf fabric.Object.prototype + */ + oCoords?: {tl: Point, mt: Point, tr: Point, ml: Point, mr: Point, bl: Point, mb: Point, br: Point, mtr: Point}; + /** + * Describe object's corner position in canvas object absolute coordinates + * properties are tl,tr,bl,br and describe the four main corner. + * each property is an object with x, y, instance of Fabric.Point. + * The coordinates depends from this properties: width, height, scaleX, scaleY + * skewX, skewY, angle, strokeWidth, top, left. + * Those coordinates are usefull to understand where an object is. They get updated + * with oCoords but they do not need to be updated when zoom or panning change. + * The coordinates get updated with @method setCoords. + * You can calculate them without updating with @method calcCoords(true); + * @memberOf fabric.Object.prototype + */ + aCoords?: {bl: Point, br: Point, tl: Point, tr: Point}; + /** + * storage for object full transform matrix + */ + matrixCache?: any; + /** + * storage for object transform matrix + */ + ownMatrixCache?: any; } export interface Object extends IObservable, IObjectOptions, IObjectAnimation { } export class Object { @@ -2810,8 +2840,8 @@ export class Object { initialize(options?: IObjectOptions): Object; /* Sets object's properties from options - * @param {Object} [options] Options object - */ + * @param {Object} [options] Options object + */ setOptions(options: IObjectOptions): void; /** @@ -2866,7 +2896,7 @@ export class Object { /** * Retrieves viewportTransform from Object's canvas if possible */ - getViewportTransform(): any; + getViewportTransform(): any[]; /** * Renders an object on a specified context @@ -2924,7 +2954,7 @@ export class Object { * @param {Boolean} skipCanvas skip canvas checks because this object is painted * on parent canvas. */ - isCacheDirty(): boolean; + isCacheDirty(skipCanvas?: boolean): boolean; /** * Clones an instance, using a callback method will work for every object. @@ -2983,7 +3013,7 @@ export class Object { * @param property Property name 'stroke' or 'fill' * @param [options] Options object */ - setGradient(property: "stroke" | "fill", options: IGradientOptions): Object; + setGradient(property: "stroke" | "fill", options?: IGradientOptions): Object; /** * Sets pattern fill of an object @@ -3103,7 +3133,7 @@ export class Object { * Sets object's properties from options * @param [options] Options object */ - setOptions(options: any): void; + setOptions(options?: any): void; /** * Sets sourcePath of an object * @param value Value to set sourcePath to @@ -3113,12 +3143,16 @@ export class Object { // ----------------------------------------------------------------------------------------------------------------------------------- /** * Returns styles-string for svg-export + * @param {Boolean} skipShadow a boolean to skip shadow filter output + * @return {String} */ - getSvgStyles(): string; + getSvgStyles(skipShadow?: boolean): string; /** * Returns transform-string for svg-export + * @param {Boolean} use the full transform or the single object one. + * @return {String} */ - getSvgTransform(): string; + getSvgTransform(full?: boolean, additionalTransform?: string): string; /** * Returns transform-string for svg-export from the transform matrix of single elements */ @@ -3128,8 +3162,10 @@ export class Object { // ----------------------------------------------------------------------------------------------------------------------------------- /** * 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 */ - hasStateChanged(): boolean; + hasStateChanged(propertySet: string): boolean; /** * Saves state of an object * @param [options] Object with additional `stateProperties` array to include when saving state @@ -3138,8 +3174,10 @@ export class Object { saveState(options?: { stateProperties: any[] }): Object; /** * Setups state of an object + * @param {Object} [options] Object with additional `stateProperties` array to include when saving state + * @return {fabric.Object} thisArg */ - setupState(): Object; + setupState(options?: any): Object; // functions from object straightening mixin // ----------------------------------------------------------------------------------------------------------------------------------- /** @@ -3201,10 +3239,11 @@ export class Object { /** * Returns the coordinates of the object as if it has a different origin - * @param originX Horizontal origin: 'left', 'center' or 'right' - * @param originY Vertical origin: 'top', 'center' or 'bottom' + * @param {String} originX Horizontal origin: 'left', 'center' or 'right' + * @param {String} originY Vertical origin: 'top', 'center' or 'bottom' + * @return {fabric.Point} */ - getPointByOrigin(): Point; + getPointByOrigin(originX: string, originY: string) : Point; /** * Returns the point in local coordinates @@ -3233,9 +3272,46 @@ export class Object { * Draws borders of an object's bounding box. * Requires public properties: width, height * Requires public options: padding, borderColor - * @param ctx Context to draw on + * @param {CanvasRenderingContext2D} ctx Context to draw on + * @param {Object} styleOverride object to override the object style + * @return {fabric.Object} thisArg + * @chainable */ - drawBorders(context: CanvasRenderingContext2D): Object; + drawBorders(ctx: CanvasRenderingContext2D, styleOverride?: any): Object; + + /** + * Draws borders of an object's bounding box when it is inside a group. + * Requires public properties: width, height + * Requires public options: padding, borderColor + * @param {CanvasRenderingContext2D} ctx Context to draw on + * @param {object} options object representing current object parameters + * @param {Object} styleOverride object to override the object style + * @return {fabric.Object} thisArg + * @chainable + */ + drawBordersInGroup(ctx: CanvasRenderingContext2D, options?: any, styleOverride?: any): Object; + + /** + * Draws corners of an object's bounding box. + * Requires public properties: width, height + * Requires public options: cornerSize, padding + * @param {CanvasRenderingContext2D} ctx Context to draw on + * @param {Object} styleOverride object to override the object style + * @return {fabric.Object} thisArg + * @chainable + */ + drawControls(ctx: CanvasRenderingContext2D, styleOverride?: any): Object; + + /** + * Draws a colored layer behind the object, inside its selection borders. + * Requires public options: padding, selectionBackgroundColor + * this function is called when the context is transformed + * has checks to be skipped when the object is on a staticCanvas + * @param {CanvasRenderingContext2D} ctx Context to draw on + * @return {fabric.Object} thisArg + * @chainable + */ + drawSelectionBackground(ctx: CanvasRenderingContext2D): Object; /** * Draws corners of an object's bounding box. @@ -3276,33 +3352,45 @@ export class Object { // functions from geometry mixin // ------------------------------------------------------------------------------------------------------------------------------- /** - * Sets corner position coordinates based on current angle, width and height - * See https://github.com/kangax/fabric.js/wiki/When-to-call-setCoords + * Sets corner position coordinates based on current angle, width and height. + * See {@link https://github.com/kangax/fabric.js/wiki/When-to-call-setCoords|When-to-call-setCoords} + * @param {Boolean} [ignoreZoom] set oCoords with or without the viewport transform. + * @param {Boolean} [skipAbsolute] skip calculation of aCoords, usefull in setViewportTransform + * @return {fabric.Object} thisArg + * @chainable */ - setCoords(): Object; + setCoords(ignoreZoom?: boolean, skipAbsolute?: boolean): Object; /** * Returns coordinates of object's bounding rectangle (left, top, width, height) - * @param absoluteopt use coordinates without viewportTransform - * @param calculateopt use coordinates of current position instead of .oCoords / .aCoords - * @return Object with left, top, width, height properties + * the box is intented as aligned to axis of canvas. + * @param {Boolean} [absolute] use coordinates without viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords / .aCoords + * @return {Object} Object with left, top, width, height properties */ - getBoundingRect(absoluteopt?: boolean, calculateopt?: boolean): { left: number; top: number; width: number; height: number }; + getBoundingRect(absolute?: boolean, calculate?: boolean): { left: number; top: number; width: number; height: number }; /** * Checks if object is fully contained within area of another object - * @param other Object to test + * @param {Object} other Object to test + * @param {Boolean} [absolute] use coordinates without viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords + * @return {Boolean} true if object is fully contained within area of another object */ - isContainedWithinObject(other: Object): boolean; + isContainedWithinObject(other: Object, absolute?: boolean, calculate?: boolean): boolean; /** * Checks if object is fully contained within area formed by 2 points * @param pointTL top-left point of area * @param pointBR bottom-right point of area */ - isContainedWithinRect(pointTL: any, pointBR: any): boolean; + isContainedWithinRect(pointTL: any, pointBR: any, absolute?: boolean, calculate?: boolean): boolean; /** * Checks if point is inside the object - * @param point Point to check against + * @param {fabric.Point} point Point to check against + * @param {Object} [lines] object returned from @method _getImageLines + * @param {Boolean} [absolute] use coordinates without viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords + * @return {Boolean} true if point is inside the object */ - containsPoint(point: Point): boolean; + containsPoint(point: Point, lines?: any, absolute?: boolean, calculate?: boolean): boolean; /** * Scales an object (equally by x and y) * @param value Scale factor @@ -3313,23 +3401,130 @@ export class Object { * Scales an object to a given height, with respect to bounding box (scaling by x/y equally) * @param value New height value */ - scaleToHeight(value: number): Object; + scaleToHeight(value: number, absolute?: boolean): Object; /** * Scales an object to a given width, with respect to bounding box (scaling by x/y equally) * @param value New width value */ - scaleToWidth(value: number): Object; + scaleToWidth(value: number, absolute?: boolean): Object; /** * Checks if object intersects with another object - * @param other Object to test + * @param {Object} other Object to test + * @param {Boolean} [absolute] use coordinates without viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords + * @return {Boolean} true if object intersects with another object */ - intersectsWithObject(other: Object): boolean; + intersectsWithObject(other: Object, absolute?: boolean, calculate?: boolean): boolean; /** * Checks if object intersects with an area formed by 2 points - * @param pointTL top-left point of area - * @param pointBR bottom-right point of area + * @param {Object} pointTL top-left point of area + * @param {Object} pointBR bottom-right point of area + * @param {Boolean} [absolute] use coordinates without viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords + * @return {Boolean} true if object intersects with an area formed by 2 points */ - intersectsWithRect(pointTL: any, pointBR: any): boolean; + intersectsWithRect(pointTL: any, pointBR: any, absolute?: boolean, calculate?: boolean): boolean; + /** + * Animates object's properties + */ + animate(): Object; + /** + * Calculate and returns the .coords of an object. + * @return {Object} Object with tl, tr, br, bl .... + * @chainable + */ + calcCoords(absolute?: boolean): any; + /** + * calculate trasform Matrix that represent current transformation from + * object properties. + * @param {Boolean} [skipGroup] return transformMatrix for object and not go upward with parents + * @return {Array} matrix Transform Matrix for the object + */ + calcTransformMatrix(skipGroup?: boolean): any[]; + /** + * return correct set of coordinates for intersection + */ + getCoords(absolute?: boolean, calculate?: boolean): any; + /** + * Returns height of an object bounding box counting transformations + * before 2.0 it was named getHeight(); + * @return {Number} height value + */ + getScaledHeight(): number; + /** + * Returns width of an object bounding box counting transformations + * before 2.0 it was named getWidth(); + * @return {Number} width value + */ + getScaledWidth(): number; + /** + * Returns id attribute for svg output + * @return {String} + */ + getSvgCommons(): string; + /** + * Returns filter for svg shadow + * @return {String} + */ + getSvgFilter(): string; + /** + * Returns styles-string for svg-export + * @param {Object} style the object from which to retrieve style properties + * @param {Boolean} useWhiteSpace a boolean to include an additional attribute in the style. + * @return {String} + */ + getSvgSpanStyles(style: any, useWhiteSpace?: boolean): string; + /** + * Returns text-decoration property for svg-export + * @param {Object} style the object from which to retrieve style properties + * @return {String} + */ + getSvgTextDecoration(style: any): string; + /** + * Checks if object is contained within the canvas with current viewportTransform + * the check is done stopping at first point that appears on screen + * @param {Boolean} [calculate] use coordinates of current position instead of .aCoords + * @return {Boolean} true if object is fully or partially contained within canvas + */ + isOnScreen(calculate?: boolean): boolean; + /** + * Checks if object is partially contained within the canvas with current viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords + * @return {Boolean} true if object is partially contained within canvas + */ + isPartiallyOnScreen(calculate?: boolean): boolean; + /** + * This callback function is called every time _discardActiveObject or _setActiveObject + * try to to deselect this object. If the function returns true, the process is cancelled + */ + onDeselect(): void; + /** + * This callback function is called every time _discardActiveObject or _setActiveObject + * try to to select this object. If the function returns true, the process is cancelled + */ + onSelect(): void; + /** + * Returns svg clipPath representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + toClipPathSVG(reviver?: Function): string; + /** + * Returns svg representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + toSVG(reviver?: Function): string; + /** + * Translates the coordinates from a set of origin to another (based on the object's dimensions) + * @param {fabric.Point} point The point which corresponds to the originX and originY params + * @param {String} fromOriginX Horizontal origin: 'left', 'center' or 'right' + * @param {String} fromOriginY Vertical origin: 'top', 'center' or 'bottom' + * @param {String} toOriginX Horizontal origin: 'left', 'center' or 'right' + * @param {String} toOriginY Vertical origin: 'top', 'center' or 'bottom' + * @return {fabric.Point} + */ + translateToGivenOrigin(pointL: Point, fromOriginX: string, fromOriginY: string, toOriginX: string, toOriginY: string): Point; } interface IPathOptions extends IObjectOptions { From f3e3210e75a3b356cdeeee8553e91576598cb3fe Mon Sep 17 00:00:00 2001 From: Bryan Krol Date: Wed, 20 Feb 2019 17:17:48 -0500 Subject: [PATCH 08/16] Ran linter --- types/fabric/index.d.ts | 3 ++- types/fabric/test/index.ts | 27 ++++++++++----------------- 2 files changed, 12 insertions(+), 18 deletions(-) diff --git a/types/fabric/index.d.ts b/types/fabric/index.d.ts index e8d31aef56..1eacd9008d 100644 --- a/types/fabric/index.d.ts +++ b/types/fabric/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for FabricJS 1.5 +// Type definitions for FabricJS 2.6 // Project: http://fabricjs.com/ // Definitions by: Oliver Klemencic // Joseph Livecchi @@ -7,6 +7,7 @@ // Brian Martinson // Rogerio Teixeira // Bradley Hill +// Bryan Krol // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.1 export import fabric = require("./fabric-impl"); diff --git a/types/fabric/test/index.ts b/types/fabric/test/index.ts index cd8884710a..16c8f5c747 100644 --- a/types/fabric/test/index.ts +++ b/types/fabric/test/index.ts @@ -12,7 +12,7 @@ function sample1() { }); for (let i = 0; i < 15; i++) { - fabric.Image.fromURL('../assets/ladybug.png', img => { + fabric.Image.fromURL('../assets/ladybug.png', (img: fabric.Image) => { img.set({ left: fabric.util.getRandomInt(0, 600), top: fabric.util.getRandomInt(0, 500), @@ -122,7 +122,7 @@ function sample3() { } }); - const image = fabric.Image.fromURL('../assets/printio.png', img => { + const image = fabric.Image.fromURL('../assets/printio.png', (img: fabric.Image) => { const oImg = img.set({ left: 300, top: 300, angle: -15 }).scale(0.9); canvas.add(oImg).renderAll(); canvas.setActiveObject(oImg); @@ -331,10 +331,10 @@ function sample6() { canvas.centerObject(obj); canvas.add(obj); - obj.clone(clone => canvas.add(clone.set({ left: 100, top: 100, angle: -15 }))); - obj.clone(clone => canvas.add(clone.set({ left: 480, top: 100, angle: 15 }))); - obj.clone(clone => canvas.add(clone.set({ left: 100, top: 400, angle: -15 }))); - obj.clone(clone => canvas.add(clone.set({ left: 480, top: 400, angle: 15 }))); + obj.clone((clone: fabric.Object) => canvas.add(clone.set({ left: 100, top: 100, angle: -15 }))); + obj.clone((clone: fabric.Object) => canvas.add(clone.set({ left: 480, top: 100, angle: 15 }))); + obj.clone((clone: fabric.Object) => canvas.add(clone.set({ left: 100, top: 400, angle: -15 }))); + obj.clone((clone: fabric.Object) => canvas.add(clone.set({ left: 480, top: 400, angle: 15 }))); canvas.on('mouse:move', options => { const p = canvas.getPointer(options.e); @@ -357,7 +357,7 @@ function sample7() { const canvas = new fabric.Canvas('c', { selection: false }); setInterval(() => { - fabric.Image.fromURL('../assets/ladybug.png', obj => { + fabric.Image.fromURL('../assets/ladybug.png', (obj: fabric.Object) => { const img = obj; img.set('left', fabric.util.getRandomInt(200, 600)).set('top', -50); img.movingLeft = !!Math.round(Math.random()); @@ -475,7 +475,7 @@ function sample8() { break; case 'image1': - fabric.Image.fromURL('../assets/pug.jpg', image => { + fabric.Image.fromURL('../assets/pug.jpg', (image: fabric.Image) => { image.set({ left, top, @@ -489,7 +489,7 @@ function sample8() { break; case 'image2': - fabric.Image.fromURL('../assets/logo.png', image => { + fabric.Image.fromURL('../assets/logo.png', (image: fabric.Image) => { image.set({ left, top, @@ -510,14 +510,7 @@ function sample8() { fabric.loadSVGFromURL(`../assets/${match[0]}.svg`, (objects, options) => { const loadedObject = fabric.util.groupSVGElements(objects, options); - loadedObject.set({ - left, - top, - angle, - padding: 10, - cornerSize: 10 - }); - loadedObject/*.scaleToWidth(300)*/.setCoords(); + loadedObject.setCoords(); // loadedObject.hasRotatingPoint = true; From 7c4d53a0e4e3e62a2ad42ca29624a5fc3849644f Mon Sep 17 00:00:00 2001 From: Bryan Krol Date: Thu, 21 Feb 2019 11:22:06 -0500 Subject: [PATCH 09/16] Updated Text members and methods --- types/fabric/fabric-impl.d.ts | 83 +++++++++++++++++ types/fabric/tmp.d.ts | 168 ++++++++++++++++++++++++++++++++++ 2 files changed, 251 insertions(+) create mode 100644 types/fabric/tmp.d.ts diff --git a/types/fabric/fabric-impl.d.ts b/types/fabric/fabric-impl.d.ts index 700e4eca97..7c853a50c2 100644 --- a/types/fabric/fabric-impl.d.ts +++ b/types/fabric/fabric-impl.d.ts @@ -3661,7 +3661,9 @@ export class Rect extends Object { */ static fromObject(object: any): Rect; } + interface TextOptions extends IObjectOptions { + type?: string; /** * Font size (in pixels) * @type Number @@ -3752,6 +3754,18 @@ interface TextOptions extends IObjectOptions { */ deltaY?: number; text?: string; + /** + * List of properties to consider when checking if cache needs refresh + * @type Array + */ + cacheProperties?: string[]; + /** + * List of properties to consider when checking if + * state of an object is changed ({@link fabric.Object#hasStateChanged}) + * as well as for history (undo/redo) purposes + * @type Array + */ + stateProperties?: string[]; } export interface Text extends TextOptions { } export class Text extends Object { @@ -3852,6 +3866,75 @@ export class Text extends Object { * @param {Function} [callback] Callback to invoke when an fabric.Text instance is created */ static fromObject(object: any, callback?: Function): Text; + /** + * Check if characters in a text have a value for a property + * whose value matches the textbox's value for that property. If so, + * the character-level property is deleted. If the character + * has no other properties, then it is also deleted. Finally, + * if the line containing that character has no other characters + * then it also is deleted. + * + * @param {string} property The property to compare between characters and text. + */ + cleanStyle(property: string): void; + /** + * Returns 2d representation (lineIndex and charIndex) of cursor (or selection start) + * @param {Number} [selectionStart] Optional index. When not given, current selectionStart is used. + * @param {Boolean} [skipWrapping] consider the location for unwrapped lines. usefull to manage styles. + */ + get2DCursorLocation(selectionStart: number, skipWrapping: boolean): {lineIndex: number, charIndex: number}; + /** + * return a new object that contains all the style property for a character + * the object returned is newly created + * @param {Number} lineIndex of the line where the character is + * @param {Number} charIndex position of the character on the line + * @return {Object} style object + */ + getCompleteStyleDeclaration(lineIndex: number, charIndex: number): any; + /** + * Gets style of a current selection/cursor (at the start position) + * if startIndex or endIndex are not provided, slectionStart or selectionEnd will be used. + * @param {Number} [startIndex] Start index to get styles at + * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1 + * @param {Boolean} [complete] get full style or not + * @return {Array} styles an array with one, zero or more Style objects + */ + getSelectionStyles(startIndex: number, endIndex: number, complete?: boolean): any[]; + /** + * Returns styles-string for svg-export + * @param {Boolean} skipShadow a boolean to skip shadow filter output + * @return {String} + */ + getSvgStyles(skipShadow?: boolean): string; + /** + * Returns true if object has no styling or no styling in a line + * @param {Number} lineIndex , lineIndex is on wrapped lines. + * @return {Boolean} + */ + isEmptyStyles(lineIndex: number): boolean; + /** + * Remove a style property or properties from all individual character styles + * in a text object. Deletes the character style object if it contains no other style + * props. Deletes a line style object if it contains no other character styles. + * + * @param {String} props The property to remove from character styles. + */ + removeStyle(property: string): void; + /** + * Sets style of a current selection, if no selection exist, do not set anything. + * @param {Object} [styles] Styles object + * @param {Number} [startIndex] Start index to get styles at + * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1 + * @return {fabric.IText} thisArg + * @chainable + */ + setSelectionStyles(styles: any, startIndex: number, endIndex: number): Text; + /** + * Returns true if object has a style property or has it ina specified line + * @param {Number} lineIndex + * @return {Boolean} + */ + styleHas(property: string, lineIndex?: number): boolean; } interface ITextOptions extends TextOptions { /** diff --git a/types/fabric/tmp.d.ts b/types/fabric/tmp.d.ts new file mode 100644 index 0000000000..7da1aa55ed --- /dev/null +++ b/types/fabric/tmp.d.ts @@ -0,0 +1,168 @@ +export class Text extends Object { + /** + * Constructor + * @param text Text string + * @param [options] Options object + */ + constructor(text: string, options?: TextOptions); + /** + * Return a context for measurement of text string. + * if created it gets stored for reuse + * @return {fabric.Text} thisArg + */ + getMeasuringContext(): CanvasRenderingContext2D; + /** + * Initialize or update text dimensions. + * Updates this.width and this.height with the proper values. + * Does not return dimensions. + */ + initDimensions(): void; + /** + * Enlarge space boxes and shift the others + */ + enlargeSpaces(): void; + /** + * Detect if the text line is ended with an hard break + * text and itext do not have wrapping, return false + * @return {Boolean} + */ + isEndOfWrapping(lineIndex: number): boolean; + /** + * Returns string representation of an instance + */ + toString(): string; + /** + * Computes height of character at given position + * @param {Number} line the line number + * @param {Number} char the character number + * @return {Number} fontSize of the character + */ + getHeightOfChar(line: number, char: number): number; + /** + * measure a text line measuring all characters. + * @param {Number} lineIndex line number + * @return {Number} Line width + */ + measureLine(lineIndex: number): number; + /** + * Calculate height of line at 'lineIndex' + * @param {Number} lineIndex index of line to calculate + * @return {Number} + */ + getHeightOfLine(lineIndex: number): number; + /** + * Calculate text box height + */ + calcTextHeight(): number; + /** + * Turns the character into a 'superior figure' (i.e. 'superscript') + * @param {Number} start selection start + * @param {Number} end selection end + * @returns {fabric.Text} thisArg + * @chainable + */ + setSuperscript(start: number, end: number): Text; + /** + * Turns the character into an 'inferior figure' (i.e. 'subscript') + * @param {Number} start selection start + * @param {Number} end selection end + * @returns {fabric.Text} thisArg + * @chainable + */ + setSubscript(start: number, end: number): Text; + /** + * Retrieves the value of property at given character position + * @param {Number} lineIndex the line number + * @param {Number} charIndex the charater number + * @param {String} property the property name + * @returns the value of 'property' + */ + getValueOfPropertyAt(lineIndex: number, charIndex: number, property: string): any; + static DEFAULT_SVG_FONT_SIZE: number; + /** + * Returns fabric.Text instance from an SVG element (not yet implemented) + * @static + * @memberOf fabric.Text + * @param {SVGElement} element Element to parse + * @param {Function} callback callback function invoked after parsing + * @param {Object} [options] Options object + */ + static fromElement(element: SVGElement, callback?: Function, options?: TextOptions): Text; + /** + * Returns fabric.Text instance from an object representation + * @static + * @memberOf fabric.Text + * @param {Object} object Object to create an instance from + * @param {Function} [callback] Callback to invoke when an fabric.Text instance is created + */ + static fromObject(object: any, callback?: Function): Text; + /** + * Check if characters in a text have a value for a property + * whose value matches the textbox's value for that property. If so, + * the character-level property is deleted. If the character + * has no other properties, then it is also deleted. Finally, + * if the line containing that character has no other characters + * then it also is deleted. + * + * @param {string} property The property to compare between characters and text. + */ + cleanStyle(property: string): void; + /** + * Returns 2d representation (lineIndex and charIndex) of cursor (or selection start) + * @param {Number} [selectionStart] Optional index. When not given, current selectionStart is used. + * @param {Boolean} [skipWrapping] consider the location for unwrapped lines. usefull to manage styles. + */ + get2DCursorLocation(selectionStart: number, skipWrapping: boolean): {lineIndex: number, charIndex: number}; + /** + * return a new object that contains all the style property for a character + * the object returned is newly created + * @param {Number} lineIndex of the line where the character is + * @param {Number} charIndex position of the character on the line + * @return {Object} style object + */ + getCompleteStyleDeclaration(lineIndex: number, charIndex: number): any; + /** + * Gets style of a current selection/cursor (at the start position) + * if startIndex or endIndex are not provided, slectionStart or selectionEnd will be used. + * @param {Number} [startIndex] Start index to get styles at + * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1 + * @param {Boolean} [complete] get full style or not + * @return {Array} styles an array with one, zero or more Style objects + */ + getSelectionStyles(startIndex: number, endIndex: number, complete?: boolean): any[]; + /** + * Returns styles-string for svg-export + * @param {Boolean} skipShadow a boolean to skip shadow filter output + * @return {String} + */ + getSvgStyles(skipShadow?: boolean): string; + /** + * Returns true if object has no styling or no styling in a line + * @param {Number} lineIndex , lineIndex is on wrapped lines. + * @return {Boolean} + */ + isEmptyStyles(lineIndex: number): boolean; + /** + * Remove a style property or properties from all individual character styles + * in a text object. Deletes the character style object if it contains no other style + * props. Deletes a line style object if it contains no other character styles. + * + * @param {String} props The property to remove from character styles. + */ + removeStyle(property: string): void; + /** + * Sets style of a current selection, if no selection exist, do not set anything. + * @param {Object} [styles] Styles object + * @param {Number} [startIndex] Start index to get styles at + * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1 + * @return {fabric.IText} thisArg + * @chainable + */ + setSelectionStyles(styles: any, startIndex: number, endIndex: number): Text; + /** + * Returns true if object has a style property or has it ina specified line + * @param {Number} lineIndex + * @return {Boolean} + */ + styleHas(property: string, lineIndex?: number): boolean; +} From 90341dcc16f6e4f9fabd6be5ae86cb562c260371 Mon Sep 17 00:00:00 2001 From: Bryan Krol Date: Thu, 21 Feb 2019 11:24:07 -0500 Subject: [PATCH 10/16] Removed tmp file that was accidentally included in last commit --- types/fabric/tmp.d.ts | 168 ------------------------------------------ 1 file changed, 168 deletions(-) delete mode 100644 types/fabric/tmp.d.ts diff --git a/types/fabric/tmp.d.ts b/types/fabric/tmp.d.ts deleted file mode 100644 index 7da1aa55ed..0000000000 --- a/types/fabric/tmp.d.ts +++ /dev/null @@ -1,168 +0,0 @@ -export class Text extends Object { - /** - * Constructor - * @param text Text string - * @param [options] Options object - */ - constructor(text: string, options?: TextOptions); - /** - * Return a context for measurement of text string. - * if created it gets stored for reuse - * @return {fabric.Text} thisArg - */ - getMeasuringContext(): CanvasRenderingContext2D; - /** - * Initialize or update text dimensions. - * Updates this.width and this.height with the proper values. - * Does not return dimensions. - */ - initDimensions(): void; - /** - * Enlarge space boxes and shift the others - */ - enlargeSpaces(): void; - /** - * Detect if the text line is ended with an hard break - * text and itext do not have wrapping, return false - * @return {Boolean} - */ - isEndOfWrapping(lineIndex: number): boolean; - /** - * Returns string representation of an instance - */ - toString(): string; - /** - * Computes height of character at given position - * @param {Number} line the line number - * @param {Number} char the character number - * @return {Number} fontSize of the character - */ - getHeightOfChar(line: number, char: number): number; - /** - * measure a text line measuring all characters. - * @param {Number} lineIndex line number - * @return {Number} Line width - */ - measureLine(lineIndex: number): number; - /** - * Calculate height of line at 'lineIndex' - * @param {Number} lineIndex index of line to calculate - * @return {Number} - */ - getHeightOfLine(lineIndex: number): number; - /** - * Calculate text box height - */ - calcTextHeight(): number; - /** - * Turns the character into a 'superior figure' (i.e. 'superscript') - * @param {Number} start selection start - * @param {Number} end selection end - * @returns {fabric.Text} thisArg - * @chainable - */ - setSuperscript(start: number, end: number): Text; - /** - * Turns the character into an 'inferior figure' (i.e. 'subscript') - * @param {Number} start selection start - * @param {Number} end selection end - * @returns {fabric.Text} thisArg - * @chainable - */ - setSubscript(start: number, end: number): Text; - /** - * Retrieves the value of property at given character position - * @param {Number} lineIndex the line number - * @param {Number} charIndex the charater number - * @param {String} property the property name - * @returns the value of 'property' - */ - getValueOfPropertyAt(lineIndex: number, charIndex: number, property: string): any; - static DEFAULT_SVG_FONT_SIZE: number; - /** - * Returns fabric.Text instance from an SVG element (not yet implemented) - * @static - * @memberOf fabric.Text - * @param {SVGElement} element Element to parse - * @param {Function} callback callback function invoked after parsing - * @param {Object} [options] Options object - */ - static fromElement(element: SVGElement, callback?: Function, options?: TextOptions): Text; - /** - * Returns fabric.Text instance from an object representation - * @static - * @memberOf fabric.Text - * @param {Object} object Object to create an instance from - * @param {Function} [callback] Callback to invoke when an fabric.Text instance is created - */ - static fromObject(object: any, callback?: Function): Text; - /** - * Check if characters in a text have a value for a property - * whose value matches the textbox's value for that property. If so, - * the character-level property is deleted. If the character - * has no other properties, then it is also deleted. Finally, - * if the line containing that character has no other characters - * then it also is deleted. - * - * @param {string} property The property to compare between characters and text. - */ - cleanStyle(property: string): void; - /** - * Returns 2d representation (lineIndex and charIndex) of cursor (or selection start) - * @param {Number} [selectionStart] Optional index. When not given, current selectionStart is used. - * @param {Boolean} [skipWrapping] consider the location for unwrapped lines. usefull to manage styles. - */ - get2DCursorLocation(selectionStart: number, skipWrapping: boolean): {lineIndex: number, charIndex: number}; - /** - * return a new object that contains all the style property for a character - * the object returned is newly created - * @param {Number} lineIndex of the line where the character is - * @param {Number} charIndex position of the character on the line - * @return {Object} style object - */ - getCompleteStyleDeclaration(lineIndex: number, charIndex: number): any; - /** - * Gets style of a current selection/cursor (at the start position) - * if startIndex or endIndex are not provided, slectionStart or selectionEnd will be used. - * @param {Number} [startIndex] Start index to get styles at - * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1 - * @param {Boolean} [complete] get full style or not - * @return {Array} styles an array with one, zero or more Style objects - */ - getSelectionStyles(startIndex: number, endIndex: number, complete?: boolean): any[]; - /** - * Returns styles-string for svg-export - * @param {Boolean} skipShadow a boolean to skip shadow filter output - * @return {String} - */ - getSvgStyles(skipShadow?: boolean): string; - /** - * Returns true if object has no styling or no styling in a line - * @param {Number} lineIndex , lineIndex is on wrapped lines. - * @return {Boolean} - */ - isEmptyStyles(lineIndex: number): boolean; - /** - * Remove a style property or properties from all individual character styles - * in a text object. Deletes the character style object if it contains no other style - * props. Deletes a line style object if it contains no other character styles. - * - * @param {String} props The property to remove from character styles. - */ - removeStyle(property: string): void; - /** - * Sets style of a current selection, if no selection exist, do not set anything. - * @param {Object} [styles] Styles object - * @param {Number} [startIndex] Start index to get styles at - * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1 - * @return {fabric.IText} thisArg - * @chainable - */ - setSelectionStyles(styles: any, startIndex: number, endIndex: number): Text; - /** - * Returns true if object has a style property or has it ina specified line - * @param {Number} lineIndex - * @return {Boolean} - */ - styleHas(property: string, lineIndex?: number): boolean; -} From a66262fee1df911499c3cbd04d1bf1e37e24e622 Mon Sep 17 00:00:00 2001 From: Bryan Krol Date: Thu, 21 Feb 2019 12:24:43 -0500 Subject: [PATCH 11/16] Updated definitions for IText --- types/fabric/fabric-impl.d.ts | 187 +++++++++++++++++++++++++++++++++- 1 file changed, 184 insertions(+), 3 deletions(-) diff --git a/types/fabric/fabric-impl.d.ts b/types/fabric/fabric-impl.d.ts index 7c853a50c2..6c48f4b0e7 100644 --- a/types/fabric/fabric-impl.d.ts +++ b/types/fabric/fabric-impl.d.ts @@ -3941,7 +3941,8 @@ interface ITextOptions extends TextOptions { * Index where text selection starts (or where cursor is when there is no selection) * @type Number */ - selectionStart?: number;/** + selectionStart?: number; + /** * Index where text selection ends * @type Number */ @@ -3998,6 +3999,26 @@ interface ITextOptions extends TextOptions { inCompositionMode?: boolean; path?: string; useNative?: boolean; + /** + * For functionalities on keyDown + ctrl || cmd + */ + ctrlKeysMapDown?: any; + /** + * For functionalities on keyUp + ctrl || cmd + */ + ctrlKeysMapUp?: any; + /** + * For functionalities on keyDown + * Map a special key to a function of the instance/prototype + * If you need different behaviour for ESC or TAB or arrows, you have to change + * this map setting the name of a function that you build on the fabric.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 = fabric.util.object.clone(this.keysMap); + * The function must be in fabric.Itext.prototype.myFunction And will receive event as args[0] + */ + keysMap?: any; } export interface IText extends ITextOptions { } export class IText extends Text { @@ -4020,7 +4041,7 @@ export class IText extends Text { /** * Prepare and clean the contextTop */ - clearContextTop(skipRestor: boolean): void; + clearContextTop(skipRestore?: boolean): void; /** * Renders cursor or selection (depending on what exists) */ @@ -4180,12 +4201,172 @@ export class IText extends Text { * @param {Number} start cursor index for inserting style * @param {Array} [copiedStyle] array of style objects to insert. */ - insertNewStyleBlock(insertedText: any[], start: number, copiedStyle: any[]): void; + insertNewStyleBlock(insertedText: any[], start: number, copiedStyle?: any[]): void; /** * Set the selectionStart and selectionEnd according to the ne postion of cursor * mimic the key - mouse navigation when shift is pressed. */ setSelectionStartEndWithShift(start: number, end: number, newSelection: number): void; + /** + * Copies selected text + */ + copy(): void; + /** + * convert from fabric to textarea values + */ + fromGraphemeToStringSelection(start: number, end: number, _text: string): {selectionStart: string, selectionEnd: string}; + /** + * convert from textarea to grapheme indexes + */ + fromStringToGraphemeSelection(start: number, end: number, text: string): {selectionStart: string, selectionEnd: string}; + /** + * Gets start offset of a selection + * @param {Event} e Event object + * @param {Boolean} isRight + * @return {Number} + */ + getDownCursorOffset(e: Event, isRight?: boolean): number; + /** + * Returns index of a character corresponding to where an object was clicked + * @param {Event} e Event object + * @return {Number} Index of a character + */ + getSelectionStartFromPointer(e: Event): number; + /** + * @param {Event} e Event object + * @param {Boolean} isRight + * @return {Number} + */ + getUpCursorOffset(e: Event, isRight?: boolean): number; + /** + * Initializes double and triple click event handlers + */ + initClicks(): void; + /** + * Initializes event handlers related to cursor or selection + */ + initCursorSelectionHandlers(): void + /** + * Initializes "dbclick" event handler + */ + initDoubleClickSimulation(): void; + /** + * Initializes hidden textarea (needed to bring up keyboard in iOS) + */ + initHiddenTextarea(): void; + /** + * Initializes "mousedown" event handler + */ + initMousedownHandler(): void; + /** + * Initializes "mouseup" event handler + */ + initMouseupHandler(): void; + /** + * insert characters at start position, before start position. + * start equal 1 it means the text get inserted between actual grapheme 0 and 1 + * if style array is provided, it must be as the same length of text in graphemes + * if end is provided and is bigger than start, old text is replaced. + * start/end ar per grapheme position in _text array. + * + * @param {String} text text to insert + * @param {Array} style array of style objects + * @param {Number} start + * @param {Number} end default to start + 1 + */ + insertChars(text: string, style: any[], start: number, end: number): void; + /** + * Moves cursor down + * @param {Event} e Event object + */ + moveCursorDown(e: Event): void; + /** + * Moves cursor left + * @param {Event} e Event object + */ + moveCursorLeft(e: Event): void; + /** + * Moves cursor left without keeping selection + * @param {Event} e + */ + moveCursorLeftWithoutShift(e: Event): void; + /** + * Moves cursor left while keeping selection + * @param {Event} e + */ + moveCursorLeftWithShift(e: Event): void; + /** + * Moves cursor right + * @param {Event} e Event object + */ + moveCursorRight(e: Event): void; + /** + * Moves cursor right without keeping selection + * @param {Event} e Event object + */ + moveCursorRightWithoutShift(e: Event): void; + /** + * Moves cursor right while keeping selection + * @param {Event} e + */ + moveCursorRightWithShift(e: Event): void; + /** + * Moves cursor up + * @param {Event} e Event object + */ + moveCursorUp(e: Event): void; + /** + * Moves cursor up without shift + * @param {Number} offset + */ + moveCursorWithoutShift(offset: number): void; + /** + * Moves cursor with shift + * @param {Number} offset + */ + moveCursorWithShift(offset: number): void; + /** + * Composition end + */ + onCompositionEnd(): void; + /** + * Composition start + */ + onCompositionStart(): void; + /** + * Handles onInput event + * @param {Event} e Event object + */ + onInput(e: Event): void; + /** + * Handles keyup event + * @param {Event} e Event object + */ + onKeyDown(e: Event): 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 {Event} e Event object + */ + onKeyUp(e: Event): void; + /** + * Pastes text + */ + paste(): void; + /** + * Removes characters from start/end + * start/end ar per grapheme position in _text array. + * + * @param {Number} start + * @param {Number} end default to start + 1 + */ + removeChars(start: number, end: number): void; + /** + * Changes cursor location in a text depending on passed pointer (x/y) object + * @param {Event} e Event object + */ + setCursorByClick(e: Event): void; } interface ITextboxOptions extends ITextOptions { /** From a7f1c533bdb6130eba1a5137ed3a8b3c19aa5289 Mon Sep 17 00:00:00 2001 From: Bryan Krol Date: Thu, 21 Feb 2019 14:27:27 -0500 Subject: [PATCH 12/16] Updated getSelectionStyles for options start and end index --- types/fabric/fabric-impl.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/fabric/fabric-impl.d.ts b/types/fabric/fabric-impl.d.ts index 6c48f4b0e7..fb9a0d8a63 100644 --- a/types/fabric/fabric-impl.d.ts +++ b/types/fabric/fabric-impl.d.ts @@ -3899,7 +3899,7 @@ export class Text extends Object { * @param {Boolean} [complete] get full style or not * @return {Array} styles an array with one, zero or more Style objects */ - getSelectionStyles(startIndex: number, endIndex: number, complete?: boolean): any[]; + getSelectionStyles(startIndex?: number, endIndex?: number, complete?: boolean): any[]; /** * Returns styles-string for svg-export * @param {Boolean} skipShadow a boolean to skip shadow filter output From 024af7684eb072790ee5918cca06462a57a5b2c7 Mon Sep 17 00:00:00 2001 From: Bryan Krol Date: Thu, 21 Feb 2019 15:32:04 -0500 Subject: [PATCH 13/16] Updated definition for setSelectionStyles --- types/fabric/fabric-impl.d.ts | 66 +++++++++++++++++------------------ 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/types/fabric/fabric-impl.d.ts b/types/fabric/fabric-impl.d.ts index fb9a0d8a63..5a31e9c8c0 100644 --- a/types/fabric/fabric-impl.d.ts +++ b/types/fabric/fabric-impl.d.ts @@ -143,7 +143,7 @@ interface IDataURLOptions { interface IEvent { e: Event; target?: Object; - transform?: { corner: string }; + transform?: { corner: string }; } interface IFillOptions { @@ -2135,10 +2135,10 @@ export class ActiveSelection { */ constructor(objects?: Object[], options?: IObjectOptions); /** - * Change te activeSelection to a normal group, - * High level function that automatically adds it to canvas as - * active object. no events fired. - */ + * Change te activeSelection to a normal group, + * High level function that automatically adds it to canvas as + * active object. no events fired. + */ toGroup(): Group; /** * If returns true, deselection is cancelled. @@ -3928,7 +3928,7 @@ export class Text extends Object { * @return {fabric.IText} thisArg * @chainable */ - setSelectionStyles(styles: any, startIndex: number, endIndex: number): Text; + setSelectionStyles(styles: any, startIndex?: number, endIndex?: number): Text; /** * Returns true if object has a style property or has it ina specified line * @param {Number} lineIndex @@ -4400,12 +4400,12 @@ interface ITextboxOptions extends ITextOptions { } export interface Textbox extends ITextboxOptions{} export class Textbox extends IText { - /** - * Constructor - * @param text Text string - * @param [options] Options object - */ - constructor(text: string, options?: ITextboxOptions); + /** + * Constructor + * @param text Text string + * @param [options] Options object + */ + constructor(text: string, options?: ITextboxOptions); /** * Returns true if object has a style property or has it ina specified line * @param {Number} lineIndex @@ -4503,18 +4503,18 @@ interface IAllFilters { */ fromObject(object: any): IBrightnessFilter }; - ColorMatrix: { - new(options?: { - /** Filter matrix */ - matrix?: number[] - }): IColorMatrix; - /** - * Returns filter instance from an object representation - * @param object Object to create an instance from - */ - fromObject(object: any): IColorMatrix - }; - Convolute: { + ColorMatrix: { + new(options?: { + /** Filter matrix */ + matrix?: number[] + }): IColorMatrix; + /** + * Returns filter instance from an object representation + * @param object Object to create an instance from + */ + fromObject(object: any): IColorMatrix + }; + Convolute: { new(options?: { opaque?: boolean, /** Filter matrix */ @@ -4703,11 +4703,11 @@ interface IBrightnessFilter extends IBaseFilter { applyTo(canvasEl: HTMLCanvasElement): void; } interface IColorMatrix extends IBaseFilter { - /** - * Applies filter to canvas element - * @param canvasEl Canvas element to apply filter to - */ - applyTo(canvasEl: HTMLCanvasElement): void; + /** + * Applies filter to canvas element + * @param canvasEl Canvas element to apply filter to + */ + applyTo(canvasEl: HTMLCanvasElement): void; } interface IConvoluteFilter extends IBaseFilter { /** @@ -5389,10 +5389,10 @@ interface IUtilMisc { */ qrDecompose(a: number[]): { angle: number, scaleX: number, scaleY: number, skewX: number, skewY: number, translateX: number, translateY: number }; - /** - * Creates a transform matrix with the specified scale and skew - */ - customTransformMatrix(scaleX: number, scaleY: number, skewX: number): number[]; + /** + * Creates a transform matrix with the specified scale and skew + */ + customTransformMatrix(scaleX: number, scaleY: number, skewX: number): number[]; /** * Returns string representation of function body From 7e4e9a35c4204324727153166518acad125a9c5f Mon Sep 17 00:00:00 2001 From: Bryan Krol Date: Fri, 22 Feb 2019 12:49:00 -0500 Subject: [PATCH 14/16] Updated IPatternOptions to include additional source parameter that was previously missed. --- types/fabric/fabric-impl.d.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/types/fabric/fabric-impl.d.ts b/types/fabric/fabric-impl.d.ts index 5a31e9c8c0..2babdfe7e2 100644 --- a/types/fabric/fabric-impl.d.ts +++ b/types/fabric/fabric-impl.d.ts @@ -632,6 +632,10 @@ interface IPatternOptions { * Transform matrix to change the pattern, imported from svgs */ patternTransform?: number[]; + /** + * The source for the pattern + */ + source?: string | HTMLImageElement; } export interface Pattern extends IPatternOptions { } export class Pattern { From 85a2bcb512af99c87ffdb90c4fd75330f6c67518 Mon Sep 17 00:00:00 2001 From: Bryan Krol Date: Fri, 22 Feb 2019 14:16:16 -0500 Subject: [PATCH 15/16] Updated Image.fromURL to make the callback strongly typed --- types/fabric/fabric-impl.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/fabric/fabric-impl.d.ts b/types/fabric/fabric-impl.d.ts index 2babdfe7e2..22f9d6d514 100644 --- a/types/fabric/fabric-impl.d.ts +++ b/types/fabric/fabric-impl.d.ts @@ -2285,7 +2285,7 @@ export class Image { * @param [callback] Callback to invoke when image is created (newly created image is passed as a first argument) * @param [imgOptions] Options object */ - static fromURL(url: string, callback?: Function, imgOptions?: IImageOptions): Image; + static fromURL(url: string, callback?: (image: Image) => void, imgOptions?: IImageOptions): Image; /** * Returns Image instance from an SVG element * @param element Element to parse From 226f7e41edbcbf13d6f2c8cfaa11cbb4d085aae4 Mon Sep 17 00:00:00 2001 From: Bryan Krol Date: Fri, 22 Feb 2019 15:54:33 -0500 Subject: [PATCH 16/16] Changed IPatternOptions.source to not be an optional parameter --- types/fabric/fabric-impl.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/fabric/fabric-impl.d.ts b/types/fabric/fabric-impl.d.ts index 22f9d6d514..b2a4c0066d 100644 --- a/types/fabric/fabric-impl.d.ts +++ b/types/fabric/fabric-impl.d.ts @@ -635,7 +635,7 @@ interface IPatternOptions { /** * The source for the pattern */ - source?: string | HTMLImageElement; + source: string | HTMLImageElement; } export interface Pattern extends IPatternOptions { } export class Pattern {