@heyramzi/ui 2.11.0 → 2.11.2

package/dist/canvas/editor/keymap.js

@@ -1,193 +1,119 @@
+/** True while the event's target owns its own text editing. */
 export function isEditingTarget(target) {
-    const el = target;
-    const tag = el?.tagName;
-    return tag === "INPUT" || tag === "TEXTAREA" || el?.isContentEditable === true;
+	const el = target;
+	const tag = el?.tagName;
+	return tag === "INPUT" || tag === "TEXTAREA" || el?.isContentEditable === true;
 }
+/** The action a key means on the canvas, or null when the canvas does not own it. */
 export function resolveEditorKeyAction(event, hasSelection) {
-    const key = event.key.toLowerCase();
-    const mod = event.metaKey || event.ctrlKey;
-    const editing = isEditingTarget(event.target);
-    if (mod) return modAction(key, event.shiftKey, editing);
-    if (event.key === "Delete" || event.key === "Backspace") {
-        return hasSelection && !editing ? "delete" : null;
-    }
-    return editing || event.altKey ? null : plainAction(event);
+	const key = event.key.toLowerCase();
+	const mod = event.metaKey || event.ctrlKey;
+	const editing = isEditingTarget(event.target);
+	if (mod) return modAction(key, event.shiftKey, editing);
+	if (event.key === "Delete" || event.key === "Backspace") {
+		return hasSelection && !editing ? "delete" : null;
+	}
+	return editing || event.altKey ? null : plainAction(event);
 }
+/** Shift with a digit zooms. Read by code, so a layout that moves the digits still works. */
 const SHIFT_ZOOM = new Map([
-    [
-        "Digit0",
-        "zoom-100"
-    ],
-    [
-        "Digit1",
-        "zoom-fit"
-    ],
-    [
-        "Digit2",
-        "zoom-selection"
-    ]
+	["Digit0", "zoom-100"],
+	["Digit1", "zoom-fit"],
+	["Digit2", "zoom-selection"]
 ]);
 const PLAIN_KEYS = new Map([
-    [
-        "]",
-        "bring-forward"
-    ],
-    [
-        "[",
-        "send-backward"
-    ],
-    [
-        "+",
-        "zoom-in"
-    ],
-    [
-        "=",
-        "zoom-in"
-    ],
-    [
-        "-",
-        "zoom-out"
-    ],
-    [
-        "_",
-        "zoom-out"
-    ]
+	["]", "bring-forward"],
+	["[", "send-backward"],
+	["+", "zoom-in"],
+	["=", "zoom-in"],
+	["-", "zoom-out"],
+	["_", "zoom-out"]
 ]);
+/** Zoom keys with no chord: + and -, and Shift with 0, 1 or 2. */
 function plainAction(event) {
-    const zoom = event.shiftKey ? SHIFT_ZOOM.get(event.code) : undefined;
-    return zoom ?? PLAIN_KEYS.get(event.key) ?? null;
+	const zoom = event.shiftKey ? SHIFT_ZOOM.get(event.code) : undefined;
+	return zoom ?? PLAIN_KEYS.get(event.key) ?? null;
 }
+/** The move an arrow key asks for: 1px, or 10px with Shift. Null for anything else, or while a field owns the keys. */
 export function resolveNudge(event) {
-    if (event.metaKey || event.ctrlKey || event.altKey || isEditingTarget(event.target)) return null;
-    const step = event.shiftKey ? 10 : 1;
-    switch(event.key){
-        case "ArrowLeft":
-            return {
-                dx: -step,
-                dy: 0
-            };
-        case "ArrowRight":
-            return {
-                dx: step,
-                dy: 0
-            };
-        case "ArrowUp":
-            return {
-                dx: 0,
-                dy: -step
-            };
-        case "ArrowDown":
-            return {
-                dx: 0,
-                dy: step
-            };
-        default:
-            return null;
-    }
+	if (event.metaKey || event.ctrlKey || event.altKey || isEditingTarget(event.target)) return null;
+	const step = event.shiftKey ? 10 : 1;
+	switch (event.key) {
+		case "ArrowLeft": return {
+			dx: -step,
+			dy: 0
+		};
+		case "ArrowRight": return {
+			dx: step,
+			dy: 0
+		};
+		case "ArrowUp": return {
+			dx: 0,
+			dy: -step
+		};
+		case "ArrowDown": return {
+			dx: 0,
+			dy: step
+		};
+		default: return null;
+	}
 }
-const both = (action)=>[
-        action,
-        action
-    ];
+const both = (action) => [action, action];
 const CHORDS = new Map([
-    [
-        "c",
-        [
-            "copy",
-            "copy-as-png"
-        ]
-    ],
-    [
-        "v",
-        both("paste")
-    ],
-    [
-        "a",
-        both("select-all")
-    ],
-    [
-        "d",
-        [
-            "duplicate",
-            null
-        ]
-    ],
-    [
-        "g",
-        [
-            "group",
-            "ungroup"
-        ]
-    ],
-    [
-        "l",
-        [
-            null,
-            "lock"
-        ]
-    ],
-    [
-        "]",
-        both("bring-to-front")
-    ],
-    [
-        "[",
-        both("send-to-back")
-    ],
-    [
-        "enter",
-        both("present")
-    ],
-    [
-        "=",
-        both("zoom-in")
-    ],
-    [
-        "+",
-        both("zoom-in")
-    ],
-    [
-        "-",
-        both("zoom-out")
-    ],
-    [
-        "_",
-        both("zoom-out")
-    ]
+	["c", ["copy", "copy-as-png"]],
+	["v", both("paste")],
+	["a", both("select-all")],
+	["d", ["duplicate", null]],
+	["g", ["group", "ungroup"]],
+	["l", [null, "lock"]],
+	["]", both("bring-to-front")],
+	["[", both("send-to-back")],
+	["enter", both("present")],
+	["=", both("zoom-in")],
+	["+", both("zoom-in")],
+	["-", both("zoom-out")],
+	["_", both("zoom-out")]
 ]);
+/** The chord half of the map. `editing` is true while a field owns the keys. */
 function modAction(key, shift, editing) {
-    if (key === "z") return shift ? "redo" : "undo";
-    if (key === "y") return "redo";
-    if (key === "s" && !shift) return "save";
-    if (editing) return null;
-    return CHORDS.get(key)?.[shift ? 1 : 0] ?? null;
+	if (key === "z") return shift ? "redo" : "undo";
+	if (key === "y") return "redo";
+	// Save works whatever has focus, and whatever the autosave preference is.
+	if (key === "s" && !shift) return "save";
+	// Cut, copy, paste and select-all belong to the focused field while one is
+	// being typed in; the canvas only claims them otherwise.
+	if (editing) return null;
+	return CHORDS.get(key)?.[shift ? 1 : 0] ?? null;
 }
+/** Tags and roles that activate on Space themselves, so the canvas must not steal it. */
 const SPACE_OWNING_TAGS = new Set([
-    "BUTTON",
-    "A",
-    "SUMMARY",
-    "SELECT",
-    "OPTION"
+	"BUTTON",
+	"A",
+	"SUMMARY",
+	"SELECT",
+	"OPTION"
 ]);
 const SPACE_OWNING_ROLES = new Set([
-    "button",
-    "checkbox",
-    "switch",
-    "menuitem",
-    "menuitemcheckbox",
-    "menuitemradio",
-    "option",
-    "radio",
-    "tab"
+	"button",
+	"checkbox",
+	"switch",
+	"menuitem",
+	"menuitemcheckbox",
+	"menuitemradio",
+	"option",
+	"radio",
+	"tab"
 ]);
+/** Space means hand tool over the canvas, never in a field or on a Space-activating control. Reads code, so remapped layouts still pan. */
 export function isPanActivationKey(event) {
-    if (event.code !== "Space" && event.key !== " ") return false;
-    if (event.metaKey || event.ctrlKey || event.altKey) return false;
-    if (isEditingTarget(event.target)) return false;
-    return !ownsSpace(event.target);
+	if (event.code !== "Space" && event.key !== " ") return false;
+	if (event.metaKey || event.ctrlKey || event.altKey) return false;
+	if (isEditingTarget(event.target)) return false;
+	return !ownsSpace(event.target);
 }
+/** A control that already does something on Space: a button, a checkbox, a tab. */
 function ownsSpace(el) {
-    if (el?.tagName && SPACE_OWNING_TAGS.has(el.tagName)) return true;
-    const role = el?.getAttribute?.("role");
-    return Boolean(role && SPACE_OWNING_ROLES.has(role));
+	if (el?.tagName && SPACE_OWNING_TAGS.has(el.tagName)) return true;
+	const role = el?.getAttribute?.("role");
+	return Boolean(role && SPACE_OWNING_ROLES.has(role));
 }

package/dist/canvas/editor/layout-actions.js

@@ -1,170 +1,169 @@
 import { alignNodesHorizontally, alignNodesVertically } from "../headless/alignment.js";
+/** The smallest a group frame gets. An app passes its own to `tidyGroup`. */
 const DEFAULT_GROUP_MIN = {
-    width: 250,
-    height: 150
+	width: 250,
+	height: 150
 };
 function setX(nodes, x) {
-    for (const n of nodes)n.position.x = x;
+	for (const n of nodes) n.position.x = x;
 }
 function setY(nodes, y) {
-    for (const n of nodes)n.position.y = y;
+	for (const n of nodes) n.position.y = y;
 }
 const ALIGNERS = {
-    left: (nodes)=>setX(nodes, Math.min(...nodes.map((n)=>n.position.x))),
-    right: (nodes)=>setX(nodes, Math.max(...nodes.map((n)=>n.position.x))),
-    top: (nodes)=>alignNodesHorizontally(nodes),
-    bottom: (nodes)=>setY(nodes, Math.max(...nodes.map((n)=>n.position.y))),
-    "center-h": (nodes)=>alignNodesVertically(nodes),
-    "center-v": (nodes)=>setY(nodes, nodes.reduce((sum, n)=>sum + n.position.y, 0) / nodes.length)
+	left: (nodes) => setX(nodes, Math.min(...nodes.map((n) => n.position.x))),
+	right: (nodes) => setX(nodes, Math.max(...nodes.map((n) => n.position.x))),
+	top: (nodes) => alignNodesHorizontally(nodes),
+	bottom: (nodes) => setY(nodes, Math.max(...nodes.map((n) => n.position.y))),
+	"center-h": (nodes) => alignNodesVertically(nodes),
+	"center-v": (nodes) => setY(nodes, nodes.reduce((sum, n) => sum + n.position.y, 0) / nodes.length)
 };
+/**
+* Compute new positions for the given nodes based on alignment direction.
+* Returns a Map of nodeId to new position.
+*/
 export function alignNodes(selected, direction) {
-    if (selected.length < 2) return new Map();
-    const mutableNodes = selected.map((n)=>({
-            id: n.id,
-            position: {
-                ...n.position
-            }
-        }));
-    ALIGNERS[direction](mutableNodes);
-    return new Map(mutableNodes.map((n)=>[
-            n.id,
-            n.position
-        ]));
+	if (selected.length < 2) return new Map();
+	const mutableNodes = selected.map((n) => ({
+		id: n.id,
+		position: { ...n.position }
+	}));
+	ALIGNERS[direction](mutableNodes);
+	return new Map(mutableNodes.map((n) => [n.id, n.position]));
 }
 const TIDY_GAP = 40;
+/**
+* Distribute selected nodes evenly along their dominant axis.
+* Detects whether nodes are mostly horizontal or vertical and
+* equalizes gaps while preserving the cross-axis positions.
+*/
 export function tidySelectedNodes(selected) {
-    if (selected.length < 2) return new Map();
-    const xs = selected.map((n)=>n.position.x);
-    const ys = selected.map((n)=>n.position.y);
-    const xSpread = Math.max(...xs) - Math.min(...xs);
-    const ySpread = Math.max(...ys) - Math.min(...ys);
-    const horizontal = xSpread >= ySpread;
-    const sorted = [
-        ...selected
-    ].sort((a, b)=>horizontal ? a.position.x - b.position.x : a.position.y - b.position.y);
-    return horizontal ? stackAlongX(sorted) : stackAlongY(sorted);
+	if (selected.length < 2) return new Map();
+	const xs = selected.map((n) => n.position.x);
+	const ys = selected.map((n) => n.position.y);
+	const xSpread = Math.max(...xs) - Math.min(...xs);
+	const ySpread = Math.max(...ys) - Math.min(...ys);
+	const horizontal = xSpread >= ySpread;
+	const sorted = [...selected].sort((a, b) => horizontal ? a.position.x - b.position.x : a.position.y - b.position.y);
+	return horizontal ? stackAlongX(sorted) : stackAlongY(sorted);
 }
 function stackAlongX(sorted) {
-    const result = new Map();
-    let cursorX = sorted[0].position.x;
-    for (const node of sorted){
-        result.set(node.id, {
-            x: cursorX,
-            y: node.position.y
-        });
-        cursorX += (node.measured?.width ?? node.width ?? 200) + TIDY_GAP;
-    }
-    return result;
+	const result = new Map();
+	let cursorX = sorted[0].position.x;
+	for (const node of sorted) {
+		result.set(node.id, {
+			x: cursorX,
+			y: node.position.y
+		});
+		cursorX += (node.measured?.width ?? node.width ?? 200) + TIDY_GAP;
+	}
+	return result;
 }
 function stackAlongY(sorted) {
-    const result = new Map();
-    let cursorY = sorted[0].position.y;
-    for (const node of sorted){
-        result.set(node.id, {
-            x: node.position.x,
-            y: cursorY
-        });
-        cursorY += (node.measured?.height ?? node.height ?? 100) + TIDY_GAP;
-    }
-    return result;
+	const result = new Map();
+	let cursorY = sorted[0].position.y;
+	for (const node of sorted) {
+		result.set(node.id, {
+			x: node.position.x,
+			y: cursorY
+		});
+		cursorY += (node.measured?.height ?? node.height ?? 100) + TIDY_GAP;
+	}
+	return result;
 }
+// A group box drawn around a selection: the padding on every side, plus the
+// room the container's own title row takes at the top.
 const GROUP_PADDING = 32;
 const GROUP_HEADER = 36;
 const GROUP_GAP = 24;
 const ROW_TOLERANCE = 8;
+/**
+* Tidy a group's direct children: rows by reading order, even gaps, then the
+* box fitted around them. Null when the group is empty.
+*/
 export function tidyGroup(children, min = DEFAULT_GROUP_MIN) {
-    if (children.length === 0) return null;
-    const width = (n)=>n.measured?.width ?? n.width ?? 200;
-    const height = (n)=>n.measured?.height ?? n.height ?? 100;
-    const rows = [];
-    for (const n of [
-        ...children
-    ].sort((a, b)=>a.position.y - b.position.y)){
-        const row = rows.at(-1);
-        if (row && n.position.y < row.bottom - ROW_TOLERANCE) {
-            row.items.push(n);
-            row.bottom = Math.max(row.bottom, n.position.y + height(n));
-        } else {
-            rows.push({
-                bottom: n.position.y + height(n),
-                items: [
-                    n
-                ]
-            });
-        }
-    }
-    const positions = new Map();
-    let y = GROUP_PADDING + GROUP_HEADER;
-    let right = 0;
-    for (const row of rows){
-        let x = GROUP_PADDING;
-        for (const n of row.items.sort((a, b)=>a.position.x - b.position.x)){
-            positions.set(n.id, {
-                x,
-                y
-            });
-            x += width(n) + GROUP_GAP;
-        }
-        right = Math.max(right, x - GROUP_GAP);
-        y += Math.max(...row.items.map(height)) + GROUP_GAP;
-    }
-    return {
-        positions,
-        size: {
-            width: Math.max(min.width, right + GROUP_PADDING),
-            height: Math.max(min.height, y - GROUP_GAP + GROUP_PADDING)
-        }
-    };
+	if (children.length === 0) return null;
+	const width = (n) => n.measured?.width ?? n.width ?? 200;
+	const height = (n) => n.measured?.height ?? n.height ?? 100;
+	// A node joins the current row when it overlaps it vertically by more than a hair.
+	const rows = [];
+	for (const n of [...children].sort((a, b) => a.position.y - b.position.y)) {
+		const row = rows.at(-1);
+		if (row && n.position.y < row.bottom - ROW_TOLERANCE) {
+			row.items.push(n);
+			row.bottom = Math.max(row.bottom, n.position.y + height(n));
+		} else {
+			rows.push({
+				bottom: n.position.y + height(n),
+				items: [n]
+			});
+		}
+	}
+	const positions = new Map();
+	let y = GROUP_PADDING + GROUP_HEADER;
+	let right = 0;
+	for (const row of rows) {
+		let x = GROUP_PADDING;
+		for (const n of row.items.sort((a, b) => a.position.x - b.position.x)) {
+			positions.set(n.id, {
+				x,
+				y
+			});
+			x += width(n) + GROUP_GAP;
+		}
+		right = Math.max(right, x - GROUP_GAP);
+		y += Math.max(...row.items.map(height)) + GROUP_GAP;
+	}
+	return {
+		positions,
+		size: {
+			width: Math.max(min.width, right + GROUP_PADDING),
+			height: Math.max(min.height, y - GROUP_GAP + GROUP_PADDING)
+		}
+	};
 }
+/** Wrap a selection in a frame node, or [] when there is nothing to group. */
 export function groupSelectionOps(selected, groupLabel, { type = "group", data = {} } = {}) {
-    if (selected.length < 2) return [];
-    const parentId = selected[0].parentId;
-    const members = selected.filter((n)=>n.parentId === parentId);
-    if (members.length < 2) return [];
-    const width = (n)=>n.measured?.width ?? n.width ?? 200;
-    const height = (n)=>n.measured?.height ?? n.height ?? 100;
-    const minX = Math.min(...members.map((n)=>n.position.x));
-    const minY = Math.min(...members.map((n)=>n.position.y));
-    const maxX = Math.max(...members.map((n)=>n.position.x + width(n)));
-    const maxY = Math.max(...members.map((n)=>n.position.y + height(n)));
-    const origin = {
-        x: minX - GROUP_PADDING,
-        y: minY - GROUP_PADDING - GROUP_HEADER
-    };
-    const groupId = crypto.randomUUID();
-    return [
-        {
-            kind: "addNode",
-            node: {
-                id: groupId,
-                type,
-                position: origin,
-                data: {
-                    ...data,
-                    label: groupLabel
-                },
-                width: maxX - minX + GROUP_PADDING * 2,
-                height: maxY - minY + GROUP_PADDING * 2 + GROUP_HEADER,
-                ...parentId ? {
-                    parentId
-                } : {}
-            }
-        },
-        ...members.flatMap((n)=>[
-                {
-                    kind: "setParent",
-                    nodeId: n.id,
-                    parentId: groupId,
-                    extent: "parent"
-                },
-                {
-                    kind: "moveNode",
-                    nodeId: n.id,
-                    position: {
-                        x: n.position.x - origin.x,
-                        y: n.position.y - origin.y
-                    }
-                }
-            ])
-    ];
+	if (selected.length < 2) return [];
+	const parentId = selected[0].parentId;
+	const members = selected.filter((n) => n.parentId === parentId);
+	if (members.length < 2) return [];
+	const width = (n) => n.measured?.width ?? n.width ?? 200;
+	const height = (n) => n.measured?.height ?? n.height ?? 100;
+	const minX = Math.min(...members.map((n) => n.position.x));
+	const minY = Math.min(...members.map((n) => n.position.y));
+	const maxX = Math.max(...members.map((n) => n.position.x + width(n)));
+	const maxY = Math.max(...members.map((n) => n.position.y + height(n)));
+	const origin = {
+		x: minX - GROUP_PADDING,
+		y: minY - GROUP_PADDING - GROUP_HEADER
+	};
+	const groupId = crypto.randomUUID();
+	return [{
+		kind: "addNode",
+		node: {
+			id: groupId,
+			type,
+			position: origin,
+			data: {
+				...data,
+				label: groupLabel
+			},
+			width: maxX - minX + GROUP_PADDING * 2,
+			height: maxY - minY + GROUP_PADDING * 2 + GROUP_HEADER,
+			...parentId ? { parentId } : {}
+		}
+	}, ...members.flatMap((n) => [{
+		kind: "setParent",
+		nodeId: n.id,
+		parentId: groupId,
+		extent: "parent"
+	}, {
+		kind: "moveNode",
+		nodeId: n.id,
+		position: {
+			x: n.position.x - origin.x,
+			y: n.position.y - origin.y
+		}
+	}])];
 }