@yuneta/gobj-ui 7.23.6 → 7.23.7

package/README.md

@@ -459,10 +459,11 @@ written in every editor that offers it and never drawn. Fold is the chevron
 pair, from the lazy tree viewer's own toolbar. The readout hangs off G6's
 `aftertransform`, the one hook that also covers the wheel.
 
-Both graph toolbars are arranged the same way (`7.23.6`): camera and refresh in
-the centre, layout picker and the fold pair on the right. The middle is the
-camera — a fold changes the DOCUMENT, not the view of it, and among the camera
-buttons it read as two more of them.
+Both graph toolbars are arranged the same way (`7.23.7`): the **global**
+expand/collapse leftmost, ahead of the find box; camera and refresh in the
+centre; the layout picker on the right. The **per-node** fold is a different
+control and lives elsewhere — on the right of each card's own header, last,
+where the gobj tree puts its `+N` / `−`.
 
 The graph carries **its own** toolbar, a **layout picker**
 (`EV_CHANGE_LAYOUT {layout}`: `vertical tree`, `dagre top-down`,

package/dist/gobj-ui.cjs.js

@@ -9912,7 +9912,7 @@ function destroy_ui$6(gobj) {
 function make_toolbar$3(gobj) {
 	let priv = gobj.priv;
 	let toolbar_wide = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "wide");
-	let left_items = [[
+	let left_items = yui_graph_fold_items(gobj, toolbar_wide).concat([[
 		"div",
 		{
 			class: "JSON_GRAPH_FIND control has-icons-left",
@@ -9954,7 +9954,7 @@ function make_toolbar$3(gobj) {
 			{ i18n: "matches" },
 			"matches"
 		]]
-	]];
+	]]);
 	let center_items = [];
 	center_items = yui_graph_camera_items(gobj, priv.graph, toolbar_wide);
 	center_items.push(yui_graph_refresh_item(gobj, toolbar_wide));
@@ -9989,7 +9989,7 @@ function make_toolbar$3(gobj) {
 			evt.stopPropagation();
 			(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_CHANGE_LAYOUT", { layout: evt.target.value }, gobj);
 		} }
-	])].concat(yui_graph_fold_items(gobj, toolbar_wide));
+	])];
 	const $toolbar = yui_toolbar({}, [
 		[
 			"div",
@@ -10098,6 +10098,11 @@ function build_cell_html(key, value, type, dark, matched) {
 *  innerHTML string, so there is no other way to hang a
 *  handler on it.
 *
+*  On the RIGHT of the header, and last, where the gobj tree
+*  puts its own — with a spacer of the same width on the left
+*  so the label stays centred on its own axis instead of
+*  drifting by the width of a chip that only some cards have.
+*
 *  A filled CHIP, the same one the gobj tree draws
 *  (`c_yui_gobj_tree_js.js`, render_toggle_html): background,
 *  border, radius, and `+N` / `−` rather than a triangle.  It
@@ -10111,8 +10116,9 @@ function build_cell_html(key, value, type, dark, matched) {
 *  where it could carry no i18n key and would sit in English
 *  forever.  `+3` and `−` need no language.
 ************************************************************/
+var FOLD_SPACER = `<span style="width:24px; flex:0 0 auto;"></span>`;
 function fold_toggle_html(path, foldable, folded, branches, colors) {
-	if (!foldable) return `<span style="width:24px; flex:0 0 auto;"></span>`;
+	if (!foldable) return FOLD_SPACER;
 	let label = folded ? "+" + branches : "&#8722;";
 	return `<span data-fold-path="${(0, _yuneta_gobj_js.escapeHtml)(path)}" style="
         flex: 0 0 auto;
@@ -10243,7 +10249,7 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
         display: flex;
         align-items: center;
         gap: 6px;
-    ">${fold_toggle_html(path, foldable, folded, pending_complex.length, colors)}<span style="flex:1 1 auto; text-align:center;">${(0, _yuneta_gobj_js.escapeHtml)(label)}</span></div>
+    ">${FOLD_SPACER}<span style="flex:1 1 auto; text-align:center;">${(0, _yuneta_gobj_js.escapeHtml)(label)}</span>${fold_toggle_html(path, foldable, folded, pending_complex.length, colors)}</div>
     ${content_html}
 </div>`;
 	let node = {
@@ -12606,7 +12612,7 @@ function make_toolbar$1(gobj) {
 	let priv = gobj.priv;
 	let toolbar_wide = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "wide");
 	let current_layout = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "layout");
-	let left_items = [];
+	let left_items = yui_graph_fold_items(gobj, toolbar_wide);
 	let center_items = [];
 	let right_items = [];
 	center_items = yui_graph_camera_items(gobj, priv.graph, toolbar_wide);
@@ -12639,7 +12645,6 @@ function make_toolbar$1(gobj) {
 	]);
 	priv.$layout_select = $select;
 	right_items.push($select);
-	right_items.push(...yui_graph_fold_items(gobj, toolbar_wide));
 	const $toolbar = yui_toolbar({}, [
 		[
 			"div",

package/dist/gobj-ui.es.js

@@ -9907,7 +9907,7 @@ function destroy_ui$6(gobj) {
 function make_toolbar$3(gobj) {
 	let priv = gobj.priv;
 	let toolbar_wide = gobj_read_attr(gobj, "wide");
-	let left_items = [[
+	let left_items = yui_graph_fold_items(gobj, toolbar_wide).concat([[
 		"div",
 		{
 			class: "JSON_GRAPH_FIND control has-icons-left",
@@ -9949,7 +9949,7 @@ function make_toolbar$3(gobj) {
 			{ i18n: "matches" },
 			"matches"
 		]]
-	]];
+	]]);
 	let center_items = [];
 	center_items = yui_graph_camera_items(gobj, priv.graph, toolbar_wide);
 	center_items.push(yui_graph_refresh_item(gobj, toolbar_wide));
@@ -9984,7 +9984,7 @@ function make_toolbar$3(gobj) {
 			evt.stopPropagation();
 			gobj_send_event(gobj, "EV_CHANGE_LAYOUT", { layout: evt.target.value }, gobj);
 		} }
-	])].concat(yui_graph_fold_items(gobj, toolbar_wide));
+	])];
 	const $toolbar = yui_toolbar({}, [
 		[
 			"div",
@@ -10093,6 +10093,11 @@ function build_cell_html(key, value, type, dark, matched) {
 *  innerHTML string, so there is no other way to hang a
 *  handler on it.
 *
+*  On the RIGHT of the header, and last, where the gobj tree
+*  puts its own — with a spacer of the same width on the left
+*  so the label stays centred on its own axis instead of
+*  drifting by the width of a chip that only some cards have.
+*
 *  A filled CHIP, the same one the gobj tree draws
 *  (`c_yui_gobj_tree_js.js`, render_toggle_html): background,
 *  border, radius, and `+N` / `−` rather than a triangle.  It
@@ -10106,8 +10111,9 @@ function build_cell_html(key, value, type, dark, matched) {
 *  where it could carry no i18n key and would sit in English
 *  forever.  `+3` and `−` need no language.
 ************************************************************/
+var FOLD_SPACER = `<span style="width:24px; flex:0 0 auto;"></span>`;
 function fold_toggle_html(path, foldable, folded, branches, colors) {
-	if (!foldable) return `<span style="width:24px; flex:0 0 auto;"></span>`;
+	if (!foldable) return FOLD_SPACER;
 	let label = folded ? "+" + branches : "&#8722;";
 	return `<span data-fold-path="${escapeHtml(path)}" style="
         flex: 0 0 auto;
@@ -10238,7 +10244,7 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
         display: flex;
         align-items: center;
         gap: 6px;
-    ">${fold_toggle_html(path, foldable, folded, pending_complex.length, colors)}<span style="flex:1 1 auto; text-align:center;">${escapeHtml(label)}</span></div>
+    ">${FOLD_SPACER}<span style="flex:1 1 auto; text-align:center;">${escapeHtml(label)}</span>${fold_toggle_html(path, foldable, folded, pending_complex.length, colors)}</div>
     ${content_html}
 </div>`;
 	let node = {
@@ -12601,7 +12607,7 @@ function make_toolbar$1(gobj) {
 	let priv = gobj.priv;
 	let toolbar_wide = gobj_read_attr(gobj, "wide");
 	let current_layout = gobj_read_str_attr(gobj, "layout");
-	let left_items = [];
+	let left_items = yui_graph_fold_items(gobj, toolbar_wide);
 	let center_items = [];
 	let right_items = [];
 	center_items = yui_graph_camera_items(gobj, priv.graph, toolbar_wide);
@@ -12634,7 +12640,6 @@ function make_toolbar$1(gobj) {
 	]);
 	priv.$layout_select = $select;
 	right_items.push($select);
-	right_items.push(...yui_graph_fold_items(gobj, toolbar_wide));
 	const $toolbar = yui_toolbar({}, [
 		[
 			"div",

package/package.json

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

package/src/c_yui_gobj_tree_js.js

@@ -537,7 +537,11 @@ function make_toolbar(gobj)
     let toolbar_wide = gobj_read_attr(gobj, "wide");
     let current_layout = gobj_read_str_attr(gobj, "layout");
 
-    let left_items = [];
+    /*  The GLOBAL fold opens the whole tree; it is not a camera control
+     *  and not a per-node one, so it sits on its own at the left — ahead
+     *  of a find box where the toolbar has one.  The per-node handles
+     *  live inside the cards, on the right of each header.  */
+    let left_items = yui_graph_fold_items(gobj, toolbar_wide);
     let center_items = [];
     let right_items = [];
 
@@ -583,12 +587,6 @@ function make_toolbar(gobj)
     priv.$layout_select = $select;
     right_items.push($select);
 
-    /*  Fold on the RIGHT, past the layout picker — where the JSON graph
-     *  already put it.  The camera is what the middle is for: the fold
-     *  pair changes the DOCUMENT, not the view of it, and sitting in the
-     *  middle it read as two more camera buttons.  */
-    right_items.push(...yui_graph_fold_items(gobj, toolbar_wide));
-
     const $toolbar = yui_toolbar({}, [
         ['div', {class: 'yui-horizontal-toolbar-section left'}, left_items],
         ['div', {class: 'yui-horizontal-toolbar-section center'}, center_items],

package/src/c_yui_json_graph.js

@@ -478,7 +478,7 @@ function make_toolbar(gobj)
      *  looks the same whether nothing matched or the match was already
      *  on screen.
      */
-    let left_items = [
+    let left_items = yui_graph_fold_items(gobj, toolbar_wide).concat([
         ['div', {class: 'JSON_GRAPH_FIND control has-icons-left',
                  style: 'margin-right:.5rem; max-width:12rem; min-width:7rem;'}, [
             ['input', {
@@ -523,7 +523,7 @@ function make_toolbar(gobj)
             ['span', {class: 'JSON_GRAPH_FIND_COUNT'}, ''],
             ['span', {i18n: 'matches'}, 'matches']
         ]]
-    ];
+    ]);
     let center_items = [];
 
     /*
@@ -573,8 +573,7 @@ function make_toolbar(gobj)
         }]
     );
 
-    let right_items = [$layout_select].concat(
-        yui_graph_fold_items(gobj, toolbar_wide));
+    let right_items = [$layout_select];
 
     const $toolbar = yui_toolbar({}, [
         ['div', {class: 'yui-horizontal-toolbar-section left'}, left_items],
@@ -731,6 +730,11 @@ function build_cell_html(key, value, type, dark, matched)
  *  innerHTML string, so there is no other way to hang a
  *  handler on it.
  *
+ *  On the RIGHT of the header, and last, where the gobj tree
+ *  puts its own — with a spacer of the same width on the left
+ *  so the label stays centred on its own axis instead of
+ *  drifting by the width of a chip that only some cards have.
+ *
  *  A filled CHIP, the same one the gobj tree draws
  *  (`c_yui_gobj_tree_js.js`, render_toggle_html): background,
  *  border, radius, and `+N` / `−` rather than a triangle.  It
@@ -744,12 +748,12 @@ function build_cell_html(key, value, type, dark, matched)
  *  where it could carry no i18n key and would sit in English
  *  forever.  `+3` and `−` need no language.
  ************************************************************/
+const FOLD_SPACER = `<span style="width:24px; flex:0 0 auto;"></span>`;
+
 function fold_toggle_html(path, foldable, folded, branches, colors)
 {
     if(!foldable) {
-        /*  A spacer the width of the chip, so the label of a leaf card
-         *  stays on the same axis as the label of a foldable one.  */
-        return `<span style="width:24px; flex:0 0 auto;"></span>`;
+        return FOLD_SPACER;
     }
 
     let label = folded? ("+" + branches): "&#8722;";        /*  +N / −  */
@@ -940,7 +944,7 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id)
         display: flex;
         align-items: center;
         gap: 6px;
-    ">${fold_toggle_html(path, foldable, folded, pending_complex.length, colors)}<span style="flex:1 1 auto; text-align:center;">${escapeHtml(label)}</span></div>
+    ">${FOLD_SPACER}<span style="flex:1 1 auto; text-align:center;">${escapeHtml(label)}</span>${fold_toggle_html(path, foldable, folded, pending_complex.length, colors)}</div>
     ${content_html}
 </div>`;