Add a button to center the current entity; disable entity-specific buttons without a selection

macrovision.css

@@ -673,6 +673,10 @@ i.far {
     background: #ffffff66;
 }
 
+.scroll-button:disabled {
+    background: #ffffff11;
+}
+
 #zoom-out {
     left: 0%;
     top: 0%;
@@ -700,4 +704,9 @@ i.far {
 #grow {
     right: 0%;
     top: 50%;
+}
+
+#fit {
+    right: 0%;
+    top: 75%;
 }

macrovision.html

@@ -219,12 +219,15 @@
       <button class="scroll-button" id="scroll-right">
         <i class="fas fa-arrow-right"></i>
       </button>
-      <button class="scroll-button" id="shrink">
+      <button class="scroll-button" disabled="true" id="shrink">
         <i class="fas fa-compress-arrows-alt"></i>
       </button>
-      <button class="scroll-button" id="grow">
+      <button class="scroll-button" disabled="true" id="grow">
         <i class="fas fa-expand-arrows-alt"></i>
       </button>
+      <button class="scroll-button" disabled="true" id="fit">
+        <i class="fas fa-search"></i>
+      </button>
       <div id="entities">
 
       </div>

macrovision.js

@@ -535,6 +535,10 @@ function deselect() {
     clearViewOptions();
     
     document.querySelector("#delete-entity").disabled = true;
+
+    document.querySelector("#grow").disabled = true;
+    document.querySelector("#shrink").disabled = true;
+    document.querySelector("#fit").disabled = true;
 }
 
 function select(target) {
@@ -553,6 +557,10 @@ function select(target) {
     configViewOptions(selectedEntity, selectedEntity.view);
     
     document.querySelector("#delete-entity").disabled = false;
+
+    document.querySelector("#grow").disabled = false;
+    document.querySelector("#shrink").disabled = false;
+    document.querySelector("#fit").disabled = false;
 }
 
 function configViewList(entity, selectedView) {
@@ -1684,6 +1692,28 @@ document.addEventListener("DOMContentLoaded", () => {
         sizeHandle = null;
     });
 
+    document.querySelector("#fit").addEventListener("click", e => {
+        const x = parseFloat(selected.dataset.x);
+
+        Object.keys(entities).forEach(id => {
+            const element = document.querySelector("#entity-" + id);
+            const newX = parseFloat(element.dataset.x) - x + 0.5;
+            element.dataset.x = newX;
+        });
+
+        const entity = entities[selected.dataset.key];
+        const height = math.multiply(entity.views[entity.view].height, 1.1);
+        setWorldHeight(config.height, height);
+    });
+
+    document.querySelector("#fit").addEventListener("mousedown", e => {
+        e.stopPropagation();
+    });
+
+    document.querySelector("#fit").addEventListener("touchstart", e => {
+        e.stopPropagation();
+    });
+
     document.querySelector("#options-world-fit").addEventListener("click", () => fitWorld(true));
 
     document.querySelector("#options-world-autofit").addEventListener("input", e => {