From 6142b93777cd626b6137ec65a6a7d547d61b337c Mon Sep 17 00:00:00 2001 From: CosPie Date: Sat, 30 Jun 2018 17:01:46 +0800 Subject: [PATCH 1/5] Add TypeScript Support ( create sketch.d.ts) --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index b83e896..5cf8294 100644 --- a/README.md +++ b/README.md @@ -48,3 +48,14 @@ Sketch.create({ ### The Rest For more information, check out the [getting started guide](https://github.com/soulwire/sketch.js/wiki/Getting-Started), the [API](https://github.com/soulwire/sketch.js/wiki/API), the many examples in the [showcase](http://soulwire.github.com/sketch.js/) and the full [source](https://github.com/soulwire/sketch.js/blob/master/js/sketch.js). + +### Support TypeScript + +According to the [API Document](https://github.com/soulwire/sketch.js/wiki/API) create the basic DTS File :`sketch.d.ts` . +So it maybe has some flaws in part... +Anyway , it always work better than no DTS. + +If you want to use it , you can import it through use tag like this: + ``` + /// + ``` From 561242174bcafc501a91555522cb2b4ffb160259 Mon Sep 17 00:00:00 2001 From: CosPie Date: Sat, 30 Jun 2018 17:03:03 +0800 Subject: [PATCH 2/5] Add TypeScript Support create basic sketch.d.ts --- js/sketch.d.ts | 314 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 314 insertions(+) create mode 100644 js/sketch.d.ts diff --git a/js/sketch.d.ts b/js/sketch.d.ts new file mode 100644 index 0000000..3321ac4 --- /dev/null +++ b/js/sketch.d.ts @@ -0,0 +1,314 @@ +/** + * @author Definitions by: thinkerer + * + * TypeScript Version 2.7 + */ +declare module "Sketch" { + export = Sketch; +} + +/** + * @see \`{@link https://github.com/soulwire/sketch.js/wiki/API }\` + */ +declare const Sketch: SketchI; + +/** + * @see \`{@link https://github.com/soulwire/sketch.js/wiki/API }\` + * declare sketch.js Global Properties + * These are safely mixed into the window object for quick access, e.g: sin( random( TWO_PI ) ). You can prevent this happening by passing globals:false when calling create and/or add this properties to any object yourself by calling Sketch.install( context ) + */ + +/** + * @function random Accepts single values, ranges and Arrays, e.g: random( 10, 20 ) or random( colours ) + * + */ +declare function random(min: number | Array, max?: number): number; +/** + * @function lerp Arguments: min max amount. Interpolate between min and max by the factor amount + * + */ +declare function lerp(min: number, max: number, amount: number): number; +/** + * @function map Arguments: num minA maxA minB maxB. Map num from the range minA/maxA to the range minB/maxB + * + */ +declare function map( + num: number, + minA: number, + minB: number, + max: number +): number; + +declare const PI: Sketch_Math_Constants; +declare const TWO_PI: Sketch_Math_Constants; +declare const HALF_PI: Sketch_Math_Constants; +declare const QUARTER_PI: Sketch_Math_Constants; +declare const E: Sketch_Math_Constants; +declare const LN10: Sketch_Math_Constants; +declare const LN2: Sketch_Math_Constants; +declare const LOG2E: Sketch_Math_Constants; +declare const LOG10E: Sketch_Math_Constants; +declare const SQRT1_2: Sketch_Math_Constants; +declare const SQRT2: Sketch_Math_Constants; + +declare function abs(val: number): Sketch_Math_Functions_ReturnType; +declare function acos(val: number): Sketch_Math_Functions_ReturnType; +declare function asin(val: number): Sketch_Math_Functions_ReturnType; +declare function atan(val: number): Sketch_Math_Functions_ReturnType; +declare function ceil(val: number): Sketch_Math_Functions_ReturnType; +declare function cos(val: number): Sketch_Math_Functions_ReturnType; +declare function exp(val: number): Sketch_Math_Functions_ReturnType; +declare function floor(val: number): Sketch_Math_Functions_ReturnType; +declare function log(val: number): Sketch_Math_Functions_ReturnType; +declare function round(val: number): Sketch_Math_Functions_ReturnType; +declare function sin(val: number): Sketch_Math_Functions_ReturnType; +declare function sqrt(val: number): Sketch_Math_Functions_ReturnType; +declare function tan(val: number): Sketch_Math_Functions_ReturnType; +declare function atan2(val: number): Sketch_Math_Functions_ReturnType; +declare function pow( + base: number, + index: number +): Sketch_Math_Functions_ReturnType; +declare function max(...val: Array): Sketch_Math_Functions_ReturnType; +declare function min(...val: Array): Sketch_Math_Functions_ReturnType; + +interface SketchInstance + extends Sketch_Instance_Methods, + Sketch_Instance_Properites, + Sketch_Instance_Overridable_Methods {} + +interface SketchI extends Sketch_Class_Methods, Sketch_Constants {} + +interface Sketch_Math_Constants extends Number {} +interface Sketch_Math_Functions_ReturnType extends Number {} +interface Sketch_Mouse extends Sketch_HandleGesture {} +interface Sketch_Touch extends Sketch_HandleGesture {} + +interface Sketch_HandleGesture { + x: number; + y: number; + ox: number; + oy: number; + dx: number; + dy: number; +} + +interface Sketch_Instance_Properites { + /** + * @param mouse Contains x, y, ox, oy, dx and dy, representing the mouse or primary touch. + * + */ + mouse: Sketch_Mouse; + /** + * @param touches List of current touches with same structure as mouse. On the desktop, the 0th element represents the mouse. + * + */ + touches: Sketch_Touch; + /** + * @param dragging Whether the mouse is down / the user is dragging + * + */ + dragging: boolean; + /** + * @param running Whether the animation loop is running (modified by the start and stop methods) + * + */ + running: boolean; + /** + * @param width Current viewport width + * + */ + width: number; + + /** + * @param height Current viewport height + * + */ + height: number; + /** + * @param keys A hash of booleans indicating whether each key is currently pressed, e.g sketch.keys.SPACE + * + */ + keys: Sketch_KeyMap; + + /** + * @param millis The total runtime of the sketch in milliseconds + * + */ + millis: number; + + /** + * @param now The current time in milliseconds + * + */ + now: number; + /** + * @param dt The delta time between the current and previous frame in milliseconds + * + */ + dt: number; +} + +interface Sketch_Constants { + /** + * + * @param CANVAS Enumeration for the Canvas type + */ + CANVAS: Sketch_Options_type; + + /** + * + * @param WEBGL Enumeration for the WebGL type + */ + + WEBGL: Sketch_Options_type; + /** + * + * @param WEB_GL Enumeration for the WebGL type + */ + + WEB_GL: Sketch_Options_type; + /** + * + * @param DOM Enumeration for the DOM type + */ + DOM: Sketch_Options_type; + /** + * + * @param instances A list of all current Sketch instances + */ + instances: SketchI; +} + +declare enum Sketch_Options_type {} + +interface Sketch_Context {} +interface Sketch_Class_Methods { + /** + * + * @param create Creates and returns a new sketch. Arguments: options Optional hash including any number of the above options + */ + create(options: Sketch_Options): SketchInstance; + + /** + * @param augment Augments an existing context, giving it sketch properties and functionality. This is called internally by create once a new context is created. Arguments: context The context to augment + */ + augment(context: Sketch_Context): void; + + /** + * @param install Installs sketch globals into the context provided. This is called internally by create on self unless the globals flag is set to false. Arguments: context The context to install globals into + * + */ + install(context: Sketch_Context): void; +} + +interface Sketch_Options { + /** + * Passed to the Sketch.create method. + */ + /** + * @param ket Default: true; when false, you can pass width: 500, height: 500 to specify a size. + */ + fullscreen?: boolean; + + /** + * @param autostart Default: true Otherwise call start() + */ + autostart?: boolean; + + /** + * @param autopause Default: true Whether to pause the animation on window blur and resume on focus + */ + autopause?: boolean; + + /** + * @param container Default: document.body Where to put the sketch context + */ + container?: HTMLElement; + + /** + * @param interval interval Default: 1 The update / draw interval (2 will update every 2 frames, etc) + */ + interval?: number; + + /** + * @param globals Default: true Add global properties and methods to the window + */ + globals?: boolean; + + /** + * @param retina Default: false Resize for best appearance on retina displays. Can be slow due to so many pixels! + */ + + retina?: boolean; + + /** + * @param type Default Sketch.CANVAS Possible values: Sketch.CANVAS, Sketch.WEB_GL and Sketch.DOM + */ + type?: Sketch_Options_type; + + /** + * @param eventTarget If you want Sketch to bind mouse events to an element other than the Sketch canvas, you can specify that element here + */ + eventTarget?: HTMLElement; +} + +interface Sketch_Instance_Methods { + /** + * @param start + */ + start(): void; + + /** + * @param stop + */ + stop(): void; + + /** + * @param toggle + */ + toggle(): void; + + /** + * @param clear + */ + clear(): void; + + /** + * @param destroy + */ + destroy(): void; +} +interface Sketch_Instance_Overridable_Methods { + /** + * Implement these methods on your sketch instance (or pass them to create inside the options hash). + */ + setup(): Event; + update(): Event; + draw(): Event; + touchstart(): Event; + touchmove(): Event; + touchend(): Event; + mouseover(): Event; + mousedown(): Event; + mousemove(): Event; + mouseout(): Event; + mouseup(): Event; + click(): Event; + keydown(): Event; + keyup(): Event; + resize(): Event; +} + +declare enum Sketch_KeyMap { + "BACKSPACE" = 8, + "TAB" = 9, + "ENTER" = 13, + "SHIFT" = 16, + "ESCAPE" = 27, + "SPACE" = 32, + "LEFT" = 37, + "UP" = 38, + "RIGHT" = 39, + "DOWN" = 40 +} From c6a9a1d3fb535bc507ab9b6f08b684f93422f833 Mon Sep 17 00:00:00 2001 From: CosPie Date: Sat, 30 Jun 2018 19:22:33 +0800 Subject: [PATCH 3/5] fix and update wrong declare --- js/sketch.d.ts | 95 +++++++++++++++++++++++++++++++------------------- 1 file changed, 59 insertions(+), 36 deletions(-) diff --git a/js/sketch.d.ts b/js/sketch.d.ts index 3321ac4..db046b2 100644 --- a/js/sketch.d.ts +++ b/js/sketch.d.ts @@ -13,30 +13,40 @@ declare module "Sketch" { declare const Sketch: SketchI; /** - * @see \`{@link https://github.com/soulwire/sketch.js/wiki/API }\` * declare sketch.js Global Properties * These are safely mixed into the window object for quick access, e.g: sin( random( TWO_PI ) ). You can prevent this happening by passing globals:false when calling create and/or add this properties to any object yourself by calling Sketch.install( context ) */ /** * @function random Accepts single values, ranges and Arrays, e.g: random( 10, 20 ) or random( colours ) - * + * @param min values / ranges / Arrays + * @param max values / ranges /Arrays (not required) */ -declare function random(min: number | Array, max?: number): number; +declare function random( + min: number | Array, + max?: number +): number; /** - * @function lerp Arguments: min max amount. Interpolate between min and max by the factor amount - * + * @function lerp Interpolate between min and max by the factor amount + * @param min + * @param max + * @param amount */ declare function lerp(min: number, max: number, amount: number): number; /** - * @function map Arguments: num minA maxA minB maxB. Map num from the range minA/maxA to the range minB/maxB - * + * @function map Map num from the range minA/maxA to the range minB/maxB + * @param num + * @param minA + * @param maxA + * @param minB + * @param maxB */ declare function map( num: number, minA: number, + maxA: number, minB: number, - max: number + maxB: number ): number; declare const PI: Sketch_Math_Constants; @@ -75,12 +85,14 @@ declare function min(...val: Array): Sketch_Math_Functions_ReturnType; interface SketchInstance extends Sketch_Instance_Methods, Sketch_Instance_Properites, - Sketch_Instance_Overridable_Methods {} + Sketch_Instance_Overridable_Methods { + [propName: string]: any; +} interface SketchI extends Sketch_Class_Methods, Sketch_Constants {} -interface Sketch_Math_Constants extends Number {} -interface Sketch_Math_Functions_ReturnType extends Number {} +type Sketch_Math_Functions_ReturnType = number; +type Sketch_Math_Constants = number; interface Sketch_Mouse extends Sketch_HandleGesture {} interface Sketch_Touch extends Sketch_HandleGesture {} @@ -98,12 +110,12 @@ interface Sketch_Instance_Properites { * @param mouse Contains x, y, ox, oy, dx and dy, representing the mouse or primary touch. * */ - mouse: Sketch_Mouse; + mouse: Array; /** * @param touches List of current touches with same structure as mouse. On the desktop, the 0th element represents the mouse. * */ - touches: Sketch_Touch; + touches: Array; /** * @param dragging Whether the mouse is down / the user is dragging * @@ -154,33 +166,37 @@ interface Sketch_Constants { * * @param CANVAS Enumeration for the Canvas type */ - CANVAS: Sketch_Options_type; + CANVAS: Sketch_Options_type.CANVAS; /** * * @param WEBGL Enumeration for the WebGL type */ - WEBGL: Sketch_Options_type; + WEBGL: Sketch_Options_type.WEBGL; /** * * @param WEB_GL Enumeration for the WebGL type */ - WEB_GL: Sketch_Options_type; + WEB_GL: Sketch_Options_type.WEBGL; /** * * @param DOM Enumeration for the DOM type */ - DOM: Sketch_Options_type; + DOM: Sketch_Options_type.DOM; /** * * @param instances A list of all current Sketch instances */ - instances: SketchI; + instances: Array; } -declare enum Sketch_Options_type {} +declare enum Sketch_Options_type { + CANVAS = "canvas", + WEBGL = "webgl", + DOM = "dom" +} interface Sketch_Context {} interface Sketch_Class_Methods { @@ -216,6 +232,11 @@ interface Sketch_Options { */ autostart?: boolean; + /** + * @param autoclear Default: true Whether to clear the context before each call to draw. Otherwise call clear() + */ + autoclear?: boolean; + /** * @param autopause Default: true Whether to pause the animation on window blur and resume on focus */ @@ -224,7 +245,7 @@ interface Sketch_Options { /** * @param container Default: document.body Where to put the sketch context */ - container?: HTMLElement; + container?: HTMLElement | null; /** * @param interval interval Default: 1 The update / draw interval (2 will update every 2 frames, etc) @@ -240,7 +261,7 @@ interface Sketch_Options { * @param retina Default: false Resize for best appearance on retina displays. Can be slow due to so many pixels! */ - retina?: boolean; + retina?: boolean | "auto"; /** * @param type Default Sketch.CANVAS Possible values: Sketch.CANVAS, Sketch.WEB_GL and Sketch.DOM @@ -251,6 +272,8 @@ interface Sketch_Options { * @param eventTarget If you want Sketch to bind mouse events to an element other than the Sketch canvas, you can specify that element here */ eventTarget?: HTMLElement; + + [propName: string]: any; } interface Sketch_Instance_Methods { @@ -283,21 +306,21 @@ interface Sketch_Instance_Overridable_Methods { /** * Implement these methods on your sketch instance (or pass them to create inside the options hash). */ - setup(): Event; - update(): Event; - draw(): Event; - touchstart(): Event; - touchmove(): Event; - touchend(): Event; - mouseover(): Event; - mousedown(): Event; - mousemove(): Event; - mouseout(): Event; - mouseup(): Event; - click(): Event; - keydown(): Event; - keyup(): Event; - resize(): Event; + setup(): any; + update(): any; + draw(): any; + touchstart(): any; + touchmove(): any; + touchend(): any; + mouseover(): any; + mousedown(): any; + mousemove(): any; + mouseout(): any; + mouseup(): any; + click(): any; + keydown(): any; + keyup(): any; + resize(): any; } declare enum Sketch_KeyMap { From 88f2b9bcfc8e5a500abd44c6bb3e4fd9638a0026 Mon Sep 17 00:00:00 2001 From: CosPie Date: Sat, 30 Jun 2018 20:35:09 +0800 Subject: [PATCH 4/5] Update README.md --- README.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 5cf8294..d35d683 100644 --- a/README.md +++ b/README.md @@ -55,7 +55,17 @@ According to the [API Document](https://github.com/soulwire/sketch.js/wiki/API) So it maybe has some flaws in part... Anyway , it always work better than no DTS. -If you want to use it , you can import it through use tag like this: +How to use it : + +you can import it through use tag like this: ``` /// ``` + +Or use `npm` to install the package which included the `sketch.js` and `sketch.d.ts` . + +``` + npm i @cospie/sketch --save +``` + + From 82ca9d45f9900c926d84d09bc599f196398ba9a5 Mon Sep 17 00:00:00 2001 From: CosPie Date: Thu, 5 Jul 2018 15:08:12 +0800 Subject: [PATCH 5/5] Update README.md --- README.md | 8 -------- 1 file changed, 8 deletions(-) diff --git a/README.md b/README.md index d35d683..34b2b91 100644 --- a/README.md +++ b/README.md @@ -61,11 +61,3 @@ you can import it through use tag like this: ``` /// ``` - -Or use `npm` to install the package which included the `sketch.js` and `sketch.d.ts` . - -``` - npm i @cospie/sketch --save -``` - -