@parallelworks/ui 0.82.2 → 0.83.1

package/dist/graph/connectorGeometry.d.ts

@@ -18,11 +18,18 @@ export declare function arcRadius(minRise: number, colGap: number): number;
  * a connector spanning several columns runs level until it nears its target.
  */
 export declare function connectorPath(start: Point, end: Point, r: number, colGap: number): ConnectorPath;
+/** Which way a graph runs: ranks as columns, left to right, or as rows, top to bottom. */
+export type GraphDirection = 'right' | 'down';
+/** A connector from a node's bottom to a later row's node's top: `connectorPath` turned a quarter,
+ *  with the bends in the gap above `end`'s row. */
+export declare function connectorPathDown(start: Point, end: Point, r: number, rowGap: number): ConnectorPath;
 /** A node's place in its graph level, as laid out. */
 export interface Box {
     x: number;
     y: number;
     width: number;
+    /** Where a graph runs down, its height, which places the connectors leaving its bottom. */
+    height?: number | undefined;
 }
 /** Whether two layouts put every node in the same place. */
 export declare function sameBoxes(a: Map<string, Box>, b: Map<string, Box>): boolean;
@@ -41,4 +48,6 @@ export interface DrawnEdge {
  */
 export declare function routeConnectors(cols: string[][][], 
 /** Whether columns are left empty between those drawn, so gaps between them differ. */
-spaced: boolean, deps: Record<string, string[]>, boxes: Map<string, Box>, connectorY: number): DrawnEdge[];
+spaced: boolean, deps: Record<string, string[]>, boxes: Map<string, Box>, connectorY: number, 
+/** `down` joins a node's bottom to the top of one in a later row, at their middles. */
+direction?: GraphDirection): DrawnEdge[];

package/dist/graph/connectorGeometry.js

@@ -44,12 +44,44 @@ function connectorPath(start, end, r, colGap) {
 		].join(" ")
 	};
 }
+/** A connector from a node's bottom to a later row's node's top: `connectorPath` turned a quarter,
+*  with the bends in the gap above `end`'s row. */
+function connectorPathDown(start, end, r, rowGap) {
+	const across = connectorPath({
+		x: start.y,
+		y: start.x
+	}, {
+		x: end.y,
+		y: end.x
+	}, r, rowGap);
+	return {
+		d: transposed(across.d),
+		reversed: transposed(across.reversed)
+	};
+}
+function transposed(d) {
+	const parts = d.split(" ");
+	const out = [];
+	for (let i = 0; i < parts.length;) {
+		const op = parts[i++] ?? "";
+		if (op === "A") {
+			const [rx, ry, rot, large, sweep, x, y] = parts.slice(i, i + 7);
+			out.push("A", ry ?? "", rx ?? "", rot ?? "", large ?? "", sweep === "1" ? "0" : "1", y ?? "", x ?? "");
+			i += 7;
+		} else {
+			const [x, y] = parts.slice(i, i + 2);
+			out.push(op, y ?? "", x ?? "");
+			i += 2;
+		}
+	}
+	return out.join(" ");
+}
 /** Whether two layouts put every node in the same place. */
 function sameBoxes(a, b) {
 	if (a.size !== b.size) return false;
 	for (const [job, box] of a) {
 		const other = b.get(job);
-		if (!other || other.x !== box.x || other.y !== box.y || other.width !== box.width) return false;
+		if (!other || other.x !== box.x || other.y !== box.y || other.width !== box.width || other.height !== box.height) return false;
 	}
 	return true;
 }
@@ -58,7 +90,8 @@ function sameBoxes(a, b) {
 * jobs share their needs, so its first job's needs are the node's; a need naming a node not laid out
 * draws nothing. `connectorY` is how far below a node's top its connectors meet it.
 */
-function routeConnectors(cols, spaced, deps, boxes, connectorY) {
+function routeConnectors(cols, spaced, deps, boxes, connectorY, direction = "right") {
+	if (direction === "down") return routeDown(cols, deps, boxes);
 	const heads = (c) => cols[c]?.[0]?.[0];
 	const gapAfter = (c) => {
 		const left = boxes.get(heads(c) ?? "");
@@ -99,5 +132,50 @@ function routeConnectors(cols, spaced, deps, boxes, connectorY) {
 		path: connectorPath(edge.start, edge.end, r, colGap)
 	}));
 }
+function routeDown(rows, deps, boxes) {
+	const top = (row) => Math.min(...row.map(([head]) => boxes.get(head ?? "")?.y ?? Number.POSITIVE_INFINITY));
+	const bottom = (row) => Math.max(...row.map(([head]) => {
+		const box = boxes.get(head ?? "");
+		return box ? box.y + (box.height ?? 0) : Number.NEGATIVE_INFINITY;
+	}));
+	let rowGap = Number.POSITIVE_INFINITY;
+	for (let r = 0; r + 1 < rows.length; r++) {
+		const gap = top(rows[r + 1] ?? []) - bottom(rows[r] ?? []);
+		if (Number.isFinite(gap)) rowGap = Math.min(rowGap, gap);
+	}
+	if (!Number.isFinite(rowGap)) rowGap = 32;
+	const ends = [];
+	let minShift = Number.POSITIVE_INFINITY;
+	for (const row of rows) for (const [to] of row) {
+		const target = to === void 0 ? void 0 : boxes.get(to);
+		if (to === void 0 || !target) continue;
+		for (const from of deps[to] ?? []) {
+			const source = boxes.get(from);
+			if (!source) continue;
+			const start = {
+				x: Math.round(source.x + source.width / 2),
+				y: source.y + (source.height ?? 0) - 2
+			};
+			const middle = Math.round(target.x + target.width / 2);
+			const end = {
+				x: Math.abs(middle - start.x) <= 8 ? start.x : middle,
+				y: target.y + 2
+			};
+			const shift = Math.abs(end.x - start.x);
+			if (shift > 0) minShift = Math.min(minShift, shift);
+			ends.push({
+				from,
+				to,
+				start,
+				end
+			});
+		}
+	}
+	const r = arcRadius(minShift, rowGap);
+	return ends.map((edge) => ({
+		...edge,
+		path: connectorPathDown(edge.start, edge.end, r, rowGap)
+	}));
+}
 //#endregion
-export { arcRadius, connectorPath, routeConnectors, sameBoxes };
+export { arcRadius, connectorPath, connectorPathDown, routeConnectors, sameBoxes };

package/dist/graph/viewport.d.ts

@@ -31,13 +31,37 @@ export declare function fitMargin(panel: {
     width: number;
     height: number;
 }): number;
+/** How a fit may differ from showing everything. */
+export interface FitOptions {
+    /** The farthest out it goes: a graph too big to read at this scale shows from its start,
+     *  its top left, for the rest to be panned to. */
+    minScale?: number | undefined;
+    /** Room kept clear at the panel's top, such as under a bar over it, when the fit stops at
+     *  `minScale`. */
+    top?: number | undefined;
+    /** Fits the graph's width alone, for one that runs down the panel to be panned along: centered
+     *  across the panel, from its top below `top`. */
+    width?: boolean | undefined;
+}
 /** The view that shows all of `bounds` in a panel from its top left, no closer than a fit comes. */
 export declare function fitView(bounds: Bounds, panel: {
     width: number;
     height: number;
-}): View | null;
+}, { minScale, top, width: byWidth }?: FitOptions): View | null;
 /** The least shift that brings [start, end] inside [low, high]; none when it can't all fit, so the view stays. */
 export declare function intoView(start: number, end: number, low: number, high: number): number;
+/** How much of a graph a pan or pinch leaves in its panel, at the least: half the panel's shorter
+ *  side, or all of a graph smaller than that. */
+export declare function reachKept(panel: {
+    width: number;
+    height: number;
+}): number;
+/** The least shift that brings at least `keep` of `graph` back inside `panel` on each axis, so a
+ *  pan or a fling never leaves the graph out of reach; none while that much already shows. */
+export declare function intoReach(graph: Rect, panel: Rect, keep: number): {
+    dx: number;
+    dy: number;
+};
 /** A box on screen, as `getBoundingClientRect` gives it. */
 export interface Rect {
     left: number;

package/dist/graph/viewport.js

@@ -34,15 +34,18 @@ function fitMargin(panel) {
 	return Math.min(panel.width, panel.height) * .05;
 }
 /** The view that shows all of `bounds` in a panel from its top left, no closer than a fit comes. */
-function fitView(bounds, panel) {
+function fitView(bounds, panel, { minScale = MIN_SCALE, top = 0, width: byWidth = false } = {}) {
 	const width = bounds.maxX - bounds.minX;
 	const height = bounds.maxY - bounds.minY;
 	if (width <= 0 || height <= 0) return null;
 	const margin = fitMargin(panel);
-	const scale = Math.max(MIN_SCALE, Math.min((panel.width - margin * 2) / width, (panel.height - margin * 2) / height, FIT_MAX_SCALE));
+	const fit = Math.min((panel.width - margin * 2) / width, byWidth ? FIT_MAX_SCALE : (panel.height - margin * 2) / height, FIT_MAX_SCALE);
+	const floor = Math.min(Math.max(MIN_SCALE, minScale), FIT_MAX_SCALE);
+	const scale = Math.max(floor, fit);
+	const y = fit < floor || byWidth ? Math.max(margin, top + margin) : margin;
 	return {
-		x: margin - bounds.minX * scale,
-		y: margin - bounds.minY * scale,
+		x: (byWidth ? (panel.width - width * scale) / 2 : margin) - bounds.minX * scale,
+		y: y - bounds.minY * scale,
 		scale
 	};
 }
@@ -52,6 +55,25 @@ function intoView(start, end, low, high) {
 	if (start < low) return low - start;
 	return end > high ? high - end : 0;
 }
+/** How much of a graph a pan or pinch leaves in its panel, at the least: half the panel's shorter
+*  side, or all of a graph smaller than that. */
+function reachKept(panel) {
+	return Math.min(panel.width, panel.height) / 2;
+}
+/** The least shift that brings at least `keep` of `graph` back inside `panel` on each axis, so a
+*  pan or a fling never leaves the graph out of reach; none while that much already shows. */
+function intoReach(graph, panel, keep) {
+	const axis = (start, size, low, span) => {
+		if (size <= 0) return 0;
+		const least = Math.min(keep, size, span);
+		if (start + size < low + least) return low + least - (start + size);
+		return start > low + span - least ? low + span - least - start : 0;
+	};
+	return {
+		dx: axis(graph.left, graph.width, panel.left, panel.width),
+		dy: axis(graph.top, graph.height, panel.top, panel.height)
+	};
+}
 /** The smallest box around all of `rects`, which must not be empty. */
 function enclosing(rects) {
 	const left = Math.min(...rects.map((r) => r.left));
@@ -114,4 +136,4 @@ function viewShowing(region, target, visible, origin, view, readable) {
 	};
 }
 //#endregion
-export { FIT_MAX_SCALE, MIN_SCALE, ZOOM_STEP, enclosing, fitMargin, fitView, intoView, viewShowing, wheelFactor, zoomAround, zoomLimit };
+export { FIT_MAX_SCALE, MIN_SCALE, ZOOM_STEP, enclosing, fitMargin, fitView, intoReach, intoView, reachKept, viewShowing, wheelFactor, zoomAround, zoomLimit };

package/dist/list/ListTable.d.ts

@@ -36,7 +36,10 @@ export declare const STRETCHED_LINK_ROW = "relative [&_:is(a,button,input,label,
 export declare function NameCell({ icon, iconTile, name, subtitle, href, badge, title, children, }: {
     icon: ReactNode;
     /** Sets the icon in a small bordered tile, so rows whose icons differ in
-     *  weight, such as kinds of token or runner, still line up. */
+     *  weight, such as kinds of token or runner, still line up. The 28px tile
+     *  sits beside a name and its subtitle; a row with no subtitle keeps its
+     *  icon bare, centered where the tile would be, so a one-line row stays
+     *  as short as its text and its name still lines up with tiled rows. */
     iconTile?: boolean | undefined;
     name: string;
     subtitle?: string | undefined;

package/dist/list/ListTable.js

@@ -45,9 +45,12 @@ function NameCell({ icon, iconTile = false, name, subtitle, href, badge, title,
 	const stretch = useContext(StretchRowLinkContext);
 	const hasIcon = icon !== null && icon !== void 0 && icon !== false;
 	const columns = hasIcon ? "col-span-2 grid grid-cols-subgrid items-center" : "flex items-center";
-	const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [hasIcon && (iconTile ? /* @__PURE__ */ jsx("span", {
+	const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [hasIcon && (iconTile && subtitle ? /* @__PURE__ */ jsx("span", {
 		className: "flex size-7 shrink-0 items-center justify-center rounded-md border border-(--theme-border) text-(--theme-muted-text-color) [&>svg]:size-3.5",
 		children: icon
+	}) : iconTile ? /* @__PURE__ */ jsx("span", {
+		className: "flex w-7 shrink-0 items-center justify-center text-(--theme-muted-text-color) [&>svg]:size-3.5",
+		children: icon
 	}) : icon), /* @__PURE__ */ jsxs("div", {
 		className: "min-w-0",
 		children: [/* @__PURE__ */ jsxs("div", {