From 7627c32ee231c2dd5e986f61e5724a80065ae839 Mon Sep 17 00:00:00 2001 From: Chnapy Date: Sun, 10 Mar 2019 15:05:43 +0100 Subject: [PATCH 1/3] initial commit & typing done --- types/vara/index.d.ts | 155 +++++++++++++++++++++++++++++++++++++++ types/vara/tsconfig.json | 24 ++++++ types/vara/tslint.json | 1 + types/vara/vara-tests.ts | 43 +++++++++++ 4 files changed, 223 insertions(+) create mode 100644 types/vara/index.d.ts create mode 100644 types/vara/tsconfig.json create mode 100644 types/vara/tslint.json create mode 100644 types/vara/vara-tests.ts diff --git a/types/vara/index.d.ts b/types/vara/index.d.ts new file mode 100644 index 0000000000..da9b7a873c --- /dev/null +++ b/types/vara/index.d.ts @@ -0,0 +1,155 @@ +// Type definitions for vara 1.1 +// Project: https://github.com/akzhy/vara#readme +// Definitions by: Richard Haddad +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/** + * Comments are from the documentation: http://vara.akzhy.com/documentation/ + */ + +/** + * The options given below will be applicable to every text created, + * however they will not override the options set above. + * They will work as secondary options. + */ +export interface TextProperties { + /** + * Size of the text + */ + fontSize?: number; + /** + * Width / Thickness of the stroke + */ + strokeWidth?: number; + /** + * Color of the text + */ + color?: string; + /** + * Duration of the animation in milliseconds + */ + duration?: number; + /** + * Text align, accepted values are left,center,right + */ + textAlign?: 'left' | 'center' | 'right'; + /** + * Whether to animate the text automatically + */ + autoAnimation?: boolean; + /** + * Whether the animation should be in a queue + */ + queued?: boolean; + /** + * Space between each character + */ + letterSpacing?: number; +} + +export interface TextStep extends TextProperties { + /** + * Text to be shown + */ + text: string; + /** + * String or integer, for if animations are called manually or when using the get() method. + * Default is the index of the object. + */ + id?: string | number; + /** + * x coordinate of the text + */ + x?: number; + /** + * y coordinate of the text + */ + y?: number; + /** + * Whether the x or y coordinate should be from its calculated position, + * ie the position if x or y coordinates were not applied + */ + fromCurrentPosition?: { + x?: boolean; + y?: boolean; + }; + /** + * Delay before the animation starts in milliseconds + */ + delay?: number; +} + +export interface TextElements { + /** + * Array of svg g elements, each representing a letter + */ + characters: SVGGElement[]; + + /** + * Svg g wrapping the text block + */ + container: SVGGElement; +} + +export default class Vara { + constructor(queryDom: string, fontJSONSource: string, + textStep: TextStep[], textGlobals?: TextProperties); + + /** + * Is used to execute a function when the font is loaded and the elements are created. + * ! Any other method should be called inside the function ! + * + * @param onReady callback + */ + ready(onReady: () => void): void; + + /** + * If an id was given to the text during creation, it should be given as the argument. + * Otherwise use the index of the text block. + * + * @param id text ID or index + */ + get(id: string | number): TextElements | false; + + /** + * Used to animate texts with autoAnimation:false + * If an id was given to the text during creation, it should be given as the argument. + * Otherwise use the index of the text block. + * + * @param id text ID or index + * @param duration + */ + draw(id: string | number, duration?: number): void; + + /** + * Used to execute a function once animation ends, triggers every time a block of text is drawn. + * + * @param onEnd callback with the id of the drawn text, and an object containing the group DOM object, + * this is the same object that is returned when calling the get() method. + */ + animationEnd(onEnd: (id: string | number, group: TextElements) => void): void; + + /** + * Is used to play the animation of every text block, obeying delay and queue. + */ + playAll(): void; + + createNode(noneName: string, properties: { [k: string]: string; }): SVGElement; + + getSVGData(): void; + + preCreate(): void; + + createText(): void; + + animate(element: SVGElement, duration: number, delay: number, final: number): void; + + getSectionPathLength(id: string | number): number; + + analyseWidth(): { + width: number; + breakPoints: Array>; + }; + + setPosition(element: SVGGElement, obj: { x?: number; y?: number }, relative?: { x: boolean; y: boolean; }): void; +} diff --git a/types/vara/tsconfig.json b/types/vara/tsconfig.json new file mode 100644 index 0000000000..2026a30e17 --- /dev/null +++ b/types/vara/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "vara-tests.ts" + ] +} diff --git a/types/vara/tslint.json b/types/vara/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/vara/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } diff --git a/types/vara/vara-tests.ts b/types/vara/vara-tests.ts new file mode 100644 index 0000000000..08fae19d45 --- /dev/null +++ b/types/vara/vara-tests.ts @@ -0,0 +1,43 @@ +import Vara from 'vara'; + +const vara = new Vara('#root', 'font.json', [ + { + text: 'first' + }, + { + text: 'second', + fontSize: 24, + strokeWidth: .5, + color: 'black', + id: 'second', + duration: 2000, + textAlign: 'left', + x: 0, + y: 0, + fromCurrentPosition: { + x: true, + y: true, + }, + autoAnimation: true, + queued: true, + delay: 0, + letterSpacing: 0 + } +], { + fontSize: 24, + strokeWidth: .5, + color: "black", + duration: 2000, + textAlign: "left", + autoAnimation: true, + queued: true, + letterSpacing: 0 + } +); + +// $ExpectType void +vara.ready(() => {}); + +// $ExpectType false | TextElements +vara.get(0); +vara.get('second'); From 05438e362f0ecb579e96288a200aa43b44c48243 Mon Sep 17 00:00:00 2001 From: Chnapy Date: Sun, 10 Mar 2019 16:27:57 +0100 Subject: [PATCH 2/3] tests --- types/vara/vara-tests.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/types/vara/vara-tests.ts b/types/vara/vara-tests.ts index 08fae19d45..4c76973292 100644 --- a/types/vara/vara-tests.ts +++ b/types/vara/vara-tests.ts @@ -41,3 +41,13 @@ vara.ready(() => {}); // $ExpectType false | TextElements vara.get(0); vara.get('second'); + +// $ExpectType void +vara.draw(0); +vara.draw(0, 1000); + +// $ExpectType void +vara.animationEnd((id, group) => {}); + +// $ExpectType void +vara.playAll(); From 32225d8a5b6df4e20c0cea76df4c51209ce206b4 Mon Sep 17 00:00:00 2001 From: Chnapy Date: Sun, 17 Mar 2019 13:10:17 +0100 Subject: [PATCH 3/3] fix export (https://github.com/DefinitelyTyped/DefinitelyTyped/pull/33748#pullrequestreview-212725106) --- types/vara/index.d.ts | 19 +++++++++++++------ types/vara/vara-tests.ts | 9 ++++++--- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/types/vara/index.d.ts b/types/vara/index.d.ts index da9b7a873c..3ffe9c1590 100644 --- a/types/vara/index.d.ts +++ b/types/vara/index.d.ts @@ -12,7 +12,7 @@ * however they will not override the options set above. * They will work as secondary options. */ -export interface TextProperties { +interface TextProperties { /** * Size of the text */ @@ -47,7 +47,7 @@ export interface TextProperties { letterSpacing?: number; } -export interface TextStep extends TextProperties { +interface TextStep extends TextProperties { /** * Text to be shown */ @@ -79,7 +79,7 @@ export interface TextStep extends TextProperties { delay?: number; } -export interface TextElements { +interface TextElements { /** * Array of svg g elements, each representing a letter */ @@ -91,9 +91,11 @@ export interface TextElements { container: SVGGElement; } -export default class Vara { - constructor(queryDom: string, fontJSONSource: string, - textStep: TextStep[], textGlobals?: TextProperties); +declare class VaraType { + constructor(queryDom: string, + fontJSONSource: string, + textStep: TextStep[], + textGlobals?: TextProperties); /** * Is used to execute a function when the font is loaded and the elements are created. @@ -153,3 +155,8 @@ export default class Vara { setPosition(element: SVGGElement, obj: { x?: number; y?: number }, relative?: { x: boolean; y: boolean; }): void; } + +declare const Vara: typeof VaraType; + +export = Vara; +export as namespace Vara; diff --git a/types/vara/vara-tests.ts b/types/vara/vara-tests.ts index 4c76973292..b7f35dc341 100644 --- a/types/vara/vara-tests.ts +++ b/types/vara/vara-tests.ts @@ -1,4 +1,5 @@ -import Vara from 'vara'; +import Vara = require('vara'); +import * as Vara2 from 'vara'; const vara = new Vara('#root', 'font.json', [ { @@ -35,8 +36,10 @@ const vara = new Vara('#root', 'font.json', [ } ); +const vara2 = new Vara2('#root', 'font.json', []); + // $ExpectType void -vara.ready(() => {}); +vara.ready(() => { }); // $ExpectType false | TextElements vara.get(0); @@ -47,7 +50,7 @@ vara.draw(0); vara.draw(0, 1000); // $ExpectType void -vara.animationEnd((id, group) => {}); +vara.animationEnd((id, group) => { }); // $ExpectType void vara.playAll();