Add scroll buttons on the sides of the world

macrovision.css

@@ -696,4 +696,26 @@ i.far {
 
 #spawners-categories {
     font-size: 24pt;
+}
+
+.scroll-button {
+    position: absolute;
+    height: 100%;
+    width: 50px;
+    font-size: 40px;
+    background: #ffffff33;
+    border: 0px;
+    z-index: 1;
+}
+
+.scroll-button:active {
+    background: #ffffff66;
+}
+
+#scroll-left {
+    left: 0%;
+}
+
+#scroll-right {
+    right: 0%;
 }

macrovision.html

@@ -104,12 +104,6 @@
           <select class="options-field-unit" id="options-height-unit">
           </select>
         </div>
-        <div class="options-row">
-          <button class="options-button" id="options-world-scroll-left">Scroll left</button>
-        </div>
-        <div class="options-row">
-          <button class="options-button" id="options-world-scroll-right">Scroll right</button>
-        </div>
         <div class="options-row">
           <button class="options-button" id="options-world-fit">Fit to entities</button>
         </div>
@@ -217,6 +211,13 @@
       </span>
     </div>
     <div id="world">
+      <button class="scroll-button" id="scroll-left">
+        <i class="fas fa-arrow-left"></i>
+      </button>
+      <button class="scroll-button" id="scroll-right">
+        <i class="fas fa-arrow-right"></i>
+        
+      </button>
       <input type="range" step="0.001" min="0" max="2" value="1" class="floating-slider" id="slider-scale"/>
       <input type="range" step="0.001" min="0" max="2" value="1" class="floating-slider" id="slider-entity-scale"/>
       <div id="entities">

macrovision.js

@@ -22,6 +22,9 @@ let dragScaleHandle = null;
 let dragEntityScale = 1;
 let dragEntityScaleHandle = null;
 
+let scrollDirection = 0;
+let scrollHandle = null;
+
 let worldSizeDirty = false;
 
 
@@ -1302,6 +1305,14 @@ function setHelpDate() {
     }
 }
 
+function doScroll() {
+    document.querySelectorAll(".entity-box").forEach(element => {
+        element.dataset.x = parseFloat(element.dataset.x) + scrollDirection/180;
+    });
+    updateSizes();
+    scrollDirection *= 1.05;
+}
+
 document.addEventListener("DOMContentLoaded", () => {
     prepareMenu();
     prepareEntities();
@@ -1609,18 +1620,19 @@ document.addEventListener("DOMContentLoaded", () => {
         arrangeEntities(order);
     });
 
-    document.querySelector("#options-world-scroll-left").addEventListener("click", () => {
-        document.querySelectorAll(".entity-box").forEach(element => {
-            element.dataset.x = parseFloat(element.dataset.x) + 0.1;
-        });
-        updateSizes();
+    document.querySelector("#scroll-left").addEventListener("mousedown", () => {
+        scrollDirection = -1;
+        scrollHandle = setInterval(doScroll, 1000/20);
     });
 
-    document.querySelector("#options-world-scroll-right").addEventListener("click", () => {
-        document.querySelectorAll(".entity-box").forEach(element => {
-            element.dataset.x = parseFloat(element.dataset.x) - 0.1;
-        });
-        updateSizes();
+    document.querySelector("#scroll-right").addEventListener("mousedown", () => {
+        scrollDirection = 1;
+        scrollHandle = setInterval(doScroll, 1000/20);
+    });
+
+    document.addEventListener("mouseup", () => {
+        clearInterval(scrollHandle);
+        scrollHandle = null;
     });
 
     document.querySelector("#options-world-fit").addEventListener("click", () => fitWorld(true));