chnobli 0.1.5 → 0.1.7

package/src/timing/{timing.js → Timing.ts}

@@ -1,4 +1,4 @@
-import { takeProp } from '../utils/internal.js';
+import { takeProp } from '../utils/internal';
 
 export const STATE_BEFORE = 0;
 /// start only occurs if the current position is exactly 0 or 1 if reversed
@@ -8,24 +8,41 @@ export const STATE_RUNNING = 2;
 export const STATE_ENDED = 3;
 export const STATE_AFTER = 4;
 
+export type Position = {
+	progress: number;
+};
+
 /**
  * This class handles everything timing related
- * 
+ *
  * It manages easing, keeps track of where we are at the moment
- * 
+ *
  * The most important property is position which gives the calculated position
- * 
- * 
+ *
+ *
  * Timing works the same as in after effects
  * if the duration is not at least 1ms the position is always 1 and either
  * STATE_BEFORE or STATE_AFTER
- * 
+ *
  * if the duration is 1ms seek 0 or 1 will always result in position 1
  * because it is like one frame, so it's an image
  */
 export default class Timing {
 	// removes the relevant properties from the props
 
+	iterDuration: number;
+	duration: number;
+
+	ease: (t: number) => number;
+	repeat: number;
+	alternate: boolean;
+	reversed: boolean;
+
+	position: number;
+	state: number;
+
+	private _progress: number;
+
 	/*
 	seeking
 	if repeat is infinite
@@ -41,11 +58,13 @@ export default class Timing {
 		alternate
 	}
 	*/
-	constructor(props) {
+	constructor(props: Record<string, any>) {
 		// these vars are only readonly
 		// use functions to update them
 
-		this.setDuration(props.duration);
+		this.iterDuration = props.duration;
+		this.duration = props.duration;
+
 		this.ease = props.ease ?? (t => t);
 		this.repeat = props.repeat ?? 0;
 		this.alternate = props.alternate ?? true;
@@ -61,6 +80,15 @@ export default class Timing {
 		// scrub
 	}
 
+	setDuration(iterDuration: number) {
+		this.iterDuration = iterDuration;
+
+		this.duration = this.iterDuration;
+		if (this.repeat > -1) {
+			this.duration = (this.repeat + 1) * this.iterDuration;
+		}
+	}
+
 	positionMs() {
 		return this.position * this.iterDuration;
 	}
@@ -68,39 +96,26 @@ export default class Timing {
 	// todo find a better name
 	/**
 	 * Returns the position in milliseconds
-	 * 
+	 *
 	 * If the state is before or after the position might be more/less than
 	 * required
 	 */
 	positionMsUnbounded() {
-		const outOfBounds = this.state <= STATE_BEFORE
-			|| this.state >= STATE_AFTER;
+		const outOfBounds =
+			this.state <= STATE_BEFORE || this.state >= STATE_AFTER;
 
-		if (!outOfBounds)
-			return this.position * this.iterDuration;
+		if (!outOfBounds) return this.position * this.iterDuration;
 
-		if (this.position === 0)
-			return -1;
+		if (this.position === 0) return -1;
 		return this.position * this.iterDuration + 1;
 	}
 
-	/// iterDuration should always be >=0
-	setDuration(iterDuration) {
-		this.iterDuration = iterDuration;
-
-		this.duration = this.iterDuration;
-		if (this.repeat > -1) {
-			this.duration = (this.repeat + 1) * this.iterDuration;
-		}
-	}
-
 	isFinite() {
 		return this.repeat > -1;
 	}
 
-	advance(change) {
-		if (this.state >= STATE_AFTER)
-			return;
+	advance(change: number) {
+		if (this.state >= STATE_AFTER) return;
 
 		if (this.iterDuration <= 0) {
 			this._updateProgress(1);
@@ -110,7 +125,7 @@ export default class Timing {
 		this._updateProgress(this._progress + change / this.iterDuration);
 	}
 
-	seekMs(ms) {
+	seekMs(ms: number) {
 		if (this.iterDuration <= 0) {
 			this._updateProgress(Math.sign(ms));
 			return;
@@ -120,28 +135,27 @@ export default class Timing {
 	}
 
 	// should be between 0-1 if outside might change the state
-	seek(pos) {
+	seek(pos: number) {
 		if (this.repeat <= 0) {
 			this._updateProgress(pos);
 		} else {
-		// finite
+			// finite
 			this._updateProgress(pos * (this.repeat + 1));
 		}
 	}
 
-	savePosition() {
+	savePosition(): Position {
 		return {
-			progress: this._progress
+			progress: this._progress,
 		};
 	}
 
-	restorePosition(pos) {
+	restorePosition(pos: Position) {
 		this._updateProgress(pos.progress);
 	}
 
-	setAlternate(alternate) {
-		if (this.alternate == alternate)
-			return;
+	setAlternate(alternate: boolean) {
+		if (this.alternate == alternate) return;
 
 		// make sure the reversed is updated according to the current inversion
 		this.reversed = alternate == this._shouldInvert();
@@ -151,9 +165,8 @@ export default class Timing {
 	reverse() {
 		this.reversed = !this.reversed;
 
-		const wrapAround = p => {
-			if (this.repeat > -1)
-				return p % (this.repeat + 1);
+		const wrapAround = (p: number) => {
+			if (this.repeat > -1) return p % (this.repeat + 1);
 			return p;
 		};
 
@@ -162,9 +175,9 @@ export default class Timing {
 			p = 2;
 		} else if (this.state >= STATE_AFTER) {
 			p = -1;
-		// check if the values should be reversed
+			// check if the values should be reversed
 		} else if (this.reversed != this._shouldInvert()) {
-			let decimal = 1 - this._progress % 1;
+			let decimal = 1 - (this._progress % 1);
 			p = wrapAround(Math.floor(this._progress) + decimal);
 		} else {
 			p = wrapAround(this._progress);
@@ -177,7 +190,7 @@ export default class Timing {
 		return this.alternate && Math.floor(this._progress) % 2 === 1;
 	}
 
-	_updateProgress(newProgress) {
+	_updateProgress(newProgress: number) {
 		// if duration is zero the position is always 1
 		// and the state is either BEFORE or AFTER
 		if (this.iterDuration <= 0) {
@@ -185,10 +198,8 @@ export default class Timing {
 			this._progress = newProgress;
 			this.position = 1;
 
-			if (newProgress < 0)
-				this.state = STATE_BEFORE;
-			else
-				this.state = STATE_AFTER;
+			if (newProgress < 0) this.state = STATE_BEFORE;
+			else this.state = STATE_AFTER;
 
 			return;
 		}
@@ -230,66 +241,64 @@ export default class Timing {
 	}
 }
 
-export function newTiming(props) {
+export function newTiming(props: Record<string, any>) {
 	const nProps = {
 		duration: parseDuration(takeProp(props, 'duration', 1000)),
 		ease: parseEase(takeProp(props, 'ease', null)),
 		repeat: parseRepeat(takeProp(props, 'repeat', false)),
-		alternate: parseAlternate(takeProp(props, 'alternate', true))
+		alternate: parseAlternate(takeProp(props, 'alternate', true)),
 	};
 	// this._delay = parseDelay(takeProp(props, 'delay', 0));
 
 	return new Timing(nProps);
 }
 
-export function parseDuration(dur) {
-	if (typeof dur !== 'number')
-		throw new Error('duration is not a number');
+export function parseDuration(dur: any) {
+	if (typeof dur !== 'number') throw new Error('duration is not a number');
 
 	dur = Math.round(dur);
 
 	return Math.max(dur, 0);
 }
 
-export function parseEase(ease) {
+export function parseEase(ease: any): (t: number) => number {
 	if (ease !== null && typeof ease !== 'function')
 		throw new Error('ease needs to be null or a function');
 
 	return ease;
 }
 
-export function parseRepeat(repeat) {
+export function parseRepeat(repeat: any): number {
 	if (
-		repeat !== true && repeat !== false &&
+		repeat !== true &&
+		repeat !== false &&
 		(typeof repeat !== 'number' || repeat < 0)
 	)
 		throw new Error('repeat needs to be true|false|0+');
 
-	if (repeat === true)
-		repeat = -1;
-	else if (repeat === false)
-		repeat = 0;
+	if (repeat === true) repeat = -1;
+	else if (repeat === false) repeat = 0;
 
 	return repeat;
 }
 
-export function parseDelay(delay) {
+export function parseDelay(delay: any): number {
 	if (typeof delay !== 'number' || delay < 0)
 		throw new Error('delay needs to be 0+');
 
 	return delay;
 }
 
-export function parseAlternate(alternate) {
+export function parseAlternate(alternate: any): boolean {
 	if (alternate !== true && alternate !== false)
 		throw new Error('alternate needs to be true|false');
 
 	return alternate;
 }
 
-export function parseReversed(reversed) {
+export function parseReversed(reversed: any): boolean {
 	if (reversed !== true && reversed !== false)
 		throw new Error('reversed needs to be true|false');
 
 	return reversed;
-}
+}

package/src/timing/{easing.js → easing.ts}

@@ -9,7 +9,7 @@ import bezierEasing from 'bezier-easing';
  * @param {number} t
  * @returns {number}
  */
-export function linear(t) {
+export function linear(t: number): number {
 	return t;
 }
 
@@ -17,7 +17,7 @@ export function linear(t) {
  * @param {number} t
  * @returns {number}
  */
-export function backInOut(t) {
+export function backInOut(t: number): number {
 	const s = 1.70158 * 1.525;
 	if ((t *= 2) < 1) return 0.5 * (t * t * ((s + 1) * t - s));
 	return 0.5 * ((t -= 2) * t * ((s + 1) * t + s) + 2);
@@ -27,7 +27,7 @@ export function backInOut(t) {
  * @param {number} t
  * @returns {number}
  */
-export function backIn(t) {
+export function backIn(t: number): number {
 	const s = 1.70158;
 	return t * t * ((s + 1) * t - s);
 }
@@ -36,7 +36,7 @@ export function backIn(t) {
  * @param {number} t
  * @returns {number}
  */
-export function backOut(t) {
+export function backOut(t: number): number {
 	const s = 1.70158;
 	return --t * t * ((s + 1) * t + s) + 1;
 }
@@ -45,7 +45,7 @@ export function backOut(t) {
  * @param {number} t
  * @returns {number}
  */
-export function bounceOut(t) {
+export function bounceOut(t: number): number {
 	const a = 4.0 / 11.0;
 	const b = 8.0 / 11.0;
 	const c = 9.0 / 10.0;
@@ -56,25 +56,27 @@ export function bounceOut(t) {
 	return t < a
 		? 7.5625 * t2
 		: t < b
-		? 9.075 * t2 - 9.9 * t + 3.4
-		: t < c
-		? ca * t2 - cb * t + cc
-		: 10.8 * t * t - 20.52 * t + 10.72;
+			? 9.075 * t2 - 9.9 * t + 3.4
+			: t < c
+				? ca * t2 - cb * t + cc
+				: 10.8 * t * t - 20.52 * t + 10.72;
 }
 
 /**
  * @param {number} t
  * @returns {number}
  */
-export function bounceInOut(t) {
-	return t < 0.5 ? 0.5 * (1.0 - bounceOut(1.0 - t * 2.0)) : 0.5 * bounceOut(t * 2.0 - 1.0) + 0.5;
+export function bounceInOut(t: number): number {
+	return t < 0.5
+		? 0.5 * (1.0 - bounceOut(1.0 - t * 2.0))
+		: 0.5 * bounceOut(t * 2.0 - 1.0) + 0.5;
 }
 
 /**
  * @param {number} t
  * @returns {number}
  */
-export function bounceIn(t) {
+export function bounceIn(t: number): number {
 	return 1.0 - bounceOut(1.0 - t);
 }
 
@@ -82,7 +84,7 @@ export function bounceIn(t) {
  * @param {number} t
  * @returns {number}
  */
-export function circInOut(t) {
+export function circInOut(t: number): number {
 	if ((t *= 2) < 1) return -0.5 * (Math.sqrt(1 - t * t) - 1);
 	return 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1);
 }
@@ -91,7 +93,7 @@ export function circInOut(t) {
  * @param {number} t
  * @returns {number}
  */
-export function circIn(t) {
+export function circIn(t: number): number {
 	return 1.0 - Math.sqrt(1.0 - t * t);
 }
 
@@ -99,7 +101,7 @@ export function circIn(t) {
  * @param {number} t
  * @returns {number}
  */
-export function circOut(t) {
+export function circOut(t: number): number {
 	return Math.sqrt(1 - --t * t);
 }
 
@@ -107,7 +109,7 @@ export function circOut(t) {
  * @param {number} t
  * @returns {number}
  */
-export function cubicInOut(t) {
+export function cubicInOut(t: number): number {
 	return t < 0.5 ? 4.0 * t * t * t : 0.5 * Math.pow(2.0 * t - 2.0, 3.0) + 1.0;
 }
 
@@ -115,7 +117,7 @@ export function cubicInOut(t) {
  * @param {number} t
  * @returns {number}
  */
-export function cubicIn(t) {
+export function cubicIn(t: number): number {
 	return t * t * t;
 }
 
@@ -123,7 +125,7 @@ export function cubicIn(t) {
  * @param {number} t
  * @returns {number}
  */
-export function cubicOut(t) {
+export function cubicOut(t: number): number {
 	const f = t - 1.0;
 	return f * f * f + 1.0;
 }
@@ -132,9 +134,11 @@ export function cubicOut(t) {
  * @param {number} t
  * @returns {number}
  */
-export function elasticInOut(t) {
+export function elasticInOut(t: number): number {
 	return t < 0.5
-		? 0.5 * Math.sin(((+13.0 * Math.PI) / 2) * 2.0 * t) * Math.pow(2.0, 10.0 * (2.0 * t - 1.0))
+		? 0.5 *
+				Math.sin(((+13.0 * Math.PI) / 2) * 2.0 * t) *
+				Math.pow(2.0, 10.0 * (2.0 * t - 1.0))
 		: 0.5 *
 				Math.sin(((-13.0 * Math.PI) / 2) * (2.0 * t - 1.0 + 1.0)) *
 				Math.pow(2.0, -10.0 * (2.0 * t - 1.0)) +
@@ -145,7 +149,7 @@ export function elasticInOut(t) {
  * @param {number} t
  * @returns {number}
  */
-export function elasticIn(t) {
+export function elasticIn(t: number): number {
 	return Math.sin((13.0 * t * Math.PI) / 2) * Math.pow(2.0, 10.0 * (t - 1.0));
 }
 
@@ -153,27 +157,30 @@ export function elasticIn(t) {
  * @param {number} t
  * @returns {number}
  */
-export function elasticOut(t) {
-	return Math.sin((-13.0 * (t + 1.0) * Math.PI) / 2) * Math.pow(2.0, -10.0 * t) + 1.0;
+export function elasticOut(t: number): number {
+	return (
+		Math.sin((-13.0 * (t + 1.0) * Math.PI) / 2) * Math.pow(2.0, -10.0 * t) +
+		1.0
+	);
 }
 
 /**
  * @param {number} t
  * @returns {number}
  */
-export function expoInOut(t) {
+export function expoInOut(t: number): number {
 	return t === 0.0 || t === 1.0
 		? t
 		: t < 0.5
-		? +0.5 * Math.pow(2.0, 20.0 * t - 10.0)
-		: -0.5 * Math.pow(2.0, 10.0 - t * 20.0) + 1.0;
+			? +0.5 * Math.pow(2.0, 20.0 * t - 10.0)
+			: -0.5 * Math.pow(2.0, 10.0 - t * 20.0) + 1.0;
 }
 
 /**
  * @param {number} t
  * @returns {number}
  */
-export function expoIn(t) {
+export function expoIn(t: number): number {
 	return t === 0.0 ? t : Math.pow(2.0, 10.0 * (t - 1.0));
 }
 
@@ -181,7 +188,7 @@ export function expoIn(t) {
  * @param {number} t
  * @returns {number}
  */
-export function expoOut(t) {
+export function expoOut(t: number): number {
 	return t === 1.0 ? t : 1.0 - Math.pow(2.0, -10.0 * t);
 }
 
@@ -189,7 +196,7 @@ export function expoOut(t) {
  * @param {number} t
  * @returns {number}
  */
-export function quadInOut(t) {
+export function quadInOut(t: number): number {
 	t /= 0.5;
 	if (t < 1) return 0.5 * t * t;
 	t--;
@@ -200,7 +207,7 @@ export function quadInOut(t) {
  * @param {number} t
  * @returns {number}
  */
-export function quadIn(t) {
+export function quadIn(t: number): number {
 	return t * t;
 }
 
@@ -208,7 +215,7 @@ export function quadIn(t) {
  * @param {number} t
  * @returns {number}
  */
-export function quadOut(t) {
+export function quadOut(t: number): number {
 	return -t * (t - 2.0);
 }
 
@@ -216,15 +223,17 @@ export function quadOut(t) {
  * @param {number} t
  * @returns {number}
  */
-export function quartInOut(t) {
-	return t < 0.5 ? +8.0 * Math.pow(t, 4.0) : -8.0 * Math.pow(t - 1.0, 4.0) + 1.0;
+export function quartInOut(t: number): number {
+	return t < 0.5
+		? +8.0 * Math.pow(t, 4.0)
+		: -8.0 * Math.pow(t - 1.0, 4.0) + 1.0;
 }
 
 /**
  * @param {number} t
  * @returns {number}
  */
-export function quartIn(t) {
+export function quartIn(t: number): number {
 	return Math.pow(t, 4.0);
 }
 
@@ -232,7 +241,7 @@ export function quartIn(t) {
  * @param {number} t
  * @returns {number}
  */
-export function quartOut(t) {
+export function quartOut(t: number): number {
 	return Math.pow(t - 1.0, 3.0) * (1.0 - t) + 1.0;
 }
 
@@ -240,7 +249,7 @@ export function quartOut(t) {
  * @param {number} t
  * @returns {number}
  */
-export function quintInOut(t) {
+export function quintInOut(t: number): number {
 	if ((t *= 2) < 1) return 0.5 * t * t * t * t * t;
 	return 0.5 * ((t -= 2) * t * t * t * t + 2);
 }
@@ -249,7 +258,7 @@ export function quintInOut(t) {
  * @param {number} t
  * @returns {number}
  */
-export function quintIn(t) {
+export function quintIn(t: number): number {
 	return t * t * t * t * t;
 }
 
@@ -257,7 +266,7 @@ export function quintIn(t) {
  * @param {number} t
  * @returns {number}
  */
-export function quintOut(t) {
+export function quintOut(t: number): number {
 	return --t * t * t * t * t + 1;
 }
 
@@ -265,7 +274,7 @@ export function quintOut(t) {
  * @param {number} t
  * @returns {number}
  */
-export function sineInOut(t) {
+export function sineInOut(t: number): number {
 	return -0.5 * (Math.cos(Math.PI * t) - 1);
 }
 
@@ -273,7 +282,7 @@ export function sineInOut(t) {
  * @param {number} t
  * @returns {number}
  */
-export function sineIn(t) {
+export function sineIn(t: number): number {
 	const v = Math.cos(t * Math.PI * 0.5);
 	if (Math.abs(v) < 1e-14) return 1;
 	else return 1 - v;
@@ -283,10 +292,10 @@ export function sineIn(t) {
  * @param {number} t
  * @returns {number}
  */
-export function sineOut(t) {
+export function sineOut(t: number): number {
 	return Math.sin((t * Math.PI) / 2);
 }
 
-export function cubicBezier(x1, y1, x2, y2) {
+export function cubicBezier(x1: number, y1: number, x2: number, y2: number) {
 	return bezierEasing(x1, y1, x2, y2);
-}
+}

package/src/utils/{events.js → Events.ts}

@@ -1,24 +1,26 @@
-import Listeners from 'fire/util/listeners.js';
+import Listeners from 'fire/sync/Listeners';
 
 export default class Events {
+	private listeners: Map<string, Listeners<any>>;
+
 	constructor() {
-		this.listeners = new Map;
+		this.listeners = new Map();
 	}
 
-	add(event, fn) {
+	add(event: string, fn: (...args: any[]) => void) {
 		let list = this.listeners.get(event);
 		if (!list) {
-			list = new Listeners;
+			list = new Listeners();
 			this.listeners.set(event, list);
 		}
 
 		return list.add(fn);
 	}
 
-	wait(event) {
+	wait(event: string): any {
 		return new Promise(resolve => {
 			let rm = () => {};
-			const call = a => {
+			const call = (a: any) => {
 				rm();
 				resolve(a);
 			};
@@ -26,14 +28,13 @@ export default class Events {
 		});
 	}
 
-	trigger(event, ...args) {
+	trigger(event: string, ...args: any[]) {
 		let list = this.listeners.get(event);
-		if (!list)
-			return;
+		if (!list) return;
 		list.trigger(...args);
 	}
 
 	destroy() {
-		this.listeners = new Map;
+		this.listeners = new Map();
 	}
-}
+}

package/src/utils/internal.ts

@@ -0,0 +1,10 @@
+export function takeProp(
+	props: Record<string, any>,
+	name: string,
+	def: any = null,
+): any {
+	const v = props[name] ?? def;
+	delete props[name];
+
+	return v;
+}