@yuneta/gobj-ui 7.23.154 → 7.23.155

package/README.md

@@ -1419,7 +1419,8 @@ layouts by three thin adapters in `c_g6_nodes_tree.js`:
   gained nothing on a whole level opened with the stepper, where every parent
   still needed the row of its children beside it. Against `tree`: regions
   only 10% of the width, one region open with a 24-device hall 21%, a whole
-  level open 41%. The tree grows taller instead; read it with elbow edges.
+  level open 41%. The tree grows taller instead; with elbow edges or curves
+  alike, since `7.23.155` a curve keeps off the cards too.
 - **`radial`** (`treedb-radial`) — the root in the middle, a ring per depth,
   every subtree an angular **sector** proportional to its leaves, and the
   radius of each ring the largest of three: one `ranksep` out from the ring
@@ -1481,7 +1482,16 @@ port run. Only the stub at the port is shared. Into a lower row of a stack of
 the compact tree an edge runs a **comb** (`7.23.154`): along the channel to a
 lane of its own in the stack's corridor, down it, and into the gap above its
 card; lanes go outermost first by row, so none crosses another, and a comb is
-drawn as laid out, never routed. G6's `shortest-path` router is not used: it is
+drawn as laid out, never routed.
+
+**Curved edges keep off the cards as well** (`7.23.155`). On a layout with
+rows a curve is `treedb-curve-v` / `-h`, a subclass of G6's cubic: the cubic
+as before, unless that very curve — the path G6 would draw, sampled, not the
+rectangle round it — would cross a card other than its own two, or the edge
+does not run forward and so would cross its own. Then it takes the way its
+elbow would (comb, detour, route, the same lanes and staggered turns) with
+corners rounded to 24px. On a layout with no rows the edges stay G6's plain
+cubic. G6's `shortest-path` router is not used: it is
 not exported, it
 falls back in silence to a route that crosses cards, and it rewrites its
 module defaults with every config it is given.

package/dist/gobj-ui.cjs.js

@@ -30168,6 +30168,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) {
@@ -55055,7 +55161,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) {
@@ -55192,10 +55298,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),
@@ -57368,6 +57474,8 @@ function register_layouts(gobj) {
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.LAYOUT, "treedb-compact", TreedbCompactLayout);
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.EDGE, "treedb-elbow-v", TreedbElbowV);
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.EDGE, "treedb-elbow-h", TreedbElbowH);
+		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.EDGE, "treedb-curve-v", TreedbCurveV);
+		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.EDGE, "treedb-curve-h", TreedbCurveH);
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.LAYOUT, "treedb-radial", TreedbRadialLayout);
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.NODE, "light", LightNode);
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.NODE, "treedb-card", TreedbCard);
@@ -58062,7 +58170,9 @@ function layout_direction(gobj) {
 function edge_type_for(gobj) {
 	let lr = layout_direction(gobj) === "LR";
 	let rowless = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "rowless_layouts") || [];
-	if ((0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "edge_shape") === "elbow" && !(0, _yuneta_gobj_js.str_in_list)(rowless, gobj.priv.layout)) return lr ? "treedb-elbow-h" : "treedb-elbow-v";
+	let rows = !(0, _yuneta_gobj_js.str_in_list)(rowless, gobj.priv.layout);
+	if (rows && (0, _yuneta_gobj_js.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";
 }
 /************************************************************
@@ -59666,6 +59776,40 @@ var TreedbElbowH = class extends _antv_g6.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 _antv_g6.Cubic {
+	getKeyPath(attributes) {
+		return curve_key_path(this, attributes, true, super.getKeyPath(attributes));
+	}
+};
+var TreedbCurveH = class extends _antv_g6.CubicHorizontal {
+	getKeyPath(attributes) {
+		return curve_key_path(this, attributes, false, super.getKeyPath(attributes));
+	}
+};
 var TreedbCompactLayout = class extends _antv_g6.BaseLayout {
 	async execute(data, options) {
 		let input = treedb_layout_input(data);

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;
@@ -30163,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) {
@@ -55050,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) {
@@ -55187,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),
@@ -57363,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);
@@ -58057,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";
 }
 /************************************************************
@@ -59661,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.154",
+  "version": "7.23.155",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_g6_nodes_tree.js

@@ -133,7 +133,10 @@ import {
     fold_root_group_key,
 } from "./treedb_fold_model.js";
 import {layout_tree, layout_radial, layout_compact} from "./treedb_layout.js";
-import {elbow_lane, elbow_rank, elbow_route, elbow_combs} from "./treedb_elbow.js";
+import {
+    elbow_lane, elbow_rank, elbow_route, elbow_combs, curve_hits, rounded_path, CURVE_RADIUS,
+    ELBOW_STEP,
+} from "./treedb_elbow.js";
 
 import {
     BaseLayout,
@@ -148,6 +151,8 @@ import {
     Toolbar,
     register,
     Polyline,
+    Cubic,
+    CubicHorizontal,
 } from '@antv/g6';
 
 import {Circle as CircleGeometry, Rect as RectGeometry} from '@antv/g';
@@ -942,6 +947,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);
@@ -2042,16 +2049,20 @@ function layout_direction(gobj)
     return str_in_list(LR_LAYOUTS, gobj.priv.layout)? "LR" : "TB";
 }
 
-/*  A curve, or an elbow when the reader asked for one and the layout
- *  has rows to run it between.  */
+/*  An elbow when the reader asked for one, a curve otherwise -- ours
+ *  where the layout has rows, which keeps off the cards; G6's plain
+ *  cubic on a layout with no rows to go round by.  */
 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)) {
+    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";
 }
 
@@ -4388,6 +4399,51 @@ class TreedbElbowH extends Polyline
     }
 }
 
+/************************************************************
+ *  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);
+    /*  An edge that does not run forward -- one of every reciprocal
+     *  pair, an edge within one row -- runs through its OWN two cards
+     *  as a cubic, which curve_hits does not look at: it goes round
+     *  them, as its elbow does.  */
+    let forward = (t[along] - s[along] > 2 * ELBOW_STEP);
+    if(forward && !curve_hits(plain, boxes, box_s, box_t)) {
+        return plain;
+    }
+    let pts = elbow_route(s, t, box_s, box_t, elbow_lane_of(edge), vertical, boxes,
+                          elbow_stagger_of(edge, vertical));
+    return rounded_path([s, ...pts, t], CURVE_RADIUS);
+}
+
+class TreedbCurveV extends Cubic
+{
+    getKeyPath(attributes) {
+        return curve_key_path(this, attributes, true, super.getKeyPath(attributes));
+    }
+}
+
+class TreedbCurveH extends CubicHorizontal
+{
+    getKeyPath(attributes) {
+        return curve_key_path(this, attributes, false, super.getKeyPath(attributes));
+    }
+}
+
 class TreedbCompactLayout extends BaseLayout
 {
     async execute(data, options) {

package/src/treedb_elbow.js

@@ -40,6 +40,10 @@
  *        channel, so its edge runs down the corridor in a lane of
  *        its own -- a COMB -- and turns into the gap above its card.
  *
+ *      And for CURVED edges (curve_hits, rounded_path): a curve
+ *      that would cross another card follows the same way an elbow
+ *      would, with round corners, so it reads as a curve.
+ *
  *      Written for the top-down reading; left to right is the same
  *      geometry with the axes swapped.
  *
@@ -609,3 +613,112 @@ export function elbow_route(s, t, box_s, box_t, lane, vertical, boxes, stagger)
     }
     return route || simple;
 }
+
+/*----------------------------------------------------------------*
+ *      CURVED edges that would cross a card
+ *----------------------------------------------------------------*/
+export const CURVE_RADIUS = 24;     /*  the corners of a curve that goes round  */
+export const CURVE_STEPS = 16;      /*  samples of each curved stretch  */
+
+/*  Points along a G6 path: the ends of its runs and CURVE_STEPS
+ *  samples of each quadratic or cubic stretch.  */
+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 <= CURVE_STEPS; k++) {
+                let u = k / CURVE_STEPS;
+                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 <= CURVE_STEPS; k++) {
+                let u = k / CURVE_STEPS;
+                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.
+ ************************************************************/
+export 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.
+ ************************************************************/
+export 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;
+}

package/src/treedb_elbow.test.js

@@ -8,7 +8,7 @@
 import { describe, test, expect } from "vitest";
 import {
     elbow_lane, elbow_points, elbow_route, elbow_path_hits, elbow_rank, elbow_combs,
-    ELBOW_STEP, ELBOW_CLEAR,
+    curve_hits, rounded_path, ELBOW_STEP, ELBOW_CLEAR,
 } from "./treedb_elbow.js";
 import { layout_compact } from "./treedb_layout.js";
 
@@ -356,6 +356,50 @@ describe("the comb of a stack", () => {
     });
 });
 
+describe("a curve that would cross a card", () => {
+    /*  Whole-node boxes (ports 7px out of top and bottom).  */
+    const PB = {x1: 0, y1: -7, x2: 172, y2: 103};         /*  a parent  */
+    const R0 = {x1: 0, y1: 183, x2: 116, y2: 237};        /*  row 0 of a stack  */
+    const R1 = {x1: 0, y1: 277, x2: 116, y2: 331};        /*  row 1, under it  */
+    const SIB = {x1: 200, y1: -7, x2: 372, y2: 103};      /*  the parent's sibling  */
+    const S = [86, 96];
+
+    /*  The cubic G6 draws between two vertical ports: tangents along
+     *  the line, as its default curveOffset gives.  */
+    const cubic = (s, t) => [["M", s[0], s[1]],
+                             ["C", s[0], (s[1] + t[1]) / 2, t[0], (s[1] + t[1]) / 2, t[0], t[1]]];
+
+    test("a curve into a card of the next row crosses nothing", () => {
+        expect(curve_hits(cubic(S, [58, 190]), [PB, R0, R1, SIB], PB, R0)).toBe(false);
+    });
+
+    test("a curve into a lower row of a stack crosses the card above it", () => {
+        expect(curve_hits(cubic(S, [58, 284]), [PB, R0, R1, SIB], PB, R1)).toBe(true);
+    });
+
+    test("a curve that passes NEAR a card, beside its ports, does not count", () => {
+        /*  N0 in the target row with its port poking 7px up, beside
+         *  where the curve lands; the rectangle round the curve took it.  */
+        const T0 = {x1: 250, y1: 183, x2: 366, y2: 237};
+        const N0 = {x1: 120, y1: 183, x2: 236, y2: 237};
+        expect(curve_hits(cubic(S, [308, 190]), [PB, SIB, T0, N0], PB, T0)).toBe(false);
+    });
+
+    test("the rounded path: a straight line is one run", () => {
+        expect(rounded_path([[0, 0], [0, 100]], 24)).toEqual([["M", 0, 0], ["L", 0, 100]]);
+    });
+
+    test("the rounded path: each corner a quadratic, never past half a short run", () => {
+        let path = rounded_path([[0, 0], [0, 60], [100, 60], [100, 70]], 24);
+        expect(path[0]).toEqual(["M", 0, 0]);
+        expect(path[1]).toEqual(["L", 0, 36]);                  /*  24 before the corner  */
+        expect(path[2]).toEqual(["Q", 0, 60, 24, 60]);
+        expect(path[3]).toEqual(["L", 95, 60]);                 /*  the last run is 10: r = 5  */
+        expect(path[4]).toEqual(["Q", 100, 60, 100, 65]);
+        expect(path[5]).toEqual(["L", 100, 70]);
+    });
+});
+
 describe("the ports are obstacles too", () => {
     /*  Whole-node boxes: a port of 14px sticks 7px out of the bottom
      *  and the top of each card.  */