@heyramzi/ui 2.11.0 → 2.11.2

package/dist/canvas/pen/eraser.js

@@ -1,35 +1,36 @@
+// The eraser hits whole strokes only, so a swipe across a big shape never wipes it.
 import { distanceToStroke } from "./geometry.js";
 import { STROKE_NODE } from "./types.js";
 function isStrokeData(data) {
-    return Array.isArray(data.points) && typeof data.size === "number";
+	return Array.isArray(data.points) && typeof data.size === "number";
 }
+/** Ids of the strokes whose line passes within `radius` of `at`, a flow-space point. */
 export function strokesUnder(nodes, at, radius) {
-    const hits = [];
-    for (const node of nodes){
-        if (node.type !== STROKE_NODE || !isStrokeData(node.data)) continue;
-        const local = {
-            x: at.x - node.position.x,
-            y: at.y - node.position.y
-        };
-        if (distanceToStroke(node.data.points, local) <= radius + node.data.size / 2) {
-            hits.push(node.id);
-        }
-    }
-    return hits;
+	const hits = [];
+	for (const node of nodes) {
+		if (node.type !== STROKE_NODE || !isStrokeData(node.data)) continue;
+		const local = {
+			x: at.x - node.position.x,
+			y: at.y - node.position.y
+		};
+		if (distanceToStroke(node.data.points, local) <= radius + node.data.size / 2) {
+			hits.push(node.id);
+		}
+	}
+	return hits;
 }
+/** The same test along a swipe, so a fast pointer can't skip over a thin line. */
 export function strokesAlong(nodes, from, to, radius) {
-    const length = Math.hypot(to.x - from.x, to.y - from.y);
-    const steps = Math.max(1, Math.ceil(length / Math.max(radius / 2, 1)));
-    const hits = new Set();
-    for(let i = 0; i <= steps; i++){
-        const t = i / steps;
-        const at = {
-            x: from.x + (to.x - from.x) * t,
-            y: from.y + (to.y - from.y) * t
-        };
-        for (const id of strokesUnder(nodes, at, radius))hits.add(id);
-    }
-    return [
-        ...hits
-    ];
+	const length = Math.hypot(to.x - from.x, to.y - from.y);
+	const steps = Math.max(1, Math.ceil(length / Math.max(radius / 2, 1)));
+	const hits = new Set();
+	for (let i = 0; i <= steps; i++) {
+		const t = i / steps;
+		const at = {
+			x: from.x + (to.x - from.x) * t,
+			y: from.y + (to.y - from.y) * t
+		};
+		for (const id of strokesUnder(nodes, at, radius)) hits.add(id);
+	}
+	return [...hits];
 }

package/dist/canvas/pen/geometry.js

@@ -1,143 +1,133 @@
 import { PEN_DEFAULTS, STROKE_NODE } from "./types.js";
-const SIMPLIFY_TOLERANCE = 0.6;
+/** How far, in screen pixels, a saved stroke may stray from what was drawn. */
+const SIMPLIFY_TOLERANCE = .6;
 function round(value, places) {
-    const factor = 10 ** places;
-    return Math.round(value * factor) / factor;
+	const factor = 10 ** places;
+	return Math.round(value * factor) / factor;
 }
+/** Distance from p to the segment a-b. */
 export function distanceToSegment(p, a, b) {
-    const dx = b.x - a.x;
-    const dy = b.y - a.y;
-    const lengthSquared = dx * dx + dy * dy;
-    if (lengthSquared === 0) return Math.hypot(p.x - a.x, p.y - a.y);
-    const t = Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / lengthSquared));
-    return Math.hypot(p.x - (a.x + t * dx), p.y - (a.y + t * dy));
+	const dx = b.x - a.x;
+	const dy = b.y - a.y;
+	const lengthSquared = dx * dx + dy * dy;
+	if (lengthSquared === 0) return Math.hypot(p.x - a.x, p.y - a.y);
+	const t = Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / lengthSquared));
+	return Math.hypot(p.x - (a.x + t * dx), p.y - (a.y + t * dy));
 }
+/**
+* Ramer-Douglas-Peucker over x and y, run on an index stack so a long scribble
+* can't overflow the call stack. The first and last samples always stay.
+*/
 export function simplifyPoints(points, tolerance) {
-    if (points.length <= 2) return [
-        ...points
-    ];
-    const keep = new Uint8Array(points.length);
-    keep[0] = 1;
-    keep[points.length - 1] = 1;
-    const stack = [
-        [
-            0,
-            points.length - 1
-        ]
-    ];
-    while(stack.length > 0){
-        const [start, end] = stack.pop();
-        const a = {
-            x: points[start][0],
-            y: points[start][1]
-        };
-        const b = {
-            x: points[end][0],
-            y: points[end][1]
-        };
-        let farthest = -1;
-        let farthestDistance = tolerance;
-        for(let i = start + 1; i < end; i++){
-            const distance = distanceToSegment({
-                x: points[i][0],
-                y: points[i][1]
-            }, a, b);
-            if (distance > farthestDistance) {
-                farthest = i;
-                farthestDistance = distance;
-            }
-        }
-        if (farthest === -1) continue;
-        keep[farthest] = 1;
-        stack.push([
-            start,
-            farthest
-        ], [
-            farthest,
-            end
-        ]);
-    }
-    return points.filter((_, i)=>keep[i] === 1);
+	if (points.length <= 2) return [...points];
+	const keep = new Uint8Array(points.length);
+	keep[0] = 1;
+	keep[points.length - 1] = 1;
+	const stack = [[0, points.length - 1]];
+	while (stack.length > 0) {
+		const [start, end] = stack.pop();
+		const a = {
+			x: points[start][0],
+			y: points[start][1]
+		};
+		const b = {
+			x: points[end][0],
+			y: points[end][1]
+		};
+		let farthest = -1;
+		let farthestDistance = tolerance;
+		for (let i = start + 1; i < end; i++) {
+			const distance = distanceToSegment({
+				x: points[i][0],
+				y: points[i][1]
+			}, a, b);
+			if (distance > farthestDistance) {
+				farthest = i;
+				farthestDistance = distance;
+			}
+		}
+		if (farthest === -1) continue;
+		keep[farthest] = 1;
+		stack.push([start, farthest], [farthest, end]);
+	}
+	return points.filter((_, i) => keep[i] === 1);
 }
 export function pointsBounds(points) {
-    let minX = Infinity;
-    let minY = Infinity;
-    let maxX = -Infinity;
-    let maxY = -Infinity;
-    for (const [x, y] of points){
-        minX = Math.min(minX, x);
-        minY = Math.min(minY, y);
-        maxX = Math.max(maxX, x);
-        maxY = Math.max(maxY, y);
-    }
-    return {
-        x: minX,
-        y: minY,
-        width: maxX - minX,
-        height: maxY - minY
-    };
+	let minX = Infinity;
+	let minY = Infinity;
+	let maxX = -Infinity;
+	let maxY = -Infinity;
+	for (const [x, y] of points) {
+		minX = Math.min(minX, x);
+		minY = Math.min(minY, y);
+		maxX = Math.max(maxX, x);
+		maxY = Math.max(maxY, y);
+	}
+	return {
+		x: minX,
+		y: minY,
+		width: maxX - minX,
+		height: maxY - minY
+	};
 }
+/** Points are saved relative to the node, padded by the brush so the selection box holds the whole outline. */
 export function buildStrokeNode(samples, options = {}) {
-    if (samples.length === 0) return null;
-    const tool = options.tool ?? "pen";
-    const size = options.size ?? PEN_DEFAULTS[tool].size;
-    const tolerance = SIMPLIFY_TOLERANCE / Math.max(options.zoom ?? 1, 0.1);
-    const source = samples.length === 1 ? [
-        samples[0],
-        samples[0]
-    ] : samples;
-    const simplified = simplifyPoints(source, tolerance);
-    const hasPressure = simplified.some((point)=>point[2] !== undefined);
-    const pad = Math.ceil(size / 2) + 2;
-    const box = pointsBounds(simplified);
-    const origin = {
-        x: box.x - pad,
-        y: box.y - pad
-    };
-    const points = simplified.map(([x, y, pressure])=>{
-        const px = round(x - origin.x, 1);
-        const py = round(y - origin.y, 1);
-        return hasPressure ? [
-            px,
-            py,
-            round(pressure ?? 0.5, 2)
-        ] : [
-            px,
-            py
-        ];
-    });
-    return {
-        id: options.id,
-        type: STROKE_NODE,
-        position: {
-            x: round(origin.x, 1),
-            y: round(origin.y, 1)
-        },
-        data: {
-            points,
-            color: options.color ?? PEN_DEFAULTS.color,
-            size,
-            tool,
-            simulatePressure: !hasPressure
-        },
-        width: Math.ceil(box.width + pad * 2),
-        height: Math.ceil(box.height + pad * 2)
-    };
+	if (samples.length === 0) return null;
+	const tool = options.tool ?? "pen";
+	const size = options.size ?? PEN_DEFAULTS[tool].size;
+	const tolerance = SIMPLIFY_TOLERANCE / Math.max(options.zoom ?? 1, .1);
+	// A tap is one sample. Doubling it gives the outline a segment, so it draws as a dot.
+	const source = samples.length === 1 ? [samples[0], samples[0]] : samples;
+	const simplified = simplifyPoints(source, tolerance);
+	const hasPressure = simplified.some((point) => point[2] !== undefined);
+	const pad = Math.ceil(size / 2) + 2;
+	const box = pointsBounds(simplified);
+	const origin = {
+		x: box.x - pad,
+		y: box.y - pad
+	};
+	const points = simplified.map(([x, y, pressure]) => {
+		const px = round(x - origin.x, 1);
+		const py = round(y - origin.y, 1);
+		return hasPressure ? [
+			px,
+			py,
+			round(pressure ?? .5, 2)
+		] : [px, py];
+	});
+	return {
+		id: options.id,
+		type: STROKE_NODE,
+		position: {
+			x: round(origin.x, 1),
+			y: round(origin.y, 1)
+		},
+		data: {
+			points,
+			color: options.color ?? PEN_DEFAULTS.color,
+			size,
+			tool,
+			simulatePressure: !hasPressure
+		},
+		width: Math.ceil(box.width + pad * 2),
+		height: Math.ceil(box.height + pad * 2)
+	};
 }
+/** Smallest distance from p to the stroke's centre line, in the stroke's own coordinates. */
 export function distanceToStroke(points, p) {
-    if (points.length === 0) return Infinity;
-    if (points.length === 1) return Math.hypot(p.x - points[0][0], p.y - points[0][1]);
-    let best = Infinity;
-    for(let i = 1; i < points.length; i++){
-        const a = {
-            x: points[i - 1][0],
-            y: points[i - 1][1]
-        };
-        const b = {
-            x: points[i][0],
-            y: points[i][1]
-        };
-        best = Math.min(best, distanceToSegment(p, a, b));
-    }
-    return best;
+	if (points.length === 0) return Infinity;
+	if (points.length === 1) return Math.hypot(p.x - points[0][0], p.y - points[0][1]);
+	let best = Infinity;
+	for (let i = 1; i < points.length; i++) {
+		const a = {
+			x: points[i - 1][0],
+			y: points[i - 1][1]
+		};
+		const b = {
+			x: points[i][0],
+			y: points[i][1]
+		};
+		best = Math.min(best, distanceToSegment(p, a, b));
+	}
+	return best;
 }

package/dist/canvas/pen/index.js

@@ -1,3 +1,4 @@
+// The pen layer, server-safe. Svelte parts are in ./ui.js.
 export { PEN_HEX, penColorVar } from "./colors.js";
 export { strokesAlong, strokesUnder } from "./eraser.js";
 export { buildStrokeNode, distanceToStroke, pointsBounds, simplifyPoints } from "./geometry.js";

package/dist/canvas/pen/ops.js

@@ -1,15 +1,15 @@
 export function addPenNode(node) {
-    return {
-        kind: "addNode",
-        node: {
-            ...node,
-            id: node.id ?? crypto.randomUUID()
-        }
-    };
+	return {
+		kind: "addNode",
+		node: {
+			...node,
+			id: node.id ?? crypto.randomUUID()
+		}
+	};
 }
 export function removePenNode(nodeId) {
-    return {
-        kind: "removeNode",
-        nodeId
-    };
+	return {
+		kind: "removeNode",
+		nodeId
+	};
 }