Merge pull request #5927 from mozilla/bit-ecs-debug-remove-entity

Add button to remove bit-ecs entities
Hubs-Foundation · Feb 7, 2023 · c8bd5da · c8bd5da
2 parents 0878fa5 + 30cf0e6
commit c8bd5da
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/react-components/debug-panel/ECSSidebar.js b/src/react-components/debug-panel/ECSSidebar.js
@@ -7,7 +7,7 @@ import { IconButton } from "../input/IconButton";
 import { FormattedMessage } from "react-intl";
 
 import * as bitComponents from "../../bit-components";
-import { defineQuery, getEntityComponents } from "bitecs";
+import { defineQuery, getEntityComponents, removeEntity } from "bitecs";
 
 const bitComponentNames = new Map();
 for (const [name, Component] of Object.entries(bitComponents)) {
@@ -127,6 +127,9 @@ function ObjectProperties({ obj }) {
         <button onClick={() => console.log(obj)}>
           <FormattedMessage id="ecs-sidebar.log-button" defaultMessage="log" />
         </button>
+        <button onClick={() => removeEntity(APP.world, obj.eid)}>
+          <FormattedMessage id="ecs-sidebar.remove-button" defaultMessage="remove" />
+        </button>
       </div>
       <div className="content">{obj.eid && <EntityInfo eid={obj.eid} />}</div>
     </div>

diff --git a/src/react-components/debug-panel/ECSSidebar.scss b/src/react-components/debug-panel/ECSSidebar.scss
@@ -11,7 +11,8 @@
         padding: 8px 0;
     }
 
-    .object-list, .object-properties {
+    .object-list,
+    .object-properties {
         height: 50%;
         overflow: auto;
     }
@@ -34,6 +35,7 @@
         display: flex;
         flex-direction: column;
         .title {
+            border-top: 1px solid #6220d3;
             border-bottom: 1px solid #6220d3;
             padding: 10px;
             display: flex;
@@ -43,6 +45,11 @@
                 text-align: center;
                 padding: 5px;
             }
+
+            button {
+                margin-left: 5px;
+                margin-right: 5px;
+            }
         }
         .content {
             padding: 10px;
@@ -65,7 +72,5 @@
         font-size: 10px;
         border-radius: 10px;
         border: none;
-
     }
-
 }