@x33025/sveltely 0.1.1 → 0.1.2

package/dist/components/Library/ImageMask/ImageMask.demo.svelte

@@ -0,0 +1,117 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'ImageMask',
+		description: 'Image mask editor that exposes the exported mask through bind:mask.',
+		columnSpan: 2,
+		rowSpan: 2
+	};
+</script>
+
+<script lang="ts">
+	import { Brush, Eraser, X } from '@lucide/svelte';
+	import Slider from '../Slider';
+	import ImageMask from './ImageMask.svelte';
+	import type { ImageMaskValue, MaskTool } from './types';
+
+	let mask = $state<ImageMaskValue | null>(null);
+	let brushSize = $state(24);
+	let tool = $state<MaskTool>('paint');
+	let clearRevision = $state(0);
+</script>
+
+<div class="grid items-start gap-3 md:grid-cols-[minmax(0,18rem)_minmax(8rem,1fr)]">
+	<ImageMask
+		src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=700&q=80"
+		alt="Red sneaker"
+		bind:mask
+		bind:brushSize
+		bind:tool
+		bind:clearRevision
+		fit="cover"
+		class="aspect-square"
+	/>
+	<div class="vstack gap-2 text-sm text-zinc-600">
+		<div class="font-medium text-zinc-900">Mask</div>
+		<div class="aspect-square overflow-hidden rounded-md border border-zinc-200 bg-black">
+			{#if mask}
+				<img src={mask.dataUrl} alt="Exported mask" class="size-full object-contain" />
+			{/if}
+		</div>
+		<label class="vstack gap-2 bg-white p-3">
+			<span class="font-medium text-zinc-900">Brush size {brushSize}px</span>
+			<Slider bind:value={brushSize} min={6} max={72} step={1} />
+			<div class="image-mask-controls">
+				<button
+					type="button"
+					class:active={tool === 'paint'}
+					aria-label="Paint mask"
+					onclick={() => {
+						tool = 'paint';
+					}}
+				>
+					<Brush size={16} />
+				</button>
+				<button
+					type="button"
+					class:active={tool === 'erase'}
+					aria-label="Erase mask"
+					disabled={!mask}
+					onclick={() => {
+						tool = 'erase';
+					}}
+				>
+					<Eraser size={16} />
+				</button>
+				<div class="h-5 w-px bg-zinc-200"></div>
+				<button
+					type="button"
+					aria-label="Clear mask"
+					disabled={!mask}
+					onclick={() => {
+						mask = null;
+						clearRevision += 1;
+						tool = 'paint';
+					}}
+				>
+					<X size={16} />
+				</button>
+			</div>
+		</label>
+	</div>
+</div>
+
+<style>
+	.image-mask-controls {
+		display: inline-flex;
+		width: fit-content;
+		align-items: center;
+		gap: 0.25rem;
+		background: white;
+		padding: 0.25rem;
+	}
+
+	.image-mask-controls button {
+		display: inline-flex;
+		width: 2rem;
+		height: 2rem;
+		align-items: center;
+		justify-content: center;
+		border-radius: 9999px;
+		color: var(--color-zinc-500);
+		transition:
+			background-color 150ms,
+			color 150ms,
+			opacity 150ms;
+	}
+
+	.image-mask-controls button:hover:not(:disabled),
+	.image-mask-controls button.active {
+		background: var(--sveltely-primary-color);
+		color: white;
+	}
+
+	.image-mask-controls button:disabled {
+		cursor: not-allowed;
+		opacity: 0.4;
+	}
+</style>

package/dist/components/Library/ImageMask/ImageMask.demo.svelte.d.ts

@@ -0,0 +1,10 @@
+export declare const demo: {
+    name: string;
+    description: string;
+    columnSpan: number;
+    rowSpan: number;
+};
+import ImageMask from './ImageMask.svelte';
+declare const ImageMask: import("svelte").Component<Record<string, never>, {}, "">;
+type ImageMask = ReturnType<typeof ImageMask>;
+export default ImageMask;

package/dist/components/Library/ImageMask/ImageMask.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import Image from '../Image';
+	import type { ImageFit, ImageLoading } from '../../../style/media';
+	import MaskLayer from './MaskLayer.svelte';
+	import type { ImageMaskValue, MaskTool } from './types';
+
+	let {
+		src = null,
+		alt = '',
+		mask = $bindable<ImageMaskValue | null>(null),
+		fit = 'contain',
+		busy = false,
+		disabled = false,
+		placeholderKey = 'default',
+		loading = 'lazy',
+		brushSize = $bindable(24),
+		tool = $bindable<MaskTool>('paint'),
+		clearRevision = $bindable(0),
+		exportSize = 2048,
+		class: className = ''
+	}: {
+		src?: string | null;
+		alt?: string;
+		mask?: ImageMaskValue | null;
+		fit?: ImageFit;
+		busy?: boolean;
+		disabled?: boolean;
+		placeholderKey?: string;
+		loading?: ImageLoading;
+		brushSize?: number;
+		tool?: MaskTool;
+		clearRevision?: number;
+		exportSize?: number;
+		class?: string;
+	} = $props();
+
+	const canEdit = $derived(Boolean(src) && !busy && !disabled);
+</script>
+
+<div class={`image-mask relative ${className}`}>
+	<Image {src} {alt} {fit} {busy} {placeholderKey} {loading} class="size-full">
+		{#if canEdit}
+			<MaskLayer bind:mask {tool} {brushSize} {exportSize} {disabled} {clearRevision} />
+		{/if}
+	</Image>
+</div>

package/dist/components/Library/ImageMask/ImageMask.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { ImageFit, ImageLoading } from '../../../style/media';
+import type { ImageMaskValue, MaskTool } from './types';
+type $$ComponentProps = {
+    src?: string | null;
+    alt?: string;
+    mask?: ImageMaskValue | null;
+    fit?: ImageFit;
+    busy?: boolean;
+    disabled?: boolean;
+    placeholderKey?: string;
+    loading?: ImageLoading;
+    brushSize?: number;
+    tool?: MaskTool;
+    clearRevision?: number;
+    exportSize?: number;
+    class?: string;
+};
+declare const ImageMask: import("svelte").Component<$$ComponentProps, {}, "mask" | "brushSize" | "tool" | "clearRevision">;
+type ImageMask = ReturnType<typeof ImageMask>;
+export default ImageMask;

package/dist/components/Library/ImageMask/MaskLayer.svelte

@@ -0,0 +1,341 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import BrushPreview from './BrushPreview.svelte';
+	import { buildContourPaths } from './contour';
+	import { drawMarchingAnts } from './marchingAnts';
+	import {
+		configureMaskContext,
+		drawMaskStrokeSegment,
+		exportMaskValue,
+		rebuildMaskSurface
+	} from './maskSurface';
+	import type { ContourPath, ImageMaskValue, MaskPoint, MaskStroke, MaskTool } from './types';
+
+	let {
+		mask = $bindable<ImageMaskValue | null>(null),
+		tool = 'paint',
+		brushSize = 24,
+		exportSize = 2048,
+		disabled = false,
+		clearRevision = 0
+	}: {
+		mask?: ImageMaskValue | null;
+		tool?: MaskTool;
+		brushSize?: number;
+		exportSize?: number;
+		disabled?: boolean;
+		clearRevision?: number;
+	} = $props();
+
+	let canvas = $state<HTMLCanvasElement | null>(null);
+	let context: CanvasRenderingContext2D | null = null;
+	let surfaceCanvas: HTMLCanvasElement | null = null;
+	let surfaceContext: CanvasRenderingContext2D | null = null;
+	let outlineCanvas: HTMLCanvasElement | null = null;
+	let outlineContext: CanvasRenderingContext2D | null = null;
+	let exportCanvas: HTMLCanvasElement | null = null;
+	let exportContext: CanvasRenderingContext2D | null = null;
+	let resizeObserver: ResizeObserver | null = null;
+	let isDrawing = false;
+	let lastPoint: MaskPoint | null = null;
+	let animationFrame = 0;
+	let dashOffset = 0;
+	let viewportWidth = 1;
+	let viewportHeight = 1;
+	let dpr = 1;
+	let isSyncingMask = false;
+	let contours: ContourPath[] = [];
+	let pointerPoint = $state<MaskPoint | null>(null);
+	let pointerVisible = $state(false);
+	let brushSizeLabelVisible = $state(false);
+	let previousBrushSize: number | null = null;
+	let previousClearRevision: number | null = null;
+	let brushSizeLabelTimer: ReturnType<typeof setTimeout> | null = null;
+	const strokes: MaskStroke[] = [];
+
+	function resizeCanvas() {
+		if (!canvas) return;
+		const rect = canvas.getBoundingClientRect();
+		const nextWidth = Math.max(1, rect.width);
+		const nextHeight = Math.max(1, rect.height);
+		const nextDpr = window.devicePixelRatio || 1;
+		const nextCanvasWidth = Math.max(1, Math.round(nextWidth * nextDpr));
+		const nextCanvasHeight = Math.max(1, Math.round(nextHeight * nextDpr));
+
+		if (
+			canvas.width === nextCanvasWidth &&
+			canvas.height === nextCanvasHeight &&
+			context &&
+			surfaceCanvas &&
+			surfaceContext
+		) {
+			return;
+		}
+
+		viewportWidth = nextWidth;
+		viewportHeight = nextHeight;
+		dpr = nextDpr;
+		canvas.width = nextCanvasWidth;
+		canvas.height = nextCanvasHeight;
+		surfaceCanvas ??= document.createElement('canvas');
+		surfaceCanvas.width = nextCanvasWidth;
+		surfaceCanvas.height = nextCanvasHeight;
+		outlineCanvas ??= document.createElement('canvas');
+		outlineCanvas.width = nextCanvasWidth;
+		outlineCanvas.height = nextCanvasHeight;
+		exportCanvas ??= document.createElement('canvas');
+		context = canvas.getContext('2d');
+		surfaceContext = surfaceCanvas.getContext('2d');
+		outlineContext = outlineCanvas.getContext('2d');
+		exportContext = exportCanvas.getContext('2d');
+		if (context) configureMaskContext(context, dpr);
+		if (surfaceContext) configureMaskContext(surfaceContext, dpr);
+		if (outlineContext) configureMaskContext(outlineContext, dpr);
+		rebuildMaskSurface(surfaceContext, strokes, viewportWidth, viewportHeight);
+		rebuildContours();
+		drawFrame();
+	}
+
+	function pointFor(event: PointerEvent) {
+		if (!canvas) return null;
+		const rect = canvas.getBoundingClientRect();
+		return {
+			x: event.clientX - rect.left,
+			y: event.clientY - rect.top
+		};
+	}
+
+	function hideBrushSizeLabel() {
+		brushSizeLabelVisible = false;
+		if (brushSizeLabelTimer) {
+			clearTimeout(brushSizeLabelTimer);
+			brushSizeLabelTimer = null;
+		}
+	}
+
+	function rebuildContours() {
+		if (!surfaceCanvas || !surfaceContext) {
+			contours = [];
+			return;
+		}
+		contours = buildContourPaths({
+			surfaceCanvas,
+			surfaceContext,
+			viewportWidth,
+			viewportHeight,
+			dpr,
+			step: Math.max(0.5, 1 / Math.max(1, dpr)),
+			simplify: 0.18
+		});
+	}
+
+	function drawOutlineSurface() {
+		drawMarchingAnts({
+			context: outlineContext,
+			contours,
+			viewportWidth,
+			viewportHeight,
+			dashOffset
+		});
+	}
+
+	function drawFrame() {
+		if (!context) return;
+		drawOutlineSurface();
+		context.clearRect(0, 0, viewportWidth, viewportHeight);
+		if (!surfaceCanvas) return;
+		const primaryColor = canvas
+			? getComputedStyle(canvas).getPropertyValue('--sveltely-primary-color').trim() ||
+				'var(--sveltely-primary-color)'
+			: 'var(--sveltely-primary-color)';
+		context.save();
+		context.drawImage(surfaceCanvas, 0, 0, viewportWidth, viewportHeight);
+		context.globalCompositeOperation = 'source-in';
+		context.fillStyle = primaryColor;
+		context.globalAlpha = 0.32;
+		context.fillRect(0, 0, viewportWidth, viewportHeight);
+		context.restore();
+
+		if (outlineCanvas) {
+			context.save();
+			context.drawImage(outlineCanvas, 0, 0, viewportWidth, viewportHeight);
+			context.globalCompositeOperation = 'source-in';
+			context.fillStyle = primaryColor;
+			context.globalAlpha = 0.9;
+			context.fillRect(0, 0, viewportWidth, viewportHeight);
+			context.restore();
+		}
+		context.setLineDash([]);
+	}
+
+	function animateOutline() {
+		dashOffset = (dashOffset + 0.55) % 14;
+		drawFrame();
+		animationFrame = requestAnimationFrame(animateOutline);
+	}
+
+	function emitMask() {
+		const nextMask = exportMaskValue(exportCanvas, exportContext, surfaceCanvas, exportSize);
+		if (!nextMask) return;
+		isSyncingMask = true;
+		mask = nextMask;
+		queueMicrotask(() => {
+			isSyncingMask = false;
+		});
+	}
+
+	function clear() {
+		strokes.length = 0;
+		rebuildMaskSurface(surfaceContext, strokes, viewportWidth, viewportHeight);
+		contours = [];
+		drawFrame();
+		if (mask !== null) {
+			isSyncingMask = true;
+			mask = null;
+			queueMicrotask(() => {
+				isSyncingMask = false;
+			});
+		}
+	}
+
+	function drawLine(from: MaskPoint, to: MaskPoint) {
+		const currentStroke = strokes.at(-1);
+		if (!currentStroke) return;
+		const previous = currentStroke.points.at(-2) ?? null;
+		if (currentStroke.points.length === 0) {
+			currentStroke.points.push(from);
+			if (from.x !== to.x || from.y !== to.y) currentStroke.points.push(to);
+		} else {
+			currentStroke.points.push(to);
+		}
+		drawMaskStrokeSegment(surfaceContext, previous, from, to, currentStroke);
+		drawFrame();
+	}
+
+	function handlePointerDown(event: PointerEvent) {
+		if (!canvas || disabled) return;
+		event.preventDefault();
+		hideBrushSizeLabel();
+		canvas.setPointerCapture(event.pointerId);
+		isDrawing = true;
+		const point = pointFor(event);
+		if (!point) return;
+		pointerPoint = point;
+		pointerVisible = true;
+		strokes.push({ tool, brushSize, points: [] });
+		lastPoint = point;
+		drawLine(point, point);
+	}
+
+	function handlePointerMove(event: PointerEvent) {
+		const events = event.getCoalescedEvents?.() ?? [event];
+		const lastEvent = events.at(-1) ?? event;
+		const latestPoint = pointFor(lastEvent);
+		if (latestPoint) {
+			pointerPoint = latestPoint;
+			pointerVisible = !disabled;
+			hideBrushSizeLabel();
+		}
+		if (!isDrawing || disabled) return;
+		event.preventDefault();
+		if (!lastPoint) return;
+		for (const nextEvent of events) {
+			const point = pointFor(nextEvent);
+			if (!point) continue;
+			drawLine(lastPoint, point);
+			lastPoint = point;
+		}
+	}
+
+	function handlePointerUp(event: PointerEvent) {
+		if (!isDrawing) return;
+		event.preventDefault();
+		isDrawing = false;
+		lastPoint = null;
+		rebuildContours();
+		emitMask();
+	}
+
+	function handlePointerEnter(event: PointerEvent) {
+		if (disabled) return;
+		hideBrushSizeLabel();
+		const point = pointFor(event);
+		if (point) pointerPoint = point;
+		pointerVisible = true;
+	}
+
+	function handlePointerLeave() {
+		if (isDrawing) return;
+		pointerVisible = false;
+	}
+
+	onMount(() => {
+		resizeCanvas();
+		resizeObserver = new ResizeObserver(resizeCanvas);
+		if (canvas) resizeObserver.observe(canvas);
+		animationFrame = requestAnimationFrame(animateOutline);
+		window.addEventListener('resize', resizeCanvas);
+
+		return () => {
+			cancelAnimationFrame(animationFrame);
+			if (brushSizeLabelTimer) clearTimeout(brushSizeLabelTimer);
+			resizeObserver?.disconnect();
+			window.removeEventListener('resize', resizeCanvas);
+		};
+	});
+
+	$effect(() => {
+		if (previousClearRevision === null) {
+			previousClearRevision = clearRevision;
+			return;
+		}
+		if (clearRevision === previousClearRevision) return;
+		previousClearRevision = clearRevision;
+		clear();
+	});
+
+	$effect(() => {
+		if (!isSyncingMask && mask === null && strokes.length > 0) clear();
+	});
+
+	$effect(() => {
+		if (previousBrushSize === null) {
+			previousBrushSize = brushSize;
+			return;
+		}
+		if (brushSize === previousBrushSize) return;
+		previousBrushSize = brushSize;
+		brushSizeLabelVisible = true;
+		if (brushSizeLabelTimer) clearTimeout(brushSizeLabelTimer);
+		brushSizeLabelTimer = setTimeout(() => {
+			brushSizeLabelVisible = false;
+			brushSizeLabelTimer = null;
+		}, 900);
+	});
+</script>
+
+<canvas
+	bind:this={canvas}
+	class="absolute inset-0 z-10 size-full touch-none"
+	aria-hidden="true"
+	onpointerdown={handlePointerDown}
+	onpointerenter={handlePointerEnter}
+	onpointerleave={handlePointerLeave}
+	onpointermove={handlePointerMove}
+	onpointerup={handlePointerUp}
+	onpointercancel={handlePointerUp}
+></canvas>
+
+<BrushPreview
+	point={pointerPoint}
+	visible={pointerVisible}
+	{brushSize}
+	{tool}
+	sizeLabelVisible={brushSizeLabelVisible}
+/>
+
+<style>
+	canvas {
+		cursor: none;
+	}
+</style>

package/dist/components/Library/ImageMask/MaskLayer.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { ImageMaskValue, MaskTool } from './types';
+type $$ComponentProps = {
+    mask?: ImageMaskValue | null;
+    tool?: MaskTool;
+    brushSize?: number;
+    exportSize?: number;
+    disabled?: boolean;
+    clearRevision?: number;
+};
+declare const MaskLayer: import("svelte").Component<$$ComponentProps, {}, "mask">;
+type MaskLayer = ReturnType<typeof MaskLayer>;
+export default MaskLayer;

package/dist/components/Library/ImageMask/contour.d.ts

@@ -0,0 +1,11 @@
+import type { ContourPath } from './types';
+export declare function buildContourPaths({ surfaceCanvas, surfaceContext, viewportWidth, viewportHeight, dpr, step, simplify, threshold }: {
+    surfaceCanvas: HTMLCanvasElement;
+    surfaceContext: CanvasRenderingContext2D;
+    viewportWidth: number;
+    viewportHeight: number;
+    dpr: number;
+    step?: number;
+    simplify?: number;
+    threshold?: number;
+}): ContourPath[];