chnobli 0.1.1 → 0.1.3

package/.eslintignore

@@ -0,0 +1 @@
+*.test.js

package/.github/workflows/ci.yaml

@@ -17,5 +17,18 @@ jobs:
     - name: Install dependencies
       run: npm ci
 
-    - name: Check types
+    - name: Lint
       run: npm run lint
+
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v3
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Run tests
+      run: npm run test:once

package/LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Sören Meier
+Copyright (c) 2024 Sören Meier
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/docs/INDEX.md

@@ -0,0 +1,15 @@
+# Docs
+
+
+## Property
+
+### Value
+A property can be one of the following values:
+
+**string** which contains a unit for example `10px`
+**number** a number which presents the default unit of that field
+**from** a return value from the `utils::from` function
+**to** a return value from the `utils::to` function
+**fromTo** a return value from the `utils::fromTo` function
+**reactive** a return value from the `utils::reactive` function
+**function** a function `(t: 0-1) -> value` which returns a value (string or number)

package/jsdoc.conf.json

@@ -5,7 +5,7 @@
 		"excludePattern": "(^|\\/|\\\\)_"
 	},
 	"opts": {
-		"destination": "./docs/",
+		"destination": "./auto-docs/",
 		"recurse": true,
 		"verbose": true
 	}

package/package.json

@@ -1,12 +1,14 @@
 {
 	"name": "chnobli",
-	"version": "0.1.1",
+	"version": "0.1.3",
 	"author": "Sören Meier <info@soerenmeier.ch>",
 	"type": "module",
 	"scripts": {
 		"docs": "jsdoc -c jsdoc.conf.json",
 		"check": "tsc",
-		"lint": "eslint ./src"
+		"lint": "eslint ./src",
+		"test": "node --expose-gc ./node_modules/.bin/vitest",
+		"test:once": "node --expose-gc ./node_modules/.bin/vitest run"
 	},
 	"repository": {
 		"type": "git",
@@ -21,7 +23,8 @@
 	"devDependencies": {
 		"eslint": "^8.45.0",
 		"jsdoc": "^4.0.2",
-		"typescript": "^5.1.6"
+		"typescript": "^5.1.6",
+		"vitest": "^1.1.3"
 	},
 	"dependencies": {
 		"bezier-easing": "^2.1.0",

package/src/animation/animation.js

@@ -1,7 +1,4 @@
-import { takeProp } from '../utils/internal.js';
-import Value from '../utils/value.js';
-// import Ease from '../easing/ease.js';
-import Timing, {
+import {
 	newTiming, STATE_BEFORE, STATE_AFTER
 } from '../timing/timing.js';
 
@@ -18,7 +15,7 @@ export default class Animation {
 	constructor(target, ticker, props = {}) {
 		this.timing = newTiming(props);
 		this._ticker = ticker;
-		this.target = ticker._targets.register(target);
+		this.target = ticker.registerTarget(target);
 
 		this._prevTimingState = this.timing.state;
 		this._props = [];
@@ -42,6 +39,11 @@ export default class Animation {
 		this.timing.advance(change);
 	}
 
+	seekMs(ms) {
+		this._prevTimingState = this.timing.state;
+		this.timing.seekMs(ms);
+	}
+
 	seek(pos) {
 		this._prevTimingState = this.timing.state;
 		this.timing.seek(pos);
@@ -55,8 +57,8 @@ export default class Animation {
 		return this.timing.duration;
 	}
 
-	init() {
-		if (this._initialized)
+	init(reset = false) {
+		if (this._initialized && !reset)
 			return;
 		this._initialized = true;
 
@@ -88,6 +90,20 @@ export default class Animation {
 			prop.render(pos, this.target);
 		}
 	}
+
+	destroy() {
+		for (const prop of this._props) {
+			prop.restoreBefore(this.target);
+		}
+
+		this._ticker.unregisterTarget(this.target.target);
+	}
+}
+
+function maybeResponsiveValue(prop, val) {
+	if (typeof val === 'object' && 'responsive' in val)
+		return val.responsive;
+	return prop.parseValue(val);
 }
 
 class PropertyAnimation {
@@ -95,23 +111,32 @@ class PropertyAnimation {
 		this.prop = newProperty(prop, animation.target.type());
 		// we will get the from the targets
 
+		this.staticValueFn = false;
 		this.valueFn = null;
 
+		this.iniResponsive = null;
 		this.iniFrom = null;
 		this.iniTo = null;
 
-		this.from = null;
-		this.to = null;
-
 		if (typeof value === 'object') {
 			if ('from' in value)
-				this.iniFrom = this.prop.parseValue(value.from);
+				this.iniFrom = maybeResponsiveValue(this.prop, value.from);
 			if ('to' in value)
-				this.iniTo = this.prop.parseValue(value.to);
+				this.iniTo = maybeResponsiveValue(this.prop, value.to);
 
-			if (!this.iniFrom && !this.iniTo)
+			if ('responsive' in value)
+				this.iniResponsive = value.responsive;
+
+			if (!this.iniFrom && !this.iniTo && !this.iniResponsive)
 				throw new Error('from or to expected');
 		} else if (typeof value === 'function') {
+			if (!this.prop.allowsValueFn()) {
+				throw new Error(
+					'prop ' + prop + ' does not allow value functions'
+				);
+			}
+
+			this.staticValueFn = true;
 			this.valueFn = value;
 		} else {
 			this.iniTo = this.prop.parseValue(value);
@@ -120,22 +145,62 @@ class PropertyAnimation {
 
 	// calculate from and to position
 	init(target) {
-		if (this.valueFn)
+		// there is nothing to initialize since on every render we call the
+		// value Fn
+		if (this.staticValueFn)
 			return;
 
-		this.from = this.iniFrom;
-		if (!this.from)
-			this.from = this.prop.getValue(target);
+		this.valueFn = null;
+		let from = null;
+		let to = null;
+
+		// init via responsive fn
+		if (this.iniResponsive) {
+			const value = this.iniResponsive(target.target);
+
+			if (typeof value === 'object') {
+				if ('from' in value)
+					from = this.prop.parseValue(value.from);
+				if ('to' in value)
+					to = this.prop.parseValue(value.to);
+
+				if (!from && !to)
+					throw new Error('from or to expected');
+			} else if (typeof value === 'function') {
+				if (!this.prop.allowsValueFn()) {
+					throw new Error(
+						`prop ${this.prop.name} does not allow value functions`
+					);
+				}
+
+				this.valueFn = value;
+				return;
+			} else {
+				to = this.prop.parseValue(value);
+			}
+		}
+
+		// init from
+		if (!from) {
+			if (typeof this.iniFrom === 'function')
+				from = this.prop.parseValue(this.iniFrom(target.target));
+			else
+				from = this.iniFrom;
+		}
 
-		this.to = this.iniTo;
-		if (!this.to)
-			this.to = this.prop.getValue(target);
+		// init to
+		if (!to) {
+			if (typeof this.iniTo === 'function')
+				to = this.prop.parseValue(this.iniTo(target.target));
+			else
+				to = this.iniTo;
+		}
 
-		if (this.to.unit !== this.from.unit)
-			throw new Error(this.from.unit + ' != ' + this.to.unit);
+		this.prop.init(target, from, to);
 	}
 
 	restoreBefore(target) {
+		// todo this might not be enough
 		this.prop.removeValue(target);
 	}
 
@@ -145,9 +210,7 @@ class PropertyAnimation {
 			return;
 		}
 
-		const dif = this.to.num - this.from.num;
-
-		this.prop.setValue(target, this.from.cloneAdd(pos * dif));
+		this.prop.setValue(target, this.prop.interpolate(pos));
 	}
 }