Add a dedicated Settings menu

macrovision.css

@@ -683,7 +683,7 @@ i.far {
     position: relative;
 }
 
-#popout-menu {
+.popout-menu {
     display: none;
     flex-direction: column;
     flex-wrap: wrap;
@@ -696,7 +696,7 @@ i.far {
     background: #111;
 }
 
-#popout-menu.visible {
+.popout-menu.visible {
     display: flex;
 }
 
@@ -926,3 +926,24 @@ button {
     color: #ddd;
     border-color: #666;
 }
+
+.settings-holder {
+    display: flex;
+    align-items: center;
+    padding: 10px 0px 10px;
+}
+
+.settings-holder.enabled {
+    background: green;
+    border-color: green;
+}
+
+.settings-holder.disabled {
+    background: gray;
+    border-color: gray;
+}
+
+.settings-name {
+    font-size: 200%;
+    margin-right: 16pt;
+}

macrovision.html

@@ -120,13 +120,21 @@
       </div>
     </div>
   </div>
-  <div id="popout-menu">
+  <div class="popout-menu" id="sidebar-menu">
 
+  </div>
+  <div class="popout-menu" id="settings-menu">
+    
   </div>
   <div id="menubar">
-    <button id="toggle-menu">
-      <i class="fas fa-bars"></i>
-    </button>
+    <span class="menubar-group">
+      <button id="toggle-menu">
+        <i class="fas fa-bars"></i>
+      </button>
+      <button id="toggle-settings">
+        <i class="fas fa-cogs"></i>
+      </button>
+    </span>
     <span class="menubar-group">
       <button id="copy-screenshot">
         <i class="fas fa-camera"></i>
@@ -162,44 +170,6 @@
         <div class="options-row">
           <button class="options-button" id="options-world-fit">Fit to entities</button>
         </div>
-        <div class="options-row">
-          <input type="checkbox" id="options-show-extra">
-          <label for="options-show-extra">Show extra options</label>
-        </div>
-        <div class="options-block options-block-optional">
-          <div class="options-row">
-            <input type="checkbox" id="options-world-autofit">
-            <label for="options-world-autofit">Auto-size world</label>
-          </div>
-          <div class="options-row">
-            <input type="checkbox" id="options-world-show-names">
-            <label for="options-world-show-names">Names over entities</label>
-          </div>
-          <div class="options-row">
-            <input type="checkbox" id="options-world-show-bottom-names" checked>
-            <label for="options-world-show-bottom-names">Names at bottom</label>
-          </div>
-          <div class="options-row">
-            <input type="checkbox" id="options-world-show-top-names" checked>
-            <label for="options-world-show-top-names">Arrows for very large entities</label>
-          </div>
-          <div class="options-row">
-            <input type="checkbox" id="options-world-show-height-bars">
-            <label for="options-world-show-height-bars">Height bars</label>
-          </div>
-          <div class="options-row">
-            <input type="checkbox" id="options-world-show-entity-glow">
-            <label for="options-world-show-entity-glow">Glowing edges</label>
-          </div>
-          <div class="options-row">
-            <input type="checkbox" id="options-world-show-bottom-cover">
-            <label for="options-world-show-bottom-cover">Opaque ground</label>
-          </div>
-          <div class="options-row">
-            <input type="checkbox" id="options-world-show-scale" checked>
-            <label for="options-world-show-scale">Scale</label>
-          </div>
-        </div>
       </div>
       <div class="options-label">
         Selection:

macrovision.js

@@ -1228,9 +1228,8 @@ function doHorizReposition(change) {
     });
 }
 
-function prepareMenu() {
-
-    const menubar = document.querySelector("#popout-menu");
+function prepareSidebar() {
+    const menubar = document.querySelector("#sidebar-menu");
 
     [
         {
@@ -1322,6 +1321,148 @@ function prepareMenu() {
         buttonHolder.appendChild(actionText);
         menubar.appendChild(buttonHolder);
     });
+}
+
+function toggleBodyClass(cls, setting) {
+    if (setting) {
+        document.body.classList.add(cls);
+    } else {
+        document.body.classList.remove(cls);
+    }
+}
+
+const settingsData = {
+    "auto-scale": {
+        name: "Auto-Size World",
+        desc: "Automatically zoom to fit the largest entity",
+        type: "toggle",
+        default: true,
+        set value(param) {
+            config.autofit = param;
+        }
+    },
+    "names": {
+        name: "Show Names",
+        desc: "Display names over entities",
+        type: "toggle",
+        default: true,
+        set value(param) {
+            toggleBodyClass("toggle-entity-name", param);
+        }
+    },
+    "bottom-names": {
+        name: "Bottom Names",
+        desc: "Display names at the bottom",
+        type: "toggle",
+        default: false,
+        set value(param) {
+            toggleBodyClass("toggle-bottom-name", param);
+        }
+    },
+    "top-names": {
+        name: "Show Arrows",
+        desc: "Point to entities that are much larger than the current view",
+        type: "toggle",
+        default: false,
+        set value(param) {
+            toggleBodyClass("toggle-top-name", param);
+        }
+    },
+    "height-bars": {
+        name: "Height Bars",
+        desc: "Draw dashed lines to the top of each entity",
+        type: "toggle",
+        default: true,
+        set value(param) {
+            toggleBodyClass("toggle-height-bars", param);
+        }
+    },
+    "glowing-entities": {
+        name: "Glowing Edges",
+        desc: "Makes all entities glow",
+        type: "toggle",
+        default: false,
+        set value(param) {
+            toggleBodyClass("toggle-entity-glow", param);
+        }
+    },
+    "solid-ground": {
+        name: "Solid Ground",
+        desc: "Draw solid ground at the y=0 line",
+        type: "toggle",
+        default: false,
+        set value(param) {
+            toggleBodyClass("toggle-bottom-cover", param);
+        }
+    },
+    "show-scale": {
+        name: "Show Scale",
+        desc: "Show the scale",
+        type: "toggle",
+        default: true,
+        set value(param) {
+            toggleBodyClass("toggle-scale", param);
+        }
+    },
+}
+
+function prepareSettings(userSettings) {
+    const menubar = document.querySelector("#settings-menu");
+
+    Object.entries(settingsData).forEach(([id, entry]) => {
+        const holder = document.createElement("label");
+        holder.classList.add("settings-holder");
+        
+        const input = document.createElement("input");
+        input.id = "setting-" + id;
+
+        const name = document.createElement("label");
+        name.innerText = entry.name;
+        name.classList.add("settings-name");
+        name.setAttribute("for", input.id);
+
+        const desc = document.createElement("label");
+        desc.innerText = entry.desc;
+        desc.classList.add("settings-desc");
+        desc.setAttribute("for", input.id);
+
+        if (entry.type == "toggle") {
+            input.type = "checkbox";
+
+            input.checked = userSettings[id] === undefined ? entry.default : userSettings[id];
+            
+            holder.setAttribute("for", input.id);
+
+            input.appendChild(name);
+            input.appendChild(desc);
+            holder.appendChild(input);
+            holder.appendChild(name);
+            holder.appendChild(desc);
+            menubar.appendChild(holder);
+
+            const update = () => {
+                if (input.checked) {
+                    holder.classList.add("enabled");
+                    holder.classList.remove("disabled");
+                } else {
+                    holder.classList.remove("enabled");
+                    holder.classList.add("disabled");
+                }
+                
+                entry.value = input.checked;
+            }
+            
+            update();
+
+            input.addEventListener("change", update);
+        }
+    })
+}
+
+function prepareMenu() {
+
+    prepareSidebar();
+    prepareSettings({});
 
     if (checkHelpDate()) {
         document.querySelector("#open-help").classList.add("highlighted");
@@ -1432,10 +1573,11 @@ document.addEventListener("DOMContentLoaded", () => {
         saveScreenshot();
     });
     document.querySelector("#toggle-menu").addEventListener("click", e => {
-        const popoutMenu = document.querySelector("#popout-menu");
+        const popoutMenu = document.querySelector("#sidebar-menu");
         if (popoutMenu.classList.contains("visible")) {
             popoutMenu.classList.remove("visible");
         } else {
+            document.querySelectorAll(".popout-menu").forEach(menu => menu.classList.remove("visible"));
             const rect = e.target.getBoundingClientRect();
             popoutMenu.classList.add("visible");
             popoutMenu.style.left = rect.x + rect.width + 10 + "px";
@@ -1444,14 +1586,39 @@ document.addEventListener("DOMContentLoaded", () => {
         e.stopPropagation();
     });
 
-    document.querySelector("#popout-menu").addEventListener("click", e => {
+    document.querySelector("#sidebar-menu").addEventListener("click", e => {
         e.stopPropagation();
     });
 
     document.addEventListener("click", e => {
-        document.querySelector("#popout-menu").classList.remove("visible");
+        document.querySelector("#sidebar-menu").classList.remove("visible");
     });
 
+
+    document.querySelector("#toggle-settings").addEventListener("click", e => {
+        const popoutMenu = document.querySelector("#settings-menu");
+        if (popoutMenu.classList.contains("visible")) {
+            popoutMenu.classList.remove("visible");
+        } else {
+            document.querySelectorAll(".popout-menu").forEach(menu => menu.classList.remove("visible"));
+            const rect = e.target.getBoundingClientRect();
+            popoutMenu.classList.add("visible");
+            popoutMenu.style.left = rect.x + rect.width + 10 + "px";
+            popoutMenu.style.top = rect.y + rect.height + 10 + "px";
+        }
+        e.stopPropagation();
+    });
+
+    document.querySelector("#settings-menu").addEventListener("click", e => {
+        e.stopPropagation();
+    });
+
+    document.addEventListener("click", e => {
+        document.querySelector("#settings-menu").classList.remove("visible");
+    });
+
+
+
     window.addEventListener("unload", () => saveScene("autosave"));
     document.querySelector("#options-selected-entity").addEventListener("input", e => {
         if (e.target.value == "None") {
@@ -1478,38 +1645,6 @@ document.addEventListener("DOMContentLoaded", () => {
 
     document.querySelector("#menu-fullscreen").addEventListener("click", toggleFullScreen);
 
-    document.querySelector("#options-show-extra").addEventListener("input", e => {
-        document.body.classList[e.target.checked ? "add" : "remove"]("show-extra-options");
-    });
-
-    document.querySelector("#options-world-show-names").addEventListener("input", e => {
-        document.body.classList[e.target.checked ? "add" : "remove"]("toggle-entity-name");
-    });
-
-    document.querySelector("#options-world-show-bottom-names").addEventListener("input", e => {
-        document.body.classList[e.target.checked ? "add" : "remove"]("toggle-bottom-name");
-    });
-
-    document.querySelector("#options-world-show-top-names").addEventListener("input", e => {
-        document.body.classList[e.target.checked ? "add" : "remove"]("toggle-top-name");
-    });
-
-    document.querySelector("#options-world-show-height-bars").addEventListener("input", e => {
-        document.body.classList[e.target.checked ? "add" : "remove"]("toggle-height-bars");
-    });
-
-    document.querySelector("#options-world-show-entity-glow").addEventListener("input", e => {
-        document.body.classList[e.target.checked ? "add" : "remove"]("toggle-entity-glow");
-    });
-
-    document.querySelector("#options-world-show-bottom-cover").addEventListener("input", e => {
-        document.body.classList[e.target.checked ? "add" : "remove"]("toggle-bottom-cover");
-    });
-
-    document.querySelector("#options-world-show-scale").addEventListener("input", e => {
-        document.body.classList[e.target.checked ? "add" : "remove"]("toggle-scale");
-    });
-
     document.querySelector("#options-order-forward").addEventListener("click", e => {
         if (selected) {
             entities[selected.dataset.key].priority += 1;
@@ -1832,15 +1967,6 @@ document.addEventListener("DOMContentLoaded", () => {
 
     document.querySelector("#options-world-fit").addEventListener("click", () => fitWorld(true));
 
-    document.querySelector("#options-world-autofit").addEventListener("input", e => {
-        config.autoFit = e.target.checked;
-
-
-        if (config.autoFit) {
-            fitWorld();
-        }
-    });
-
     document.addEventListener("keydown", e => {
         if (e.key == "Delete") {
             if (selected) {
@@ -2184,6 +2310,7 @@ function fitWorld(manual = false, factor = 1.1) {
         altHeld = false;
 }
 
+// TODO why am I doing this
 function updateWorldHeight() {
     const unit = document.querySelector("#options-height-unit").value;
     const value = Math.max(0.000000001, document.querySelector("#options-height-value").value);