chnobli 0.1.8 → 0.1.9

package/src/target/ObjectTarget.ts

@@ -0,0 +1,124 @@
+import StyleValue from '../values/StyleValue.js';
+import Value from '../values/Value.js';
+import { Target } from './Target.js';
+
+export default class ObjectTarget implements Target {
+	private target: Record<string, any>;
+
+	// private _extFns: ExternalFunctions;
+
+	// private transformValues: Map<string, (Value | null)[]>;
+	private styleValues: Map<string, StyleValue | undefined>;
+	// private values: Map<string, Value>;
+
+	/**
+	 * target a dom node or svg
+	 *
+	 * extFns: {getComputedStyle, getRootElement}
+	 */
+	constructor(target: Record<string, any>) {
+		this.target = target;
+
+		this.styleValues = new Map();
+		// this.values = new Map();
+	}
+
+	inner() {
+		return this.target;
+	}
+
+	type() {
+		return 'object';
+	}
+
+	getValue(name: string): Value | null {
+		// return this.values.get(name) ?? null;
+		throw new Error('not supported');
+	}
+
+	setValue(name: string, value: Value) {
+		// this.values.set(name, value);
+		throw new Error('not supported');
+	}
+
+	removeValue(name: string) {
+		// this.values.delete(name);
+		throw new Error('not supported');
+	}
+
+	getTransformValue(name: string): Value | null {
+		throw new Error('not supported');
+	}
+
+	setTransformValue(name: string, value: Value) {
+		throw new Error('not supported');
+	}
+
+	removeTransformValue(name: string) {
+		throw new Error('not supported');
+	}
+
+	getStyleValue(name: string): StyleValue | null {
+		const v = this.styleValues.get(name) ?? null;
+
+		if (v !== null) return v;
+
+		const styleV = this.target[name];
+		if (typeof styleV === 'undefined' || styleV === null) {
+			return styleV;
+		}
+
+		try {
+			const value = StyleValue.parse(styleV);
+			this.styleValues.set(name, value);
+
+			return value;
+		} catch (e) {
+			console.log('could not parse value', styleV);
+			return v;
+		}
+	}
+
+	setStyleValue(name: string, value: StyleValue): void {
+		this.styleValues.set(name, value);
+	}
+
+	removeStyleValue(name: string): void {
+		this.styleValues.set(name, undefined);
+	}
+
+	hasClass(name: string): boolean {
+		throw new Error('not supported');
+	}
+
+	addClass(name: string): void {
+		throw new Error('not supported');
+	}
+
+	removeClass(name: string): void {
+		throw new Error('not supported');
+	}
+
+	unifyValues(name: string, a: Value, b: Value): [Value, Value] {
+		if (a.unit === b.unit) return [a, b];
+
+		if (!a.unit && b.unit) a.unit = b.unit;
+
+		if (!b.unit && a.unit) b.unit = a.unit;
+
+		return [a, b];
+	}
+
+	apply() {
+		// style
+		for (const [k, v] of this.styleValues.entries()) {
+			if (v === undefined) {
+				console.log('delete', k);
+				delete this.target[k];
+				this.styleValues.delete(k);
+			} else {
+				this.target[k] = v.toMixed();
+			}
+		}
+	}
+}

package/src/target/Target.ts

@@ -1,6 +1,15 @@
 import Value from '../values/Value.js';
 import DomTarget from './DomTarget.js';
 import StyleValue from '../values/StyleValue.js';
+import type TestDomNode from './TestDomNode.js';
+import ObjectTarget from './ObjectTarget.js';
+
+export type Targets = AnimationTarget | AnimationTarget[];
+export type AnimationTarget =
+	| HTMLElement
+	| SVGElement
+	| TestDomNode
+	| Record<string, any>;
 
 export function newTarget(target: any): Target {
 	if (typeof window === 'undefined') {
@@ -19,6 +28,10 @@ export function newTarget(target: any): Target {
 		}
 	}
 
+	if (typeof target === 'object' && target !== null) {
+		return new ObjectTarget(target);
+	}
+
 	throw new Error('unknown target');
 }
 

package/src/tests/properties.test.ts

@@ -2,7 +2,7 @@ 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 { responsive, curve, fromTo } from '../utils/utils.js';
 import { el } from '../target/TestDomNode.js';
 import { timeout } from 'fire/utils';
 
@@ -180,4 +180,54 @@ describe('properties', () => {
 			'translate3d(50.000px,20.000px,0.000px)',
 		);
 	});
+
+	it('object-target', () => {
+		const ticker = new TestTicker();
+
+		const obj: { x: number; width?: number } = {
+			x: 0,
+		};
+		const tl = timeline()
+			.add(obj, {
+				x: 100,
+				width: fromTo(0, 100),
+				duration: 10,
+			})
+			.play();
+
+		ticker.run(5);
+		expect(obj.x).toBe(50);
+		expect(obj.width).toBe(50);
+
+		ticker.run();
+		expect(obj.x).toBe(100);
+		expect(obj.width).toBe(100);
+
+		tl.reverse();
+		tl.play();
+		ticker.run();
+		expect(obj.x).toBe(undefined);
+		expect(obj.width).toBe(undefined);
+	});
+
+	it('reset values', () => {
+		const ticker = new TestTicker();
+
+		const div = el();
+		div.computedStyle.width = '0px';
+		const tl = timeline()
+			.add(div, {
+				width: 100,
+				duration: 10,
+			})
+			.play();
+
+		ticker.run();
+		expect(div.style.width).toBe('100.000px');
+
+		tl.reverse();
+		tl.play();
+		ticker.run();
+		expect(div.style.width).toBe(undefined);
+	});
 });

package/src/timeline/Nested.ts

@@ -1,5 +1,5 @@
 import { takeProp } from '../utils/internal.js';
-import Timeline from './TimeLine.js';
+import Timeline from './Timeline.js';
 import { timelineAdd } from './public.js';
 
 export default class NestedTimeline {

package/src/timeline/{TimeLine.ts → Timeline.ts}

@@ -24,7 +24,7 @@ type Entry = {
  * Timeline is the most versatile class
  *
  * A timeline can contain multiple animation, ordered one after the other or
- * offset.
+ * by an offset.
  */
 export default class Timeline {
 	timing: Timing;
@@ -49,6 +49,8 @@ export default class Timeline {
 	*/
 	constructor(props: Record<string, any> = {}) {
 		const nProps = {
+			// duration here is not important since it will be calculated
+			// based on the animations that get added
 			duration: 1000,
 			ease: parseEase(takeProp(props, 'ease', null)),
 			repeat: parseRepeat(takeProp(props, 'repeat', false)),
@@ -145,6 +147,21 @@ export default class Timeline {
 		this._updateTimings();
 	}
 
+	/**
+	 * Returns the position of a label
+	 *
+	 * needs to be initialized
+	 */
+	labelPosition(label: string): number {
+		const entry = this.entries.find(e => {
+			return e.type === 'label' && e.value === label;
+		});
+
+		if (!entry) throw new Error('could not find label ' + label);
+
+		return entry.start! / this.timing.duration;
+	}
+
 	init() {
 		if (this._initialized) return;
 		this._initialized = true;
@@ -254,6 +271,9 @@ export default class Timeline {
 		}
 	}
 
+	/**
+	 * Updates the timings of all animations
+	 */
 	_updateTimings() {
 		this._renderQueue = {
 			upcoming: [],

package/src/timeline/public.ts

@@ -1,19 +1,49 @@
 import { takeProp } from '../utils/internal.js';
-import Timeline from './TimeLine.js';
-import { STATE_ENDED } from '../timing/Timing.js';
-import { callStagger } from '../stagger/stagger.js';
+import Timeline from './Timeline.js';
+import Timing, {
+	STATE_BEFORE,
+	STATE_ENDED,
+	TimingProps,
+} from '../timing/Timing.js';
+import Stagger, { callStagger } from '../stagger/stagger.js';
 import Events from '../utils/Events.js';
 import ResponsiveEvent from '../responsive/ResponsiveEvent.js';
 import NestedTimeline from './Nested.js';
+import { Targets } from '../chnobli.js';
 
 const STATE_PAUSED = 0;
 const STATE_RENDER_ONCE = 1;
-const STATE_PLAYING = 2;
+const STATE_SEEK = 2;
+const STATE_PLAYING = 3;
 
 export type Responsive = {
 	responsive: () => void;
 };
 
+export type TimelineProps = {
+	// default properties for all animations
+	defaults?: Record<string, any>;
+
+	// make the timeline responsive default is true
+	// this means the timeline will update on resize
+	responsive?: boolean;
+
+	// ease
+	ease?: (t: number) => number;
+
+	// smoothSeek
+	smoothSeek?: SmoothSeekValue;
+
+	// repeat
+	// alternate
+	// reversed
+
+	// other properties
+	[key: string]: any;
+};
+
+export type Offset = number | string | Stagger<number | string>;
+
 export default class PublicTimeline {
 	/**
 	 * @ignore
@@ -27,14 +57,17 @@ export default class PublicTimeline {
 	_inner: Timeline;
 
 	private _events: Events;
+	private _triggeredStart: boolean;
 
 	private _state: number;
 	private _renderedOnce: boolean;
 	private _runningTicker: any;
 	private _responsiveBlocks: { responsive: () => void }[];
 	private _responsiveEvent: any;
+	private _smoothSeek: SmoothSeek | null;
+	private _seekTo: number;
 
-	constructor(props: Record<string, any> = {}) {
+	constructor(props: TimelineProps = {}) {
 		this._defaults = takeProp(props, 'defaults', {});
 		this._responsive = takeProp(props, 'responsive', true);
 
@@ -43,10 +76,16 @@ export default class PublicTimeline {
 		if ('duration' in props)
 			throw new Error('a timeline does not accept a duration');
 
+		this._smoothSeek = parseSmoothSeek(
+			takeProp<SmoothSeekValue>(props, 'smoothSeek', undefined),
+		);
+		this._seekTo = 0;
+
 		this._inner = new Timeline(props);
 
 		// 'start', 'end'
 		this._events = new Events();
+		this._triggeredStart = false;
 
 		this._state = STATE_PAUSED;
 		this._renderedOnce = false;
@@ -70,9 +109,10 @@ export default class PublicTimeline {
 
 	/**
 	 * Set's properties
+	 *
 	 * offset can be staggered, a number, a label or a string `+=10`
 	 */
-	set(targets: any, props: Record<string, any>, offset = null): this {
+	set(targets: Targets, props: Record<string, any>, offset?: Offset): this {
 		// for the moment let's just add as usual but set the duration to 0
 		return this.add(targets, { ...props, duration: 0 }, offset);
 	}
@@ -82,14 +122,14 @@ export default class PublicTimeline {
 	 *
 	 * offset can be staggered, a number, a label or a string `+=10`
 	 */
-	add(targets: any, props: Record<string, any>, offset = null): this {
+	add(targets: Targets, props: Record<string, any>, offset?: Offset): this {
 		timelineAdd(this, targets, props, offset);
 
 		return this;
 	}
 
 	/**
-	 * Adds a label at to the current nOffse
+	 * Adds a label at to the current nOffset
 	 *
 	 * This label can then be used in offsets
 	 */
@@ -170,13 +210,14 @@ export default class PublicTimeline {
 	seekMs(ms: number) {
 		this._inner.init();
 
-		this._inner.seekMs(ms);
-
-		if (this._state !== STATE_PLAYING) this._state = STATE_RENDER_ONCE;
-
-		this._startTicker();
+		this.seek(this._inner.timing.normalizeMs(ms));
 	}
 
+	// todo maybe we should have two functions
+	// seek
+	// and setPosition
+	// seek would include reverse but setPosition would not
+
 	/**
 	 * Seeks to a normalized position in the timeline
 	 *
@@ -185,19 +226,37 @@ export default class PublicTimeline {
 	seek(pos: number) {
 		this._inner.init();
 
-		this._inner.seek(pos);
+		if (this._smoothSeek) {
+			this._smoothSeek.update(this._inner.timing.positionLinear(), pos);
+
+			if (this._state !== STATE_PLAYING) this._state = STATE_SEEK;
+		} else {
+			// this._inner.seek(pos);
+			this._seekTo = pos;
 
-		if (this._state !== STATE_PLAYING) this._state = STATE_RENDER_ONCE;
+			if (this._state !== STATE_PLAYING) this._state = STATE_RENDER_ONCE;
+		}
 
 		this._startTicker();
 	}
 
+	/**
+	 * Returns the position of a label
+	 */
+	labelPosition(label: string): number {
+		this._inner.init();
+
+		return this._inner.labelPosition(label);
+	}
+
 	// seek in Range (useful for scroll timelines)
 	// seek(startOffset, endOffset, pos)
 
 	/**
 	 * Resets the current timeline to the start
 	 * without changing anything
+	 *
+	 * this operation is not smooth use seek 0 if you wan't that
 	 */
 	reset() {
 		this._inner.seek(0);
@@ -244,6 +303,8 @@ export default class PublicTimeline {
 	 */
 	reverse() {
 		this._inner.timing.reverse();
+
+		// todo does this work with smooth seek?
 	}
 
 	/**
@@ -280,6 +341,13 @@ export default class PublicTimeline {
 		this._inner = null;
 	}
 
+	_maybeTriggerEndEvent() {
+		if (this._state !== STATE_PLAYING) return;
+
+		this._events.trigger('end');
+		this._triggeredStart = false;
+	}
+
 	/**
 	 * @ignore
 	 */
@@ -288,48 +356,45 @@ export default class PublicTimeline {
 
 		this._inner.init();
 
+		const timingEnded = () => this._inner.timing.state >= STATE_ENDED;
+		const smoothSeekEnded = () =>
+			!this._smoothSeek || this._smoothSeek.state >= STATE_ENDED;
+
 		this._runningTicker = this._inner.ticker.add(change => {
-			if (this._inner.timing.state >= STATE_ENDED) {
-				if (!this._renderedOnce) {
-					this._renderedOnce = true;
-					this._inner.render();
+			if (!this._triggeredStart) {
+				// todo check that we are at the start
+				if (this._inner.timing.state <= STATE_BEFORE) {
+					this._events.trigger('start');
+					this._triggeredStart = true;
 				}
-
-				if (this._state === STATE_PLAYING) this._events.trigger('end');
-
-				this._state = STATE_PAUSED;
-				this._stopTicker();
-				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);
-
-			// todo when we add smooth seeks we need to update this
+			const allowSmoothSeek =
+				this._state === STATE_PLAYING || this._state === STATE_SEEK;
+			if (
+				allowSmoothSeek &&
+				this._smoothSeek &&
+				this._smoothSeek.state < STATE_ENDED
+			) {
+				this._smoothSeek.advance(change);
+				this._inner.seek(this._smoothSeek.value);
+			} else if (this._state === STATE_RENDER_ONCE) {
+				this._inner.seek(this._seekTo);
+			} else if (this._state === STATE_PLAYING) {
+				this._inner.advance(change);
+			}
 
 			this._inner.render();
 
-			if (this._inner.timing.state >= STATE_ENDED) {
-				if (this._state === STATE_PLAYING) this._events.trigger('end');
+			// we rendered once let's stop
+			const renderOnce = this._state === STATE_RENDER_ONCE;
 
-				this._state = STATE_PAUSED;
-				this._stopTicker();
-				return;
-			}
+			if (renderOnce || (timingEnded() && smoothSeekEnded())) {
+				this._maybeTriggerEndEvent();
 
-			// we rendered once let's stop
-			if (this._state === STATE_RENDER_ONCE) {
 				this._state = STATE_PAUSED;
 				this._stopTicker();
+				return;
 			}
 		});
 	}
@@ -384,8 +449,64 @@ export function timelineAdd(
 			nProps[prop] = callStagger(nProps[prop], i, targets.length);
 		}
 
-		const nOffset = callStagger(offset, i);
+		const nOffset = callStagger(offset, i, targets.length);
 
 		tl._inner.add(target, nProps, nOffset, i);
 	}
 }
+
+export type SmoothSeekValue =
+	| number
+	| undefined
+	| { duration: number; ease?: (t: number) => number };
+
+/**
+ * Smooth seek
+ *
+ * can either just be a number (duration) or an object { duration, ease }
+ */
+function parseSmoothSeek(smoothSeek: SmoothSeekValue): SmoothSeek | null {
+	if (!smoothSeek) return null;
+
+	if (typeof smoothSeek === 'number') {
+		return new SmoothSeek({
+			duration: smoothSeek,
+		});
+	}
+
+	return new SmoothSeek({
+		duration: smoothSeek.duration,
+		ease: smoothSeek?.ease,
+	});
+}
+
+class SmoothSeek {
+	timing: Timing;
+	from: number;
+	to: number;
+
+	constructor(timing: TimingProps) {
+		this.timing = new Timing(timing);
+		this.timing.seek(1);
+		this.from = 0;
+		this.to = 0;
+	}
+
+	update(from: number, to: number) {
+		this.from = from;
+		this.to = to;
+		this.timing.seek(0);
+	}
+
+	advance(change: number) {
+		this.timing.advance(change);
+	}
+
+	get value(): number {
+		return this.from + (this.to - this.from) * this.timing.position;
+	}
+
+	get state(): number {
+		return this.timing.state;
+	}
+}

package/src/timing/Timing.ts

@@ -12,6 +12,14 @@ export type Position = {
 	progress: number;
 };
 
+export type TimingProps = {
+	duration: number;
+	ease?: (t: number) => number;
+	repeat?: number;
+	alternate?: boolean;
+	reversed?: boolean;
+};
+
 /**
  * This class handles everything timing related
  *
@@ -58,7 +66,7 @@ export default class Timing {
 		alternate
 	}
 	*/
-	constructor(props: Record<string, any>) {
+	constructor(props: TimingProps) {
 		// these vars are only readonly
 		// use functions to update them
 
@@ -90,6 +98,7 @@ export default class Timing {
 	}
 
 	positionMs() {
+		// todo should this not return pos * duration?
 		return this.position * this.iterDuration;
 	}
 
@@ -132,6 +141,31 @@ export default class Timing {
 		}
 
 		this._updateProgress(ms / this.iterDuration);
+
+		// return this.seek(this.normalizeMs(ms));
+	}
+
+	normalizeMs(ms: number) {
+		if (this.iterDuration <= 0) {
+			return Math.sign(ms);
+		}
+
+		const pos = ms / this.iterDuration;
+
+		if (this.isFinite()) {
+			return pos / (this.repeat + 1);
+		}
+
+		return pos;
+	}
+
+	// todo how to call this
+	positionLinear(): number {
+		if (this.isFinite()) {
+			return this._progress / (this.repeat + 1);
+		}
+
+		return this._progress;
 	}
 
 	// should be between 0-1 if outside might change the state
@@ -241,7 +275,7 @@ export default class Timing {
 	}
 }
 
-export function newTiming(props: Record<string, any>) {
+export function newTiming(props: Record<string, any>): Timing {
 	const nProps = {
 		duration: parseDuration(takeProp(props, 'duration', 1000)),
 		ease: parseEase(takeProp(props, 'ease', null)),
@@ -253,7 +287,7 @@ export function newTiming(props: Record<string, any>) {
 	return new Timing(nProps);
 }
 
-export function parseDuration(dur: any) {
+export function parseDuration(dur: any): number {
 	if (typeof dur !== 'number') throw new Error('duration is not a number');
 
 	dur = Math.round(dur);

package/src/utils/internal.ts

@@ -1,8 +1,11 @@
-export function takeProp(
+/**
+ * Take a property from an object and delete it from the object.
+ */
+export function takeProp<T>(
 	props: Record<string, any>,
 	name: string,
-	def: any = null,
-): any {
+	def: T,
+): T {
 	const v = props[name] ?? def;
 	delete props[name];