From 866edd293634ae2ac16d38d4f911b8bc456faa93 Mon Sep 17 00:00:00 2001 From: leejaedus Date: Fri, 15 Jun 2018 12:36:55 +0900 Subject: [PATCH] [signature_pad] Make @types/signature_pad compatible with Typescript 2.8 --- types/signature_pad/index.d.ts | 286 ++++++++++++--------- types/signature_pad/signature_pad-tests.ts | 20 +- 2 files changed, 177 insertions(+), 129 deletions(-) diff --git a/types/signature_pad/index.d.ts b/types/signature_pad/index.d.ts index d1df3191b8..d82d4ab2ff 100644 --- a/types/signature_pad/index.d.ts +++ b/types/signature_pad/index.d.ts @@ -1,137 +1,183 @@ -// Type definitions for signature_pad +// Type definitions for signature_pad 2.3 // Project: https://github.com/szimek/signature_pad // Definitions by: Abubaker Bashir // Jason Mihalick +// Jaeyeon Lee // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // Project by: Szymon Nowak +// TypeScript Version: 2.8 -declare namespace SignaturePad { - class Point { - x: number; - y: number; - time: number; - color?: string; - constructor(x: number, y: number, time: number); - velocityFrom(start: Point): number; - distanceTo(start: Point): number; +declare module 'signature_pad' { + export class Point { + x: number; + y: number; + time: number; + color?: string; + + constructor(x: number, y: number, time: number); + + velocityFrom(start: Point): number; + + distanceTo(start: Point): number; } - class CurveControl { - c1: Point; - c2: Point; - constructor(c1: Point, c2: Point); + export class CurveControl { + c1: Point; + c2: Point; + + constructor(c1: Point, c2: Point); } - class Bezier { - startPoint: Point; - control1: CurveControl; - control2: CurveControl; - endPoint: Point; - constructor(startPoint: Point, control1: Point, control2: Point, endPoint: Point); - length(): number; - _point(t: number, start: number, c1: number, c2: number, end: number): number; + export class Bezier { + startPoint: Point; + control1: CurveControl; + control2: CurveControl; + endPoint: Point; + + constructor(startPoint: Point, control1: Point, control2: Point, endPoint: Point); + + length(): number; + + _point(t: number, start: number, c1: number, c2: number, end: number): number; } - interface SignaturePadOptions { - /** - * (float) Weight used to modify new velocity based on the previous velocity. Defaults to 0.7. - */ - velocityFilterWeight?: number; - /** - * (float) Minimum width of a line. Defaults to 0.5. - */ - minWidth?: number; - /** - * (float) Maximum width of a line. Defaults to 2.5. - */ - maxWidth?: number; - /** - * (float or function) Radius of a single dot. - */ - dotSize?: number | Function; - /** - * (string) Color used to draw the lines. Can be any color format accepted by context.fillStyle. - * Defaults to "black". - */ - penColor?: string; - /** - * (string) Color used to clear the background. Can be any color format accepted by context.fillStyle. - * Defaults to "rgba(0,0,0,0)" (transparent black). Use a non-transparent color e.g. "rgb(255,255,255)" - * (opaque white) if you'd like to save signatures as JPEG images. - */ - backgroundColor?: string; - /** - * (function) Callback when stroke begin. - */ - onEnd?: Function; - /** - * (function) Callback when stroke end. - */ - onBegin?: Function; + export interface SignaturePadOptions { + /** + * (float or function) Radius of a single dot. + */ + dotSize?: number | Function + /** + * (float) Minimum width of a line. + * Defaults to 0.5. + */ + minWidth?: number + /** + * (float) Maximum width of a line. + * Defaults to 2.5. + */ + maxWidth?: number + /** + * (integer) Draw the next point at most once per every x milliseconds. + * Set it to 0 to turn off throttling. + * Defaults to 16. + */ + throttle?: number + /** + * (integer) Add the next point only if the previous one is farther than x pixels. + * Defaults to 5. + */ + minDistance?: number + /** + * Color used to clear the background. + * Can be any color format accepted by context.fillStyle. + * Defaults to "rgba(0,0,0,0)" (transparent black). + * Use a non-transparent color e.g. "rgb(255,255,255)" (opaque white) if you'd like to save signatures as JPEG images. + */ + backgroundColor?: string + /** + * Color used to draw the lines. + * Can be any color format accepted by context.fillStyle. + * Defaults to "black". + */ + penColor?: string + /** + * (float) Weight used to modify new velocity based on the previous velocity. + * Defaults to 0.7. + */ + velocityFilterWeight?: number + /** + * Callback when stroke begin. + */ + onBegin?: Function + /** + * Callback when stroke end. + */ + onEnd?: Function } -} -declare class SignaturePad { - points: Array; - _lastVelocity: number; - _lastWidth: number; - _isEmpty: boolean; - _mouseButtonDown: boolean; - _ctx: CanvasRenderingContext2D; - _canvas: HTMLCanvasElement; - velocityFilterWeight: number; - minWidth: number; - maxWidth: number; - dotSize: Function; - penColor: string; - backgroundColor: string; - onEnd: Function; - onBegin: Function; + export class SignaturePad { + points: Array; + _lastVelocity: number; + _lastWidth: number; + _isEmpty: boolean; + _mouseButtonDown: boolean; + _ctx: CanvasRenderingContext2D; + _canvas: HTMLCanvasElement; + velocityFilterWeight: number; + minWidth: number; + maxWidth: number; + dotSize: Function; + penColor: string; + backgroundColor: string; + onEnd: Function; + onBegin: Function; - constructor(canvas: Element, options?: SignaturePad.SignaturePadOptions); - /** - * Clears the canvas - */ - clear(): void; - /** - * Returns true if canvas is empty, otherwise returns false - */ - isEmpty(): boolean; - /** - * Draws signature image from data URL - */ - fromDataURL(dataUrl: string): void; - /** - * Returns array of signature point groups - */ - toData(): Array>; - /** - * Returns signature image as data URL. - * If 'type' parameter is ommitted, PNG dataUrl is returned. - */ - toDataURL(type?: string): string; - /** - * Unbinds all event handlers - */ - off(): void; - /** - * Rebinds all event handlers - */ - on(): void; + constructor(canvas: Element, options?: SignaturePadOptions); - _strokeBegin(event: Event): void; - _strokeUpdate(event: Event): void; - _strokeDraw(point: SignaturePad.Point): void; - _strokeEnd(event: Event): void; - _handleMouseEvents(): void; - _handleTouchEvents(): void; - _reset(): void; - _createPoint(event: Event): SignaturePad.Point; - _addPoint(point: SignaturePad.Point): void; - _calculateCurveControlPoints(point1: SignaturePad.Point, point2: SignaturePad.Point, point3: SignaturePad.Point): void; + /** + * Clears the canvas + */ + clear(): void; - _addCurve(curve: SignaturePad.Bezier): void; - _drawPoint(x: number, y: number, size: number): void; - _drawCurve(curve: SignaturePad.Bezier, startWidth: number, endWidth: number): void; - _strokeWidth(velocity: number): void; -} + /** + * Returns true if canvas is empty, otherwise returns false + */ + isEmpty(): boolean; + + /** + * Draws signature image from data URL + */ + fromDataURL(dataUrl: string): void; + + /** + * Returns array of signature point groups + */ + toData(): Array>; + + /** + * Returns signature image as data URL. + * If 'type' parameter is ommitted, PNG dataUrl is returned. + */ + toDataURL(type?: string): string; + + /** + * Unbinds all event handlers + */ + off(): void; + + /** + * Rebinds all event handlers + */ + on(): void; + + _strokeBegin(event: Event): void; + + _strokeUpdate(event: Event): void; + + _strokeDraw(point: Point): void; + + _strokeEnd(event: Event): void; + + _handleMouseEvents(): void; + + _handleTouchEvents(): void; + + _reset(): void; + + _createPoint(event: Event): Point; + + _addPoint(point: Point): void; + + _calculateCurveControlPoints(point1: Point, point2: Point, point3: Point): void; + + _addCurve(curve: Bezier): void; + + _drawPoint(x: number, y: number, size: number): void; + + _drawCurve(curve: Bezier, startWidth: number, endWidth: number): void; + + _strokeWidth(velocity: number): void; + } + + export default SignaturePad; + } \ No newline at end of file diff --git a/types/signature_pad/signature_pad-tests.ts b/types/signature_pad/signature_pad-tests.ts index b83b0ec682..b7bff8f126 100644 --- a/types/signature_pad/signature_pad-tests.ts +++ b/types/signature_pad/signature_pad-tests.ts @@ -1,8 +1,10 @@ +import SignaturePad from 'signature_pad'; + /* TEST 1 - Basic structure and usage */ function BasicTest() { - var canvas = document.querySelector("canvas"); + const canvas = document.querySelector('canvas'); - var signaturePad = new SignaturePad(canvas); + const signaturePad = new SignaturePad(canvas); // Returns signature image as data URL signaturePad.toDataURL(); @@ -14,7 +16,7 @@ function BasicTest() { signaturePad.toData(); // Draws signature image from data URL - signaturePad.fromDataURL("data:image/png;base64,iVBORw0K..."); + signaturePad.fromDataURL('data:image/png;base64,iVBORw0K...'); // Clears the canvas signaturePad.clear(); @@ -25,19 +27,19 @@ function BasicTest() { /* TEST 2 - You can set options during initialization: */ function SetDuringInit() { - var canvas = document.querySelector("canvas"); - var signaturePad = new SignaturePad(canvas, { + const canvas = document.querySelector('canvas'); + const signaturePad = new SignaturePad(canvas, { minWidth: 5, maxWidth: 10, - penColor: "rgb(66, 133, 244)" + penColor: 'rgb(66, 133, 244)' }); } /* TEST 3 - or during runtime: */ function RuntimeChange() { - var canvas = document.querySelector("canvas"); - var signaturePad = new SignaturePad(canvas); + const canvas = document.querySelector('canvas'); + const signaturePad = new SignaturePad(canvas); signaturePad.minWidth = 5; signaturePad.maxWidth = 10; - signaturePad.penColor = "rgb(66, 133, 244)"; + signaturePad.penColor = 'rgb(66, 133, 244)'; }