@yuneta/gobj-ui 7.23.143 → 7.23.145

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -7124,6 +7124,27 @@ function auto_layout(gobj)
     return true;
 }
 
+/************************************************************
+ *  Paint the minimap again from where the nodes are NOW.
+ *
+ *  It repaints off the graph's draw events, and a layout emits none:
+ *  G6 moves the nodes with a SILENT draw. So after a layout change
+ *  the minimap went on showing the arrangement before it.
+ ************************************************************/
+function repaint_minimap(gobj)
+{
+    let plugin = graph_get_plugin(gobj, "minimap");
+    if(!plugin || plugin.destroyed) {
+        return;
+    }
+    try {
+        plugin.renderMinimap();
+        plugin.renderMask();
+    } catch(e) {
+        log_error(`${gobj_short_name(gobj)}: repaint_minimap failed: ${e}`);
+    }
+}
+
 /************************************************************
  *  Show or hide the minimap, deciding by the SIZE of the graph.
  *
@@ -9772,6 +9793,7 @@ async function reconcile_fold_apply(gobj, opts, visible)
     await graph_draw(gobj);
     if(changed || opts.relayout) {
         await graph_layout(gobj);
+        repaint_minimap(gobj);
     }
 
     /*  THE VIEWPORT, and only here.
@@ -10924,18 +10946,44 @@ function ac_fullscreen(gobj, event, kw, src)
 
 /************************************************************
  *  Layout change
+ *
+ *  A new layout moves EVERY node, so the camera cannot stay on the
+ *  coordinates it had: it would look at empty grid where the old
+ *  arrangement was. It goes through the reconcile instead, which
+ *  holds the node the reader was looking at on the same pixel (the
+ *  zoom is kept) and fits only if nothing is left in view.
  ************************************************************/
 function ac_set_layout(gobj, event, kw, src)
 {
     let priv = gobj.priv;
+    let graph = priv.graph;
     let layout = select_layout(gobj, kw.layout);
+
+    /*  The reader chose it: a later load must not auto-lay it back.  */
+    priv._layout_asked = gobj_read_str_attr(gobj, "layout");
+
     /*  The ports turn with the reading direction, before the lines
      *  are laid out from them.  */
     apply_layout_direction(gobj);
-    graph_set_layout(gobj, layout).then(() => {
+
+    let done = () => {
         configure_behaviour(gobj);
         update_toolbar(gobj);
-    });
+    };
+
+    if(!priv._fold_model || !graph || !graph.rendered) {
+        /*  No records yet: nothing on screen to hold still.  */
+        graph_set_layout(gobj, layout).then(() => {
+            repaint_minimap(gobj);
+            done();
+        });
+        return 0;
+    }
+
+    let keep = camera_anchor_node(gobj);
+    let vp = keep? yui_graph_viewport_of(graph, keep) : null;
+    graph.setLayout(layout);
+    reconcile_fold(gobj, {relayout: true, keep: keep, keep_vp: vp}).then(done);
 
     return 0;
 }

package/src/c_yui_json_pad.css

@@ -0,0 +1,94 @@
+/***********************************************************************
+ *          c_yui_json_pad.css
+ *
+ *          Layout of C_YUI_JSON_PAD: the two panes side by side, stacked
+ *          when the PAD (not the screen) is narrow -- it lives in a window
+ *          the reader resizes.  The logical block names double as hooks.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+.JSON_PAD {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    padding: .5rem;
+    container-type: inline-size;
+}
+
+.JSON_PAD_TOOLBAR {
+    flex: 0 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: .5rem;
+}
+
+.JSON_PAD_NOTICE {
+    flex: 1 1 auto;
+}
+
+.JSON_PAD_PANES {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: row;
+    gap: .5rem;
+}
+
+.JSON_PAD_PANE {
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+}
+
+/*  Comparing: the viewers give their place to the differences, and the
+ *  panes keep only their text areas.  */
+.JSON_PAD.is-comparing .JSON_PAD_PANES {
+    flex: 0 0 auto;
+}
+
+.JSON_PAD_DIFF {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+}
+
+.JSON_PAD_DIFF_SUMMARY {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-bottom: .5rem;
+}
+
+.JSON_PAD_DIFF_COUNT {
+    display: inline-flex;
+    align-items: center;
+    gap: .35rem;
+}
+
+.JSON_PAD_DIFF_TABLE {
+    font-size: .85rem;
+}
+
+.JSON_PAD_DIFF_TABLE td.JSON_PAD_DIFF_PATH,
+.JSON_PAD_DIFF_TABLE td.JSON_PAD_DIFF_FROM,
+.JSON_PAD_DIFF_TABLE td.JSON_PAD_DIFF_TO {
+    font-family: monospace;
+    white-space: pre-wrap;
+    word-break: break-all;
+}
+
+@container (max-width: 40rem) {
+    .JSON_PAD_PANES {
+        flex-direction: column;
+    }
+    .JSON_PAD.is-comparing .JSON_PAD_PANE {
+        flex: 0 0 auto;
+    }
+}