From dd668ef0bea9ccb6c663e3263f05864c54715b9d Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Sun, 29 Mar 2020 19:39:55 -0400
Subject: [PATCH] Add a button to delete the current entity; make the clear
 button more obvious

---
 macrovision.css  |  5 +++++
 macrovision.html |  6 ++++++
 macrovision.js   | 14 +++++++++++++-
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/macrovision.css b/macrovision.css
index 202d518f..d9643968 100644
--- a/macrovision.css
+++ b/macrovision.css
@@ -295,6 +295,11 @@ body.toggle-scale #display {
     font-size: 150%;
 }
 
+.options-row .symbol-button {
+    height: 75px;
+    width: 75px;
+    font-size: 70px;
+}
 .options-row .options-button {
     flex: 1;
     width: 100%;
diff --git a/macrovision.html b/macrovision.html
index 030b7bd8..e6cb05ab 100644
--- a/macrovision.html
+++ b/macrovision.html
@@ -152,6 +152,12 @@
           <option id="options-selected-entity-none">None</option>
         </select>
       </div>
+      <div class="options-row">
+        <button id="delete-entity">
+          <i class="fas fa-trash-alt symbol-button"></i>
+            <span class="sr-only">Delete Entity</span>
+        </button>
+      </div>
       <h3 class="options-header" id="entity-category-header">Entity options</h3>
       <div class="options-category" id="entity-category">
         <div class="options-label">
diff --git a/macrovision.js b/macrovision.js
index 7f9da0e9..643f0f22 100644
--- a/macrovision.js
+++ b/macrovision.js
@@ -416,6 +416,8 @@ function deselect() {
     clearViewList();
     clearEntityOptions();
     clearViewOptions();
+    
+    document.querySelector("#delete-entity").disabled = true;
 }
 
 function select(target) {
@@ -432,6 +434,8 @@ function select(target) {
     configViewList(selectedEntity, selectedEntity.view);
     configEntityOptions(selectedEntity, selectedEntity.view);
     configViewOptions(selectedEntity, selectedEntity.view);
+    
+    document.querySelector("#delete-entity").disabled = false;
 }
 
 function configViewList(entity, selectedView) {
@@ -1083,7 +1087,7 @@ function prepareMenu() {
             {
                 name: "Clear",
                 id: "menu-clear",
-                icon: "fas fa-trash-alt"
+                icon: "fas fa-file"
             }
         ],
         [
@@ -1473,6 +1477,14 @@ document.addEventListener("DOMContentLoaded", () => {
     document.querySelector("#menu-clear").addEventListener("click", e => {
         removeAllEntities();
     });
+    
+    document.querySelector("#delete-entity").disabled = true;
+    document.querySelector("#delete-entity").addEventListener("click", e => {
+        if (selected) {
+            removeEntity(selected);
+            selected = null;
+        }
+    });
 
     document.querySelector("#menu-order-height").addEventListener("click", e => {
         const order = Object.keys(entities).sort((a, b) => {