fundus 0.12.2 → 0.13.0

package/dist/runtime/components/SliceCanvas.svelte

@@ -1,173 +0,0 @@
-<!--
-	Canvas slice backend using the entry-based API (slicing arrives inline on the
-	`SliceManifestEntry`). Private: hosts render `Slice.svelte`, which
-	dispatches between this and the DOM backend.
-
-	Fills its container and draws each slice cell with one `drawImage` into a
-	backing canvas sized to the box × devicePixelRatio (for crispness). A
-	ResizeObserver triggers a redraw on resize; window `resize` and DPR changes
-	(browser zoom, moving between displays) redraw too, and a reactive effect
-	redraws when the entry changes — so it also works live inside the editor.
-
-	The measured element is a wrapper div, not the canvas: with overdraw the
-	canvas is enlarged by the overdraw's destination size and offset negatively
-	(see `computeCanvasPaintLayout`), so the baked shadow/glow paints outside
-	the layout box while the wrapper (and therefore the layout) keeps the box
-	size — exactly where the DOM backend positions its border-image paint.
--->
-<script lang="ts">
-	import {
-		computeCanvasPaintLayout,
-		computeRenderCells,
-		type CanvasPaintLayout
-	} from '../geometry.js';
-	import { observeBorderBoxSize } from '../observe-border-box-size.js';
-	import type { LoadedSliceSnapshot } from '../slice-source-lifecycle.js';
-
-	interface Props {
-		snapshot: LoadedSliceSnapshot | null;
-		/** Accessible label for the rendered graphic. */
-		alt?: string;
-		class?: string;
-	}
-
-	let { snapshot, alt = '', class: className = '' }: Props = $props();
-
-	let root = $state<HTMLDivElement>();
-	let canvas = $state<HTMLCanvasElement>();
-	let boxWidth = $state(0);
-	let boxHeight = $state(0);
-	let devicePixelRatio = $state(1);
-	// Bumped by window `resize` so the draw effect re-runs even when neither the
-	// box nor the entry changed (belt and braces alongside the ResizeObserver).
-	let redrawTick = $state(0);
-
-	// Track the display's devicePixelRatio: a resolution media query fires
-	// exactly when the DPR leaves the tracked value (browser zoom, moving the
-	// window to another display). The tracked state must be READ first — a
-	// state the effect writes before reading is deliberately not a dependency
-	// in Svelte, so a write-first version would never re-arm the query after
-	// the first transition. Reconciling via update() converges in one extra
-	// run when the real DPR drifted (mount, or a change event).
-	$effect(() => {
-		const trackedRatio = devicePixelRatio;
-		const query = window.matchMedia(`(resolution: ${trackedRatio}dppx)`);
-		const update = () => {
-			devicePixelRatio = window.devicePixelRatio || 1;
-		};
-		update();
-		query.addEventListener('change', update);
-		return () => query.removeEventListener('change', update);
-	});
-
-	$effect(() => {
-		const element = root;
-		if (!element) return;
-		return observeBorderBoxSize(element, (width, height) => {
-			boxWidth = width;
-			boxHeight = height;
-		});
-	});
-
-	const emptyLayout: CanvasPaintLayout = {
-		cssLeft: 0,
-		cssTop: 0,
-		cssWidth: 0,
-		cssHeight: 0,
-		backingWidth: 0,
-		backingHeight: 0,
-		originX: 0,
-		originY: 0
-	};
-	const layout = $derived.by(() => {
-		const current = snapshot;
-		return current
-			? computeCanvasPaintLayout(current.entry, boxWidth, boxHeight, devicePixelRatio)
-			: emptyLayout;
-	});
-
-	// Redraw only when a committed snapshot, the box, DPR, or window changes.
-	$effect(() => {
-		const current = snapshot;
-		const currentLayout = layout;
-		void redrawTick;
-		draw(current, currentLayout);
-	});
-
-	function draw(current: LoadedSliceSnapshot | null, currentLayout: CanvasPaintLayout): void {
-		const element = canvas;
-		if (!element) return;
-		if (!current || boxWidth === 0 || boxHeight === 0) {
-			element.width = 0;
-			element.height = 0;
-			return;
-		}
-
-		element.width = currentLayout.backingWidth;
-		element.height = currentLayout.backingHeight;
-
-		const context = element.getContext('2d');
-		if (!context) return;
-		// Origin at the layout box's top-left, so the (possibly negative) cell
-		// coordinates from computeRenderCells apply directly.
-		context.setTransform(
-			devicePixelRatio,
-			0,
-			0,
-			devicePixelRatio,
-			currentLayout.originX,
-			currentLayout.originY
-		);
-		context.clearRect(
-			currentLayout.cssLeft,
-			currentLayout.cssTop,
-			currentLayout.cssWidth,
-			currentLayout.cssHeight
-		);
-
-		for (const cell of computeRenderCells(current.entry, boxWidth, boxHeight)) {
-			context.drawImage(
-				current.image,
-				cell.sx,
-				cell.sy,
-				cell.sw,
-				cell.sh,
-				cell.dx,
-				cell.dy,
-				cell.dw,
-				cell.dh
-			);
-		}
-	}
-</script>
-
-<svelte:window onresize={() => (redrawTick += 1)} />
-
-<div
-	bind:this={root}
-	class="fundus-slice-canvas {className}"
-	role={alt ? 'img' : undefined}
-	aria-label={alt || undefined}
->
-	<canvas
-		bind:this={canvas}
-		style:left="{layout.cssLeft}px"
-		style:top="{layout.cssTop}px"
-		style:width="{layout.cssWidth}px"
-		style:height="{layout.cssHeight}px"
-	></canvas>
-</div>
-
-<style>
-	.fundus-slice-canvas {
-		position: relative;
-		width: 100%;
-		height: 100%;
-	}
-
-	canvas {
-		position: absolute;
-		display: block;
-		pointer-events: none;
-	}
-</style>

package/dist/runtime/components/SliceCanvas.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { LoadedSliceSnapshot } from '../slice-source-lifecycle.js';
-interface Props {
-    snapshot: LoadedSliceSnapshot | null;
-    /** Accessible label for the rendered graphic. */
-    alt?: string;
-    class?: string;
-}
-declare const SliceCanvas: import("svelte").Component<Props, {}, "">;
-type SliceCanvas = ReturnType<typeof SliceCanvas>;
-export default SliceCanvas;

package/dist/runtime/components/SliceDom.svelte

@@ -1,161 +0,0 @@
-<!--
-	DOM slice backend using the entry-based API: the slicing arrives inline on the
-	`SliceManifestEntry` (no registry, no manifest lookup). One component covers
-	all modes (nine / three-horizontal / three-vertical / one) — the mode lives
-	in the entry. Private: hosts render `Slice.svelte`, which dispatches between
-	this and the canvas backend.
-
-	Fills its container and measures it (ResizeObserver), then paints the complete
-	slice through one CSS border-image. The browser still stretches the same source
-	regions computed by `computeRenderCells`, but rasterizes them as one border
-	image instead of separate clipped elements. Shared slice edges therefore cannot
-	expose the background under fractional transforms.
-	With overdraw the paint element extends past the container (negative offsets),
-	so the root switches to overflow: visible and the baked shadow/glow draws
-	outside the layout box.
--->
-<script lang="ts">
-	import type { SliceInsets, SliceManifestEntry } from '../../core/index.js';
-	import { computeRenderCells, effectiveInsets, effectiveOverdraw } from '../geometry.js';
-	import { observeBorderBoxSize } from '../observe-border-box-size.js';
-	import type { LoadedSliceSnapshot } from '../slice-source-lifecycle.js';
-
-	interface Props {
-		snapshot: LoadedSliceSnapshot | null;
-		/** Accessible label for the rendered graphic. */
-		alt?: string;
-		class?: string;
-	}
-
-	let { snapshot, alt = '', class: className = '' }: Props = $props();
-
-	let root = $state<HTMLDivElement>();
-	let boxWidth = $state(0);
-	let boxHeight = $state(0);
-
-	interface BorderImagePaint {
-		left: number;
-		top: number;
-		width: number;
-		height: number;
-		slices: SliceInsets;
-		widths: SliceInsets;
-	}
-
-	function clamp(value: number, min: number, max: number): number {
-		return Math.max(min, Math.min(max, value));
-	}
-
-	function computeBorderImagePaint(
-		entry: SliceManifestEntry,
-		width: number,
-		height: number
-	): BorderImagePaint | null {
-		const cells = computeRenderCells(entry, width, height);
-		if (cells.length === 0) return null;
-
-		const effective = effectiveInsets(entry);
-		const leftSlice = clamp(effective.left, 0, entry.sourceWidth);
-		const rightSlice = clamp(effective.right, 0, entry.sourceWidth - leftSlice);
-		const topSlice = clamp(effective.top, 0, entry.sourceHeight);
-		const bottomSlice = clamp(effective.bottom, 0, entry.sourceHeight - topSlice);
-		const slices = {
-			top: topSlice,
-			right: rightSlice,
-			bottom: bottomSlice,
-			left: leftSlice
-		};
-		const left = Math.min(...cells.map((cell) => cell.dx));
-		const top = Math.min(...cells.map((cell) => cell.dy));
-		const right = Math.max(...cells.map((cell) => cell.dx + cell.dw));
-		const bottom = Math.max(...cells.map((cell) => cell.dy + cell.dh));
-
-		return {
-			left,
-			top,
-			width: right - left,
-			height: bottom - top,
-			slices,
-			widths: {
-				top: cells.find((cell) => topSlice > 0 && cell.sy === 0 && cell.sh === topSlice)?.dh ?? 0,
-				right:
-					cells.find(
-						(cell) =>
-							rightSlice > 0 && cell.sx === entry.sourceWidth - rightSlice && cell.sw === rightSlice
-					)?.dw ?? 0,
-				bottom:
-					cells.find(
-						(cell) =>
-							bottomSlice > 0 &&
-							cell.sy === entry.sourceHeight - bottomSlice &&
-							cell.sh === bottomSlice
-					)?.dh ?? 0,
-				left: cells.find((cell) => leftSlice > 0 && cell.sx === 0 && cell.sw === leftSlice)?.dw ?? 0
-			}
-		};
-	}
-
-	$effect(() => {
-		const element = root;
-		if (!element) return;
-		return observeBorderBoxSize(element, (width, height) => {
-			boxWidth = width;
-			boxHeight = height;
-		});
-	});
-
-	const entry = $derived(snapshot?.entry ?? null);
-	const paint = $derived(entry ? computeBorderImagePaint(entry, boxWidth, boxHeight) : null);
-	const hasOverdraw = $derived.by(() => {
-		if (!entry) return false;
-		const overdraw = effectiveOverdraw(entry);
-		return overdraw.top > 0 || overdraw.right > 0 || overdraw.bottom > 0 || overdraw.left > 0;
-	});
-</script>
-
-<div
-	bind:this={root}
-	class="fundus-slice {className}"
-	class:fundus-slice--overdraw={hasOverdraw}
-	role={alt ? 'img' : undefined}
-	aria-label={alt || undefined}
->
-	{#if entry && paint}
-		<div
-			class="fundus-slice__paint"
-			style:left="{paint.left}px"
-			style:top="{paint.top}px"
-			style:width="{paint.width}px"
-			style:height="{paint.height}px"
-			style:border-image-source={`url(${JSON.stringify(entry.src)})`}
-			style:border-image-slice={`${paint.slices.top} ${paint.slices.right} ${paint.slices.bottom} ${paint.slices.left} fill`}
-			style:border-image-width={`${paint.widths.top}px ${paint.widths.right}px ${paint.widths.bottom}px ${paint.widths.left}px`}
-		></div>
-	{/if}
-</div>
-
-<style>
-	.fundus-slice {
-		position: relative;
-		width: 100%;
-		height: 100%;
-		overflow: hidden;
-	}
-
-	/* Overdraw deliberately extends the paint past the box — don't clip it. */
-	.fundus-slice--overdraw {
-		overflow: visible;
-	}
-
-	.fundus-slice__paint {
-		position: absolute;
-		box-sizing: border-box;
-		border-width: 0;
-		border-style: solid;
-		border-image-repeat: stretch;
-		pointer-events: none;
-		/* Offload to the GPU so border-image edges don't pop as hairlines under
-		   fractional transforms. */
-		will-change: transform;
-	}
-</style>

package/dist/runtime/components/SliceDom.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { LoadedSliceSnapshot } from '../slice-source-lifecycle.js';
-interface Props {
-    snapshot: LoadedSliceSnapshot | null;
-    /** Accessible label for the rendered graphic. */
-    alt?: string;
-    class?: string;
-}
-declare const SliceDom: import("svelte").Component<Props, {}, "">;
-type SliceDom = ReturnType<typeof SliceDom>;
-export default SliceDom;