chnobli 0.1.2 → 0.1.3

package/src/values/stylevalue.js

@@ -0,0 +1,148 @@
+import Value from './value.js';
+import ColorValue from './colorvalue.js';
+
+const AT_THE_END_VALUES = ['none', 'hidden'];
+
+/**
+ * A value from a style property
+ * 
+ * might be a textual representation like none|auto|block|var(--abc)
+ * might be a value with unit or not
+ * might be multiple values `10 20px 4rem`
+ * 
+ * values like hidden|none|null|undefined are market as at the end
+ * which means they should be set at the end
+ */
+export default class StyleValue {
+	/**
+	 * Creates a style value
+	 *
+	 * ## value must be one of the following
+	 * - string (meaning this is of kind text)
+	 * - number (meaning this is of kind values with one value)
+	 * - array (meaning this is of kind values and each array element needs to
+	 * be a Value)
+	 * - ColorValue
+	 */
+	constructor(value) {
+		if (typeof value === 'string') {
+			this.kind = 'text';
+			value = value.trim();
+		} else if (typeof value === 'number') {
+			this.kind = 'values';
+			value = [Value.parse(value)];
+		} else if (Array.isArray(value)) {
+			this.kind = 'values';
+		} else if (value instanceof ColorValue) {
+			this.kind = 'color';
+		} else {
+			throw new Error('unknown style value ' + value);
+		}
+
+		this.values = value;
+
+		/**
+		 * If this is true the value should be set at the end of a animation
+		 * this only works with kind === text
+		 */
+		this.textAtTheEnd = this.kind === 'text'
+			? AT_THE_END_VALUES.includes(this.values)
+			: false;
+	}
+
+
+	static parse(v) {
+		if (typeof v === 'number')
+			return new StyleValue(v);
+
+		if (Array.isArray(v)) {
+			const val = v.map(v => Value.parse(v));
+			return new StyleValue(val);
+		}
+
+		if (typeof v !== 'string')
+			throw new Error('expected a string as style value ' + v);
+
+		// let's first try to make it a color
+		if (ColorValue.mightBeAColor(v))
+			return new StyleValue(ColorValue.parse(v));
+
+		const split = v.split(' ').map(v => v.trim()).filter(v => !!v);
+		if (split.length === 0)
+			throw new Error('style value cannot be empty');
+
+		if (split.length === 1) {
+			try {
+				const val = Value.parse(split[0]);
+				return new StyleValue([val]);
+			} catch (e) {
+				// console.log('failed to parse first style value ', e);
+				return new StyleValue(split[0]);
+			}
+		}
+
+		return new StyleValue(split.map(v => Value.parse(v)));
+	}
+
+	/// only works if the kind is values
+	get length() {
+		if (this.kind !== 'values')
+			throw new Error('only works with kind values');
+
+		return this.values.length;
+	}
+
+	extendToLength(length) {
+		if (this.length >= length)
+			return;
+
+		this.values = Array(length).fill(this.values).flat();
+	}
+
+	/**
+	 * Throws if the this does not contain exactly one value
+	 */
+	intoValue() {
+		if (this.length !== 1)
+			throw new Error('style value does not contain only one value');
+
+		return this.values[0];
+	}
+
+	clone() {
+		if (this.kind === 'text')
+			return new StyleValue(this.values);
+
+		if (this.kind === 'color')
+			return new StyleValue(this.values.clone());
+
+		return new StyleValue(this.values.map(v => v.clone()));
+	}
+
+	/// if this is called with a text value nothing happens
+	withDefaultUnit(unit) {
+		if (this.kind === 'text')
+			return new StyleValue(this.values);
+
+		if (this.kind === 'color')
+			return new StyleValue(this.values.clone());
+
+		return new StyleValue(this.values.map(v => v.withDefaultUnit(unit)));
+	}
+
+	toString() {
+		switch (this.kind) {
+			case 'text':
+				return this.values;
+
+			case 'color':
+				return this.values.toString();
+
+			case 'values':
+				return this.values.join(' ');
+
+			default:
+				throw new Error('unknown kind ' + this.kind);
+		}
+	}
+}

package/src/{utils → values}/value.js

@@ -1,6 +1,5 @@
-const UNITS = ['px', 'vw', 'vh', 'rem', 'em', 'rem', 'deg', 'rad'];
+const REGEX = /^(\d+\.?\d*|\.\d+)(\w*|%)$/;
 
-const REGEX = /^(\d*\.?\d*)(\w*)$/;
 
 export default class Value {
 	constructor(num, unit = null) {
@@ -8,19 +7,20 @@ export default class Value {
 		this.unit = unit;
 	}
 
-	static parse(v, defUnit = null) {
+	static parse(v) {
 		if (typeof v === 'number') {
-			return new Value(v, defUnit);
+			return new Value(v);
 		}
 
 		const [_v, num, unit] = REGEX.exec(v);
 
-		if (unit && !UNITS.includes(unit))
-			throw new Error('unknown unit ' + unit);
-
 		return new Value(parseFloat(num), unit ? unit : null);
 	}
 
+	eq(other) {
+		return this.unit === other.unit && this.num === other.num;
+	}
+
 	clone(newNum = null) {
 		if (newNum !== null)
 			return new Value(newNum, this.unit);
@@ -32,6 +32,14 @@ export default class Value {
 		return new Value(this.num + add, this.unit);
 	}
 
+	cloneMul(mul) {
+		return new Value(this.num * mul, this.unit);
+	}
+
+	withDefaultUnit(unit) {
+		return new Value(this.num, this.unit ?? unit);
+	}
+
 	toString() {
 		return this.num.toFixed(3) + (this.unit ?? '');
 	}

package/src/utils/target.js

@@ -1,164 +0,0 @@
-import Value from './value.js';
-
-const DEBUG_SET_GET = false;
-
-export default class Target {
-	constructor(target) {
-		this.target = target;
-
-		// this might be an object, a dom node
-		// what about arrays?
-	}
-
-	type() {
-		return 'unknown';
-	}
-
-	getValue(name) {
-		throw new Error('cannot get value of ' + name);
-	}
-
-	setValue(name, value) {
-		throw new Error('cannot set value of ' + name);
-	}
-
-	removeValue(name) {
-		throw new Error('cannot remove value of ' + name);
-	}
-
-	getTransformValue(name) {
-		return this.getValue(name);
-	}
-
-	setTransformValue(name, value) {
-		return this.setValue(name, value);
-	}
-
-	removeTransformValue(name) {
-		return this.removeValue(name);
-	}
-
-	getStyleValue(name) {
-		return this.getValue(name);
-	}
-
-	setStyleValue(name, value) {
-		return this.setValue(name, value);
-	}
-
-	removeStyleValue(name) {
-		return this.removeValue(name);
-	}
-
-	apply() {}
-}
-
-export class DomTarget extends Target {
-	constructor(target) {
-		super(target);
-
-		// for the moment 
-
-		this.transformValues = new Map;
-		this.styleValues = new Map;
-		this.values = new Map;
-	}
-
-	type() {
-		return 'dom';
-	}
-
-	getValue(name) {
-		if (DEBUG_SET_GET)
-			console.log('get', name);
-
-		return this.values.get(name);
-	}
-
-	setValue(name, value) {
-		if (DEBUG_SET_GET)
-			console.log('set', name, value);
-
-		this.values.set(name, value);
-	}
-
-	removeValue(name) {
-		this.values.delete(name);
-	}
-
-	getTransformValue(name) {
-		if (DEBUG_SET_GET)
-			console.log('get', name);
-
-		return this.transformValues.get(name);
-	}
-
-	setTransformValue(name, value) {
-		if (DEBUG_SET_GET)
-			console.log('set', name, value);
-
-		this.transformValues.set(name, value);
-	}
-
-	removeTransformValue(name) {
-		this.transformValues.delete(name);
-	}
-
-	getStyleValue(name) {
-		if (DEBUG_SET_GET)
-			console.log('get', name);
-
-		const v = this.styleValues.get(name);
-
-		if (typeof v === 'undefined' || v === null) {
-			// let's try to get it from the dom
-			const style = getComputedStyle(this.target);
-			const styleV = style[name];
-
-			try {
-				const value = Value.parse(styleV);
-				this.styleValues.set(name, value);
-
-				return value;
-			} catch (e) {
-				console.log('could not parse value', styleV);
-				return v;
-			}
-		} else
-			return v;
-	}
-
-	setStyleValue(name, value) {
-		if (DEBUG_SET_GET)
-			console.log('set', name, value);
-
-		this.styleValues.set(name, value);
-	}
-
-	removeStyleValue(name) {
-		this.styleValues.delete(name);
-	}
-
-	apply() {
-		this.target.style.transform = Array.from(this.transformValues.entries())
-			.map(([k, v]) => `${k}(${v})`)
-			.join(' ');
-
-		// style
-		for (const [k, v] of this.styleValues.entries()) {
-			this.target.style[k] = v;
-		}
-
-		// values
-		for (const [k, v] of this.values.entries()) {
-			console.log('what todo with this ' + k);
-		}
-	}
-}
-
-export function newTarget(target) {
-	if (target instanceof HTMLElement || target instanceof SVGElement)
-		return new DomTarget(target);
-
-	throw new Error('unknown target');
-}