Add an option to automatically pick units when resizing the world

macrovision.js

@@ -571,8 +571,51 @@ function updateRatios() {
     
 }
 
-function updateSizes(dirtyOnly = false) {
+function pickUnit() {
+    if (!config.autoUnits) {
+        return;
+    }
+
+    let type = null;
+    let category = null;
+    
+    const heightSelect = document.querySelector("#options-height-unit");
+
+    currentUnit = heightSelect.value;
 
+    Object.keys(unitChoices).forEach(unitType => {
+        Object.keys(unitChoices[unitType]).forEach(unitCategory => {
+            if (unitChoices[unitType][unitCategory].includes(currentUnit)) {
+                type = unitType;
+                category = unitCategory;
+            }
+        })
+    })
+
+    // This should only happen if the unit selector isn't set up yet.
+    // It doesn't really matter what goes into it.
+    if (type === null || category === null) {
+        return "meters"
+    }
+
+    const choices = unitChoices[type][category].map(unit => {
+        let value = config.height.toNumber(unit);
+        if (value < 1) {
+            value = 1 / value / value;
+        }
+        return [unit, value]
+    })
+
+    console.log(choices)
+
+    heightSelect.value = choices.sort((a, b) => {
+        return a[1] - b[1]
+    })[0][0]
+
+    selectNewUnit();
+}
+
+function updateSizes(dirtyOnly = false) {
     updateRatios();
 
     if (config.lockYAxis) {
@@ -2214,6 +2257,18 @@ const settingsData = {
             checkFitWorld();
         }
     },
+    "auto-units": {
+        name: "Auto-Select Units",
+        desc: "Automatically switch units when zooming in and out",
+        type: "toggle",
+        default: false,
+        get value() {
+            return config.autoUnits;
+        },
+        set value(param) {
+            config.autoUnits = param;
+        }
+    },
     "show-vertical-scale": {
         name: "Show Vertical Scale",
         desc: "Draw vertical scale marks",
@@ -2659,6 +2714,16 @@ function doSize() {
     }
 }
 
+function selectNewUnit() {
+    const unitSelector = document.querySelector("#options-height-unit");
+    checkFitWorld();
+    const scaleInput = document.querySelector("#options-height-value");
+    const newVal = math.unit(scaleInput.value, unitSelector.dataset.oldUnit).toNumber(unitSelector.value);
+    setNumericInput(scaleInput, newVal);
+    updateWorldHeight();
+    unitSelector.dataset.oldUnit = unitSelector.value;
+}
+
 document.addEventListener("DOMContentLoaded", () => {
     prepareMenu();
     prepareEntities();
@@ -2843,14 +2908,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
     });
 
-    unitSelector.addEventListener("input", e => {
-        checkFitWorld();
-        const scaleInput = document.querySelector("#options-height-value");
-        const newVal = math.unit(scaleInput.value, unitSelector.dataset.oldUnit).toNumber(e.target.value);
-        setNumericInput(scaleInput, newVal);
-        updateWorldHeight();
-        unitSelector.dataset.oldUnit = unitSelector.value;
-    });
+    unitSelector.addEventListener("input", selectNewUnit);
 
     param = new URL(window.location.href).searchParams.get("scene");
 
@@ -4093,10 +4151,10 @@ function updateWorldHeight() {
     const newHeight = Math.max(0.000000001, value);
     const oldHeight = config.height;
 
-    setWorldHeight(oldHeight, math.unit(newHeight, unit));
+    setWorldHeight(oldHeight, math.unit(newHeight, unit), true);
 }
 
-function setWorldHeight(oldHeight, newHeight) {
+function setWorldHeight(oldHeight, newHeight, keepUnit=false) {
     worldSizeDirty = true;
     config.height = newHeight.to(document.querySelector("#options-height-unit").value)
 
@@ -4116,6 +4174,10 @@ function setWorldHeight(oldHeight, newHeight) {
         element.dataset.y = newPosition.y;
     });
 
+    if (!keepUnit) {
+        pickUnit()
+    }
+
     updateSizes();
 }