vigla 0.0.0 → 0.2.0

package/src/runtime/transitions/layout.ts

@@ -0,0 +1,176 @@
+import { task } from '../reactivity/tasks.ts';
+import {
+	animate,
+	type AnimationConfig,
+	type Direction,
+	type Options,
+	type Running
+} from './animate.ts';
+import { project, sweep, type Projection } from './frame.ts';
+import { capture, placementOf, type Capture, type Placement } from './placement.ts';
+
+export interface LayoutPlan {
+	match(): void;
+	stabilize(): void;
+	measure(): void;
+	read(): AnimationConfig | undefined;
+	cancel(): void;
+}
+
+export class LayoutContext {
+	readonly element: Element;
+	direction: Direction | null;
+	readonly #plans = new Set<LayoutPlan>();
+	#captured: Capture | undefined;
+	#poses: readonly [Capture, Capture] | null = null;
+	#references = 0;
+	#declaring = true;
+
+	constructor(element: Element, direction: Direction | null = null) {
+		this.element = element;
+		this.direction = direction;
+	}
+
+	get captured(): Capture {
+		return (this.#captured ??= passOf().capture(this.element));
+	}
+
+	get placement(): Placement {
+		return placementOf(this.element);
+	}
+
+	measured(from: Capture, to: Capture): void {
+		this.#poses = [from, to];
+	}
+
+	local(from: DOMRect, to: DOMRect): Projection | null {
+		const poses = this.#poses;
+		if (poses === null || poses[0].rect !== from || poses[1].rect !== to) return null;
+		return project(poses[0], poses[1]);
+	}
+
+	stage(plan: LayoutPlan): LayoutPass | null {
+		this.#plans.add(plan);
+		if (!this.#declaring) return null;
+		const pass = passOf();
+		this.#captured ??= pass.capture(this.element);
+		pass.plans.add(plan);
+		return pass;
+	}
+
+	seal(): void {
+		this.#declaring = false;
+	}
+
+	cancel(): void {
+		for (const plan of this.#plans) plan.cancel();
+		this.#plans.clear();
+	}
+
+	retain(): () => void {
+		this.#references++;
+		let retained = true;
+		return () => {
+			if (!retained) return;
+			retained = false;
+			if (--this.#references === 0) this.cancel();
+		};
+	}
+}
+
+export let layout: LayoutContext | null = null;
+
+export function withinLayout<T>(context: LayoutContext, fn: () => T): T {
+	const previous = layout;
+	layout = context;
+	try {
+		return fn();
+	} finally {
+		layout = previous;
+	}
+}
+
+function scoped(context: LayoutContext, options: Options): Options {
+	if (typeof options !== 'function') return options;
+	return (direction) => withinLayout(context, () => scoped(context, options(direction)));
+}
+
+export class LayoutPass {
+	readonly plans = new Set<LayoutPlan>();
+	readonly #captures = new Map<Element, Capture>();
+	#ready = false;
+
+	get ready(): boolean {
+		return this.#ready;
+	}
+
+	capture(element: Element): Capture {
+		let found = this.#captures.get(element);
+		if (found === undefined) this.#captures.set(element, (found = capture(element)));
+		return found;
+	}
+
+	withdraw(plan: LayoutPlan): void {
+		this.plans.delete(plan);
+	}
+
+	drain(): void {
+		if (pending === this) pending = null;
+		try {
+			for (const plan of this.plans) plan.match();
+			for (const plan of this.plans) plan.stabilize();
+			sweep(() => {
+				for (const plan of this.plans) plan.measure();
+			});
+			this.#ready = true;
+		} catch (error) {
+			for (const plan of this.plans) plan.cancel();
+			throw error;
+		} finally {
+			this.plans.clear();
+			this.#captures.clear();
+		}
+	}
+}
+
+let pending: LayoutPass | null = null;
+
+function passOf(): LayoutPass {
+	if (pending === null) {
+		const pass = (pending = new LayoutPass());
+		task(() => pass.drain());
+	}
+	return pending;
+}
+
+export function captureLayout(element: Element): Capture {
+	return passOf().capture(element);
+}
+
+export function play(
+	element: Element,
+	context: LayoutContext,
+	options: Options,
+	counterpart: Running | undefined,
+	target: 0 | 1,
+	begin: () => void,
+	finish: () => void
+): Running {
+	const release = context.retain();
+	const running = animate(element, scoped(context, options), counterpart, target, begin, () => {
+		try {
+			finish();
+		} finally {
+			if (target === 1) release();
+		}
+	});
+	return {
+		abort() {
+			running.abort();
+			release();
+		},
+		deactivate: () => running.deactivate(),
+		reset: () => running.reset(),
+		t: () => running.t()
+	};
+}

package/src/runtime/transitions/manager.ts

@@ -0,0 +1,343 @@
+import { leaving, stayed } from '../reactivity/leaving.ts';
+import { effect, hide, show, teardown } from '../reactivity/effects.ts';
+import { BLOCK, BRANCH, ROOT, type Effect } from '../reactivity/graph.ts';
+import { sweep } from './frame.ts';
+import { captureLayout, LayoutContext, play, withinLayout, type LayoutPlan } from './layout.ts';
+import { capture, GEOMETRY, placementOf, type Capture } from './placement.ts';
+import { owner, setOwner, untrack } from '../reactivity/tracking.ts';
+import { type AnimationConfig, type Direction, type Options, type Running } from './animate.ts';
+
+export const IN = 1;
+
+export const OUT = 2;
+
+export const GLOBAL = 4;
+
+export type TransitionFn<P> = (
+	element: Element,
+	params: P,
+	options: { direction: Direction | 'both' }
+) => Options;
+
+export type AnimateFn<P> = (
+	element: Element,
+	rects: { from: DOMRect; to: DOMRect },
+	params: P
+) => AnimationConfig;
+
+interface Manager {
+	readonly element: Element;
+	readonly global: boolean;
+	in(): void;
+	out(done: () => void): void;
+	stop(): void;
+}
+
+export interface Mover {
+	element: Element;
+	measure(): void;
+	apply(): void;
+	fix(): void;
+	unfix(): void;
+}
+
+const managers = new WeakMap<Effect, Manager[]>();
+
+const movers = new WeakMap<Effect, Mover>();
+
+const transparent = new WeakSet<Effect>();
+
+let local = true;
+
+let allowed = true;
+
+let live = 0;
+
+export function seeThrough(block: Effect): void {
+	transparent.add(block);
+}
+
+export function building<T>(update: boolean, fn: () => T): T {
+	const previous = local;
+	local = update;
+	try {
+		return fn();
+	} finally {
+		local = previous;
+	}
+}
+
+export function introducing<T>(intro: boolean, fn: () => T): T {
+	const previous = allowed;
+	allowed = intro;
+	try {
+		return fn();
+	} finally {
+		allowed = previous;
+	}
+}
+
+function outside<T>(fn: () => T): T {
+	const previous = setOwner(null);
+	try {
+		return untrack(fn);
+	} finally {
+		setOwner(previous);
+	}
+}
+
+function dispatch(element: Element, type: string): void {
+	outside(() => element.dispatchEvent(new CustomEvent(type)));
+}
+
+export function transition<P>(
+	flags: number,
+	element: HTMLElement,
+	get: () => TransitionFn<P | undefined>,
+	params: (() => P) | null
+): void {
+	const intro = (flags & IN) !== 0;
+	const outro = (flags & OUT) !== 0;
+	const global = (flags & GLOBAL) !== 0;
+	const direction = intro && outro ? 'both' : intro ? 'in' : 'out';
+	const inert = element.inert;
+	const overflow = element.style.overflow;
+	let current: Options;
+	let context: LayoutContext;
+	let entering: Running | undefined;
+	let leaving: Running | undefined;
+	const options = (target: 0 | 1): Options => {
+		const next = target === 1 ? 'in' : 'out';
+		if (current == null) {
+			context = new LayoutContext(element, next);
+			try {
+				current = outside(() =>
+					withinLayout(context, () => get()(element, params?.() as P, { direction }))
+				);
+			} catch (error) {
+				context.cancel();
+				throw error;
+			} finally {
+				context.seal();
+			}
+		} else context.direction = next;
+		return current;
+	};
+	const manager: Manager = {
+		element,
+		global,
+		in() {
+			element.inert = inert;
+			if (!intro) {
+				leaving?.abort();
+				leaving?.reset();
+				leaving = current = undefined;
+				return;
+			}
+			if (!outro) entering?.abort();
+			const config = options(1);
+			entering = play(
+				element,
+				context,
+				config,
+				leaving,
+				1,
+				() => dispatch(element, 'introstart'),
+				() => {
+					dispatch(element, 'introend');
+					entering?.abort();
+					entering = current = undefined;
+					element.style.overflow = overflow;
+				}
+			);
+		},
+		out(done) {
+			if (!outro) {
+				done();
+				current = undefined;
+				return;
+			}
+			element.inert = true;
+			const config = options(0);
+			leaving = play(
+				element,
+				context,
+				config,
+				entering,
+				0,
+				() => dispatch(element, 'outrostart'),
+				() => {
+					dispatch(element, 'outroend');
+					done();
+				}
+			);
+		},
+		stop() {
+			entering?.abort();
+			leaving?.abort();
+			context?.cancel();
+		}
+	};
+	const host = owner as Effect;
+	let list = managers.get(host);
+	if (list === undefined) managers.set(host, (list = []));
+	list.push(manager);
+	live++;
+	teardown(() => {
+		live--;
+		manager.stop();
+	});
+	if (intro && allowed && (global || local)) effect(() => untrack(() => manager.in()));
+}
+
+export function animation<P>(
+	element: Element,
+	get: () => AnimateFn<P | undefined>,
+	params: (() => P) | null
+): void {
+	const host = owner as Effect;
+	const found = movers.get(host);
+	if (found !== undefined) {
+		found.element = element;
+		return;
+	}
+	let from: Capture;
+	let running: Running | undefined;
+	let release: (() => void) | undefined;
+	const mover: Mover = {
+		element,
+		measure() {
+			from = captureLayout(this.element);
+		},
+		apply() {
+			const element = this.element;
+			const context = new LayoutContext(element);
+			let previous = running;
+			const source = from;
+			const start = source.rect;
+			let end: DOMRect;
+			let cancelled = false;
+			const plan: LayoutPlan = {
+				match() {},
+				stabilize() {},
+				measure() {
+					if (cancelled) return;
+					previous?.abort();
+					previous = undefined;
+					let target = capture(element);
+					if (!still(start, target.rect) && placementOf(element).seize(GEOMETRY).size > 0) {
+						target = capture(element);
+					}
+					end = target.rect;
+					context.measured(source, target);
+				},
+				read() {
+					if (cancelled || still(start, end)) return;
+					return withinLayout(context, () =>
+						get()(element, { from: start, to: end }, params?.() as P)
+					);
+				},
+				cancel() {
+					cancelled = true;
+				}
+			};
+			context.stage(plan);
+			context.seal();
+			const handle = play(
+				element,
+				context,
+				() => plan.read(),
+				undefined,
+				1,
+				() => {},
+				() => {
+					if (running !== handle) return;
+					handle.abort();
+					running = undefined;
+				}
+			);
+			running = handle;
+		},
+		fix() {
+			if (release !== undefined || this.element.getAnimations().length > 0) return;
+			release = placementOf(this.element).acquire(from);
+		},
+		unfix() {
+			release?.();
+			release = undefined;
+		}
+	};
+	movers.set(host, mover);
+	teardown(() => {
+		running?.abort();
+		mover.unfix();
+	});
+}
+
+function still(a: DOMRect, b: DOMRect): boolean {
+	return a.left === b.left && a.right === b.right && a.top === b.top && a.bottom === b.bottom;
+}
+
+export function moverOf(row: Effect): Mover | undefined {
+	return movers.get(row);
+}
+
+export function animateMoves(moved: readonly Mover[]): void {
+	for (const mover of moved) mover.apply();
+}
+
+function collect(effect: Effect, inherited: boolean, found: Manager[]): void {
+	for (const manager of managers.get(effect) ?? []) {
+		if (manager.global || inherited) found.push(manager);
+	}
+	for (let child = effect.first; child !== null; child = child.next) {
+		if (child.destroyed || child.inert) continue;
+		const through =
+			child.kind === ROOT ||
+			transparent.has(child) ||
+			(child.kind === BRANCH && effect.kind === BLOCK);
+		collect(child, inherited && through, found);
+	}
+}
+
+export function prepare(branches: readonly Effect[], retained: readonly Effect[] = []): void {
+	sweep(() => {
+		for (const branch of branches) {
+			if (live > 0) {
+				const found: Manager[] = [];
+				collect(branch, true, found);
+				for (const manager of found) captureLayout(manager.element);
+			}
+			movers.get(branch)?.measure();
+		}
+		for (const row of retained) movers.get(row)?.measure();
+	});
+}
+
+export function pause(branch: Effect, done: () => void): void {
+	const found: Manager[] = [];
+	collect(branch, true, found);
+	hide(branch);
+	let remaining = found.length;
+	if (remaining === 0) {
+		done();
+		return;
+	}
+	const release = leaving(branch);
+	for (const manager of found) {
+		manager.out(() => {
+			if (--remaining !== 0 || !release()) return;
+			for (const manager of found) manager.stop();
+			done();
+		});
+	}
+}
+
+export function resume(branch: Effect): void {
+	stayed(branch);
+	show(branch);
+	const found: Manager[] = [];
+	collect(branch, true, found);
+	for (const manager of found) placementOf(manager.element).restore();
+	for (const manager of found) manager.in();
+}

package/src/runtime/transitions/placement.ts

@@ -0,0 +1,161 @@
+import { poseOf, project, type Pose } from './frame.ts';
+
+type Channel = 'translate' | 'rotate' | 'scale';
+
+const CHANNELS: readonly Channel[] = ['translate', 'rotate', 'scale'];
+
+export interface Capture extends Pose, Readonly<Record<Channel, string | undefined>> {
+	readonly width: string;
+	readonly height: string;
+	readonly transform: string;
+	readonly origin: string;
+	readonly opacity: number;
+	readonly position: string;
+}
+
+interface Declaration {
+	readonly value: string;
+	readonly priority: string;
+}
+
+interface Lease {
+	readonly before: Declaration;
+	readonly written: Declaration;
+}
+
+export function capture(element: Element): Capture {
+	const style = getComputedStyle(element);
+	const rect = element.getBoundingClientRect();
+	const transform = style.transform === 'none' ? '' : style.transform;
+	return {
+		...poseOf(element, style, rect, transform),
+		width: style.width,
+		height: style.height,
+		transform,
+		origin: style.transformOrigin,
+		opacity: +style.opacity,
+		position: style.position,
+		translate: style.translate,
+		rotate: style.rotate,
+		scale: style.scale
+	};
+}
+
+export const GEOMETRY = ['transform', 'transformOrigin', 'translate', 'rotate', 'scale'] as const;
+
+export class Placement {
+	readonly element: Element;
+	readonly #holders = new Set<object>();
+	readonly #styles = new Map<string, Lease>();
+	readonly #animations = new Map<Animation, readonly Keyframe[]>();
+
+	constructor(element: Element) {
+		this.element = element;
+	}
+
+	adopt(animation: Animation, frames: readonly Keyframe[]): void {
+		this.#animations.set(animation, frames);
+	}
+
+	release(animation: Animation): void {
+		this.#animations.delete(animation);
+	}
+
+	seize(properties: readonly string[]): ReadonlySet<string> {
+		const seized = new Set<string>();
+		for (const [animation, frames] of this.#animations) {
+			const taken = properties.filter((property) => frames.some((frame) => property in frame));
+			if (taken.length === 0) continue;
+			const kept = frames.map((frame) => {
+				const rest: Keyframe = {};
+				for (const property in frame)
+					if (!taken.includes(property)) rest[property] = frame[property];
+				return rest;
+			});
+			(animation.effect as KeyframeEffect).setKeyframes(kept);
+			this.#animations.set(animation, kept);
+			for (const property of taken) seized.add(property);
+		}
+		return seized;
+	}
+
+	#write(property: string, value: string, priority = 'important'): void {
+		const style = (this.element as HTMLElement | SVGElement).style;
+		const before = this.#styles.get(property)?.before ?? {
+			value: style.getPropertyValue(property),
+			priority: style.getPropertyPriority(property)
+		};
+		style.setProperty(property, value, priority);
+		this.#styles.set(property, {
+			before,
+			written: {
+				value: style.getPropertyValue(property),
+				priority: style.getPropertyPriority(property)
+			}
+		});
+	}
+
+	#offset(from: Capture): boolean {
+		const element = this.element;
+		const rect = element.getBoundingClientRect();
+		const local = project(from, poseOf(element, getComputedStyle(element), rect, from.transform));
+		if (local === null) return false;
+		const { left, top } = local.from;
+		if (left !== 0 || top !== 0) {
+			this.seize(['transform']);
+			const shift = `translate(${left}px, ${top}px)`;
+			this.#write('transform', from.transform === '' ? shift : `${from.transform} ${shift}`, '');
+		}
+		return true;
+	}
+
+	#hold(from: Capture): void {
+		const frozen = CHANNELS.filter((channel) => !!from[channel]);
+		for (const channel of this.seize(frozen))
+			this.#write(channel, from[channel as Channel] as string, '');
+		if (from.position === 'absolute' || from.position === 'fixed') return;
+		this.#write('position', 'absolute');
+		this.#write('width', from.width);
+		this.#write('height', from.height);
+		if ((from.flat || from.frame !== null) && this.#offset(from)) return;
+		const to = this.element.getBoundingClientRect();
+		const x = from.rect.left - to.left;
+		const y = from.rect.top - to.top;
+		if (x !== 0 || y !== 0) {
+			this.seize(['transform']);
+			this.#write('transform', `translate(${x}px, ${y}px) ${from.transform}`, '');
+		}
+	}
+
+	acquire(from: Capture): () => void {
+		const holder = {};
+		if (this.#holders.size === 0) this.#hold(from);
+		this.#holders.add(holder);
+		return () => {
+			if (this.#holders.delete(holder) && this.#holders.size === 0) this.restore();
+		};
+	}
+
+	restore(): void {
+		const style = (this.element as HTMLElement | SVGElement).style;
+		for (const [property, { before, written }] of this.#styles) {
+			if (
+				style.getPropertyValue(property) !== written.value ||
+				style.getPropertyPriority(property) !== written.priority
+			)
+				continue;
+			if (before.value === '') style.removeProperty(property);
+			else style.setProperty(property, before.value, before.priority);
+		}
+		this.#styles.clear();
+		this.#holders.clear();
+	}
+}
+
+const placements = new WeakMap<Element, Placement>();
+
+export function placementOf(element: Element): Placement {
+	let found = placements.get(element);
+	if (found === undefined) placements.set(element, (found = new Placement(element)));
+	return found;
+}