chnobli 0.1.2 → 0.1.3

package/src/timeline/public.js

@@ -1,8 +1,9 @@
 import { takeProp } from '../utils/internal.js';
 import Timeline from './timeline.js';
-import { STATE_BEFORE, STATE_AFTER } from '../timing/timing.js';
+import { STATE_ENDED } from '../timing/timing.js';
 import { callStagger } from '../stagger/stagger.js';
 import Events from '../utils/events.js';
+import ResponsiveEvent from '../responsive/event.js';
 
 const STATE_PAUSED = 0;
 const STATE_RENDER_ONCE = 1;
@@ -11,20 +12,52 @@ const STATE_PLAYING = 2;
 export default class PublicTimeline {
 	constructor(props = {}) {
 		this._defaults = takeProp(props, 'defaults', {});
+		this._responsive = takeProp(props, 'responsive', true);
+
+		if (typeof this._responsive !== 'boolean')
+			throw new Error('responsive can only be a boolean');
+		if ('duration' in props)
+			throw new Error('a timeline does not accept a duration');
+
 		this._inner = new Timeline(props);
 
 		// 'start', 'end'
 		this._events = new Events;
 
 		this._state = STATE_PAUSED;
+		this._renderedOnce = false;
 		this._runningTicker = null;
+		this._responsiveBlocks = [];
+		if (this._responsive) {
+			this._responsiveEvent = ResponsiveEvent.global()?.add((...args) => {
+				this._onResponsive(...args);
+			});
+
+			// setup callback so we can notify our listeners
+			this._inner.setBeforeResponsiveFn(() => {
+				this._responsiveBlocks.forEach(block => {
+					block.responsive();
+				});
+			});
+		} else {
+			this._responsiveEvent = null;
+		}
 	}
 
+	/**
+	 * Set's properties
+	 * offset can be staggered, a number, a label or a string `+=10`
+	 */
 	set(targets, props, offset = null) {
 		// for the moment let's just add as usual but set the duration to 0
 		return this.add(targets, { ...props, duration: 0 }, offset);
 	}
 
+	/**
+	 * Add an animation to the timeline
+	 * 
+	 * offset can be staggered, a number, a label or a string `+=10`
+	 */
 	add(targets, props, offset = null) {
 		if (Array.from(targets).length === 0)
 			targets = [targets];
@@ -52,12 +85,41 @@ export default class PublicTimeline {
 		return this;
 	}
 
+	/**
+	 * Adds a label at to the current nOffse
+	 *
+	 * This label can then be used in offsets
+	 */
 	label(label, offset = null) {
 		this._inner.label(label, offset);
 
 		return this;
 	}
 
+	/**
+	 * Adds a responsive function call which get's called before the responsive
+	 * functions in properties
+	 */
+	addResponsive(responsive) {
+		if (!this._responsiveEvent)
+			throw new Error('this timeline is not responsive');
+
+		if (Array.isArray(responsive)) {
+			responsive.forEach(resp => this.addResponsive(resp));
+			return this;
+		}
+
+		if (typeof responsive.responsive !== 'function')
+			throw new Error('expected a responsive() function');
+
+		this._responsiveBlocks.push(responsive);
+
+		return this;
+	}
+
+	/**
+	 * Starts to play the timeline if it hasn't started
+	 */
 	play() {
 		if (this._state === STATE_PLAYING)
 			return;
@@ -69,6 +131,9 @@ export default class PublicTimeline {
 		return this;
 	}
 
+	/**
+	 * Pause the timeline at the current position
+	 */
 	pause() {
 		if (this._state === STATE_PAUSED)
 			return;
@@ -78,7 +143,25 @@ export default class PublicTimeline {
 		this._stopTicker();
 	}
 
-	// 0-1
+	/**
+	 * Seeks to a position in the timeline
+	 */
+	seekMs(ms) {
+		this._inner.init();
+
+		this._inner.seekMs(ms);
+
+		if (this._state !== STATE_PLAYING)
+			this._state = STATE_RENDER_ONCE;
+
+		this._startTicker();
+	}
+
+	/**
+	 * Seeks to a normalized position in the timeline
+	 * 
+	 * @param pos = number between 0 and 1
+	 */
 	seek(pos) {
 		this._inner.init();
 
@@ -90,23 +173,94 @@ export default class PublicTimeline {
 		this._startTicker();
 	}
 
+	// seek in Range (useful for scroll timelines)
+	// seek(startOffset, endOffset, pos)
+
+	/**
+	 * Resets the current timeline to the start
+	 * without changing anything
+	 */
 	reset() {
 		this._inner.seek(0);
 	}
 
+	/**
+	 * Resets every used prop to it's previous value
+	 */
+	resetProps() {
+		const reversed = this._inner.timing.reverse;
+		this._inner.timing.reverse = false;
+		this._inner.seek(-1);
+		this._inner.render();
+		this._inner.ticker.applyTargets();
+
+		this._inner.timing.reverse = reversed;
+		this._inner.seek(-1);
+	}
+
+	/**
+	 * Recalculates all values this should be called for example after a resize
+	 */
+	update() {
+		this._inner.update();
+	}
+
+	/**
+	 * Returns wether the timeline is set to reversed
+	 */
+	isReversed() {
+		return this._inner.timing.reversed;
+	}
+
+	/**
+	 * Set's the timeline to a specific direction
+	 */
+	setReversed(reversed) {
+		if (this.isReversed() == reversed)
+			return;
+		this.reverse();
+	}
+
+	/**
+	 * Reverses the order of the current timeline
+	 */
 	reverse() {
 		this._inner.timing.reverse();
 	}
 
-	// start, update, end -> () => // remove Event
+	/**
+	 * Listen on events
+	 * 
+	 * returns a function to remove the event listener
+	 * 
+	 * ## Events
+	 * 
+	 * ### end
+	 * Get's executed once the timeline comes to the end
+	 * Does not get executed during seeking
+	 * 
+	 */
 	on(event, fn) {
 		return this._events.add(event, fn);
 	}
 
+	// not wroking
 	onPromise(event) {
 		return this._events.wait(event);
 	}
 
+	/**
+	 * Destroys this timeline and resets all props
+	 */
+	destroy() {
+		this._stopTicker();
+		this._inner.destroy();
+		this._events.destroy();
+		this._responsiveEvent?.remove();
+		this._responsiveBlocks = [];
+		this._inner = null;
+	}
+
 	_startTicker() {
 		if (this._runningTicker)
 			return;
@@ -114,16 +268,30 @@ export default class PublicTimeline {
 		this._inner.init();
 
 		this._runningTicker = this._inner.ticker.add(change => {
-			if (this._inner.timing.state === STATE_BEFORE) {
-				this._events.trigger('start');
-			}
+			if (this._inner.timing.state >= STATE_ENDED) {
+				if (!this._renderedOnce) {
+					this._renderedOnce = true;
+					this._inner.render();
+				}
 
-			if (this._inner.timing.state === STATE_AFTER) {
+				if (this._state === STATE_PLAYING)
+					this._events.trigger('end');
+
+				this._state = STATE_PAUSED;
 				this._stopTicker();
-				this._events.trigger('end');
-				return;
+				return
 			}
 
+			// if (this._inner.timing.state <= STATE_START) {
+			// 	this._events.trigger('start');
+			// }
+
+			// if (this._inner.timing.state >= STATE_ENDED) {
+			// 	this._stopTicker();
+			// 	this._events.trigger('end');
+			// 	return;
+			// }
+
 			if (this._state === STATE_PLAYING)
 				this._inner.advance(change);
 
@@ -131,6 +299,15 @@ export default class PublicTimeline {
 
 			this._inner.render();
 
+			if (this._inner.timing.state >= STATE_ENDED) {
+				if (this._state === STATE_PLAYING)
+					this._events.trigger('end');
+
+				this._state = STATE_PAUSED;
+				this._stopTicker();
+				return
+			}
+
 			// we rendered once let's stop
 			if (this._state === STATE_RENDER_ONCE) {
 				this._state = STATE_PAUSED;
@@ -147,8 +324,10 @@ export default class PublicTimeline {
 		this._runningTicker = null;
 	}
 
-	// update() {
-	// 	console.log('render');
-	// 	this._inner.render();
-	// }
+	_onResponsive(_obj) {
+		// // make sure we don't render something if we never did
+		// if (!this._renderedOnce)
+		// 	return;
+		this._inner.update();
+	}
 }

package/src/timeline/timeline.js

@@ -1,11 +1,17 @@
 import { takeProp } from '../utils/internal.js';
 import Timing, {
 	parseEase, parseRepeat, parseAlternate, parseReversed,
-	STATE_RUNNING
+	STATE_BEFORE, STATE_ENDED
 } from '../timing/timing.js';
 import Ticker from '../timing/ticker.js';
 import Animation from '../animation/animation.js';
 
+/**
+ * Timeline is the most versatile class
+ * 
+ * A timeline can contain multiple animation, ordered one after the other or
+ * offset.
+ */
 export default class Timeline {
 	/*
 	{
@@ -29,6 +35,7 @@ export default class Timeline {
 		// { type: label|animation, value: {}, offset, start: x, end: y, render }
 		this.entries = [];
 
+		this._beforeResponsiveFn = () => {};
 		this._initialized = false;
 		this._renderQueue = null;
 	}
@@ -62,12 +69,23 @@ export default class Timeline {
 		return this;
 	}
 
+	// set's a function which get's called before any responsive call
+	setBeforeResponsiveFn(fn) {
+		this._beforeResponsiveFn = fn;
+	}
+
 	advance(change) {
 		this.timing.advance(change);
 
 		this._updateTimings();
 	}
 
+	seekMs(ms) {
+		this.timing.seekMs(ms);
+
+		this._updateTimings();
+	}
+
 	seek(pos) {
 		this.timing.seek(pos);
 
@@ -116,43 +134,44 @@ export default class Timeline {
 
 		this.timing.setDuration(duration);
 
-		this._initAnimations();
+		this._beforeResponsiveFn();
 
-		// console.log(this.entries.map(e => e.value._props[0]));
+		this._initAnimations();
 	}
 
-	_initAnimations() {
-		// we don't won't to have a reversed timing
+	_initAnimations(reset = false) {
+		// we don't wan't to have a reversed timing
 		const reversed = this.timing.reversed;
 		this.timing.reversed = false;
 
-		// now initialize all animtaions
+		// now initialize all animations
+		// initialization means
+		// we need to define which value should be used as the from and the to
+		// value
 		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);
+			this.timing.seekMs(entry.start);
 
-			const pos = this.timing.position * this.timing.iterDuration;
+			const pos = this.timing.positionMs();
 
 			// 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.seekMs(pos - prevEntry.start);
 				prevAnimation.render();
 			}
 
-			entry.value.init();
+			entry.value.init(reset);
 		}
 
-		this.timing.seek(-1);
 		this.timing.reversed = reversed;
+		this.timing.seek(-1);
 		startOrdered.forEach(e => {
 			e.value.seek(-1);
 			e.value.render();
@@ -185,29 +204,64 @@ export default class Timeline {
 			active: []
 		};
 
-		const pos = this.timing.position * this.timing.iterDuration;
+		const pos = this.timing.positionMsUnbounded();
 
 		for (const entry of this.entries) {
 			if (entry.type !== 'animation')
 				continue;
 
 			const animation = entry.value;
+			animation.seekMs(pos - entry.start);
 
-			const p = (pos - entry.start) / animation.duration;
-
-			const prevState = animation.timing.state;
-
-			animation.seek(p);
-
-			if (p > 1) {
+			if (animation.timing.state >= STATE_ENDED) {
 				this._renderQueue.passed.push(animation);
-			} else if (p < 0) {
+			} else if (animation.timing.state <= STATE_BEFORE) {
 				this._renderQueue.upcoming.push(animation);
 			} else {
 				this._renderQueue.active.push(animation);
 			}
 		}
 	}
+
+	update() {
+		if (!this._initialized)
+			return;
+
+		const pos = this.timing.savePosition();
+		const reversed = this.timing.reversed;
+		this.timing.reversed = false;
+
+		this.timing.seek(-1);
+		this._updateTimings();
+		this.render();
+		this.ticker.applyTargets();
+
+		this._beforeResponsiveFn();
+
+		// we now have removed every style we set
+		// we should be able to recalculate everything now
+		this._initAnimations(true);
+
+		this.timing.reversed = reversed;
+		this.timing.restorePosition(pos);
+		this._updateTimings();
+		this.render();
+		this.ticker.applyTargets();
+	}
+
+	destroy() {
+		for (const entry of this.entries) {
+			if (entry.type !== 'animation')
+				continue;
+
+			const animation = entry.value;
+			animation.destroy();
+		}
+
+		this.entries = [];
+		this._beforeResponsiveFn = null;
+		this.ticker.applyTargets();
+	}
 }
 
 

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
 }