@yuneta/gobj-ui 7.23.148 → 7.23.150

package/src/c_yui_treedb_graph.js

@@ -134,6 +134,7 @@ SDATA(data_type_t.DTP_LIST,     "hidden_topics",    sdata_flag_t.SDF_PERSIST, "[
 SDATA(data_type_t.DTP_STRING,   "main_topic",       sdata_flag_t.SDF_PERSIST, "", "The topic the tree hangs from; empty = deduced by the graph. User preference, per treedb"),
 SDATA(data_type_t.DTP_LIST,     "loose_topics",     sdata_flag_t.SDF_PERSIST, "[]", "Topics whose LOOSE records (no parent) are shown. User preference, per treedb"),
 SDATA(data_type_t.DTP_STRING,   "node_mode",        sdata_flag_t.SDF_PERSIST, "expanded", "How the records are drawn: `expanded` = the cards with their pills and ports, `compact` = one-line pills with the name, `shape` = coloured figures, the topology alone. User preference"),
+SDATA(data_type_t.DTP_STRING,   "edge_shape",       sdata_flag_t.SDF_PERSIST, "curved", "How the edges are drawn: `curved` or `elbow` (the bus of an org chart). User preference"),
 SDATA(data_type_t.DTP_BOOLEAN,  "node_labels",      sdata_flag_t.SDF_PERSIST, true, "A `shape` node says its name under its figure. User preference"),
 SDATA(data_type_t.DTP_DICT,     "camera",           sdata_flag_t.SDF_PERSIST, "{}", "Where the reader left the viewport: {zoom, x, y}. Handed to the engine on creation and written back when a move settles, so the graph opens where it was left. User preference, per treedb"),
 SDATA(data_type_t.DTP_INTEGER,  "fold_level",       sdata_flag_t.SDF_PERSIST, 0, "The level of the MAIN tree the toolbar's stepper stands on: 1 = the main topic's roots, N = N-1 levels under them; 0 = never stepped, `expand_depth`. Handed to the engine on creation, so the graph opens at the level it was left. User preference, per treedb"),
@@ -283,6 +284,7 @@ function mt_create(gobj)
             loose_topics: gobj_read_attr(gobj, "loose_topics") || [],
             node_mode: gobj_read_str_attr(gobj, "node_mode") || "expanded",
             node_labels: gobj_read_bool_attr(gobj, "node_labels"),
+            edge_shape: gobj_read_str_attr(gobj, "edge_shape") || "curved",
             camera: gobj_read_attr(gobj, "camera") || {},
         },
         gobj
@@ -625,6 +627,22 @@ function node_shape_items(gobj, wide)
                 }
             }
         ],
+        /*  How the lines are drawn: curves, or the elbows of an org
+         *  chart. A toggle, so a pressed pill; disabled on a layout
+         *  with no rows, where the edges stay curved anyway.  */
+        ['button', {class: 'GRAPH_EDGE_ELBOW button', type: 'button',
+                    style: {height: wide, width: '2.5em'},
+                    title: t('elbow edges'), 'data-i18n-title': 'elbow edges',
+                    'aria-label': t('elbow edges'), 'data-i18n-aria-label': 'elbow edges',
+                    'aria-pressed': 'false'},
+            yui_toolbar_icon('yi-diagram-project'),
+            {
+                click: (evt) => {
+                    evt.stopPropagation();
+                    gobj_send_event(gobj, "EV_TOGGLE_EDGE_SHAPE", {}, gobj);
+                }
+            }
+        ],
     ];
 }
 
@@ -672,6 +690,17 @@ function refresh_node_shape_buttons(gobj, $root)
         $labels.setAttribute('aria-pressed', labels? 'true' : 'false');
         $labels.disabled = (mode !== 'shape');
     }
+
+    let elbow = (gobj_read_str_attr(gobj, "edge_shape") === "elbow");
+    set_pressed_state($root, '.GRAPH_EDGE_ELBOW', elbow);
+    let $elbow = $root.querySelector('.GRAPH_EDGE_ELBOW');
+    if($elbow) {
+        $elbow.setAttribute('aria-pressed', elbow? 'true' : 'false');
+        let child = gobj.priv.gobj_nodes_tree;
+        let rowless = child? (gobj_read_attr(child, "rowless_layouts") || []) : [];
+        let layout = child? gobj_read_str_attr(child, "layout") : "";
+        $elbow.disabled = rowless.includes(layout);
+    }
 }
 
 /************************************************************
@@ -1319,6 +1348,7 @@ function populate_nodes_tree_options(gobj)
             $layout_select.value = current_layout;
         }
         refresh_layout_stepper(gobj);
+        refresh_node_shape_buttons(gobj, $container);
     }
 
     // Restore persisted operation_mode selection
@@ -2614,6 +2644,7 @@ function ac_set_layout(gobj, event, kw, src)
         gobj
     );
     refresh_layout_stepper(gobj);
+    refresh_node_shape_buttons(gobj, priv.$container);
 
     return 0;
 }
@@ -3116,6 +3147,7 @@ function ac_layout_autoset(gobj, event, kw, src)
     }
     $select.value = layout;
     refresh_layout_stepper(gobj);
+    refresh_node_shape_buttons(gobj, $container);
     return 0;
 }
 
@@ -3213,6 +3245,20 @@ function ac_set_node_mode(gobj, event, kw, src)
     return 0;
 }
 
+function ac_toggle_edge_shape(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+    let shape = (gobj_read_str_attr(gobj, "edge_shape") === "elbow")? "curved" : "elbow";
+
+    gobj_write_str_attr(gobj, "edge_shape", shape);
+    gobj_save_persistent_attrs(gobj, "edge_shape");
+    refresh_node_shape_buttons(gobj, priv.$container);
+    if(priv.gobj_nodes_tree) {
+        gobj_send_event(priv.gobj_nodes_tree, "EV_SET_EDGE_SHAPE", {edge_shape: shape}, gobj);
+    }
+    return 0;
+}
+
 function ac_toggle_node_labels(gobj, event, kw, src)
 {
     let priv = gobj.priv;
@@ -3395,6 +3441,7 @@ function create_gclass(gclass_name)
             ["EV_COLLAPSE_LEVEL",           ac_fold_level_step,         null],
             ["EV_SET_NODE_MODE",            ac_set_node_mode,           null],
             ["EV_TOGGLE_NODE_LABELS",       ac_toggle_node_labels,      null],
+            ["EV_TOGGLE_EDGE_SHAPE",        ac_toggle_edge_shape,       null],
             ["EV_LAYOUT_AUTOSET",           ac_layout_autoset,          null],
             ["EV_CAMERA_CHANGED",           ac_camera_changed,          null],
             ["EV_LEGEND_TOPIC",             ac_legend_topic,            null],
@@ -3441,6 +3488,7 @@ function create_gclass(gclass_name)
         ["EV_COLLAPSE_LEVEL",           0],
         ["EV_SET_NODE_MODE",            0],
         ["EV_TOGGLE_NODE_LABELS",       0],
+        ["EV_TOGGLE_EDGE_SHAPE",        0],
         ["EV_FIND_RESULT",              0],
         ["EV_LAYOUT_AUTOSET",           0],
         ["EV_CAMERA_CHANGED",           0],

package/src/treedb_elbow.js

@@ -0,0 +1,102 @@
+/***********************************************************************
+ *          treedb_elbow.js
+ *
+ *      Where an elbow edge of the treedb graph turns, as plain
+ *      geometry: the two elbow edge types of c_g6_nodes_tree.js ask
+ *      this module for their control points on every draw, and it
+ *      can be tested without G6.
+ *
+ *      An elbow is mxGraph's tree routing: straight out of the
+ *      parent's port to the channel half way to the child, along it,
+ *      and straight into the child's port. Two cases are not that:
+ *
+ *      - An edge that does not run FORWARD: the child above its
+ *        parent, or in the same row. One of the two edges of a
+ *        reciprocal pair (A -> B and B -> A) is always one. A channel
+ *        half way between would cross both cards and lie on top of
+ *        its partner, so it goes ROUND: a short run out of its port,
+ *        along the outside of both cards, and into the other port
+ *        from that port's own side.
+ *
+ *      - Several edges joining the SAME two cards: a reciprocal pair,
+ *        or two hooks of one parent reaching one child. Each gets a
+ *        LANE: the first stays where it is, the next moves one step to
+ *        one side, the next one step to the other. The lane follows
+ *        the order the edges were made, so a new edge never moves the
+ *        ones already drawn.
+ *
+ *      Written for the top-down reading; left to right is the same
+ *      geometry with the axes swapped.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+
+export const ELBOW_STEP = 10;      /*  between two lanes  */
+export const ELBOW_JETTY = 16;     /*  straight run out of a port before a detour turns  */
+export const ELBOW_CLEAR = 24;     /*  how far outside the two cards a detour runs  */
+
+/************************************************************
+ *  The lane of `id` among `ids`, the edges joining the same two
+ *  cards: 0, then +1, -1, +2, -2... in the order they were made.
+ *  Edge ids end in a counter, so a numeric sort is that order.
+ ************************************************************/
+export function elbow_lane(ids, id)
+{
+    let sorted = ids.slice().sort(
+        (a, b) => String(a).localeCompare(String(b), undefined, {numeric: true})
+    );
+    let k = sorted.indexOf(id);
+    if(k <= 0) {
+        return 0;
+    }
+    let side = (k % 2)? 1 : -1;
+    return side * Math.ceil(k / 2);
+}
+
+function swap(p)
+{
+    return [p[1], p[0]];
+}
+
+function swap_box(b)
+{
+    return {x1: b.y1, y1: b.x1, x2: b.y2, y2: b.x2};
+}
+
+/************************************************************
+ *  The control points of an elbow from the port `s` to the port
+ *  `t` ([x, y] each), knowing the boxes of the two cards
+ *  ({x1, y1, x2, y2}) and the edge's lane.
+ *
+ *      vertical    the rows are stacked (top to bottom); false
+ *                  when they are side by side (left to right)
+ ************************************************************/
+export function elbow_points(s, t, box_s, box_t, lane, vertical)
+{
+    if(!vertical) {
+        return elbow_points(swap(s), swap(t), swap_box(box_s), swap_box(box_t), lane, true)
+            .map(swap);
+    }
+
+    let shift = lane * ELBOW_STEP;
+
+    /*  Forward: the channel half way down, moved by the lane and
+     *  kept strictly between the two ports.  */
+    if(t[1] - s[1] > 2 * ELBOW_STEP) {
+        let mid = (s[1] + t[1]) / 2 + shift;
+        mid = Math.min(Math.max(mid, s[1] + ELBOW_STEP), t[1] - ELBOW_STEP);
+        return [[s[0], mid], [t[0], mid]];
+    }
+
+    /*  Backwards, or across one row: round the outside. A negative
+     *  lane goes round the left, any other the right, so the two
+     *  detours of one pair never share a side.  */
+    let out = ELBOW_JETTY + Math.abs(shift);
+    let side = (lane < 0)
+        ? Math.min(box_s.x1, box_t.x1) - ELBOW_CLEAR - Math.abs(shift)
+        : Math.max(box_s.x2, box_t.x2) + ELBOW_CLEAR + Math.abs(shift);
+    let y1 = s[1] + out;        /*  a hook port is on the bottom edge  */
+    let y2 = t[1] - out;        /*  an fkey port is on the top edge  */
+    return [[s[0], y1], [side, y1], [side, y2], [t[0], y2]];
+}

package/src/treedb_elbow.test.js

@@ -0,0 +1,105 @@
+/***********************************************************************
+ *          treedb_elbow.test.js
+ *
+ *      The elbow edges of the treedb graph, pinned: the lane of an
+ *      edge among those joining the same two cards, the channel of a
+ *      forward edge, the detour of one that is not.
+ ***********************************************************************/
+import { describe, test, expect } from "vitest";
+import { elbow_lane, elbow_points, ELBOW_STEP, ELBOW_CLEAR } from "./treedb_elbow.js";
+
+/*  Two cards 100x40: A on top, B one row below it.  */
+const A = {x1: 0, y1: 0, x2: 100, y2: 40};
+const B = {x1: 0, y1: 130, x2: 100, y2: 170};
+const A_HOOK = [50, 40];        /*  A's bottom edge  */
+const A_FKEY = [50, 0];         /*  A's top edge  */
+const B_HOOK = [60, 170];
+const B_FKEY = [50, 130];
+
+describe("the lane", () => {
+    test("one edge alone keeps the middle", () => {
+        expect(elbow_lane(["edge-t-7"], "edge-t-7")).toBe(0);
+    });
+
+    test("lanes follow the order the edges were made, not the string order", () => {
+        let ids = ["edge-t-10", "edge-t-9", "edge-t-11"];
+        expect(elbow_lane(ids, "edge-t-9")).toBe(0);
+        expect(elbow_lane(ids, "edge-t-10")).toBe(1);
+        expect(elbow_lane(ids, "edge-t-11")).toBe(-1);
+    });
+
+    test("a new edge does not move the ones already drawn", () => {
+        let before = ["edge-t-1", "edge-t-2"];
+        let after = before.concat(["edge-t-3"]);
+        for(let id of before) {
+            expect(elbow_lane(after, id)).toBe(elbow_lane(before, id));
+        }
+    });
+});
+
+describe("a forward edge", () => {
+    test("turns in the channel half way between the ports", () => {
+        let pts = elbow_points(A_HOOK, B_FKEY, A, B, 0, true);
+        expect(pts).toEqual([[50, 85], [50, 85]]);
+    });
+
+    test("its lane moves the channel, and keeps it between the ports", () => {
+        let pts = elbow_points(A_HOOK, B_FKEY, A, B, 1, true);
+        expect(pts[0][1]).toBe(85 + ELBOW_STEP);
+        let far = elbow_points(A_HOOK, B_FKEY, A, B, 20, true);
+        expect(far[0][1]).toBeLessThan(B_FKEY[1]);
+        expect(far[0][1]).toBeGreaterThan(A_HOOK[1]);
+    });
+});
+
+describe("an edge that does not run forward", () => {
+    test("goes round the outside of both cards", () => {
+        /*  B -> A: out of B's bottom, back up into A's top.  */
+        let pts = elbow_points(B_HOOK, A_FKEY, B, A, 0, true);
+        expect(pts.length).toBe(4);
+        let side = pts[1][0];
+        expect(side).toBeGreaterThanOrEqual(100 + ELBOW_CLEAR);
+        expect(pts[2][0]).toBe(side);
+        expect(pts[0][1]).toBeGreaterThan(B.y2);     /*  below B  */
+        expect(pts[3][1]).toBeLessThan(A.y1);        /*  above A  */
+    });
+
+    test("a reciprocal pair shares no segment", () => {
+        let forward = elbow_points(A_HOOK, B_FKEY, A, B, 0, true);
+        let back = elbow_points(B_HOOK, A_FKEY, B, A, 1, true);
+        let channel = forward[0][1];
+        expect(back.every((p) => p[1] !== channel)).toBe(true);
+        expect(back[1][0]).toBeGreaterThan(A.x2);
+    });
+
+    test("a negative lane goes round the other side", () => {
+        let right = elbow_points(B_HOOK, A_FKEY, B, A, 1, true);
+        let left = elbow_points(B_HOOK, A_FKEY, B, A, -1, true);
+        expect(right[1][0]).toBeGreaterThan(A.x2);
+        expect(left[1][0]).toBeLessThan(A.x1);
+    });
+
+    test("two cards in one row are not joined through them", () => {
+        /*  C beside A, same row: A's hook (bottom) to C's fkey (top).  */
+        let C = {x1: 200, y1: 0, x2: 300, y2: 40};
+        let pts = elbow_points(A_HOOK, [250, 0], A, C, 0, true);
+        expect(pts.length).toBe(4);
+        expect(pts[1][0]).toBeGreaterThan(C.x2);
+    });
+});
+
+describe("read left to right", () => {
+    test("is the same geometry with the axes swapped", () => {
+        let sw = (p) => [p[1], p[0]];
+        let swb = (b) => ({x1: b.y1, y1: b.x1, x2: b.y2, y2: b.x2});
+        for(let [s, t, bs, bt, lane] of [
+            [A_HOOK, B_FKEY, A, B, 0],
+            [A_HOOK, B_FKEY, A, B, 1],
+            [B_HOOK, A_FKEY, B, A, -1],
+        ]) {
+            let down = elbow_points(s, t, bs, bt, lane, true);
+            let right = elbow_points(sw(s), sw(t), swb(bs), swb(bt), lane, false);
+            expect(right).toEqual(down.map(sw));
+        }
+    });
+});

package/src/yui_icons.css

@@ -444,3 +444,9 @@
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm11.3-387.3l104 104c4.6 4.6 5.9 11.5 3.5 17.4S366.5 256 360 256l-56 0 0 96c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-96-56 0c-6.5 0-12.3-3.9-14.8-9.9s-1.1-12.9 3.5-17.4l104-104c6.2-6.2 16.4-6.2 22.6 0z'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm11.3-387.3l104 104c4.6 4.6 5.9 11.5 3.5 17.4S366.5 256 360 256l-56 0 0 96c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-96-56 0c-6.5 0-12.3-3.9-14.8-9.9s-1.1-12.9 3.5-17.4l104-104c6.2-6.2 16.4-6.2 22.6 0z'/%3E%3C/svg%3E");
 }
+
+/*  Elbow edges: boxes joined by right-angled lines (FontAwesome Free 7.3.1). */
+.yi-diagram-project::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 16 128 0 0-16c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-16-128 0 0 16c0 7.3-1.7 14.3-4.6 20.5l68.6 91.5 80 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-7.3 1.7-14.3 4.6-20.5L128 224 48 224c-26.5 0-48-21.5-48-48L0 80z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 16 128 0 0-16c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-16-128 0 0 16c0 7.3-1.7 14.3-4.6 20.5l68.6 91.5 80 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-7.3 1.7-14.3 4.6-20.5L128 224 48 224c-26.5 0-48-21.5-48-48L0 80z'/%3E%3C/svg%3E");
+}