chnobli 0.1.2 → 0.1.4

package/src/timing/testticker.js

@@ -0,0 +1,98 @@
+import { GlobalTargets } from './ticker.js';
+
+export default class TestTicker {
+	constructor() {
+		this._listeners = new Set;
+		this.targets = new GlobalTargets;
+
+		this.running = false;
+
+		this._previousTick = null;
+
+		globalThis.chnobliTicker = this;
+	}
+
+	registerTarget(target) {
+		return this.targets.register(target);
+	}
+
+	unregisterTarget(target) {
+		return this.targets.unregister(target);
+	}
+
+	applyTargets() {
+		return this.targets.apply();
+	}
+
+	add(fn) {
+		this._listeners.add(fn);
+
+		if (!this.running)
+			this.running = true;
+
+		return {
+			remove: () => {
+				this.remove(fn);
+			}
+		};
+	}
+
+	remove(fn) {
+		this._listeners.delete(fn);
+	}
+
+	/// max expects a number for how many ms the ticker should run
+	///
+	/// runs until the ticker ends this allows to run
+	run(max = 3000, step = 1) {
+		if (!this.running)
+			return true;
+
+		if (this._previousTick === null)
+			this.tick(0);
+
+		let i = 0;
+		const start = this._previousTick ?? 0;
+
+		for (i = 1; i <= max; i += step) {
+			if (!this.tick(start + i))
+				return true;
+		}
+
+		return false;
+	}
+
+	// elapsed in ms
+	tick(elapsed) {
+		if (!this.running)
+			return false;
+
+		if (this._previousTick === null)
+			this._previousTick = elapsed;
+
+		let change = elapsed - this._previousTick;
+		// lagSmoothing
+		if (change > 500) {
+			console.log('ticker lagged');
+			change = 33;
+		}
+		this._previousTick = elapsed;
+
+		for (const fn of this._listeners) {
+			fn(change, {
+				// changes,
+				remove: () => this.remove(fn)
+			});
+		}
+
+		this.targets.apply();
+
+		if (this._listeners.size === 0) {
+			this.running = false;
+			this._previousTick = null;
+			return false;
+		}
+
+		return true;
+	}
+}

package/src/timing/ticker.js

@@ -1,7 +1,11 @@
-import Value from '../utils/value.js';
-import { newTarget } from '../utils/target.js';
-
-
+import { newTarget } from '../target/target.js';
+
+/**
+ * The ticker is the main driver for all animations
+ * 
+ * it also manages all targets allowing to only call the dom api
+ * at the end of every frame
+ */
 export default class Ticker {
 	constructor() {
 		this._listeners = new Set;
@@ -13,14 +17,30 @@ export default class Ticker {
 	}
 
 	static global() {
+		// allow to define a test ticker
+		if (typeof globalThis !== 'undefined' && globalThis.chnobliTicker)
+			return globalThis.chnobliTicker;
+
 		if (typeof window === 'undefined')
-			return null;
+			throw new Error('can only be executed in a browser context');
 
 		if (typeof window.chnobliTicker === 'undefined')
 			window.chnobliTicker = new Ticker;
 		return window.chnobliTicker;
 	}
 
+	registerTarget(target) {
+		return this._targets.register(target);
+	}
+
+	unregisterTarget(target) {
+		return this._targets.unregister(target);
+	}
+
+	applyTargets() {
+		return this._targets.apply();
+	}
+
 	add(fn) {
 		this._listeners.add(fn);
 
@@ -91,24 +111,44 @@ export default class Ticker {
 // 	}
 // }
 
-class GlobalTargets {
+export class GlobalTargets {
 	constructor() {
+		// {target, ref}
 		this._targets = new Map;
 	}
 
 	register(target) {
 		let storedTarget = this._targets.get(target);
 		if (!storedTarget) {
-			storedTarget = newTarget(target);
+			storedTarget = {
+				target: newTarget(target),
+				ref: 0
+			};
 			this._targets.set(target, storedTarget);
 		}
+		storedTarget.ref += 1;
+
+		return storedTarget.target;
+	}
 
-		return storedTarget;
+	unregister(target) {
+		const storedTarget = this._targets.get(target);
+		storedTarget.ref -= 1;
 	}
 
 	apply() {
-		for (const target of this._targets.values()) {
+		for (const storedTarget of this._targets.values()) {
+			const { target, ref } = storedTarget;
 			target.apply();
+
+			if (ref <= 0)
+				this._targets.delete(target.target);
 		}
 	}
+
+	size() {
+		return this._targets.size;
+	}
+
+	// todo we should probly run some kind of gc
 }

package/src/timing/timing.js

@@ -1,12 +1,28 @@
-import Ease from './ease.js';
 import { takeProp } from '../utils/internal.js';
 
 export const STATE_BEFORE = 0;
+/// start only occurs if the current position is exactly 0 or 1 if reversed
 export const STATE_START = 1;
 export const STATE_RUNNING = 2;
+/// ended only occurs if the current position is exactly 1 or 0 if reversed
 export const STATE_ENDED = 3;
 export const STATE_AFTER = 4;
 
+/**
+ * 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
 
@@ -26,23 +42,49 @@ export default class Timing {
 	}
 	*/
 	constructor(props) {
+		// these vars are only readonly
+		// use functions to update them
+
 		this.setDuration(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 = 0;
+		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 until it overflows
+		// this always increments up
 		this._progress = 0;
-		// this._reversed = false;
 
 		// scrub
 	}
 
+	positionMs() {
+		return this.position * this.iterDuration;
+	}
+
+	// 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;
+
+		if (!outOfBounds)
+			return this.position * this.iterDuration;
+
+		if (this.position === 0)
+			return -1;
+		return this.position * this.iterDuration + 1;
+	}
+
+	/// iterDuration should always be >=0
 	setDuration(iterDuration) {
 		this.iterDuration = iterDuration;
 
@@ -60,9 +102,23 @@ export default class Timing {
 		if (this.state >= STATE_AFTER)
 			return;
 
+		if (this.iterDuration <= 0) {
+			this._updateProgress(1);
+			return;
+		}
+
 		this._updateProgress(this._progress + change / this.iterDuration);
 	}
 
+	seekMs(ms) {
+		if (this.iterDuration <= 0) {
+			this._updateProgress(Math.sign(ms));
+			return;
+		}
+
+		this._updateProgress(ms / this.iterDuration);
+	}
+
 	// should be between 0-1 if outside might change the state
 	seek(pos) {
 		if (this.repeat <= 0) {
@@ -73,19 +129,73 @@ export default class Timing {
 		}
 	}
 
+	savePosition() {
+		return {
+			progress: this._progress
+		};
+	}
+
+	restorePosition(pos) {
+		this._updateProgress(pos.progress);
+	}
+
+	setAlternate(alternate) {
+		if (this.alternate == alternate)
+			return;
+
+		// make sure the reversed is updated according to the current inversion
+		this.reversed = alternate == this._shouldInvert();
+		this.alternate = alternate;
+	}
+
 	reverse() {
 		this.reversed = !this.reversed;
 
-		let p = Math.floor(this._progress);
-		p = p + (1 - (this._progress - p));
+		const wrapAround = p => {
+			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);
+		} else {
+			p = wrapAround(this._progress);
+		}
 
 		this._updateProgress(p);
 	}
 
+	_shouldInvert() {
+		return this.alternate && Math.floor(this._progress) % 2 === 1;
+	}
+
 	_updateProgress(newProgress) {
+		// 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.position = 1;
+
+			if (newProgress < 0)
+				this.state = STATE_BEFORE;
+			else
+				this.state = STATE_AFTER;
+
+			return;
+		}
+
 		this._progress = newProgress;
 
-		// since infite repeat can never end let's ignore it
+		// since infinite repeat can never end let's ignore it
 		if (this.repeat > -1) {
 			const end = this.repeat + 1;
 			if (this._progress > end) {
@@ -108,21 +218,12 @@ export default class Timing {
 			this.state = STATE_START;
 		}
 
-
-		let reversed = this.reversed;
-
-		// calc if we are in a reversed iteration or not
-		if (this.alternate) {
-			let shouldInverse = Math.floor(this._progress) % 2 === 1;
-			if (shouldInverse)
-				reversed = !reversed;
-		}
-
 		// now calculate the position
-
 		this.position = this._progress % 1;
 
-		if (reversed)
+		// 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;
 
 		this.position = this.ease(this.position);
@@ -145,10 +246,9 @@ export function parseDuration(dur) {
 	if (typeof dur !== 'number')
 		throw new Error('duration is not a number');
 
-	// convert s to ms
 	dur = Math.round(dur);
 
-	return Math.max(dur, 1);
+	return Math.max(dur, 0);
 }
 
 export function parseEase(ease) {

package/src/utils/events.js

@@ -32,4 +32,8 @@ export default class Events {
 			return;
 		list.trigger(...args);
 	}
+
+	destroy() {
+		this.listeners = new Map;
+	}
 }

package/src/utils/motionpath.js

@@ -8,6 +8,9 @@ function catmullRom(p0, p1, p2, p3, t, p1Tension, p2Tension) {
 		t3 + (-3 * p1 + 3 * p2 - 2 * v0 - v1) * t2 + v0 * t + p1;
 }
 
+/**
+ * Calculates a curve between different points
+ */
 export function curve(points, tension = 1, opts = {}) {
 	if (points.length <= 1)
 		throw new Error('curve expects at least 2 points');

package/src/utils/utils.js

@@ -2,19 +2,37 @@ import { curve } from './motionpath.js';
 
 export { curve };
 
+/**
+ * Explicitly tells a property to animate the to value
+ */
 export function to(to) {
 	return { to };
 }
 
+/**
+ * Explicitly tells a property to animate the from value
+ */
 export function from(from) {
 	return { from };
 }
 
+/**
+ * Explicitly tells a property to animate with the from and to values
+ */
 export function fromTo(from, to) {
 	return { from, to };
 }
 
-// converts some element 
+/**
+ * makes a value reactive to `Timeline::update` calls or resizes
+ */
+export function responsive(fn) {
+	return { responsive: fn };
+}
+
+/**
+ * Converts an element with text into span with chars
+ */
 export function chars(element) {
 	if (element.dataset.processedChars)
 		return Array.from(element.children);
@@ -34,7 +52,9 @@ export function chars(element) {
 	});
 }
 
-// get the offset to the page
+/**
+ * get the offset to the current page page
+ */
 export function pageOffset(el) {
 	if ('offsetTop' in el) {
 		return {

package/src/values/colorvalue.js

@@ -0,0 +1,167 @@
+import { COLORS } from './defaultcolors.js';
+
+export default class ColorValue {
+	// [r, g, b, a?]
+	constructor(v) {
+		if (v.length === 3)
+			v = [...v, 1];
+
+		// always [r, g, b, a]
+		this.values = v;
+	}
+
+	static parse(v) {
+		if (Array.isArray(v)) {
+			if (v.length < 3 || v.length > 4)
+				throw new Error('expected array [r, g, b, a]');
+
+			return new ColorValue(v);
+		}
+
+		if (typeof v !== 'string')
+			throw new Error('expected a string or an array');
+
+		v = v.trim();
+
+		if (v.startsWith('#'))
+			return new ColorValue(parseHex(v.substring(1)));
+		if (v.startsWith('rgb'))
+			return new ColorValue(parseRgb(v));
+		if (v.startsWith('hsl'))
+			return new ColorValue(parseHsl(v));
+
+		if (v in COLORS)
+			return new ColorValue(COLORS[v]);
+
+		throw new Error('unknown color value ' + v);
+	}
+
+	// v needs to be a string
+	static mightBeAColor(v) {
+		v = v.trim();
+
+		return v.startsWith('#')
+			|| v.startsWith('rgb')
+			|| v.startsWith('hsl')
+			|| v in COLORS;
+	}
+
+	clone() {
+		return new ColorValue(this.values.slice());
+	}
+
+	toString() {
+		const [r, g, b, a] = this.values;
+		return `rgba(${[r, g, b].map(v => Math.round(v)).join(', ')}, ${
+			a.toFixed(3)
+		})`;
+	}
+}
+
+// hex without the hash
+function parseHex(hex) {
+	if (hex.length !== 3 && hex.length !== 6 && hex.length !== 8)
+		throw new Error('unknown hex value ' + hex);
+
+	// Convert 3-character hex to 6-character hex
+	if (hex.length === 3)
+		hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+
+	// Parse the hex values
+	const r = parseInt(hex.substring(0, 2), 16);
+	const g = parseInt(hex.substring(2, 4), 16);
+	const b = parseInt(hex.substring(4, 6), 16);
+	let a = 255;
+
+	if (hex.length === 8)
+		a = parseInt(hex.substring(6, 8), 16);
+
+	return [r, g, b, a / 255];
+}
+
+// rgb needs to start with rgb
+function parseRgb(rgb) {
+	const rgba = rgb.startsWith('rgba');
+	// remove the function name
+	rgb = rgb.substring(3 + rgba);
+	if (!rgb.startsWith('(') && !rgb.endsWith(')'))
+		throw new Error('invalid rgb function ' + rgb);
+
+	rgb = rgb.substring(1, rgb.length - 1);
+	const vals = rgb.split(',');
+
+	if ((rgba && vals.length !== 4) || vals.length !== 3)
+		throw new Error('invalid rgb function ' + rgb);
+
+	const r = parseInt(vals[0].trim());
+	const g = parseInt(vals[1].trim());
+	const b = parseInt(vals[2].trim());
+	const a = rgba ? parseFloat(vals[3].trim()) : 1;
+
+	return [r, g, b, a];
+}
+
+// hsl needs to start with hsl
+function parseHsl(hsl) {
+	const hsla = hsl.startsWith('hsla');
+	// Remove the function name
+	hsl = hsl.substring(3 + hsla);
+	if (!hsl.startsWith('(') || !hsl.endsWith(')'))
+		throw new Error('invalid hsl function ' + hsl);
+
+	hsl = hsl.substring(1, hsl.length - 1);
+	let vals = hsl.split(',');
+
+	if ((hsla && vals.length !== 4) || (!hsla && vals.length !== 3))
+		throw new Error('invalid hsl function ' + hsl);
+
+	vals = vals.map(v => v.trim());
+
+	if (!vals[1].endsWith('%') && !vals[2].endsWith('%'))
+		throw new Error('invalid hsl function ' + hsl);
+
+	const h = parseInt(vals[0]);
+	const s = parseInt(vals[1].substring(0, vals[1].length - 1));
+	const l = parseInt(vals[2].substring(0, vals[2].length - 1));
+	const a = hsla ? parseFloat(vals[3]) : 1;
+
+	return hslToRgba([h, s, l, a]);
+}
+
+/// expects [h, s, l, a]
+function hslToRgba(hsla) {
+	let [h, s, l, a] = hsla;
+
+	// normalize
+	h /= 360;
+	s /= 100;
+	l /= 100;
+
+	let r, g, b;
+	if (s === 0) {
+		r = g = b = l;
+	} else {
+		const q = l < .5 ? l * (1 + s) : l + s - l * s;
+		const p = 2 * l - q;
+		r = Math.round(hueToRgb(p, q, h + 1 / 3) * 255, 0);
+		g = Math.round(hueToRgb(p, q, h) * 255, 0);
+		b = Math.round(hueToRgb(p, q, h - 1 / 3) * 255, 0);
+	}
+
+	return [r, g, b, a];
+}
+
+function hueToRgb(p, q, t) {
+	if (t < 0)
+		t += 1;
+	if (t > 1)
+		t -= 1;
+
+	if (t < 1 / 6)
+		return p + (q - p) * 6 * t;
+	if (t < 1 / 2)
+		return q;
+	if (t < 2 / 3)
+		return p + (q - p) * (2 / 3 - t) * 6;
+	return p;
+}