@yuneta/gobj-ui 7.23.153 → 7.23.155

package/dist/gobj-ui.es.js

@@ -6,7 +6,7 @@ import { createJSONEditor } from "vanilla-jsoneditor";
 import { TabulatorFull } from "tabulator-tables";
 import * as maplibregl from "maplibre-gl";
 import uPlot from "uplot";
-import { BaseLayout, BrushSelect, CanvasEvent, Circle, CommonEvent, DragCanvas, EdgeEvent, ExtensionCategory, Graph, HTML, HistoryEvent, NodeEvent, Polyline, Toolbar, ZoomCanvas, register } from "@antv/g6";
+import { BaseLayout, BrushSelect, CanvasEvent, Circle, CommonEvent, Cubic, CubicHorizontal, DragCanvas, EdgeEvent, ExtensionCategory, Graph, HTML, HistoryEvent, NodeEvent, Polyline, Toolbar, ZoomCanvas, register } from "@antv/g6";
 //#region \0rolldown/runtime.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -29326,6 +29326,14 @@ function tidy_tree_lr(nodes, edges, o) {
 *  the packing across the depths differs, so switching between the
 *  two moves cards sideways and never reorders them.
 *
+*  And a run of three or more LEAF children -- a hall's devices, a
+*  region's places when none is open -- is STACKED: two columns
+*  under the parent with a corridor between them, row after row.
+*  That is what makes it compact when a whole level is open, where
+*  the contour alone gains nothing: every parent needed the whole
+*  row of its children beside it. The tree grows taller instead of
+*  wider. Its elbow edges run down the corridor (elbow_combs).
+*
 *  The contour arithmetic is Moen's ("Drawing dynamic trees", IEEE
 *  Software, 1990) in the form mxGraph gave it in mxCompactTreeLayout
 *  -- Copyright (c) 2006-2015 JGraph Ltd, Apache License 2.0 -- read in
@@ -29406,10 +29414,81 @@ function contour_merge(p1, p2) {
 	p1.lower_head = p2.lower_head;
 	return total;
 }
+function stack_trunk_width(k) {
+	let lanes = Math.max(0, k - 2);
+	return Math.max(36, 20 + Math.max(0, lanes - 1) * 6);
+}
+function stack_geometry(t, st, col_x, col_w) {
+	let d = st.depth;
+	let k = st.ids.length;
+	let rows = Math.ceil(k / 2);
+	let side = [0, 0];
+	let row_len = [];
+	for (let i = 0; i < k; i++) {
+		let n = t.by_id.get(st.ids[i]);
+		let r = Math.floor(i / 2);
+		side[i % 2] = Math.max(side[i % 2], n.h);
+		row_len[r] = Math.max(row_len[r] || 0, n.w);
+	}
+	row_len[0] = col_w[d];
+	let trunk = stack_trunk_width(k);
+	let starts = [col_x[d]];
+	for (let r = 1; r < rows; r++) starts[r] = starts[r - 1] + row_len[r - 1] + 40;
+	return {
+		side,
+		trunk,
+		starts,
+		row_len,
+		len: starts[rows - 1] + row_len[rows - 1] - col_x[d],
+		ext: side[0] + trunk + side[1]
+	};
+}
+function place_stack(t, st, g, top, pos) {
+	for (let i = 0; i < st.ids.length; i++) {
+		let n = t.by_id.get(st.ids[i]);
+		let r = Math.floor(i / 2);
+		let across = i % 2 === 0 ? top + g.side[0] - n.h / 2 : top + g.side[0] + g.trunk + n.h / 2;
+		pos.set(st.ids[i], {
+			x: g.starts[r] + g.row_len[r] / 2,
+			y: across
+		});
+	}
+}
 function compact_tree_lr(nodes, edges, o) {
 	let t = spanning_tree(nodes, edges);
-	let order = walk_order(t);
 	let pos = /* @__PURE__ */ new Map();
+	let kids_of = /* @__PURE__ */ new Map();
+	let stacks = /* @__PURE__ */ new Map();
+	for (let [id, kids] of t.children) {
+		let out = [];
+		let run = [];
+		let flush = () => {
+			if (run.length >= 3) {
+				let key = { stack: stacks.size };
+				stacks.set(key, {
+					ids: run,
+					depth: t.depth.get(run[0])
+				});
+				out.push(key);
+			} else out.push(...run);
+			run = [];
+		};
+		for (let kid of kids) if ((t.children.get(kid) || []).length === 0) run.push(kid);
+		else {
+			flush();
+			out.push(kid);
+		}
+		flush();
+		kids_of.set(id, out);
+	}
+	let order = [];
+	let todo = t.roots.slice().reverse();
+	while (todo.length) {
+		let id = todo.pop();
+		order.push(id);
+		let kids = kids_of.get(id) || [];
+		for (let i = kids.length - 1; i >= 0; i--) todo.push(kids[i]);
+	}
 	let col_w = [];
 	for (let [id, d] of t.depth) col_w[d] = Math.max(col_w[d] || 0, t.by_id.get(id).w);
 	let col_x = [];
@@ -29422,18 +29501,32 @@ function compact_tree_lr(nodes, edges, o) {
 	let dist = o.nodesep;
 	let level_distance = o.ranksep - pad;
 	let tn = /* @__PURE__ */ new Map();
-	for (let id of order) tn.set(id, {
-		len: col_w[t.depth.get(id)],
-		ext: t.by_id.get(id).h,
-		off_x: 0,
-		off_y: 0,
-		y: 0,
-		contour: null
-	});
+	for (let id of order) {
+		let st = stacks.get(id);
+		if (st) {
+			let g = stack_geometry(t, st, col_x, col_w);
+			tn.set(id, {
+				len: g.len,
+				ext: g.ext,
+				geom: g,
+				off_x: 0,
+				off_y: 0,
+				y: 0,
+				contour: null
+			});
+		} else tn.set(id, {
+			len: col_w[t.depth.get(id)],
+			ext: t.by_id.get(id).h,
+			off_x: 0,
+			off_y: 0,
+			y: 0,
+			contour: null
+		});
+	}
 	for (let i = order.length - 1; i >= 0; i--) {
 		let id = order[i];
 		let n = tn.get(id);
-		let kids = t.children.get(id) || [];
+		let kids = kids_of.get(id) || [];
 		if (!kids.length) {
 			let upper = contour_line(n.len + dist, 0);
 			let lower_tail = contour_line(0, -n.ext - dist);
@@ -29469,7 +29562,7 @@ function compact_tree_lr(nodes, edges, o) {
 	for (let id of order) {
 		let n = tn.get(id);
 		if (!root_of.has(id)) root_of.set(id, id);
-		let kids = t.children.get(id) || [];
+		let kids = kids_of.get(id) || [];
 		if (!kids.length) continue;
 		let running = n.y + tn.get(kids[0]).off_y;
 		tn.get(kids[0]).y = running;
@@ -29496,9 +29589,14 @@ function compact_tree_lr(nodes, edges, o) {
 		top += hi.get(r) - lo.get(r) + o.nodesep * 2;
 	}
 	for (let id of order) {
-		let d = t.depth.get(id);
 		let n = tn.get(id);
 		let y = n.y + shift.get(root_of.get(id));
+		let st = stacks.get(id);
+		if (st) {
+			place_stack(t, st, n.geom, y, pos);
+			continue;
+		}
+		let d = t.depth.get(id);
 		pos.set(id, {
 			x: col_x[d] + col_w[d] / 2,
 			y: y + n.ext / 2
@@ -29663,6 +29761,136 @@ function swap_box(b) {
 		y2: b.x2
 	};
 }
+function staggered_turn(lo, hi, st) {
+	let mid = (lo + hi) / 2;
+	let group = null;
+	let k = 0;
+	if (st.dep && st.dep.count > 1) {
+		group = st.dep;
+		k = st.dep.rank;
+	} else if (st.arr && st.arr.count > 1) {
+		group = st.arr;
+		k = st.arr.count - 1 - st.arr.rank;
+	}
+	if (group) {
+		let room = Math.max(0, hi - lo - 12);
+		let step = Math.min(10, room / (group.count - 1));
+		mid = mid - (group.count - 1) * step / 2 + k * step;
+	}
+	return mid;
+}
+/************************************************************
+*  The combs of the stacks under one card.
+*
+*  treedb_layout.js lays a run of leaf children out as two columns
+*  with a corridor between them. A card in the first row is reached
+*  from the channel like any other; one in a lower row cannot be --
+*  the card above it stands in the way -- so its edge runs down
+*  the corridor in a LANE of its own and turns into the gap above
+*  its card, which it shares only with the other card of its row,
+*  reached from the other side.
+*
+*      targets     [{id, box}]: the forward edges leaving one card,
+*                  each with the box of the card it reaches
+*      vertical    as in elbow_points; false swaps the boxes
+*
+*  Returns Map id -> {lane, z, top}: the lane, the height of the
+*  gap it turns into, and the top of the stack's first row (where
+*  the channel over the stack ends). Only for a card that stands
+*  under another of the group, within a stack gap and lined up
+*  with it on the corridor side -- what a stack looks like.
+*
+*  Lanes go outermost first, row by row: a line into a higher row
+*  keeps outside the lines going deeper, and none crosses another.
+************************************************************/
+function elbow_combs(targets, vertical) {
+	let list = vertical ? targets : targets.map((it) => ({
+		id: it.id,
+		box: swap_box(it.box)
+	}));
+	let cy = (b) => (b.y1 + b.y2) / 2;
+	let near = (a, b) => Math.abs(a - b) < 1.5;
+	let under = [];
+	for (let it of list) {
+		let b = it.box;
+		let above = null;
+		for (let o of list) {
+			let a = o.box;
+			if (o === it || a.y2 > b.y1 || b.y1 - a.y2 > 40) continue;
+			if (!(near(a.x2, b.x2) || near(a.x1, b.x1))) continue;
+			if (!above || a.y2 > above.y2) above = a;
+		}
+		if (!above) continue;
+		let side;
+		if (near(above.x2, b.x2) && !near(above.x1, b.x1)) side = 0;
+		else if (near(above.x1, b.x1) && !near(above.x2, b.x2)) side = 1;
+		else side = list.some((o) => o !== it && near(cy(o.box), cy(b)) && o.box.x2 <= b.x1) ? 1 : 0;
+		under.push({
+			id: it.id,
+			box: b,
+			above,
+			side
+		});
+	}
+	let corridor = (u) => {
+		if (u.side === 0) {
+			let l = u.box.x2;
+			let col = list.filter((o) => near(o.box.x2, l));
+			let r = Infinity;
+			for (let c of col) for (let o of list) if (o !== c && near(cy(o.box), cy(c.box)) && o.box.x1 >= l - .5) r = Math.min(r, o.box.x1);
+			return {
+				l,
+				r: isFinite(r) ? r : l + 36,
+				col
+			};
+		}
+		let r = u.box.x1;
+		let col = list.filter((o) => near(o.box.x1, r));
+		let l = -Infinity;
+		for (let c of col) for (let o of list) if (o !== c && near(cy(o.box), cy(c.box)) && o.box.x2 <= r + .5) l = Math.max(l, o.box.x2);
+		return {
+			l: isFinite(l) ? l : r - 36,
+			r,
+			col
+		};
+	};
+	let groups = /* @__PURE__ */ new Map();
+	for (let u of under) {
+		let c = corridor(u);
+		u.top = Math.min(...c.col.map((o) => o.box.y1));
+		let key = `${Math.round(c.l)}|${Math.round(c.r)}`;
+		if (!groups.has(key)) groups.set(key, {
+			l: c.l,
+			r: c.r,
+			left: [],
+			right: []
+		});
+		groups.get(key)[u.side === 0 ? "left" : "right"].push(u);
+	}
+	let out = /* @__PURE__ */ new Map();
+	for (let g of groups.values()) {
+		g.left.sort((a, b) => a.box.y1 - b.box.y1);
+		g.right.sort((a, b) => a.box.y1 - b.box.y1);
+		let n = g.left.length + g.right.length;
+		let room = g.r - g.l - 20;
+		let step = n > 1 ? Math.max(0, Math.min(6, room / (n - 1))) : 0;
+		g.left.forEach((u, i) => {
+			out.set(u.id, {
+				lane: g.l + 10 + i * step,
+				z: (u.above.y2 + u.box.y1) / 2,
+				top: u.top
+			});
+		});
+		g.right.forEach((u, j) => {
+			out.set(u.id, {
+				lane: g.r - 10 - j * step,
+				z: (u.above.y2 + u.box.y1) / 2,
+				top: u.top
+			});
+		});
+	}
+	return out;
+}
 /************************************************************
 *  The control points of an elbow from the port `s` to the port
 *  `t` ([x, y] each), knowing the boxes of the two cards
@@ -29670,34 +29898,32 @@ function swap_box(b) {
 *
 *      vertical    the rows are stacked (top to bottom); false
 *                  when they are side by side (left to right)
-*      stagger     {dep, arr}: the edge's rank among the forward
-*                  edges leaving its source card and among those
-*                  reaching its target card (elbow_rank). Absent,
-*                  the channel is the middle.
+*      stagger     {dep, arr, comb}: the edge's rank among the
+*                  forward edges leaving its source card and among
+*                  those reaching its target card (elbow_rank), and
+*                  its comb when the target is in a lower row of a
+*                  stack (elbow_combs). Absent, the channel is the
+*                  middle.
 ************************************************************/
 function elbow_points(s, t, box_s, box_t, lane, vertical, stagger) {
 	if (!vertical) return elbow_points(swap(s), swap(t), swap_box(box_s), swap_box(box_t), lane, true, stagger).map(swap);
 	let shift = lane * 10;
 	if (t[1] - s[1] > 20) {
+		let st = stagger || {};
 		let lo = Math.max(s[1], box_s.y2);
+		if (st.comb) {
+			let c = st.comb;
+			let turn = staggered_turn(lo, c.top, { dep: st.dep }) + shift;
+			turn = Math.min(Math.max(turn, lo + 4), c.top - 4);
+			return [
+				[s[0], turn],
+				[c.lane, turn],
+				[c.lane, c.z],
+				[t[0], c.z]
+			];
+		}
 		let hi = Math.min(t[1], box_t.y1);
-		let mid = (lo + hi) / 2;
-		let st = stagger || {};
-		let group = null;
-		let k = 0;
-		if (st.dep && st.dep.count > 1) {
-			group = st.dep;
-			k = st.dep.rank;
-		} else if (st.arr && st.arr.count > 1) {
-			group = st.arr;
-			k = st.arr.count - 1 - st.arr.rank;
-		}
-		if (group) {
-			let room = Math.max(0, hi - lo - 12);
-			let step = Math.min(10, room / (group.count - 1));
-			mid = mid - (group.count - 1) * step / 2 + k * step;
-		}
-		mid += shift;
+		let mid = staggered_turn(lo, hi, st) + shift;
 		mid = Math.min(Math.max(mid, lo + 4), hi - 4);
 		return [[s[0], mid], [t[0], mid]];
 	}
@@ -29916,6 +30142,7 @@ function orth_search(a, z, boxes) {
 function elbow_route(s, t, box_s, box_t, lane, vertical, boxes, stagger) {
 	let others = boxes || [];
 	if (!vertical) return elbow_route(swap(s), swap(t), swap_box(box_s), swap_box(box_t), lane, true, others.map(swap_box), stagger).map(swap);
+	if (stagger && stagger.comb) return elbow_points(s, t, box_s, box_t, lane, true, stagger);
 	let simple = elbow_points(s, t, box_s, box_t, lane, true, stagger);
 	if (!elbow_path_hits([
 		s,
@@ -29936,6 +30163,112 @@ function elbow_route(s, t, box_s, box_t, lane, vertical, boxes, stagger) {
 	if (!route && near.length < others.length) route = orth_search(a, z, others.map((b) => box_expand(b, m)));
 	return route || simple;
 }
+function path_points(path) {
+	let pts = [];
+	let cur = null;
+	for (let c of path) if (c[0] === "M" || c[0] === "L") {
+		cur = [c[1], c[2]];
+		pts.push(cur);
+	} else if (c[0] === "C" && cur) {
+		let [x0, y0] = cur;
+		for (let k = 1; k <= 16; k++) {
+			let u = k / 16;
+			let v = 1 - u;
+			pts.push([v * v * v * x0 + 3 * v * v * u * c[1] + 3 * v * u * u * c[3] + u * u * u * c[5], v * v * v * y0 + 3 * v * v * u * c[2] + 3 * v * u * u * c[4] + u * u * u * c[6]]);
+		}
+		cur = [c[5], c[6]];
+	} else if (c[0] === "Q" && cur) {
+		let [x0, y0] = cur;
+		for (let k = 1; k <= 16; k++) {
+			let u = k / 16;
+			let v = 1 - u;
+			pts.push([v * v * x0 + 2 * v * u * c[1] + u * u * c[3], v * v * y0 + 2 * v * u * c[2] + u * u * c[4]]);
+		}
+		cur = [c[3], c[4]];
+	}
+	return pts;
+}
+/************************************************************
+*  Does the G6 path `path` of a curved edge cross a card other than
+*  its own two? Measured on the curve itself -- the path G6 would
+*  draw, sampled -- and not on the rectangle round it, which took
+*  every card the curve merely passed near: the ports of a row
+*  stick well into the space above it. Its own two cards are left
+*  out: the curve starts and ends on their ports.
+************************************************************/
+function curve_hits(path, boxes, box_s, box_t) {
+	let pts = path_points(path);
+	if (pts.length < 2) return false;
+	let bb = {
+		x1: Infinity,
+		y1: Infinity,
+		x2: -Infinity,
+		y2: -Infinity
+	};
+	for (let p of pts) {
+		bb.x1 = Math.min(bb.x1, p[0]);
+		bb.y1 = Math.min(bb.y1, p[1]);
+		bb.x2 = Math.max(bb.x2, p[0]);
+		bb.y2 = Math.max(bb.y2, p[1]);
+	}
+	for (let b of boxes || []) {
+		if (same_box(b, box_s) || same_box(b, box_t) || !box_overlaps(b, box_expand(bb, 1))) continue;
+		let inner = box_expand(b, -1);
+		for (let k = 0; k + 1 < pts.length; k++) if (segment_hits(pts[k], pts[k + 1], inner)) return true;
+	}
+	return false;
+}
+/************************************************************
+*  A G6 path (['M'|'L'|'Q', ...]) along `points` with every corner
+*  rounded -- by `radius`, or by half the shorter of its two
+*  segments, so a short run is never overshot. The rounding is the
+*  quadratic G6's own polyline uses.
+************************************************************/
+function rounded_path(points, radius) {
+	let path = [[
+		"M",
+		points[0][0],
+		points[0][1]
+	]];
+	for (let i = 1; i + 1 < points.length; i++) {
+		let a = points[i - 1];
+		let m = points[i];
+		let b = points[i + 1];
+		let len_in = Math.hypot(m[0] - a[0], m[1] - a[1]);
+		let len_out = Math.hypot(b[0] - m[0], b[1] - m[1]);
+		let r = Math.min(radius, len_in / 2, len_out / 2);
+		let collinear = Math.abs((m[0] - a[0]) * (b[1] - m[1]) - (m[1] - a[1]) * (b[0] - m[0])) < 1e-9;
+		if (r <= 0 || collinear) {
+			path.push([
+				"L",
+				m[0],
+				m[1]
+			]);
+			continue;
+		}
+		let p1 = [m[0] - (m[0] - a[0]) / len_in * r, m[1] - (m[1] - a[1]) / len_in * r];
+		let p2 = [m[0] + (b[0] - m[0]) / len_out * r, m[1] + (b[1] - m[1]) / len_out * r];
+		path.push([
+			"L",
+			p1[0],
+			p1[1]
+		]);
+		path.push([
+			"Q",
+			m[0],
+			m[1],
+			p2[0],
+			p2[1]
+		]);
+	}
+	let last = points[points.length - 1];
+	path.push([
+		"L",
+		last[0],
+		last[1]
+	]);
+	return path;
+}
 //#endregion
 //#region node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
@@ -54823,7 +55156,7 @@ Easing Functions from anime.js, they are tried and true, so, its better to use t
 var Quad = function Quad(t) {
 	return Math.pow(t, 2);
 };
-var Cubic = function Cubic(t) {
+var Cubic$1 = function Cubic(t) {
 	return Math.pow(t, 3);
 };
 var Quart = function Quart(t) {
@@ -54960,10 +55293,10 @@ var EasingFunctions = {
 	"out-quad": EaseOut(Quad),
 	"in-out-quad": EaseInOut(Quad),
 	"out-in-quad": EaseOutIn(Quad),
-	"in-cubic": Cubic,
-	"out-cubic": EaseOut(Cubic),
-	"in-out-cubic": EaseInOut(Cubic),
-	"out-in-cubic": EaseOutIn(Cubic),
+	"in-cubic": Cubic$1,
+	"out-cubic": EaseOut(Cubic$1),
+	"in-out-cubic": EaseInOut(Cubic$1),
+	"out-in-cubic": EaseOutIn(Cubic$1),
 	"in-quart": Quart,
 	"out-quart": EaseOut(Quart),
 	"in-out-quart": EaseInOut(Quart),
@@ -57136,6 +57469,8 @@ function register_layouts(gobj) {
 		register(ExtensionCategory.LAYOUT, "treedb-compact", TreedbCompactLayout);
 		register(ExtensionCategory.EDGE, "treedb-elbow-v", TreedbElbowV);
 		register(ExtensionCategory.EDGE, "treedb-elbow-h", TreedbElbowH);
+		register(ExtensionCategory.EDGE, "treedb-curve-v", TreedbCurveV);
+		register(ExtensionCategory.EDGE, "treedb-curve-h", TreedbCurveH);
 		register(ExtensionCategory.LAYOUT, "treedb-radial", TreedbRadialLayout);
 		register(ExtensionCategory.NODE, "light", LightNode);
 		register(ExtensionCategory.NODE, "treedb-card", TreedbCard);
@@ -57830,7 +58165,9 @@ function layout_direction(gobj) {
 function edge_type_for(gobj) {
 	let lr = layout_direction(gobj) === "LR";
 	let rowless = gobj_read_attr(gobj, "rowless_layouts") || [];
-	if (gobj_read_str_attr(gobj, "edge_shape") === "elbow" && !str_in_list(rowless, gobj.priv.layout)) return lr ? "treedb-elbow-h" : "treedb-elbow-v";
+	let rows = !str_in_list(rowless, gobj.priv.layout);
+	if (rows && gobj_read_str_attr(gobj, "edge_shape") === "elbow") return lr ? "treedb-elbow-h" : "treedb-elbow-v";
+	if (rows) return lr ? "treedb-curve-h" : "treedb-curve-v";
 	return lr ? "cubic-horizontal" : "cubic";
 }
 /************************************************************
@@ -59389,17 +59726,27 @@ function elbow_stagger_of(edge, vertical) {
 	try {
 		let ps = pos(s);
 		let pt = pos(t);
-		let dep = graph.getRelatedEdgesData(s, "out").filter((d) => d.source === s && pos(d.target)[along] > ps[along]).map((d) => ({
+		let leaving = graph.getRelatedEdgesData(s, "out").filter((d) => d.source === s && pos(d.target)[along] > ps[along]);
+		let combs = elbow_combs(leaving.map((d) => ({
 			id: d.id,
-			span: Math.abs(pos(d.target)[across] - port_of(s, d.style && d.style.sourcePort)[across])
-		}));
+			box: elbow_box(element.getElement(d.target))
+		})), vertical);
+		let dep = leaving.map((d) => {
+			let comb = combs.get(d.id);
+			let far = comb ? comb.lane : pos(d.target)[across];
+			return {
+				id: d.id,
+				span: Math.abs(far - port_of(s, d.style && d.style.sourcePort)[across])
+			};
+		});
 		let arr = graph.getRelatedEdgesData(t, "in").filter((d) => d.target === t && pos(d.source)[along] < pt[along]).map((d) => ({
 			id: d.id,
 			span: Math.abs(port_of(d.source, d.style && d.style.sourcePort)[across] - pt[across])
 		}));
 		return {
 			dep: elbow_rank(dep, edge.id),
-			arr: elbow_rank(arr, edge.id)
+			arr: elbow_rank(arr, edge.id),
+			comb: combs.get(edge.id) || null
 		};
 	} catch (e) {
 		log_error(`elbow edge ${edge.id}: cannot read the edges sharing its ends: ${e}`);
@@ -59424,6 +59771,40 @@ var TreedbElbowH = class extends Polyline {
 		return super.getKeyPath(Object.assign({}, attributes, { radius: attributes.radius || ELBOW_RADIUS }));
 	}
 };
+/************************************************************
+*  A CURVED edge that keeps off the cards. G6's cubic, as before,
+*  unless that very curve -- sampled, not guessed from the
+*  rectangle round it -- would cross a card other than its own two,
+*  or when it does not run forward and so would cross its own:
+*  the card above a lower row of a stack, a row between a parent
+*  and a far child. Then it goes the way an elbow would (the comb,
+*  the detour, the route: the same lanes and staggered turns) with
+*  round corners, so it still reads as a curve. `-v` for rows
+*  stacked top to bottom, `-h` for columns.
+************************************************************/
+function curve_key_path(edge, attributes, vertical, plain) {
+	let [s, t] = edge.getEndpoints(attributes, false);
+	let along = vertical ? 1 : 0;
+	let box_s = elbow_box(edge.sourceNode);
+	let box_t = elbow_box(edge.targetNode);
+	let boxes = elbow_obstacles(edge);
+	if (t[along] - s[along] > 20 && !curve_hits(plain, boxes, box_s, box_t)) return plain;
+	return rounded_path([
+		s,
+		...elbow_route(s, t, box_s, box_t, elbow_lane_of(edge), vertical, boxes, elbow_stagger_of(edge, vertical)),
+		t
+	], 24);
+}
+var TreedbCurveV = class extends Cubic {
+	getKeyPath(attributes) {
+		return curve_key_path(this, attributes, true, super.getKeyPath(attributes));
+	}
+};
+var TreedbCurveH = class extends CubicHorizontal {
+	getKeyPath(attributes) {
+		return curve_key_path(this, attributes, false, super.getKeyPath(attributes));
+	}
+};
 var TreedbCompactLayout = class extends BaseLayout {
 	async execute(data, options) {
 		let input = treedb_layout_input(data);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.153",
+  "version": "7.23.155",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",