@yuneta/gobj-ui 7.23.22 → 7.23.23

package/dist/gobj-ui.cjs.js

@@ -11188,6 +11188,12 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id, parent_port)
     ${content_html}
 </div>`;
 	let ports = [];
+	if (parent_id) ports.push({
+		key: "in",
+		placement: [.5, 0],
+		fill: colors.border,
+		stroke: colors.border
+	});
 	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;
@@ -11223,7 +11229,12 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id, parent_port)
 			target: group_id,
 			style: {
 				stroke: colors.border,
-				lineWidth: 1
+				lineWidth: 1,
+				endArrow: true,
+				endArrowSize: 8,
+				endArrowFill: colors.border,
+				endArrowStroke: colors.border,
+				targetPort: "in"
 			}
 		};
 		if (parent_port) edge.style.sourcePort = parent_port;

package/dist/gobj-ui.es.js

@@ -11183,6 +11183,12 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id, parent_port)
     ${content_html}
 </div>`;
 	let ports = [];
+	if (parent_id) ports.push({
+		key: "in",
+		placement: [.5, 0],
+		fill: colors.border,
+		stroke: colors.border
+	});
 	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;
@@ -11218,7 +11224,12 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id, parent_port)
 			target: group_id,
 			style: {
 				stroke: colors.border,
-				lineWidth: 1
+				lineWidth: 1,
+				endArrow: true,
+				endArrowSize: 8,
+				endArrowFill: colors.border,
+				endArrowStroke: colors.border,
+				targetPort: "in"
 			}
 		};
 		if (parent_port) edge.style.sourcePort = parent_port;

package/package.json

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

package/src/c_yui_json_graph.js

@@ -1181,6 +1181,28 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id, parent_port)
      *  the one thing the port can say that the row does not.
      */
     let ports = [];
+
+    /*
+     *  The port a line ARRIVES at: one per card, above the title and
+     *  centred, and only on a card that has a parent -- the root
+     *  receives nothing, so a dot there would mark a door onto nothing.
+     *
+     *  One and not one-per-parent because a card has exactly ONE parent
+     *  in a JSON document: what varies is which key of that parent it
+     *  hangs from, and that is what the source ports say.
+     *
+     *  Keyed `in` with no prefix, which is why the key ports carry one:
+     *  no `p_<key>` can ever collide with it.
+     */
+    if(parent_id) {
+        ports.push({
+            key: "in",
+            placement: [0.5, 0],
+            fill: colors.border,
+            stroke: colors.border,
+        });
+    }
+
     for(let pending of pending_complex) {
         let child_colors = json_card_style(
             is_object(pending.value)? GROUP_COLORS.dict: GROUP_COLORS.list, dark
@@ -1224,6 +1246,23 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id, parent_port)
             style: {
                 stroke: colors.border,
                 lineWidth: 1,
+                /*
+                 *  Said on the EDGE and not left to the graph's element
+                 *  default: a per-element `style` is what the reader of
+                 *  this code sees, and an arrow that lives somewhere
+                 *  else is an arrow nobody can find when it stops
+                 *  being drawn.
+                 *
+                 *  Filled with the line's own colour, because an
+                 *  arrowhead in the default fill is a black triangle on
+                 *  a teal line in light and an invisible one in dark.
+                 */
+                endArrow: true,
+                endArrowSize: 8,
+                endArrowFill: colors.border,
+                endArrowStroke: colors.border,
+                /*  It lands on the card's `in` port, above the title. */
+                targetPort: "in",
             }
         };
         if(parent_port) {