dashboard: don't reset map after resize

1 files changed, 16 insertions, 10 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index b2a5255..8fbbe96 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -996,25 +996,33 @@ function show(root, children) {
 }
 
 let lastShape = "";
-// The whole map laid out again with the next render (the window or the box resized),
-// not only nodes new to it.
+// The whole map laid out with the next render, not only nodes new to it: at first.
 let relayout = true;
-function layoutAgain() {
-  relayout = true;
-  lastShape = "";
-}
+// The map's size at the last render.
+let lastSize = null;
 function renderGraph() {
   if (document.getElementById("map").classList.contains("collapsed")) return;
   const root = document.getElementById("graph");
   const width = root.clientWidth || 800, height = root.clientHeight || 560;
   root.setAttribute("viewBox", "0 0 " + width + " " + height);
+  // Resized (the window, a box): the map as it was, about its middle, scaled by as much
+  // as the box's area (so resized back, it is as before), not laid out anew; within the
+  // box.
+  if (lastSize && (lastSize.width !== width || lastSize.height !== height)) {
+    const k = Math.sqrt(width / lastSize.width * height / lastSize.height);
+    for (const p of positions.values()) {
+      p.x = Math.min(width - 40, Math.max(40, width / 2 + (p.x - lastSize.width / 2) * k));
+      p.y = Math.min(height - 20, Math.max(20, height / 2 + (p.y - lastSize.height / 2) * k));
+    }
+  }
+  lastSize = { width, height };
   const nodes = Object.keys(state.graph.members).sort();
   const { intended, measured } = edges();
   renderLegend(measured);
   const pairs = lengths(intended, measured, nodes.length, width, height);
   // Laid out when who's there or who links to whom changed: only the nodes new to the
   // map, the others staying where they are (links that came, after the first reports,
-  // don't move them); all of them at first, and when the map was resized.
+  // don't move them); all of them at first.
   const shape = nodes.join(",") + "|" + [...intended.keys(), ...measured.keys()].sort().join(",");
   if (shape !== lastShape) {
     for (const id of [...positions.keys()]) {
@@ -2558,7 +2566,7 @@ connection.addEventListener("click", () => {
 });
 // Ages count on between events; nothing else changes without one.
 setInterval(() => { if (live) render(true); }, 1000);
-window.addEventListener("resize", () => { layoutAgain(); render(); });
+window.addEventListener("resize", () => render());
 
 // --- Sizes: the space between boxes dragged to resize them, double-clicked to reset;
 // kept in this browser ---
@@ -2679,7 +2687,6 @@ const resized = () => {
   if (!resizing) return;
   resizing = null;
   main.classList.remove("resize-columns", "resize-rows");
-  layoutAgain();
   render();
 };
 main.addEventListener("pointerup", resized);
@@ -2723,7 +2730,6 @@ main.addEventListener("dblclick", event => {
   if (!gap) return;
   sizes[gap] = null;
   applySizes();
-  layoutAgain();
   render();
 });
 </script>