From 2f3c13b0d372adbca88a5c87cdf6783643df2fb0 Mon Sep 17 00:00:00 2001 From: Rogerio Teixeira nunes Date: Wed, 25 Apr 2018 00:58:36 +0200 Subject: [PATCH] Fabric (#25168) * Add types backend filter * Add types backend filter * Add types backend filter * Add types backend filter(review) --- types/fabric/fabric-impl.d.ts | 188 ++++++++++++++++++++++------------ types/fabric/index.d.ts | 1 + types/fabric/test/index.ts | 6 ++ 3 files changed, 129 insertions(+), 66 deletions(-) diff --git a/types/fabric/fabric-impl.d.ts b/types/fabric/fabric-impl.d.ts index 369856130c..e35b0ebe0d 100644 --- a/types/fabric/fabric-impl.d.ts +++ b/types/fabric/fabric-impl.d.ts @@ -283,7 +283,7 @@ interface IObservable { * Observes specified event * @param eventName Object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler}) */ - on(events: {[eventName: string]: (e: IEvent) => void}): T; + on(events: { [eventName: string]: (e: IEvent) => void }): T; /** * Fires event with an optional options object * @param eventName Event name to fire @@ -296,7 +296,7 @@ interface IObservable { * @param eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler}) * @param handler Function to be deleted from EventListeners */ - off(eventName?: string|any, handler?: (e: IEvent) => void): T; + off(eventName?: string | any, handler?: (e: IEvent) => void): T; } interface Callbacks { @@ -337,7 +337,7 @@ interface IObjectAnimation { * @param value Value to animate property * @param options The animation options */ - animate(property: string, value: number|string, options?: IAnimationOptions): Object; + animate(property: string, value: number | string, options?: IAnimationOptions): Object; /** * Animates object's properties * object.animate({ left: ..., top: ... }, { duration: ... }); @@ -350,7 +350,7 @@ interface IAnimationOptions { /** * Allows to specify starting value of animatable property (if we don't want current value to be used). */ - from?: string|number; + from?: string | number; /** * Defaults to 500 (ms). Can be used to change duration of an animation. */ @@ -443,7 +443,7 @@ export class Color { /** * Overlays color with another color */ - overlayWith(otherColor: string|Color): Color; + overlayWith(otherColor: string | Color): Color; /** * Returns new color object, when given a color in RGB format @@ -551,7 +551,7 @@ interface IGradient extends IGradientOptions { toLive(ctx: CanvasRenderingContext2D, object?: PathGroup): CanvasGradient; } interface IGrandientStatic { - new (options?: IGradientOptions): IGradient; + new(options?: IGradientOptions): IGradient; /** * Returns instance from an SVG element * @param el SVG gradient element @@ -612,10 +612,10 @@ interface IPatternOptions { /** * The source for the pattern */ - source: string|HTMLImageElement; + source: string | HTMLImageElement; } -export interface Pattern extends IPatternOptions {} -export class Pattern { +export interface Pattern extends IPatternOptions { } +export class Pattern { constructor(options?: IPatternOptions); initialise(options?: IPatternOptions): Pattern; @@ -797,10 +797,10 @@ interface IShadowOptions { */ offsetY: number; } -export interface Shadow extends IShadowOptions {} +export interface Shadow extends IShadowOptions { } export class Shadow { constructor(options?: IShadowOptions); - initialize(options?: IShadowOptions|string): Shadow; + initialize(options?: IShadowOptions | string): Shadow; /** * Returns object representation of a shadow */ @@ -874,7 +874,7 @@ interface IStaticCanvasOptions { * Background color of canvas instance. * Should be set via setBackgroundColor */ - backgroundColor?: string|Pattern; + backgroundColor?: string | Pattern; /** * Background image of canvas instance. * Should be set via setBackgroundImage @@ -902,7 +902,7 @@ interface IStaticCanvasOptions { * Overlay color of canvas instance. * Should be set via setOverlayColor */ - overlayColor?: string|Pattern; + overlayColor?: string | Pattern; /** * Overlay image of canvas instance. * Should be set via setOverlayImage @@ -922,14 +922,14 @@ interface IStaticCanvasOptions { */ stateful?: boolean; } -export interface StaticCanvas extends IObservable, IStaticCanvasOptions, ICollection, ICanvasAnimation {} +export interface StaticCanvas extends IObservable, IStaticCanvasOptions, ICollection, ICanvasAnimation { } export class StaticCanvas { /** * Constructor * @param element element to initialize instance on * @param [options] Options object */ - constructor(element: HTMLCanvasElement|string, options?: ICanvasOptions); + constructor(element: HTMLCanvasElement | string, options?: ICanvasOptions); /** * Calculates canvas element offset relative to the document @@ -943,7 +943,7 @@ export class StaticCanvas { * @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}. */ - setOverlayImage(image: Image|string, callback: (img: HTMLImageElement) => void, options?: IImageOptions): this; + setOverlayImage(image: Image | string, callback: (img: HTMLImageElement) => void, options?: IImageOptions): this; /** * Sets {@link fabric.StaticCanvas#backgroundImage|background image} for this canvas @@ -951,21 +951,21 @@ export class StaticCanvas { * @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}. */ - setBackgroundImage(image: Image|string, callback?: (img: HTMLImageElement) => void, options?: IImageOptions): this; + setBackgroundImage(image: Image | string, callback?: (img: HTMLImageElement) => void, options?: IImageOptions): this; /** * 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 */ - setOverlayColor(overlayColor: string|Pattern, callback: (pattern: Pattern | undefined) => void): this; + setOverlayColor(overlayColor: string | Pattern, callback: (pattern: Pattern | undefined) => void): this; /** * 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 */ - setBackgroundColor(backgroundColor: string|Pattern, callback: (pattern: Pattern | undefined) => void): StaticCanvas; + setBackgroundColor(backgroundColor: string | Pattern, callback: (pattern: Pattern | undefined) => void): StaticCanvas; /** * Returns canvas width (in px) @@ -982,14 +982,14 @@ export class StaticCanvas { * @param value Value to set width to * @param [options] Options object */ - setWidth(value: number|string, options?: ICanvasDimensionsOptions): this; + setWidth(value: number | string, options?: ICanvasDimensionsOptions): this; /** * Sets height of this canvas instance * @param value Value to set height to * @param [options] Options object */ - setHeight(value: number|string, options?: ICanvasDimensionsOptions): this; + setHeight(value: number | string, options?: ICanvasDimensionsOptions): this; /** * Sets dimensions (width, height) of this canvas instance. when options.cssOnly flag active you should also supply the unit of measure (px/%/em) @@ -1213,7 +1213,7 @@ export class StaticCanvas { * 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; + loadFromJSON(json: string | any, callback: () => void, reviver?: Function): this; /** * Clones canvas instance * @param [callback] Receives cloned instance as a first argument @@ -1364,8 +1364,8 @@ interface ICanvasOptions extends IStaticCanvasOptions { */ isDrawingMode?: boolean; } -export interface Canvas extends StaticCanvas {} -export interface Canvas extends ICanvasOptions {} +export interface Canvas extends StaticCanvas { } +export interface Canvas extends ICanvasOptions { } export class Canvas { /** * Constructor @@ -1509,7 +1509,7 @@ interface ICircleOptions extends IObjectOptions { */ endAngle?: number; } -export interface Circle extends Object, ICircleOptions {} +export interface Circle extends Object, ICircleOptions { } export class Circle { constructor(options?: ICircleOptions); @@ -1571,7 +1571,7 @@ interface IEllipseOptions extends IObjectOptions { */ ry?: number; } -export interface Ellipse extends Object, IEllipseOptions {} +export interface Ellipse extends Object, IEllipseOptions { } export class Ellipse { constructor(options?: IEllipseOptions); @@ -1621,7 +1621,7 @@ export class Ellipse { static fromObject(object: any): Ellipse; } -export interface Group extends Object, ICollection {} +export interface Group extends Object, ICollection { } export class Group { /** * Constructor @@ -1713,7 +1713,7 @@ export class Group { /////////////////////////////////////////////////////////////////////////////// // ActiveSelection ////////////////////////////////////////////////////////////////////////////// -export interface ActiveSelection extends Object, ICollection {} +export interface ActiveSelection extends Object, ICollection { } export class ActiveSelection { /** * Constructor @@ -1781,7 +1781,7 @@ interface IImageOptions extends IObjectOptions { */ filters?: IBaseFilter[]; } -interface Image extends Object, IImageOptions {} +interface Image extends Object, IImageOptions { } export class Image { /** * Constructor @@ -1790,7 +1790,7 @@ export class Image { */ constructor(element: HTMLImageElement, objObjects: IObjectOptions); - initialize(element?: string|HTMLImageElement, options?: IImageOptions): void; + initialize(element?: string | HTMLImageElement, options?: IImageOptions): void; /** * Applies filters assigned to this image (from "filters" array) * @param callback Callback is invoked when all filters have been applied and new image is generated @@ -1907,7 +1907,7 @@ interface ILineOptions extends IObjectOptions { */ y2: number; } -export interface Line extends Object, ILineOptions {} +export interface Line extends Object, ILineOptions { } export class Line { /** * Constructor @@ -2131,7 +2131,7 @@ interface IObjectOptions { /** * Shadow object representing shadow of this shape */ - shadow?: Shadow|string; + shadow?: Shadow | string; /** * Opacity of object's controlling borders when object is active and moving @@ -2250,7 +2250,7 @@ interface IObjectOptions { */ data?: any; } -export interface Object extends IObservable, IObjectOptions, IObjectAnimation {} +export interface Object extends IObservable, IObjectOptions, IObjectAnimation { } export class Object { getCurrentWidth(): number; getCurrentHeight(): number; @@ -2656,7 +2656,8 @@ export class Object { mt?: boolean; tl?: boolean; tr?: boolean; - mtr?: boolean; }): this; + mtr?: boolean; + }): this; // functions from geometry mixin // ------------------------------------------------------------------------------------------------------------------------------- @@ -2731,14 +2732,14 @@ interface IPathOptions extends IObjectOptions { */ minY?: number; } -export interface Path extends Object, IPathOptions {} +export interface Path extends Object, IPathOptions { } export class Path { /** * Constructor * @param path Path data (sequence of coordinates and corresponding "command" tokens) * @param [options] Options object */ - constructor(path?: string|any[], options?: IPathOptions); + constructor(path?: string | any[], options?: IPathOptions); pathOffset: Point; @@ -2871,7 +2872,7 @@ interface IPolygonOptions extends IObjectOptions { */ minY?: number; } -export interface Polygon extends IPolygonOptions {} +export interface Polygon extends IPolygonOptions { } export class Polygon extends Object { /** * Constructor @@ -2933,7 +2934,7 @@ interface IPolylineOptions extends IObjectOptions { */ minY?: number; } -export interface Polyline extends IPolylineOptions {} +export interface Polyline extends IPolylineOptions { } export class Polyline extends Object { /** * Constructor @@ -2993,7 +2994,7 @@ interface IRectOptions extends IObjectOptions { ry?: number; } -export interface Rect extends IRectOptions {} +export interface Rect extends IRectOptions { } export class Rect extends Object { /** * Constructor @@ -3044,7 +3045,7 @@ interface ITextOptions extends IObjectOptions { /** * Font weight (e.g. bold, normal, 400, 600, 800) */ - fontWeight?: number|string; + fontWeight?: number | string; /** * Font family */ @@ -3074,7 +3075,7 @@ interface ITextOptions extends IObjectOptions { * Shadow object representing shadow of this shape. * Backwards incompatibility note?: This property was named "textShadow" (String) until v1.2.11 */ - shadow?: Shadow|string; + shadow?: Shadow | string; /** * Background color of text lines */ @@ -3084,7 +3085,7 @@ interface ITextOptions extends IObjectOptions { useNative?: boolean; text?: string; } -export interface Text extends ITextOptions {} +export interface Text extends ITextOptions { } export class Text extends Object { /** * Constructor @@ -3127,12 +3128,12 @@ export class Text extends Object { /** * Retrieves object's fontWeight */ - getFontWeight(): number|string; + getFontWeight(): number | string; /** * Sets object's fontWeight * @param fontWeight Font weight */ - setFontWeight(fontWeight: string|number): Text; + setFontWeight(fontWeight: string | number): Text; /** * Retrieves object's fontFamily */ @@ -3281,7 +3282,7 @@ interface IITextOptions extends IObjectOptions, ITextOptions { */ caching?: boolean; } -export interface IText extends Text, IITextOptions {} +export interface IText extends Text, IITextOptions { } export class IText extends Object { /** * Constructor @@ -3566,14 +3567,14 @@ interface IAllFilters { * Constructor * @param [options] Options object */ - new (options?: any): IBaseFilter; + new(options?: any): IBaseFilter; }; Blend: { /** * Constructor * @param [options] Options object */ - new (options?: { color?: string; mode?: string; alpha?: number; image?: Image }): IBlendFilter; + new(options?: { color?: string; mode?: string; alpha?: number; image?: Image }): IBlendFilter; /** * Returns filter instance from an object representation * @param object Object to create an instance from @@ -3581,7 +3582,7 @@ interface IAllFilters { fromObject(object: any): IBlendFilter }; Brightness: { - new (options?: { + new(options?: { /** * Value to brighten the image up (0..255) * @default 0 @@ -3595,7 +3596,7 @@ interface IAllFilters { fromObject(object: any): IBrightnessFilter }; Convolute: { - new (options?: { + new(options?: { opaque?: boolean, /** Filter matrix */ matrix?: number[], @@ -3607,7 +3608,7 @@ interface IAllFilters { fromObject(object: any): IConvoluteFilter }; GradientTransparency: { - new (options?: { + new(options?: { /** @default 100 */ threshold?: number; }): IGradientTransparencyFilter; @@ -3618,7 +3619,7 @@ interface IAllFilters { fromObject(object: any): IGradientTransparencyFilter }; Grayscale: { - new (options?: any): IGrayscaleFilter; + new(options?: any): IGrayscaleFilter; /** * Returns filter instance from an object representation * @param object Object to create an instance from @@ -3630,7 +3631,7 @@ interface IAllFilters { * Constructor * @param [options] Options object */ - new (options?: any): IInvertFilter; + new(options?: any): IInvertFilter; /** * Returns filter instance from an object representation * @param object Object to create an instance from @@ -3638,7 +3639,7 @@ interface IAllFilters { fromObject(object: any): IInvertFilter }; Mask: { - new (options?: { + new(options?: { /** Mask image object */ mask?: Image, /** @@ -3654,7 +3655,7 @@ interface IAllFilters { fromObject(object: any): IMaskFilter }; Multiply: { - new (options?: { + new(options?: { /** * Color to multiply the image pixels with * @default #000000 @@ -3668,7 +3669,7 @@ interface IAllFilters { fromObject(object: any): IMultiplyFilter }; Noise: { - new (options?: { + new(options?: { /** @default 0 */ noise: number, }): INoiseFilter; @@ -3679,7 +3680,7 @@ interface IAllFilters { fromObject(object: any): INoiseFilter }; Pixelate: { - new (options?: { + new(options?: { /** * Blocksize for pixelate * @default 4 @@ -3693,7 +3694,7 @@ interface IAllFilters { fromObject(object: any): IPixelateFilter }; RemoveWhite: { - new (options?: { + new(options?: { /** @default 30 */ threshold?: number, /** @default 20 */ @@ -3706,7 +3707,7 @@ interface IAllFilters { fromObject(object: any): IRemoveWhiteFilter }; Resize: { - new (options?: any): IResizeFilter; + new(options?: any): IResizeFilter; /** * Returns filter instance from an object representation * @param object Object to create an instance from @@ -3714,7 +3715,7 @@ interface IAllFilters { fromObject(object: any): IResizeFilter }; Sepia2: { - new (options?: any): ISepia2Filter; + new(options?: any): ISepia2Filter; /** * Returns filter instance from an object representation * @param object Object to create an instance from @@ -3722,7 +3723,7 @@ interface IAllFilters { fromObject(object: any): ISepia2Filter }; Sepia: { - new (options?: any): ISepiaFilter; + new(options?: any): ISepiaFilter; /** * Returns filter instance from an object representation * @param object Object to create an instance from @@ -3730,7 +3731,7 @@ interface IAllFilters { fromObject(object: any): ISepiaFilter }; Tint: { - new (options?: { + new(options?: { /** * Color to tint the image with * @default #000000 @@ -3905,7 +3906,7 @@ export class BaseBrush { * Backwards incompatibility note: This property replaces "shadowColor" (String), "shadowOffsetX" (Number), * "shadowOffsetY" (Number) and "shadowBlur" (Number) since v1.2.12 */ - shadow: Shadow|string; + shadow: Shadow | string; /** * Line endings style of a brush (one of "butt", "round", "square") */ @@ -3925,7 +3926,7 @@ export class BaseBrush { * 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|any): BaseBrush; + setShadow(options: string | any): BaseBrush; } export class CircleBrush extends BaseBrush { @@ -4133,7 +4134,7 @@ interface IUtilDomMisc { /** * Takes id and returns an element with that id (if one exists in a document) */ - getById(id: string|HTMLElement): HTMLElement; + getById(id: string | HTMLElement): HTMLElement; /** * Converts an array-like object (e.g. arguments or NodeList) to an array */ @@ -4157,7 +4158,7 @@ interface IUtilDomMisc { * @param wrapper Element to wrap with * @param [attributes] Attributes to set on a wrapper */ - wrapElement(element: HTMLElement, wrapper: HTMLElement|string, attributes?: any): HTMLElement; + wrapElement(element: HTMLElement, wrapper: HTMLElement | string, attributes?: any): HTMLElement; /** * Returns element scroll offsets * @param element Element to operate on @@ -4353,7 +4354,7 @@ interface IUtilMisc { * Returns converted pixels or original value not converted. * @param value number to operate on */ - parseUnit(value: number|string, fontSize?: number): number|string; + parseUnit(value: number | string, fontSize?: number): number | string; /** * Function which always returns `false`. @@ -4480,3 +4481,58 @@ interface IUtil extends IUtilAnimation, IUtilArc, IObservable, IUtilDomEv object: IUtilObject; string: IUtilString; } + +export interface Resources { + [key: string]: HTMLCanvasElement +} +export interface FilterBackend { + resources: Resources; + + applyFilters(filters: IBaseFilter[], sourceElement: HTMLImageElement | HTMLCanvasElement, sourceWidth: number, sourceHeight: number, targetCanvas: HTMLCanvasElement,cacheKey?: string): any; + + evictCachesForKey(cacheKey: string): void; + + dispose(): void; + + clearWebGLCaches(): void; + +} +export let filterBackend: FilterBackend; +export interface Canvas2dFilterBackend extends FilterBackend { } +export class Canvas2dFilterBackend { + constructor(); +} + +export interface GPUInfo{ + renderer:string; + vendor:string; +} + +export interface WebglFilterBackendOptions { + tileSize: number; +} +export interface WebglFilterBackend extends FilterBackend, WebglFilterBackendOptions { + setupGLContext(width: number, height: number): void; + + chooseFastestCopyGLTo2DMethod(width: number, height: number): void; + + createWebGLCanvas(width: number, height: number): void; + + applyFiltersDebug(filters: IBaseFilter[], sourceElement: HTMLImageElement | HTMLCanvasElement, sourceWidth: number, sourceHeight: number, targetCanvas: HTMLCanvasElement, cacheKey?: string): any; + + glErrorToString(context: any, errorCode: any): string; + + createTexture(gl: WebGLRenderingContext, width: number, height: number, textureImageSource?: HTMLImageElement | HTMLCanvasElement): WebGLTexture; + + getCachedTexture(uniqueId: string, textureImageSource: HTMLImageElement | HTMLCanvasElement): WebGLTexture; + + copyGLTo2D(gl: WebGLRenderingContext, pipelineState: any): void; + + captureGPUInfo(): GPUInfo; + +} + +export class WebglFilterBackend { + constructor(options?: WebglFilterBackendOptions); +} + diff --git a/types/fabric/index.d.ts b/types/fabric/index.d.ts index 38277c5708..76ed1ab054 100644 --- a/types/fabric/index.d.ts +++ b/types/fabric/index.d.ts @@ -5,6 +5,7 @@ // Michael Randolph // Tiger Oakes // Brian Martinson +// Rogerio Teixeira // 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 dfdaafce06..1060525a00 100644 --- a/types/fabric/test/index.ts +++ b/types/fabric/test/index.ts @@ -1061,3 +1061,9 @@ function sample10() { canvas.add(objB); const objArray = canvas.getActiveObjects(); } + +function sample11() { + const canvas2dFilterBackend = new fabric.Canvas2dFilterBackend(); + const webglFilterBackend = new fabric.WebglFilterBackend(); + fabric.filterBackend = new fabric.Canvas2dFilterBackend(); +}