Add an option to automatically set the world height

macrovision.css

@@ -192,11 +192,25 @@ body.toggle-entity-name .entity-name {
     font-size: 150%;
 }
 
+.options-row label {
+    flex: 1;
+    width: 100%;
+    font-size: 150%;
+}
+
 body #test-canvas {
     position: fixed;
     top: 100vh;
 }
 
+.switch {
+    height: 24pt;
+}
+
+.switch input {
+    transform: scale(2);
+}
+
 .bottom-name {
     display: none;
     text-align: center;

macrovision.html

@@ -49,6 +49,12 @@
         <div class="options-row">
           <button class="options-button" id="options-world-fit">Fit to entities</button>
         </div>
+        <div class="options-row">
+          <label class="switch">
+            <input type="checkbox" id="options-world-autofit">
+            <span class="switch-label">Auto-size world</span>
+          </label>
+        </div>
       </span>
       <div class="options-header">Entity options</div>
       <select class="menu-item" id="entity-view"></select>

macrovision.js

@@ -29,7 +29,8 @@ const unitChoices = {
 const config = {
     height: math.unit(1500, "meters"),
     minLineSize: 50,
-    maxLineSize: 250
+    maxLineSize: 250,
+    autoFit: false
 }
 
 const availableEntities = {
@@ -325,6 +326,10 @@ function configEntityOptions(entity, view) {
 
     scaleInput.addEventListener("input", e => {
         entity.scale = e.target.value;
+
+        if (config.autoFit) {
+            fitWorld();
+        }
         updateSizes();
         updateEntityOptions(entity, view);
         updateViewOptions(entity, view);
@@ -408,6 +413,10 @@ function configViewOptions(entity, view) {
 
         input.addEventListener("input", e => {
             entity.views[view][key] = math.unit(input.value, select.value);
+
+            if (config.autoFit) {
+                fitWorld();
+            }
             updateSizes();
             updateEntityOptions(entity, view);
             updateViewOptions(entity, view, key);
@@ -415,6 +424,10 @@ function configViewOptions(entity, view) {
 
         select.addEventListener("input", e => {
             entity.views[view][key] = math.unit(input.value, select.value);
+
+            if (config.autoFit) {
+                fitWorld();
+            }
             updateSizes();
             updateEntityOptions(entity, view);
             updateViewOptions(entity, view, key);
@@ -554,6 +567,10 @@ function displayEntity(entity, view, x, y) {
     entityIndex += 1;
 
     updateEntityElement(entity, box);
+
+    if (config.autoFit) {
+        fitWorld();
+    }
 }
 
 document.addEventListener("DOMContentLoaded", () => {
@@ -627,6 +644,15 @@ document.addEventListener("DOMContentLoaded", () => {
 
     document.querySelector("#options-world-fit").addEventListener("click", fitWorld);
 
+    document.querySelector("#options-world-autofit").addEventListener("input", e => {
+        config.autoFit = e.target.value;
+        
+
+        if (config.autoFit) {
+            fitWorld();
+        }
+    });
+
     prepareEntities();
 });
 
@@ -651,7 +677,7 @@ function prepareEntities() {
         button.innerText = "Create " + category;
         button.addEventListener("click", e => {
             const newEntity = entityList[select.value].constructor()
-            displayEntity(newEntity, newEntity.defaultView, 0.5, 0.5);
+            displayEntity(newEntity, newEntity.defaultView, 0.5, 1);
         });
 
         holder.appendChild(select);