From 3feb38cee33bd5ed6df97ec0eacf677a88f6add9 Mon Sep 17 00:00:00 2001
From: Konrad Gadzina <konrad@makegames.today>
Date: Sat, 29 Jul 2023 20:48:21 +0200
Subject: [PATCH] Reset zoom on draw to make the widest element visible

---
 public/Alakazam.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/public/Alakazam.js b/public/Alakazam.js
index 2c7169d..427fab1 100644
--- a/public/Alakazam.js
+++ b/public/Alakazam.js
@@ -724,6 +724,23 @@ export class Alakazam {
             }
             this.ws.send(JSON.stringify(broadcastData));
         }
+        
+        document.querySelector("#theGraph").setAttribute("width", this.zoomSlider.value);
+        const nodeElements = document.querySelectorAll(`.node`);
+        let maximumWidth = 0;
+        nodeElements.forEach((element) => {
+            const width = element.getBoundingClientRect().width;
+            if (width > maximumWidth) {
+                maximumWidth = width;
+            }
+        });
+
+        const graphWidth = document.querySelector('#theGraph').getAttribute('width');
+        const outputContainerWidth = document.querySelector("#output-container").clientWidth ;
+        const desiredElementhWidth = outputContainerWidth * 0.9;
+
+        const desiredGraphWidth = (desiredElementhWidth / maximumWidth) * graphWidth;
+        this.zoomSlider.value = desiredGraphWidth;
 
         document.querySelector("#theGraph").setAttribute("width", this.zoomSlider.value);
         this.startingViewBoxData = document.querySelector('#theGraph').getAttribute('viewBox');