Inspector improvements

packages/inspector/src/App.tsx

@@ -18,6 +18,7 @@ export default function App({
   toggleOpen,
   isSelectMode,
   toggleSelectMode,
+  collapseTree,
 }: {
   entity: Entity;
   getSelectedEntity: () => null | Entity;
@@ -30,6 +31,7 @@ export default function App({
   toggleOpen: () => void;
   isSelectMode: boolean;
   toggleSelectMode: () => void;
+  collapseTree: () => void;
 }) {
   let ent = entity;
 
@@ -64,6 +66,7 @@ export default function App({
             toggleOpen={toggleOpen}
             runLoop={runLoop}
             error={error}
+            collapseTree={collapseTree}
           />
         ) : null}
       </div>
@@ -78,10 +81,8 @@ export default function App({
             right: 0,
             bottom: 0,
             width: "33vw",
-            overflow: "auto",
             backgroundColor: "rgba(255, 255, 255, 0.75)",
             boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.5)",
-
             display: "flex",
             flexDirection: "column",
             height: "100%",
@@ -103,9 +104,10 @@ export default function App({
               toggleOpen={toggleOpen}
               runLoop={runLoop}
               error={error}
+              collapseTree={collapseTree}
             />
           ) : null}
-          <div style={{ flexBasis: "100%" }}>
+          <div style={{ flexBasis: "100%", overflowY: "auto" }}>
             <Tree
               name="root"
               data={ent}

packages/inspector/src/Controls.tsx

@@ -8,6 +8,7 @@ import {
   PaneRightIcon,
   PaneLeftIcon,
   PickEntityIcon,
+  MinimizeIcon,
 } from "./Icons";
 
 type RunLoopAPI = ReturnType<typeof RunLoop>;
@@ -19,13 +20,15 @@ export default function Controls({
   toggleOpen,
   isSelectMode,
   toggleSelectMode,
+  collapseTree,
 }: {
   runLoop: RunLoopAPI;
   error: Error | null;
   isOpen: boolean;
   toggleOpen: () => void;
   isSelectMode: boolean;
   toggleSelectMode: () => void;
+  collapseTree: () => void;
 }) {
   return (
     <div
@@ -45,6 +48,18 @@ export default function Controls({
           <PickEntityIcon />
         </span>
       </Button>
+      {isOpen && (
+        <Button title="Collapse Inspector Tree" onClick={collapseTree}>
+          <span
+            style={{
+              padding: 4,
+              color: "#222",
+            }}
+          >
+            <MinimizeIcon />
+          </span>
+        </Button>
+      )}
       {runLoop.isPaused() ? (
         <>
           <Button

packages/inspector/src/Expandable.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import Button from "./Button";
 
 export default function Expandable({
@@ -26,8 +26,19 @@ export default function Expandable({
   onMouseLeave?: (event: React.MouseEvent) => void;
   onContextMenu?: (event: React.MouseEvent) => void;
 }) {
+  const elementRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isSelected) {
+      elementRef.current?.scrollIntoView({ block: "center" });
+    }
+  }, [isSelected, elementRef]);
+
   return (
-    <div style={{ position: "relative", paddingLeft: 8, paddingTop: 2 }}>
+    <div
+      ref={elementRef}
+      style={{ position: "relative", paddingLeft: 8, paddingTop: 2 }}
+    >
       <span
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
@@ -46,49 +57,44 @@ export default function Expandable({
             }}
           />
         )}
-        <Button
-          style={{
-            color: "rgb(110, 110, 110)",
-            display: "inline-block",
-            fontSize: 12,
-            marginRight: 3,
-            userSelect: "none",
-            transform: expanded ? "rotateZ(90deg)" : "",
-          }}
-          onClick={onExpand}
-        >
-          ▶
-        </Button>
-
-        {label ? (
-          <Button
+        <Button onClick={onExpand}>
+          <div
             style={{
-              color: "rgb(136, 19, 145)",
+              color: "rgb(110, 110, 110)",
+              display: "inline-block",
+              fontSize: 12,
+              marginRight: 3,
               userSelect: "none",
-              marginRight: "0.7em",
+              transform: expanded ? "rotateZ(90deg)" : "",
             }}
-            onClick={onExpand}
           >
-            {label}:
-          </Button>
-        ) : null}
-
-        {className ? (
-          <Button style={{ marginRight: "0.7em" }} onClick={onExpand}>
-            {className}
-          </Button>
-        ) : null}
-
+            ▶
+          </div>
+          {label && (
+            <span
+              style={{
+                color: "rgb(136, 19, 145)",
+                userSelect: "none",
+                marginRight: "0.7em",
+              }}
+            >
+              {label}
+            </span>
+          )}
+          {className && (
+            <span style={{ marginRight: "0.7em" }}>{className}</span>
+          )}
+        </Button>
         {expanded ? null : preview}
       </span>
 
-      {expanded ? (
+      {expanded && (
         <div>
           {(hasContent ? children : null) || (
             <span style={{ paddingLeft: 8, paddingTop: 2 }}>{preview}</span>
           )}
         </div>
-      ) : null}
+      )}
     </div>
   );
 }

packages/inspector/src/Icons.tsx

@@ -8,8 +8,8 @@ export function PaneRightIcon({
   height?: number | string | undefined;
 } = {}) {
   /* This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   return (
     <svg viewBox="0 0 16 16" width={width} height={height}>
       <path
@@ -33,8 +33,8 @@ export function PaneLeftIcon({
   height?: number | string | undefined;
 } = {}) {
   /* This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   return (
     <svg viewBox="0 0 16 16" width={width} height={height}>
       <path
@@ -58,8 +58,8 @@ export function PauseIcon({
   height?: number | string | undefined;
 } = {}) {
   /* This Source Code Form is subject to the terms of the Mozilla Public
- - License, v. 2.0. If a copy of the MPL was not distributed with this
- - file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   return (
     <svg viewBox="0 0 16 16" width={width} height={height}>
       <path
@@ -82,8 +82,8 @@ export function ResumeIcon({
   height?: number | string | undefined;
 } = {}) {
   /* This Source Code Form is subject to the terms of the Mozilla Public
- - License, v. 2.0. If a copy of the MPL was not distributed with this
- - file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   return (
     <svg viewBox="0 0 16 16" width={width} height={height}>
       <path
@@ -102,8 +102,8 @@ export function StepIcon({
   height?: number | string | undefined;
 } = {}) {
   /* This Source Code Form is subject to the terms of the Mozilla Public
- - License, v. 2.0. If a copy of the MPL was not distributed with this
- - file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   return (
     <svg viewBox="0 0 16 16" width={width} height={height}>
       <g fillRule="evenodd">
@@ -124,10 +124,9 @@ export function PickEntityIcon({
   width?: number | string | undefined;
   height?: number | string | undefined;
 } = {}) {
-  /*
-  <!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+  /* This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   return (
     <svg viewBox="0 0 16 16" width={width} height={height}>
       <path
@@ -141,3 +140,24 @@ export function PickEntityIcon({
     </svg>
   );
 }
+
+export function MinimizeIcon({
+  width = 16,
+  height = 16,
+}: {
+  width?: number | string | undefined;
+  height?: number | string | undefined;
+} = {}) {
+  /* This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+  return (
+    <svg viewBox="0 0 16 16" width={width} height={height}>
+      <path
+        fill="currentColor"
+        d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm-1 12H3V3h10z"
+      />
+      <path fill="currentColor" d="M5 9h6a1 1 0 0 0 0-2H5a1 1 0 0 0 0 2z" />
+    </svg>
+  );
+}

packages/inspector/src/index.tsx

@@ -32,6 +32,7 @@ interface StateHolder {
   toggleSelectMode: () => void;
   getSelectedEntity: () => null | Entity;
   selectEntity: (entity: Entity) => void;
+  collapseTree: () => void;
 }
 
 const initialInspectorTree = localStorage.inspectorTree
@@ -85,6 +86,7 @@ function Root({
       toggleOpen={stateHolder.toggleOpen}
       isSelectMode={stateHolder.getSelectMode()}
       toggleSelectMode={stateHolder.toggleSelectMode}
+      collapseTree={stateHolder.collapseTree}
     />
   );
 }
@@ -124,9 +126,9 @@ export default function Inspector() {
         const key = path.pop();
 
         // lodash.get(obj, []) does not return obj. We need to test if we
-        // reached the root and manually delete it.
+        // reached the root and manually collapse it
         if (key === "root") {
-          delete tree.root;
+          stateHolder.collapseTree();
         } else {
           const subtree = get(tree, path);
           delete subtree[key!];
@@ -138,6 +140,9 @@ export default function Inspector() {
     getExpanded: (path: Array<string | number>) => {
       return get(tree, path) !== undefined;
     },
+    collapseTree: () => {
+      tree.root = {};
+    },
     err: null,
     forceUpdate: null,
     isHovered: false,