Add basic manual zoom slider

FeniXb3 · Jul 27, 2023 · 0855303 · 0855303
1 parent e452901
commit 0855303
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git 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
@@ -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>