From 08553032aad33910ef8d4a27ff91cafc31ff3e92 Mon Sep 17 00:00:00 2001
From: Konrad Gadzina <konrad@makegames.today>
Date: Fri, 28 Jul 2023 01:13:05 +0200
Subject: [PATCH] Add basic manual zoom slider

---
 public/Alakazam.js | 8 +++++++-
 public/index.html  | 1 +
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/public/Alakazam.js b/public/Alakazam.js
index 7e8a277..0d90da0 100644
--- a/public/Alakazam.js
+++ b/public/Alakazam.js
@@ -15,6 +15,7 @@ export class Alakazam {
         this.output = document.getElementById('output');
         this.outputContainer = document.getElementById("output-container");
         this.previewContainer = document.getElementById('flowchart-code-preview');
+        this.zoomSlider = document.querySelector("#zoom-range");
         this.alertContainer = document.getElementById('alert-container');
         this.alertElement = document.getElementById('alert');
 
@@ -166,7 +167,6 @@ export class Alakazam {
             modal.show(titleText, data, '', this.nodeAddingModalCallback);
         });
         
-        
         this.centerView();
     }
 
@@ -488,6 +488,10 @@ export class Alakazam {
             this.setMenuStartingPosition(this.nodeMenu, this.currentNodeElement);
         });
 
+        this.zoomSlider.oninput = function() {
+            document.querySelector("#theGraph").setAttribute("width", this.value);
+        }
+
         document.addEventListener('keyup', event => {
             if (event.key == "Enter" && event.getModifierState('Control')) {
                 this.flowchart.alakazam();
@@ -657,6 +661,8 @@ export class Alakazam {
             }
             this.ws.send(JSON.stringify(broadcastData));
         }
+
+        document.querySelector("#theGraph").setAttribute("width", this.zoomSlider.value);
     }
 
     // https://stackoverflow.com/questions/4777077/removing-elements-by-class-name
diff --git a/public/index.html b/public/index.html
index 3e997cf..5a3bef4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -41,6 +41,7 @@
                 <button id="reset" class="btn btn-lg btn-danger"><i class="fa-solid fa-window-restore"></i> Reset</button>
                 <button id="run" class="btn btn-lg btn-success"><i class="fa-solid fa-wand-magic-sparkles"></i>
                     Alakazam!</button>
+                <input type="range" min="111" max="10000" value="111" class="slider" id="zoom-range">
             </div>
         </div>