chnobli 0.1.10 → 0.1.12

package/src/timing/Timing.ts

@@ -36,68 +36,85 @@ export type TimingProps = {
  * because it is like one frame, so it's an image
  */
 export default class Timing {
-	// removes the relevant properties from the props
-
+	/**
+	 * The duration of a single iteration
+	 */
 	iterDuration: number;
+
+	/**
+	 * The total duration of the timing
+	 */
 	duration: number;
 
 	ease: (t: number) => number;
+	/**
+	 * The number of repeats
+	 *
+	 * -1 is infinite
+	 */
 	repeat: number;
+
+	/**
+	 * If the iteration should alternate
+	 */
 	alternate: boolean;
+
+	/**
+	 * If the iteration should be reversed
+	 */
 	reversed: boolean;
 
+	/**
+	 * The position of the current iteration
+	 *
+	 * will never be outside of the range 0-1 (inclusive)
+	 */
 	position: number;
+	/**
+	 * The state of the timing
+	 */
 	state: number;
 
-	private _progress: number;
-
-	/*
-	seeking
-	if repeat is infinite
-	seek will only control the current iteration
-	if repeat is finite
-	seek will control the entire time
-
+	/**
+	 * Progress is a value which always counts up
+	 * does not take alternate or easing into account
+	 */
+	private progress: number;
 
-	{
-		duration: in ms
-		ease: easeFunction
-		repeat: -1 - x,
-		alternate
-	}
-	*/
 	constructor(props: TimingProps) {
 		// these vars are only readonly
 		// use functions to update them
 
-		this.iterDuration = props.duration;
-		this.duration = props.duration;
-
 		this.ease = props.ease ?? (t => t);
 		this.repeat = props.repeat ?? 0;
 		this.alternate = props.alternate ?? true;
 		this.reversed = props.reversed ?? false;
 
-		this.position = this.duration > 0 ? 0 : 1;
-		this.state = STATE_BEFORE;
-
-		// progress does not take alternation into account and has no easing
-		// this always increments up
-		this._progress = 0;
+		this.iterDuration = 0;
+		this.duration = 0;
+		this.setDuration(props.duration);
 
-		// scrub
+		this.position = 0;
+		this.state = STATE_BEFORE;
+		this.progress = 0;
+		this.seek(-1);
 	}
 
 	setDuration(iterDuration: number) {
 		this.iterDuration = iterDuration;
 
 		this.duration = this.iterDuration;
-		if (this.repeat > -1) {
+		if (this.isFinite()) {
 			this.duration = (this.repeat + 1) * this.iterDuration;
 		}
 	}
 
-	positionMs() {
+	/**
+	 * Returns the current position in milliseconds
+	 *
+	 * This is equivalent to position * iteration duration
+	 */
+	positionMs(): number {
 		// todo should this not return pos * duration?
 		return this.position * this.iterDuration;
 	}
@@ -109,17 +126,23 @@ export default class Timing {
 	 * 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;
+	positionMsUnbounded(): number {
+		let reversed = this.reversed;
+
+		if (this._shouldInvert()) reversed = !reversed;
 
-		if (!outOfBounds) return this.position * this.iterDuration;
+		let pos = this.position;
+
+		if (this.state <= STATE_BEFORE) {
+			pos = reversed ? 2 : -1;
+		} else if (this.state >= STATE_AFTER) {
+			pos = reversed ? -1 : 2;
+		}
 
-		if (this.position === 0) return -1;
-		return this.position * this.iterDuration + 1;
+		return pos * this.iterDuration;
 	}
 
-	isFinite() {
+	isFinite(): boolean {
 		return this.repeat > -1;
 	}
 
@@ -131,56 +154,60 @@ export default class Timing {
 			return;
 		}
 
-		this._updateProgress(this._progress + change / this.iterDuration);
-	}
-
-	seekMs(ms: number) {
-		if (this.iterDuration <= 0) {
-			this._updateProgress(Math.sign(ms));
-			return;
+		if (this.isFinite()) {
+			this._updateProgress(
+				this.positionAbsolute() + change / this.iterDuration,
+			);
+		} else {
+			// to make sure we don't mess up the alternate
+			this._updateProgress(
+				Math.max(0, this.progress) + change / this.iterDuration,
+			);
 		}
+	}
 
-		this._updateProgress(ms / this.iterDuration);
-
-		// return this.seek(this.normalizeMs(ms));
+	seekMs(ms: number): void {
+		return this.seek(this.normalizeMs(ms));
 	}
 
-	normalizeMs(ms: number) {
+	/**
+	 * Returns the position of time (ms) position
+	 */
+	normalizeMs(ms: number): number {
 		if (this.iterDuration <= 0) {
 			return Math.sign(ms);
 		}
 
-		const pos = ms / this.iterDuration;
-
-		if (this.isFinite()) {
-			return pos / (this.repeat + 1);
-		}
-
-		return pos;
+		return ms / this.duration;
 	}
 
-	// todo how to call this
-	positionLinear(): number {
+	// Returns the position without easing or reversing
+	//
+	// Returns 0..=(repeat + 1)
+	positionAbsolute(): number {
 		if (this.isFinite()) {
-			return this._progress / (this.repeat + 1);
+			return Math.min(this.repeat + 1, Math.max(0, this.progress));
 		}
 
-		return this._progress;
+		// the iterations should be inclusive
+		const prog = Math.max(0, this.progress) % 1;
+		if (prog === 0 && this.progress > 0) return 1;
+		return prog;
 	}
 
 	// should be between 0-1 if outside might change the state
 	seek(pos: number) {
-		if (this.repeat <= 0) {
-			this._updateProgress(pos);
-		} else {
-			// finite
+		if (this.isFinite()) {
 			this._updateProgress(pos * (this.repeat + 1));
+		} else {
+			// to make sure we don't mess up the alternate
+			this._updateProgress(Math.floor(this.progress) + pos);
 		}
 	}
 
 	savePosition(): Position {
 		return {
-			progress: this._progress,
+			progress: this.progress,
 		};
 	}
 
@@ -188,48 +215,46 @@ export default class Timing {
 		this._updateProgress(pos.progress);
 	}
 
+	/**
+	 * Sets the alternate
+	 */
 	setAlternate(alternate: boolean) {
 		if (this.alternate == alternate) return;
 
-		// make sure the reversed is updated according to the current inversion
-		this.reversed = alternate == this._shouldInvert();
+		this.reversed = !this.reversed;
 		this.alternate = alternate;
 	}
 
 	reverse() {
 		this.reversed = !this.reversed;
 
-		const wrapAround = (p: number) => {
-			if (this.repeat > -1) return p % (this.repeat + 1);
-			return p;
-		};
-
-		let p;
-		if (this.state <= STATE_BEFORE) {
-			p = 2;
-		} else if (this.state >= STATE_AFTER) {
-			p = -1;
-			// check if the values should be reversed
-		} else if (this.reversed != this._shouldInvert()) {
-			let decimal = 1 - (this._progress % 1);
-			p = wrapAround(Math.floor(this._progress) + decimal);
+		if (this.isFinite()) {
+			this._updateProgress(this.repeat + 1 - this.progress);
 		} else {
-			p = wrapAround(this._progress);
+			const fract = this.progress % 1;
+			this._updateProgress(Math.floor(this.progress) + 1 - fract);
 		}
-
-		this._updateProgress(p);
 	}
 
-	_shouldInvert() {
-		return this.alternate && Math.floor(this._progress) % 2 === 1;
+	_shouldInvert(): boolean {
+		return (
+			this.alternate &&
+			Math.floor(this.progress) % 2 === 1 &&
+			this.progress % 1 !== 0
+		);
 	}
 
+	/**
+	 * Updates the progress and the state
+	 *
+	 * newProgress should follow the same rules as _progress
+	 */
 	_updateProgress(newProgress: number) {
 		// if duration is zero the position is always 1
 		// and the state is either BEFORE or AFTER
 		if (this.iterDuration <= 0) {
 			newProgress = Math.sign(newProgress);
-			this._progress = newProgress;
+			this.progress = newProgress;
 			this.position = 1;
 
 			if (newProgress < 0) this.state = STATE_BEFORE;
@@ -238,15 +263,19 @@ export default class Timing {
 			return;
 		}
 
-		this._progress = newProgress;
+		this.progress = newProgress;
 
+		// update state
+		//
+		// is this not wrong if we are in reversed?
+		//
 		// since infinite repeat can never end let's ignore it
-		if (this.repeat > -1) {
+		if (this.isFinite()) {
 			const end = this.repeat + 1;
-			if (this._progress > end) {
-				this._progress = end;
+			if (this.progress > end) {
+				this.progress = end + 1;
 				this.state = STATE_AFTER;
-			} else if (this._progress === end) {
+			} else if (this.progress === end) {
 				this.state = STATE_ENDED;
 			} else {
 				this.state = STATE_RUNNING;
@@ -256,20 +285,27 @@ export default class Timing {
 		}
 
 		// override state if not running
-		if (this._progress < 0) {
-			this._progress = 0;
+		if (this.progress < 0) {
+			this.progress = -1;
 			this.state = STATE_BEFORE;
-		} else if (this._progress === 0) {
+		} else if (this.progress === 0) {
 			this.state = STATE_START;
 		}
 
 		// now calculate the position
-		this.position = this._progress % 1;
+		this.position = this.positionAbsolute() % 1;
+
+		// the iterations should be inclusive
+		if (this.position === 0 && this.progress > 0) {
+			this.position = 1;
+		}
+
+		// alternate
+		if (this._shouldInvert()) this.position = 1 - this.position;
 
 		// calc if we are in a reversed iteration or not
 		// and we are we should invert the position
-		if (this.reversed != this._shouldInvert())
-			this.position = 1 - this.position;
+		if (this.reversed) this.position = 1 - this.position;
 
 		this.position = this.ease(this.position);
 	}

package/src/timing/easing.ts

@@ -296,6 +296,11 @@ export function sineOut(t: number): number {
 	return Math.sin((t * Math.PI) / 2);
 }
 
-export function cubicBezier(x1: number, y1: number, x2: number, y2: number) {
+export function cubicBezier(
+	x1: number,
+	y1: number,
+	x2: number,
+	y2: number,
+): (t: number) => number {
 	return bezierEasing(x1, y1, x2, y2);
 }

package/src/utils/Events.ts

@@ -29,7 +29,7 @@ export default class Events {
 	}
 
 	trigger(event: string, ...args: any[]) {
-		let list = this.listeners.get(event);
+		const list = this.listeners.get(event);
 		if (!list) return;
 		list.trigger(...args);
 	}

package/src/utils/motionpath.ts

@@ -7,10 +7,10 @@ function catmullRom(
 	p1Tension: number,
 	p2Tension: number,
 ) {
-	let v0 = (p2 - p0) * p1Tension;
-	let v1 = (p3 - p1) * p2Tension;
-	let t2 = t * t;
-	let t3 = t2 * t;
+	const v0 = (p2 - p0) * p1Tension;
+	const v1 = (p3 - p1) * p2Tension;
+	const t2 = t * t;
+	const t3 = t2 * t;
 
 	return (
 		(2 * p1 - 2 * p2 + v0 + v1) * t3 +
@@ -40,7 +40,7 @@ export function curve(
 ): (t: number) => { x: number; y: number } {
 	if (points.length <= 1) throw new Error('curve expects at least 2 points');
 
-	let startEndStraight = opts.startEndStraight ?? true;
+	const startEndStraight = opts.startEndStraight ?? true;
 	if (startEndStraight) {
 		points[0].straight = true;
 		points[points.length - 1].straight = true;

package/src/utils/utils.ts

@@ -1,4 +1,3 @@
-import { Callback } from '../responsive/ResponsiveEvent.js';
 import { curve } from './motionpath.js';
 
 export { curve };
@@ -6,21 +5,21 @@ export { curve };
 /**
  * Explicitly tells a property to animate the to value
  */
-export function to(to: any) {
+export function to(to: any): { to: any } {
 	return { to };
 }
 
 /**
  * Explicitly tells a property to animate the from value
  */
-export function from(from: any) {
+export function from(from: any): { from: any } {
 	return { from };
 }
 
 /**
  * Explicitly tells a property to animate with the from and to values
  */
-export function fromTo(from: any, to: any) {
+export function fromTo(from: any, to: any): { from: any; to: any } {
 	return { from, to };
 }
 
@@ -34,7 +33,9 @@ export function responsive(fn: (target: any) => void): any {
 /**
  * Converts an element with text into span with chars
  */
-export function chars(element: HTMLElement) {
+export function chars(
+	element: HTMLElement,
+): Element[] | (HTMLSpanElement | null)[] {
 	if (element.dataset.processedChars) return Array.from(element.children);
 
 	const chars = element.textContent!.split('');
@@ -76,7 +77,7 @@ function defWordCallback(element: HTMLElement, word: string): HTMLElement {
 export function words(
 	element: HTMLElement,
 	cb: WordCallback = defWordCallback,
-) {
+): Element[] | (HTMLElement | null)[] {
 	if (element.dataset.processedWords) return Array.from(element.children);
 
 	const words = element.textContent!.split(/(\s+)/);
@@ -99,16 +100,12 @@ export function words(
 /**
  * get the offset to the current page page
  */
-export function pageOffset(el: HTMLElement) {
-	if ('offsetTop' in el) {
-		return {
-			top: el.offsetTop,
-			left: el.offsetLeft,
-			width: el.offsetWidth,
-			height: el.offsetHeight,
-		};
-	}
-
+export function pageOffset(el: HTMLElement): {
+	top: number;
+	left: number;
+	width: number;
+	height: number;
+} {
 	const rect = (el as HTMLElement).getBoundingClientRect();
 	return {
 		top: window.scrollY + rect.top,

package/src/values/ColorValue.ts

@@ -17,7 +17,7 @@ export default class ColorValue {
 		this.values = v;
 	}
 
-	static parse(v: string | number[]) {
+	static parse(v: string | number[]): ColorValue {
 		if (Array.isArray(v)) {
 			if (v.length < 3 || v.length > 4)
 				throw new Error('expected array [r, g, b, a]');
@@ -40,7 +40,7 @@ export default class ColorValue {
 	}
 
 	// v needs to be a string
-	static mightBeAColor(v: string) {
+	static mightBeAColor(v: string): boolean {
 		v = v.trim();
 
 		return (
@@ -51,11 +51,11 @@ export default class ColorValue {
 		);
 	}
 
-	clone() {
+	clone(): ColorValue {
 		return new ColorValue(this.values.slice() as any);
 	}
 
-	toString() {
+	toString(): string {
 		const [r, g, b, a] = this.values;
 		return `rgba(${[r, g, b].map(v => Math.round(v)).join(', ')}, ${a.toFixed(
 			3,
@@ -134,6 +134,7 @@ function parseHsl(hsl: string): RGBA {
 
 /// expects [h, s, l, a]
 function hslToRgba(hsla: HSLA): RGBA {
+	// eslint-disable-next-line prefer-const
 	let [h, s, l, a] = hsla;
 
 	// normalize

package/src/values/StyleValue.ts

@@ -77,7 +77,7 @@ export default class StyleValue {
 				: false;
 	}
 
-	static parse(v: string | number | (string | number)[]) {
+	static parse(v: string | number | (string | number)[]): StyleValue {
 		if (typeof v === 'number') return new StyleValue(v);
 
 		if (Array.isArray(v)) {
@@ -120,7 +120,7 @@ export default class StyleValue {
 	}
 
 	/// only works if the kind is values
-	get length() {
+	get length(): number {
 		if (this.inner.kind !== 'values')
 			throw new Error('only works with kind values');
 
@@ -145,7 +145,7 @@ export default class StyleValue {
 		return (this.inner.values as Value[])[0];
 	}
 
-	clone() {
+	clone(): StyleValue {
 		if (this.inner.kind === 'text')
 			return new StyleValue(this.inner.values);
 
@@ -156,7 +156,7 @@ export default class StyleValue {
 	}
 
 	/// if this is called with a text value nothing happens
-	withDefaultUnit(unit: string | null) {
+	withDefaultUnit(unit: string | null): StyleValue {
 		if (this.inner.kind === 'text')
 			return new StyleValue(this.inner.values);
 

package/src/values/Value.ts

@@ -1,4 +1,4 @@
-const REGEX = /^(\d+\.?\d*|\.\d+)(\w*|%)$/;
+const REGEX = /^(-?\d+\.?\d*|\.\d+)(\w*|%)$/;
 
 export default class Value {
 	num: number;
@@ -9,7 +9,7 @@ export default class Value {
 		this.unit = unit;
 	}
 
-	static parse(v: string | number) {
+	static parse(v: string | number): Value {
 		if (typeof v === 'number') {
 			return new Value(v);
 		}
@@ -20,29 +20,29 @@ export default class Value {
 		return new Value(parseFloat(num), unit ? unit : null);
 	}
 
-	eq(other: Value) {
+	eq(other: Value): boolean {
 		return this.unit === other.unit && this.num === other.num;
 	}
 
-	clone(newNum: number | null = null) {
+	clone(newNum: number | null = null): Value {
 		if (newNum !== null) return new Value(newNum, this.unit);
 
 		return new Value(this.num, this.unit);
 	}
 
-	cloneAdd(add: number) {
+	cloneAdd(add: number): Value {
 		return new Value(this.num + add, this.unit);
 	}
 
-	cloneMul(mul: number) {
+	cloneMul(mul: number): Value {
 		return new Value(this.num * mul, this.unit);
 	}
 
-	withDefaultUnit(unit: string | null) {
+	withDefaultUnit(unit: string | null): Value {
 		return new Value(this.num, this.unit ?? unit);
 	}
 
-	toString() {
+	toString(): string {
 		return this.num.toFixed(3) + (this.unit ?? '');
 	}
 }

package/.eslintrc.cjs

@@ -1,39 +0,0 @@
-module.exports = {
-	"env": {
-		"browser": true,
-		"es2021": true
-	},
-	"extends": "eslint:recommended",
-	"overrides": [
-		{
-			"env": {
-				"node": true
-			},
-			"files": [
-				".eslintrc.{js,cjs}"
-			],
-			"parserOptions": {
-				"sourceType": "script"
-			}
-		}
-	],
-	"parserOptions": {
-		"ecmaVersion": "latest",
-		"sourceType": "module"
-	},
-	"rules": {
-		"no-unused-vars": [
-		  "error",
-		  {
-			"varsIgnorePattern": "^_",
-			"argsIgnorePattern": "^_"
-		  }
-		],
-		"no-constant-condition": [
-			"error",
-			{
-				"checkLoops": false
-			}
-		]
-	}
-}