@heyramzi/ui 2.11.1 → 2.11.2

package/dist/canvas/headless/snap-guides.js

@@ -1,100 +1,116 @@
+/** Default pull, in flow units. Callers divide by zoom to hold it on screen. */
 export const SNAP_THRESHOLD = 6;
 const SIZE_KEY = {
-    x: "width",
-    y: "height"
+	x: "width",
+	y: "height"
 };
 const CROSS = {
-    x: "y",
-    y: "x"
+	x: "y",
+	y: "x"
 };
+/** The three lines a rect offers on one axis: its two edges and its centre. */
 function linesOf(rect, axis) {
-    const start = rect[axis];
-    const size = rect[SIZE_KEY[axis]];
-    return [
-        start,
-        start + size / 2,
-        start + size
-    ];
+	const start = rect[axis];
+	const size = rect[SIZE_KEY[axis]];
+	return [
+		start,
+		start + size / 2,
+		start + size
+	];
 }
 function snapAxis(dragged, others, axis, threshold) {
-    const mine = linesOf(dragged, axis);
-    const pairings = others.flatMap((other)=>linesOf(other, axis).flatMap((theirs)=>mine.map((own)=>({
-                    delta: theirs - own,
-                    position: theirs
-                }))));
-    const inRange = pairings.filter((pair)=>Math.abs(pair.delta) <= threshold);
-    if (inRange.length === 0) return {
-        delta: 0,
-        position: null
-    };
-    return inRange.reduce((a, b)=>Math.abs(b.delta) < Math.abs(a.delta) ? b : a);
+	const mine = linesOf(dragged, axis);
+	// Flat rather than nested: every pairing of one of our lines with one of
+	// theirs, then the nearest pairing inside the threshold.
+	const pairings = others.flatMap((other) => linesOf(other, axis).flatMap((theirs) => mine.map((own) => ({
+		delta: theirs - own,
+		position: theirs
+	}))));
+	const inRange = pairings.filter((pair) => Math.abs(pair.delta) <= threshold);
+	if (inRange.length === 0) return {
+		delta: 0,
+		position: null
+	};
+	return inRange.reduce((a, b) => Math.abs(b.delta) < Math.abs(a.delta) ? b : a);
 }
+/** Every other rect that sits on `position`, so the guide spans all of them. */
 function guideFor(snapped, others, axis, position) {
-    const cross = CROSS[axis];
-    const size = SIZE_KEY[cross];
-    const onLine = others.filter((other)=>linesOf(other, axis).some((line)=>Math.abs(line - position) < 0.5));
-    return {
-        axis,
-        position,
-        start: Math.min(snapped[cross], ...onLine.map((o)=>o[cross])),
-        end: Math.max(snapped[cross] + snapped[size], ...onLine.map((o)=>o[cross] + o[size]))
-    };
+	const cross = CROSS[axis];
+	const size = SIZE_KEY[cross];
+	const onLine = others.filter((other) => linesOf(other, axis).some((line) => Math.abs(line - position) < .5));
+	return {
+		axis,
+		position,
+		start: Math.min(snapped[cross], ...onLine.map((o) => o[cross])),
+		end: Math.max(snapped[cross] + snapped[size], ...onLine.map((o) => o[cross] + o[size]))
+	};
 }
+/** Pull `dragged` onto the nearest line of `others`, one axis at a time. */
 export function computeSnap(dragged, others, threshold = SNAP_THRESHOLD) {
-    if (others.length === 0) return {
-        x: dragged.x,
-        y: dragged.y,
-        guides: []
-    };
-    const horizontal = snapAxis(dragged, others, "x", threshold);
-    const vertical = snapAxis(dragged, others, "y", threshold);
-    const snapped = {
-        ...dragged,
-        x: dragged.x + horizontal.delta,
-        y: dragged.y + vertical.delta
-    };
-    const guides = [];
-    if (horizontal.position !== null) {
-        guides.push(guideFor(snapped, others, "x", horizontal.position));
-    }
-    if (vertical.position !== null) {
-        guides.push(guideFor(snapped, others, "y", vertical.position));
-    }
-    return {
-        x: snapped.x,
-        y: snapped.y,
-        guides
-    };
+	if (others.length === 0) return {
+		x: dragged.x,
+		y: dragged.y,
+		guides: []
+	};
+	const horizontal = snapAxis(dragged, others, "x", threshold);
+	const vertical = snapAxis(dragged, others, "y", threshold);
+	const snapped = {
+		...dragged,
+		x: dragged.x + horizontal.delta,
+		y: dragged.y + vertical.delta
+	};
+	const guides = [];
+	if (horizontal.position !== null) {
+		guides.push(guideFor(snapped, others, "x", horizontal.position));
+	}
+	if (vertical.position !== null) {
+		guides.push(guideFor(snapped, others, "y", vertical.position));
+	}
+	return {
+		x: snapped.x,
+		y: snapped.y,
+		guides
+	};
 }
+/**
+* The editor's seam. Pull a held free node onto the others and report the
+* lines. A node in a container is not a candidate.
+*/
+// The correction goes back into the returned nodes, which is what makes it
+// magnetism and not a hint. xyflow recomputes from the drag origin, so it
+// never stacks.
 export function snapDraggedNode(nodes, held, zoom) {
-    const rect = freeNodeRect(held);
-    if (!held || !rect) return {
-        nodes,
-        guides: []
-    };
-    const others = nodes.filter((n)=>n.id !== held.id).map(freeNodeRect).filter((r)=>r !== null);
-    const snap = computeSnap(rect, others, SNAP_THRESHOLD / (zoom || 1));
-    const moved = snap.x !== held.position.x || snap.y !== held.position.y;
-    const next = moved ? nodes.map((n)=>n.id === held.id ? {
-            ...n,
-            position: {
-                x: snap.x,
-                y: snap.y
-            }
-        } : n) : nodes;
-    return {
-        nodes: next,
-        guides: snap.guides
-    };
+	const rect = freeNodeRect(held);
+	if (!held || !rect) return {
+		nodes,
+		guides: []
+	};
+	const others = nodes.filter((n) => n.id !== held.id).map(freeNodeRect).filter((r) => r !== null);
+	// The threshold is in flow units, so the pull is the same few pixels on
+	// screen whether the board is zoomed to a wall or to one card.
+	const snap = computeSnap(rect, others, SNAP_THRESHOLD / (zoom || 1));
+	const moved = snap.x !== held.position.x || snap.y !== held.position.y;
+	const next = moved ? nodes.map((n) => n.id === held.id ? {
+		...n,
+		position: {
+			x: snap.x,
+			y: snap.y
+		}
+	} : n) : nodes;
+	return {
+		nodes: next,
+		guides: snap.guides
+	};
 }
+/** A candidate rect, or null for a node a container positions or hides. */
 function freeNodeRect(node) {
-    if (!node || node.parentId || node.hidden) return null;
-    const { width, height } = node.measured ?? {};
-    if (!width || !height) return null;
-    return {
-        x: node.position.x,
-        y: node.position.y,
-        width,
-        height
-    };
+	if (!node || node.parentId || node.hidden) return null;
+	const { width, height } = node.measured ?? {};
+	if (!width || !height) return null;
+	return {
+		x: node.position.x,
+		y: node.position.y,
+		width,
+		height
+	};
 }

package/dist/canvas/headless/svg-figure.js

@@ -1,137 +1,153 @@
+// A small drawing on a board. Markup arrives over the API, so it's rebuilt tag by
+// tag from an allowlist. Authoring: see the package README.
+/** Shapes, text and the local defs they reference. No `a`, `use` or `image`:
+*  each one can point somewhere off the page. */
 const ALLOWED_TAGS = new Set([
-    "svg",
-    "g",
-    "defs",
-    "title",
-    "desc",
-    "linearGradient",
-    "radialGradient",
-    "stop",
-    "marker",
-    "clipPath",
-    "path",
-    "rect",
-    "circle",
-    "ellipse",
-    "line",
-    "polyline",
-    "polygon",
-    "text",
-    "tspan"
+	"svg",
+	"g",
+	"defs",
+	"title",
+	"desc",
+	"linearGradient",
+	"radialGradient",
+	"stop",
+	"marker",
+	"clipPath",
+	"path",
+	"rect",
+	"circle",
+	"ellipse",
+	"line",
+	"polyline",
+	"polygon",
+	"text",
+	"tspan"
 ]);
+/** Geometry and paint only. An allowlist and not a denylist, so `onload` and
+*  `href` are out by being absent rather than by being remembered. */
 const ALLOWED_ATTRS = new Set([
-    "viewBox",
-    "width",
-    "height",
-    "x",
-    "y",
-    "x1",
-    "x2",
-    "y1",
-    "y2",
-    "cx",
-    "cy",
-    "r",
-    "rx",
-    "ry",
-    "d",
-    "points",
-    "dx",
-    "dy",
-    "transform",
-    "fill",
-    "fill-opacity",
-    "fill-rule",
-    "stroke",
-    "stroke-width",
-    "stroke-dasharray",
-    "stroke-dashoffset",
-    "stroke-linecap",
-    "stroke-linejoin",
-    "stroke-opacity",
-    "opacity",
-    "font-size",
-    "font-weight",
-    "font-style",
-    "letter-spacing",
-    "text-anchor",
-    "dominant-baseline",
-    "offset",
-    "stop-color",
-    "stop-opacity",
-    "gradientUnits",
-    "gradientTransform",
-    "clip-path",
-    "clipPathUnits",
-    "marker-end",
-    "marker-start",
-    "markerWidth",
-    "markerHeight",
-    "refX",
-    "refY",
-    "orient",
-    "id",
-    "class",
-    "preserveAspectRatio"
+	"viewBox",
+	"width",
+	"height",
+	"x",
+	"y",
+	"x1",
+	"x2",
+	"y1",
+	"y2",
+	"cx",
+	"cy",
+	"r",
+	"rx",
+	"ry",
+	"d",
+	"points",
+	"dx",
+	"dy",
+	"transform",
+	"fill",
+	"fill-opacity",
+	"fill-rule",
+	"stroke",
+	"stroke-width",
+	"stroke-dasharray",
+	"stroke-dashoffset",
+	"stroke-linecap",
+	"stroke-linejoin",
+	"stroke-opacity",
+	"opacity",
+	"font-size",
+	"font-weight",
+	"font-style",
+	"letter-spacing",
+	"text-anchor",
+	"dominant-baseline",
+	"offset",
+	"stop-color",
+	"stop-opacity",
+	"gradientUnits",
+	"gradientTransform",
+	"clip-path",
+	"clipPathUnits",
+	"marker-end",
+	"marker-start",
+	"markerWidth",
+	"markerHeight",
+	"refX",
+	"refY",
+	"orient",
+	"id",
+	"class",
+	"preserveAspectRatio"
 ]);
-export const MAX_FIGURE_CHARS = 16000;
+/** A figure is a diagram, not a pasted illustration: past this it is an asset
+*  with a URL, and the board holds an image node instead. */
+export const MAX_FIGURE_CHARS = 16e3;
 const TAG = /<\/?([a-zA-Z][\w:-]*)((?:"[^"]*"|'[^']*'|[^>])*?)\/?>/g;
 const ATTR = /([a-zA-Z][\w:-]*)\s*=\s*("([^"]*)"|'([^']*)')/g;
+/** A reference out of the document. `url(#local)` stays; everything else goes. */
 const FOREIGN_URL = /url\(\s*['"]?(?!#)/i;
 function cleanAttrs(raw) {
-    const kept = [];
-    for (const match of raw.matchAll(ATTR)){
-        const name = match[1];
-        const value = match[3] ?? match[4] ?? "";
-        if (!ALLOWED_ATTRS.has(name)) continue;
-        if (FOREIGN_URL.test(value)) continue;
-        kept.push(`${name}="${value.replace(/"/g, "&quot;")}"`);
-    }
-    return kept.length > 0 ? ` ${kept.join(" ")}` : "";
+	const kept = [];
+	for (const match of raw.matchAll(ATTR)) {
+		const name = match[1];
+		const value = match[3] ?? match[4] ?? "";
+		if (!ALLOWED_ATTRS.has(name)) continue;
+		if (FOREIGN_URL.test(value)) continue;
+		kept.push(`${name}="${value.replace(/"/g, "&quot;")}"`);
+	}
+	return kept.length > 0 ? ` ${kept.join(" ")}` : "";
 }
+/** The figure as it's safe to draw, or null without an `<svg>`. Script, style and foreignObject go with contents; unknown tags drop, keeping text. */
 export function sanitizeFigureSvg(raw) {
-    if (typeof raw !== "string" || raw.length > MAX_FIGURE_CHARS) return null;
-    const stripped = raw.replace(/<!--[\s\S]*?-->/g, "").replace(/<!\[CDATA\[[\s\S]*?\]\]>/g, "").replace(/<\?[\s\S]*?\?>/g, "").replace(/<!DOCTYPE[^>]*>/gi, "").replace(/<(script|style|foreignObject|iframe)\b[\s\S]*?<\/\1\s*>/gi, "");
-    if (!/<svg\b/i.test(stripped)) return null;
-    let out = "";
-    let cursor = 0;
-    for (const match of stripped.matchAll(TAG)){
-        const [tag, name, attrs] = match;
-        const start = match.index ?? 0;
-        out += stripped.slice(cursor, start);
-        cursor = start + tag.length;
-        if (!ALLOWED_TAGS.has(name)) continue;
-        if (tag.startsWith("</")) {
-            out += `</${name}>`;
-            continue;
-        }
-        out += `<${name}${cleanAttrs(attrs)}${tag.endsWith("/>") ? " />" : ">"}`;
-    }
-    out += stripped.slice(cursor);
-    return out.trim();
+	if (typeof raw !== "string" || raw.length > MAX_FIGURE_CHARS) return null;
+	const stripped = raw.replace(/<!--[\s\S]*?-->/g, "").replace(/<!\[CDATA\[[\s\S]*?\]\]>/g, "").replace(/<\?[\s\S]*?\?>/g, "").replace(/<!DOCTYPE[^>]*>/gi, "").replace(/<(script|style|foreignObject|iframe)\b[\s\S]*?<\/\1\s*>/gi, "");
+	if (!/<svg\b/i.test(stripped)) return null;
+	let out = "";
+	let cursor = 0;
+	for (const match of stripped.matchAll(TAG)) {
+		const [tag, name, attrs] = match;
+		const start = match.index ?? 0;
+		out += stripped.slice(cursor, start);
+		cursor = start + tag.length;
+		if (!ALLOWED_TAGS.has(name)) continue;
+		if (tag.startsWith("</")) {
+			out += `</${name}>`;
+			continue;
+		}
+		out += `<${name}${cleanAttrs(attrs)}${tag.endsWith("/>") ? " />" : ">"}`;
+	}
+	out += stripped.slice(cursor);
+	return out.trim();
 }
 function rootAttr(svg, name) {
-    const root = svg.match(/<svg\b([^>]*)>/i);
-    if (!root) return undefined;
-    const found = root[1].match(new RegExp(`${name}\\s*=\\s*"([^"]*)"`, "i"));
-    return found?.[1];
+	const root = svg.match(/<svg\b([^>]*)>/i);
+	if (!root) return undefined;
+	const found = root[1].match(new RegExp(`${name}\\s*=\\s*"([^"]*)"`, "i"));
+	return found?.[1];
 }
+/** Height over width, from the viewBox the author drew in. */
 export function figureRatio(svg) {
-    const box = rootAttr(svg, "viewBox");
-    if (box) {
-        const [, , w, h] = box.trim().split(/[\s,]+/).map(Number);
-        if (w > 0 && h > 0) return h / w;
-    }
-    const w = Number.parseFloat(rootAttr(svg, "width") ?? "");
-    const h = Number.parseFloat(rootAttr(svg, "height") ?? "");
-    return w > 0 && h > 0 ? h / w : null;
+	const box = rootAttr(svg, "viewBox");
+	if (box) {
+		const [, , w, h] = box.trim().split(/[\s,]+/).map(Number);
+		if (w > 0 && h > 0) return h / w;
+	}
+	const w = Number.parseFloat(rootAttr(svg, "width") ?? "");
+	const h = Number.parseFloat(rootAttr(svg, "height") ?? "");
+	return w > 0 && h > 0 ? h / w : null;
 }
-export function figureBoxHeight(svg, width, fallback = 0.4) {
-    return Math.round(width * (figureRatio(svg) ?? fallback));
+/** The box the drawing needs. The fallback is a wide banner, the shape a
+*  board figure takes when the author gave no viewBox. */
+export function figureBoxHeight(svg, width, fallback = .4) {
+	return Math.round(width * (figureRatio(svg) ?? fallback));
 }
+/** The heading over a figure and the line under it, with their margins. These
+*  mirror sketch-figure.svelte and move when its type sizes do. */
 const LABEL_H = 27;
 const CAPTION_H = 24;
+/** The whole node: the drawing, plus whatever text sits around it. */
 export function figureNodeHeight(figure, width) {
-    const art = figure.height ?? figureBoxHeight(figure.svg ?? "", width);
-    return art + (figure.label ? LABEL_H : 0) + (figure.caption ? CAPTION_H : 0);
+	const art = figure.height ?? figureBoxHeight(figure.svg ?? "", width);
+	return art + (figure.label ? LABEL_H : 0) + (figure.caption ? CAPTION_H : 0);
 }