chnobli 0.1.10 → 0.1.11

package/src/timing/Timing.ts

@@ -36,67 +36,84 @@ 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;
 		}
 	}
 
+	/**
+	 * Returns the current position in milliseconds
+	 *
+	 * This is equivalent to position * iteration duration
+	 */
 	positionMs() {
 		// todo should this not return pos * duration?
 		return this.position * this.iterDuration;
@@ -110,13 +127,19 @@ export default class Timing {
 	 * required
 	 */
 	positionMsUnbounded() {
-		const outOfBounds =
-			this.state <= STATE_BEFORE || this.state >= STATE_AFTER;
+		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() {
@@ -131,56 +154,60 @@ export default class Timing {
 			return;
 		}
 
-		this._updateProgress(this._progress + change / this.iterDuration);
+		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,
+			);
+		}
 	}
 
 	seekMs(ms: number) {
-		if (this.iterDuration <= 0) {
-			this._updateProgress(Math.sign(ms));
-			return;
-		}
-
-		this._updateProgress(ms / this.iterDuration);
-
-		// return this.seek(this.normalizeMs(ms));
+		return this.seek(this.normalizeMs(ms));
 	}
 
+	/**
+	 * Returns the position of time (ms) position
+	 */
 	normalizeMs(ms: 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;
+		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/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 };
@@ -100,15 +99,6 @@ 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,
-		};
-	}
-
 	const rect = (el as HTMLElement).getBoundingClientRect();
 	return {
 		top: window.scrollY + rect.top,

package/src/values/ColorValue.ts

@@ -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/Value.ts

@@ -1,4 +1,4 @@
-const REGEX = /^(\d+\.?\d*|\.\d+)(\w*|%)$/;
+const REGEX = /^(-?\d+\.?\d*|\.\d+)(\w*|%)$/;
 
 export default class Value {
 	num: number;

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
-			}
-		]
-	}
-}

package/src/animator.js

@@ -1,187 +0,0 @@
-/* eslint no-unused-vars: 0 */
-
-import { quadInOut, quadOut } from './easing/index.js';
-import { range } from 'fire/util.js';
-
-const START = 0;
-const RUNNING = 1;
-const ENDING = 2;
-const ENDED = 3;
-
-export default class Animator {
-	constructor(el, props) {
-		this.el = el;
-
-		this.running = false;
-
-		this.props = [];
-
-		this.prevTime = null;
-
-
-		for (const propName in props) {
-			const prop = new PropertyAnimator(propName, props[propName], el);
-			this.props.push(prop);
-			this[propName] = prop;
-		}
-	}
-
-	// if the animation loop has not started starts it
-	run() {
-		// if running
-		if (this.prevTime !== null)
-			return;
-
-		requestAnimationFrame(a => this._tick(a));
-	}
-
-	_tick(elapsed) {
-		if (this.prevTime === null)
-			this.prevTime = elapsed;
-
-		const change = elapsed - this.prevTime;
-		this.prevTime = elapsed;
-
-		const transforms = [];
-		const cssVars = [];
-
-		let stillRunning = false;
-
-		for (const prop of this.props) {
-			prop._tick(change);
-
-			if (prop.state < ENDED)
-				stillRunning = true;
-
-			if (prop.name === 'translateY' || prop.name === 'scale')
-				transforms.push(prop);
-			else if (prop.name.startsWith('--'))
-				cssVars.push(prop);
-			else
-				throw new Error('unknown prop ' + prop.name);
-		}
-
-		if (!stillRunning) {
-			this.prevTime = null;
-			return;
-		}
-
-		if (transforms.some(t => t.state  < ENDED)) {
-			this.el.style.transform = transforms.map(t => {
-				const v = t._toTransformValue();
-				return v;
-			}).join(' ');
-		}
-
-		for (const prop of cssVars) {
-			if (prop.state < ENDED)
-				this.el.style.setProperty(prop.name, prop._toCssValue());
-		}
-
-		requestAnimationFrame(a => this._tick(a));
-	}
-}
-
-
-class PropertyAnimator {
-	constructor(name, type, el) {
-		this.name = name;
-		this.type = type;
-
-		this.fromV = null;
-		this.currentV = null;
-		this.toV = null;
-
-		this.easing = quadInOut;
-
-		this.elapsed = 0;
-		this.duration = 0;
-		this.state = ENDED;
-	}
-
-	set(val) {
-		this.fromV = val;
-		this.currentV = val;
-		this.toV = val;
-
-		this.elapsed = 0;
-		this.duration = 0;
-		this.state = START;
-	}
-
-	to(val, dur = null) {
-		this.fromV = this.currentV;
-		this.toV = val;
-
-		if (this.state === RUNNING)
-			this.easing = quadOut;
-		else
-			this.easing = quadInOut;
-
-		this.elapsed = 0;
-		this.duration = dur ?? 500;
-		this.state = START;
-	}
-
-	_tick(change) {
-		if (this.state >= ENDING)
-			return this.state = ENDED;
-
-		this.elapsed += change;
-
-		const dur = Math.max(this.duration, 1);
-		const t = Math.min(this.elapsed / dur, 1);
-		if (t >= 1)
-			this.state = ENDED;
-		else
-			this.state = RUNNING;
-
-		const et = this.easing(t);
-
-		if (this.type === 'num') {
-			const dif = this.toV - this.fromV;
-			this.currentV = this.fromV + dif * et;
-		} else if (this.type === 'hex') {
-			if (!Array.isArray(this.fromV))
-				this.fromV = hexToRgb(this.fromV);
-			if (!Array.isArray(this.toV))
-				this.toV = hexToRgb(this.toV);
-
-			// now animate
-			this.currentV = this.fromV.map((from, i) => {
-				return from + (this.toV[i] - from) * et;
-			});
-		}
-	}
-
-	_toTransformValue() {
-		let v = this.currentV;
-		if (this.name === 'translateY')
-			v += 'px';
-
-		return `${this.name}(${v})`;
-	}
-
-	_toCssValue() {
-		if (this.type === 'hex')
-			return `rgba(${this.currentV.map(v => Math.round(v)).join()}, 1)`;
-		throw new Error('to css value');
-	}
-}
-
-
-function hexToRgb(val) {
-	if (!val.startsWith('#') || val.length !== 7)
-		throw new Error('expected a hex value with 6 characters');
-
-	const hex = val.substring(1);
-
-	const values = range(0, 3)
-		.map(i => parseInt(hex.substring(i * 2, i * 2 + 2), 16));
-
-	return values;
-}
-
-// function rgbToHex(rgb) {
-// 	return 
-// }