@yuneta/gobj-ui 7.23.20 → 7.23.21

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) {
@@ -11084,7 +11111,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 +11135,8 @@ 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)
 			});
 			if (is_pure_collection(value)) {
 				let child_path = add_segment(path, key);
@@ -11124,7 +11152,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 ? "{}" : "[]");
@@ -11155,6 +11183,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 i = 0; i < pending_complex.length; i++) {
+		let pending = pending_complex[i];
+		let child_colors = json_card_style((0, _yuneta_gobj_js.is_object)(pending.value) ? GROUP_COLORS.dict : GROUP_COLORS.list, dark);
+		ports.push({
+			key: pending.port,
+			placement: [getPointPosition(pending_complex.length, i), 1],
+			fill: child_colors.border,
+			stroke: colors.border
+		});
+	}
 	let node = {
 		id: group_id,
 		type: "html",
@@ -11166,20 +11205,28 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
 			innerHTML: node_html,
 			size: [min_width, 24 + lines.length * 22],
 			dx: -(min_width / 2),
-			dy: -((24 + lines.length * 22) / 2)
+			dy: -((24 + lines.length * 22) / 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 +49079,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) {
@@ -11071,7 +11106,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 +11130,8 @@ 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)
 			});
 			if (is_pure_collection(value)) {
 				let child_path = add_segment(path, key);
@@ -11111,7 +11147,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 ? "{}" : "[]");
@@ -11142,6 +11178,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 i = 0; i < pending_complex.length; i++) {
+		let pending = pending_complex[i];
+		let child_colors = json_card_style(is_object(pending.value) ? GROUP_COLORS.dict : GROUP_COLORS.list, dark);
+		ports.push({
+			key: pending.port,
+			placement: [getPointPosition(pending_complex.length, i), 1],
+			fill: child_colors.border,
+			stroke: colors.border
+		});
+	}
 	let node = {
 		id: group_id,
 		type: "html",
@@ -11153,20 +11200,28 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
 			innerHTML: node_html,
 			size: [min_width, 24 + lines.length * 22],
 			dx: -(min_width / 2),
-			dy: -((24 + lines.length * 22) / 2)
+			dy: -((24 + lines.length * 22) / 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 +49074,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.21",
   "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

@@ -72,6 +72,7 @@ import {
 import { ensure_drag_canvas_patch } from "./g6_drag_canvas_touch.js";
 import { ensure_pinch_zoom_patch } from "./g6_touch_gestures.js";
 import { yui_is_dark, yui_theme_now, yui_watch_theme } from "./yui_theme.js";
+import { getPointPosition } from "./lib_graph.js";
 import {
     is_pure_collection,
     has_branch,
@@ -772,6 +773,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)
  ************************************************************/
@@ -981,7 +994,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 +1044,7 @@ 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});
+            pending_complex.push({key: key, value: value, port: port_key(key)});
 
             /*
              *  A child that gets no card of its own is folded from HERE
@@ -1062,13 +1075,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;
@@ -1120,6 +1141,38 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id)
     ${content_html}
 </div>`;
 
+    /*
+     *  ONE PORT PER CONTAINER KEY, and every line leaves from its own.
+     *
+     *  Without them 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 had to make from where it landed. A port makes the row
+     *  the ORIGIN, which is the same thing the treedb graph does with a
+     *  hook column and the reason `getPointPosition` is now shared.
+     *
+     *  On the BOTTOM edge because the layouts put children below, and
+     *  exactly ON it (`y = 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 i = 0; i < pending_complex.length; i++) {
+        let pending = pending_complex[i];
+        let child_colors = json_card_style(
+            is_object(pending.value)? GROUP_COLORS.dict: GROUP_COLORS.list, dark
+        );
+        ports.push({
+            key: pending.port,
+            placement: [getPointPosition(pending_complex.length, i), 1],
+            fill: child_colors.border,
+            stroke: colors.border,
+        });
+    }
+
     let node = {
         id: group_id,
         type: 'html',
@@ -1132,22 +1185,30 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id)
             size: [min_width, 24 + lines.length * 22],
             dx: -(min_width / 2),
             dy: -((24 + lines.length * 22) / 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 +1224,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,
 };