From 82d72c82ec994aae89e4fd48574d100ca78eff77 Mon Sep 17 00:00:00 2001 From: Pig Fang Date: Sun, 4 Feb 2018 22:15:03 +0800 Subject: [PATCH 1/5] add TS types defs --- package-lock.json | 15 +++++++++++++++ package.json | 2 ++ types/animation.d.ts | 37 +++++++++++++++++++++++++++++++++++++ types/model.d.ts | 37 +++++++++++++++++++++++++++++++++++++ types/skinview3d.d.ts | 3 +++ types/viewer.d.ts | 30 ++++++++++++++++++++++++++++++ 6 files changed, 124 insertions(+) create mode 100644 types/animation.d.ts create mode 100644 types/model.d.ts create mode 100644 types/skinview3d.d.ts create mode 100644 types/viewer.d.ts diff --git a/package-lock.json b/package-lock.json index aa0d326..819dadf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,6 +4,21 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@types/three": { + "version": "0.89.6", + "resolved": "https://registry.npmjs.org/@types/three/-/three-0.89.6.tgz", + "integrity": "sha512-fPaCCrr1pxuyoZVSXmRO1VRF02nshe9Y3BMwm5tJBd9o0Mp5Lma9JUQfK/4oacJXSMkykcQrjmsyCsabB3uqsA==", + "dev": true, + "requires": { + "@types/webvr-api": "0.0.31" + } + }, + "@types/webvr-api": { + "version": "0.0.31", + "resolved": "https://registry.npmjs.org/@types/webvr-api/-/webvr-api-0.0.31.tgz", + "integrity": "sha1-9gYf6IoDXTSotqDFX4dYkB7IoI4=", + "dev": true + }, "acorn": { "version": "5.4.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.4.1.tgz", diff --git a/package.json b/package.json index b5b052e..38b775e 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "description": "Three.js powered Minecraft skin viewer", "module": "build/skinview3d.module.js", "main": "build/skinview3d.js", + "typings": "types/skinview3d.d.ts", "scripts": { "build": "rollup -c tools/rollup.module.js && rollup -c tools/rollup.browser.js && rollup -c tools/rollup.browser.min.js", "prepare": "npm test && rm -rf build && npm run build", @@ -23,6 +24,7 @@ "three": "^0.89.0" }, "devDependencies": { + "@types/three": "^0.89.6", "babel-cli": "^6.26.0", "babel-plugin-external-helpers": "^6.22.0", "babel-preset-env": "^1.6.1", diff --git a/types/animation.d.ts b/types/animation.d.ts new file mode 100644 index 0000000..24ca13e --- /dev/null +++ b/types/animation.d.ts @@ -0,0 +1,37 @@ +import { PlayerObject } from './model' + +declare function invokeAnimation( + animation: CompositeAnimation, + player: PlayerObject, + time: number +): void + +declare function invokeAnimation( + animation: typeof WalkAnimation, + player: PlayerObject, + time: number +): void + +declare class AnimationHandle { + animation: typeof WalkAnimation + paused: boolean + speed: number + + constructor(animation: typeof WalkAnimation) + + play(player: PlayerObject, time: number): void + + reset(): void +} + +export class CompositeAnimation { + handles: Set + + constructor() + + add(animation: typeof WalkAnimation): AnimationHandle + + play(player: PlayerObject, time: number): void +} + +export function WalkAnimation(player: PlayerObject, time: number): void diff --git a/types/model.d.ts b/types/model.d.ts new file mode 100644 index 0000000..2d08d9e --- /dev/null +++ b/types/model.d.ts @@ -0,0 +1,37 @@ +import * as THREE from 'three' + +type Material = THREE.Material | THREE.Material[] + +export class SkinObject extends THREE.Group { + head: THREE.Group + body: THREE.Group + rightArm: THREE.Group + leftArm: THREE.Group + rightLeg: THREE.Group + leftLeg: THREE.Group + + constructor( + isSlim: boolean, + layer1Material: Material, + layer2Material: Material + ) +} + +export class CapeObject extends THREE.Group { + cape: THREE.Mesh + + constructor(capeMaterial: Material) +} + +export class PlayerObject extends THREE.Group { + slim: boolean + skin: SkinObject + cape: CapeObject + + constructor( + isSlim: boolean, + layer1Material: Material, + layer2Material: Material, + capeMaterial: Material + ) +} diff --git a/types/skinview3d.d.ts b/types/skinview3d.d.ts new file mode 100644 index 0000000..3c38e53 --- /dev/null +++ b/types/skinview3d.d.ts @@ -0,0 +1,3 @@ +export { CompositeAnimation, WalkAnimation } from './animation' +export { SkinViewer, SkinControl } from './viewer' +export { SkinObject, CapeObject, PlayerObject } from './model' diff --git a/types/viewer.d.ts b/types/viewer.d.ts new file mode 100644 index 0000000..09a7707 --- /dev/null +++ b/types/viewer.d.ts @@ -0,0 +1,30 @@ +import { CompositeAnimation, WalkAnimation } from './animation'; + +interface SkinViewerOptions { + domElement: Element + animation?: CompositeAnimation | typeof WalkAnimation + slim?: boolean + skinUrl?: string + capeUrl?: string + width?: number + height?: number +} + +export class SkinViewer { + skinUrl: string + capeUrl: string + width: number + height: number + + constructor(options: SkinViewerOptions) + + setSize(width: number, height: number): void + + dispose(): void +} + +export class SkinControl { + constructor(skinViewer: SkinViewer) + + dispose(): void +} From 07e8cd58c6debca1ec522f4b853303747f93ab6e Mon Sep 17 00:00:00 2001 From: Pig Fang Date: Sun, 4 Feb 2018 23:23:27 +0800 Subject: [PATCH 2/5] add missing class fields --- types/animation.d.ts | 14 +++++--------- types/viewer.d.ts | 19 +++++++++++++++++-- 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/types/animation.d.ts b/types/animation.d.ts index 24ca13e..b52038e 100644 --- a/types/animation.d.ts +++ b/types/animation.d.ts @@ -1,23 +1,19 @@ import { PlayerObject } from './model' -declare function invokeAnimation( - animation: CompositeAnimation, - player: PlayerObject, - time: number -): void +export type Animation = CompositeAnimation | typeof WalkAnimation declare function invokeAnimation( - animation: typeof WalkAnimation, + animation: Animation, player: PlayerObject, time: number ): void declare class AnimationHandle { - animation: typeof WalkAnimation + animation: Animation paused: boolean speed: number - constructor(animation: typeof WalkAnimation) + constructor(animation: Animation) play(player: PlayerObject, time: number): void @@ -29,7 +25,7 @@ export class CompositeAnimation { constructor() - add(animation: typeof WalkAnimation): AnimationHandle + add(animation: Animation): AnimationHandle play(player: PlayerObject, time: number): void } diff --git a/types/viewer.d.ts b/types/viewer.d.ts index 09a7707..1eb5ee9 100644 --- a/types/viewer.d.ts +++ b/types/viewer.d.ts @@ -1,8 +1,11 @@ -import { CompositeAnimation, WalkAnimation } from './animation'; +import * as THREE from 'three' +import { CompositeAnimation, WalkAnimation } from './animation' +import { Animation } from './animation' +import { PlayerObject } from './model' interface SkinViewerOptions { domElement: Element - animation?: CompositeAnimation | typeof WalkAnimation + animation?: Animation slim?: boolean skinUrl?: string capeUrl?: string @@ -15,6 +18,15 @@ export class SkinViewer { capeUrl: string width: number height: number + readonly domElement: Element + animation: Animation + animationPaused: boolean + animationTime: number + readonly playerObject: PlayerObject + readonly disposed: boolean + readonly camera: THREE.Camera + readonly renderer: THREE.Renderer + readonly scene: THREE.Scene constructor(options: SkinViewerOptions) @@ -24,6 +36,9 @@ export class SkinViewer { } export class SkinControl { + enableAnimationControl: boolean + readonly skinViewer: SkinViewer + constructor(skinViewer: SkinViewer) dispose(): void From c483ae33eef5466c102d3fd48d1817671b02adc2 Mon Sep 17 00:00:00 2001 From: Pig Fang Date: Mon, 5 Feb 2018 09:14:43 +0800 Subject: [PATCH 3/5] fix some types defs --- types/animation.d.ts | 22 ++++++++++++++++------ types/model.d.ts | 34 ++++++++++++++++------------------ types/skinview3d.d.ts | 2 +- 3 files changed, 33 insertions(+), 25 deletions(-) diff --git a/types/animation.d.ts b/types/animation.d.ts index b52038e..5e01acf 100644 --- a/types/animation.d.ts +++ b/types/animation.d.ts @@ -1,6 +1,16 @@ import { PlayerObject } from './model' -export type Animation = CompositeAnimation | typeof WalkAnimation +type AnimationFn = (player: PlayerObject, time: number) => void +interface IAnimation { + play(player: PlayerObject, time: number): void +} +export type Animation = + | AnimationFn + | IAnimation + | { + play(player: PlayerObject, time: number): void + [x: string]: any + } declare function invokeAnimation( animation: Animation, @@ -8,8 +18,8 @@ declare function invokeAnimation( time: number ): void -declare class AnimationHandle { - animation: Animation +declare class AnimationHandle implements IAnimation { + readonly animation: Animation paused: boolean speed: number @@ -20,8 +30,8 @@ declare class AnimationHandle { reset(): void } -export class CompositeAnimation { - handles: Set +export class CompositeAnimation implements IAnimation { + readonly handles: Set constructor() @@ -30,4 +40,4 @@ export class CompositeAnimation { play(player: PlayerObject, time: number): void } -export function WalkAnimation(player: PlayerObject, time: number): void +export const WalkAnimation: AnimationFn diff --git a/types/model.d.ts b/types/model.d.ts index 2d08d9e..5a48b3c 100644 --- a/types/model.d.ts +++ b/types/model.d.ts @@ -1,37 +1,35 @@ import * as THREE from 'three' -type Material = THREE.Material | THREE.Material[] - export class SkinObject extends THREE.Group { - head: THREE.Group - body: THREE.Group - rightArm: THREE.Group - leftArm: THREE.Group - rightLeg: THREE.Group - leftLeg: THREE.Group + readonly head: THREE.Group + readonly body: THREE.Group + readonly rightArm: THREE.Group + readonly leftArm: THREE.Group + readonly rightLeg: THREE.Group + readonly leftLeg: THREE.Group constructor( isSlim: boolean, - layer1Material: Material, - layer2Material: Material + layer1Material: THREE.Material, + layer2Material: THREE.Material ) } export class CapeObject extends THREE.Group { - cape: THREE.Mesh + readonly cape: THREE.Mesh - constructor(capeMaterial: Material) + constructor(capeMaterial: THREE.Material) } export class PlayerObject extends THREE.Group { - slim: boolean - skin: SkinObject - cape: CapeObject + readonly slim: boolean + readonly skin: SkinObject + readonly cape: CapeObject constructor( isSlim: boolean, - layer1Material: Material, - layer2Material: Material, - capeMaterial: Material + layer1Material: THREE.Material, + layer2Material: THREE.Material, + capeMaterial: THREE.Material ) } diff --git a/types/skinview3d.d.ts b/types/skinview3d.d.ts index 3c38e53..2836014 100644 --- a/types/skinview3d.d.ts +++ b/types/skinview3d.d.ts @@ -1,3 +1,3 @@ -export { CompositeAnimation, WalkAnimation } from './animation' +export { CompositeAnimation, WalkAnimation, Animation } from './animation' export { SkinViewer, SkinControl } from './viewer' export { SkinObject, CapeObject, PlayerObject } from './model' From fcd7e58688ed4b78da9d19302e7b55a255a1389e Mon Sep 17 00:00:00 2001 From: Pig Fang Date: Mon, 5 Feb 2018 18:30:14 +0800 Subject: [PATCH 4/5] simplify types --- types/animation.d.ts | 8 +------- types/skinview3d.d.ts | 10 +++++++++- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/types/animation.d.ts b/types/animation.d.ts index 5e01acf..6fb372c 100644 --- a/types/animation.d.ts +++ b/types/animation.d.ts @@ -4,13 +4,7 @@ type AnimationFn = (player: PlayerObject, time: number) => void interface IAnimation { play(player: PlayerObject, time: number): void } -export type Animation = - | AnimationFn - | IAnimation - | { - play(player: PlayerObject, time: number): void - [x: string]: any - } +export type Animation = AnimationFn | IAnimation declare function invokeAnimation( animation: Animation, diff --git a/types/skinview3d.d.ts b/types/skinview3d.d.ts index 2836014..c6c854b 100644 --- a/types/skinview3d.d.ts +++ b/types/skinview3d.d.ts @@ -1,3 +1,11 @@ -export { CompositeAnimation, WalkAnimation, Animation } from './animation' +export { + CompositeAnimation, + WalkAnimation, + Animation, + AnimationFn, + IAnimation +} from './animation' + export { SkinViewer, SkinControl } from './viewer' + export { SkinObject, CapeObject, PlayerObject } from './model' From 141c983bc33a33c6cdc1edaff47e2774d2c31575 Mon Sep 17 00:00:00 2001 From: Pig Fang Date: Mon, 5 Feb 2018 18:45:15 +0800 Subject: [PATCH 5/5] mark `handles` as private property --- types/animation.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/animation.d.ts b/types/animation.d.ts index 6fb372c..7d410ab 100644 --- a/types/animation.d.ts +++ b/types/animation.d.ts @@ -25,7 +25,7 @@ declare class AnimationHandle implements IAnimation { } export class CompositeAnimation implements IAnimation { - readonly handles: Set + private handles: Set constructor()