chnobli 0.1.2 → 0.1.4

package/src/tests/properties.test.js

@@ -0,0 +1,178 @@
+import { describe, expect, it } from 'vitest';
+import TestTicker from '../timing/testticker.js';
+import TestResponsiveEvent from '../responsive/testevent.js';
+import { animate, timeline } from '../chnobli.js';
+import { responsive, curve } from '../utils/utils.js';
+import { el } from '../target/testdomnode.js';
+import { timeout } from 'fire/util.js';
+
+describe('properties', () => {
+	it('resetprops', () => {
+		const ticker = new TestTicker;
+
+		const div = el();
+		const tl = timeline()
+			.add(div, {
+				x: 100,
+				width: 100,
+				duration: 10
+			})
+			.play();
+
+		ticker.run();
+		expect(div.style.transform)
+			.toBe('translate3d(100.000px,0.000px,0.000px)');
+		expect(div.style.width).toBe('100.000px');
+
+		tl.resetProps();
+		expect(div.style.transform).toBe('');
+		expect(div.style.width).toBe(undefined);
+	});
+
+	it('destroy', async () => {
+		const ticker = new TestTicker;
+
+		function runDestroyTest(cleanup, ticker) {
+
+			const div = el();
+			cleanup.register(div, 'div');
+			expect(ticker.targets.size()).toBe(0);
+			const tl = timeline()
+				.add(div, {
+					x: 100,
+					width: 100,
+					duration: 10
+				})
+				.play();
+
+			expect(ticker.targets.size()).toBe(1);
+
+			ticker.run();
+			expect(div.style.transform)
+				.toBe('translate3d(100.000px,0.000px,0.000px)');
+			expect(div.style.width).toBe('100.000px');
+
+			tl.destroy();
+			expect(div.style.transform).toBe('');
+			expect(div.style.width).toBe(undefined);
+			expect(ticker.targets.size()).toBe(0);
+		}
+
+		let resolveCleanupProm;
+		let cleanupProm = new Promise(resolve => resolveCleanupProm = resolve);
+		const cleanup = new FinalizationRegistry(key => {
+			resolveCleanupProm(key);
+		});
+
+		runDestroyTest(cleanup, ticker);
+
+		global.gc();
+
+		const res = await Promise.race([
+			cleanupProm,
+			timeout(2000).then(() => 'timedout')
+		]);
+		expect(res).toBe('div');
+	});
+
+	it('update timeline', () => {
+		const ticker = new TestTicker;
+		const respEv = new TestResponsiveEvent;
+
+		const div = el();
+		div.computedStyle.width = '10px';
+
+		const tl = timeline()
+			.add(div, {
+				width: 100,
+				duration: 10
+			});
+
+		tl.seek(0);
+		ticker.run();
+		expect(div.style.width).toBe('10.000px');
+
+		tl.play();
+		ticker.run(1);
+		expect(div.style.width).toBe('19.000px');
+
+		// on resize the div changes it's size
+		div.computedStyle.width = '20px';
+		tl.update();
+		expect(div.style.width).toBe('28.000px');
+
+		ticker.run(1);
+		expect(div.style.width).toBe('36.000px');
+		ticker.run();
+		expect(div.style.width).toBe('100.000px');
+
+		tl.reverse();
+		tl.play();
+		ticker.run(5);
+		expect(div.style.width).toBe('60.000px');
+
+		div.computedStyle.width = '30px';
+		respEv.resize();
+		expect(div.style.width).toBe('65.000px');
+	});
+
+	it('responsive', () => {
+		const ticker = new TestTicker;
+		const respEv = new TestResponsiveEvent;
+
+		const div = el();
+		div.computedStyle.width = '10px';
+
+		let windowWidth = 16;
+
+		let windowAspectRatio;
+		const resp1 = responsive(() => {
+			windowAspectRatio = windowWidth / 9;
+		});
+
+		const tl = timeline()
+			.add(div, {
+				width: responsive(e => 20 * windowAspectRatio),
+				duration: 10
+			})
+			.addResponsive(resp1);
+
+		expect(windowAspectRatio).toBe(undefined);
+
+		tl.play();
+		ticker.run();
+		expect(div.style.width).toBe('35.556px');
+
+		windowWidth = 15;
+		respEv.resize();
+		expect(div.style.width).toBe('33.333px');
+	});
+
+	it('xy', () => {
+		const ticker = new TestTicker;
+
+		const div = el();
+		const tl = timeline()
+			.add(div, {
+				xy: curve([
+					{ x: 0, y: 10 },
+					{ x: 100, y: 10 },
+					{ x: 50, y: 20 }
+				]),
+				duration: 10
+			});
+
+		tl.play();
+		ticker.run(0);
+		expect(div.style.transform)
+			.toBe('translate3d(0.000px,10.000px,0.000px)');
+
+		ticker.run(5);
+		expect(div.style.transform)
+			.toBe('translate3d(100.000px,10.000px,0.000px)');
+
+		ticker.run();
+		expect(div.style.transform)
+			.toBe('translate3d(50.000px,20.000px,0.000px)');
+	});
+});

package/src/tests/timeline.test.js

@@ -0,0 +1,234 @@
+import { describe, expect, it } from 'vitest';
+import TestTicker from '../timing/testticker.js';
+import { animate, timeline } from '../chnobli.js';
+import { el } from '../target/testdomnode.js';
+
+describe('timeline', () => {
+	it('empty timeline', () => {
+		const ticker = new TestTicker;
+
+		const tl = timeline();
+		tl.play();
+		const finished = ticker.run();
+		expect(finished).toBe(true);
+	});
+
+	it('single timeline', () => {
+		const ticker = new TestTicker;
+
+		const tl = timeline();
+		const target = el();
+		tl.add(target, {
+			x: 10,
+			duration: 10
+		});
+		tl.play();
+
+		ticker.run(0);
+		expect(target.style.transform)
+			.toBe('translate3d(0.000px,0.000px,0.000px)');
+
+		ticker.run();
+		expect(target.style.transform)
+			.toBe('translate3d(10.000px,0.000px,0.000px)');
+
+		tl.reverse();
+		tl.play();
+		ticker.run();
+		expect(target.style.transform).toBe('');
+	});
+
+	it('timeline set', () => {
+		const ticker = new TestTicker;
+
+		const target = el();
+		const tl = timeline()
+			.set(target, {
+				x: 10
+			});
+		tl.play();
+
+		ticker.run(0);
+		expect(target.style.transform)
+			.toBe('translate3d(10.000px,0.000px,0.000px)');
+
+		ticker.run();
+		expect(target.style.transform)
+			.toBe('translate3d(10.000px,0.000px,0.000px)');
+
+		tl.reverse();
+		tl.play();
+		ticker.run();
+		expect(target.style.transform)
+			.toBe('translate3d(10.000px,0.000px,0.000px)');
+	});
+
+	it('offsetTimeline timeline', () => {
+		const ticker = new TestTicker;
+
+		const tl = timeline();
+		const target = el();
+		tl.add(target, {
+			x: 10,
+			duration: 10
+		});
+		tl.add(target, {
+			x: 20,
+			duration: 10
+		})
+		tl.play();
+
+		ticker.run(10);
+		expect(target.style.transform)
+			.toBe('translate3d(10.000px,0.000px,0.000px)');
+		ticker.run(1);
+		expect(target.style.transform)
+			.toBe('translate3d(11.000px,0.000px,0.000px)');
+
+		ticker.run();
+		expect(target.style.transform)
+			.toBe('translate3d(20.000px,0.000px,0.000px)');
+	});
+
+	it('timeline seeking', () => {
+		const ticker = new TestTicker;
+
+		const tl = timeline();
+		const target = el();
+		tl.add(target, {
+			x: 10,
+			duration: 10
+		});
+		tl.add(target, {
+			x: 20,
+			duration: 10
+		})
+
+		tl.seekMs(10);
+		ticker.run();
+		expect(target.style.transform)
+			.toBe('translate3d(10.000px,0.000px,0.000px)');
+
+		tl.seekMs(11);
+		ticker.run();
+		expect(target.style.transform)
+			.toBe('translate3d(11.000px,0.000px,0.000px)');
+
+		tl.seekMs(20);
+		ticker.run();
+		expect(target.style.transform)
+			.toBe('translate3d(20.000px,0.000px,0.000px)');
+
+		tl.seekMs(8);
+		ticker.run();
+		expect(target.style.transform)
+			.toBe('translate3d(8.000px,0.000px,0.000px)');
+	});
+
+	it('seeking after', () => {
+		const ticker = new TestTicker;
+
+		const target = el();
+		const ani = animate(target, {
+			autoplay: false,
+			duration: 10,
+			x: 10
+		});
+		ani.seek(2);
+
+		ticker.run();
+		expect(target.style.transform)
+			.toBe('translate3d(10.000px,0.000px,0.000px)');
+	});
+
+	it('timeline controls', () => {
+		const ticker = new TestTicker;
+
+		const tl = timeline();
+		const target = el();
+		tl.add(target, {
+			x: 10,
+			duration: 10
+		});
+		tl.add(target, {
+			x: 20,
+			duration: 10
+		})
+
+		tl.seekMs(10);
+		ticker.run();
+		expect(target.style.transform)
+			.toBe('translate3d(10.000px,0.000px,0.000px)');
+
+		tl.play();
+		ticker.run();
+		expect(target.style.transform)
+			.toBe('translate3d(20.000px,0.000px,0.000px)');
+
+		tl.reset();
+		tl.play();
+		ticker.run(10);
+		expect(target.style.transform)
+			.toBe('translate3d(10.000px,0.000px,0.000px)');
+
+		tl.reverse();
+		ticker.run(5);
+		expect(target.style.transform)
+			.toBe('translate3d(5.000px,0.000px,0.000px)');
+
+		tl.reverse();
+		ticker.run();
+		expect(target.style.transform)
+			.toBe('translate3d(20.000px,0.000px,0.000px)');
+
+		tl.reverse();
+		tl.play();
+		ticker.run();
+		expect(target.style.transform).toBe('');
+	});
+
+	it('timeline events', () => {
+		const ticker = new TestTicker;
+
+		const target = el();
+		const tl = timeline()
+			.add(target, {
+				x: 50,
+				duration: 10
+			})
+			.add(target, {
+				y: 50,
+				duration: 10
+			});
+
+		let endCounter = 0;
+		tl.on('end', () => endCounter += 1);
+
+		tl.play();
+		ticker.run(5);
+		expect(endCounter).toBe(0);
+
+		ticker.run();
+		expect(endCounter).toBe(1);
+
+		tl.play();
+		ticker.run();
+		// not sure this is the behaviour we wan't
+		expect(endCounter).toBe(2);
+
+		tl.reverse();
+		ticker.run();
+		expect(endCounter).toBe(2);
+		expect(target.style.transform)
+			.toBe('translate3d(50.000px,50.000px,0.000px)');
+
+		tl.play();
+		ticker.run();
+		expect(endCounter).toBe(3);
+		expect(target.style.transform).toBe('');
+
+		tl.play();
+		ticker.run();
+		expect(endCounter).toBe(4);
+	});
+});

package/src/tests/timing.test.js

@@ -0,0 +1,270 @@
+import { describe, expect, it } from 'vitest';
+import Timing, {
+	STATE_BEFORE, STATE_START, STATE_RUNNING, STATE_ENDED, STATE_AFTER
+} from '../timing/timing.js';
+
+describe('timing', () => {
+	it('zero duration', () => {
+		// if duration is zero the position is always 1
+		// and the state is either BEFORE or AFTER
+		const timing = new Timing({
+			duration: 0
+		});
+		expect(timing.duration).toBe(0);
+		expect(timing.state).toBe(STATE_BEFORE);
+
+		timing.seek(-1);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_BEFORE);
+
+		timing.seek(0);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_AFTER);
+
+		timing.seek(.5);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_AFTER);
+
+		timing.seek(1);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_AFTER);
+
+		timing.seek(2);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_AFTER);
+
+		timing.seekMs(-1);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_BEFORE);
+
+		timing.seekMs(0);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_AFTER);
+
+		timing.seekMs(.5);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_AFTER);
+
+		timing.seekMs(1);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_AFTER);
+	});
+
+	it('short timing', () => {
+		const timing = new Timing({
+			duration: 1
+		});
+		expect(timing.duration).toBe(1);
+		expect(timing.state).toBe(STATE_BEFORE);
+
+		timing.seek(-1);
+		expect(timing.position).toBe(0);
+		expect(timing.state).toBe(STATE_BEFORE);
+
+		timing.seek(0);
+		expect(timing.position).toBe(0);
+		expect(timing.state).toBe(STATE_START);
+
+		timing.seek(.5);
+		expect(timing.position).toBe(.5);
+		expect(timing.state).toBe(STATE_RUNNING);
+
+		timing.seek(1);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_ENDED);
+
+		timing.seek(2);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_AFTER);
+
+		timing.seekMs(-1);
+		expect(timing.position).toBe(0);
+		expect(timing.state).toBe(STATE_BEFORE);
+
+		timing.seekMs(0);
+		expect(timing.position).toBe(0);
+		expect(timing.state).toBe(STATE_START);
+
+		timing.seekMs(.5);
+		expect(timing.position).toBe(.5);
+		expect(timing.state).toBe(STATE_RUNNING);
+
+		timing.seekMs(1);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_ENDED);
+
+		timing.seekMs(2);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_AFTER);
+	});
+
+	it('state management', () => {
+		const timing = new Timing({
+			duration: 100
+		});
+
+		timing.advance(20);
+		expect(timing.state).toBe(STATE_RUNNING);
+		expect(timing.position).toBe(.2);
+
+		timing.advance(20);
+		expect(timing.positionMs()).toBe(40);
+		expect(timing.state).toBe(STATE_RUNNING);
+		expect(timing.position).toBe(.4);
+
+		timing.advance(20);
+		expect(timing.state).toBe(STATE_RUNNING);
+		expect(Math.floor(timing.position * 10) / 10).toBe(.6);
+
+		timing.advance(20);
+		expect(timing.state).toBe(STATE_RUNNING);
+		expect(timing.position).toBe(.8);
+
+		timing.advance(20);
+		expect(timing.state).toBe(STATE_ENDED);
+		expect(timing.position).toBe(1);
+
+		timing.advance(20);
+		expect(timing.state).toBe(STATE_AFTER);
+		expect(timing.position).toBe(1);
+	});
+
+	it('reverse', () => {
+		const timing = new Timing({
+			duration: 100
+		});
+
+		expect(timing.state).toBe(STATE_BEFORE);
+		expect(timing.position).toBe(0);
+
+		// <
+		timing.reverse();
+		expect(timing.state).toBe(STATE_AFTER);
+		expect(timing.position).toBe(0);
+
+		// >
+		timing.reverse();
+		expect(timing.state).toBe(STATE_BEFORE);
+		expect(timing.position).toBe(0);
+
+		// >
+		timing.advance(25);
+		expect(timing.state).toBe(STATE_RUNNING);
+		expect(timing.position).toBe(0.25);
+
+		// <
+		timing.reverse();
+		expect(timing.state).toBe(STATE_RUNNING);
+		expect(timing.position).toBe(0.25);
+
+		// <
+		timing.advance(24);
+		expect(timing.state).toBe(STATE_RUNNING);
+		expect(timing.position.toFixed(3)).toBe('0.010');
+
+		// <
+		timing.advance(1);
+		expect(timing.state).toBe(STATE_ENDED);
+		expect(timing.position).toBe(0);
+
+		// >
+		timing.reverse();
+		expect(timing.state).toBe(STATE_START);
+		expect(timing.position).toBe(0);
+
+		// ><
+		timing.seek(0.75);
+		timing.reverse();
+		expect(timing.position).toBe(0.75);
+
+		// <
+		timing.advance(10);
+		expect(timing.position).toBe(0.65);
+
+
+		const timing2 = new Timing({
+			duration: 100
+		});
+
+		timing2.advance(100);
+		expect(timing2.state).toBe(STATE_ENDED);
+		expect(timing2.position).toBe(1);
+
+		timing2.reverse();
+		expect(timing2.state).toBe(STATE_START);
+		expect(timing2.position).toBe(1);
+
+		timing2.seek(-1);
+		expect(timing2.state).toBe(STATE_BEFORE);
+		expect(timing2.position).toBe(1);
+
+		timing2.seek(.25);
+		expect(timing2.state).toBe(STATE_RUNNING);
+		expect(timing2.position).toBe(.75);
+	});
+
+	it('repeat', () => {
+		const timing = new Timing({
+			duration: 100,
+			repeat: -1
+		});
+
+		// >
+		timing.advance(25);
+		expect(timing.state).toBe(STATE_RUNNING);
+		expect(timing.position).toBe(0.25);
+
+		// ><
+		timing.advance(100);
+		expect(timing.position).toBe(0.75);
+
+		// <
+		timing.advance(50);
+		expect(timing.position).toBe(0.25);
+
+		// <>
+		timing.advance(50);
+		expect(timing.position).toBe(0.25);
+
+		// >
+		timing.advance(50);
+		expect(timing.position).toBe(0.75);
+
+		// <
+		timing.reverse();
+		expect(timing.position).toBe(0.75);
+
+		timing.advance(50);
+		expect(timing.position).toBe(0.25);
+
+		// <>
+		timing.advance(50);
+		expect(timing.position).toBe(0.25);
+
+		// >
+		timing.setAlternate(false);
+		timing.advance(50);
+		expect(timing.position).toBe(0.75);
+
+		// >
+		timing.advance(50);
+		expect(timing.position).toBe(0.25);
+
+		// <
+		timing.reverse();
+		expect(timing.position).toBe(0.25);
+
+		// <
+		timing.advance(50);
+		expect(timing.position).toBe(0.75);
+
+		// <
+		timing.setAlternate(true);
+		timing.advance(50);
+		expect(timing.position).toBe(0.25);
+
+		// <>
+		timing.advance(50);
+		expect(timing.position).toBe(0.25);
+	});
+});