@yuneta/gobj-ui 7.23.149 → 7.23.150

package/README.md

@@ -1438,6 +1438,17 @@ direction, and a layout with no rows (`rowless_layouts`: `radial`,
 `edge_shape` is `SDF_PERSIST` on `C_YUI_TREEDB_GRAPH`, a preference per
 treedb like `node_labels`. Consumer key: `elbow edges`.
 
+Two cases are not a channel (`7.23.150`, `treedb_elbow.js`, pure and
+tested). An elbow that does not run **forward** — the target above its
+source or in the same row, which one edge of every reciprocal pair is —
+goes **round** the two cards instead of through them: a short run out of its
+port, along the outside of both, and in from the other port's own side. And
+the edges joining the **same two cards**, either way round, take **lanes**
+10px apart in the order they were made (0, +1, −1…), so a new one never
+moves the ones already drawn; a detour on a negative lane goes round the
+left. The detour clears the two cards it joins, not the others: a card of a
+third record standing in its way is crossed, as a curve would cross it.
+
 All three take the **same spanning tree**, chosen deterministically: roots are the
 nodes with no incoming edge, in node order; a node belongs to the **first
 parent that reaches it** in a breadth-first walk (the place, not the

package/dist/gobj-ui.cjs.js

@@ -29630,6 +29630,54 @@ function layout_radial(nodes, edges, opts) {
 	}
 	return pos;
 }
+/************************************************************
+*  The lane of `id` among `ids`, the edges joining the same two
+*  cards: 0, then +1, -1, +2, -2... in the order they were made.
+*  Edge ids end in a counter, so a numeric sort is that order.
+************************************************************/
+function elbow_lane(ids, id) {
+	let k = ids.slice().sort((a, b) => String(a).localeCompare(String(b), void 0, { numeric: true })).indexOf(id);
+	if (k <= 0) return 0;
+	return (k % 2 ? 1 : -1) * Math.ceil(k / 2);
+}
+function swap(p) {
+	return [p[1], p[0]];
+}
+function swap_box(b) {
+	return {
+		x1: b.y1,
+		y1: b.x1,
+		x2: b.y2,
+		y2: b.x2
+	};
+}
+/************************************************************
+*  The control points of an elbow from the port `s` to the port
+*  `t` ([x, y] each), knowing the boxes of the two cards
+*  ({x1, y1, x2, y2}) and the edge's lane.
+*
+*      vertical    the rows are stacked (top to bottom); false
+*                  when they are side by side (left to right)
+************************************************************/
+function elbow_points(s, t, box_s, box_t, lane, vertical) {
+	if (!vertical) return elbow_points(swap(s), swap(t), swap_box(box_s), swap_box(box_t), lane, true).map(swap);
+	let shift = lane * 10;
+	if (t[1] - s[1] > 20) {
+		let mid = (s[1] + t[1]) / 2 + shift;
+		mid = Math.min(Math.max(mid, s[1] + 10), t[1] - 10);
+		return [[s[0], mid], [t[0], mid]];
+	}
+	let out = 16 + Math.abs(shift);
+	let side = lane < 0 ? Math.min(box_s.x1, box_t.x1) - 24 - Math.abs(shift) : Math.max(box_s.x2, box_t.x2) + 24 + Math.abs(shift);
+	let y1 = s[1] + out;
+	let y2 = t[1] - out;
+	return [
+		[s[0], y1],
+		[side, y1],
+		[side, y2],
+		[t[0], y2]
+	];
+}
 //#endregion
 //#region node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
@@ -59009,14 +59057,47 @@ var TreedbTreeLayout = class extends _antv_g6.BaseLayout {
 *
 *  Computed on every draw from where the two ends ARE, so a
 *  dragged card, a fold or a layout needs nothing else. `-v` runs
-*  between rows (top to bottom), `-h` between columns.
+*  between rows (top to bottom), `-h` between columns. An edge that
+*  does not run forward goes round the two cards, and the edges
+*  joining the same two cards take lanes (treedb_elbow.js).
 ************************************************************/
 var ELBOW_RADIUS = 6;
+function elbow_box(node) {
+	try {
+		let b = node.getShape("key").getBounds();
+		return {
+			x1: b.min[0],
+			y1: b.min[1],
+			x2: b.max[0],
+			y2: b.max[1]
+		};
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`elbow edge: no bounds for node ${node && node.id}: ${e}`);
+		let c = node.getCenter();
+		return {
+			x1: c[0],
+			y1: c[1],
+			x2: c[0],
+			y2: c[1]
+		};
+	}
+}
+function elbow_lane_of(edge) {
+	let graph = edge.context && edge.context.graph;
+	let s = edge.sourceNode && edge.sourceNode.id;
+	let t = edge.targetNode && edge.targetNode.id;
+	if (!graph || s === void 0 || t === void 0 || s === t) return 0;
+	try {
+		return elbow_lane(graph.getRelatedEdgesData(s).filter((d) => d.source === s && d.target === t || d.source === t && d.target === s).map((d) => d.id), edge.id);
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`elbow edge ${edge.id}: cannot read the edges of ${s}: ${e}`);
+		return 0;
+	}
+}
 var TreedbElbowV = class extends _antv_g6.Polyline {
 	getControlPoints(attributes) {
 		let [s, t] = this.getEndpoints(attributes, false);
-		let mid = (s[1] + t[1]) / 2;
-		return [[s[0], mid], [t[0], mid]];
+		return elbow_points(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode), elbow_lane_of(this), true);
 	}
 	getKeyPath(attributes) {
 		return super.getKeyPath(Object.assign({}, attributes, { radius: attributes.radius || ELBOW_RADIUS }));
@@ -59025,8 +59106,7 @@ var TreedbElbowV = class extends _antv_g6.Polyline {
 var TreedbElbowH = class extends _antv_g6.Polyline {
 	getControlPoints(attributes) {
 		let [s, t] = this.getEndpoints(attributes, false);
-		let mid = (s[0] + t[0]) / 2;
-		return [[mid, s[1]], [mid, t[1]]];
+		return elbow_points(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode), elbow_lane_of(this), false);
 	}
 	getKeyPath(attributes) {
 		return super.getKeyPath(Object.assign({}, attributes, { radius: attributes.radius || ELBOW_RADIUS }));

package/dist/gobj-ui.es.js

@@ -29625,6 +29625,54 @@ function layout_radial(nodes, edges, opts) {
 	}
 	return pos;
 }
+/************************************************************
+*  The lane of `id` among `ids`, the edges joining the same two
+*  cards: 0, then +1, -1, +2, -2... in the order they were made.
+*  Edge ids end in a counter, so a numeric sort is that order.
+************************************************************/
+function elbow_lane(ids, id) {
+	let k = ids.slice().sort((a, b) => String(a).localeCompare(String(b), void 0, { numeric: true })).indexOf(id);
+	if (k <= 0) return 0;
+	return (k % 2 ? 1 : -1) * Math.ceil(k / 2);
+}
+function swap(p) {
+	return [p[1], p[0]];
+}
+function swap_box(b) {
+	return {
+		x1: b.y1,
+		y1: b.x1,
+		x2: b.y2,
+		y2: b.x2
+	};
+}
+/************************************************************
+*  The control points of an elbow from the port `s` to the port
+*  `t` ([x, y] each), knowing the boxes of the two cards
+*  ({x1, y1, x2, y2}) and the edge's lane.
+*
+*      vertical    the rows are stacked (top to bottom); false
+*                  when they are side by side (left to right)
+************************************************************/
+function elbow_points(s, t, box_s, box_t, lane, vertical) {
+	if (!vertical) return elbow_points(swap(s), swap(t), swap_box(box_s), swap_box(box_t), lane, true).map(swap);
+	let shift = lane * 10;
+	if (t[1] - s[1] > 20) {
+		let mid = (s[1] + t[1]) / 2 + shift;
+		mid = Math.min(Math.max(mid, s[1] + 10), t[1] - 10);
+		return [[s[0], mid], [t[0], mid]];
+	}
+	let out = 16 + Math.abs(shift);
+	let side = lane < 0 ? Math.min(box_s.x1, box_t.x1) - 24 - Math.abs(shift) : Math.max(box_s.x2, box_t.x2) + 24 + Math.abs(shift);
+	let y1 = s[1] + out;
+	let y2 = t[1] - out;
+	return [
+		[s[0], y1],
+		[side, y1],
+		[side, y2],
+		[t[0], y2]
+	];
+}
 //#endregion
 //#region node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
@@ -59004,14 +59052,47 @@ var TreedbTreeLayout = class extends BaseLayout {
 *
 *  Computed on every draw from where the two ends ARE, so a
 *  dragged card, a fold or a layout needs nothing else. `-v` runs
-*  between rows (top to bottom), `-h` between columns.
+*  between rows (top to bottom), `-h` between columns. An edge that
+*  does not run forward goes round the two cards, and the edges
+*  joining the same two cards take lanes (treedb_elbow.js).
 ************************************************************/
 var ELBOW_RADIUS = 6;
+function elbow_box(node) {
+	try {
+		let b = node.getShape("key").getBounds();
+		return {
+			x1: b.min[0],
+			y1: b.min[1],
+			x2: b.max[0],
+			y2: b.max[1]
+		};
+	} catch (e) {
+		log_error(`elbow edge: no bounds for node ${node && node.id}: ${e}`);
+		let c = node.getCenter();
+		return {
+			x1: c[0],
+			y1: c[1],
+			x2: c[0],
+			y2: c[1]
+		};
+	}
+}
+function elbow_lane_of(edge) {
+	let graph = edge.context && edge.context.graph;
+	let s = edge.sourceNode && edge.sourceNode.id;
+	let t = edge.targetNode && edge.targetNode.id;
+	if (!graph || s === void 0 || t === void 0 || s === t) return 0;
+	try {
+		return elbow_lane(graph.getRelatedEdgesData(s).filter((d) => d.source === s && d.target === t || d.source === t && d.target === s).map((d) => d.id), edge.id);
+	} catch (e) {
+		log_error(`elbow edge ${edge.id}: cannot read the edges of ${s}: ${e}`);
+		return 0;
+	}
+}
 var TreedbElbowV = class extends Polyline {
 	getControlPoints(attributes) {
 		let [s, t] = this.getEndpoints(attributes, false);
-		let mid = (s[1] + t[1]) / 2;
-		return [[s[0], mid], [t[0], mid]];
+		return elbow_points(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode), elbow_lane_of(this), true);
 	}
 	getKeyPath(attributes) {
 		return super.getKeyPath(Object.assign({}, attributes, { radius: attributes.radius || ELBOW_RADIUS }));
@@ -59020,8 +59101,7 @@ var TreedbElbowV = class extends Polyline {
 var TreedbElbowH = class extends Polyline {
 	getControlPoints(attributes) {
 		let [s, t] = this.getEndpoints(attributes, false);
-		let mid = (s[0] + t[0]) / 2;
-		return [[mid, s[1]], [mid, t[1]]];
+		return elbow_points(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode), elbow_lane_of(this), false);
 	}
 	getKeyPath(attributes) {
 		return super.getKeyPath(Object.assign({}, attributes, { radius: attributes.radius || ELBOW_RADIUS }));

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -133,6 +133,7 @@ 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_points} from "./treedb_elbow.js";
 
 import {
     BaseLayout,
@@ -4221,16 +4222,53 @@ class TreedbTreeLayout extends BaseLayout
  *
  *  Computed on every draw from where the two ends ARE, so a
  *  dragged card, a fold or a layout needs nothing else. `-v` runs
- *  between rows (top to bottom), `-h` between columns.
+ *  between rows (top to bottom), `-h` between columns. An edge that
+ *  does not run forward goes round the two cards, and the edges
+ *  joining the same two cards take lanes (treedb_elbow.js).
  ************************************************************/
 const ELBOW_RADIUS = 6;
 
+/*  The box of a card on the canvas, for a detour to go round it.  */
+function elbow_box(node)
+{
+    try {
+        let b = node.getShape('key').getBounds();
+        return {x1: b.min[0], y1: b.min[1], x2: b.max[0], y2: b.max[1]};
+    } catch(e) {
+        log_error(`elbow edge: no bounds for node ${node && node.id}: ${e}`);
+        let c = node.getCenter();
+        return {x1: c[0], y1: c[1], x2: c[0], y2: c[1]};
+    }
+}
+
+/*  The lane of an edge among the edges joining the same two cards,
+ *  either way round (treedb_elbow.js).  */
+function elbow_lane_of(edge)
+{
+    let graph = edge.context && edge.context.graph;
+    let s = edge.sourceNode && edge.sourceNode.id;
+    let t = edge.targetNode && edge.targetNode.id;
+    if(!graph || s === undefined || t === undefined || s === t) {
+        return 0;
+    }
+    try {
+        let ids = graph.getRelatedEdgesData(s)
+            .filter((d) => (d.source === s && d.target === t) ||
+                           (d.source === t && d.target === s))
+            .map((d) => d.id);
+        return elbow_lane(ids, edge.id);
+    } catch(e) {
+        log_error(`elbow edge ${edge.id}: cannot read the edges of ${s}: ${e}`);
+        return 0;
+    }
+}
+
 class TreedbElbowV extends Polyline
 {
     getControlPoints(attributes) {
         let [s, t] = this.getEndpoints(attributes, false);
-        let mid = (s[1] + t[1]) / 2;
-        return [[s[0], mid], [t[0], mid]];
+        return elbow_points(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode),
+                            elbow_lane_of(this), true);
     }
 
     getKeyPath(attributes) {
@@ -4243,8 +4281,8 @@ class TreedbElbowH extends Polyline
 {
     getControlPoints(attributes) {
         let [s, t] = this.getEndpoints(attributes, false);
-        let mid = (s[0] + t[0]) / 2;
-        return [[mid, s[1]], [mid, t[1]]];
+        return elbow_points(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode),
+                            elbow_lane_of(this), false);
     }
 
     getKeyPath(attributes) {

package/src/treedb_elbow.js

@@ -0,0 +1,102 @@
+/***********************************************************************
+ *          treedb_elbow.js
+ *
+ *      Where an elbow edge of the treedb graph turns, as plain
+ *      geometry: the two elbow edge types of c_g6_nodes_tree.js ask
+ *      this module for their control points on every draw, and it
+ *      can be tested without G6.
+ *
+ *      An elbow is mxGraph's tree routing: straight out of the
+ *      parent's port to the channel half way to the child, along it,
+ *      and straight into the child's port. Two cases are not that:
+ *
+ *      - An edge that does not run FORWARD: the child above its
+ *        parent, or in the same row. One of the two edges of a
+ *        reciprocal pair (A -> B and B -> A) is always one. A channel
+ *        half way between would cross both cards and lie on top of
+ *        its partner, so it goes ROUND: a short run out of its port,
+ *        along the outside of both cards, and into the other port
+ *        from that port's own side.
+ *
+ *      - Several edges joining the SAME two cards: a reciprocal pair,
+ *        or two hooks of one parent reaching one child. Each gets a
+ *        LANE: the first stays where it is, the next moves one step to
+ *        one side, the next one step to the other. The lane follows
+ *        the order the edges were made, so a new edge never moves the
+ *        ones already drawn.
+ *
+ *      Written for the top-down reading; left to right is the same
+ *      geometry with the axes swapped.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+
+export const ELBOW_STEP = 10;      /*  between two lanes  */
+export const ELBOW_JETTY = 16;     /*  straight run out of a port before a detour turns  */
+export const ELBOW_CLEAR = 24;     /*  how far outside the two cards a detour runs  */
+
+/************************************************************
+ *  The lane of `id` among `ids`, the edges joining the same two
+ *  cards: 0, then +1, -1, +2, -2... in the order they were made.
+ *  Edge ids end in a counter, so a numeric sort is that order.
+ ************************************************************/
+export function elbow_lane(ids, id)
+{
+    let sorted = ids.slice().sort(
+        (a, b) => String(a).localeCompare(String(b), undefined, {numeric: true})
+    );
+    let k = sorted.indexOf(id);
+    if(k <= 0) {
+        return 0;
+    }
+    let side = (k % 2)? 1 : -1;
+    return side * Math.ceil(k / 2);
+}
+
+function swap(p)
+{
+    return [p[1], p[0]];
+}
+
+function swap_box(b)
+{
+    return {x1: b.y1, y1: b.x1, x2: b.y2, y2: b.x2};
+}
+
+/************************************************************
+ *  The control points of an elbow from the port `s` to the port
+ *  `t` ([x, y] each), knowing the boxes of the two cards
+ *  ({x1, y1, x2, y2}) and the edge's lane.
+ *
+ *      vertical    the rows are stacked (top to bottom); false
+ *                  when they are side by side (left to right)
+ ************************************************************/
+export function elbow_points(s, t, box_s, box_t, lane, vertical)
+{
+    if(!vertical) {
+        return elbow_points(swap(s), swap(t), swap_box(box_s), swap_box(box_t), lane, true)
+            .map(swap);
+    }
+
+    let shift = lane * ELBOW_STEP;
+
+    /*  Forward: the channel half way down, moved by the lane and
+     *  kept strictly between the two ports.  */
+    if(t[1] - s[1] > 2 * ELBOW_STEP) {
+        let mid = (s[1] + t[1]) / 2 + shift;
+        mid = Math.min(Math.max(mid, s[1] + ELBOW_STEP), t[1] - ELBOW_STEP);
+        return [[s[0], mid], [t[0], mid]];
+    }
+
+    /*  Backwards, or across one row: round the outside. A negative
+     *  lane goes round the left, any other the right, so the two
+     *  detours of one pair never share a side.  */
+    let out = ELBOW_JETTY + Math.abs(shift);
+    let side = (lane < 0)
+        ? Math.min(box_s.x1, box_t.x1) - ELBOW_CLEAR - Math.abs(shift)
+        : Math.max(box_s.x2, box_t.x2) + ELBOW_CLEAR + Math.abs(shift);
+    let y1 = s[1] + out;        /*  a hook port is on the bottom edge  */
+    let y2 = t[1] - out;        /*  an fkey port is on the top edge  */
+    return [[s[0], y1], [side, y1], [side, y2], [t[0], y2]];
+}

package/src/treedb_elbow.test.js

@@ -0,0 +1,105 @@
+/***********************************************************************
+ *          treedb_elbow.test.js
+ *
+ *      The elbow edges of the treedb graph, pinned: the lane of an
+ *      edge among those joining the same two cards, the channel of a
+ *      forward edge, the detour of one that is not.
+ ***********************************************************************/
+import { describe, test, expect } from "vitest";
+import { elbow_lane, elbow_points, ELBOW_STEP, ELBOW_CLEAR } from "./treedb_elbow.js";
+
+/*  Two cards 100x40: A on top, B one row below it.  */
+const A = {x1: 0, y1: 0, x2: 100, y2: 40};
+const B = {x1: 0, y1: 130, x2: 100, y2: 170};
+const A_HOOK = [50, 40];        /*  A's bottom edge  */
+const A_FKEY = [50, 0];         /*  A's top edge  */
+const B_HOOK = [60, 170];
+const B_FKEY = [50, 130];
+
+describe("the lane", () => {
+    test("one edge alone keeps the middle", () => {
+        expect(elbow_lane(["edge-t-7"], "edge-t-7")).toBe(0);
+    });
+
+    test("lanes follow the order the edges were made, not the string order", () => {
+        let ids = ["edge-t-10", "edge-t-9", "edge-t-11"];
+        expect(elbow_lane(ids, "edge-t-9")).toBe(0);
+        expect(elbow_lane(ids, "edge-t-10")).toBe(1);
+        expect(elbow_lane(ids, "edge-t-11")).toBe(-1);
+    });
+
+    test("a new edge does not move the ones already drawn", () => {
+        let before = ["edge-t-1", "edge-t-2"];
+        let after = before.concat(["edge-t-3"]);
+        for(let id of before) {
+            expect(elbow_lane(after, id)).toBe(elbow_lane(before, id));
+        }
+    });
+});
+
+describe("a forward edge", () => {
+    test("turns in the channel half way between the ports", () => {
+        let pts = elbow_points(A_HOOK, B_FKEY, A, B, 0, true);
+        expect(pts).toEqual([[50, 85], [50, 85]]);
+    });
+
+    test("its lane moves the channel, and keeps it between the ports", () => {
+        let pts = elbow_points(A_HOOK, B_FKEY, A, B, 1, true);
+        expect(pts[0][1]).toBe(85 + ELBOW_STEP);
+        let far = elbow_points(A_HOOK, B_FKEY, A, B, 20, true);
+        expect(far[0][1]).toBeLessThan(B_FKEY[1]);
+        expect(far[0][1]).toBeGreaterThan(A_HOOK[1]);
+    });
+});
+
+describe("an edge that does not run forward", () => {
+    test("goes round the outside of both cards", () => {
+        /*  B -> A: out of B's bottom, back up into A's top.  */
+        let pts = elbow_points(B_HOOK, A_FKEY, B, A, 0, true);
+        expect(pts.length).toBe(4);
+        let side = pts[1][0];
+        expect(side).toBeGreaterThanOrEqual(100 + ELBOW_CLEAR);
+        expect(pts[2][0]).toBe(side);
+        expect(pts[0][1]).toBeGreaterThan(B.y2);     /*  below B  */
+        expect(pts[3][1]).toBeLessThan(A.y1);        /*  above A  */
+    });
+
+    test("a reciprocal pair shares no segment", () => {
+        let forward = elbow_points(A_HOOK, B_FKEY, A, B, 0, true);
+        let back = elbow_points(B_HOOK, A_FKEY, B, A, 1, true);
+        let channel = forward[0][1];
+        expect(back.every((p) => p[1] !== channel)).toBe(true);
+        expect(back[1][0]).toBeGreaterThan(A.x2);
+    });
+
+    test("a negative lane goes round the other side", () => {
+        let right = elbow_points(B_HOOK, A_FKEY, B, A, 1, true);
+        let left = elbow_points(B_HOOK, A_FKEY, B, A, -1, true);
+        expect(right[1][0]).toBeGreaterThan(A.x2);
+        expect(left[1][0]).toBeLessThan(A.x1);
+    });
+
+    test("two cards in one row are not joined through them", () => {
+        /*  C beside A, same row: A's hook (bottom) to C's fkey (top).  */
+        let C = {x1: 200, y1: 0, x2: 300, y2: 40};
+        let pts = elbow_points(A_HOOK, [250, 0], A, C, 0, true);
+        expect(pts.length).toBe(4);
+        expect(pts[1][0]).toBeGreaterThan(C.x2);
+    });
+});
+
+describe("read left to right", () => {
+    test("is the same geometry with the axes swapped", () => {
+        let sw = (p) => [p[1], p[0]];
+        let swb = (b) => ({x1: b.y1, y1: b.x1, x2: b.y2, y2: b.x2});
+        for(let [s, t, bs, bt, lane] of [
+            [A_HOOK, B_FKEY, A, B, 0],
+            [A_HOOK, B_FKEY, A, B, 1],
+            [B_HOOK, A_FKEY, B, A, -1],
+        ]) {
+            let down = elbow_points(s, t, bs, bt, lane, true);
+            let right = elbow_points(sw(s), sw(t), swb(bs), swb(bt), lane, false);
+            expect(right).toEqual(down.map(sw));
+        }
+    });
+});