add Timeline::update (preparing to add resizing)

src/animation/animation.js

@@ -60,8 +60,8 @@ export default class Animation {
 		return this.timing.duration;
 	}
 
-	init() {
-		if (this._initialized)
+	init(reset = false) {
+		if (this._initialized && !reset)
 			return;
 		this._initialized = true;
 

src/tests/properties.test.js

@@ -3,7 +3,7 @@ import TestTicker from '../timing/testticker.js';
 import { animate, timeline } from '../chnobli.js';
 import { el } from '../utils/testdomnode.js';
 
-describe('usecases', () => {
+describe('properties', () => {
 	it('resetprops', () => {
 		const ticker = new TestTicker;
 
@@ -25,4 +25,35 @@ describe('usecases', () => {
 		expect(div.style.transform).toBe('');
 		expect(div.style.width).toBe(undefined);
 	});
+
+	it('update timeline', () => {
+		const ticker = new TestTicker;
+
+		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');
+	});
 });

src/timeline/public.js

@@ -148,6 +148,13 @@ export default class PublicTimeline {
 		this._inner.ticker.applyTargets();
 	}
 
+	/**
+	 * Recalculates all values this should be called for example after a resize
+	 */
+	update() {
+		this._inner.update();
+	}
+
 	/**
 	 * Returns wether the timeline is set to reversed
 	 */

src/timeline/timeline.js

@@ -133,8 +133,8 @@ export default class Timeline {
 		// console.log(this.entries.map(e => e.value._props[0]));
 	}
 
-	_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;
 
@@ -161,7 +161,7 @@ export default class Timeline {
 				prevAnimation.render();
 			}
 
-			entry.value.init();
+			entry.value.init(reset);
 		}
 
 		this.timing.seek(-1);
@@ -221,6 +221,22 @@ export default class Timeline {
 			}
 		}
 	}
+
+	update() {
+		const pos = this.timing.savePosition();
+		this.timing.seek(-1);
+		this._updateTimings();
+		this.render();
+		this.ticker.applyTargets();
+		// we now have removed every style we set
+		// we should be able to recalculate everything now
+		this._initAnimations(true);
+
+		this.timing.restorePosition(pos);
+		this._updateTimings();
+		this.render();
+		this.ticker.applyTargets();
+	}
 }
 
 

src/timing/timing.js

@@ -100,6 +100,16 @@ export default class Timing {
 		}
 	}
 
+	savePosition() {
+		return {
+			progress: this._progress
+		};
+	}
+
+	restorePosition(pos) {
+		this._updateProgress(pos.progress);
+	}
+
 	setAlternate(alternate) {
 		if (this.alternate == alternate)
 			return;

src/utils/target.js

@@ -122,6 +122,9 @@ export class DomTarget extends Target {
 			const style = this._extFns.getComputedStyle(this.target);
 			const styleV = style[name];
 
+			if (typeof styleV === 'undefined' || styleV === null)
+				return styleV;
+
 			try {
 				const value = Value.parse(styleV);
 				this.styleValues.set(name, value);

src/utils/testdomnode.js

@@ -1,5 +1,7 @@
 export default class TestDomNode {
 	constructor() {
+		this.computedStyle = {};
+
 		this.style = {
 			setProperty: (k, v) => {
 				this.style[k] = v;
@@ -10,8 +12,12 @@ export default class TestDomNode {
 		};
 	}
 
+	syncStyles() {
+		this.computedStyle = { ...this.style };
+	}
+
 	static getComputedStyle(el) {
-		return el.style;
+		return el.computedStyle;
 	}
 
 	__simulatedDom__() {}