From 9623d61290fb9ded402ecd6f3de40fac17b2c60c Mon Sep 17 00:00:00 2001 From: Klaus Reimer Date: Fri, 1 Mar 2019 19:13:17 +0100 Subject: [PATCH 1/6] Add offscreencanvas types --- types/offscreencanvas/index.d.ts | 50 +++++++++++++++++++ .../offscreencanvas/offscreencanvas-tests.ts | 29 +++++++++++ types/offscreencanvas/tsconfig.json | 23 +++++++++ types/offscreencanvas/tslint.json | 1 + 4 files changed, 103 insertions(+) create mode 100644 types/offscreencanvas/index.d.ts create mode 100644 types/offscreencanvas/offscreencanvas-tests.ts create mode 100644 types/offscreencanvas/tsconfig.json create mode 100644 types/offscreencanvas/tslint.json diff --git a/types/offscreencanvas/index.d.ts b/types/offscreencanvas/index.d.ts new file mode 100644 index 0000000000..395af42f16 --- /dev/null +++ b/types/offscreencanvas/index.d.ts @@ -0,0 +1,50 @@ +// Type definitions for the W3C OffscreenCanvas +// Project: https://html.spec.whatwg.org/multipage/canvas.html#the-offscreencanvas-interface +// Definitions by: Klaus Reimer +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +declare global { + // https://html.spec.whatwg.org/multipage/canvas.html#canvasdrawimage + interface CanvasDrawImage { + drawImage(image: OffscreenCanvas, dx: number, dy: number): void; + drawImage(image: OffscreenCanvas, dx: number, dy: number, dw: number, dh: number): void; + drawImage(image: OffscreenCanvas, sx: number, sy: number, sw: number, sh: number, + dx: number, dy: number, dw: number, dh: number): void; + } + + // https://html.spec.whatwg.org/multipage/canvas.html#dom-canvas-transfercontroltooffscreen + interface HTMLCanvasElement extends HTMLElement { + transferControlToOffscreen(): OffscreenCanvas; + } + + // https://html.spec.whatwg.org/multipage/canvas.html#offscreencanvasrenderingcontext2d + interface OffscreenCanvasRenderingContext2D extends CanvasState, CanvasTransform, CanvasCompositing, + CanvasImageSmoothing, CanvasFillStrokeStyles, CanvasShadowStyles, CanvasFilters, CanvasRect, + CanvasDrawPath, CanvasText, CanvasDrawImage, CanvasImageData, CanvasPathDrawingStyles, + CanvasTextDrawingStyles, CanvasPath { + readonly canvas: OffscreenCanvas; + } + var OffscreenCanvasRenderingContext2D: { + prototype: OffscreenCanvasRenderingContext2D; + new (): OffscreenCanvasRenderingContext2D; + } + + // https://html.spec.whatwg.org/multipage/canvas.html#the-offscreencanvas-interface + interface OffscreenCanvas extends EventTarget { + width: number; + height: number; + getContext(contextId: "2d", contextAttributes?: CanvasRenderingContext2DSettings): + OffscreenCanvasRenderingContext2D | null; + getContext(contextId: "webgl", contextAttributes?: WebGLContextAttributes): WebGLRenderingContext | null; + getContext(contextId: string, contextAttributes?: {}): OffscreenCanvasRenderingContext2D + | WebGLRenderingContext | null; + transferToImageBitmap(): ImageBitmap; + convertToBlob(options?: { type?: string, quality?: number }): Promise; + } + var OffscreenCanvas: { + prototype: OffscreenCanvas; + new (width: number, height: number): OffscreenCanvas; + } +} + +export { }; diff --git a/types/offscreencanvas/offscreencanvas-tests.ts b/types/offscreencanvas/offscreencanvas-tests.ts new file mode 100644 index 0000000000..f74690ad9a --- /dev/null +++ b/types/offscreencanvas/offscreencanvas-tests.ts @@ -0,0 +1,29 @@ +// Test constructor +const offscreenCanvas: OffscreenCanvas = new OffscreenCanvas(20, 10); + +// Test OffscreenCanvas properties +let width: number = offscreenCanvas.width; +let height: number = offscreenCanvas.height; + +// Test OffscreenCanvas methods +const context2D: OffscreenCanvasRenderingContext2D | null = offscreenCanvas.getContext("2d"); +const webglContext: WebGLRenderingContext | null = offscreenCanvas.getContext("webgl"); +const otherContext: OffscreenCanvasRenderingContext2D | WebGLRenderingContext | null = + offscreenCanvas.getContext("foobar"); +const imageBitmap: ImageBitmap = offscreenCanvas.transferToImageBitmap(); +const blob1: Promise = offscreenCanvas.convertToBlob(); +const blob2: Promise = offscreenCanvas.convertToBlob({ type: "image/jpeg" }); +const blob3: Promise = offscreenCanvas.convertToBlob({ type: "image/jpeg", quality: 0.92 }); + +// Test OffscreenCanvasRenderingContext2D properties +const canvasRef: OffscreenCanvas = context2D!.canvas; + +// Test HTMLCanvasElement methods +const canvas: HTMLCanvasElement = document.createElement("canvas"); +const transferredCanvas: OffscreenCanvas = canvas.transferControlToOffscreen(); + +// Test CanvasRenderingContext2D methods +const ctx = canvas.getContext("2d")!; +ctx.drawImage(offscreenCanvas, 0, 0); +ctx.drawImage(offscreenCanvas, 0, 0, 20, 10); +ctx.drawImage(offscreenCanvas, 0, 0, 20, 10, 0, 0, 20, 10); diff --git a/types/offscreencanvas/tsconfig.json b/types/offscreencanvas/tsconfig.json new file mode 100644 index 0000000000..3bb1ca90b4 --- /dev/null +++ b/types/offscreencanvas/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "offscreencanvas-tests.ts" + ] +} diff --git a/types/offscreencanvas/tslint.json b/types/offscreencanvas/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/offscreencanvas/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } From 749f6eaf2e2164380eeb9e5db8fd68ed103dd487 Mon Sep 17 00:00:00 2001 From: Klaus Reimer Date: Fri, 1 Mar 2019 19:46:08 +0100 Subject: [PATCH 2/6] Fix createImageBitmap and drawImage --- types/offscreencanvas/index.d.ts | 11 ++++++++--- types/offscreencanvas/offscreencanvas-tests.ts | 4 ++++ 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/types/offscreencanvas/index.d.ts b/types/offscreencanvas/index.d.ts index 395af42f16..810ba7a5f5 100644 --- a/types/offscreencanvas/index.d.ts +++ b/types/offscreencanvas/index.d.ts @@ -6,12 +6,17 @@ declare global { // https://html.spec.whatwg.org/multipage/canvas.html#canvasdrawimage interface CanvasDrawImage { - drawImage(image: OffscreenCanvas, dx: number, dy: number): void; - drawImage(image: OffscreenCanvas, dx: number, dy: number, dw: number, dh: number): void; - drawImage(image: OffscreenCanvas, sx: number, sy: number, sw: number, sh: number, + drawImage(image: CanvasImageSource | OffscreenCanvas, dx: number, dy: number): void; + drawImage(image: CanvasImageSource | OffscreenCanvas, dx: number, dy: number, dw: number, dh: number): void; + drawImage(image: CanvasImageSource | OffscreenCanvas, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void; } + // https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap + function createImageBitmap(image: ImageBitmapSource | OffscreenCanvas): Promise; + function createImageBitmap(image: ImageBitmapSource | OffscreenCanvas, sx: number, sy: number, + sw: number, sh: number): Promise; + // https://html.spec.whatwg.org/multipage/canvas.html#dom-canvas-transfercontroltooffscreen interface HTMLCanvasElement extends HTMLElement { transferControlToOffscreen(): OffscreenCanvas; diff --git a/types/offscreencanvas/offscreencanvas-tests.ts b/types/offscreencanvas/offscreencanvas-tests.ts index f74690ad9a..9f89e374b3 100644 --- a/types/offscreencanvas/offscreencanvas-tests.ts +++ b/types/offscreencanvas/offscreencanvas-tests.ts @@ -27,3 +27,7 @@ const ctx = canvas.getContext("2d")!; ctx.drawImage(offscreenCanvas, 0, 0); ctx.drawImage(offscreenCanvas, 0, 0, 20, 10); ctx.drawImage(offscreenCanvas, 0, 0, 20, 10, 0, 0, 20, 10); + +// Test createImageBitmap function with offscreen canvas +const imageBitmap1 = createImageBitmap(offscreenCanvas); +const imageBitmap2 = createImageBitmap(offscreenCanvas, 1, 2, 3, 4); From cb32368e03397703ce9741a8b064b6616b7b0700 Mon Sep 17 00:00:00 2001 From: Klaus Reimer Date: Fri, 1 Mar 2019 19:46:21 +0100 Subject: [PATCH 3/6] Add strictFunctionTypes option --- types/offscreencanvas/tsconfig.json | 1 + 1 file changed, 1 insertion(+) diff --git a/types/offscreencanvas/tsconfig.json b/types/offscreencanvas/tsconfig.json index 3bb1ca90b4..12d786084f 100644 --- a/types/offscreencanvas/tsconfig.json +++ b/types/offscreencanvas/tsconfig.json @@ -8,6 +8,7 @@ "noImplicitAny": true, "noImplicitThis": true, "strictNullChecks": true, + "strictFunctionTypes": true, "baseUrl": "../", "typeRoots": [ "../" From dd14243978af5beb48a230d93f94932d9c821e5e Mon Sep 17 00:00:00 2001 From: Klaus Reimer Date: Fri, 1 Mar 2019 19:52:52 +0100 Subject: [PATCH 4/6] Fix header format --- types/offscreencanvas/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/offscreencanvas/index.d.ts b/types/offscreencanvas/index.d.ts index 810ba7a5f5..a5940042d8 100644 --- a/types/offscreencanvas/index.d.ts +++ b/types/offscreencanvas/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for the W3C OffscreenCanvas +// Type definitions for non-npm package offscreencanvas-browser // Project: https://html.spec.whatwg.org/multipage/canvas.html#the-offscreencanvas-interface // Definitions by: Klaus Reimer // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped From 3764aa01952e399c9c4e876df4c9fd47e2fefae1 Mon Sep 17 00:00:00 2001 From: Klaus Reimer Date: Fri, 1 Mar 2019 20:00:41 +0100 Subject: [PATCH 5/6] Fix liniting errors --- types/offscreencanvas/index.d.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/types/offscreencanvas/index.d.ts b/types/offscreencanvas/index.d.ts index a5940042d8..de3b3a7fe3 100644 --- a/types/offscreencanvas/index.d.ts +++ b/types/offscreencanvas/index.d.ts @@ -1,8 +1,10 @@ -// Type definitions for non-npm package offscreencanvas-browser +// Type definitions for non-npm package offscreencanvas-browser 2019.3 // Project: https://html.spec.whatwg.org/multipage/canvas.html#the-offscreencanvas-interface // Definitions by: Klaus Reimer // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 3.1 + declare global { // https://html.spec.whatwg.org/multipage/canvas.html#canvasdrawimage interface CanvasDrawImage { @@ -32,7 +34,7 @@ declare global { var OffscreenCanvasRenderingContext2D: { prototype: OffscreenCanvasRenderingContext2D; new (): OffscreenCanvasRenderingContext2D; - } + }; // https://html.spec.whatwg.org/multipage/canvas.html#the-offscreencanvas-interface interface OffscreenCanvas extends EventTarget { @@ -49,7 +51,7 @@ declare global { var OffscreenCanvas: { prototype: OffscreenCanvas; new (width: number, height: number): OffscreenCanvas; - } + }; } export { }; From 98aed985909e030e0c02e418747c996c70b468db Mon Sep 17 00:00:00 2001 From: Klaus Reimer Date: Fri, 8 Mar 2019 07:41:32 +0100 Subject: [PATCH 6/6] Remove declare global --- types/offscreencanvas/index.d.ts | 92 +++++++++++++++----------------- 1 file changed, 44 insertions(+), 48 deletions(-) diff --git a/types/offscreencanvas/index.d.ts b/types/offscreencanvas/index.d.ts index de3b3a7fe3..89e2b14df6 100644 --- a/types/offscreencanvas/index.d.ts +++ b/types/offscreencanvas/index.d.ts @@ -5,53 +5,49 @@ // TypeScript Version: 3.1 -declare global { - // https://html.spec.whatwg.org/multipage/canvas.html#canvasdrawimage - interface CanvasDrawImage { - drawImage(image: CanvasImageSource | OffscreenCanvas, dx: number, dy: number): void; - drawImage(image: CanvasImageSource | OffscreenCanvas, dx: number, dy: number, dw: number, dh: number): void; - drawImage(image: CanvasImageSource | OffscreenCanvas, sx: number, sy: number, sw: number, sh: number, - dx: number, dy: number, dw: number, dh: number): void; - } - - // https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap - function createImageBitmap(image: ImageBitmapSource | OffscreenCanvas): Promise; - function createImageBitmap(image: ImageBitmapSource | OffscreenCanvas, sx: number, sy: number, - sw: number, sh: number): Promise; - - // https://html.spec.whatwg.org/multipage/canvas.html#dom-canvas-transfercontroltooffscreen - interface HTMLCanvasElement extends HTMLElement { - transferControlToOffscreen(): OffscreenCanvas; - } - - // https://html.spec.whatwg.org/multipage/canvas.html#offscreencanvasrenderingcontext2d - interface OffscreenCanvasRenderingContext2D extends CanvasState, CanvasTransform, CanvasCompositing, - CanvasImageSmoothing, CanvasFillStrokeStyles, CanvasShadowStyles, CanvasFilters, CanvasRect, - CanvasDrawPath, CanvasText, CanvasDrawImage, CanvasImageData, CanvasPathDrawingStyles, - CanvasTextDrawingStyles, CanvasPath { - readonly canvas: OffscreenCanvas; - } - var OffscreenCanvasRenderingContext2D: { - prototype: OffscreenCanvasRenderingContext2D; - new (): OffscreenCanvasRenderingContext2D; - }; - - // https://html.spec.whatwg.org/multipage/canvas.html#the-offscreencanvas-interface - interface OffscreenCanvas extends EventTarget { - width: number; - height: number; - getContext(contextId: "2d", contextAttributes?: CanvasRenderingContext2DSettings): - OffscreenCanvasRenderingContext2D | null; - getContext(contextId: "webgl", contextAttributes?: WebGLContextAttributes): WebGLRenderingContext | null; - getContext(contextId: string, contextAttributes?: {}): OffscreenCanvasRenderingContext2D - | WebGLRenderingContext | null; - transferToImageBitmap(): ImageBitmap; - convertToBlob(options?: { type?: string, quality?: number }): Promise; - } - var OffscreenCanvas: { - prototype: OffscreenCanvas; - new (width: number, height: number): OffscreenCanvas; - }; +// https://html.spec.whatwg.org/multipage/canvas.html#canvasdrawimage +interface CanvasDrawImage { + drawImage(image: CanvasImageSource | OffscreenCanvas, dx: number, dy: number): void; + drawImage(image: CanvasImageSource | OffscreenCanvas, dx: number, dy: number, dw: number, dh: number): void; + drawImage(image: CanvasImageSource | OffscreenCanvas, sx: number, sy: number, sw: number, sh: number, + dx: number, dy: number, dw: number, dh: number): void; } -export { }; +// https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap +declare function createImageBitmap(image: ImageBitmapSource | OffscreenCanvas): Promise; +declare function createImageBitmap(image: ImageBitmapSource | OffscreenCanvas, sx: number, sy: number, + sw: number, sh: number): Promise; + +// https://html.spec.whatwg.org/multipage/canvas.html#dom-canvas-transfercontroltooffscreen +interface HTMLCanvasElement extends HTMLElement { + transferControlToOffscreen(): OffscreenCanvas; +} + +// https://html.spec.whatwg.org/multipage/canvas.html#offscreencanvasrenderingcontext2d +interface OffscreenCanvasRenderingContext2D extends CanvasState, CanvasTransform, CanvasCompositing, + CanvasImageSmoothing, CanvasFillStrokeStyles, CanvasShadowStyles, CanvasFilters, CanvasRect, + CanvasDrawPath, CanvasText, CanvasDrawImage, CanvasImageData, CanvasPathDrawingStyles, + CanvasTextDrawingStyles, CanvasPath { + readonly canvas: OffscreenCanvas; +} +declare var OffscreenCanvasRenderingContext2D: { + prototype: OffscreenCanvasRenderingContext2D; + new (): OffscreenCanvasRenderingContext2D; +}; + +// https://html.spec.whatwg.org/multipage/canvas.html#the-offscreencanvas-interface +interface OffscreenCanvas extends EventTarget { + width: number; + height: number; + getContext(contextId: "2d", contextAttributes?: CanvasRenderingContext2DSettings): + OffscreenCanvasRenderingContext2D | null; + getContext(contextId: "webgl", contextAttributes?: WebGLContextAttributes): WebGLRenderingContext | null; + getContext(contextId: string, contextAttributes?: {}): OffscreenCanvasRenderingContext2D + | WebGLRenderingContext | null; + transferToImageBitmap(): ImageBitmap; + convertToBlob(options?: { type?: string, quality?: number }): Promise; +} +declare var OffscreenCanvas: { + prototype: OffscreenCanvas; + new (width: number, height: number): OffscreenCanvas; +};