chnobli 0.1.1 → 0.1.3

package/src/timing/timing.js

@@ -1,12 +1,28 @@
-import Ease from './ease.js';
 import { takeProp } from '../utils/internal.js';
 
 export const STATE_BEFORE = 0;
+/// start only occurs if the current position is exactly 0 or 1 if reversed
 export const STATE_START = 1;
 export const STATE_RUNNING = 2;
+/// ended only occurs if the current position is exactly 1 or 0 if reversed
 export const STATE_ENDED = 3;
 export const STATE_AFTER = 4;
 
+/**
+ * This class handles everything timing related
+ * 
+ * It manages easing, keeps track of where we are at the moment
+ * 
+ * The most important property is position which gives the calculated position
+ * 
+ * 
+ * Timing works the same as in after effects
+ * if the duration is not at least 1ms the position is always 1 and either
+ * STATE_BEFORE or STATE_AFTER
+ * 
+ * if the duration is 1ms seek 0 or 1 will always result in position 1
+ * because it is like one frame, so it's an image
+ */
 export default class Timing {
 	// removes the relevant properties from the props
 
@@ -26,23 +42,49 @@ export default class Timing {
 	}
 	*/
 	constructor(props) {
+		// these vars are only readonly
+		// use functions to update them
+
 		this.setDuration(props.duration);
 		this.ease = props.ease ?? (t => t);
 		this.repeat = props.repeat ?? 0;
 		this.alternate = props.alternate ?? true;
 		this.reversed = props.reversed ?? false;
 
-		this.position = 0;
+		this.position = this.duration > 0 ? 0 : 1;
 		this.state = STATE_BEFORE;
 
 		// progress does not take alternation into account and has no easing
-		// this always increments up until it overflows
+		// this always increments up
 		this._progress = 0;
-		// this._reversed = false;
 
 		// scrub
 	}
 
+	positionMs() {
+		return this.position * this.iterDuration;
+	}
+
+	// todo find a better name
+	/**
+	 * Returns the position in milliseconds
+	 * 
+	 * If the state is before or after the position might be more/less than
+	 * required
+	 */
+	positionMsUnbounded() {
+		const outOfBounds = this.state <= STATE_BEFORE
+			|| this.state >= STATE_AFTER;
+
+		if (!outOfBounds)
+			return this.position * this.iterDuration;
+
+		if (this.position === 0)
+			return -1;
+		return this.position * this.iterDuration + 1;
+	}
+
+	/// iterDuration should always be >=0
 	setDuration(iterDuration) {
 		this.iterDuration = iterDuration;
 
@@ -60,9 +102,23 @@ export default class Timing {
 		if (this.state >= STATE_AFTER)
 			return;
 
+		if (this.iterDuration <= 0) {
+			this._updateProgress(1);
+			return;
+		}
+
 		this._updateProgress(this._progress + change / this.iterDuration);
 	}
 
+	seekMs(ms) {
+		if (this.iterDuration <= 0) {
+			this._updateProgress(Math.sign(ms));
+			return;
+		}
+
+		this._updateProgress(ms / this.iterDuration);
+	}
+
 	// should be between 0-1 if outside might change the state
 	seek(pos) {
 		if (this.repeat <= 0) {
@@ -73,19 +129,73 @@ export default class Timing {
 		}
 	}
 
+	savePosition() {
+		return {
+			progress: this._progress
+		};
+	}
+
+	restorePosition(pos) {
+		this._updateProgress(pos.progress);
+	}
+
+	setAlternate(alternate) {
+		if (this.alternate == alternate)
+			return;
+
+		// make sure the reversed is updated according to the current inversion
+		this.reversed = alternate == this._shouldInvert();
+		this.alternate = alternate;
+	}
+
 	reverse() {
 		this.reversed = !this.reversed;
 
-		let p = Math.floor(this._progress);
-		p = p + (1 - (this._progress - p));
+		const wrapAround = p => {
+			if (this.repeat > -1)
+				return p % (this.repeat + 1);
+			return p;
+		};
+
+		let p;
+		if (this.state <= STATE_BEFORE) {
+			p = 2;
+		} else if (this.state >= STATE_AFTER) {
+			p = -1;
+		// check if the values should be reversed
+		} else if (this.reversed != this._shouldInvert()) {
+			let decimal = 1 - this._progress % 1;
+			p = wrapAround(Math.floor(this._progress) + decimal);
+		} else {
+			p = wrapAround(this._progress);
+		}
 
 		this._updateProgress(p);
 	}
 
+	_shouldInvert() {
+		return this.alternate && Math.floor(this._progress) % 2 === 1;
+	}
+
 	_updateProgress(newProgress) {
+		// if duration is zero the position is always 1
+		// and the state is either BEFORE or AFTER
+		if (this.iterDuration <= 0) {
+			newProgress = Math.sign(newProgress);
+			this._progress = newProgress;
+			this.position = 1;
+
+			if (newProgress < 0)
+				this.state = STATE_BEFORE;
+			else
+				this.state = STATE_AFTER;
+
+			return;
+		}
+
 		this._progress = newProgress;
 
-		// since infite repeat can never end let's ignore it
+		// since infinite repeat can never end let's ignore it
 		if (this.repeat > -1) {
 			const end = this.repeat + 1;
 			if (this._progress > end) {
@@ -108,21 +218,12 @@ export default class Timing {
 			this.state = STATE_START;
 		}
 
-
-		let reversed = this.reversed;
-
-		// calc if we are in a reversed iteration or not
-		if (this.alternate) {
-			let shouldInverse = Math.floor(this._progress) % 2 === 1;
-			if (shouldInverse)
-				reversed = !reversed;
-		}
-
 		// now calculate the position
-
 		this.position = this._progress % 1;
 
-		if (reversed)
+		// calc if we are in a reversed iteration or not
+		// and we are we should invert the position
+		if (this.reversed != this._shouldInvert())
 			this.position = 1 - this.position;
 
 		this.position = this.ease(this.position);
@@ -145,10 +246,9 @@ export function parseDuration(dur) {
 	if (typeof dur !== 'number')
 		throw new Error('duration is not a number');
 
-	// convert s to ms
 	dur = Math.round(dur);
 
-	return Math.max(dur, 1);
+	return Math.max(dur, 0);
 }
 
 export function parseEase(ease) {

package/src/utils/events.js

@@ -32,4 +32,8 @@ export default class Events {
 			return;
 		list.trigger(...args);
 	}
+
+	destroy() {
+		this.listeners = new Map;
+	}
 }

package/src/utils/motionpath.js

@@ -8,6 +8,9 @@ function catmullRom(p0, p1, p2, p3, t, p1Tension, p2Tension) {
 		t3 + (-3 * p1 + 3 * p2 - 2 * v0 - v1) * t2 + v0 * t + p1;
 }
 
+/**
+ * Calculates a curve between different points
+ */
 export function curve(points, tension = 1, opts = {}) {
 	if (points.length <= 1)
 		throw new Error('curve expects at least 2 points');

package/src/utils/utils.js

@@ -2,19 +2,37 @@ import { curve } from './motionpath.js';
 
 export { curve };
 
+/**
+ * Explicitly tells a property to animate the to value
+ */
 export function to(to) {
 	return { to };
 }
 
+/**
+ * Explicitly tells a property to animate the from value
+ */
 export function from(from) {
 	return { from };
 }
 
+/**
+ * Explicitly tells a property to animate with the from and to values
+ */
 export function fromTo(from, to) {
 	return { from, to };
 }
 
-// converts some element 
+/**
+ * makes a value reactive to `Timeline::update` calls or resizes
+ */
+export function responsive(fn) {
+	return { responsive: fn };
+}
+
+/**
+ * Converts an element with text into span with chars
+ */
 export function chars(element) {
 	if (element.dataset.processedChars)
 		return Array.from(element.children);
@@ -34,7 +52,9 @@ export function chars(element) {
 	});
 }
 
-// get the offset to the page
+/**
+ * get the offset to the current page page
+ */
 export function pageOffset(el) {
 	if ('offsetTop' in el) {
 		return {

package/src/values/colorvalue.js

@@ -0,0 +1,167 @@
+import { COLORS } from './defaultcolors.js';
+
+export default class ColorValue {
+	// [r, g, b, a?]
+	constructor(v) {
+		if (v.length === 3)
+			v = [...v, 1];
+
+		// always [r, g, b, a]
+		this.values = v;
+	}
+
+	static parse(v) {
+		if (Array.isArray(v)) {
+			if (v.length < 3 || v.length > 4)
+				throw new Error('expected array [r, g, b, a]');
+
+			return new ColorValue(v);
+		}
+
+		if (typeof v !== 'string')
+			throw new Error('expected a string or an array');
+
+		v = v.trim();
+
+		if (v.startsWith('#'))
+			return new ColorValue(parseHex(v.substring(1)));
+		if (v.startsWith('rgb'))
+			return new ColorValue(parseRgb(v));
+		if (v.startsWith('hsl'))
+			return new ColorValue(parseHsl(v));
+
+		if (v in COLORS)
+			return new ColorValue(COLORS[v]);
+
+		throw new Error('unknown color value ' + v);
+	}
+
+	// v needs to be a string
+	static mightBeAColor(v) {
+		v = v.trim();
+
+		return v.startsWith('#')
+			|| v.startsWith('rgb')
+			|| v.startsWith('hsl')
+			|| v in COLORS;
+	}
+
+	clone() {
+		return new ColorValue(this.values.slice());
+	}
+
+	toString() {
+		const [r, g, b, a] = this.values;
+		return `rgba(${[r, g, b].map(v => Math.round(v)).join(', ')}, ${
+			a.toFixed(3)
+		})`;
+	}
+}
+
+// hex without the hash
+function parseHex(hex) {
+	if (hex.length !== 3 && hex.length !== 6 && hex.length !== 8)
+		throw new Error('unknown hex value ' + hex);
+
+	// Convert 3-character hex to 6-character hex
+	if (hex.length === 3)
+		hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+
+	// Parse the hex values
+	const r = parseInt(hex.substring(0, 2), 16);
+	const g = parseInt(hex.substring(2, 4), 16);
+	const b = parseInt(hex.substring(4, 6), 16);
+	let a = 255;
+
+	if (hex.length === 8)
+		a = parseInt(hex.substring(6, 8), 16);
+
+	return [r, g, b, a / 255];
+}
+
+// rgb needs to start with rgb
+function parseRgb(rgb) {
+	const rgba = rgb.startsWith('rgba');
+	// remove the function name
+	rgb = rgb.substring(3 + rgba);
+	if (!rgb.startsWith('(') && !rgb.endsWith(')'))
+		throw new Error('invalid rgb function ' + rgb);
+
+	rgb = rgb.substring(1, rgb.length - 1);
+	const vals = rgb.split(',');
+
+	if ((rgba && vals.length !== 4) || vals.length !== 3)
+		throw new Error('invalid rgb function ' + rgb);
+
+	const r = parseInt(vals[0].trim());
+	const g = parseInt(vals[1].trim());
+	const b = parseInt(vals[2].trim());
+	const a = rgba ? parseFloat(vals[3].trim()) : 1;
+
+	return [r, g, b, a];
+}
+
+// hsl needs to start with hsl
+function parseHsl(hsl) {
+	const hsla = hsl.startsWith('hsla');
+	// Remove the function name
+	hsl = hsl.substring(3 + hsla);
+	if (!hsl.startsWith('(') || !hsl.endsWith(')'))
+		throw new Error('invalid hsl function ' + hsl);
+
+	hsl = hsl.substring(1, hsl.length - 1);
+	let vals = hsl.split(',');
+
+	if ((hsla && vals.length !== 4) || (!hsla && vals.length !== 3))
+		throw new Error('invalid hsl function ' + hsl);
+
+	vals = vals.map(v => v.trim());
+
+	if (!vals[1].endsWith('%') && !vals[2].endsWith('%'))
+		throw new Error('invalid hsl function ' + hsl);
+
+	const h = parseInt(vals[0]);
+	const s = parseInt(vals[1].substring(0, vals[1].length - 1));
+	const l = parseInt(vals[2].substring(0, vals[2].length - 1));
+	const a = hsla ? parseFloat(vals[3]) : 1;
+
+	return hslToRgba([h, s, l, a]);
+}
+
+/// expects [h, s, l, a]
+function hslToRgba(hsla) {
+	let [h, s, l, a] = hsla;
+
+	// normalize
+	h /= 360;
+	s /= 100;
+	l /= 100;
+
+	let r, g, b;
+	if (s === 0) {
+		r = g = b = l;
+	} else {
+		const q = l < .5 ? l * (1 + s) : l + s - l * s;
+		const p = 2 * l - q;
+		r = Math.round(hueToRgb(p, q, h + 1 / 3) * 255, 0);
+		g = Math.round(hueToRgb(p, q, h) * 255, 0);
+		b = Math.round(hueToRgb(p, q, h - 1 / 3) * 255, 0);
+	}
+
+	return [r, g, b, a];
+}
+
+function hueToRgb(p, q, t) {
+	if (t < 0)
+		t += 1;
+	if (t > 1)
+		t -= 1;
+
+	if (t < 1 / 6)
+		return p + (q - p) * 6 * t;
+	if (t < 1 / 2)
+		return q;
+	if (t < 2 / 3)
+		return p + (q - p) * (2 / 3 - t) * 6;
+	return p;
+}

package/src/values/defaultcolors.js

@@ -0,0 +1,148 @@
+export const COLORS = {
+	black: [0, 0, 0],
+	silver: [192, 192, 192],
+	gray: [128, 128, 128],
+	white: [255, 255, 255],
+	maroon: [128, 0, 0],
+	red: [255, 0, 0],
+	purple: [128, 0, 128],
+	fuchsia: [255, 0, 255],
+	green: [0, 128, 0],
+	lime: [0, 255, 0],
+	olive: [128, 128, 0],
+	yellow: [255, 255, 0],
+	navy: [0, 0, 128],
+	blue: [0, 0, 255],
+	teal: [0, 128, 128],
+	aqua: [0, 255, 255],
+	aliceblue: [240, 248, 255],
+	antiquewhite: [250, 235, 215],
+	aquamarine: [127, 255, 212],
+	azure: [240, 255, 255],
+	beige: [245, 245, 220],
+	bisque: [255, 228, 196],
+	blanchedalmond: [255, 235, 205],
+	blueviolet: [138, 43, 226],
+	brown: [165, 42, 42],
+	burlywood: [222, 184, 135],
+	cadetblue: [95, 158, 160],
+	chartreuse: [127, 255, 0],
+	chocolate: [210, 105, 30],
+	coral: [255, 127, 80],
+	cornflowerblue: [100, 149, 237],
+	cornsilk: [255, 248, 220],
+	crimson: [220, 20, 60],
+	cyan: [0, 255, 255],
+	darkblue: [0, 0, 139],
+	darkcyan: [0, 139, 139],
+	darkgoldenrod: [184, 134, 11],
+	darkgray: [169, 169, 169],
+	darkgreen: [0, 100, 0],
+	darkgrey: [169, 169, 169],
+	darkkhaki: [189, 183, 107],
+	darkmagenta: [139, 0, 139],
+	darkolivegreen: [85, 107, 47],
+	darkorange: [255, 140, 0],
+	darkorchid: [153, 50, 204],
+	darkred: [139, 0, 0],
+	darksalmon: [233, 150, 122],
+	darkseagreen: [143, 188, 143],
+	darkslateblue: [72, 61, 139],
+	darkslategray: [47, 79, 79],
+	darkslategrey: [47, 79, 79],
+	darkturquoise: [0, 206, 209],
+	darkviolet: [148, 0, 211],
+	deeppink: [255, 20, 147],
+	deepskyblue: [0, 191, 255],
+	dimgray: [105, 105, 105],
+	dimgrey: [105, 105, 105],
+	dodgerblue: [30, 144, 255],
+	firebrick: [178, 34, 34],
+	floralwhite: [255, 250, 240],
+	forestgreen: [34, 139, 34],
+	gainsboro: [220, 220, 220],
+	ghostwhite: [248, 248, 255],
+	gold: [255, 215, 0],
+	goldenrod: [218, 165, 32],
+	greenyellow: [173, 255, 47],
+	honeydew: [240, 255, 240],
+	hotpink: [255, 105, 180],
+	indianred: [205, 92, 92],
+	indigo: [75, 0, 130],
+	ivory: [255, 255, 240],
+	khaki: [240, 230, 140],
+	lavender: [230, 230, 250],
+	lavenderblush: [255, 240, 245],
+	lawngreen: [124, 252, 0],
+	lemonchiffon: [255, 250, 205],
+	lightblue: [173, 216, 230],
+	lightcoral: [240, 128, 128],
+	lightcyan: [224, 255, 255],
+	lightgoldenrodyellow: [250, 250, 210],
+	lightgray: [211, 211, 211],
+	lightgreen: [144, 238, 144],
+	lightgrey: [211, 211, 211],
+	lightpink: [255, 182, 193],
+	lightsalmon: [255, 160, 122],
+	lightseagreen: [32, 178, 170],
+	lightskyblue: [135, 206, 250],
+	lightslategray: [119, 136, 153],
+	lightslategrey: [119, 136, 153],
+	lightsteelblue: [176, 196, 222],
+	lightyellow: [255, 255, 224],
+	limegreen: [50, 205, 50],
+	linen: [250, 240, 230],
+	magenta: [255, 0, 255],
+	mediumaquamarine: [102, 205, 170],
+	mediumblue: [0, 0, 205],
+	mediumorchid: [186, 85, 211],
+	mediumpurple: [147, 112, 219],
+	mediumseagreen: [60, 179, 113],
+	mediumslateblue: [123, 104, 238],
+	mediumspringgreen: [0, 250, 154],
+	mediumturquoise: [72, 209, 204],
+	mediumvioletred: [199, 21, 133],
+	midnightblue: [25, 25, 112],
+	mintcream: [245, 255, 250],
+	mistyrose: [255, 228, 225],
+	moccasin: [255, 228, 181],
+	navajowhite: [255, 222, 173],
+	oldlace: [253, 245, 230],
+	olivedrab: [107, 142, 35],
+	orange: [255, 165, 0],
+	orangered: [255, 69, 0],
+	orchid: [218, 112, 214],
+	palegoldenrod: [238, 232, 170],
+	palegreen: [152, 251, 152],
+	paleturquoise: [175, 238, 238],
+	palevioletred: [219, 112, 147],
+	papayawhip: [255, 239, 213],
+	peachpuff: [255, 218, 185],
+	peru: [205, 133, 63],
+	pink: [255, 192, 203],
+	plum: [221, 160, 221],
+	powderblue: [176, 224, 230],
+	rosybrown: [188, 143, 143],
+	royalblue: [65, 105, 225],
+	saddlebrown: [139, 69, 19],
+	salmon: [250, 128, 114],
+	sandybrown: [244, 164, 96],
+	seagreen: [46, 139, 87],
+	seashell: [255, 245, 238],
+	sienna: [160, 82, 45],
+	skyblue: [135, 206, 235],
+	slateblue: [106, 90, 205],
+	slategray: [112, 128, 144],
+	slategrey: [112, 128, 144],
+	snow: [255, 250, 250],
+	springgreen: [0, 255, 127],
+	steelblue: [70, 130, 180],
+	tan: [210, 180, 140],
+	thistle: [216, 191, 216],
+	tomato: [255, 99, 71],
+	turquoise: [64, 224, 208],
+	violet: [238, 130, 238],
+	wheat: [245, 222, 179],
+	whitesmoke: [245, 245, 245],
+	yellowgreen: [154, 205, 50]
+};