@yuneta/gobj-ui 7.23.151 → 7.23.152

package/README.md

@@ -1457,8 +1457,11 @@ the lane, plus the two ends; a turn costs 40px of line), over the cards within
 400px first and all of them if that finds no way; with no way at all the
 simple elbow stays. A parent and the row of children under it keep their bus;
 what gets routed is a detour with a third card in its way, an edge dropping
-several rows, an edge between two cards of one row. Ports are not obstacles,
-only cards. G6's `shortest-path` router is not used: it is not exported, it
+several rows, an edge between two cards of one row. Since `7.23.152` a node is
+measured **whole** — card, ports and label — so a line keeps clear of the
+ports as well; the edge's own ports stick out of its own cards, so its first
+and last segments are not tested against their own box. 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

@@ -29669,8 +29669,8 @@ function elbow_points(s, t, box_s, box_t, lane, vertical) {
 	}
 	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;
+	let y1 = Math.max(s[1], box_s.y2) + out;
+	let y2 = Math.min(t[1], box_t.y1) - out;
 	return [
 		[s[0], y1],
 		[side, y1],
@@ -29699,15 +29699,30 @@ function segment_hits(a, c, b) {
 	let y2 = Math.max(a[1], c[1]);
 	return x1 < b.x2 && x2 > b.x1 && y1 < b.y2 && y2 > b.y1;
 }
+function same_box(a, b) {
+	return !!a && !!b && a.x1 === b.x1 && a.y1 === b.y1 && a.x2 === b.x2 && a.y2 === b.y2;
+}
 /************************************************************
 *  Does the polyline `points` (its ends included) cross any of
-*  `boxes`? A card is a box shrunk by a pixel, so a line along
-*  its border or leaving from a port on it is not a hit.
+*  `boxes`? A box is shrunk by a pixel, so a line along its
+*  border is not a hit.
+*
+*  A box is a whole node, its ports included, and the edge's own
+*  ports stick out of its own two cards: its first segment starts
+*  inside `box_s` and its last one ends inside `box_t`. Those two
+*  segments are not tested against their own box; every other
+*  segment is, so a line may not run back over its own cards.
 ************************************************************/
-function elbow_path_hits(points, boxes) {
+function elbow_path_hits(points, boxes, box_s, box_t) {
+	let last = points.length - 2;
 	for (let b of boxes) {
 		let inner = box_expand(b, -1);
-		for (let i = 0; i + 1 < points.length; i++) if (segment_hits(points[i], points[i + 1], inner)) return true;
+		let own_s = same_box(b, box_s);
+		let own_t = same_box(b, box_t);
+		for (let i = 0; i <= last; i++) {
+			if (own_s && i === 0 || own_t && i === last) continue;
+			if (segment_hits(points[i], points[i + 1], inner)) return true;
+		}
 	}
 	return false;
 }
@@ -29849,8 +29864,11 @@ function orth_search(a, z, boxes) {
 *  port, the shortest way along the gaps between the cards, in.
 *  A parent and the row of children under it keep their bus.
 *
-*  `boxes` are all the cards on screen, the two of the edge
-*  included. The route keeps a clearance from every card, which
+*  `boxes` are all the nodes on screen, the two of the edge
+*  included, each as the box of the WHOLE node -- card, ports and
+*  label -- so a line clears the ports too. `box_s` and `box_t`
+*  are the edge's own two, measured the same way. The route keeps
+*  a clearance from every box, which
 *  grows with the lane so that two routed edges of one pair do not
 *  coincide. Nearby cards first; all of them if that finds no way;
 *  the simple elbow if nothing does.
@@ -29863,10 +29881,10 @@ function elbow_route(s, t, box_s, box_t, lane, vertical, boxes) {
 		s,
 		...simple,
 		t
-	], others)) return simple;
+	], others, box_s, box_t)) return simple;
 	let m = 12 + Math.abs(lane) * 10;
-	let a = [s[0], s[1] + m + 4];
-	let z = [t[0], t[1] - m - 4];
+	let a = [s[0], Math.max(s[1], box_s.y2) + m + 1];
+	let z = [t[0], Math.min(t[1], box_t.y1) - m - 1];
 	let region = box_expand({
 		x1: Math.min(a[0], z[0], box_s.x1, box_t.x1),
 		y1: Math.min(a[1], z[1], box_s.y1, box_t.y1),
@@ -59265,7 +59283,8 @@ var TreedbTreeLayout = class extends _antv_g6.BaseLayout {
 var ELBOW_RADIUS = 6;
 function elbow_box(node) {
 	try {
-		let b = node.getShape("key").getBounds();
+		let b = node.getRenderBounds();
+		if (!b || b.isEmpty && b.isEmpty()) b = node.getShape("key").getBounds();
 		return {
 			x1: b.min[0],
 			y1: b.min[1],

package/dist/gobj-ui.es.js

@@ -29664,8 +29664,8 @@ function elbow_points(s, t, box_s, box_t, lane, vertical) {
 	}
 	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;
+	let y1 = Math.max(s[1], box_s.y2) + out;
+	let y2 = Math.min(t[1], box_t.y1) - out;
 	return [
 		[s[0], y1],
 		[side, y1],
@@ -29694,15 +29694,30 @@ function segment_hits(a, c, b) {
 	let y2 = Math.max(a[1], c[1]);
 	return x1 < b.x2 && x2 > b.x1 && y1 < b.y2 && y2 > b.y1;
 }
+function same_box(a, b) {
+	return !!a && !!b && a.x1 === b.x1 && a.y1 === b.y1 && a.x2 === b.x2 && a.y2 === b.y2;
+}
 /************************************************************
 *  Does the polyline `points` (its ends included) cross any of
-*  `boxes`? A card is a box shrunk by a pixel, so a line along
-*  its border or leaving from a port on it is not a hit.
+*  `boxes`? A box is shrunk by a pixel, so a line along its
+*  border is not a hit.
+*
+*  A box is a whole node, its ports included, and the edge's own
+*  ports stick out of its own two cards: its first segment starts
+*  inside `box_s` and its last one ends inside `box_t`. Those two
+*  segments are not tested against their own box; every other
+*  segment is, so a line may not run back over its own cards.
 ************************************************************/
-function elbow_path_hits(points, boxes) {
+function elbow_path_hits(points, boxes, box_s, box_t) {
+	let last = points.length - 2;
 	for (let b of boxes) {
 		let inner = box_expand(b, -1);
-		for (let i = 0; i + 1 < points.length; i++) if (segment_hits(points[i], points[i + 1], inner)) return true;
+		let own_s = same_box(b, box_s);
+		let own_t = same_box(b, box_t);
+		for (let i = 0; i <= last; i++) {
+			if (own_s && i === 0 || own_t && i === last) continue;
+			if (segment_hits(points[i], points[i + 1], inner)) return true;
+		}
 	}
 	return false;
 }
@@ -29844,8 +29859,11 @@ function orth_search(a, z, boxes) {
 *  port, the shortest way along the gaps between the cards, in.
 *  A parent and the row of children under it keep their bus.
 *
-*  `boxes` are all the cards on screen, the two of the edge
-*  included. The route keeps a clearance from every card, which
+*  `boxes` are all the nodes on screen, the two of the edge
+*  included, each as the box of the WHOLE node -- card, ports and
+*  label -- so a line clears the ports too. `box_s` and `box_t`
+*  are the edge's own two, measured the same way. The route keeps
+*  a clearance from every box, which
 *  grows with the lane so that two routed edges of one pair do not
 *  coincide. Nearby cards first; all of them if that finds no way;
 *  the simple elbow if nothing does.
@@ -29858,10 +29876,10 @@ function elbow_route(s, t, box_s, box_t, lane, vertical, boxes) {
 		s,
 		...simple,
 		t
-	], others)) return simple;
+	], others, box_s, box_t)) return simple;
 	let m = 12 + Math.abs(lane) * 10;
-	let a = [s[0], s[1] + m + 4];
-	let z = [t[0], t[1] - m - 4];
+	let a = [s[0], Math.max(s[1], box_s.y2) + m + 1];
+	let z = [t[0], Math.min(t[1], box_t.y1) - m - 1];
 	let region = box_expand({
 		x1: Math.min(a[0], z[0], box_s.x1, box_t.x1),
 		y1: Math.min(a[1], z[1], box_s.y1, box_t.y1),
@@ -59260,7 +59278,8 @@ var TreedbTreeLayout = class extends BaseLayout {
 var ELBOW_RADIUS = 6;
 function elbow_box(node) {
 	try {
-		let b = node.getShape("key").getBounds();
+		let b = node.getRenderBounds();
+		if (!b || b.isEmpty && b.isEmpty()) b = node.getShape("key").getBounds();
 		return {
 			x1: b.min[0],
 			y1: b.min[1],

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -4229,11 +4229,17 @@ class TreedbTreeLayout extends BaseLayout
  ************************************************************/
 const ELBOW_RADIUS = 6;
 
-/*  The box of a card on the canvas, for a detour to go round it.  */
+/*  The box of a WHOLE node on the canvas -- the card, its ports and
+ *  its label -- for an elbow to keep clear of. The ports are the
+ *  reason it is not the key shape's box: they stick out of the
+ *  card, and a line over a port reads as a link to it.  */
 function elbow_box(node)
 {
     try {
-        let b = node.getShape('key').getBounds();
+        let b = node.getRenderBounds();
+        if(!b || b.isEmpty && b.isEmpty()) {
+            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}`);

package/src/treedb_elbow.js

@@ -96,8 +96,10 @@ export function elbow_points(s, t, box_s, box_t, lane, vertical)
     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  */
+    /*  From the border of the whole box, which holds the ports: a
+     *  port sticks out of its card, and the run has to clear it.  */
+    let y1 = Math.max(s[1], box_s.y2) + out;     /*  a hook port is on the bottom edge  */
+    let y2 = Math.min(t[1], box_t.y1) - out;     /*  an fkey port is on the top edge  */
     return [[s[0], y1], [side, y1], [side, y2], [t[0], y2]];
 }
 
@@ -133,16 +135,33 @@ function segment_hits(a, c, b)
     return x1 < b.x2 && x2 > b.x1 && y1 < b.y2 && y2 > b.y1;
 }
 
+function same_box(a, b)
+{
+    return !!a && !!b && a.x1 === b.x1 && a.y1 === b.y1 && a.x2 === b.x2 && a.y2 === b.y2;
+}
+
 /************************************************************
  *  Does the polyline `points` (its ends included) cross any of
- *  `boxes`? A card is a box shrunk by a pixel, so a line along
- *  its border or leaving from a port on it is not a hit.
+ *  `boxes`? A box is shrunk by a pixel, so a line along its
+ *  border is not a hit.
+ *
+ *  A box is a whole node, its ports included, and the edge's own
+ *  ports stick out of its own two cards: its first segment starts
+ *  inside `box_s` and its last one ends inside `box_t`. Those two
+ *  segments are not tested against their own box; every other
+ *  segment is, so a line may not run back over its own cards.
  ************************************************************/
-export function elbow_path_hits(points, boxes)
+export function elbow_path_hits(points, boxes, box_s, box_t)
 {
+    let last = points.length - 2;
     for(let b of boxes) {
         let inner = box_expand(b, -1);
-        for(let i = 0; i + 1 < points.length; i++) {
+        let own_s = same_box(b, box_s);
+        let own_t = same_box(b, box_t);
+        for(let i = 0; i <= last; i++) {
+            if((own_s && i === 0) || (own_t && i === last)) {
+                continue;
+            }
             if(segment_hits(points[i], points[i + 1], inner)) {
                 return true;
             }
@@ -332,8 +351,11 @@ function orth_search(a, z, boxes)
  *  port, the shortest way along the gaps between the cards, in.
  *  A parent and the row of children under it keep their bus.
  *
- *  `boxes` are all the cards on screen, the two of the edge
- *  included. The route keeps a clearance from every card, which
+ *  `boxes` are all the nodes on screen, the two of the edge
+ *  included, each as the box of the WHOLE node -- card, ports and
+ *  label -- so a line clears the ports too. `box_s` and `box_t`
+ *  are the edge's own two, measured the same way. The route keeps
+ *  a clearance from every box, which
  *  grows with the lane so that two routed edges of one pair do not
  *  coincide. Nearby cards first; all of them if that finds no way;
  *  the simple elbow if nothing does.
@@ -347,13 +369,14 @@ export function elbow_route(s, t, box_s, box_t, lane, vertical, boxes)
     }
 
     let simple = elbow_points(s, t, box_s, box_t, lane, true);
-    if(!elbow_path_hits([s, ...simple, t], others)) {
+    if(!elbow_path_hits([s, ...simple, t], others, box_s, box_t)) {
         return simple;
     }
 
     let m = ELBOW_CLEAR / 2 + Math.abs(lane) * ELBOW_STEP;
-    let a = [s[0], s[1] + m + 4];       /*  out of a bottom port  */
-    let z = [t[0], t[1] - m - 4];       /*  into a top port  */
+    /*  Just outside the grown box of each end, which holds its ports.  */
+    let a = [s[0], Math.max(s[1], box_s.y2) + m + 1];     /*  out of a bottom port  */
+    let z = [t[0], Math.min(t[1], box_t.y1) - m - 1];     /*  into a top port  */
     let region = box_expand({
         x1: Math.min(a[0], z[0], box_s.x1, box_t.x1),
         y1: Math.min(a[1], z[1], box_s.y1, box_t.y1),

package/src/treedb_elbow.test.js

@@ -165,6 +165,43 @@ describe("the route round the other cards", () => {
     });
 });
 
+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.  */
+    const AP = {x1: 0, y1: -7, x2: 100, y2: 47};
+    const BP = {x1: 350, y1: 123, x2: 450, y2: 177};
+    const S = [50, 40];
+    const T2 = [400, 130];
+
+    test("an edge's own ports do not make its line a hit", () => {
+        let simple = elbow_points(S, T2, AP, BP, 0, true);
+        expect(elbow_path_hits([S, ...simple, T2], [AP, BP], AP, BP)).toBe(false);
+        expect(elbow_route(S, T2, AP, BP, 0, true, [AP, BP])).toEqual(simple);
+    });
+
+    test("a port of a third card in the channel is gone round", () => {
+        /*  F's card ends at y 80, above the channel (85); its port
+         *  reaches down to 95, into it.  */
+        const F_CARD = {x1: 200, y1: 0, x2: 300, y2: 80};
+        const F = {x1: 200, y1: -7, x2: 300, y2: 95};
+        let simple = elbow_points(S, T2, AP, BP, 0, true);
+        expect(elbow_path_hits([S, ...simple, T2], [AP, BP, F_CARD], AP, BP)).toBe(false);
+        expect(elbow_path_hits([S, ...simple, T2], [AP, BP, F], AP, BP)).toBe(true);
+        let route = elbow_route(S, T2, AP, BP, 0, true, [AP, BP, F]);
+        expect(elbow_path_hits([S, ...route, T2], [AP, BP, F], AP, BP)).toBe(false);
+    });
+
+    test("a detour clears the ports of its own two cards", () => {
+        /*  B below A, both with their ports: B -> A goes round.  */
+        const AB = {x1: 0, y1: -7, x2: 100, y2: 47};
+        const BB = {x1: 0, y1: 123, x2: 100, y2: 177};
+        let pts = elbow_points([60, 170], [50, 0], BB, AB, 0, true);
+        expect(pts[0][1]).toBeGreaterThan(BB.y2);
+        expect(pts[3][1]).toBeLessThan(AB.y1);
+        expect(elbow_path_hits([[60, 170], ...pts, [50, 0]], [AB, BB], BB, AB)).toBe(false);
+    });
+});
+
 describe("read left to right", () => {
     test("is the same geometry with the axes swapped", () => {
         let sw = (p) => [p[1], p[0]];