@yuneta/gobj-ui 7.23.20 → 7.23.22

package/dist/gobj-ui.cjs.js

@@ -9474,6 +9474,23 @@ function getStrokeColor(fillColor, theme = "light", factor = .2) {
 	const adjust = (v) => lighten ? Math.min(255, Math.floor(v + (255 - v) * factor)) : Math.max(0, Math.floor(v * (1 - factor)));
 	return `rgba(${adjust(r)}, ${adjust(g)}, ${adjust(b)}, ${a.toFixed(3)})`;
 }
+/************************************************************
+* Returns the proportional position (between 0 and 1) of a specific point,
+* centered and spaced with margins.
+*
+* index - Index of the point (0 to count-1)
+* count - Total number of points
+* margin - Total margin space (default 0.2 means 10% on each end)
+************************************************************/
+function getPointPosition(count, index, margin = .2) {
+	if (count <= 0 || index < 0 || index >= count) {
+		(0, _yuneta_gobj_js.log_error)("Invalid count or index");
+		return .5;
+	}
+	const start = margin / 2;
+	const step = (1 - margin / 2 - start) / count;
+	return start + index * step + step / 2;
+}
 //#endregion
 //#region src/yui_graph_camera.js
 /***********************************************************************
@@ -10942,6 +10959,16 @@ function build_graph$3(gobj) {
 	}
 }
 /************************************************************
+*  The port a container key opens on its card.
+*
+*  Prefixed so it can never collide with anything G6 puts in
+*  the same namespace, and stringified because an array index
+*  is a number and a port key is a string.
+************************************************************/
+function port_key(key) {
+	return "p_" + String(key);
+}
+/************************************************************
 *  Build cell value HTML (matching old mx_json_viewer colors)
 ************************************************************/
 function build_cell_html(key, value, type, dark, matched, fold) {
@@ -11004,6 +11031,8 @@ function build_cell_html(key, value, type, dark, matched, fold) {
 *  forever.  `+3` and `−` need no language.
 ************************************************************/
 var FOLD_SPACER = `<span style="width:24px; flex:0 0 auto;"></span>`;
+var CARD_HEADER_H$1 = 24;
+var CARD_ROW_H$1 = 22;
 function fold_toggle_html(path, foldable, folded, branches, colors) {
 	if (!foldable) return FOLD_SPACER;
 	let label = folded ? "+" + branches : "&#8722;";
@@ -11084,7 +11113,7 @@ function get_group_label(path) {
 /************************************************************
 *  Recursively build nodes and edges from JSON
 ************************************************************/
-function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
+function build_json_nodes(gobj, path, kw, nodes, edges, parent_id, parent_port) {
 	let group_id = gen_node_id$1(gobj);
 	let is_dict = (0, _yuneta_gobj_js.is_object)(kw);
 	let is_list = (0, _yuneta_gobj_js.is_array)(kw);
@@ -11108,7 +11137,9 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
 		if (has_branch(value)) {
 			pending_complex.push({
 				key,
-				value
+				value,
+				port: port_key(key),
+				row: lines.length
 			});
 			if (is_pure_collection(value)) {
 				let child_path = add_segment(path, key);
@@ -11124,7 +11155,7 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
 	}
 	if (parent_id && is_pure_collection(kw)) {
 		if (priv.collapsed.has(path)) return parent_id;
-		for (let pending of pending_complex) build_json_nodes(gobj, add_segment(path, pending.key), pending.value, nodes, edges, parent_id);
+		for (let pending of pending_complex) build_json_nodes(gobj, add_segment(path, pending.key), pending.value, nodes, edges, parent_id, parent_port);
 		return parent_id;
 	}
 	let label = get_group_label(path) || (is_dict ? "{}" : "[]");
@@ -11134,6 +11165,7 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
 	let border_width = card_matched ? 2 : 1;
 	let content_html = lines.map((line) => `<div style="font-family:monospace; font-size:13px; padding:1px 6px; white-space:nowrap;">${line}</div>`).join("");
 	let min_width = Math.max(180, label.length * 9);
+	let card_height = CARD_HEADER_H$1 + lines.length * CARD_ROW_H$1;
 	let node_html = `
 <div style="
     min-width: ${min_width}px;
@@ -11155,6 +11187,17 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
     ">${FOLD_SPACER}<span style="flex:1 1 auto; text-align:center;">${(0, _yuneta_gobj_js.escapeHtml)(label)}</span>${fold_toggle_html(path, foldable, folded, pending_complex.length, colors)}</div>
     ${content_html}
 </div>`;
+	let ports = [];
+	for (let pending of pending_complex) {
+		let child_colors = json_card_style((0, _yuneta_gobj_js.is_object)(pending.value) ? GROUP_COLORS.dict : GROUP_COLORS.list, dark);
+		let row_mid = CARD_HEADER_H$1 + pending.row * CARD_ROW_H$1 + CARD_ROW_H$1 / 2;
+		ports.push({
+			key: pending.port,
+			placement: [1, row_mid / card_height],
+			fill: child_colors.border,
+			stroke: colors.border
+		});
+	}
 	let node = {
 		id: group_id,
 		type: "html",
@@ -11164,22 +11207,30 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
 		},
 		style: {
 			innerHTML: node_html,
-			size: [min_width, 24 + lines.length * 22],
+			size: [min_width, card_height],
 			dx: -(min_width / 2),
-			dy: -((24 + lines.length * 22) / 2)
+			dy: -(card_height / 2),
+			port: ports.length > 0,
+			ports,
+			portR: 4,
+			portLineWidth: 1
 		}
 	};
 	nodes.push(node);
-	if (parent_id) edges.push({
-		source: parent_id,
-		target: group_id,
-		style: {
-			stroke: colors.border,
-			lineWidth: 1
-		}
-	});
+	if (parent_id) {
+		let edge = {
+			source: parent_id,
+			target: group_id,
+			style: {
+				stroke: colors.border,
+				lineWidth: 1
+			}
+		};
+		if (parent_port) edge.style.sourcePort = parent_port;
+		edges.push(edge);
+	}
 	if (folded) return group_id;
-	for (let pending of pending_complex) build_json_nodes(gobj, add_segment(path, pending.key), pending.value, nodes, edges, group_id);
+	for (let pending of pending_complex) build_json_nodes(gobj, add_segment(path, pending.key), pending.value, nodes, edges, group_id, pending.port);
 	return group_id;
 }
 /************************************************************
@@ -49032,43 +49083,6 @@ function configure_behaviour(gobj) {
 	graph_write_behaviors(gobj, behaviors);
 }
 /************************************************************
-* Returns the proportional position (between 0 and 1) of a specific point,
-* centered and spaced with margins.
-*
-* index - Index of the point (0 to count-1)
-* count - Total number of points
-* margin - Total margin space (default 0.2 means 10% on each end)
-************************************************************/
-function getPointPosition(count, index, margin = .2) {
-	if (count <= 0 || index < 0 || index >= count) {
-		(0, _yuneta_gobj_js.log_error)("Invalid count or index");
-		return .5;
-	}
-	const start = margin / 2;
-	const step = (1 - margin / 2 - start) / count;
-	return start + index * step + step / 2;
-}
-/************************************************************
-*  Count hooks and fkeys in topic desc, classify node type
-************************************************************/
-function calculate_hooks_fkeys_counter(desc) {
-	let cols = desc.cols;
-	desc.hooks_counter = 0;
-	desc.fkeys_counter = 0;
-	for (let i = 0; i < cols.length; i++) {
-		let col = cols[i];
-		switch ((0, _yuneta_gobj_js.treedb_get_field_desc)(col).type) {
-			case "hook":
-				desc.hooks_counter++;
-				break;
-			case "fkey": desc.fkeys_counter++;
-		}
-	}
-	if (desc.hooks_counter === 0) desc.node_treedb_type = "child";
-	else if (desc.fkeys_counter === 0) desc.node_treedb_type = "extended";
-	else desc.node_treedb_type = "hierarchical";
-}
-/************************************************************
 *  Build ports for a topic desc
 ************************************************************/
 function build_ports(gobj, desc) {

package/dist/gobj-ui.es.js

@@ -9346,6 +9346,14 @@ function yui_toolbar(attrs = {}, items = []) {
 }
 //#endregion
 //#region src/lib_graph.js
+/***********************************************************************
+*          lib_graph.js
+*
+*          Utilities for graph, using Bulma
+*
+*          Copyright (c) 2025, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
 /************************************************************
 *  Add class to elements selected
 ************************************************************/
@@ -9461,6 +9469,23 @@ function getStrokeColor(fillColor, theme = "light", factor = .2) {
 	const adjust = (v) => lighten ? Math.min(255, Math.floor(v + (255 - v) * factor)) : Math.max(0, Math.floor(v * (1 - factor)));
 	return `rgba(${adjust(r)}, ${adjust(g)}, ${adjust(b)}, ${a.toFixed(3)})`;
 }
+/************************************************************
+* Returns the proportional position (between 0 and 1) of a specific point,
+* centered and spaced with margins.
+*
+* index - Index of the point (0 to count-1)
+* count - Total number of points
+* margin - Total margin space (default 0.2 means 10% on each end)
+************************************************************/
+function getPointPosition(count, index, margin = .2) {
+	if (count <= 0 || index < 0 || index >= count) {
+		log_error("Invalid count or index");
+		return .5;
+	}
+	const start = margin / 2;
+	const step = (1 - margin / 2 - start) / count;
+	return start + index * step + step / 2;
+}
 //#endregion
 //#region src/yui_graph_camera.js
 /***********************************************************************
@@ -10929,6 +10954,16 @@ function build_graph$3(gobj) {
 	}
 }
 /************************************************************
+*  The port a container key opens on its card.
+*
+*  Prefixed so it can never collide with anything G6 puts in
+*  the same namespace, and stringified because an array index
+*  is a number and a port key is a string.
+************************************************************/
+function port_key(key) {
+	return "p_" + String(key);
+}
+/************************************************************
 *  Build cell value HTML (matching old mx_json_viewer colors)
 ************************************************************/
 function build_cell_html(key, value, type, dark, matched, fold) {
@@ -10991,6 +11026,8 @@ function build_cell_html(key, value, type, dark, matched, fold) {
 *  forever.  `+3` and `−` need no language.
 ************************************************************/
 var FOLD_SPACER = `<span style="width:24px; flex:0 0 auto;"></span>`;
+var CARD_HEADER_H$1 = 24;
+var CARD_ROW_H$1 = 22;
 function fold_toggle_html(path, foldable, folded, branches, colors) {
 	if (!foldable) return FOLD_SPACER;
 	let label = folded ? "+" + branches : "&#8722;";
@@ -11071,7 +11108,7 @@ function get_group_label(path) {
 /************************************************************
 *  Recursively build nodes and edges from JSON
 ************************************************************/
-function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
+function build_json_nodes(gobj, path, kw, nodes, edges, parent_id, parent_port) {
 	let group_id = gen_node_id$1(gobj);
 	let is_dict = is_object(kw);
 	let is_list = is_array(kw);
@@ -11095,7 +11132,9 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
 		if (has_branch(value)) {
 			pending_complex.push({
 				key,
-				value
+				value,
+				port: port_key(key),
+				row: lines.length
 			});
 			if (is_pure_collection(value)) {
 				let child_path = add_segment(path, key);
@@ -11111,7 +11150,7 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
 	}
 	if (parent_id && is_pure_collection(kw)) {
 		if (priv.collapsed.has(path)) return parent_id;
-		for (let pending of pending_complex) build_json_nodes(gobj, add_segment(path, pending.key), pending.value, nodes, edges, parent_id);
+		for (let pending of pending_complex) build_json_nodes(gobj, add_segment(path, pending.key), pending.value, nodes, edges, parent_id, parent_port);
 		return parent_id;
 	}
 	let label = get_group_label(path) || (is_dict ? "{}" : "[]");
@@ -11121,6 +11160,7 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
 	let border_width = card_matched ? 2 : 1;
 	let content_html = lines.map((line) => `<div style="font-family:monospace; font-size:13px; padding:1px 6px; white-space:nowrap;">${line}</div>`).join("");
 	let min_width = Math.max(180, label.length * 9);
+	let card_height = CARD_HEADER_H$1 + lines.length * CARD_ROW_H$1;
 	let node_html = `
 <div style="
     min-width: ${min_width}px;
@@ -11142,6 +11182,17 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
     ">${FOLD_SPACER}<span style="flex:1 1 auto; text-align:center;">${escapeHtml(label)}</span>${fold_toggle_html(path, foldable, folded, pending_complex.length, colors)}</div>
     ${content_html}
 </div>`;
+	let ports = [];
+	for (let pending of pending_complex) {
+		let child_colors = json_card_style(is_object(pending.value) ? GROUP_COLORS.dict : GROUP_COLORS.list, dark);
+		let row_mid = CARD_HEADER_H$1 + pending.row * CARD_ROW_H$1 + CARD_ROW_H$1 / 2;
+		ports.push({
+			key: pending.port,
+			placement: [1, row_mid / card_height],
+			fill: child_colors.border,
+			stroke: colors.border
+		});
+	}
 	let node = {
 		id: group_id,
 		type: "html",
@@ -11151,22 +11202,30 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
 		},
 		style: {
 			innerHTML: node_html,
-			size: [min_width, 24 + lines.length * 22],
+			size: [min_width, card_height],
 			dx: -(min_width / 2),
-			dy: -((24 + lines.length * 22) / 2)
+			dy: -(card_height / 2),
+			port: ports.length > 0,
+			ports,
+			portR: 4,
+			portLineWidth: 1
 		}
 	};
 	nodes.push(node);
-	if (parent_id) edges.push({
-		source: parent_id,
-		target: group_id,
-		style: {
-			stroke: colors.border,
-			lineWidth: 1
-		}
-	});
+	if (parent_id) {
+		let edge = {
+			source: parent_id,
+			target: group_id,
+			style: {
+				stroke: colors.border,
+				lineWidth: 1
+			}
+		};
+		if (parent_port) edge.style.sourcePort = parent_port;
+		edges.push(edge);
+	}
 	if (folded) return group_id;
-	for (let pending of pending_complex) build_json_nodes(gobj, add_segment(path, pending.key), pending.value, nodes, edges, group_id);
+	for (let pending of pending_complex) build_json_nodes(gobj, add_segment(path, pending.key), pending.value, nodes, edges, group_id, pending.port);
 	return group_id;
 }
 /************************************************************
@@ -49019,43 +49078,6 @@ function configure_behaviour(gobj) {
 	graph_write_behaviors(gobj, behaviors);
 }
 /************************************************************
-* Returns the proportional position (between 0 and 1) of a specific point,
-* centered and spaced with margins.
-*
-* index - Index of the point (0 to count-1)
-* count - Total number of points
-* margin - Total margin space (default 0.2 means 10% on each end)
-************************************************************/
-function getPointPosition(count, index, margin = .2) {
-	if (count <= 0 || index < 0 || index >= count) {
-		log_error("Invalid count or index");
-		return .5;
-	}
-	const start = margin / 2;
-	const step = (1 - margin / 2 - start) / count;
-	return start + index * step + step / 2;
-}
-/************************************************************
-*  Count hooks and fkeys in topic desc, classify node type
-************************************************************/
-function calculate_hooks_fkeys_counter(desc) {
-	let cols = desc.cols;
-	desc.hooks_counter = 0;
-	desc.fkeys_counter = 0;
-	for (let i = 0; i < cols.length; i++) {
-		let col = cols[i];
-		switch (treedb_get_field_desc(col).type) {
-			case "hook":
-				desc.hooks_counter++;
-				break;
-			case "fkey": desc.fkeys_counter++;
-		}
-	}
-	if (desc.hooks_counter === 0) desc.node_treedb_type = "child";
-	else if (desc.fkeys_counter === 0) desc.node_treedb_type = "extended";
-	else desc.node_treedb_type = "hierarchical";
-}
-/************************************************************
 *  Build ports for a topic desc
 ************************************************************/
 function build_ports(gobj, desc) {

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -80,6 +80,7 @@ import {
     set_cancel_state,
     set_active_state,
     set_pressed_state,
+    getPointPosition,
     getStrokeColor,
 } from "./lib_graph.js";
 
@@ -1598,59 +1599,6 @@ function configure_behaviour(gobj)
     graph_write_behaviors(gobj, behaviors);
 }
 
-/************************************************************
- * Returns the proportional position (between 0 and 1) of a specific point,
- * centered and spaced with margins.
- *
- * index - Index of the point (0 to count-1)
- * count - Total number of points
- * margin - Total margin space (default 0.2 means 10% on each end)
- ************************************************************/
-function getPointPosition(count, index, margin = 0.2)
-{
-    if(count <= 0 || index < 0 || index >= count) {
-        log_error("Invalid count or index");
-        return 0.5;
-    }
-
-    const start = margin / 2;
-    const end = 1 - margin / 2;
-    const step = (end - start) / count;
-
-    return start + index * step + step / 2;
-}
-
-/************************************************************
- *  Count hooks and fkeys in topic desc, classify node type
- ************************************************************/
-function calculate_hooks_fkeys_counter(desc)
-{
-    let cols = desc.cols;
-    desc.hooks_counter = 0;
-    desc.fkeys_counter = 0;
-
-    for(let i=0; i<cols.length; i++) {
-        let col = cols[i];
-        const field_desc = treedb_get_field_desc(col);
-        switch(field_desc.type) {
-            case "hook":
-                desc.hooks_counter++;
-                break;
-            case "fkey":
-                desc.fkeys_counter++;
-                break;
-        }
-    }
-
-    if(desc.hooks_counter === 0) {
-        desc.node_treedb_type = 'child';
-    } else if(desc.fkeys_counter === 0) {
-        desc.node_treedb_type = 'extended';
-    } else {
-        desc.node_treedb_type = 'hierarchical';
-    }
-}
-
 /************************************************************
  *  Build ports for a topic desc
  ************************************************************/

package/src/c_yui_json_graph.js

@@ -772,6 +772,18 @@ function build_graph(gobj)
     }
 }
 
+/************************************************************
+ *  The port a container key opens on its card.
+ *
+ *  Prefixed so it can never collide with anything G6 puts in
+ *  the same namespace, and stringified because an array index
+ *  is a number and a port key is a string.
+ ************************************************************/
+function port_key(key)
+{
+    return "p_" + String(key);
+}
+
 /************************************************************
  *  Build cell value HTML (matching old mx_json_viewer colors)
  ************************************************************/
@@ -872,6 +884,20 @@ function build_cell_html(key, value, type, dark, matched, fold)
  ************************************************************/
 const FOLD_SPACER = `<span style="width:24px; flex:0 0 auto;"></span>`;
 
+/*
+ *  The card's geometry, in ONE place.
+ *
+ *  A container key's port is placed by computing WHICH ROW it is, so a
+ *  row height changed in the markup and not here would slide every port
+ *  off the line it belongs to -- silently, because nothing would fail:
+ *  the dots would just stop pointing at anything.
+ *
+ *  These are the rendered heights of the header (`padding: 3px 8px` on
+ *  12px bold) and of one body row (`padding: 1px 6px` on 13px monospace).
+ */
+const CARD_HEADER_H = 24;
+const CARD_ROW_H = 22;
+
 function fold_toggle_html(path, foldable, folded, branches, colors)
 {
     if(!foldable) {
@@ -981,7 +1007,7 @@ function get_group_label(path)
 /************************************************************
  *  Recursively build nodes and edges from JSON
  ************************************************************/
-function build_json_nodes(gobj, path, kw, nodes, edges, parent_id)
+function build_json_nodes(gobj, path, kw, nodes, edges, parent_id, parent_port)
 {
     let group_id = gen_node_id(gobj);
     let is_dict = is_object(kw);
@@ -1031,7 +1057,11 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id)
          */
         let fold = null;
         if(has_branch(value)) {
-            pending_complex.push({key: key, value: value});
+            /*  `lines.length` is the index the row of this entry is about
+             *  to take, and it is what puts the port on that line.  */
+            pending_complex.push({
+                key: key, value: value, port: port_key(key), row: lines.length
+            });
 
             /*
              *  A child that gets no card of its own is folded from HERE
@@ -1062,13 +1092,21 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id)
             return parent_id;
         }
         for(let pending of pending_complex) {
+            /*
+             *  `parent_port` and not one of ours: this collection has no
+             *  card, so the port its row opened in the PARENT is the one
+             *  every one of these lines leaves from -- fourteen columns
+             *  out of the single `cols` port, which is what the document
+             *  says and what the reader traces back.
+             */
             build_json_nodes(
                 gobj,
                 add_segment(path, pending.key),
                 pending.value,
                 nodes,
                 edges,
-                parent_id
+                parent_id,
+                parent_port
             );
         }
         return parent_id;
@@ -1097,6 +1135,7 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id)
     ).join("");
 
     let min_width = Math.max(180, label.length * 9);
+    let card_height = CARD_HEADER_H + lines.length * CARD_ROW_H;
 
     let node_html = `
 <div style="
@@ -1120,6 +1159,41 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id)
     ${content_html}
 </div>`;
 
+    /*
+     *  ONE PORT PER CONTAINER KEY, ON THE LINE OF ITS OWN ROW.
+     *
+     *  Without ports each card was a single anchor: fourteen lines came
+     *  out of one point, and which row a line belonged to was a guess
+     *  the reader made from where it landed.
+     *
+     *  Spread along the bottom edge they were distinguishable but still
+     *  not ATTACHED to anything -- the reader had to count dots, count
+     *  rows, and trust that the two orders matched. Placed at the row's
+     *  own height there is nothing to match: the line leaves from beside
+     *  the key it belongs to, which is the whole point of a port.
+     *
+     *  On the RIGHT edge, and exactly ON it (`x = 1`) rather than inside:
+     *  an html node draws its HTML in a DOM layer above the canvas, so a
+     *  port fully inside the box would be painted under the card and
+     *  never seen. Half of it sticks out.
+     *
+     *  Coloured by what the row LEADS TO -- a dict or a list -- which is
+     *  the one thing the port can say that the row does not.
+     */
+    let ports = [];
+    for(let pending of pending_complex) {
+        let child_colors = json_card_style(
+            is_object(pending.value)? GROUP_COLORS.dict: GROUP_COLORS.list, dark
+        );
+        let row_mid = CARD_HEADER_H + pending.row * CARD_ROW_H + CARD_ROW_H / 2;
+        ports.push({
+            key: pending.port,
+            placement: [1, row_mid / card_height],
+            fill: child_colors.border,
+            stroke: colors.border,
+        });
+    }
+
     let node = {
         id: group_id,
         type: 'html',
@@ -1129,25 +1203,33 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id)
         },
         style: {
             innerHTML: node_html,
-            size: [min_width, 24 + lines.length * 22],
+            size: [min_width, card_height],
             dx: -(min_width / 2),
-            dy: -((24 + lines.length * 22) / 2),
+            dy: -(card_height / 2),
+            port: ports.length > 0,
+            ports: ports,
+            portR: 4,
+            portLineWidth: 1,
         },
     };
     nodes.push(node);
 
     /*
-     *  Edge from parent to this group
+     *  Edge from parent to this group, out of the port its key opened.
      */
     if(parent_id) {
-        edges.push({
+        let edge = {
             source: parent_id,
             target: group_id,
             style: {
                 stroke: colors.border,
                 lineWidth: 1,
             }
-        });
+        };
+        if(parent_port) {
+            edge.style.sourcePort = parent_port;
+        }
+        edges.push(edge);
     }
 
     /*
@@ -1163,7 +1245,8 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id)
             pending.value,
             nodes,
             edges,
-            group_id
+            group_id,
+            pending.port
         );
     }
 

package/src/lib_graph.js

@@ -8,6 +8,7 @@
  ***********************************************************************/
 import {
     gobj_read_attr,
+    log_error,
 } from "@yuneta/gobj-js";
 
 // import {t} from "i18next";
@@ -195,6 +196,59 @@ function getStrokeColor(fillColor, theme = 'light', factor = 0.2) {
 //=======================================================================
 //      Expose the class via the global object
 //=======================================================================
+/************************************************************
+ * Returns the proportional position (between 0 and 1) of a specific point,
+ * centered and spaced with margins.
+ *
+ * index - Index of the point (0 to count-1)
+ * count - Total number of points
+ * margin - Total margin space (default 0.2 means 10% on each end)
+ ************************************************************/
+function getPointPosition(count, index, margin = 0.2)
+{
+    if(count <= 0 || index < 0 || index >= count) {
+        log_error("Invalid count or index");
+        return 0.5;
+    }
+
+    const start = margin / 2;
+    const end = 1 - margin / 2;
+    const step = (end - start) / count;
+
+    return start + index * step + step / 2;
+}
+
+/************************************************************
+ *  Count hooks and fkeys in topic desc, classify node type
+ ************************************************************/
+function calculate_hooks_fkeys_counter(desc)
+{
+    let cols = desc.cols;
+    desc.hooks_counter = 0;
+    desc.fkeys_counter = 0;
+
+    for(let i=0; i<cols.length; i++) {
+        let col = cols[i];
+        const field_desc = treedb_get_field_desc(col);
+        switch(field_desc.type) {
+            case "hook":
+                desc.hooks_counter++;
+                break;
+            case "fkey":
+                desc.fkeys_counter++;
+                break;
+        }
+    }
+
+    if(desc.hooks_counter === 0) {
+        desc.node_treedb_type = 'child';
+    } else if(desc.fkeys_counter === 0) {
+        desc.node_treedb_type = 'extended';
+    } else {
+        desc.node_treedb_type = 'hierarchical';
+    }
+}
+
 export {
     addClasses,
     removeClasses,
@@ -207,4 +261,5 @@ export {
     set_active_state,
     set_pressed_state,
     getStrokeColor,
+    getPointPosition,
 };