@yuneta/gobj-ui 7.23.83 → 7.23.85

package/src/c_yui_treedb_graph.js

@@ -173,6 +173,7 @@ let PRIVATE_DATA = {
     layout:             null,
     _topics_subscribed: {},
     _legend_state:      null,   /*  the engine's last EV_LEGEND_STATE  */
+    _find_result:       null,   /*  ...and its last EV_FIND_RESULT  */
     _links_subscribed:  false,  /*  EV_TREEDB_NODE_LINKED/UNLINKED (treedb-wide)  */
 
     is_pinhold_window:  false, // inherited of v6, todo review
@@ -303,6 +304,18 @@ function mt_start(gobj)
 {
     let priv = gobj.priv;
 
+    /*  The legend is built from the engine's EV_LEGEND_STATE, which
+     *  arrives after a reconcile and not when the language changes:
+     *  a chip's title says an ACTION (show / hide this topic), and
+     *  the strip would keep the old language until somebody folded
+     *  something. The keys travel in `data-i18n-title` too, so this
+     *  is the belt to that pair of braces -- and it is what repaints
+     *  the counted line of the find box, which has no key at all.  */
+    let shell = yui_shell_of(gobj);
+    if(shell) {
+        gobj_subscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
+    }
+
     if(priv.gobj_nodes_tree) {
         gobj_start(priv.gobj_nodes_tree);
     }
@@ -323,6 +336,7 @@ function mt_stop(gobj)
     let shell = yui_shell_of(gobj);
     if(shell) {
         yui_shell_set_sub_routes(shell, gobj_read_str_attr(gobj, "base_route"), null);
+        gobj_unsubscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
     }
     close_json_viewer(gobj);
     gobj_stop_children(gobj);
@@ -2523,6 +2537,8 @@ function refresh_legend(gobj)
              hidden? `${entry.total}` : `${entry.visible}/${entry.total}`]
         );
 
+        let body_key = is_main? 'main topic' : (hidden? 'show topic' : 'hide topic');
+
         /*  Built as an object first: an attribute that is `undefined`
          *  is still SET by createElement2 (to the string "undefined"),
          *  and a `disabled="undefined"` button is a disabled button --
@@ -2533,7 +2549,14 @@ function refresh_legend(gobj)
                    (is_main? ' GRAPH_LEGEND_MAIN' : ''),
             type: 'button',
             style: 'gap:0; flex:0 0 auto;' + (focused? ' ' + LEGEND_FOCUSED_STYLE : ''),
-            title: is_main? t('main topic') : (hidden? t('show topic') : t('hide topic')),
+            /*  The KEY as well as the text: the strip is redrawn only
+             *  when the engine speaks again (EV_LEGEND_STATE), and a
+             *  language change is not that -- refresh_language() reaches
+             *  what carries `data-i18n-title` and nothing else. The key
+             *  is picked here because the chip is rebuilt whenever the
+             *  state behind it changes.  */
+            title: t(body_key),
+            'data-i18n-title': body_key,
             'aria-label': topic_name,
             'aria-pressed': hidden? 'false' : 'true',
         };
@@ -2560,7 +2583,9 @@ function refresh_legend(gobj)
             extras.push(['button', {class: 'GRAPH_LEGEND_STAR button is-small pressed_state',
                                     type: 'button', style: 'padding:0 .4rem;',
                                     title: t('main topic'), 'data-i18n-title': 'main topic',
-                                    'aria-label': t('main topic'), 'aria-pressed': 'true'},
+                                    'aria-label': t('main topic'),
+                                    'data-i18n-aria-label': 'main topic',
+                                    'aria-pressed': 'true'},
                          [['span', {style: LEGEND_GLYPH_STYLE}, '★']], {
                 click: (evt) => {
                     evt.stopPropagation();
@@ -2577,7 +2602,8 @@ function refresh_legend(gobj)
             extras.push(['button', {class: 'GRAPH_LEGEND_STAR button is-small',
                                     type: 'button', style: 'padding:0 .4rem;',
                                     title: t('main topic'), 'data-i18n-title': 'main topic',
-                                    'aria-label': t('main topic')},
+                                    'aria-label': t('main topic'),
+                                    'data-i18n-aria-label': 'main topic'},
                          [['span', {style: LEGEND_GLYPH_STYLE}, '☆']], {
                 click: (evt) => {
                     evt.stopPropagation();
@@ -2597,6 +2623,7 @@ function refresh_legend(gobj)
                 type: 'button', style: 'padding:0 .45rem;',
                 title: t('loose records'), 'data-i18n-title': 'loose records',
                 'aria-label': t('loose records'),
+                'data-i18n-aria-label': 'loose records',
                 'aria-pressed': entry.loose_shown? 'true' : 'false'
             }, `+${entry.loose}`, {
                 click: (evt) => {
@@ -2614,6 +2641,7 @@ function refresh_legend(gobj)
                 type: 'button', style: 'padding:0 .4rem;',
                 title: t('highlight topic'), 'data-i18n-title': 'highlight topic',
                 'aria-label': t('highlight topic'),
+                'data-i18n-aria-label': 'highlight topic',
                 'aria-pressed': focused? 'true' : 'false'
             }, [['i', {class: 'yi-location-crosshairs', style: LEGEND_GLYPH_STYLE}]], {
                 click: (evt) => {
@@ -2633,6 +2661,20 @@ function refresh_legend(gobj)
     }
 }
 
+/************************************************************
+ *  The application changed language. `refresh_language()` has
+ *  already been over the document by now (the shell runs it
+ *  before publishing), so what is left is what carries no key:
+ *  the legend, whose chips say an ACTION that depends on the
+ *  state, and the find box's counted line.
+ ************************************************************/
+function ac_language_changed(gobj, event, kw, src)
+{
+    refresh_legend(gobj);
+    refresh_find_result(gobj);
+    return 0;
+}
+
 /************************************************************
  *  The engine said what is drawn: repaint the strip.
  ************************************************************/
@@ -2848,6 +2890,18 @@ function ac_toggle_node_labels(gobj, event, kw, src)
  ************************************************************/
 function ac_find_result(gobj, event, kw, src)
 {
+    /*  Kept, because the line is COMPOSED -- a counted word and a
+     *  count of hidden topics -- so no i18n key in the DOM can
+     *  re-translate it: its owner repaints it from the last answer
+     *  when the language changes.  */
+    gobj.priv._find_result = kw || null;
+    refresh_find_result(gobj);
+    return 0;
+}
+
+function refresh_find_result(gobj)
+{
+    let kw = gobj.priv._find_result;
     let $container = gobj_read_attr(gobj, "$container");
     if(!$container) {
         return 0;
@@ -3004,6 +3058,7 @@ function create_gclass(gclass_name)
             ["EV_SHOW",                     ac_show,                    null],
             ["EV_HIDE",                     ac_hide,                    null],
             ["EV_TRANSPORT_STATE",          ac_transport_state,         null],
+            ["EV_LANGUAGE_CHANGED",         ac_language_changed,        null],
         ]]
     ];
 
@@ -3052,6 +3107,7 @@ function create_gclass(gclass_name)
             event_flag_t.EVF_OUTPUT_EVENT | event_flag_t.EVF_NO_WARN_SUBS],
         ["EV_SHOW",                     0],
         ["EV_HIDE",                     0],
+        ["EV_LANGUAGE_CHANGED",         0],
         ["EV_TRANSPORT_STATE",          0],
     ];
 

package/src/treedb_layout.js

@@ -51,8 +51,10 @@
  *
  *      `radial`: the root in the middle and a ring per depth, each
  *      subtree owning a sector proportional to its leaves; the radius
- *      of a ring grows until its neighbours sit side by side, so
- *      nothing overlaps by construction (see `layout_radial`).
+ *      of a ring grows until its neighbours sit side by side AND
+ *      until it clears the ring inside it, so nothing overlaps by
+ *      construction, across the ring or along the radius (see
+ *      `layout_radial`).
  *
  *      Pure: takes plain nodes and edges, returns positions. The G6
  *      classes in c_g6_nodes_tree.js are two thin adapters over it.
@@ -272,6 +274,18 @@ function tidy_tree_lr(nodes, edges, o)
     return pos;
 }
 
+/*  How much of a card lies along the direction `a`: the projection
+ *  of its rectangle on that direction. Full width when the card is
+ *  read along its width, full height across it, and the honest
+ *  mixture in between.  */
+function extent_at(n, a)
+{
+    if(!n) {
+        return 0;
+    }
+    return Math.abs(n.w * Math.cos(a)) + Math.abs(n.h * Math.sin(a));
+}
+
 /************************************************************
  *  The radial tree: the root in the middle, a ring per depth.
  *
@@ -333,10 +347,10 @@ export function layout_radial(nodes, edges, opts)
     /*  An explicit stack, not recursion: the sectors of a ring are
      *  sorted by angle in pass 2, so the order they are pushed in does
      *  not matter -- only that every node gets its own.  */
-    let sector = (root_id, root_from, root_span) => {
-        let stack = [{id: root_id, from: root_from, span: root_span}];
+    let sector = (root_id, root_from, root_span, root_parent) => {
+        let stack = [{id: root_id, from: root_from, span: root_span, parent: root_parent}];
         while(stack.length) {
-            let {id, from, span} = stack.pop();
+            let {id, from, span, parent} = stack.pop();
             let a = from + span / 2;
             angle.set(id, a);
             let ring = ring_of(id);
@@ -344,11 +358,21 @@ export function layout_radial(nodes, edges, opts)
                 rings[ring] = [];
             }
             let n = t.by_id.get(id);
-            rings[ring].push({id: id, angle: a, diag: Math.hypot(n.w, n.h)});
+            rings[ring].push({
+                id: id,
+                angle: a,
+                diag: Math.hypot(n.w, n.h),
+                /*  How much of the card lies along the RADIUS at this
+                 *  angle -- the projection of the rectangle on that
+                 *  direction -- for itself and for the node it hangs
+                 *  from, which is the one it has to clear.  */
+                ext: extent_at(n, a),
+                parent_ext: parent? extent_at(t.by_id.get(parent), a) : 0,
+            });
             let cursor = from;
             for(let kid of (t.children.get(id) || [])) {
                 let part = span * leaves.get(kid) / leaves.get(id);
-                stack.push({id: kid, from: cursor, span: part});
+                stack.push({id: kid, from: cursor, span: part, parent: id});
                 cursor += part;
             }
         }
@@ -359,28 +383,43 @@ export function layout_radial(nodes, edges, opts)
         let cursor = -Math.PI / 2;      /*  the first child at the top  */
         for(let kid of (t.children.get(root) || [])) {
             let part = 2 * Math.PI * leaves.get(kid) / leaves.get(root);
-            sector(kid, cursor, part);
+            sector(kid, cursor, part, root);
             cursor += part;
         }
     } else {
         let cursor = -Math.PI / 2;
         for(let root of t.roots) {
             let part = 2 * Math.PI * leaves.get(root) / total;
-            sector(root, cursor, part);
+            sector(root, cursor, part, null);
             cursor += part;
         }
     }
 
-    /*  Pass 2, the RADII: a ring is one step further out than the
-     *  ring before, and as far out as its two closest neighbours need
-     *  to sit side by side -- the arc between two adjacent centres is
-     *  r·Δangle, and it has to hold half of each card plus the gap.
-     *  Measured on NEIGHBOURS, not on the ring's total length: a
-     *  leafless root squeezed between two big subtrees gets a sliver
-     *  of angle, and it is the sliver that sets the radius.  */
+    /*  Pass 2, the RADII. Two constraints, and the larger wins.
+     *
+     *  ACROSS the ring: its two closest neighbours have to sit side
+     *  by side -- the arc between two adjacent centres is r·Δangle,
+     *  and it has to hold half of each card plus the gap. Measured on
+     *  NEIGHBOURS, not on the ring's total length: a leafless root
+     *  squeezed between two big subtrees gets a sliver of angle, and
+     *  it is the sliver that sets the radius.
+     *
+     *  ALONG the radius: `ranksep` is a step between CENTRES, so a
+     *  ring one step out was one step out whatever the cards
+     *  measured -- 180 between the centres of two cards that reach
+     *  95 each way is two cards touching. The tidy tree never had
+     *  this: its `ranksep` is a gap between COLUMNS, and a column
+     *  carries its own width. Here every card is measured against
+     *  the one it HANGS FROM, in the direction it hangs in -- the
+     *  two are radially aligned, or nearly, since a child lives
+     *  inside its parent's sector -- and the ring goes out far
+     *  enough for the worst of them.  */
     let radius = [0];
     for(let ring = 1; ring < rings.length; ring++) {
         let r = radius[ring - 1] + o.ranksep;
+        for(let n of (rings[ring] || [])) {
+            r = Math.max(r, radius[ring - 1] + (n.parent_ext + n.ext) / 2 + o.nodesep);
+        }
         let list = (rings[ring] || []).slice().sort((a, b) => a.angle - b.angle);
         for(let i = 0; i < list.length && list.length > 1; i++) {
             let a = list[i];

package/src/treedb_layout.test.js

@@ -181,6 +181,21 @@ describe("the radial tree", () => {
         expect(d).toBeGreaterThan(190);
     });
 
+    test("a ring clears the ring inside it: a card does not sit on its parent", () => {
+        /*  One child, straight below its root: `ranksep` alone is a
+         *  step between CENTRES, so two cards 96 tall 100 apart had
+         *  48 + 48 of card and 4 of air. The ring adds the halves. */
+        let pos = layout_radial(
+            [N("root", 172, 96), N("kid", 172, 96)],
+            [{source: "root", target: "kid", rank: 0}],
+            {nodesep: 18, ranksep: 100}
+        );
+        let d = Math.hypot(
+            pos.get("kid").x - pos.get("root").x, pos.get("kid").y - pos.get("root").y
+        );
+        expect(d).toBeGreaterThanOrEqual(48 + 48 + 18);
+    });
+
     test("several roots share the circle around an empty centre", () => {
         let pos = layout_radial(
             [N("a", 100, 50), N("b", 100, 50), N("c", 100, 50)], [], {ranksep: 100}