From cad74e1634acbaef129eb42664876889799321a6 Mon Sep 17 00:00:00 2001 From: Martin Tracey Date: Sun, 25 Feb 2018 19:39:30 +0000 Subject: [PATCH] canvas-confetti: created type definition for v0.0.2 --- .../canvas-confetti/canvas-confetti-tests.ts | 45 ++++++++++ types/canvas-confetti/index.d.ts | 86 +++++++++++++++++++ types/canvas-confetti/tsconfig.json | 23 +++++ types/canvas-confetti/tslint.json | 1 + 4 files changed, 155 insertions(+) create mode 100644 types/canvas-confetti/canvas-confetti-tests.ts create mode 100644 types/canvas-confetti/index.d.ts create mode 100644 types/canvas-confetti/tsconfig.json create mode 100644 types/canvas-confetti/tslint.json diff --git a/types/canvas-confetti/canvas-confetti-tests.ts b/types/canvas-confetti/canvas-confetti-tests.ts new file mode 100644 index 0000000000..d29e57fbdb --- /dev/null +++ b/types/canvas-confetti/canvas-confetti-tests.ts @@ -0,0 +1,45 @@ +import confetti = require("canvas-confetti"); + +confetti.Promise = null; + +confetti(); + +confetti({ + particleCount: 150 +}); + +confetti({ + spread: 180 +}); + +confetti({ + particleCount: 100, + startVelocity: 30, + spread: 360, + origin: { + x: Math.random(), + // since they fall down, start a bit higher than random + y: Math.random() - 0.2 + } +}); + +confetti({ + particleCount: 100, + spread: 70, + origin: { + y: 0.6 + } +}); + +function r(min: number, max: number) { + return Math.random() * (max - min) + min; +} + +confetti({ + angle: r(55, 125), + spread: r(50, 70), + particleCount: r(50, 100), + origin: { + y: 0.6 + } +}); diff --git a/types/canvas-confetti/index.d.ts b/types/canvas-confetti/index.d.ts new file mode 100644 index 0000000000..3dddc6d750 --- /dev/null +++ b/types/canvas-confetti/index.d.ts @@ -0,0 +1,86 @@ +// Type definitions for canvas-confetti 0.0 +// Project: https://github.com/catdad/canvas-confetti#readme +// Definitions by: Martin Tracey +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/** + * `confetti` takes a single optional object. When `window.Promise` is available, it will return a Promise to let you know when it is done. When promises are not available (like in IE), it will return + * `null`. You can polyfill promises using any of the popular polyfills. You can also provide a custom promise implementation to `confetti` through: + * + * `const MyPromise = require('some-promise-lib'); + * const confetti = require('canvas-confetti'); + * confetti.Promise = MyPromise;` + * + * If you call `confetti` multiple times before it is done, it + * will return the same promise every time. Internally, the same canvas element will be reused, continuing the existing animation with the new confetti added. The promise returned by each call to + * `confetti` will resolve once all animations are done. + * + */ +declare function confetti(options?: confetti.Options): Promise | null; + +declare namespace confetti { + /** + * You can polyfill promises using any of the popular polyfills. You can also provide a promise implementation to `confetti` through this property. + */ + let Promise: any; + + interface Options { + /** + * The number of confetti to launch. More is always fun... but be cool, there's a lot of math involved. + * @default 50 + */ + particleCount?: number; + /** + * The angle in which to launch the confetti, in degrees. 90 is straight up. + * @default 90 + */ + angle?: number; + /** + * How far off center the confetti can go, in degrees. 45 means the confetti will launch at the defined angle plus or minus 22.5 degrees. + * @default 45 + */ + spread?: number; + /** + * How fast the confetti will start going, in pixels. + * @default 45 + */ + startVelocity?: number; + /** + * How quickly the confetti will lose speed. Keep this number between 0 and 1, otherwise the confetti will gain speed. Better yet, just never change it. + * @default 0.9 + */ + decay?: number; + /** + * How many times the confetti will move. This is abstract... but play with it if the confetti disappear too quickly for you. + * @default 200 + */ + ticks?: number; + /** + * Where to start firing confetti from. Feel free to launch off-screen if you'd like. + */ + origin?: Origin; + /** + * An array of color strings, in the HEX format... you know, like #bada55. + */ + colors?: string[]; + /** + * The confetti should be on top, after all. But if you have a crazy high page, you can set it even higher. + * @default 100 + */ + zIndex?: number; + } + interface Origin { + /** + * The x position on the page, with 0 being the left edge and 1 being the right edge. + * @default 0.5 + */ + x?: number; + /** + * The y position on the page, with 0 being the left edge and 1 being the right edge. + * @default 0.5 + */ + y?: number; + } +} + +export = confetti; diff --git a/types/canvas-confetti/tsconfig.json b/types/canvas-confetti/tsconfig.json new file mode 100644 index 0000000000..33c159b3e3 --- /dev/null +++ b/types/canvas-confetti/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "canvas-confetti-tests.ts" + ] +} diff --git a/types/canvas-confetti/tslint.json b/types/canvas-confetti/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/canvas-confetti/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }