diff --git a/types/react-native-canvas/index.d.ts b/types/react-native-canvas/index.d.ts new file mode 100644 index 0000000000..559b986ba8 --- /dev/null +++ b/types/react-native-canvas/index.d.ts @@ -0,0 +1,206 @@ +// 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: 3.1 + +import * as React from "react"; +import { StyleProp, ViewStyle } from "react-native"; + +export interface CanvasProps { + baseUrl?: string; + originWhitelist?: string[]; + ref: (canvas: Canvas) => any; + style?: StyleProp; +} + +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: ImageData + ) => void; + 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 + ) => 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; + 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; + 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: 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; + 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 default class Canvas extends React.Component { + width: number; + height: number; + toDataURL: () => string; + getContext: (context: string) => CanvasRenderingContext2D; +} + +export class Image { + constructor(canvas: Canvas, 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: Canvas, data: number[], height: number, width: number); + readonly data: number[]; + readonly height: number; + readonly width: number; +} + +export class Path2D { + constructor(canvas: Canvas, ...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 new file mode 100644 index 0000000000..4b5227231b --- /dev/null +++ b/types/react-native-canvas/react-native-canvas-tests.tsx @@ -0,0 +1,52 @@ +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) => { + 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); + + 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 new file mode 100644 index 0000000000..a86d644a9f --- /dev/null +++ b/types/react-native-canvas/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": ["es6", "es2017"], + "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" }