Add controls to move the graph around

FeniXb3 · Jul 29, 2023 · 1dc2007 · 1dc2007
1 parent 726d964
commit 1dc2007
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 3 deletions.
diff --git a/public/Alakazam.js b/public/Alakazam.js
@@ -19,6 +19,12 @@ export class Alakazam {
         this.alertContainer = document.getElementById('alert-container');
         this.alertElement = document.getElementById('alert');
 
+        this.moveLeftButton = document.getElementById('move-left');
+        this.moveRightButton = document.getElementById('move-right');
+        this.moveUpButton = document.getElementById('move-up');
+        this.moveDownButton = document.getElementById('move-down');
+        // this.moveButtonDownInterval
+
         this.serializeBase64Button = document.getElementById('serialize-base64');
         this.deserializeBase64Button = document.getElementById('deserialize-base64');
         this.serializeJsonButton = document.getElementById('serialize-json');
@@ -384,6 +390,17 @@ export class Alakazam {
         this.draw();
     }
 
+    moveGraph = (byX, byY) => {
+        const multiplier = 10;
+        let viewBoxData = document.querySelector('#theGraph').getAttribute('viewBox');
+
+        let values = viewBoxData.split(' ').map(v => parseFloat(v))
+        //   alert(values.join(' '))
+        values[0] += byX * multiplier;
+        values[1] += byY * multiplier;
+        document.querySelector('#theGraph').setAttribute('viewBox',values.join(' '));
+    }
+
     setupEventListeners = () => {
         this.connectServerButton.addEventListener('click', () => {
             const address = `wss://minefield.enklawa-tworcza.pl:1338`; 
@@ -492,6 +509,47 @@ export class Alakazam {
             document.querySelector("#theGraph").setAttribute("width", this.value);
         }
 
+        this.moveLeftButton.addEventListener('mousedown', () => {
+            clearInterval(this.moveButtonDownInterval)
+            this.moveButtonDownInterval = setInterval(() => {
+                this.moveGraph(-1, 0);
+            }, 0);
+        });
+        this.moveLeftButton.addEventListener('mouseup', () => {
+            clearInterval(this.moveButtonDownInterval)
+        });
+
+        this.moveRightButton.addEventListener('mousedown', () => {
+            clearInterval(this.moveButtonDownInterval)
+            this.moveButtonDownInterval = setInterval(() => {
+                this.moveGraph(1, 0);
+            }, 0);
+        });
+        this.moveRightButton.addEventListener('mouseup', () => {
+            clearInterval(this.moveButtonDownInterval)
+        });
+
+        this.moveUpButton.addEventListener('mousedown', () => {
+            clearInterval(this.moveButtonDownInterval)
+            this.moveButtonDownInterval = setInterval(() => {
+                this.moveGraph(0, -1);
+            }, 0);
+        });
+        this.moveUpButton.addEventListener('mouseup', () => {
+            clearInterval(this.moveButtonDownInterval)
+        });
+
+        this.moveDownButton.addEventListener('mousedown', () => {
+            clearInterval(this.moveButtonDownInterval)
+            this.moveButtonDownInterval = setInterval(() => {
+                this.moveGraph(0, 1);
+            }, 0);
+        });
+        this.moveDownButton.addEventListener('mouseup', () => {
+            clearInterval(this.moveButtonDownInterval)
+        });
+
+
         document.addEventListener('keyup', event => {
             if (event.key == "Enter" && event.getModifierState('Control')) {
                 this.flowchart.alakazam();
@@ -602,6 +660,8 @@ export class Alakazam {
         });
 
         this.runButton.addEventListener('click', e => {
+            clearInterval(this.moveButtonDownInterval)
+            document.querySelector('#theGraph').setAttribute('viewBox', this.startingViewBoxData);
             this.flowchart.alakazam();
         });
     }
@@ -663,6 +723,7 @@ export class Alakazam {
         }
 
         document.querySelector("#theGraph").setAttribute("width", this.zoomSlider.value);
+        this.startingViewBoxData = document.querySelector('#theGraph').getAttribute('viewBox');
     }
 
     // https://stackoverflow.com/questions/4777077/removing-elements-by-class-name

diff --git a/public/index.html b/public/index.html
@@ -41,7 +41,6 @@
                 <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>
 
@@ -55,6 +54,26 @@
                 <input type="text" id="execution-input" name="execution-input" class="hidden" disabled >
             </div>
         </div>
+        <div class="row h-25">
+            <div id="graph-controls" class="col-md-2">
+                <div class="row">
+                    <input type="range" min="111" max="10000" value="111" class="slider" id="zoom-range">
+                </div>
+
+                <div class="row">
+                    <div class="row">
+                        <button id="move-up">⬆</button>
+                    </div>
+                    <div class="row">
+                        <button class="col" id="move-left">⬅</button>
+                        <button class="col" id="move-right">➡</button>
+                    </div>
+                    <div class="row">
+                        <button id="move-down">⬇</button>
+                    </div>
+                </div>
+            </div>
+        </div>
 
         <div class="row align-items-end">
             <div id="flowchart-code-preview"></div>

diff --git a/public/style.css b/public/style.css
@@ -34,7 +34,14 @@ body {
     max-width: 700px;
     /* height: 10vh; */
     margin: auto;
-    overflow: scroll;
+    overflow: hidden;
+    /* position: relative; */
+}
+
+#graph-controls {
+    /* position: absolute; 
+    bottom: 5px;
+    left: 5px; */
 }
 
 /* #output-container::-webkit-scrollbar {
@@ -53,7 +60,7 @@ body {
     margin-right: auto; */
     /* height: 100%; */
     /* width: 2000px; */
-    overflow: scroll;
+    overflow: hidden;
 }
 
 .hidden {