chnobli 0.1.0 → 0.1.1

package/src/timeline/timeline.js

@@ -0,0 +1,250 @@
+import { takeProp } from '../utils/internal.js';
+import Timing, {
+	parseEase, parseRepeat, parseAlternate, parseReversed,
+	STATE_RUNNING
+} from '../timing/timing.js';
+import Ticker from '../timing/ticker.js';
+import Animation from '../animation/animation.js';
+
+export default class Timeline {
+	/*
+	{
+		ease,
+		repeat: -1 - x,
+		alternate
+	}
+	*/
+	constructor(props = {}) {
+		const nProps = {
+			duration: 1000,
+			ease: parseEase(takeProp(props, 'ease', null)),
+			repeat: parseRepeat(takeProp(props, 'repeat', false)),
+			alternate: parseAlternate(takeProp(props, 'alternate', true)),
+			reversed: parseReversed(takeProp(props, 'reversed', false))
+		};
+
+		this.timing = new Timing(nProps);
+		this.ticker = Ticker.global();
+
+		// { type: label|animation, value: {}, offset, start: x, end: y, render }
+		this.entries = [];
+
+		this._initialized = false;
+		this._renderQueue = null;
+	}
+
+	// relative represents the point which the offset should be taken
+	// if relative 1 is done the offset will be taken from the previous - 1
+	add(targets, props, offset = null, relative = 0) {
+		const animation = new Animation(targets, this.ticker, props);
+
+		if (!animation.isFinite())
+			throw new Error('the animation needs to be finite');
+
+		this.entries.push({
+			type: 'animation',
+			value: animation,
+			offset: new Offset(offset),
+			relativeOffset: relative
+		});
+
+		return this;
+	}
+
+	label(label, offset = null) {
+		this.entries.push({
+			type: 'label',
+			value: label,
+			offset: new Offset(offset),
+			relativeOffset: 0
+		});
+
+		return this;
+	}
+
+	advance(change) {
+		this.timing.advance(change);
+
+		this._updateTimings();
+	}
+
+	seek(pos) {
+		this.timing.seek(pos);
+
+		this._updateTimings();
+	}
+
+	init() {
+		if (this._initialized)
+			return;
+		this._initialized = true;
+
+		let duration = 0;
+
+		const labels = {};
+
+		let i = -1;
+		for (const entry of this.entries) {
+			i++;
+			let offset = entry.offset;
+
+			if (offset.type === 'label') {
+				if (!(offset.value in labels))
+					throw new Error('could not find label ' + offset.value);
+
+				offset = new Offset(labels[offset.value]);
+			}
+
+			const pos = this.entries[i - 1 - entry.relativeOffset]?.end ?? 0;
+
+			let start = offset.calculate(pos);
+			if (start < 0)
+				throw new Error('cannot go in the past start < 0');
+
+			let end = start;
+			if (entry.type === 'animation')
+				end += entry.value.duration;
+
+			if (entry.type === 'label')
+				labels[entry.value] = start;
+
+			entry.start = start;
+			entry.end = end;
+
+			duration = Math.max(end, duration);
+		}
+
+		this.timing.setDuration(duration);
+
+		this._initAnimations();
+
+		// console.log(this.entries.map(e => e.value._props[0]));
+	}
+
+	_initAnimations() {
+		// we don't won't to have a reversed timing
+		const reversed = this.timing.reversed;
+		this.timing.reversed = false;
+
+		// now initialize all animtaions
+		const startOrdered = this.entries.filter(e => e.type === 'animation');
+		startOrdered.sort((a, b) => a.start - b.start);
+
+		for (let i = 0; i < startOrdered.length; i++) {
+			const entry = startOrdered[i];
+
+			this.timing.seek(entry.start / this.timing.iterDuration);
+
+			const pos = this.timing.position * this.timing.iterDuration;
+
+			// seek all previous and render
+			for (let y = 0; y < i; y++) {
+				const prevEntry = startOrdered[y];
+				const prevAnimation = prevEntry.value;
+
+				const p = (pos - prevEntry.start) / prevAnimation.duration;
+
+				prevAnimation.seek(p);
+				prevAnimation.render();
+			}
+
+			entry.value.init();
+		}
+
+		this.timing.seek(-1);
+		this.timing.reversed = reversed;
+		startOrdered.forEach(e => {
+			e.value.seek(-1);
+			e.value.render();
+		});
+	}
+
+	render() {
+		// the rendering order needs to be as follows
+		// upcoming
+		// passed
+		// active
+
+		for (const animation of this._renderQueue.upcoming) {
+			animation.render();
+		}
+
+		for (const animation of this._renderQueue.passed) {
+			animation.render();
+		}
+
+		for (const animation of this._renderQueue.active) {
+			animation.render();
+		}
+	}
+
+	_updateTimings() {
+		this._renderQueue = {
+			upcoming: [],
+			passed: [],
+			active: []
+		};
+
+		const pos = this.timing.position * this.timing.iterDuration;
+
+		for (const entry of this.entries) {
+			if (entry.type !== 'animation')
+				continue;
+
+			const animation = entry.value;
+
+			const p = (pos - entry.start) / animation.duration;
+
+			const prevState = animation.timing.state;
+
+			animation.seek(p);
+
+			if (p > 1) {
+				this._renderQueue.passed.push(animation);
+			} else if (p < 0) {
+				this._renderQueue.upcoming.push(animation);
+			} else {
+				this._renderQueue.active.push(animation);
+			}
+		}
+	}
+}
+
+
+class Offset {
+	constructor(offset = null) {
+		this.type = 'none';
+
+		if (typeof offset === 'number') {
+			this.type = 'absolute';
+			this.value = offset;
+		} else if (typeof offset === 'string') {
+			if (offset.startsWith('-=')) {
+				this.type = 'sub';
+				this.value = parseFloat(offset.substring(2));
+			} else if (offset.startsWith('+=')) {
+				this.type = 'add';
+				this.value = parseFloat(offset.substring(2));
+			} else {
+				this.type = 'label';
+				this.value = offset;
+			}
+		}
+	}
+
+	calculate(pos) {
+		if (this.type === 'none')
+			return pos;
+
+		if (this.type === 'absolute')
+			return this.value;
+
+		if (this.type === 'sub')
+			return pos - this.value;
+
+		if (this.type === 'add')
+			return pos + this.value;
+
+		throw new Error('cannot calculate for type ' + this.type);
+	}
+}

package/src/timing/ease.js

@@ -0,0 +1,16 @@
+export default class Ease {
+	constructor(prop) {
+		// parse prop
+		if (prop !== null && typeof prop !== 'function')
+			throw new Error('ease needs to be a function');
+
+		this.fn = prop;
+	}
+
+	apply(t) {
+		if (this.fn === null)
+			return t;
+
+		return this.fn(t);
+	}
+}

package/src/timing/easing.js

@@ -0,0 +1,292 @@
+/*
+Adapted from https://github.com/sveltejs/svelte
+Distributed under MIT License https://github.com/sveltejs/svelte/blob/main/LICENSE.md
+*/
+
+import bezierEasing from 'bezier-easing';
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function linear(t) {
+	return t;
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function backInOut(t) {
+	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);
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function backIn(t) {
+	const s = 1.70158;
+	return t * t * ((s + 1) * t - s);
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function backOut(t) {
+	const s = 1.70158;
+	return --t * t * ((s + 1) * t + s) + 1;
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function bounceOut(t) {
+	const a = 4.0 / 11.0;
+	const b = 8.0 / 11.0;
+	const c = 9.0 / 10.0;
+	const ca = 4356.0 / 361.0;
+	const cb = 35442.0 / 1805.0;
+	const cc = 16061.0 / 1805.0;
+	const t2 = t * 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;
+}
+
+/**
+ * @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;
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function bounceIn(t) {
+	return 1.0 - bounceOut(1.0 - t);
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function circInOut(t) {
+	if ((t *= 2) < 1) return -0.5 * (Math.sqrt(1 - t * t) - 1);
+	return 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1);
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function circIn(t) {
+	return 1.0 - Math.sqrt(1.0 - t * t);
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function circOut(t) {
+	return Math.sqrt(1 - --t * t);
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function cubicInOut(t) {
+	return t < 0.5 ? 4.0 * t * t * t : 0.5 * Math.pow(2.0 * t - 2.0, 3.0) + 1.0;
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function cubicIn(t) {
+	return t * t * t;
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function cubicOut(t) {
+	const f = t - 1.0;
+	return f * f * f + 1.0;
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function elasticInOut(t) {
+	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 - 1.0 + 1.0)) *
+				Math.pow(2.0, -10.0 * (2.0 * t - 1.0)) +
+				1.0;
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function elasticIn(t) {
+	return Math.sin((13.0 * t * Math.PI) / 2) * Math.pow(2.0, 10.0 * (t - 1.0));
+}
+
+/**
+ * @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;
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function expoInOut(t) {
+	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;
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function expoIn(t) {
+	return t === 0.0 ? t : Math.pow(2.0, 10.0 * (t - 1.0));
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function expoOut(t) {
+	return t === 1.0 ? t : 1.0 - Math.pow(2.0, -10.0 * t);
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function quadInOut(t) {
+	t /= 0.5;
+	if (t < 1) return 0.5 * t * t;
+	t--;
+	return -0.5 * (t * (t - 2) - 1);
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function quadIn(t) {
+	return t * t;
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function quadOut(t) {
+	return -t * (t - 2.0);
+}
+
+/**
+ * @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;
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function quartIn(t) {
+	return Math.pow(t, 4.0);
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function quartOut(t) {
+	return Math.pow(t - 1.0, 3.0) * (1.0 - t) + 1.0;
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function quintInOut(t) {
+	if ((t *= 2) < 1) return 0.5 * t * t * t * t * t;
+	return 0.5 * ((t -= 2) * t * t * t * t + 2);
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function quintIn(t) {
+	return t * t * t * t * t;
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function quintOut(t) {
+	return --t * t * t * t * t + 1;
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function sineInOut(t) {
+	return -0.5 * (Math.cos(Math.PI * t) - 1);
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function sineIn(t) {
+	const v = Math.cos(t * Math.PI * 0.5);
+	if (Math.abs(v) < 1e-14) return 1;
+	else return 1 - v;
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+export function sineOut(t) {
+	return Math.sin((t * Math.PI) / 2);
+}
+
+export function cubicBezier(x1, y1, x2, y2) {
+	return bezierEasing(x1, y1, x2, y2);
+}

package/src/timing/ticker.js

@@ -0,0 +1,114 @@
+import Value from '../utils/value.js';
+import { newTarget } from '../utils/target.js';
+
+
+export default class Ticker {
+	constructor() {
+		this._listeners = new Set;
+		this._targets = new GlobalTargets;
+
+		this.running = false;
+
+		this._previousTick = null;
+	}
+
+	static global() {
+		if (typeof window === 'undefined')
+			return null;
+
+		if (typeof window.chnobliTicker === 'undefined')
+			window.chnobliTicker = new Ticker;
+		return window.chnobliTicker;
+	}
+
+	add(fn) {
+		this._listeners.add(fn);
+
+		if (!this.running) {
+			this.running = true;
+			requestAnimationFrame(a => this._tick(a));
+		}
+
+		return {
+			remove: () => {
+				this.remove(fn);
+			}
+		};
+	}
+
+	remove(fn) {
+		this._listeners.delete(fn);
+	}
+
+	_tick(elapsed) {
+		if (this._listeners.size === 0) {
+			this.running = false;
+			this._previousTick = null;
+			return;
+		}
+
+		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;
+
+		// const changes = new PropertyChanges;
+
+		for (const fn of this._listeners) {
+			fn(change, {
+				// changes,
+				remove: () => this.remove(fn)
+			});
+		}
+
+		this._targets.apply();
+
+		requestAnimationFrame(a => this._tick(a));
+	}
+}
+
+// class PropertyChanges {
+// 	constructor() {
+// 		this._targets = new Map;
+// 	}
+
+// 	// target is expected to be an html element
+// 	get(target) {
+
+// 	}
+// }
+
+// class TargetChanges {
+// 	constructor() {
+// 		// x, y, rotate, skew, scale
+// 		this.transform = {};
+// 	}
+// }
+
+class GlobalTargets {
+	constructor() {
+		this._targets = new Map;
+	}
+
+	register(target) {
+		let storedTarget = this._targets.get(target);
+		if (!storedTarget) {
+			storedTarget = newTarget(target);
+			this._targets.set(target, storedTarget);
+		}
+
+		return storedTarget;
+	}
+
+	apply() {
+		for (const target of this._targets.values()) {
+			target.apply();
+		}
+	}
+}