@yuneta/gobj-ui 7.23.68 → 7.23.70

package/README.md

@@ -1266,6 +1266,55 @@ a level or two, with a count on every cut.
 
 One consumer key came with it: `show more`, the chip's tooltip.
 
+### Layouts: what G6 offers, and the two made for a treedb
+
+What a treedb graph IS, once folded: a **forest read left to right**. A main
+topic is a tree (places: country, region, site, hall), the other topics hang
+from its nodes through hooks, a record may hang from two parents (a device
+from its place AND its controller), and every visible node was reached from a
+root. Tens to a few hundred cards on screen, never the store.
+
+G6 5.1 registers these layouts, and this is how each meets that shape:
+
+| layout | what it does | for a treedb |
+|---|---|---|
+| `dagre` / `antv-dagre` | layered DAG: longest-path ranks, crossing minimisation, one direction | the right reading (LR); but the crossing heuristic **reorders the siblings on every run** — open one hook and the column next to it shuffles — and it is the one thing that takes time on a big expansion |
+| `compact-box`, `indented`, `dendrogram`, `mindmap` | @antv/hierarchy tree layouts | the shape wanted, but G6 runs them on a tree it **builds from the edges** (`createTreeStructure`): a node with two parents lands under whichever parent the builder met first, unstably |
+| `radial` | MDS on graph distances from a focus node, a ring per depth, overlaps pushed apart afterwards | the right idea — a hall with a hundred devices is a **fan**, not a column — but the ring radius is one it is TOLD: twenty cards of 172px on a ring of radius 200 have 52px each and pile up. Tried, and replaced by our own (below) |
+| `force`, `d3-force`, `force-atlas2`, `fruchterman` | physics | scatter a tree: the pile with springs. `d3-force` and `force-atlas2` stay in the picker for the rare flat treedb |
+| `circular`, `concentric`, `grid`, `mds`, `random` | rings, rings by degree, a grid, projection, noise | none knows a parent from a child |
+| `combo-combined`, `fishbone` | combos / cause-effect | not this data |
+
+So three of our own, in `treedb_layout.js` (pure, tested), registered as G6
+layouts by three thin adapters in `c_g6_nodes_tree.js`:
+
+- **`treedb-tree`** — the classic tidy tree, left to right. A column per
+  depth as wide as its widest card, a node centred on the block of its
+  children, siblings stacked with `nodesep`. **The default** for a treedb
+  nobody has arranged (was `dagre`).
+- **`treedb-outline`** — one node per row, indented by depth: what a JSON
+  viewer draws, and what a treedb is when read as one. Tall, but nothing is
+  ever beside anything.
+- **`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 larger of one step out from the ring before and
+  the length its cards need side by side. A fan that cannot overlap by
+  construction; several roots share the circle around an empty centre.
+
+Both 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
+controller, because the place's column came first) and its other links are
+drawn as edges across the tree; the children of a node are ordered by the
+**hook they hang from** (the parent's port order — the schema's column order)
+and then by node order (record order, the pages' order); a cycle nothing
+reaches gets a root. Consequences that dagre cannot give: O(n), no crossing
+heuristic, and **opening a hook moves nothing that is not under or beside
+it** — the cards keep their order, the eye keeps its place, and the `+N` chip
+sits at the end of its own hook's children. The hook rank comes from the
+edge's `sourcePort` looked up in the parent's ports, so the adapter needs no
+model, only the G6 data.
+
 ### The legend is the graph's layer control
 
 The legend strip under the toolbar is **always there** now (the *Legend*

package/dist/gobj-ui.cjs.js

@@ -27314,6 +27314,329 @@ function fold_reveal(model, state, node_key) {
 	return true;
 }
 //#endregion
+//#region src/treedb_layout.js
+/***********************************************************************
+*          treedb_layout.js
+*
+*      Two layouts made for a treedb, and nothing else.
+*
+*      What a treedb graph IS, once it is folded (treedb_fold_model.js):
+*      a forest read left to right. A main topic is a tree (places:
+*      country, region, site, hall), the other topics hang from its
+*      nodes through hooks (devices, users, controllers), a record may
+*      hang from two parents (a device from its place AND its
+*      controller), and every visible node was reached from a root.
+*      Tens to a few hundred cards on screen, never the whole store.
+*
+*      G6's own layouts either do not know that or pay for not knowing:
+*
+*      - `dagre` gets the reading direction right and then ranks by
+*        longest path and minimises crossings with a heuristic that
+*        REORDERS the siblings on every run -- open one hook and the
+*        column next to it shuffles. It is O(n·m) per sweep and it is
+*        the one thing that takes time on a big expansion.
+*      - the tree layouts (`compact-box`, `indented`, `dendrogram`,
+*        `mindmap`) draw exactly the shape wanted, but G6 runs them on
+*        a TREE it builds from the edges: a node with two parents is
+*        placed by whichever parent the builder met first, unstably.
+*      - the force family scatters a tree, which is the pile with
+*        physics.
+*
+*      So: a tidy tree (`tree`) and an outline (`outline`), both fed by
+*      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 from the roots -- the place, not the
+*        controller, because the place's column came first -- and the
+*        other links are drawn as edges across the tree;
+*      - the children of a node are ordered by the HOOK they hang from
+*        (the parent's port order, which is the schema's column order)
+*        and then by node order (record order, the pages' order);
+*      - a node nothing reaches (a cycle) is a root too.
+*
+*      `tree`: the classic tidy tree, left to right. Each depth is a
+*      column as wide as its widest card; a node is centred on the
+*      block of its children; siblings stack with `nodesep` between
+*      them. O(n), and opening a hook moves NOTHING that is not below
+*      or beside it -- the cards keep their order, the eye keeps its
+*      place.
+*
+*      `outline`: one node per row, indented by depth -- what a JSON
+*      viewer draws, and what a treedb is when read as one. Tall, but
+*      nothing is ever beside anything: the reader scrolls a list.
+*
+*      Pure: takes plain nodes and edges, returns positions. The G6
+*      classes in c_g6_nodes_tree.js are two thin adapters over it.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+var DEFAULTS = {
+	nodesep: 18,
+	ranksep: 110,
+	indent: 48
+};
+/************************************************************
+*  The spanning tree of a graph, deterministic.
+*
+*      nodes   [{id, w, h, order}]        order: creation index
+*      edges   [{source, target, rank}]   rank: the hook's position in
+*                                         the parent's ports (0 = first)
+*
+*  Returns {roots: [id], children: Map<id, [id]>, depth: Map<id, n>,
+*           by_id: Map<id, node>}
+************************************************************/
+function spanning_tree(nodes, edges) {
+	let by_id = /* @__PURE__ */ new Map();
+	for (let i = 0; i < nodes.length; i++) {
+		let n = nodes[i];
+		by_id.set(n.id, Object.assign({ order: i }, n));
+	}
+	let out = /* @__PURE__ */ new Map();
+	let has_parent = /* @__PURE__ */ new Set();
+	for (let e of edges) {
+		if (!by_id.has(e.source) || !by_id.has(e.target) || e.source === e.target) continue;
+		if (!out.has(e.source)) out.set(e.source, []);
+		out.get(e.source).push({
+			id: e.target,
+			rank: e.rank > 0 ? e.rank : 0
+		});
+		has_parent.add(e.target);
+	}
+	for (let list of out.values()) list.sort((a, b) => {
+		if (a.rank !== b.rank) return a.rank - b.rank;
+		return by_id.get(a.id).order - by_id.get(b.id).order;
+	});
+	let roots = [];
+	for (let n of by_id.values()) if (!has_parent.has(n.id)) roots.push(n.id);
+	let children = /* @__PURE__ */ new Map();
+	let depth = /* @__PURE__ */ new Map();
+	let assign = (start) => {
+		let queue = [start];
+		depth.set(start, 0);
+		while (queue.length) {
+			let id = queue.shift();
+			let kids = [];
+			for (let link of out.get(id) || []) {
+				if (depth.has(link.id)) continue;
+				depth.set(link.id, depth.get(id) + 1);
+				kids.push(link.id);
+				queue.push(link.id);
+			}
+			children.set(id, kids);
+		}
+	};
+	for (let root of roots) assign(root);
+	for (let n of by_id.values()) if (!depth.has(n.id)) {
+		roots.push(n.id);
+		assign(n.id);
+	}
+	return {
+		roots,
+		children,
+		depth,
+		by_id
+	};
+}
+/************************************************************
+*  The tidy tree, left to right.
+*
+*  Returns Map<id, {x, y}> with the CENTRE of each node, the way G6
+*  positions a node.
+************************************************************/
+function layout_tree(nodes, edges, opts) {
+	let o = Object.assign({}, DEFAULTS, opts || {});
+	let t = spanning_tree(nodes, edges);
+	let pos = /* @__PURE__ */ new Map();
+	let col_w = [];
+	for (let [id, d] of t.depth) {
+		let w = t.by_id.get(id).w;
+		col_w[d] = Math.max(col_w[d] || 0, w);
+	}
+	let col_x = [];
+	let x = 0;
+	for (let d = 0; d < col_w.length; d++) {
+		col_x[d] = x;
+		x += (col_w[d] || 0) + o.ranksep;
+	}
+	let height = /* @__PURE__ */ new Map();
+	let measure = (id) => {
+		let kids = t.children.get(id) || [];
+		let own = t.by_id.get(id).h;
+		if (!kids.length) {
+			height.set(id, own);
+			return own;
+		}
+		let sum = 0;
+		for (let i = 0; i < kids.length; i++) {
+			sum += measure(kids[i]);
+			if (i > 0) sum += o.nodesep;
+		}
+		let h = Math.max(own, sum);
+		height.set(id, h);
+		return h;
+	};
+	for (let root of t.roots) measure(root);
+	let place = (id, top) => {
+		let n = t.by_id.get(id);
+		let d = t.depth.get(id);
+		let kids = t.children.get(id) || [];
+		let block = height.get(id);
+		let cx = col_x[d] + (col_w[d] - n.w) / 2 + n.w / 2;
+		if (!kids.length) {
+			pos.set(id, {
+				x: cx,
+				y: top + block / 2
+			});
+			return;
+		}
+		let kids_h = 0;
+		for (let i = 0; i < kids.length; i++) {
+			kids_h += height.get(kids[i]);
+			if (i > 0) kids_h += o.nodesep;
+		}
+		let cursor = top + (block - kids_h) / 2;
+		for (let kid of kids) {
+			place(kid, cursor);
+			cursor += height.get(kid) + o.nodesep;
+		}
+		pos.set(id, {
+			x: cx,
+			y: top + block / 2
+		});
+	};
+	let top = 0;
+	for (let root of t.roots) {
+		place(root, top);
+		top += height.get(root) + o.nodesep * 2;
+	}
+	return pos;
+}
+/************************************************************
+*  The radial tree: the root in the middle, a ring per depth.
+*
+*  G6's `radial` places by MDS on the graph distances and pushes
+*  overlaps apart afterwards, with a ring radius it is TOLD; twenty
+*  cards of 172px on a ring of radius 200 have 52px each and pile
+*  up. This one is the radial form of the tidy tree above: every
+*  subtree gets an angular SECTOR proportional to its leaves, a node
+*  sits in the middle of its sector, and the radius of each ring is
+*  the larger of "one step further out than the ring before" and
+*  "long enough for its nodes to sit side by side" -- so a hall
+*  with a hundred devices is a wide, sparse fan, and nothing
+*  overlaps by construction. Several roots share the circle around
+*  a virtual centre.
+*
+*      ranksep   the step between rings
+*      nodesep   the gap between neighbours on a ring
+************************************************************/
+function layout_radial(nodes, edges, opts) {
+	let o = Object.assign({}, DEFAULTS, opts || {});
+	let t = spanning_tree(nodes, edges);
+	let pos = /* @__PURE__ */ new Map();
+	if (!t.roots.length) return pos;
+	let leaves = /* @__PURE__ */ new Map();
+	let count = (id) => {
+		let kids = t.children.get(id) || [];
+		if (!kids.length) {
+			leaves.set(id, 1);
+			return 1;
+		}
+		let n = 0;
+		for (let kid of kids) n += count(kid);
+		leaves.set(id, n);
+		return n;
+	};
+	let total = 0;
+	for (let root of t.roots) total += count(root);
+	let single = t.roots.length === 1;
+	let ring_of = (id) => t.depth.get(id) + (single ? 0 : 1);
+	let angle = /* @__PURE__ */ new Map();
+	let rings = [];
+	let sector = (id, from, span) => {
+		let a = from + span / 2;
+		angle.set(id, a);
+		let ring = ring_of(id);
+		if (!rings[ring]) rings[ring] = [];
+		let n = t.by_id.get(id);
+		rings[ring].push({
+			id,
+			angle: a,
+			diag: Math.hypot(n.w, n.h)
+		});
+		let cursor = from;
+		for (let kid of t.children.get(id) || []) {
+			let part = span * leaves.get(kid) / leaves.get(id);
+			sector(kid, cursor, part);
+			cursor += part;
+		}
+	};
+	if (single) {
+		let root = t.roots[0];
+		angle.set(root, 0);
+		let cursor = -Math.PI / 2;
+		for (let kid of t.children.get(root) || []) {
+			let part = 2 * Math.PI * leaves.get(kid) / leaves.get(root);
+			sector(kid, cursor, part);
+			cursor += part;
+		}
+	} else {
+		let cursor = -Math.PI / 2;
+		for (let root of t.roots) {
+			let part = 2 * Math.PI * leaves.get(root) / total;
+			sector(root, cursor, part);
+			cursor += part;
+		}
+	}
+	let radius = [0];
+	for (let ring = 1; ring < rings.length; ring++) {
+		let r = radius[ring - 1] + o.ranksep;
+		let list = (rings[ring] || []).slice().sort((a, b) => a.angle - b.angle);
+		for (let i = 0; i < list.length && list.length > 1; i++) {
+			let a = list[i];
+			let b = list[(i + 1) % list.length];
+			let gap = i + 1 < list.length ? b.angle - a.angle : b.angle + 2 * Math.PI - a.angle;
+			if (gap > 1e-9) r = Math.max(r, (a.diag / 2 + b.diag / 2 + o.nodesep) / gap);
+		}
+		radius[ring] = r;
+	}
+	for (let [id, a] of angle) {
+		let r = radius[ring_of(id)] || 0;
+		pos.set(id, {
+			x: r * Math.cos(a),
+			y: r * Math.sin(a)
+		});
+	}
+	return pos;
+}
+/************************************************************
+*  The outline: one node per row, indented by depth, in the
+*  pre-order of the spanning tree. Rows are left-aligned on
+*  their indent, so a column of chips reads as a list.
+************************************************************/
+function layout_outline(nodes, edges, opts) {
+	let o = Object.assign({}, DEFAULTS, opts || {});
+	let t = spanning_tree(nodes, edges);
+	let pos = /* @__PURE__ */ new Map();
+	let y = 0;
+	let visit = (id) => {
+		let n = t.by_id.get(id);
+		let d = t.depth.get(id);
+		pos.set(id, {
+			x: d * o.indent + n.w / 2,
+			y: y + n.h / 2
+		});
+		y += n.h + o.nodesep;
+		for (let kid of t.children.get(id) || []) visit(kid);
+	};
+	for (let root of t.roots) {
+		visit(root);
+		y += o.nodesep;
+	}
+	return pos;
+}
+//#endregion
 //#region node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
@@ -54134,6 +54457,16 @@ var SELECT_RING = "rgba(59,130,246,0.95)";
 ***************************************************************/
 var _layouts = {
 	"manual": { type: "manual" },
+	"treedb-tree": {
+		type: "treedb-tree",
+		nodesep: 18,
+		ranksep: 110
+	},
+	"treedb-outline": {
+		type: "treedb-outline",
+		nodesep: 12,
+		indent: 48
+	},
 	"dagre": {
 		type: "dagre",
 		rankdir: "LR",
@@ -54146,6 +54479,11 @@ var _layouts = {
 		nodesep: 30,
 		ranksep: 80
 	},
+	"radial": {
+		type: "treedb-radial",
+		nodesep: 24,
+		ranksep: 180
+	},
 	"d3-force": {
 		type: "d3-force",
 		link: {
@@ -54425,6 +54763,9 @@ function register_layouts(gobj) {
 	if (!_g6_extensions_registered) {
 		_g6_extensions_registered = true;
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.LAYOUT, "manual", ManualLayout);
+		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.LAYOUT, "treedb-tree", TreedbTreeLayout);
+		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.LAYOUT, "treedb-outline", TreedbOutlineLayout);
+		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.LAYOUT, "treedb-radial", TreedbRadialLayout);
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.NODE, "light", LightNode);
 	}
 }
@@ -55036,8 +55377,13 @@ function build_ports(gobj, desc) {
 *  included, because the saved arrangements were made with the
 *  ports on the top and bottom edges.
 ************************************************************/
+var LR_LAYOUTS = [
+	"dagre",
+	"treedb-tree",
+	"treedb-outline"
+];
 function layout_direction(gobj) {
-	return gobj.priv.layout === "dagre" ? "LR" : "TB";
+	return (0, _yuneta_gobj_js.str_in_list)(LR_LAYOUTS, gobj.priv.layout) ? "LR" : "TB";
 }
 function edge_type_for(gobj) {
 	return layout_direction(gobj) === "LR" ? "cubic-horizontal" : "cubic";
@@ -56037,6 +56383,73 @@ var ManualLayout = class extends _antv_g6.BaseLayout {
 	}
 };
 /************************************************************
+*  Custom G6 layouts: TreedbTreeLayout / TreedbOutlineLayout.
+*
+*  Thin adapters over treedb_layout.js: the nodes with their sizes,
+*  the edges with the RANK of the hook they leave by (the position
+*  of the source port in the parent's ports, which is the schema's
+*  column order), and the positions back. A `+N` chip's edge has a
+*  source port too, so the chip sits at the end of its hook's
+*  children, where the page ends.
+************************************************************/
+function treedb_layout_input(data) {
+	const { nodes = [], edges = [] } = data;
+	let ports_of = /* @__PURE__ */ new Map();
+	return {
+		nodes: nodes.map((node) => {
+			let size = node.style && node.style.size || [172, 96];
+			let w = (0, _yuneta_gobj_js.is_array)(size) ? size[0] : size;
+			let h = (0, _yuneta_gobj_js.is_array)(size) ? size.length > 1 ? size[1] : size[0] : size;
+			let ports = node.style && (0, _yuneta_gobj_js.is_array)(node.style.ports) ? node.style.ports : [];
+			ports_of.set(node.id, ports.map((p) => p.key));
+			return {
+				id: node.id,
+				w,
+				h
+			};
+		}),
+		edges: edges.map((edge) => {
+			let port = edge.style ? edge.style.sourcePort : void 0;
+			let keys = ports_of.get(edge.source) || [];
+			let rank = port ? keys.indexOf(port) : -1;
+			return {
+				source: edge.source,
+				target: edge.target,
+				rank: rank >= 0 ? rank : 0
+			};
+		})
+	};
+}
+function treedb_layout_output(pos) {
+	let out = [];
+	for (let [id, p] of pos) out.push({
+		id,
+		style: {
+			x: p.x,
+			y: p.y
+		}
+	});
+	return { nodes: out };
+}
+var TreedbTreeLayout = class extends _antv_g6.BaseLayout {
+	async execute(data, options) {
+		let input = treedb_layout_input(data);
+		return treedb_layout_output(layout_tree(input.nodes, input.edges, options));
+	}
+};
+var TreedbOutlineLayout = class extends _antv_g6.BaseLayout {
+	async execute(data, options) {
+		let input = treedb_layout_input(data);
+		return treedb_layout_output(layout_outline(input.nodes, input.edges, options));
+	}
+};
+var TreedbRadialLayout = class extends _antv_g6.BaseLayout {
+	async execute(data, options) {
+		let input = treedb_layout_input(data);
+		return treedb_layout_output(layout_radial(input.nodes, input.edges, options));
+	}
+};
+/************************************************************
 *  Node selection and resize handles
 ************************************************************/
 var RESIZE_HANDLE_SIZE = 8;
@@ -57698,7 +58111,7 @@ function auto_layout(gobj) {
 	if (priv._layout_asked) return false;
 	if (priv._nodes_total > 0 && priv._nodes_placed * 2 > priv._nodes_total) return false;
 	if (!priv.graph) return false;
-	let name = "dagre";
+	let name = "treedb-tree";
 	(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "layout", name);
 	try {
 		priv.graph.setLayout(_layouts[name]);
@@ -60535,6 +60948,9 @@ function option_label(name) {
 		case "writing": return (0, i18next.t)("writing");
 		case "edition": return (0, i18next.t)("edition");
 		case "manual": return (0, i18next.t)("manual");
+		case "treedb-tree": return (0, i18next.t)("treedb-tree");
+		case "treedb-outline": return (0, i18next.t)("treedb-outline");
+		case "radial": return (0, i18next.t)("radial");
 		case "dagre": return (0, i18next.t)("dagre");
 		case "antv-dagre": return (0, i18next.t)("antv-dagre");
 		case "d3-force": return (0, i18next.t)("d3-force");
@@ -61638,6 +62054,7 @@ function ac_set_operation_mode(gobj, event, kw, src) {
 *  card's graph icon travels — as EV_TOPIC_SELECTED, which the host turns
 *  into the URL, so what you are looking at stays linkable.
 ************************************************************/
+var LEGEND_GLYPH_STYLE = "font-size:1.5em; line-height:1; color:inherit;";
 function refresh_legend(gobj) {
 	let priv = gobj.priv;
 	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
@@ -61707,7 +62124,11 @@ function refresh_legend(gobj) {
 				"aria-label": (0, i18next.t)("main topic"),
 				"aria-pressed": "true"
 			},
-			"★",
+			[[
+				"span",
+				{ style: LEGEND_GLYPH_STYLE },
+				"★"
+			]],
 			{ click: (evt) => {
 				evt.stopPropagation();
 				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_LEGEND_TOPIC", {
@@ -61724,7 +62145,11 @@ function refresh_legend(gobj) {
 				title: (0, i18next.t)("main topic"),
 				"data-i18n-title": "main topic"
 			},
-			"★"
+			[[
+				"span",
+				{ style: LEGEND_GLYPH_STYLE },
+				"★"
+			]]
 		]);
 		else if (!hidden) extras.push([
 			"button",
@@ -61736,7 +62161,11 @@ function refresh_legend(gobj) {
 				"data-i18n-title": "main topic",
 				"aria-label": (0, i18next.t)("main topic")
 			},
-			"☆",
+			[[
+				"span",
+				{ style: LEGEND_GLYPH_STYLE },
+				"☆"
+			]],
 			{ click: (evt) => {
 				evt.stopPropagation();
 				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_LEGEND_TOPIC", {
@@ -61776,7 +62205,10 @@ function refresh_legend(gobj) {
 				"aria-label": (0, i18next.t)("highlight topic"),
 				"aria-pressed": focused ? "true" : "false"
 			},
-			[["i", { class: "yi-location-crosshairs" }]],
+			[["i", {
+				class: "yi-location-crosshairs",
+				style: LEGEND_GLYPH_STYLE
+			}]],
 			{ click: (evt) => {
 				evt.stopPropagation();
 				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_LEGEND_TOPIC", {