Add draggable sliders for world and entity scale

macrovision.css

@@ -173,6 +173,7 @@ body.toggle-entity-name .entity-name {
 }
 
 #world {
+    position: relative;
     flex: 9 0 85vw;
     min-height: 85vh;
     max-height: 85vh;
@@ -371,4 +372,38 @@ a {
 
 #options-attribution-source {
     text-align: center;
+}
+
+.floating-slider {
+    position: absolute;
+    z-index: 1000;
+    width: 250px;
+    height: 50px;
+}
+
+#slider-scale {
+    top: 1%;
+    left: 5%;
+}
+
+#slider-scale:before {
+    content: "World scale";
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 0%);
+    font-size: 20px;
+}
+
+#slider-entity-scale {
+    display: none;
+    top: 1%;
+    right: 5%;
+}
+
+#slider-entity-scale:before {
+    content: "Entity scale";
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 0%);
+    font-size: 20px;
 }

macrovision.html

@@ -150,6 +150,8 @@
       </span>
     </div>
     <div id="world">
+      <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">
 
       </div>

macrovision.js

@@ -16,6 +16,12 @@ let entityX;
 let canvasWidth;
 let canvasHeight;
 
+let dragScale = 1;
+let dragScaleHandle = null;
+
+let dragEntityScale = 1;
+let dragEntityScaleHandle = null;
+
 const unitChoices = {
     length: [
         "meters",
@@ -358,6 +364,7 @@ function deselect() {
     clearViewList();
     clearEntityOptions();
     clearViewOptions();
+    document.querySelector("#slider-entity-scale").style.display = "none";
 }
 
 function select(target) {
@@ -372,6 +379,7 @@ function select(target) {
     configViewList(selectedEntity, selectedEntity.view);
     configEntityOptions(selectedEntity, selectedEntity.view);
     configViewOptions(selectedEntity, selectedEntity.view);
+    document.querySelector("#slider-entity-scale").style.display = "block";
 }
 
 function configViewList(entity, selectedView) {
@@ -859,9 +867,67 @@ window.onfocus = function () {
     window.dispatchEvent(new Event("keydown"));
 }
 
+function doSliderScale() {
+    setWorldHeight(config.height, math.multiply(config.height, (9 + sliderScale) / 10));
+}
+
+function doSliderEntityScale() {
+    if (selected) {
+        console.log(selected)
+        entities[selected.dataset.key].scale *= (9 + sliderEntityScale) / 10;
+        updateSizes();
+    }
+}
+
 document.addEventListener("DOMContentLoaded", () => {
     prepareEntities();
 
+    document.querySelector("#slider-scale").addEventListener("mousedown", e => {
+        dragScaleHandle = setInterval(doSliderScale, 50);
+    });
+
+    document.querySelector("#slider-scale").addEventListener("touchstart", e => {
+        dragScaleHandle = setInterval(doSliderScale, 50);
+    });
+
+    document.querySelector("#slider-scale").addEventListener("input", e => {
+        const val = Number(e.target.value);
+        if (val < 1) {
+            sliderScale = (val + 1) / 2;
+        } else {
+            sliderScale = val;
+        }
+    });
+
+    document.querySelector("#slider-scale").addEventListener("change", e => {
+        clearInterval(dragScaleHandle);
+        dragScaleHandle = null;
+        e.target.value = 1;
+    });
+
+    document.querySelector("#slider-entity-scale").addEventListener("mousedown", e => {
+        dragEntityScaleHandle = setInterval(doSliderEntityScale, 50);
+    });
+
+    document.querySelector("#slider-entity-scale").addEventListener("touchstart", e => {
+        dragEntityScaleHandle = setInterval(doSliderEntityScale, 50);
+    });
+
+    document.querySelector("#slider-entity-scale").addEventListener("input", e => {
+        const val = Number(e.target.value);
+        if (val < 1) {
+            sliderEntityScale = (val + 1) / 2;
+        } else {
+            sliderEntityScale = val;
+        }
+    });
+
+    document.querySelector("#slider-entity-scale").addEventListener("change", e => {
+        clearInterval(dragEntityScaleHandle);
+        dragEntityScaleHandle = null;
+        e.target.value = 1;
+    });
+
     const sceneChoices = document.querySelector("#scene-choices");
 
     Object.entries(scenes).forEach(([id, scene]) => {