@yuneta/gobj-ui 7.23.69 → 7.23.70

package/dist/gobj-ui.es.js

@@ -27309,6 +27309,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";
@@ -54129,6 +54452,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",
@@ -54141,6 +54474,11 @@ var _layouts = {
 		nodesep: 30,
 		ranksep: 80
 	},
+	"radial": {
+		type: "treedb-radial",
+		nodesep: 24,
+		ranksep: 180
+	},
 	"d3-force": {
 		type: "d3-force",
 		link: {
@@ -54420,6 +54758,9 @@ function register_layouts(gobj) {
 	if (!_g6_extensions_registered) {
 		_g6_extensions_registered = true;
 		register(ExtensionCategory.LAYOUT, "manual", ManualLayout);
+		register(ExtensionCategory.LAYOUT, "treedb-tree", TreedbTreeLayout);
+		register(ExtensionCategory.LAYOUT, "treedb-outline", TreedbOutlineLayout);
+		register(ExtensionCategory.LAYOUT, "treedb-radial", TreedbRadialLayout);
 		register(ExtensionCategory.NODE, "light", LightNode);
 	}
 }
@@ -55031,8 +55372,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 str_in_list(LR_LAYOUTS, gobj.priv.layout) ? "LR" : "TB";
 }
 function edge_type_for(gobj) {
 	return layout_direction(gobj) === "LR" ? "cubic-horizontal" : "cubic";
@@ -56032,6 +56378,73 @@ var ManualLayout = class extends 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 = is_array(size) ? size[0] : size;
+			let h = is_array(size) ? size.length > 1 ? size[1] : size[0] : size;
+			let ports = node.style && 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 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 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 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;
@@ -57693,7 +58106,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";
 	gobj_write_attr(gobj, "layout", name);
 	try {
 		priv.graph.setLayout(_layouts[name]);
@@ -60530,6 +60943,9 @@ function option_label(name) {
 		case "writing": return t("writing");
 		case "edition": return t("edition");
 		case "manual": return t("manual");
+		case "treedb-tree": return t("treedb-tree");
+		case "treedb-outline": return t("treedb-outline");
+		case "radial": return t("radial");
 		case "dagre": return t("dagre");
 		case "antv-dagre": return t("antv-dagre");
 		case "d3-force": return t("d3-force");

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -124,6 +124,7 @@ import {
     fold_node_key,
     fold_split_group_key,
 } from "./treedb_fold_model.js";
+import {layout_tree, layout_outline, layout_radial} from "./treedb_layout.js";
 
 import {
     BaseLayout,
@@ -260,6 +261,23 @@ const _layouts = {
      *  cards edge to edge. `antv-dagre` below keeps the top-down reading
      *  for whoever wants it -- the two are the same algorithm read two
      *  ways, so the layout picker is also the direction picker.  */
+    /*  OURS, made for a treedb (treedb_layout.js): a tidy tree read
+     *  left to right, and an outline of one row per node. Both take
+     *  the spanning tree of what is on screen -- the roots, the first
+     *  parent that reaches a node, the hooks in schema order, the
+     *  records in their order -- so opening a hook moves nothing that
+     *  is not under or beside it. The default for a treedb nobody has
+     *  arranged (see auto_layout).  */
+    "treedb-tree": {
+        type: 'treedb-tree',
+        nodesep: 18,
+        ranksep: 110,
+    },
+    "treedb-outline": {
+        type: 'treedb-outline',
+        nodesep: 12,
+        indent: 48,
+    },
     "dagre": {
         type: 'dagre',
         rankdir: 'LR',
@@ -272,6 +290,14 @@ const _layouts = {
         nodesep: 30,
         ranksep: 80,
     },
+    /*  Ours too: the root in the middle, a ring per depth, every ring
+     *  as long as its cards need. G6's `radial` was tried first and
+     *  piled twenty cards of 172px on a ring of a fixed radius.  */
+    "radial": {
+        type: 'treedb-radial',
+        nodesep: 24,
+        ranksep: 180,
+    },
     "d3-force": {
         type: 'd3-force',
         link: {
@@ -780,6 +806,9 @@ function register_layouts(gobj)
     if(!_g6_extensions_registered) {
         _g6_extensions_registered = true;
         register(ExtensionCategory.LAYOUT, 'manual', ManualLayout);
+        register(ExtensionCategory.LAYOUT, 'treedb-tree', TreedbTreeLayout);
+        register(ExtensionCategory.LAYOUT, 'treedb-outline', TreedbOutlineLayout);
+        register(ExtensionCategory.LAYOUT, 'treedb-radial', TreedbRadialLayout);
         register(ExtensionCategory.NODE, 'light', LightNode);
     }
 }
@@ -1765,9 +1794,11 @@ function build_ports(gobj, desc)
  *  included, because the saved arrangements were made with the
  *  ports on the top and bottom edges.
  ************************************************************/
+const LR_LAYOUTS = ["dagre", "treedb-tree", "treedb-outline"];
+
 function layout_direction(gobj)
 {
-    return (gobj.priv.layout === "dagre")? "LR" : "TB";
+    return str_in_list(LR_LAYOUTS, gobj.priv.layout)? "LR" : "TB";
 }
 
 function edge_type_for(gobj)
@@ -3304,6 +3335,73 @@ class ManualLayout extends 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 = new Map();
+    let in_nodes = nodes.map((node) => {
+        let size = (node.style && node.style.size) || [172, 96];
+        let w = is_array(size)? size[0] : size;
+        let h = is_array(size)? (size.length > 1? size[1] : size[0]) : size;
+        let ports = (node.style && is_array(node.style.ports))? node.style.ports : [];
+        ports_of.set(node.id, ports.map((p) => p.key));
+        return {id: node.id, w: w, h: h};
+    });
+
+    let in_edges = edges.map((edge) => {
+        let port = edge.style? edge.style.sourcePort : undefined;
+        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};
+    });
+
+    return {nodes: in_nodes, edges: in_edges};
+}
+
+function treedb_layout_output(pos)
+{
+    let out = [];
+    for(let [id, p] of pos) {
+        out.push({id: id, style: {x: p.x, y: p.y}});
+    }
+    return {nodes: out};
+}
+
+class TreedbTreeLayout extends BaseLayout
+{
+    async execute(data, options) {
+        let input = treedb_layout_input(data);
+        return treedb_layout_output(layout_tree(input.nodes, input.edges, options));
+    }
+}
+
+class TreedbOutlineLayout extends BaseLayout
+{
+    async execute(data, options) {
+        let input = treedb_layout_input(data);
+        return treedb_layout_output(layout_outline(input.nodes, input.edges, options));
+    }
+}
+
+class TreedbRadialLayout extends 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
  ************************************************************/
@@ -5860,7 +5958,10 @@ function auto_layout(gobj)
         return false;
     }
 
-    let name = "dagre";
+    /*  Ours, not dagre: the tidy tree keeps the records in their order
+     *  and moves nothing on a fold that is not under it (see
+     *  treedb_layout.js). dagre stays in the picker.  */
+    let name = "treedb-tree";
     gobj_write_attr(gobj, "layout", name);
     try {
         priv.graph.setLayout(_layouts[name]);

package/src/c_yui_treedb_graph.js

@@ -506,6 +506,12 @@ function option_label(name)
         /*  Layouts (`layout_names` of the G6 child).  */
         case "manual":
             return t("manual");
+        case "treedb-tree":
+            return t("treedb-tree");
+        case "treedb-outline":
+            return t("treedb-outline");
+        case "radial":
+            return t("radial");
         case "dagre":
             return t("dagre");
         case "antv-dagre":