vigla 0.0.0 → 0.2.0

package/src/runtime/transitions/animate.ts

@@ -0,0 +1,161 @@
+import { loop } from '../classes/frames.ts';
+import { task } from '../reactivity/tasks.ts';
+import { linear, type Easing } from './easing.ts';
+import { placementOf } from './placement.ts';
+
+export interface AnimationConfig {
+	delay?: number;
+	duration?: number;
+	easing?: Easing;
+	css?: (t: number, u: number) => string;
+	tick?: (t: number, u: number) => void;
+}
+
+export type Direction = 'in' | 'out';
+
+export type Deferred = (options: { direction: Direction }) => Options;
+
+export type Options = AnimationConfig | Deferred | null | undefined;
+
+export interface Running {
+	abort(): void;
+	deactivate(): void;
+	reset(): void;
+	t(): number;
+}
+
+function camel(property: string): string {
+	if (property === 'float') return 'cssFloat';
+	if (property === 'offset') return 'cssOffset';
+	if (property.startsWith('--')) return property;
+	return property.replace(/-([a-z])/g, (_, letter: string) => letter.toUpperCase());
+}
+
+export function keyframe(css: string): Keyframe {
+	const frame: Keyframe = {};
+	for (const part of css.split(';')) {
+		const [property, value] = part.split(':');
+		if (!property || value === undefined) break;
+		frame[camel(property.trim())] = value.trim();
+	}
+	return frame;
+}
+
+function noop(): void {}
+
+export function animate(
+	element: Element,
+	options: Options,
+	counterpart: Running | undefined,
+	target: 0 | 1,
+	begin: () => void,
+	finish: () => void
+): Running {
+	const intro = target === 1;
+	if (typeof options === 'function') {
+		let aborted = false;
+		let running: Running | undefined;
+		task(() => {
+			if (aborted) return;
+			const config = options({ direction: intro ? 'in' : 'out' });
+			if (aborted) return;
+			running = animate(element, config, counterpart, target, begin, finish);
+		});
+		return {
+			abort() {
+				aborted = true;
+				running?.abort();
+			},
+			deactivate: () => running?.deactivate(),
+			reset: () => running?.reset(),
+			t: () => running?.t() ?? 1 - target
+		};
+	}
+	counterpart?.deactivate();
+	if (!options?.duration && !options?.delay) {
+		begin();
+		finish();
+		return { abort: noop, deactivate: noop, reset: noop, t: () => target };
+	}
+	const { delay = 0, css, tick, easing = linear } = options;
+	const duration = options.duration ?? 0;
+	const owner = placementOf(element);
+	let aborted = false;
+	let done = finish;
+	let animation: Animation | undefined;
+	let progress = (): number => 1 - target;
+	task(() => {
+		if (aborted) return;
+		const frames: Keyframe[] = [];
+		if (intro && counterpart === undefined) {
+			tick?.(0, 1);
+			if (css) {
+				const first = keyframe(css(0, 1));
+				frames.push(first, first);
+			}
+		}
+		const placeholder = element.animate(frames, { duration: delay, fill: 'forwards' });
+		owner.adopt(placeholder, frames);
+		animation = placeholder;
+		placeholder.onfinish = () => {
+			placeholder.cancel();
+			owner.release(placeholder);
+			begin();
+			const from = counterpart?.t() ?? 1 - target;
+			counterpart?.abort();
+			const delta = target - from;
+			const span = duration * Math.abs(delta);
+			const steps: Keyframe[] = [];
+			let ended = false;
+			if (span > 0) {
+				let hidden = false;
+				if (css) {
+					const count = Math.ceil(span / (1000 / 60));
+					for (let index = 0; index <= count; index += 1) {
+						const t = from + delta * easing(index / count);
+						const frame = keyframe(css(t, 1 - t));
+						steps.push(frame);
+						hidden ||= frame.overflow === 'hidden';
+					}
+				}
+				if (hidden) (element as HTMLElement).style.overflow = 'hidden';
+				progress = () =>
+					from + delta * easing(((animation as Animation).currentTime as number) / span);
+				if (tick) {
+					loop(() => {
+						if (ended || (animation as Animation).playState !== 'running') return false;
+						const t = progress();
+						tick(t, 1 - t);
+						return true;
+					});
+				}
+			}
+			const main = element.animate(steps, { duration: span, fill: 'forwards' });
+			owner.adopt(main, steps);
+			animation = main;
+			main.onfinish = () => {
+				ended = true;
+				progress = () => target;
+				tick?.(target, 1 - target);
+				done();
+			};
+		};
+	});
+	return {
+		abort() {
+			aborted = true;
+			if (animation === undefined) return;
+			animation.cancel();
+			owner.release(animation);
+			animation.effect = null;
+			animation.onfinish = noop;
+		},
+		deactivate() {
+			done = noop;
+		},
+		reset() {
+			if (target === 0) tick?.(1, 0);
+		},
+		t: () => progress()
+	};
+}

package/src/runtime/transitions/easing.ts

@@ -0,0 +1,153 @@
+export type Easing = (t: number) => number;
+
+const BACK = 1.70158;
+
+export function linear(t: number): number {
+	return t;
+}
+
+export function backIn(t: number): number {
+	return t * t * ((BACK + 1) * t - BACK);
+}
+
+export function backOut(t: number): number {
+	const s = t - 1;
+	return s * s * ((BACK + 1) * s + BACK) + 1;
+}
+
+export function backInOut(t: number): number {
+	const s = BACK * 1.525;
+	const x = t * 2;
+	if (x < 1) return 0.5 * (x * x * ((s + 1) * x - s));
+	const y = x - 2;
+	return 0.5 * (y * y * ((s + 1) * y + s) + 2);
+}
+
+export function bounceOut(t: number): number {
+	const square = t * t;
+	if (t < 4 / 11) return 7.5625 * square;
+	if (t < 8 / 11) return 9.075 * square - 9.9 * t + 3.4;
+	if (t < 9 / 10) return (4356 / 361) * square - (35442 / 1805) * t + 16061 / 1805;
+	return 10.8 * t * t - 20.52 * t + 10.72;
+}
+
+export function bounceIn(t: number): number {
+	return 1 - bounceOut(1 - t);
+}
+
+export function bounceInOut(t: number): number {
+	return t < 0.5 ? 0.5 * (1 - bounceOut(1 - t * 2)) : 0.5 * bounceOut(t * 2 - 1) + 0.5;
+}
+
+export function circIn(t: number): number {
+	return 1 - Math.sqrt(1 - t * t);
+}
+
+export function circOut(t: number): number {
+	const s = t - 1;
+	return Math.sqrt(1 - s * s);
+}
+
+export function circInOut(t: number): number {
+	const x = t * 2;
+	if (x < 1) return -0.5 * (Math.sqrt(1 - x * x) - 1);
+	const y = x - 2;
+	return 0.5 * (Math.sqrt(1 - y * y) + 1);
+}
+
+export function cubicIn(t: number): number {
+	return t * t * t;
+}
+
+export function cubicOut(t: number): number {
+	const s = t - 1;
+	return s * s * s + 1;
+}
+
+export function cubicInOut(t: number): number {
+	return t < 0.5 ? 4 * t * t * t : 0.5 * Math.pow(2 * t - 2, 3) + 1;
+}
+
+export function elasticIn(t: number): number {
+	return Math.sin((13 * t * Math.PI) / 2) * Math.pow(2, 10 * (t - 1));
+}
+
+export function elasticOut(t: number): number {
+	return Math.sin((-13 * (t + 1) * Math.PI) / 2) * Math.pow(2, -10 * t) + 1;
+}
+
+export function elasticInOut(t: number): number {
+	if (t < 0.5) return 0.5 * Math.sin(((13 * Math.PI) / 2) * 2 * t) * Math.pow(2, 10 * (2 * t - 1));
+	return (
+		0.5 * Math.sin(((-13 * Math.PI) / 2) * (2 * t - 1 + 1)) * Math.pow(2, -10 * (2 * t - 1)) + 1
+	);
+}
+
+export function expoIn(t: number): number {
+	return t === 0 ? t : Math.pow(2, 10 * (t - 1));
+}
+
+export function expoOut(t: number): number {
+	return t === 1 ? t : 1 - Math.pow(2, -10 * t);
+}
+
+export function expoInOut(t: number): number {
+	if (t === 0 || t === 1) return t;
+	return t < 0.5 ? 0.5 * Math.pow(2, 20 * t - 10) : -0.5 * Math.pow(2, 10 - t * 20) + 1;
+}
+
+export function quadIn(t: number): number {
+	return t * t;
+}
+
+export function quadOut(t: number): number {
+	return -t * (t - 2);
+}
+
+export function quadInOut(t: number): number {
+	const x = t / 0.5;
+	if (x < 1) return 0.5 * x * x;
+	const y = x - 1;
+	return -0.5 * (y * (y - 2) - 1);
+}
+
+export function quartIn(t: number): number {
+	return Math.pow(t, 4);
+}
+
+export function quartOut(t: number): number {
+	return Math.pow(t - 1, 3) * (1 - t) + 1;
+}
+
+export function quartInOut(t: number): number {
+	return t < 0.5 ? 8 * Math.pow(t, 4) : -8 * Math.pow(t - 1, 4) + 1;
+}
+
+export function quintIn(t: number): number {
+	return t * t * t * t * t;
+}
+
+export function quintOut(t: number): number {
+	const s = t - 1;
+	return s * s * s * s * s + 1;
+}
+
+export function quintInOut(t: number): number {
+	const x = t * 2;
+	if (x < 1) return 0.5 * x * x * x * x * x;
+	const y = x - 2;
+	return 0.5 * (y * y * y * y * y + 2);
+}
+
+export function sineIn(t: number): number {
+	const v = Math.cos(t * Math.PI * 0.5);
+	return Math.abs(v) < 1e-14 ? 1 : 1 - v;
+}
+
+export function sineOut(t: number): number {
+	return Math.sin((t * Math.PI) / 2);
+}
+
+export function sineInOut(t: number): number {
+	return -0.5 * (Math.cos(Math.PI * t) - 1);
+}

package/src/runtime/transitions/flip.ts

@@ -0,0 +1,66 @@
+import type { AnimationConfig } from './animate.ts';
+import { cubicOut, type Easing } from './easing.ts';
+import { layout } from './layout.ts';
+
+export interface FlipParams {
+	delay?: number;
+	duration?: number | ((distance: number) => number);
+	easing?: Easing;
+}
+
+function zoomOf(element: Element): number {
+	const own = (element as Element & { currentCSSZoom?: number }).currentCSSZoom;
+	if (own !== undefined) return own;
+	let zoom = 1;
+	for (let at: Element | null = element; at !== null; at = at.parentElement) {
+		zoom *= +getComputedStyle(at).zoom;
+	}
+	return zoom;
+}
+
+export function flip(
+	node: Element,
+	{ from, to }: { from: DOMRect; to: DOMRect },
+	params: FlipParams = {}
+): AnimationConfig {
+	const {
+		delay = 0,
+		duration = (distance: number) => Math.sqrt(distance) * 120,
+		easing = cubicOut
+	} = params;
+	const style = getComputedStyle(node);
+	const transform = style.transform === 'none' ? '' : style.transform;
+	const [originX = 0, originY = 0] = style.transformOrigin.split(' ').map(parseFloat);
+	const local = layout?.element === node ? layout.local(from, to) : null;
+	let dx: number;
+	let dy: number;
+	let dsx: number;
+	let dsy: number;
+	if (local === null) {
+		const ox = originX / node.clientWidth;
+		const oy = originY / node.clientHeight;
+		const zoom = zoomOf(node);
+		const sx = node.clientWidth / to.width / zoom;
+		const sy = node.clientHeight / to.height / zoom;
+		dx = (from.left + from.width * ox - (to.left + to.width * ox)) * sx;
+		dy = (from.top + from.height * oy - (to.top + to.height * oy)) * sy;
+		dsx = from.width / to.width;
+		dsy = from.height / to.height;
+	} else {
+		const source = local.from;
+		const target = local.to;
+		const ox = originX / target.width;
+		const oy = originY / target.height;
+		dx = source.left + source.width * ox - (target.left + target.width * ox);
+		dy = source.top + source.height * oy - (target.top + target.height * oy);
+		dsx = source.width / target.width;
+		dsy = source.height / target.height;
+	}
+	return {
+		delay,
+		duration: typeof duration === 'function' ? duration(Math.sqrt(dx * dx + dy * dy)) : duration,
+		easing,
+		css: (t, u) =>
+			`transform: ${transform} translate(${u * dx}px, ${u * dy}px) scale(${t + u * dsx}, ${t + u * dsy});`
+	};
+}

package/src/runtime/transitions/frame.ts

@@ -0,0 +1,273 @@
+export type Matrix = readonly [
+	number,
+	number,
+	number,
+	number,
+	number,
+	number,
+	number,
+	number,
+	number
+];
+
+export interface Box {
+	readonly left: number;
+	readonly top: number;
+	readonly width: number;
+	readonly height: number;
+}
+
+export interface Frame {
+	readonly map: Matrix;
+	readonly inverse: Matrix;
+	readonly width: number;
+	readonly height: number;
+}
+
+export interface Pose {
+	readonly rect: DOMRect;
+	readonly flat: boolean;
+	readonly frame: Frame | null;
+}
+
+export interface Projection {
+	readonly from: Box;
+	readonly to: Box;
+}
+
+const XHTML = 'http://www.w3.org/1999/xhtml';
+
+const COLLAPSE = 1e-6;
+
+let moving: Map<Element, boolean> | null = null;
+
+export function sweep<T>(fn: () => T): T {
+	if (moving !== null) return fn();
+	moving = new Map();
+	try {
+		return fn();
+	} finally {
+		moving = null;
+	}
+}
+
+function parentOf(element: Element): Element | null {
+	if (element.assignedSlot !== null) return element.assignedSlot;
+	if (element.parentElement !== null) return element.parentElement;
+	const root = element.parentNode;
+	return root !== null && 'host' in root ? (root as ShadowRoot).host : null;
+}
+
+function zoomed(style: CSSStyleDeclaration): boolean {
+	const zoom = parseFloat(style.zoom);
+	return zoom === zoom && zoom !== 1;
+}
+
+function moves(style: CSSStyleDeclaration): boolean {
+	for (const value of [
+		style.transform,
+		style.perspective,
+		style.translate,
+		style.rotate,
+		style.scale,
+		style.offsetPath
+	]) {
+		if (value !== undefined && value !== '' && value !== 'none') return true;
+	}
+	return zoomed(style);
+}
+
+function above(element: Element): boolean {
+	const parent = parentOf(element);
+	if (parent === null) return false;
+	let found = moving?.get(parent);
+	if (found === undefined) {
+		found = moves(getComputedStyle(parent)) || above(parent);
+		moving?.set(parent, found);
+	}
+	return found;
+}
+
+function transitionable(style: CSSStyleDeclaration): boolean {
+	const durations = style.transitionDuration.split(',');
+	const delays = style.transitionDelay.split(',');
+	return style.transitionProperty.split(',').some((property, at) => {
+		const name = property.trim();
+		if (name !== 'all' && name !== 'transform') return false;
+		const duration = parseFloat(durations[at % durations.length] as string) || 0;
+		const delay = parseFloat(delays[at % delays.length] as string) || 0;
+		return Math.max(duration, 0) + delay > 0;
+	});
+}
+
+export function poseOf(
+	element: Element,
+	style: CSSStyleDeclaration,
+	rect: DOMRect,
+	transform: string
+): Pose {
+	if (element.namespaceURI !== XHTML || !(rect.width > 0 && rect.height > 0)) {
+		return { rect, flat: false, frame: null };
+	}
+	if (!moves(style) && !above(element)) return { rect, flat: true, frame: null };
+	const frame = transitionable(style) ? null : probe(element, style, transform);
+	return { rect, flat: false, frame };
+}
+
+function length(style: CSSStyleDeclaration, axis: 'width' | 'height'): number {
+	const value = parseFloat(style[axis]);
+	if (style.boxSizing === 'border-box') return value;
+	const [start, end] = axis === 'width' ? ['left', 'right'] : ['top', 'bottom'];
+	let total = value;
+	for (const property of [
+		`padding-${start}`,
+		`padding-${end}`,
+		`border-${start}-width`,
+		`border-${end}-width`
+	]) {
+		total += parseFloat(style.getPropertyValue(property));
+	}
+	return total;
+}
+
+export function apply(matrix: Matrix, x: number, y: number): [number, number] {
+	const w = matrix[6] * x + matrix[7] * y + matrix[8];
+	return [
+		(matrix[0] * x + matrix[1] * y + matrix[2]) / w,
+		(matrix[3] * x + matrix[4] * y + matrix[5]) / w
+	];
+}
+
+function solve(points: readonly number[], width: number, height: number): Matrix | null {
+	const [x0, y0, x1, y1, x2, y2, x3, y3] = points as [
+		number,
+		number,
+		number,
+		number,
+		number,
+		number,
+		number,
+		number
+	];
+	const sx = x0 - x1 + x2 - x3;
+	const sy = y0 - y1 + y2 - y3;
+	const dx1 = x1 - x2;
+	const dx2 = x3 - x2;
+	const dy1 = y1 - y2;
+	const dy2 = y3 - y2;
+	const det = dx1 * dy2 - dx2 * dy1;
+	if (det === 0 || !Number.isFinite(det)) return null;
+	const g = (sx * dy2 - dx2 * sy) / det;
+	const h = (dx1 * sy - sx * dy1) / det;
+	return [
+		(x1 - x0 + g * x1) / width,
+		(x3 - x0 + h * x3) / height,
+		x0,
+		(y1 - y0 + g * y1) / width,
+		(y3 - y0 + h * y3) / height,
+		y0,
+		g / width,
+		h / height,
+		1
+	];
+}
+
+function invert(m: Matrix): Matrix | null {
+	const [a, b, c, d, e, f, g, h, i] = m;
+	const A = e * i - f * h;
+	const B = f * g - d * i;
+	const C = d * h - e * g;
+	const det = a * A + b * B + c * C;
+	if (det === 0 || !Number.isFinite(det)) return null;
+	return [
+		A / det,
+		(c * h - b * i) / det,
+		(b * f - c * e) / det,
+		B / det,
+		(a * i - c * g) / det,
+		(c * d - a * f) / det,
+		C / det,
+		(b * g - a * h) / det,
+		(a * e - b * d) / det
+	];
+}
+
+function probe(element: Element, style: CSSStyleDeclaration, transform: string): Frame | null {
+	const width = length(style, 'width');
+	const height = length(style, 'height');
+	if (!(width > 0 && height > 0)) return null;
+	const [ox = 0, oy = 0] = style.transformOrigin.split(' ').map(parseFloat);
+	const inline = (element as HTMLElement).style;
+	const text = element.getAttribute('style');
+	const points: number[] = [];
+	try {
+		for (const [x, y] of [
+			[0, 0],
+			[width, 0],
+			[width, height],
+			[0, height]
+		] as const) {
+			inline.setProperty(
+				'transform',
+				`${transform} translate(${x - ox}px, ${y - oy}px) scale(${COLLAPSE}) translate(${ox - width / 2}px, ${oy - height / 2}px)`,
+				'important'
+			);
+			const rect = element.getBoundingClientRect();
+			points.push((rect.left + rect.right) / 2, (rect.top + rect.bottom) / 2);
+		}
+	} finally {
+		if (text === null) element.removeAttribute('style');
+		else if (element.getAttribute('style') !== text) element.setAttribute('style', text);
+	}
+	const map = solve(points, width, height);
+	const inverse = map === null ? null : invert(map);
+	return map === null || inverse === null ? null : { map, inverse, width, height };
+}
+
+function corners({ rect, frame }: Pose): number[] {
+	if (frame === null) {
+		return [
+			rect.left,
+			rect.top,
+			rect.right,
+			rect.top,
+			rect.right,
+			rect.bottom,
+			rect.left,
+			rect.bottom
+		];
+	}
+	const { map, width, height } = frame;
+	return [
+		...apply(map, 0, 0),
+		...apply(map, width, 0),
+		...apply(map, width, height),
+		...apply(map, 0, height)
+	];
+}
+
+export function project(from: Pose, to: Pose): Projection | null {
+	if ((from.flat && to.flat) || (!from.flat && from.frame === null)) return null;
+	if (!to.flat && to.frame === null) return null;
+	const points = corners(from);
+	let left = Infinity;
+	let top = Infinity;
+	let right = -Infinity;
+	let bottom = -Infinity;
+	for (let at = 0; at < points.length; at += 2) {
+		const vx = points[at] as number;
+		const vy = points[at + 1] as number;
+		const [x, y] =
+			to.frame === null ? [vx - to.rect.left, vy - to.rect.top] : apply(to.frame.inverse, vx, vy);
+		left = Math.min(left, x);
+		top = Math.min(top, y);
+		right = Math.max(right, x);
+		bottom = Math.max(bottom, y);
+	}
+	const width = to.frame === null ? to.rect.width : to.frame.width;
+	const height = to.frame === null ? to.rect.height : to.frame.height;
+	return {
+		from: { left, top, width: right - left, height: bottom - top },
+		to: { left: 0, top: 0, width, height }
+	};
+}