From 2255d9c32d78b9050537602b94e52da8a3d038fb Mon Sep 17 00:00:00 2001 From: Haseeb Majid Date: Fri, 15 Mar 2019 22:20:39 +0000 Subject: [PATCH 1/6] Added react-native-canvas --- types/react-native-canvas/index.d.ts | 19 +++++++++++++++++++ .../react-native-canvas-tests.tsx | 19 +++++++++++++++++++ types/react-native-canvas/tsconfig.json | 17 +++++++++++++++++ types/react-native-canvas/tslint.json | 1 + 4 files changed, 56 insertions(+) create mode 100644 types/react-native-canvas/index.d.ts create mode 100644 types/react-native-canvas/react-native-canvas-tests.tsx create mode 100644 types/react-native-canvas/tsconfig.json create mode 100644 types/react-native-canvas/tslint.json diff --git a/types/react-native-canvas/index.d.ts b/types/react-native-canvas/index.d.ts new file mode 100644 index 0000000000..3dae92869f --- /dev/null +++ b/types/react-native-canvas/index.d.ts @@ -0,0 +1,19 @@ +// Type definitions for react-native-canvas 0.1 +// Project: https://github.com/iddan/react-native-canvas#readme +// Definitions by: hmajid2301 +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 + +import * as React from "react"; +import { StyleProp, ViewStyle } from "react-native"; + +export interface CanvasProps { + style: StyleProp; + baseUrl: string; + originWhitelist: string[]; +} + +export default class Canvas extends React.Component {} +export class Image extends React.Component {} +export class ImageData extends React.Component {} +export class Path2D extends React.Component {} diff --git a/types/react-native-canvas/react-native-canvas-tests.tsx b/types/react-native-canvas/react-native-canvas-tests.tsx new file mode 100644 index 0000000000..1914b78d09 --- /dev/null +++ b/types/react-native-canvas/react-native-canvas-tests.tsx @@ -0,0 +1,19 @@ +import * as React from "react"; +import { View } from "react-native"; +import Canvas, { + Image as CanvasImage, + Path2D, + ImageData +} from "react-native-canvas"; + +class CanvasTest extends React.Component { + render() { + return ( + + + + ); + } + + handleCanvas = (canvas: Canvas) => {}; +} diff --git a/types/react-native-canvas/tsconfig.json b/types/react-native-canvas/tsconfig.json new file mode 100644 index 0000000000..ef85b41bd1 --- /dev/null +++ b/types/react-native-canvas/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": ["es6"], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": ["../"], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true, + "jsx": "react-native" + }, + "files": ["index.d.ts", "react-native-canvas-tests.tsx"] +} diff --git a/types/react-native-canvas/tslint.json b/types/react-native-canvas/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-native-canvas/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } From 2492054ca346f1086c6437e1c2ad5bcb6493309d Mon Sep 17 00:00:00 2001 From: Haseeb Majid Date: Fri, 15 Mar 2019 23:01:30 +0000 Subject: [PATCH 2/6] Updated Definitions --- types/react-native-canvas/index.d.ts | 92 ++++++++++++++++++- .../react-native-canvas-tests.tsx | 27 +++++- 2 files changed, 115 insertions(+), 4 deletions(-) diff --git a/types/react-native-canvas/index.d.ts b/types/react-native-canvas/index.d.ts index 3dae92869f..d9aa845ef6 100644 --- a/types/react-native-canvas/index.d.ts +++ b/types/react-native-canvas/index.d.ts @@ -7,10 +7,96 @@ import * as React from "react"; import { StyleProp, ViewStyle } from "react-native"; +export interface IImageData { + data: number[]; + height: number; + width: number; +} + +export interface CanvasRenderingContext2D { + fillStyle: string; + font: string; + globalAlpha: number; + globalCompositionOperation: string; + linecap: string; + lineDashOffset: number; + lineJoin: string; + lineWidth: number; + miterLimit: number; + shadowBlur: number; + shadowColor: string; + shadowOffsetX: number; + shadowOffsetY: number; + strokeStyle: string; + textAlign: string; + arc: ( + x: number, + y: number, + r: number, + sAngle: number, + eAngle: number, + counterClockwise?: number + ) => void; + arcTo: (x1: number, y1: number, x2: number, y2: number, r: number) => void; + beginPath: () => void; + bezierCurveTo: ( + cp1x: number, + cp1y: number, + cp2x: number, + cp2y: number, + x: number, + y: number + ) => void; + clearRect: (x: number, y: number, width: number, height: number) => void; + clip: () => void; + closePath: () => void; + createImageData: ( + width: number, + height: number, + imageData: IImageData + ) => void; + createLinearGradient; + createPattern; + createRadialGradient; + drawFocusIfNeeded; + drawImage; + drawWidgetAsOnScreen; + drawWindow; + fill; + fillRect: (x: number, y: number, width: number, height: number) => void; + fillText; + getImageData; + getLineDash; + isPointInPath; + isPointInStroke; + lineTo; + measureText; + moveTo; + putImageData; + quadraticCurveTo; + rect; + restore; + rotate; + save; + scale; + setLineDash; + setTransform; + stroke; + strokeRect; + strokeText; + transform; + translate; +} + +export interface ICanvas { + getContext: (context: string) => CanvasRenderingContext2D; +} + export interface CanvasProps { - style: StyleProp; - baseUrl: string; - originWhitelist: string[]; + baseUrl?: string; + originWhitelist?: string[]; + ref: (canvas: ICanvas) => void; + style?: StyleProp; } export default class Canvas extends React.Component {} diff --git a/types/react-native-canvas/react-native-canvas-tests.tsx b/types/react-native-canvas/react-native-canvas-tests.tsx index 1914b78d09..4fce8beb97 100644 --- a/types/react-native-canvas/react-native-canvas-tests.tsx +++ b/types/react-native-canvas/react-native-canvas-tests.tsx @@ -1,6 +1,7 @@ import * as React from "react"; import { View } from "react-native"; import Canvas, { + ICanvas, Image as CanvasImage, Path2D, ImageData @@ -15,5 +16,29 @@ class CanvasTest extends React.Component { ); } - handleCanvas = (canvas: Canvas) => {}; + handleCanvas = (canvas: ICanvas) => { + canvas.width = 100; + canvas.height = 100; + + const context = canvas.getContext("2d"); + context.fillStyle = "purple"; + context.fillRect(0, 0, 100, 100); + + const ellipse = new Path2D(canvas); + ellipse.ellipse(50, 50, 25, 35, (45 * Math.PI) / 180, 0, 2 * Math.PI); + context.fillStyle = "purple"; + context.fill(ellipse); + + context.getImageData(0, 0, 100, 100).then((imageData: ImageData) => { + const data = Object.values(imageData.data); + const length = Object.keys(data).length; + for (let i = 0; i < length; i += 4) { + data[i] = 0; + data[i + 1] = 0; + data[i + 2] = 0; + } + const imgData = new ImageData(canvas, data, 100, 100); + context.putImageData(imgData, 0, 0); + }); + }; } From 3a7dfab02f26033dfce809f93d380e86d4ed25a5 Mon Sep 17 00:00:00 2001 From: Haseeb Majid Date: Fri, 15 Mar 2019 23:11:47 +0000 Subject: [PATCH 3/6] Updated definitions more --- types/react-native-canvas/index.d.ts | 29 ++++++++++++++++++---------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/types/react-native-canvas/index.d.ts b/types/react-native-canvas/index.d.ts index d9aa845ef6..20128c6ea8 100644 --- a/types/react-native-canvas/index.d.ts +++ b/types/react-native-canvas/index.d.ts @@ -13,6 +13,10 @@ export interface IImageData { width: number; } +// +export interface IImage { +} + export interface CanvasRenderingContext2D { fillStyle: string; font: string; @@ -50,21 +54,26 @@ export interface CanvasRenderingContext2D { clearRect: (x: number, y: number, width: number, height: number) => void; clip: () => void; closePath: () => void; - createImageData: ( + createImageData: ( // width: number, height: number, imageData: IImageData ) => void; - createLinearGradient; - createPattern; - createRadialGradient; - drawFocusIfNeeded; - drawImage; - drawWidgetAsOnScreen; - drawWindow; - fill; + createLinearGradient: ( + x0: number, + yo: number, + x1: number, + y1: number + ) => void; + createPattern: () => void; + createRadialGradient: (x0: number, y0: number, r0: number, x1: number, y1: number, r1: number); + drawFocusIfNeeded: (html: any) => void; // + drawImage: (image: IImage, sx?: number, sy?: number, sWidth?: number, sHeight?: number, dx: number, dy: number, dWidth?: number, dHeight?: number) => void; // + drawWidgetAsOnScreen: (window: any) => void; // + drawWindow: (window: any, x: number, y: number, w: number, h: number, bgColor: string, flags?: any) => void; // + fill: (fillRule?: any, Path2D: any) => void; // fillRect: (x: number, y: number, width: number, height: number) => void; - fillText; + fillText: (text: string, x:number, y: number, maxWidth?: number) => void; getImageData; getLineDash; isPointInPath; From c78831ca896ce888c0cc924398d0a5e298a55d73 Mon Sep 17 00:00:00 2001 From: Haseeb Majid Date: Fri, 15 Mar 2019 23:30:05 +0000 Subject: [PATCH 4/6] Added more definitions --- types/react-native-canvas/index.d.ts | 44 ++++++++++++++-------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/types/react-native-canvas/index.d.ts b/types/react-native-canvas/index.d.ts index 20128c6ea8..35cdc6e311 100644 --- a/types/react-native-canvas/index.d.ts +++ b/types/react-native-canvas/index.d.ts @@ -71,30 +71,30 @@ export interface CanvasRenderingContext2D { drawImage: (image: IImage, sx?: number, sy?: number, sWidth?: number, sHeight?: number, dx: number, dy: number, dWidth?: number, dHeight?: number) => void; // drawWidgetAsOnScreen: (window: any) => void; // drawWindow: (window: any, x: number, y: number, w: number, h: number, bgColor: string, flags?: any) => void; // - fill: (fillRule?: any, Path2D: any) => void; // + fill: (fillRule?: any, Path2D: Path2D) => void; // fillRect: (x: number, y: number, width: number, height: number) => void; fillText: (text: string, x:number, y: number, maxWidth?: number) => void; - getImageData; - getLineDash; - isPointInPath; - isPointInStroke; - lineTo; - measureText; - moveTo; - putImageData; - quadraticCurveTo; - rect; - restore; - rotate; - save; - scale; - setLineDash; - setTransform; - stroke; - strokeRect; - strokeText; - transform; - translate; + getImageData: (sx: number, sy: number, sw: number, sh: number) => IImageData; + getLineDash: () => number[]; + isPointInPath: (x: number, y: number, fillRule: any, path: Path2D) => boolean; + isPointInStroke: (x: number, y: number, path: Path2D) => boolean; + lineTo: (x: number, y: number) => void; + measureText: (text: string) => any; // + moveTo: (x: number, y: number) => void; + putImageData: (imageData: IImageData, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number) => void; + quadraticCurveTo: (cpx: number, cpy: number, x: number, y: number) => void; + rect: (x: number, y: number, width: number, height: number) => void; + restore: () => void; + rotate: (angle: number) => void; + save: () => void; + scale: (x: number, y: number) => void; + setLineDash: (segments: number[]) => void; + setTransform: (a: number, b: number, c: number, d: number, e: number, f: number) => void; + stroke: (path: Path2D) => void; + strokeRect: (x: number, y:number, width: number, height: number) => void; + strokeText: (text: string, x: number, y: number, maxWidth?: number) => void; + transform: (a: number, b: number, c: number, d: number, e: number, f: number) => void; + translate: (x: number, y: number) => void; } export interface ICanvas { From b2863192f524179870cab75446e1ac247e0c5c75 Mon Sep 17 00:00:00 2001 From: Haseeb Majid Date: Sat, 16 Mar 2019 13:01:40 +0000 Subject: [PATCH 5/6] Finished defining the styles --- types/react-native-canvas/index.d.ts | 164 ++++++++++++++---- .../react-native-canvas-tests.tsx | 29 ++-- types/react-native-canvas/tsconfig.json | 2 +- 3 files changed, 149 insertions(+), 46 deletions(-) diff --git a/types/react-native-canvas/index.d.ts b/types/react-native-canvas/index.d.ts index 35cdc6e311..b534ac1d46 100644 --- a/types/react-native-canvas/index.d.ts +++ b/types/react-native-canvas/index.d.ts @@ -7,14 +7,18 @@ import * as React from "react"; import { StyleProp, ViewStyle } from "react-native"; -export interface IImageData { - data: number[]; - height: number; +export interface ICanvas { width: number; + height: number; + toDataURL: () => string; + getContext: (context: string) => CanvasRenderingContext2D; } -// -export interface IImage { +export interface CanvasProps { + baseUrl?: string; + originWhitelist?: string[]; + ref: (canvas: ICanvas) => void; + style?: StyleProp; } export interface CanvasRenderingContext2D { @@ -54,10 +58,11 @@ export interface CanvasRenderingContext2D { clearRect: (x: number, y: number, width: number, height: number) => void; clip: () => void; closePath: () => void; - createImageData: ( // + createImageData: ( + // width: number, height: number, - imageData: IImageData + imageData: ImageData ) => void; createLinearGradient: ( x0: number, @@ -66,22 +71,70 @@ export interface CanvasRenderingContext2D { y1: number ) => void; createPattern: () => void; - createRadialGradient: (x0: number, y0: number, r0: number, x1: number, y1: number, r1: number); - drawFocusIfNeeded: (html: any) => void; // - drawImage: (image: IImage, sx?: number, sy?: number, sWidth?: number, sHeight?: number, dx: number, dy: number, dWidth?: number, dHeight?: number) => void; // - drawWidgetAsOnScreen: (window: any) => void; // - drawWindow: (window: any, x: number, y: number, w: number, h: number, bgColor: string, flags?: any) => void; // - fill: (fillRule?: any, Path2D: Path2D) => void; // + createRadialGradient: ( + x0: number, + y0: number, + r0: number, + x1: number, + y1: number, + r1: number + ) => void; + drawFocusIfNeeded: (html: HTMLElement) => void; + drawImage: ( + image: Image, + dx: number, + dy: number, + sx?: number, + sy?: number, + sWidth?: number, + sHeight?: number, + dWidth?: number, + dHeight?: number + ) => void; + drawWidgetAsOnScreen: (window: any) => void; + drawWindow: ( + window: any, + x: number, + y: number, + w: number, + h: number, + bgColor: string, + flags?: any + ) => void; // + fill: (Path2D: Path2D, fillRule?: any) => void; fillRect: (x: number, y: number, width: number, height: number) => void; - fillText: (text: string, x:number, y: number, maxWidth?: number) => void; - getImageData: (sx: number, sy: number, sw: number, sh: number) => IImageData; + fillText: (text: string, x: number, y: number, maxWidth?: number) => void; + ellipse: ( + x: number, + y: number, + radiusX: number, + radiusY: number, + rotation: number, + startAngle: number, + endAngle: number, + anticlockwise?: boolean + ) => void; + getImageData: (sx: number, sy: number, sw: number, sh: number) => ImageData; getLineDash: () => number[]; - isPointInPath: (x: number, y: number, fillRule: any, path: Path2D) => boolean; + isPointInPath: ( + x: number, + y: number, + fillRule: any, + path: Path2D + ) => boolean; isPointInStroke: (x: number, y: number, path: Path2D) => boolean; lineTo: (x: number, y: number) => void; - measureText: (text: string) => any; // + measureText: (text: string) => any; moveTo: (x: number, y: number) => void; - putImageData: (imageData: IImageData, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number) => void; + putImageData: ( + imageData: ImageData, + dx: number, + dy: number, + dirtyX?: number, + dirtyY?: number, + dirtyWidth?: number, + dirtyHeight?: number + ) => void; quadraticCurveTo: (cpx: number, cpy: number, x: number, y: number) => void; rect: (x: number, y: number, width: number, height: number) => void; restore: () => void; @@ -89,26 +142,67 @@ export interface CanvasRenderingContext2D { save: () => void; scale: (x: number, y: number) => void; setLineDash: (segments: number[]) => void; - setTransform: (a: number, b: number, c: number, d: number, e: number, f: number) => void; + setTransform: ( + a: number, + b: number, + c: number, + d: number, + e: number, + f: number + ) => void; stroke: (path: Path2D) => void; - strokeRect: (x: number, y:number, width: number, height: number) => void; + strokeRect: (x: number, y: number, width: number, height: number) => void; strokeText: (text: string, x: number, y: number, maxWidth?: number) => void; - transform: (a: number, b: number, c: number, d: number, e: number, f: number) => void; + transform: ( + a: number, + b: number, + c: number, + d: number, + e: number, + f: number + ) => void; translate: (x: number, y: number) => void; } -export interface ICanvas { - getContext: (context: string) => CanvasRenderingContext2D; -} - -export interface CanvasProps { - baseUrl?: string; - originWhitelist?: string[]; - ref: (canvas: ICanvas) => void; - style?: StyleProp; -} - export default class Canvas extends React.Component {} -export class Image extends React.Component {} -export class ImageData extends React.Component {} -export class Path2D extends React.Component {} + +export class Image { + constructor(canvas: ICanvas, height?: number, width?: number); + crossOrigin: string | undefined; + height: number | undefined; + width: number | undefined; + src: string | undefined; + addEventListener: (event: string, func: (...args: any) => any) => void; +} + +export class ImageData { + constructor(canvas: ICanvas, data: number[], height: number, width: number); + readonly data: number[]; + readonly height: number; + readonly width: number; +} + +export class Path2D { + constructor(canvas: ICanvas, ...args: any); + addPath: ( + path: Path2D, + transform?: { + a: number; + b: number; + c: number; + d: number; + e: number; + f: number; + } + ) => void; + + closePath: CanvasRenderingContext2D["closePath"]; + moveTo: CanvasRenderingContext2D["moveTo"]; + lineTo: CanvasRenderingContext2D["lineTo"]; + bezierCurveTo: CanvasRenderingContext2D["bezierCurveTo"]; + quadraticCurveTo: CanvasRenderingContext2D["quadraticCurveTo"]; + arc: CanvasRenderingContext2D["arc"]; + arcTo: CanvasRenderingContext2D["arcTo"]; + ellipse: CanvasRenderingContext2D["ellipse"]; + rect: CanvasRenderingContext2D["rect"]; +} diff --git a/types/react-native-canvas/react-native-canvas-tests.tsx b/types/react-native-canvas/react-native-canvas-tests.tsx index 4fce8beb97..1adba4d4ff 100644 --- a/types/react-native-canvas/react-native-canvas-tests.tsx +++ b/types/react-native-canvas/react-native-canvas-tests.tsx @@ -29,16 +29,25 @@ class CanvasTest extends React.Component { context.fillStyle = "purple"; context.fill(ellipse); - context.getImageData(0, 0, 100, 100).then((imageData: ImageData) => { - const data = Object.values(imageData.data); - const length = Object.keys(data).length; - for (let i = 0; i < length; i += 4) { - data[i] = 0; - data[i + 1] = 0; - data[i + 2] = 0; - } - const imgData = new ImageData(canvas, data, 100, 100); - context.putImageData(imgData, 0, 0); + const image = new CanvasImage(canvas); + canvas.width = 100; + canvas.height = 100; + + image.src = + "https://upload.wikimedia.org/wikipedia/commons/6/63/Biho_Takashi._Bat_Before_the_Moon%2C_ca._1910.jpg"; + image.addEventListener("load", () => { + context.drawImage(image, 0, 0, 100, 100); }); + + const imageData = context.getImageData(0, 0, 100, 100); + const data = Object.values(imageData.data); + const length = Object.keys(data).length; + for (let i = 0; i < length; i += 4) { + data[i] = 0; + data[i + 1] = 0; + data[i + 2] = 0; + } + const imgData = new ImageData(canvas, data, 100, 100); + context.putImageData(imgData, 0, 0); }; } diff --git a/types/react-native-canvas/tsconfig.json b/types/react-native-canvas/tsconfig.json index ef85b41bd1..a86d644a9f 100644 --- a/types/react-native-canvas/tsconfig.json +++ b/types/react-native-canvas/tsconfig.json @@ -1,7 +1,7 @@ { "compilerOptions": { "module": "commonjs", - "lib": ["es6"], + "lib": ["es6", "es2017"], "noImplicitAny": true, "noImplicitThis": true, "strictNullChecks": true, From 21adc178a47eca990cf357b0c47d62b201c78cba Mon Sep 17 00:00:00 2001 From: Haseeb Majid Date: Sat, 16 Mar 2019 13:10:55 +0000 Subject: [PATCH 6/6] Fixed small bugs --- types/react-native-canvas/index.d.ts | 24 +++++++++---------- .../react-native-canvas-tests.tsx | 5 ++-- 2 files changed, 13 insertions(+), 16 deletions(-) diff --git a/types/react-native-canvas/index.d.ts b/types/react-native-canvas/index.d.ts index b534ac1d46..559b986ba8 100644 --- a/types/react-native-canvas/index.d.ts +++ b/types/react-native-canvas/index.d.ts @@ -2,22 +2,15 @@ // Project: https://github.com/iddan/react-native-canvas#readme // Definitions by: hmajid2301 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.8 +// TypeScript Version: 3.1 import * as React from "react"; import { StyleProp, ViewStyle } from "react-native"; -export interface ICanvas { - width: number; - height: number; - toDataURL: () => string; - getContext: (context: string) => CanvasRenderingContext2D; -} - export interface CanvasProps { baseUrl?: string; originWhitelist?: string[]; - ref: (canvas: ICanvas) => void; + ref: (canvas: Canvas) => any; style?: StyleProp; } @@ -164,10 +157,15 @@ export interface CanvasRenderingContext2D { translate: (x: number, y: number) => void; } -export default class Canvas extends React.Component {} +export default class Canvas extends React.Component { + width: number; + height: number; + toDataURL: () => string; + getContext: (context: string) => CanvasRenderingContext2D; +} export class Image { - constructor(canvas: ICanvas, height?: number, width?: number); + constructor(canvas: Canvas, height?: number, width?: number); crossOrigin: string | undefined; height: number | undefined; width: number | undefined; @@ -176,14 +174,14 @@ export class Image { } export class ImageData { - constructor(canvas: ICanvas, data: number[], height: number, width: number); + constructor(canvas: Canvas, data: number[], height: number, width: number); readonly data: number[]; readonly height: number; readonly width: number; } export class Path2D { - constructor(canvas: ICanvas, ...args: any); + constructor(canvas: Canvas, ...args: any); addPath: ( path: Path2D, transform?: { diff --git a/types/react-native-canvas/react-native-canvas-tests.tsx b/types/react-native-canvas/react-native-canvas-tests.tsx index 1adba4d4ff..4b5227231b 100644 --- a/types/react-native-canvas/react-native-canvas-tests.tsx +++ b/types/react-native-canvas/react-native-canvas-tests.tsx @@ -1,7 +1,6 @@ import * as React from "react"; import { View } from "react-native"; import Canvas, { - ICanvas, Image as CanvasImage, Path2D, ImageData @@ -16,7 +15,7 @@ class CanvasTest extends React.Component { ); } - handleCanvas = (canvas: ICanvas) => { + handleCanvas = (canvas: Canvas) => { canvas.width = 100; canvas.height = 100; @@ -49,5 +48,5 @@ class CanvasTest extends React.Component { } const imgData = new ImageData(canvas, data, 100, 100); context.putImageData(imgData, 0, 0); - }; + } }