@x33025/sveltely 0.1.1 → 0.1.3

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-active-color').trim() ||
+				'var(--sveltely-active-color)'
+			: 'var(--sveltely-active-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[];

package/dist/components/Library/ImageMask/contour.js

@@ -0,0 +1,152 @@
+function pointKey(point) {
+    return `${point.x.toFixed(3)}:${point.y.toFixed(3)}`;
+}
+function distanceToSegmentSquared(point, start, end) {
+    const dx = end.x - start.x;
+    const dy = end.y - start.y;
+    if (dx === 0 && dy === 0)
+        return (point.x - start.x) ** 2 + (point.y - start.y) ** 2;
+    const t = Math.max(0, Math.min(1, ((point.x - start.x) * dx + (point.y - start.y) * dy) / (dx * dx + dy * dy)));
+    const projected = { x: start.x + t * dx, y: start.y + t * dy };
+    return (point.x - projected.x) ** 2 + (point.y - projected.y) ** 2;
+}
+function simplifyPoints(points, epsilon) {
+    if (points.length <= 2)
+        return points;
+    const keep = new Array(points.length).fill(false);
+    const stack = [[0, points.length - 1]];
+    const epsilonSquared = epsilon * epsilon;
+    keep[0] = true;
+    keep[points.length - 1] = true;
+    while (stack.length > 0) {
+        const [start, end] = stack.pop();
+        let maxDistance = 0;
+        let indexToKeep = start;
+        for (let index = start + 1; index < end; index += 1) {
+            const distance = distanceToSegmentSquared(points[index], points[start], points[end]);
+            if (distance > maxDistance) {
+                maxDistance = distance;
+                indexToKeep = index;
+            }
+        }
+        if (maxDistance > epsilonSquared) {
+            keep[indexToKeep] = true;
+            stack.push([start, indexToKeep], [indexToKeep, end]);
+        }
+    }
+    return points.filter((_, index) => keep[index]);
+}
+export function buildContourPaths({ surfaceCanvas, surfaceContext, viewportWidth, viewportHeight, dpr, step = Math.max(0.25, 1 / Math.max(1, dpr)), simplify = 0.12, threshold = 127 }) {
+    const columns = Math.max(2, Math.ceil(viewportWidth / step) + 2);
+    const rows = Math.max(2, Math.ceil(viewportHeight / step) + 2);
+    const image = surfaceContext.getImageData(0, 0, surfaceCanvas.width, surfaceCanvas.height);
+    const alphaAt = (x, y) => {
+        const clampedX = Math.min(surfaceCanvas.width - 1, Math.max(0, x));
+        const clampedY = Math.min(surfaceCanvas.height - 1, Math.max(0, y));
+        const x0 = Math.floor(clampedX);
+        const y0 = Math.floor(clampedY);
+        const x1 = Math.min(surfaceCanvas.width - 1, x0 + 1);
+        const y1 = Math.min(surfaceCanvas.height - 1, y0 + 1);
+        const tx = clampedX - x0;
+        const ty = clampedY - y0;
+        const offset = (sampleX, sampleY) => image.data[(sampleY * surfaceCanvas.width + sampleX) * 4 + 3];
+        const top = offset(x0, y0) * (1 - tx) + offset(x1, y0) * tx;
+        const bottom = offset(x0, y1) * (1 - tx) + offset(x1, y1) * tx;
+        return top * (1 - ty) + bottom * ty;
+    };
+    const alpha = Array.from({ length: rows }, (_, y) => Array.from({ length: columns }, (_, x) => {
+        return alphaAt(x * step * dpr, y * step * dpr);
+    }));
+    const segments = [];
+    const interpolate = (from, to) => {
+        if (from === to)
+            return 0.5;
+        return Math.max(0, Math.min(1, (threshold - from) / (to - from)));
+    };
+    const edgePoint = (x, y, edge) => {
+        const topLeft = alpha[y][x];
+        const topRight = alpha[y][x + 1];
+        const bottomRight = alpha[y + 1][x + 1];
+        const bottomLeft = alpha[y + 1][x];
+        if (edge === 'top') {
+            const t = interpolate(topLeft, topRight);
+            return { x: (x + t) * step, y: y * step };
+        }
+        if (edge === 'right') {
+            const t = interpolate(topRight, bottomRight);
+            return { x: (x + 1) * step, y: (y + t) * step };
+        }
+        if (edge === 'bottom') {
+            const t = interpolate(bottomLeft, bottomRight);
+            return { x: (x + t) * step, y: (y + 1) * step };
+        }
+        const t = interpolate(topLeft, bottomLeft);
+        return { x: x * step, y: (y + t) * step };
+    };
+    const addSegment = (x, y, from, to) => segments.push([edgePoint(x, y, from), edgePoint(x, y, to)]);
+    for (let y = 0; y < rows - 1; y += 1) {
+        for (let x = 0; x < columns - 1; x += 1) {
+            const value = (alpha[y][x] >= threshold ? 8 : 0) |
+                (alpha[y][x + 1] >= threshold ? 4 : 0) |
+                (alpha[y + 1][x + 1] >= threshold ? 2 : 0) |
+                (alpha[y + 1][x] >= threshold ? 1 : 0);
+            if (value === 1 || value === 14)
+                addSegment(x, y, 'left', 'bottom');
+            else if (value === 2 || value === 13)
+                addSegment(x, y, 'bottom', 'right');
+            else if (value === 3 || value === 12)
+                addSegment(x, y, 'left', 'right');
+            else if (value === 4 || value === 11)
+                addSegment(x, y, 'top', 'right');
+            else if (value === 6 || value === 9)
+                addSegment(x, y, 'top', 'bottom');
+            else if (value === 7 || value === 8)
+                addSegment(x, y, 'left', 'top');
+            else if (value === 5) {
+                addSegment(x, y, 'top', 'left');
+                addSegment(x, y, 'bottom', 'right');
+            }
+            else if (value === 10) {
+                addSegment(x, y, 'left', 'bottom');
+                addSegment(x, y, 'top', 'right');
+            }
+        }
+    }
+    const adjacency = new Map();
+    segments.forEach(([start, end], index) => {
+        const startKey = pointKey(start);
+        const endKey = pointKey(end);
+        adjacency.set(startKey, [...(adjacency.get(startKey) ?? []), index]);
+        adjacency.set(endKey, [...(adjacency.get(endKey) ?? []), index]);
+    });
+    const unused = new Set(segments.map((_, index) => index));
+    const contours = [];
+    const takeConnectedSegment = (key) => (adjacency.get(key) ?? []).find((index) => unused.has(index));
+    while (unused.size > 0) {
+        const firstSegmentIndex = unused.values().next().value;
+        unused.delete(firstSegmentIndex);
+        const [start, end] = segments[firstSegmentIndex];
+        const points = [start, end];
+        let currentKey = pointKey(end);
+        let closed = false;
+        while (true) {
+            const nextSegmentIndex = takeConnectedSegment(currentKey);
+            if (nextSegmentIndex === undefined)
+                break;
+            unused.delete(nextSegmentIndex);
+            const [nextStart, nextEnd] = segments[nextSegmentIndex];
+            const nextPoint = pointKey(nextStart) === currentKey ? nextEnd : nextStart;
+            const nextKey = pointKey(nextPoint);
+            if (nextKey === pointKey(points[0])) {
+                closed = true;
+                break;
+            }
+            points.push(nextPoint);
+            currentKey = nextKey;
+        }
+        const prepared = simplifyPoints(points, simplify);
+        if (prepared.length > 2)
+            contours.push({ points: prepared, closed });
+    }
+    return contours;
+}

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

@@ -0,0 +1,2 @@
+export { default } from './ImageMask.svelte';
+export type { ImageMaskValue } from './types';

package/dist/components/Library/ImageMask/index.js

@@ -0,0 +1 @@
+export { default } from './ImageMask.svelte';

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

@@ -0,0 +1,8 @@
+import type { ContourPath } from './types';
+export declare function drawMarchingAnts({ context, contours, viewportWidth, viewportHeight, dashOffset }: {
+    context: CanvasRenderingContext2D | null;
+    contours: ContourPath[];
+    viewportWidth: number;
+    viewportHeight: number;
+    dashOffset: number;
+}): void;

package/dist/components/Library/ImageMask/marchingAnts.js

@@ -0,0 +1,29 @@
+function contourPath(context, contour) {
+    const { points, closed } = contour;
+    if (points.length === 0)
+        return;
+    context.beginPath();
+    context.moveTo(points[0].x, points[0].y);
+    for (const point of points.slice(1)) {
+        context.lineTo(point.x, point.y);
+    }
+    if (closed)
+        context.closePath();
+}
+export function drawMarchingAnts({ context, contours, viewportWidth, viewportHeight, dashOffset }) {
+    if (!context)
+        return;
+    context.clearRect(0, 0, viewportWidth, viewportHeight);
+    context.save();
+    context.lineCap = 'round';
+    context.lineJoin = 'round';
+    context.lineWidth = 2;
+    context.strokeStyle = 'rgb(0 0 0)';
+    context.setLineDash([8, 6]);
+    context.lineDashOffset = -dashOffset;
+    for (const contour of contours) {
+        contourPath(context, contour);
+        context.stroke();
+    }
+    context.restore();
+}

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

@@ -0,0 +1,5 @@
+import type { ImageMaskValue, MaskPoint, MaskStroke } from './types';
+export declare function configureMaskContext(context: CanvasRenderingContext2D, dpr: number): void;
+export declare function rebuildMaskSurface(context: CanvasRenderingContext2D | null, strokes: MaskStroke[], width: number, height: number): void;
+export declare function drawMaskStrokeSegment(context: CanvasRenderingContext2D | null, previous: MaskPoint | null, from: MaskPoint, to: MaskPoint, stroke: Pick<MaskStroke, 'tool' | 'brushSize'>): void;
+export declare function exportMaskValue(exportCanvas: HTMLCanvasElement | null, exportContext: CanvasRenderingContext2D | null, surfaceCanvas: HTMLCanvasElement | null, exportSize: number): ImageMaskValue | null;

package/dist/components/Library/ImageMask/maskSurface.js

@@ -0,0 +1,94 @@
+export function configureMaskContext(context, dpr) {
+    context.setTransform(dpr, 0, 0, dpr, 0, 0);
+    context.lineCap = 'round';
+    context.lineJoin = 'round';
+}
+function smoothPath(context, points) {
+    if (points.length === 0)
+        return;
+    if (points.length < 3) {
+        context.beginPath();
+        context.moveTo(points[0].x, points[0].y);
+        for (const point of points.slice(1))
+            context.lineTo(point.x, point.y);
+        return;
+    }
+    context.beginPath();
+    context.moveTo(points[0].x, points[0].y);
+    for (let index = 0; index < points.length - 1; index += 1) {
+        const current = points[index];
+        const next = points[index + 1];
+        const previous = points[index - 1] ?? current;
+        const afterNext = points[index + 2] ?? next;
+        context.bezierCurveTo(current.x + (next.x - previous.x) / 6, current.y + (next.y - previous.y) / 6, next.x - (afterNext.x - current.x) / 6, next.y - (afterNext.y - current.y) / 6, next.x, next.y);
+    }
+}
+export function rebuildMaskSurface(context, strokes, width, height) {
+    if (!context)
+        return;
+    context.clearRect(0, 0, width, height);
+    for (const stroke of strokes) {
+        smoothPath(context, stroke.points);
+        context.lineWidth = stroke.brushSize;
+        context.globalCompositeOperation =
+            stroke.tool === 'erase' ? 'destination-out' : 'source-over';
+        context.strokeStyle = 'rgb(0 0 0)';
+        context.stroke();
+    }
+    context.globalCompositeOperation = 'source-over';
+}
+export function drawMaskStrokeSegment(context, previous, from, to, stroke) {
+    if (!context)
+        return;
+    context.save();
+    context.lineCap = 'round';
+    context.lineJoin = 'round';
+    context.lineWidth = stroke.brushSize;
+    context.globalCompositeOperation = stroke.tool === 'erase' ? 'destination-out' : 'source-over';
+    context.strokeStyle = 'rgb(0 0 0)';
+    if (from.x === to.x && from.y === to.y) {
+        context.beginPath();
+        context.arc(from.x, from.y, stroke.brushSize / 2, 0, Math.PI * 2);
+        context.fillStyle = 'rgb(0 0 0)';
+        context.fill();
+        context.restore();
+        return;
+    }
+    const start = previous
+        ? { x: (previous.x + from.x) / 2, y: (previous.y + from.y) / 2 }
+        : from;
+    const end = { x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 };
+    context.beginPath();
+    context.moveTo(start.x, start.y);
+    context.quadraticCurveTo(from.x, from.y, end.x, end.y);
+    context.stroke();
+    context.restore();
+}
+export function exportMaskValue(exportCanvas, exportContext, surfaceCanvas, exportSize) {
+    if (!exportCanvas || !exportContext || !surfaceCanvas)
+        return null;
+    const outputSize = Math.max(1, Math.round(exportSize));
+    exportCanvas.width = outputSize;
+    exportCanvas.height = outputSize;
+    exportContext.save();
+    exportContext.setTransform(1, 0, 0, 1, 0, 0);
+    exportContext.globalCompositeOperation = 'source-over';
+    exportContext.clearRect(0, 0, outputSize, outputSize);
+    exportContext.drawImage(surfaceCanvas, 0, 0, outputSize, outputSize);
+    exportContext.globalCompositeOperation = 'source-in';
+    exportContext.fillStyle = 'rgb(255 255 255)';
+    exportContext.fillRect(0, 0, outputSize, outputSize);
+    exportContext.globalCompositeOperation = 'destination-over';
+    exportContext.fillStyle = 'rgb(0 0 0)';
+    exportContext.fillRect(0, 0, outputSize, outputSize);
+    exportContext.restore();
+    return {
+        dataUrl: exportCanvas.toDataURL('image/png'),
+        width: outputSize,
+        height: outputSize,
+        mimeType: 'image/png',
+        format: 'black-white',
+        maskedColor: 'white',
+        unmaskedColor: 'black'
+    };
+}

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

@@ -0,0 +1,23 @@
+export type ImageMaskValue = {
+    dataUrl: string;
+    width: number;
+    height: number;
+    mimeType: 'image/png';
+    format: 'black-white';
+    maskedColor: 'white';
+    unmaskedColor: 'black';
+};
+export type MaskPoint = {
+    x: number;
+    y: number;
+};
+export type MaskTool = 'paint' | 'erase';
+export type MaskStroke = {
+    tool: MaskTool;
+    points: MaskPoint[];
+    brushSize: number;
+};
+export type ContourPath = {
+    points: MaskPoint[];
+    closed: boolean;
+};