chnobli 0.1.0 → 0.1.1

package/README.md

@@ -1,12 +1,5 @@
 
-## Fire Js
-This contains various helpers and types.
+## Chnobli js
 
-## Usage
-```json
-{
-	"dependencies": {
-		"fire": "npm:fire-lib-js@^0.2"
-	}
-}
-```
+## Version 0.1 unstable
+Version 0.1 is unstable the api might change at any version number

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "chnobli",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"author": "Sören Meier <info@soerenmeier.ch>",
 	"type": "module",
 	"scripts": {
@@ -12,13 +12,19 @@
 		"type": "git",
 		"url": "https://github.com/soerenmeier/chnobli.git"
 	},
-	"license": "MIT or Apache-2.0",
+	"license": "MIT",
 	"exports": {
-		"./*": "./src/*"
+		"./easing": "./src/timing/easing.js",
+		"./utils": "./src/utils/utils.js",
+		".": "./src/chnobli.js"
 	},
 	"devDependencies": {
 		"eslint": "^8.45.0",
 		"jsdoc": "^4.0.2",
 		"typescript": "^5.1.6"
+	},
+	"dependencies": {
+		"bezier-easing": "^2.1.0",
+		"fire": "npm:fire-lib-js@0.2.17"
 	}
 }

package/src/animation/animation.js

@@ -0,0 +1,203 @@
+import { takeProp } from '../utils/internal.js';
+import Value from '../utils/value.js';
+// import Ease from '../easing/ease.js';
+import Timing, {
+	newTiming, STATE_BEFORE, STATE_AFTER
+} from '../timing/timing.js';
+
+import { newProperty } from './property.js';
+
+
+export default class Animation {
+	// targets;
+	// #timing;
+
+	/*
+	props
+	*/
+	constructor(target, ticker, props = {}) {
+		this.timing = newTiming(props);
+		this._ticker = ticker;
+		this.target = ticker._targets.register(target);
+
+		this._prevTimingState = this.timing.state;
+		this._props = [];
+		this._initialized = false;
+
+		for (const prop in props) {
+			if (prop in this)
+				throw new Error('prop: ' + prop + ' is not allowed');
+
+			this[prop] = new PropertyAnimation(
+				prop,
+				props[prop],
+				this
+			);
+			this._props.push(this[prop]);
+		}
+	}
+
+	advance(change) {
+		this._prevTimingState = this.timing.state;
+		this.timing.advance(change);
+	}
+
+	seek(pos) {
+		this._prevTimingState = this.timing.state;
+		this.timing.seek(pos);
+	}
+
+	isFinite() {
+		return this.timing.isFinite();
+	}
+
+	get duration() {
+		return this.timing.duration;
+	}
+
+	init() {
+		if (this._initialized)
+			return;
+		this._initialized = true;
+
+		for (const prop of this._props) {
+			prop.init(this.target);
+		}
+	}
+
+	render() {
+		if (this.timing.state === STATE_BEFORE) {
+			// console.log('render before');
+
+			for (const prop of this._props) {
+				prop.restoreBefore(this.target);
+			}
+
+			// to render before we need to remove 
+
+			return;
+		} else if (this.timing.state === STATE_AFTER) {
+			// console.log('render after');
+			// return;
+		}
+
+		const pos = this.timing.position;
+
+		// now render
+		for (const prop of this._props) {
+			prop.render(pos, this.target);
+		}
+	}
+}
+
+class PropertyAnimation {
+	constructor(prop, value, animation) {
+		this.prop = newProperty(prop, animation.target.type());
+		// we will get the from the targets
+
+		this.valueFn = 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);
+			if ('to' in value)
+				this.iniTo = this.prop.parseValue(value.to);
+
+			if (!this.iniFrom && !this.iniTo)
+				throw new Error('from or to expected');
+		} else if (typeof value === 'function') {
+			this.valueFn = value;
+		} else {
+			this.iniTo = this.prop.parseValue(value);
+		}
+	}
+
+	// calculate from and to position
+	init(target) {
+		if (this.valueFn)
+			return;
+
+		this.from = this.iniFrom;
+		if (!this.from)
+			this.from = this.prop.getValue(target);
+
+		this.to = this.iniTo;
+		if (!this.to)
+			this.to = this.prop.getValue(target);
+
+		if (this.to.unit !== this.from.unit)
+			throw new Error(this.from.unit + ' != ' + this.to.unit);
+	}
+
+	restoreBefore(target) {
+		this.prop.removeValue(target);
+	}
+
+	render(pos, target) {
+		if (this.valueFn) {
+			this.prop.setValue(target, this.prop.parseValue(this.valueFn(pos)));
+			return;
+		}
+
+		const dif = this.to.num - this.from.num;
+
+		this.prop.setValue(target, this.from.cloneAdd(pos * dif));
+	}
+}
+
+/*
+
+animate(target, {
+	
+	// special
+	// translate
+	x
+	y
+	scale
+	scaleX
+	scaleY
+	rotation
+	skew
+	skewX
+	skewY
+
+
+	
+	// stagger
+	repeatDelay
+	stagger: {
+    // wrap advanced options in an object
+    each: 0.1,
+    from: "center",
+    grid: "auto",
+    ease: "power2.inOut",
+    repeat: -1, // Repeats immediately, not waiting for the other staggered animations to finish
+  },
+
+
+	ease,
+	duration,
+	repeat, true|false|0-x
+	repeatDelay?
+	delay,
+	alternate
+})
+
+
+const tl new Timeline;
+
+tl.add([
+	animation()
+], 100)
+
+tl.addGroup()
+
+tl.add()
+
+*/

package/src/animation/property.js

@@ -0,0 +1,200 @@
+import Value from '../utils/value.js';
+
+export default class Property {
+	constructor(name) {
+		// this is the property name
+		this.name = name;
+	}
+
+	parseValue(val) {
+		return Value.parse(val);
+	}
+
+	defaultValue() {
+		throw new Error('default value for ' + this.name + ' not known');
+	}
+
+	// try to access the value from the target
+	getValue(target) {
+		const val = target.getValue(this.name);
+		if (typeof val === 'undefined' || val === null)
+			return this.defaultValue();
+
+		return val;
+	}
+
+	setValue(target, val) {
+		return target.setValue(this.name, val);
+	}
+
+	removeValue(target) {
+		// todo remove
+		return target.removeValue(this.name);
+	}
+}
+
+const TRANSFORM_PROPS = ['x', 'y', 'scale', 'scaleX', 'scaleY', 'rotate'];
+
+export class Transform extends Property {
+	constructor(name) {
+		super(name);
+
+		if (name === 'x' || name === 'y') {
+			this._defUnit = 'px';
+			this._defVal = 0;
+			this._transformFunction = 'translate' + name.toUpperCase();
+		// } else if (name === 'rotation') {
+		// 	this.defUnit = 'deg';
+		// 	this.defVal = 0;
+		} else if (name.startsWith('scale')) {
+			this._defUnit = null;
+			this._defVal = 1;
+			this._transformFunction = name;
+		} else if (name === 'rotate') {
+			this._defUnit = 'deg';
+			this._defVal = 0;
+			this._transformFunction = name;
+		} else {
+			throw new Error('unknown prop ' + name);
+		}
+	}
+
+	parseValue(val) {
+		return Value.parse(val, this._defUnit);
+	}
+
+	defaultValue() {
+		return new Value(this._defVal, this._defUnit);
+	}
+
+	getValue(target) {
+		const val = target.getTransformValue(this._transformFunction);
+		if (typeof val === 'undefined' || val === null)
+			return this.defaultValue();
+
+		return val;
+	}
+
+	setValue(target, val) {
+		return target.setTransformValue(this._transformFunction, val);
+	}
+
+	removeValue(target) {
+		// todo remove
+		return target.removeTransformValue(this._transformFunction);
+	}
+}
+
+export class TransformXY extends Property {
+	constructor(name) {
+		super(name);
+	}
+
+	parseValue(val) {
+		if (Array.isArray(val))
+			val = { x: val[0], y: val[1] };
+
+		const { x, y } = val;
+
+		return {
+			x: Value.parse(val.x, 'px'),
+			y: Value.parse(val.y, 'px')
+		};
+	}
+
+	defaultValue() {
+		return {
+			x: new Value(0, 'px'),
+			y: new Value(0, 'px')
+		};
+	}
+
+	getValue(target) {
+		const x = target.getTransformValue('translateX');
+		const y = target.getTransformValue('translateY');
+
+		const def = this.defaultValue();
+
+		return {
+			x: x ? x : def.x,
+			y: y ? y : def.y
+		};
+	}
+
+	setValue(target, val) {
+		target.setTransformValue('translateX', val.x);
+		target.setTransformValue('translateY', val.y);
+	}
+
+	removeValue(target) {
+		target.removeTransformValue('translateX');
+		target.removeTransformValue('translateY');
+	}
+}
+
+const STYLE_PROPS = {
+	'width': 'px',
+	'height': 'px',
+	'top': 'px',
+	'left': 'px',
+	'right': 'px',
+	'bottom': 'px',
+	'opacity': null,
+}
+
+export class StyleProp extends Property {
+	constructor(name) {
+		super(name);
+
+		this.unit = STYLE_PROPS[name];
+	}
+
+	parseValue(val) {
+		// maybe keep it unitless as long as possible, maybe until we need to
+		// write it
+		return Value.parse(val, this.unit);
+	}
+
+	defaultValue() {
+		return new Value(0, this.unit);
+	}
+
+	getValue(target) {
+		if (target.type() !== 'dom')
+			throw new Error('error not dom');
+
+		const style = getComputedStyle(target.target);
+
+		return Value.parse(style[this.name]);
+	}
+
+	getValue(target) {
+		const val = target.getStyleValue(this.name);
+		if (!val)
+			return this.defaultValue();
+
+		return val;
+	}
+
+	setValue(target, val) {
+		return target.setStyleValue(this.name, val);
+	}
+
+	removeValue(target) {
+		return target.removeStyleValue(this.name);
+	}
+}
+
+export function newProperty(prop, targetType = '') {
+	if (targetType !== 'dom')
+		throw new Error('only dom is supported as target');
+
+	if (TRANSFORM_PROPS.includes(prop))
+		return new Transform(prop);
+	if (prop === 'xy')
+		return new TransformXY(prop);
+	if (prop in STYLE_PROPS)
+		return new StyleProp(prop);
+
+	throw new Error('unknown prop ' + prop);
+}

package/src/animation/public.js

@@ -0,0 +1,53 @@
+import { takeProp } from '../utils/internal.js';
+import Timeline from '../timeline/public.js';
+import { parseDelay } from '../timing/timing.js';
+import { staggerMap } from '../stagger/stagger.js';
+
+export default class PublicAnimation {
+	constructor(targets, props = {}) {
+		const autoplay = parseAutoplay(takeProp(props, 'autoplay', true));
+		const delay = takeProp(props, 'delay', 0);
+
+		// we don't wan't the ease and duration on the timeline
+		const ease = takeProp(props, 'ease', null);
+		const duration = takeProp(props, 'duration', null);
+
+		this._tl = new Timeline(props);
+
+		props.ease = ease;
+		props.duration = duration;
+
+		this._tl.add(targets, props, staggerMap(delay, v => '+=' + v));
+
+		if (autoplay)
+			this._tl.play();
+	}
+
+	play() {
+		this._tl.play();
+	}
+
+	pause() {
+		this._tl.pause();
+	}
+
+	// 0-1
+	seek(pos) {
+		this._tl.seek(pos);
+	}
+
+	reset() {
+		this._tl.reset();
+	}
+
+	reverse() {
+		this._tl.reverse();
+	}
+}
+
+function parseAutoplay(autoplay) {
+	if (autoplay !== true && autoplay !== false)
+		throw new Error('autoplay needs to be true|false');
+
+	return autoplay;
+}

package/src/animator.js

@@ -0,0 +1,185 @@
+import { quadInOut, quadOut } from './easing/index.js';
+import { range } from 'fire/util.js';
+
+const START = 0;
+const RUNNING = 1;
+const ENDING = 2;
+const ENDED = 3;
+
+export default class Animator {
+	constructor(el, props) {
+		this.el = el;
+
+		this.running = false;
+
+		this.props = [];
+
+		this.prevTime = null;
+
+
+		for (const propName in props) {
+			const prop = new PropertyAnimator(propName, props[propName], el);
+			this.props.push(prop);
+			this[propName] = prop;
+		}
+	}
+
+	// if the animation loop has not started starts it
+	run() {
+		// if running
+		if (this.prevTime !== null)
+			return;
+
+		requestAnimationFrame(a => this._tick(a));
+	}
+
+	_tick(elapsed) {
+		if (this.prevTime === null)
+			this.prevTime = elapsed;
+
+		const change = elapsed - this.prevTime;
+		this.prevTime = elapsed;
+
+		const transforms = [];
+		const cssVars = [];
+
+		let stillRunning = false;
+
+		for (const prop of this.props) {
+			prop._tick(change);
+
+			if (prop.state < ENDED)
+				stillRunning = true;
+
+			if (prop.name === 'translateY' || prop.name === 'scale')
+				transforms.push(prop);
+			else if (prop.name.startsWith('--'))
+				cssVars.push(prop);
+			else
+				throw new Error('unknown prop ' + prop.name);
+		}
+
+		if (!stillRunning) {
+			this.prevTime = null;
+			return;
+		}
+
+		if (transforms.some(t => t.state  < ENDED)) {
+			this.el.style.transform = transforms.map(t => {
+				const v = t._toTransformValue();
+				return v;
+			}).join(' ');
+		}
+
+		for (const prop of cssVars) {
+			if (prop.state < ENDED)
+				this.el.style.setProperty(prop.name, prop._toCssValue());
+		}
+
+		requestAnimationFrame(a => this._tick(a));
+	}
+}
+
+
+class PropertyAnimator {
+	constructor(name, type, el) {
+		this.name = name;
+		this.type = type;
+
+		this.fromV = null;
+		this.currentV = null;
+		this.toV = null;
+
+		this.easing = quadInOut;
+
+		this.elapsed = 0;
+		this.duration = 0;
+		this.state = ENDED;
+	}
+
+	set(val) {
+		this.fromV = val;
+		this.currentV = val;
+		this.toV = val;
+
+		this.elapsed = 0;
+		this.duration = 0;
+		this.state = START;
+	}
+
+	to(val, dur = null) {
+		this.fromV = this.currentV;
+		this.toV = val;
+
+		if (this.state === RUNNING)
+			this.easing = quadOut;
+		else
+			this.easing = quadInOut;
+
+		this.elapsed = 0;
+		this.duration = dur ?? 500;
+		this.state = START;
+	}
+
+	_tick(change) {
+		if (this.state >= ENDING)
+			return this.state = ENDED;
+
+		this.elapsed += change;
+
+		const dur = Math.max(this.duration, 1);
+		const t = Math.min(this.elapsed / dur, 1);
+		if (t >= 1)
+			this.state = ENDED;
+		else
+			this.state = RUNNING;
+
+		const et = this.easing(t);
+
+		if (this.type === 'num') {
+			const dif = this.toV - this.fromV;
+			this.currentV = this.fromV + dif * et;
+		} else if (this.type === 'hex') {
+			if (!Array.isArray(this.fromV))
+				this.fromV = hexToRgb(this.fromV);
+			if (!Array.isArray(this.toV))
+				this.toV = hexToRgb(this.toV);
+
+			// now animate
+			this.currentV = this.fromV.map((from, i) => {
+				return from + (this.toV[i] - from) * et;
+			});
+		}
+	}
+
+	_toTransformValue() {
+		let v = this.currentV;
+		if (this.name === 'translateY')
+			v += 'px';
+
+		return `${this.name}(${v})`;
+	}
+
+	_toCssValue() {
+		if (this.type === 'hex')
+			return `rgba(${this.currentV.map(v => Math.round(v)).join()}, 1)`;
+		throw new Error('to css value');
+	}
+}
+
+
+function hexToRgb(val) {
+	if (!val.startsWith('#') || val.length !== 7)
+		throw new Error('expected a hex value with 6 characters');
+
+	const hex = val.substring(1);
+
+	const values = range(0, 3)
+		.map(i => parseInt(hex.substring(i * 2, i * 2 + 2), 16));
+
+	return values;
+}
+
+// function rgbToHex(rgb) {
+// 	return 
+// }