@yuneta/gobj-ui 7.23.36 → 7.23.37

package/README.md

@@ -1467,7 +1467,10 @@ for the other side:
 
 The last one is not a rename: `states2json()` cannot name an action, so a cell
 from a **backend** gclass says THAT there is one and never which. The viewer
-draws a mark rather than printing a name nobody wrote.
+draws a mark rather than printing a name nobody wrote — and an em dash for the
+third case, an event declared with NO action (`{EV_TX_READY, 0, 0}`, which
+C_WEBSOCKET has in all four states): legal in that state, and deliberately
+doing nothing.
 
 **The machine is a matrix**, rows = events and columns = states — the shape the
 FSM is declared in, and the one that survives 12 events against 3 states as
@@ -1507,7 +1510,11 @@ What it refuses to draw is the interesting half:
 - **One edge per PAIR of states**, not per transition, labelled with the events
   that make the jump (three, then a count). G6 draws overlapping edges on top
   of each other, so a second edge between the same two states is invisible and
-  nothing tells the reader it is there.
+  nothing tells the reader it is there. A RECIPROCAL pair (`A -> B` and
+  `B -> A`) is bowed apart into two arcs — with the SAME `curveOffset` on both,
+  because G6 measures it from each edge's own direction, and with the type
+  varied through a FUNCTION on `edge.type`, because a `type` written on the
+  datum is overridden by the graph-level default.
 - **An event a state handles without leaving is not an edge.** Ten self-loops
   on one card say nothing a number cannot say better, so the card carries
   `n events · m leave` instead.

package/dist/gobj-ui.cjs.js

@@ -14010,7 +14010,7 @@ function build_graph$3(gobj) {
 		zoomRange: [.2, 3],
 		padding: 24,
 		edge: {
-			type: "polyline",
+			type: (d) => d && d.data && d.data.reciprocal ? "quadratic" : "polyline",
 			style: {
 				stroke: edge_color(),
 				lineWidth: 1.2,
@@ -14151,11 +14151,18 @@ function build_data(gobj) {
 		let shown = pair.events.slice(0, MAX_EDGE_LABELS);
 		let label = shown.join("\n");
 		if (pair.events.length > shown.length) label += "\n+" + (pair.events.length - shown.length);
+		let style = { labelText: label };
+		let reciprocal = by_pair.has(pair.target + " " + pair.source);
+		if (reciprocal) {
+			style.curveOffset = 34;
+			style.labelPlacement = .5;
+		}
 		edges.push({
 			id: "e_" + edges.length,
 			source: pair.source,
 			target: pair.target,
-			style: { labelText: label }
+			data: { reciprocal },
+			style
 		});
 	}
 	return {
@@ -15542,7 +15549,7 @@ function build_machine(gobj, fsm) {
 				{ class: "GCLASS_MX_ACTION" },
 				cell.action
 			]);
-			else items.push([
+			else if (cell.has_action) items.push([
 				"span",
 				{
 					class: "GCLASS_MX_ACTION is-unnamed",
@@ -15551,6 +15558,15 @@ function build_machine(gobj, fsm) {
 				},
 				"●"
 			]);
+			else items.push([
+				"span",
+				{
+					class: "GCLASS_MX_ACTION is-none-action",
+					title: (0, i18next.t)("accepted with no action"),
+					"data-i18n-title": "accepted with no action"
+				},
+				"—"
+			]);
 			if (cell.next_state) {
 				items.push([
 					"span",
@@ -15679,6 +15695,19 @@ function build_legend(fsm, current) {
 			(0, i18next.t)("not declared in this state")
 		]]
 	]);
+	if (fsm.rows.some((row) => row.cells.some((cell) => cell && !cell.has_action))) items.push([
+		"span",
+		{ class: "GCLASS_LEGEND_ITEM" },
+		[[
+			"i",
+			{ class: "GCLASS_LEGEND_SWATCH is-none-action" },
+			"—"
+		], [
+			"span",
+			{ i18n: "accepted with no action" },
+			(0, i18next.t)("accepted with no action")
+		]]
+	]);
 	if (current && fsm.states.some((s) => s.name === current)) items.push([
 		"span",
 		{ class: "GCLASS_LEGEND_ITEM" },

package/dist/gobj-ui.es.js

@@ -14005,7 +14005,7 @@ function build_graph$3(gobj) {
 		zoomRange: [.2, 3],
 		padding: 24,
 		edge: {
-			type: "polyline",
+			type: (d) => d && d.data && d.data.reciprocal ? "quadratic" : "polyline",
 			style: {
 				stroke: edge_color(),
 				lineWidth: 1.2,
@@ -14146,11 +14146,18 @@ function build_data(gobj) {
 		let shown = pair.events.slice(0, MAX_EDGE_LABELS);
 		let label = shown.join("\n");
 		if (pair.events.length > shown.length) label += "\n+" + (pair.events.length - shown.length);
+		let style = { labelText: label };
+		let reciprocal = by_pair.has(pair.target + " " + pair.source);
+		if (reciprocal) {
+			style.curveOffset = 34;
+			style.labelPlacement = .5;
+		}
 		edges.push({
 			id: "e_" + edges.length,
 			source: pair.source,
 			target: pair.target,
-			style: { labelText: label }
+			data: { reciprocal },
+			style
 		});
 	}
 	return {
@@ -15537,7 +15544,7 @@ function build_machine(gobj, fsm) {
 				{ class: "GCLASS_MX_ACTION" },
 				cell.action
 			]);
-			else items.push([
+			else if (cell.has_action) items.push([
 				"span",
 				{
 					class: "GCLASS_MX_ACTION is-unnamed",
@@ -15546,6 +15553,15 @@ function build_machine(gobj, fsm) {
 				},
 				"●"
 			]);
+			else items.push([
+				"span",
+				{
+					class: "GCLASS_MX_ACTION is-none-action",
+					title: t("accepted with no action"),
+					"data-i18n-title": "accepted with no action"
+				},
+				"—"
+			]);
 			if (cell.next_state) {
 				items.push([
 					"span",
@@ -15674,6 +15690,19 @@ function build_legend(fsm, current) {
 			t("not declared in this state")
 		]]
 	]);
+	if (fsm.rows.some((row) => row.cells.some((cell) => cell && !cell.has_action))) items.push([
+		"span",
+		{ class: "GCLASS_LEGEND_ITEM" },
+		[[
+			"i",
+			{ class: "GCLASS_LEGEND_SWATCH is-none-action" },
+			"—"
+		], [
+			"span",
+			{ i18n: "accepted with no action" },
+			t("accepted with no action")
+		]]
+	]);
 	if (current && fsm.states.some((s) => s.name === current)) items.push([
 		"span",
 		{ class: "GCLASS_LEGEND_ITEM" },

package/package.json

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

package/src/c_yui_fsm_graph.js

@@ -395,7 +395,15 @@ function build_graph(gobj)
          *  the edge of the box.  */
         padding: 24,
         edge: {
-            type: 'polyline',
+            /*
+             *  A FUNCTION, not a name: a `type` written on the edge
+             *  datum is overridden by the graph-level default, so a
+             *  reciprocal pair went on drawing as two straight
+             *  segments on top of each other. Asking the datum here is
+             *  what G6 documents for varying the type per element.
+             */
+            type: (d) => (d && d.data && d.data.reciprocal)?
+                'quadratic': 'polyline',
             style: {
                 stroke: edge_color(),
                 lineWidth: 1.2,
@@ -609,11 +617,51 @@ function build_data(gobj)
         if(pair.events.length > shown.length) {
             label += "\n+" + (pair.events.length - shown.length);
         }
+
+        let style = {labelText: label};
+
+        /*
+         *  A pair that goes BOTH ways is drawn as two arcs, one bowing
+         *  each way.
+         *
+         *  Grouping by pair fixed the transitions that share an ordered
+         *  pair; a RECIPROCAL pair is a different key and lands on the
+         *  same straight segment -- so the two arrows overlap and the
+         *  second label is painted under the first. Real case:
+         *  C_WEBSOCKET goes to ST_WAIT_HANDSHAKE on EV_CONNECTED and
+         *  comes back on EV_DISCONNECTED, and only the return was
+         *  readable.
+         */
+        let reciprocal = by_pair.has(pair.target + " " + pair.source);
+        if(reciprocal) {
+            /*  Bowed opposite ways so the two arrows separate -- and
+             *  the two LABELS moved off the midpoint as well, one to
+             *  each third of its own curve. Bowing alone was not
+             *  enough: both labels are placed at the middle by default,
+             *  they carry an opaque background, and the one drawn last
+             *  simply covered the other.  */
+            /*  The SAME offset on both, not opposite ones. G6 measures
+             *  `curveOffset` from the edge's OWN direction, and a
+             *  reciprocal pair runs in opposite directions -- so equal
+             *  signs bow them to opposite sides of the screen, and
+             *  opposite signs put them on the same side, one on top of
+             *  the other.
+             *
+             *  The label stays at the MIDDLE of its arc, where the two
+             *  are furthest apart. Moving it along the curve instead
+             *  (0.3 / 0.7) pushed it under a state card: G6's html
+             *  nodes are DOM elements ABOVE the canvas, so whatever the
+             *  curve draws under one is invisible.  */
+            style.curveOffset = 34;
+            style.labelPlacement = 0.5;
+        }
+
         edges.push({
             id: "e_" + edges.length,
             source: pair.source,
             target: pair.target,
-            style: {labelText: label},
+            data: {reciprocal: reciprocal},
+            style: style,
         });
     }
 

package/src/c_yui_gclass.css

@@ -506,3 +506,19 @@
     min-height: 16rem;
     max-height: 70vh;
 }
+
+/*
+ *  An event declared with no action at all: legal here, and it does
+ *  nothing. Quieter than an action and louder than an empty cell,
+ *  because it is neither.
+ */
+.C_YUI_GCLASS .GCLASS_MX_ACTION.is-none-action {
+    color: var(--gclass-muted);
+    cursor: help;
+}
+
+.C_YUI_GCLASS .GCLASS_LEGEND_SWATCH.is-none-action {
+    border-color: transparent;
+    color: var(--gclass-muted);
+    width: auto;
+}

package/src/c_yui_gclass.js

@@ -910,13 +910,24 @@ function build_machine(gobj, fsm)
             let items = [];
             if(cell.action) {
                 items.push(['span', {class: 'GCLASS_MX_ACTION'}, cell.action]);
-            } else {
+            } else if(cell.has_action) {
                 /*  The C side cannot name an action: `states2json()`
                  *  writes the literal "action" for all of them. A mark
                  *  is the honest drawing of "there is one".  */
                 items.push(['span', {class: 'GCLASS_MX_ACTION is-unnamed',
                                      title: t("action"),
                                      'data-i18n-title': 'action'}, "●"]);
+            } else {
+                /*  Declared with NO action and no next state --
+                 *  `{EV_TX_READY, 0, 0}`, four of them in C_WEBSOCKET.
+                 *  It is not the same as an empty cell (which throws)
+                 *  and it is not an action either: the event is legal
+                 *  here and deliberately does nothing. Drawing it as a
+                 *  mark claimed an action the gclass never declared.  */
+                items.push(['span', {class: 'GCLASS_MX_ACTION is-none-action',
+                                     title: t("accepted with no action"),
+                                     'data-i18n-title': 'accepted with no action'},
+                            "—"]);
             }
             if(cell.next_state) {
                 items.push(['span', {class: 'GCLASS_MX_ARROW'}, "▸"]);
@@ -1004,6 +1015,19 @@ function build_legend(fsm, current)
         ['span', {i18n: 'not declared in this state'}, t("not declared in this state")]
     ]]);
 
+    /*  Only if there is one on screen: a legend for a mark nobody drew
+     *  is noise, and most gclasses declare no actionless event.  */
+    let has_actionless = fsm.rows.some(
+        (row) => row.cells.some((cell) => cell && !cell.has_action)
+    );
+    if(has_actionless) {
+        items.push(['span', {class: 'GCLASS_LEGEND_ITEM'}, [
+            ['i', {class: 'GCLASS_LEGEND_SWATCH is-none-action'}, "—"],
+            ['span', {i18n: 'accepted with no action'},
+             t("accepted with no action")]
+        ]]);
+    }
+
     if(current && fsm.states.some((s) => s.name === current)) {
         items.push(['span', {class: 'GCLASS_LEGEND_ITEM'}, [
             ['i', {class: 'GCLASS_LEGEND_SWATCH is-current'}],

package/src/gclass_view_model.test.js

@@ -215,6 +215,20 @@ describe("build_fsm", () => {
         expect(fsm.published[0].flags).toEqual(["EVF_OUTPUT_EVENT"]);
     });
 
+    it("tells a declared-but-actionless cell from an action", () => {
+        /*  `{EV_TX_READY, 0, 0}` -- four of them in C_WEBSOCKET: the
+         *  event is legal in that state and deliberately does nothing.  */
+        const none = build_fsm({
+            events: [{event_name: "EV_TX_READY", event_flag: ""}],
+            states: {"ST_IDLE": [
+                {event_name: "EV_TX_READY", action: "", next_state: ""},
+            ]},
+        });
+        expect(none.rows[0].cells[0]).toEqual({
+            action: "", has_action: false, next_state: "",
+        });
+    });
+
     it("says an action exists without inventing its name", () => {
         expect(fsm.rows[0].cells[1]).toEqual({
             action: "", has_action: true, next_state: "",