@yuneta/gobj-ui 7.5.7 → 7.6.1

package/dist/gobj-ui.cjs.js

@@ -54062,6 +54062,25 @@ async function graph_center(gobj) {
 async function graph_fitview(gobj) {
 	await gobj.priv.graph.fitView();
 }
+var MIN_READABLE_ZOOM = .5;
+/************************************************************
+*  Fit the graph in the viewport, but never zoom out past the point
+*  where nothing on a card can be read.
+*
+*  A wide fan — a schema treedb is one topic and a hundred columns —
+*  fits at about 0.2, which is a hairline strip: technically the whole
+*  graph, and worth nothing. Stopping at a legible zoom and centring
+*  shows a part you can actually read, and the minimap (which such a
+*  graph always has) says where that part is.
+************************************************************/
+async function graph_fit_readable(gobj) {
+	let graph = gobj.priv.graph;
+	await graph.fitView();
+	if (graph.getZoom() < MIN_READABLE_ZOOM) {
+		await graph.zoomTo(MIN_READABLE_ZOOM);
+		await graph.fitCenter();
+	}
+}
 /************************************************************
 *  Focus the graph on one topic: highlight (amber 'active' state)
 *  every node of that topic and centre the viewport on them. An
@@ -55732,18 +55751,19 @@ function geometry_has_position(g) {
 ************************************************************/
 function auto_layout(gobj) {
 	let priv = gobj.priv;
-	if (priv._layout_asked) return;
-	if (priv._nodes_total > 0 && priv._nodes_placed * 2 > priv._nodes_total) return;
-	if (!priv.graph) return;
+	if (priv._layout_asked) return false;
+	if (priv._nodes_total > 0 && priv._nodes_placed * 2 > priv._nodes_total) return false;
+	if (!priv.graph) return false;
 	let name = "dagre";
 	(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "layout", name);
 	try {
 		priv.graph.setLayout(_layouts[name]);
 	} catch (e) {
 		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: cannot set the '${name}' layout: ${e}`);
-		return;
+		return false;
 	}
 	(0, _yuneta_gobj_js.gobj_publish_event)(gobj, "EV_LAYOUT_AUTOSET", { layout: name });
+	return true;
 }
 /************************************************************
 *  Show or hide the minimap, deciding by the SIZE of the graph.
@@ -56602,12 +56622,16 @@ function ac_load_data(gobj, event, kw, src) {
 		graph_draw(gobj).then(() => {
 			create_links(gobj);
 			graph_draw(gobj).then(() => {
+				let auto_laid = false;
 				try {
-					auto_layout(gobj);
+					auto_laid = auto_layout(gobj);
 				} catch (e) {
 					(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: auto_layout failed: ${e}`);
 				}
 				graph_layout(gobj).then(() => {
+					if (auto_laid) graph_fit_readable(gobj).catch((e) => {
+						(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: cannot fit the graph: ${e}`);
+					});
 					if (priv.edit_mode) graph_add_plugin(gobj, "history");
 					else graph_remove_plugin(gobj, "history");
 					if (priv._pending_focus_topic !== null) {

package/dist/gobj-ui.es.js

@@ -54049,6 +54049,25 @@ async function graph_center(gobj) {
 async function graph_fitview(gobj) {
 	await gobj.priv.graph.fitView();
 }
+var MIN_READABLE_ZOOM = .5;
+/************************************************************
+*  Fit the graph in the viewport, but never zoom out past the point
+*  where nothing on a card can be read.
+*
+*  A wide fan — a schema treedb is one topic and a hundred columns —
+*  fits at about 0.2, which is a hairline strip: technically the whole
+*  graph, and worth nothing. Stopping at a legible zoom and centring
+*  shows a part you can actually read, and the minimap (which such a
+*  graph always has) says where that part is.
+************************************************************/
+async function graph_fit_readable(gobj) {
+	let graph = gobj.priv.graph;
+	await graph.fitView();
+	if (graph.getZoom() < MIN_READABLE_ZOOM) {
+		await graph.zoomTo(MIN_READABLE_ZOOM);
+		await graph.fitCenter();
+	}
+}
 /************************************************************
 *  Focus the graph on one topic: highlight (amber 'active' state)
 *  every node of that topic and centre the viewport on them. An
@@ -55719,18 +55738,19 @@ function geometry_has_position(g) {
 ************************************************************/
 function auto_layout(gobj) {
 	let priv = gobj.priv;
-	if (priv._layout_asked) return;
-	if (priv._nodes_total > 0 && priv._nodes_placed * 2 > priv._nodes_total) return;
-	if (!priv.graph) return;
+	if (priv._layout_asked) return false;
+	if (priv._nodes_total > 0 && priv._nodes_placed * 2 > priv._nodes_total) return false;
+	if (!priv.graph) return false;
 	let name = "dagre";
 	gobj_write_attr(gobj, "layout", name);
 	try {
 		priv.graph.setLayout(_layouts[name]);
 	} catch (e) {
 		log_error(`${gobj_short_name(gobj)}: cannot set the '${name}' layout: ${e}`);
-		return;
+		return false;
 	}
 	gobj_publish_event(gobj, "EV_LAYOUT_AUTOSET", { layout: name });
+	return true;
 }
 /************************************************************
 *  Show or hide the minimap, deciding by the SIZE of the graph.
@@ -56589,12 +56609,16 @@ function ac_load_data(gobj, event, kw, src) {
 		graph_draw(gobj).then(() => {
 			create_links(gobj);
 			graph_draw(gobj).then(() => {
+				let auto_laid = false;
 				try {
-					auto_layout(gobj);
+					auto_laid = auto_layout(gobj);
 				} catch (e) {
 					log_error(`${gobj_short_name(gobj)}: auto_layout failed: ${e}`);
 				}
 				graph_layout(gobj).then(() => {
+					if (auto_laid) graph_fit_readable(gobj).catch((e) => {
+						log_error(`${gobj_short_name(gobj)}: cannot fit the graph: ${e}`);
+					});
 					if (priv.edit_mode) graph_add_plugin(gobj, "history");
 					else graph_remove_plugin(gobj, "history");
 					if (priv._pending_focus_topic !== null) {

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -2104,6 +2104,32 @@ async function graph_fitview(gobj)
     await graph.fitView();
 }
 
+/*  Below this the cards carry no readable text at all. */
+const MIN_READABLE_ZOOM = 0.5;
+
+/************************************************************
+ *  Fit the graph in the viewport, but never zoom out past the point
+ *  where nothing on a card can be read.
+ *
+ *  A wide fan — a schema treedb is one topic and a hundred columns —
+ *  fits at about 0.2, which is a hairline strip: technically the whole
+ *  graph, and worth nothing. Stopping at a legible zoom and centring
+ *  shows a part you can actually read, and the minimap (which such a
+ *  graph always has) says where that part is.
+ ************************************************************/
+async function graph_fit_readable(gobj)
+{
+    let priv = gobj.priv;
+    let graph = priv.graph;
+
+    await graph.fitView();
+
+    if(graph.getZoom() < MIN_READABLE_ZOOM) {
+        await graph.zoomTo(MIN_READABLE_ZOOM);
+        await graph.fitCenter();
+    }
+}
+
 /************************************************************
  *  Focus the graph on one topic: highlight (amber 'active' state)
  *  every node of that topic and centre the viewport on them. An
@@ -4544,7 +4570,7 @@ function auto_layout(gobj)
     let priv = gobj.priv;
 
     if(priv._layout_asked) {
-        return;         /*  the user picked one for this treedb  */
+        return false;   /*  the user picked one for this treedb  */
     }
     /*  MOST of the nodes, not one of them.
      *
@@ -4557,10 +4583,10 @@ function auto_layout(gobj)
      *  invented as readily as one a human chose, so a single stored
      *  coordinate proves nothing. One leftover is not an arrangement. */
     if(priv._nodes_total > 0 && priv._nodes_placed * 2 > priv._nodes_total) {
-        return;         /*  somebody arranged it: leave it alone  */
+        return false;   /*  somebody arranged it: leave it alone  */
     }
     if(!priv.graph) {
-        return;
+        return false;
     }
 
     let name = "dagre";
@@ -4569,11 +4595,12 @@ function auto_layout(gobj)
         priv.graph.setLayout(_layouts[name]);
     } catch(e) {
         log_error(`${gobj_short_name(gobj)}: cannot set the '${name}' layout: ${e}`);
-        return;
+        return false;
     }
     /*  The toolbar's select was filled before the data arrived, so it is
      *  still showing `manual`: tell it what the graph is actually doing. */
     gobj_publish_event(gobj, "EV_LAYOUT_AUTOSET", {layout: name});
+    return true;
 }
 
 /************************************************************
@@ -5871,12 +5898,24 @@ function ac_load_data(gobj, event, kw, src)
                 /*  Before the layout runs, and only now: whether anybody has
                  *  ever placed a node of this treedb is not known until its
                  *  records and __graphs__ are in. */
+                let auto_laid = false;
                 try {
-                    auto_layout(gobj);
+                    auto_laid = auto_layout(gobj);
                 } catch(e) {
                     log_error(`${gobj_short_name(gobj)}: auto_layout failed: ${e}`);
                 }
                 graph_layout(gobj).then(() => {
+                    /*  A graph laid out by us opens WHOLE. dagre spreads a
+                     *  126-node treedb over some 19000px, and the camera is
+                     *  wherever it was: without this you get eight cards in
+                     *  the top-left corner and no reason to think there are
+                     *  118 more. Only when WE laid it out — a saved
+                     *  arrangement includes where its owner was looking. */
+                    if(auto_laid) {
+                        graph_fit_readable(gobj).catch((e) => {
+                            log_error(`${gobj_short_name(gobj)}: cannot fit the graph: ${e}`);
+                        });
+                    }
                     if(priv.edit_mode) {
                         graph_add_plugin(gobj, "history");
                     } else {