@yuneta/gobj-ui 7.23.83 → 7.23.85

package/src/c_g6_nodes_tree.js

@@ -58,6 +58,7 @@ import {
     gobj_short_name,
     gobj_is_destroying,
     gobj_subscribe_event,
+    gobj_unsubscribe_event,
     gobj_publish_event,
     gobj_send_event,
     gobj_post_event,
@@ -143,7 +144,7 @@ import {
 } from '@antv/g6';
 
 import {Circle as CircleGeometry, Rect as RectGeometry} from '@antv/g';
-import i18next, {t} from "i18next";
+import {t} from "i18next";
 
 import {inject_svg_icons} from "./lib_icons.js";
 import {ensure_drag_canvas_patch} from "./g6_drag_canvas_touch.js";
@@ -157,6 +158,7 @@ import {
     consume_long_press_click,
 } from "./g6_touch_gestures.js";
 import {yui_theme_now, yui_watch_theme} from "./yui_theme.js";
+import {yui_shell_of} from "./c_yui_shell.js";
 
 /***************************************************************
  *  YuiToolbar — G6 Toolbar subclass that adds per-item className
@@ -465,11 +467,14 @@ let PRIVATE_DATA = {
     _edge_icon_el:      null,       // floating properties icon element
     _edge_delete_el:    null,       // floating delete icon element for edge
     _edge_popover_el:   null,       // edge properties popover element
+    _edge_preview_undo: null,       // ...and how to undo what it previewed
     _port_icon_el:      null,       // floating port properties icon element
     _port_popover_el:   null,       // port properties popover element
+    _port_preview_undo: null,       // ...and how to undo what it previewed
     _node_icon_el:      null,       // floating node properties icon element
     _node_delete_el:    null,       // floating delete icon element for node
     _node_popover_el:   null,       // node properties popover element
+    _node_preview_undo: null,       // ...and how to undo what it previewed
     _node_detail_el:    null,       // read-only detail popover (on click)
     _detail_node_id:    null,       // node id the detail popover is showing
     _delete_confirm_el: null,       // delete confirmation popover
@@ -613,6 +618,18 @@ function mt_writing(gobj, path)
  ***************************************************************/
 function mt_start(gobj)
 {
+    /*  A language change reaches the toolbars and the `+N` chips as
+     *  the shell's EVENT, not as a raw i18next listener: what the
+     *  toolbar draws and what a chip says are built here, out of
+     *  reach of refresh_language(), so somebody has to repaint them
+     *  -- and that somebody is an action of this machine, where the
+     *  `machine` trace can see it. Same wiring as C_YUI_PERIOD and
+     *  C_YUI_GOBJ_TREE_JS.  */
+    let shell = yui_shell_of(gobj);
+    if(shell) {
+        gobj_subscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
+    }
+
     return 0;
 }
 
@@ -621,6 +638,11 @@ function mt_start(gobj)
  ***************************************************************/
 function mt_stop(gobj)
 {
+    let shell = yui_shell_of(gobj);
+    if(shell) {
+        gobj_unsubscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
+    }
+
     return 0;
 }
 
@@ -631,11 +653,6 @@ function mt_destroy(gobj)
 {
     let priv = gobj.priv;
 
-    if(priv._on_language_changed) {
-        i18next.off('languageChanged', priv._on_language_changed);
-        priv._on_language_changed = null;
-    }
-
     uninstall_fold_listener(gobj);
 
     if(priv._on_pointerdown_focus) {
@@ -1022,12 +1039,6 @@ function configure_events(gobj)
         }
     });
 
-    // Re-render G6 toolbars (and the `+N` chips' titles) when language changes
-    priv._on_language_changed = () => {
-        update_toolbar(gobj);
-        repaint_more_chips(gobj);
-    };
-    i18next.on('languageChanged', priv._on_language_changed);
 
     /*  Clicking a CARD is clicking a DOM element inside the container,
      *  and that takes the keyboard away from G6's canvas -- the only
@@ -1865,6 +1876,17 @@ const LR_LAYOUTS = ["dagre"];
  *  toolbar's +/-, and the two-finger pinch of g6_touch_gestures.
  *  `enable` on the scroll keeps the two apart: a Ctrl wheel is
  *  the zoom's, so the scroll stands aside for it.
+ *
+ *  And the two have to name the SAME key, or the gesture falls
+ *  between them: the scroll stood aside for Meta as well, while
+ *  the zoom listened for Control alone, so Cmd + wheel neither
+ *  scrolled nor zoomed. It is ONE key and not two because a G6
+ *  `trigger` is a CHORD, not a list of alternatives -- its
+ *  `Shortcut.match()` compares the held keys to the bound ones
+ *  as a SET, so ["Control", "Meta"] means both keys down at
+ *  once. Control it is, on every platform: it is what a
+ *  trackpad pinch arrives as, so a Mac keeps its pinch and
+ *  gains nothing to press by mistake.
  ************************************************************/
 function camera_behaviors()
 {
@@ -1872,7 +1894,7 @@ function camera_behaviors()
         {
             type: "scroll-canvas",
             key: "scroll-canvas",
-            enable: (event) => !(event && (event.ctrlKey || event.metaKey)),
+            enable: (event) => !(event && event.ctrlKey),
         },
         {
             type: "zoom-canvas",
@@ -2081,6 +2103,54 @@ function topic_defaults_of(gobj, topic_name)
         topic_props.defaults : null;
 }
 
+/************************************************************
+ *  What a node is PAINTED with: its own colours, then the
+ *  topic's default, then the topic's colour.
+ *
+ *  A card is html, and its html was built with `desc.color`
+ *  every time it was repainted -- so a colour chosen in the node
+ *  properties popover lasted until the next selection, focus,
+ *  theme or pill change, and was never written to `__graphs__`
+ *  at all. Only the `shape` view kept it, because a figure is a
+ *  native G6 node and `style.fill` is what paints it. The FIGURE
+ *  was already remembered (`node_shape`); this is the wiring the
+ *  colour was missing.
+ ************************************************************/
+function node_paint_of(gobj, desc, geometry)
+{
+    let defaults = topic_defaults_of(gobj, desc.topic_name);
+    let g = is_object(geometry)? geometry : {};
+    let fill = g.fill || (defaults && defaults.fill) || desc.color;
+    let stroke = g.stroke || (defaults && defaults.stroke) || getStrokeColor(fill);
+    let line_width = g.lineWidth || (defaults && defaults.lineWidth) || 1;
+    return {fill: fill, stroke: stroke, lineWidth: line_width};
+}
+
+/************************************************************
+ *  Write a chosen paint into an entry of `__graphs__` -- a
+ *  node's or a topic's defaults.
+ *
+ *  A colour nobody chose is not saved: the topic's own colour,
+ *  with the stroke and the line width that go with it, is what a
+ *  card wears anyway, and writing it down would freeze today's
+ *  palette on that card -- the trap the SIZES fell into in
+ *  7.23.80, and the palette is assigned by POSITION (`ac_descs`),
+ *  so it moves when a topic is added. Choosing it back MEANS
+ *  forgetting the entry.
+ ************************************************************/
+function paint_into(entry, desc, fill, stroke, line_width)
+{
+    if(fill === desc.color && stroke === getStrokeColor(desc.color) && line_width === 1) {
+        delete entry.fill;
+        delete entry.stroke;
+        delete entry.lineWidth;
+        return;
+    }
+    entry.fill = fill;
+    entry.stroke = stroke;
+    entry.lineWidth = line_width;
+}
+
 /************************************************************
  *  The CARD: an html node, the tier's size, the ports, the
  *  saved geometry on top. The flags (focus, selection, anchor)
@@ -2093,11 +2163,12 @@ function card_shape_of(gobj, desc, record, geometry, pills_html)
     let node_treedb_type = desc.node_treedb_type;
     let label = node_label(desc, record);
     let ports = build_ports(gobj, desc);
+    let paint = node_paint_of(gobj, desc, geometry);
 
     let style = {
-        fill: desc.color,
-        stroke: getStrokeColor(desc.color),
-        lineWidth: 1,
+        fill: paint.fill,
+        stroke: paint.stroke,
+        lineWidth: paint.lineWidth,
         lineDash: [],
         halo: false,
         labelText: "",      /*  a card says its name inside; the label is the square's  */
@@ -2114,20 +2185,20 @@ function card_shape_of(gobj, desc, record, geometry, pills_html)
         // Pure child (LEAF): smallest tier. Rounded-rect chip,
         // same card language as entities, lighter.
         style.innerHTML = build_chip_innerHTML(
-            desc.color, priv.theme, record.icon, label, record.id
+            paint.fill, priv.theme, record.icon, label, record.id
         );
     } else if(node_treedb_type === 'extended') {
         // Extended (structural / INTERMEDIATE): middle tier. Card
         // with name; "structural" style (neutral grey, dashed
         // border) to read as a container/junction.
         style.innerHTML = build_node_innerHTML(
-            desc.color, priv.theme, record.icon, label,
+            paint.fill, priv.theme, record.icon, label,
             desc.topic_name, true, record.id, false, false, false, pills_html
         );
     } else {
         // Hierarchical entity (ROOT / container): largest tier.
         style.innerHTML = build_node_innerHTML(
-            desc.color, priv.theme, record.icon, label,
+            paint.fill, priv.theme, record.icon, label,
             desc.topic_name, false, record.id, false, false, false, pills_html
         );
     }
@@ -2230,11 +2301,12 @@ function pill_shape_of(gobj, desc, record, geometry)
     let tier = desc.node_treedb_type;
     let size = PILL_SIZE[tier] || PILL_SIZE.hierarchical;
     let ports = build_ports(gobj, desc);
+    let paint = node_paint_of(gobj, desc, geometry);
 
     let style = {
-        fill: desc.color,
-        stroke: getStrokeColor(desc.color),
-        lineWidth: 1,
+        fill: paint.fill,
+        stroke: paint.stroke,
+        lineWidth: paint.lineWidth,
         lineDash: [],
         halo: false,
         labelText: "",
@@ -2242,7 +2314,7 @@ function pill_shape_of(gobj, desc, record, geometry)
         dx: -size[0] / 2,
         dy: -size[1] / 2,
         innerHTML: build_chip_innerHTML(
-            desc.color, priv.theme, record.icon, node_label(desc, record), record.id
+            paint.fill, priv.theme, record.icon, node_label(desc, record), record.id
         ),
     };
     dress_ports(gobj, style, ports, geometry, topic_defaults_of(gobj, desc.topic_name),
@@ -2256,7 +2328,7 @@ function pill_innerHTML_of(gobj, nd, theme, highlight, selected, anchored)
     let desc = nd.data.desc;
     let record = nd.data.record || {};
     return build_chip_innerHTML(
-        desc.color, theme, record.icon, node_label(desc, record), record.id,
+        node_fill_of(nd), theme, record.icon, node_label(desc, record), record.id,
         highlight, selected, anchored
     );
 }
@@ -2293,9 +2365,10 @@ function figure_shape_of(gobj, desc, record, geometry, flags)
     let side = SHAPE_SIZE[tier] || SHAPE_SIZE.hierarchical;
     let labels = gobj_read_bool_attr(gobj, "node_labels");
     let figure = node_figure_of(gobj, desc, geometry || {});
+    let paint = node_paint_of(gobj, desc, geometry);
 
-    let stroke = getStrokeColor(desc.color);
-    let line_width = 1.5;
+    let stroke = paint.stroke;
+    let line_width = Math.max(paint.lineWidth, 1.5);
     if(f.selected) {
         stroke = SELECT_RING;
         line_width = 3;
@@ -2318,7 +2391,7 @@ function figure_shape_of(gobj, desc, record, geometry, flags)
     let style = {
         size: [side, side],
         radius: (figure === 'square')? Math.round(side / 5) : 0,
-        fill: desc.color,
+        fill: paint.fill,
         stroke: stroke,
         lineWidth: line_width,
         lineDash: dash,
@@ -4046,6 +4119,42 @@ function hide_overlay(gobj, ...keys)
 /************************************************************
  *  Enable the save button (mark graph as dirty).
  ************************************************************/
+/************************************************************
+ *  A popover that PREVIEWS its changes owes an undo.
+ *
+ *  What the preview writes is not the reader's answer until
+ *  `apply` is pressed, and `cancel` used to be the only way
+ *  back: every other way out of the popover -- a click on the
+ *  canvas, the icon pressed again, the element going away --
+ *  left the preview standing on the element, and the next Save
+ *  wrote it to `__graphs__`. So the undo is kept beside the
+ *  popover and run by whoever hides it; `apply` drops it first,
+ *  because then the preview IS the answer.
+ ************************************************************/
+function set_preview_undo(gobj, key, undo)
+{
+    gobj.priv[key] = undo;
+}
+
+function drop_preview_undo(gobj, key)
+{
+    gobj.priv[key] = null;
+}
+
+function run_preview_undo(gobj, key)
+{
+    let undo = gobj.priv[key];
+    gobj.priv[key] = null;
+    if(!undo || gobj_is_destroying(gobj)) {
+        return;
+    }
+    try {
+        undo();
+    } catch(e) {
+        log_error(`${gobj_short_name(gobj)}: cannot undo the preview: ${e}`);
+    }
+}
+
 function mark_graph_dirty(gobj)
 {
     let $container = gobj_read_attr(gobj, "$container");
@@ -4990,6 +5099,34 @@ function port_hit_slop_world(graph)
     return slop / zoom;
 }
 
+/************************************************************
+ *  Whether a point landed on a port, by the port's SHAPE.
+ *
+ *  A port was a circle and the test was a radius; since 7.23.81
+ *  it can be a square, a diamond or a triangle too, and a circle
+ *  around a diamond answers for the air off its corners while
+ *  missing the middle of its edges. `r` is the drawn radius with
+ *  the hit slop already added, and the shapes are the ones
+ *  TreedbCard.drawPortShapes() draws from it.
+ *
+ *      dx, dy  the point, relative to the port's centre
+ ************************************************************/
+function port_shape_hit(shape, dx, dy, r)
+{
+    switch(shape) {
+        case 'square':
+            return Math.abs(dx) <= r && Math.abs(dy) <= r;
+        case 'diamond':
+            return Math.abs(dx) + Math.abs(dy) <= r;
+        case 'triangle':
+            /*  (0,-r), (r,r), (-r,r): under the base and inside the
+             *  two slanted sides, which meet at 2|x| - y = r.  */
+            return dy <= r && (2 * Math.abs(dx) - dy) <= r;
+        default:
+            return Math.hypot(dx, dy) <= r;
+    }
+}
+
 /************************************************************
  *  Detect if a click in canvas coordinates hits a port.
  *  Returns the port key string, or null if no port hit.
@@ -5021,8 +5158,9 @@ function detect_port_click(gobj, node_id, canvasX, canvasY)
         let dist = Math.sqrt(dx * dx + dy * dy);
 
         /*  Nearest wins, so the enlarged areas of two ports
-         *  overlapping is not a tie -- it is the closer one.  */
-        if(dist <= r + slop && dist < best_dist) {
+         *  overlapping is not a tie -- it is the closer one. The
+         *  distance ranks them; the SHAPE says who is in the running. */
+        if(port_shape_hit(ports[i].shape, dx, dy, r + slop) && dist < best_dist) {
             best_dist = dist;
             best_key = ports[i].key;
         }
@@ -5240,6 +5378,7 @@ function toggle_port_popover(gobj)
 
 function hide_port_popover(gobj)
 {
+    run_preview_undo(gobj, '_port_preview_undo');
     hide_overlay(gobj, '_port_popover_el');
 }
 
@@ -5280,6 +5419,17 @@ function show_port_popover(gobj)
         xy.x + floating_popover_dx(), xy.y, 'g6-port-popover', '#d9d9d9', 180
     );
 
+    /*  What the preview writes on this port, undone: whoever hides
+     *  the popover without applying runs it (see set_preview_undo).  */
+    let undo_port = () => {
+        graph.updateNodeData([{id: node_id, style: {
+            ports: ports_with(nodeData.style.ports, port_key, {shape: orig_shape, r: orig_r}),
+        }}]);
+        graph.draw().then(() => {
+            update_port_resize_handles_position(gobj);
+        });
+    };
+
     /*  Live preview on THIS port; the others wait for apply.  */
     function preview_port() {
         let r = parseInt(rInput.value) || orig_r;
@@ -5313,13 +5463,7 @@ function show_port_popover(gobj)
             text: 'cancel',
             style: BTN_STYLE_CANCEL,
             onClick: () => {
-                graph.updateNodeData([{id: node_id, style: {
-                    ports: ports_with(nodeData.style.ports, port_key, {shape: orig_shape, r: orig_r}),
-                }}]);
-                graph.draw().then(() => {
-                    update_port_resize_handles_position(gobj);
-                });
-                hide_port_popover(gobj);
+                hide_port_popover(gobj);    /*  which undoes the preview  */
             },
         },
         {
@@ -5327,6 +5471,7 @@ function show_port_popover(gobj)
             style: 'flex:1;padding:6px;background:#1890ff;color:#fff;border:none;' +
                    'border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;',
             onClick: () => {
+                drop_preview_undo(gobj, '_port_preview_undo');
                 apply_port_properties(gobj, node_id, port_key,
                     shapeSelect.value, parseInt(rInput.value) || orig_r, scopeSelect.value
                 );
@@ -5336,6 +5481,7 @@ function show_port_popover(gobj)
 
     priv.$container.appendChild(popover);
     priv._port_popover_el = popover;
+    set_preview_undo(gobj, '_port_preview_undo', undo_port);
     clamp_popover_position(gobj, popover);
 }
 
@@ -6184,6 +6330,12 @@ function show_edge_popover(gobj)
         'g6-edge-popover', '#d9d9d9', 180
     );
 
+    /*  What the preview writes, undone (see set_preview_undo).  */
+    let undo_edge = () => {
+        graph.updateEdgeData([{ id: edge_id, style: { lineWidth: origLW, stroke: origStroke } }]);
+        graph.draw();
+    };
+
     // Live preview: update the selected edge in real time
     function preview_edge() {
         let lw = parseInt(lwInput.value) || 2;
@@ -6213,9 +6365,7 @@ function show_edge_popover(gobj)
             text: 'cancel',
             style: BTN_STYLE_CANCEL,
             onClick: () => {
-                graph.updateEdgeData([{ id: edge_id, style: { lineWidth: origLW, stroke: origStroke } }]);
-                graph.draw();
-                deselect_edge(gobj);
+                deselect_edge(gobj);        /*  which undoes the preview  */
             },
         },
         {
@@ -6223,6 +6373,7 @@ function show_edge_popover(gobj)
             style: 'flex:1;padding:6px;background:#52c41a;color:#fff;border:none;' +
                    'border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;',
             onClick: () => {
+                drop_preview_undo(gobj, '_edge_preview_undo');
                 apply_edge_properties(gobj, edge_id,
                     parseInt(lwInput.value) || 2,
                     colorInput.value,
@@ -6234,6 +6385,7 @@ function show_edge_popover(gobj)
 
     priv.$container.appendChild(popover);
     priv._edge_popover_el = popover;
+    set_preview_undo(gobj, '_edge_preview_undo', undo_edge);
 
     // Clamp popover inside the container
     clamp_popover_position(gobj, popover);
@@ -6278,6 +6430,7 @@ function clamp_popover_position(gobj, popover)
 
 function hide_edge_popover(gobj)
 {
+    run_preview_undo(gobj, '_edge_preview_undo');
     hide_overlay(gobj, '_edge_popover_el');
 }
 
@@ -6401,27 +6554,26 @@ function show_node_popover(gobj)
         'g6-node-popover', '#d9d9d9', 180
     );
 
-    let node_graph_type = nodeData.data && nodeData.data.desc ?
-        nodeData.data.desc.node_treedb_type : null;
+    /*  Paint the node with these colours, whatever it is wearing:
+     *  the style for a figure, and the html of a card or a pill,
+     *  which repaint_cards() rebuilds from the style it is given
+     *  here (node_fill_of).  */
+    let paint_node = (fill, stroke, lw) => {
+        graph.updateNodeData([{
+            id: node_id, style: {fill: fill, stroke: stroke, lineWidth: lw},
+        }]);
+        repaint_cards(gobj, new Set([node_id]));
+        graph.draw();
+    };
+
+    /*  What the preview writes, undone (see set_preview_undo).  */
+    let undo_node = () => {
+        paint_node(origFill, origStroke, origLW);
+    };
 
     // Live preview
     function preview_node() {
-        let fill = fillInput.value;
-        let stroke = strokeInput.value;
-        let lw = parseInt(lwInput.value) || 1;
-        let updateStyle = { fill: fill, stroke: stroke, lineWidth: lw };
-
-        if(node_graph_type === 'hierarchical') {
-            let record = nodeData.data.record || {};
-            updateStyle.innerHTML = build_node_innerHTML(
-                fill, priv.theme, record.icon,
-                node_label(nodeData.data.desc, record),
-                nodeData.data.desc.topic_name, false, record.id,
-                false, false, false, pills_html_of(gobj, nodeData)
-            );
-        }
-        graph.updateNodeData([{ id: node_id, style: updateStyle }]);
-        graph.draw();
+        paint_node(fillInput.value, strokeInput.value, parseInt(lwInput.value) || 1);
     }
 
     // Fill color
@@ -6460,19 +6612,7 @@ function show_node_popover(gobj)
             text: 'cancel',
             style: BTN_STYLE_CANCEL,
             onClick: () => {
-                let restoreStyle = { fill: origFill, stroke: origStroke, lineWidth: origLW };
-                if(node_graph_type === 'hierarchical') {
-                    let record = nodeData.data.record || {};
-                    restoreStyle.innerHTML = build_node_innerHTML(
-                        origFill, priv.theme, record.icon,
-                        node_label(nodeData.data.desc, record),
-                        nodeData.data.desc.topic_name, false, record.id,
-                        false, false, false, pills_html_of(gobj, nodeData)
-                    );
-                }
-                graph.updateNodeData([{ id: node_id, style: restoreStyle }]);
-                graph.draw();
-                hide_node_popover(gobj);
+                hide_node_popover(gobj);    /*  which undoes the preview  */
             },
         },
         {
@@ -6480,6 +6620,7 @@ function show_node_popover(gobj)
             style: 'flex:1;padding:6px;background:#1890ff;color:#fff;border:none;' +
                    'border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;',
             onClick: () => {
+                drop_preview_undo(gobj, '_node_preview_undo');
                 apply_node_properties(gobj, node_id,
                     fillInput.value,
                     strokeInput.value,
@@ -6493,6 +6634,7 @@ function show_node_popover(gobj)
 
     priv.$container.appendChild(popover);
     priv._node_popover_el = popover;
+    set_preview_undo(gobj, '_node_preview_undo', undo_node);
 
     // Clamp popover inside the container
     clamp_popover_position(gobj, popover);
@@ -6500,6 +6642,7 @@ function show_node_popover(gobj)
 
 function hide_node_popover(gobj)
 {
+    run_preview_undo(gobj, '_node_preview_undo');
     hide_overlay(gobj, '_node_popover_el');
 }
 
@@ -6824,6 +6967,16 @@ function refresh_minimap(gobj)
  *  same three-way choice — it lived inline in the theme refresh and is
  *  shared now. Returns null for a node that carries no desc.
  ************************************************************/
+/*  The colour a node is WEARING, from its live style: the shape
+ *  functions put the node's own paint there when it has one (see
+ *  node_paint_of), and a repaint has to keep it -- rebuilding the
+ *  html from `desc.color` is what threw away every colour applied
+ *  to a card at the first selection.  */
+function node_fill_of(nd)
+{
+    return (nd && nd.style && nd.style.fill) || nd.data.desc.color;
+}
+
 function node_innerHTML_of(nd, theme, highlight, selected, anchored, pills_html)
 {
     if(!nd || !nd.data || !nd.data.desc) {
@@ -6832,22 +6985,23 @@ function node_innerHTML_of(nd, theme, highlight, selected, anchored, pills_html)
     let desc = nd.data.desc;
     let record = nd.data.record || {};
     let label = node_label(desc, record);
+    let fill = node_fill_of(nd);
 
     switch(desc.node_treedb_type) {
         case 'child':
             return build_chip_innerHTML(
-                desc.color, theme, record.icon, label, record.id,
+                fill, theme, record.icon, label, record.id,
                 highlight, selected, anchored
             );
         case 'extended':
             return build_node_innerHTML(
-                desc.color, theme, record.icon, label,
+                fill, theme, record.icon, label,
                 desc.topic_name, true, record.id, highlight, selected, anchored,
                 pills_html
             );
         case 'hierarchical':
             return build_node_innerHTML(
-                desc.color, theme, record.icon, label,
+                fill, theme, record.icon, label,
                 desc.topic_name, false, record.id, highlight, selected, anchored,
                 pills_html
             );
@@ -7692,21 +7846,33 @@ function apply_node_properties(gobj, node_id, fill, stroke, lineWidth, scope, sh
 
     let source_topic = nodeData.data.desc ? nodeData.data.desc.topic_name : null;
     let updates = [];
+    let repaint = new Set();
     const nodes = graph.getData().nodes;
 
-    /*  The figure: written where Save reads it (the node's entry in
-     *  `__graphs__`), and as the topic's default for the wider
-     *  scopes, so a record that arrives later is born with it.  */
+    /*  The figure AND the colours: written where Save reads them (the
+     *  node's entry in `__graphs__`), and as the topic's default for
+     *  the wider scopes, so a record that arrives later is born with
+     *  them. The colours used to be written on the live style alone,
+     *  which on an html card is under the html: the first repaint
+     *  rebuilt that html from the topic's colour and the choice was
+     *  gone, and nothing of it ever reached the store.  */
     let figure = (shape && str_in_list(NODE_SHAPES, shape))? shape : "";
     let reshaped = [];
-    if(figure && scope !== 'this') {
+    if(scope !== 'this') {
         let topics = (scope === 'same_topic')? [source_topic] : Object.keys(priv.descs || {});
         for(let topic_name of topics) {
+            let desc = priv.descs[topic_name];
+            if(!desc) {
+                continue;
+            }
             if(!is_object(priv._graph_properties[topic_name])) {
                 priv._graph_properties[topic_name] = {};
             }
             let defaults = priv._graph_properties[topic_name].defaults || {};
-            defaults.node_shape = figure;
+            if(figure) {
+                defaults.node_shape = figure;
+            }
+            paint_into(defaults, desc, fill, stroke, lineWidth);
             priv._graph_properties[topic_name].defaults = defaults;
         }
     }
@@ -7724,24 +7890,21 @@ function apply_node_properties(gobj, node_id, fill, stroke, lineWidth, scope, sh
             continue;
         }
 
+        let entry = node_props_entry(gobj, nd);
         if(figure) {
-            node_props_entry(gobj, nd).node_shape = figure;
+            entry.node_shape = figure;
             if(node_mode_of(gobj, nodes[i].id) === 'shape') {
                 reshaped.push(nodes[i].id);
             }
         }
+        paint_into(entry, nd.data.desc, fill, stroke, lineWidth);
 
+        /*  The style for the figure, the html for the card and the
+         *  pill: every tier is repainted, and the repaint reads the
+         *  style it is given here (node_fill_of).  */
         let updateStyle = { fill: fill, stroke: stroke, lineWidth: lineWidth };
-        if(nd.data.desc.node_treedb_type === 'hierarchical') {
-            let record = nd.data.record || {};
-            updateStyle.innerHTML = build_node_innerHTML(
-                fill, priv.theme, record.icon,
-                node_label(nd.data.desc, record),
-                nd.data.desc.topic_name, false, record.id,
-                false, false, false, pills_html_of(gobj, nd)
-            );
-        }
         updates.push({ id: nodes[i].id, style: updateStyle });
+        repaint.add(nodes[i].id);
     }
 
     if(updates.length > 0) {
@@ -7749,6 +7912,7 @@ function apply_node_properties(gobj, node_id, fill, stroke, lineWidth, scope, sh
         if(reshaped.length) {
             reshape_nodes(gobj, reshaped);
         }
+        repaint_cards(gobj, repaint);
         graph.draw().then(() => {
             mark_graph_dirty(gobj);
         });
@@ -8980,6 +9144,19 @@ async function reconcile_fold_apply(gobj, opts, visible)
     return changed;
 }
 
+/************************************************************
+ *  The application changed language: what this gclass DRAWS has
+ *  to be drawn again. `refresh_language()` reaches what carries
+ *  an i18n key in the DOM; a G6 toolbar and the html of a chip
+ *  are built here and carry none.
+ ************************************************************/
+function ac_language_changed(gobj, event, kw, src)
+{
+    update_toolbar(gobj);
+    repaint_more_chips(gobj);
+    return 0;
+}
+
 /************************************************************
  *  Repaint the `+N` chips (theme or language changed).
  ************************************************************/
@@ -10527,6 +10704,7 @@ function create_gclass(gclass_name)
             ["EV_HIDE",                     ac_hide,                null],
             ["EV_RESIZE",                   ac_resize,              null],
             ["EV_THEME",                    ac_theme,               null],
+            ["EV_LANGUAGE_CHANGED",         ac_language_changed,    null],
         ]]
     ];
 
@@ -10621,6 +10799,7 @@ function create_gclass(gclass_name)
         ["EV_HIDE",                     0],
         ["EV_RESIZE",                   0],
         ["EV_THEME",                    0],
+        ["EV_LANGUAGE_CHANGED",         0],
     ];
 
     /*----------------------------------------*