Merge branch 'main' of github.com:brentyi/viser into brent/farewell_leva

nerfstudio-project · Jun 23, 2023 · 006a716 · 006a716
2 parents d1bc0cd + c40821f
commit 006a716
Show file tree

Hide file tree

Showing 14 changed files with 421 additions and 347 deletions.
diff --git a/viser/client/build/asset-manifest.json b/viser/client/build/asset-manifest.json
@@ -1,13 +1,13 @@
 {
   "files": {
     "main.css": "/static/css/main.82973013.css",
-    "main.js": "/static/js/main.f2a05ab1.js",
+    "main.js": "/static/js/main.c81f69e2.js",
     "index.html": "/index.html",
     "main.82973013.css.map": "/static/css/main.82973013.css.map",
-    "main.f2a05ab1.js.map": "/static/js/main.f2a05ab1.js.map"
+    "main.c81f69e2.js.map": "/static/js/main.c81f69e2.js.map"
   },
   "entrypoints": [
     "static/css/main.82973013.css",
-    "static/js/main.f2a05ab1.js"
+    "static/js/main.c81f69e2.js"
   ]
 }
diff --git a/viser/client/build/index.html b/viser/client/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.svg"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Viser</title><script defer="defer" src="/static/js/main.f2a05ab1.js"></script><link href="/static/css/main.82973013.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.svg"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Viser</title><script defer="defer" src="/static/js/main.c81f69e2.js"></script><link href="/static/css/main.82973013.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/viser/client/build/static/js/main.c81f69e2.js b/viser/client/build/static/js/main.c81f69e2.js
diff --git a/...ld/static/js/main.f2a05ab1.js.LICENSE.txt → ...ld/static/js/main.c81f69e2.js.LICENSE.txt b/...ld/static/js/main.f2a05ab1.js.LICENSE.txt → ...ld/static/js/main.c81f69e2.js.LICENSE.txt
@@ -5,7 +5,12 @@
  * Released under the MIT License.
  */
 
-/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+/*!
+ * hold-event
+ * https://github.com/yomotsu/hold-event
+ * (c) 2020 @yomotsu
+ * Released under the MIT License.
+ */
 
 /**
  * @license
@@ -111,13 +116,6 @@
  * @license MIT
  */
 
-/**
- * postprocessing v6.31.0 build Sun May 07 2023
- * https://github.com/pmndrs/postprocessing
- * Copyright 2015-2023 Raoul van Rüschen
- * @license Zlib
- */
-
 /**
  * react-virtual
  *

diff --git a/viser/client/build/static/js/main.c81f69e2.js.map b/viser/client/build/static/js/main.c81f69e2.js.map
diff --git a/viser/client/build/static/js/main.f2a05ab1.js b/viser/client/build/static/js/main.f2a05ab1.js
diff --git a/viser/client/build/static/js/main.f2a05ab1.js.map b/viser/client/build/static/js/main.f2a05ab1.js.map
diff --git a/viser/client/package.json b/viser/client/package.json
@@ -27,7 +27,6 @@
     "immer": "^9.0.21",
     "isomorphic-ws": "^5.0.0",
     "mantine-react-table": "^1.0.0-beta.11",
-    "meshline": "^3.1.6",
     "msgpackr": "^1.8.5",
     "prettier": "^2.8.7",
     "react": "^18.2.0",
@@ -55,9 +54,9 @@
   },
   "browserslist": {
     "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
+      "last 2 chrome versions",
+      "last 2 firefox versions",
+      "last 2 safari versions"
     ],
     "development": [
       "last 1 chrome version",

diff --git a/viser/client/src/ControlPanel/ControlPanel.tsx b/viser/client/src/ControlPanel/ControlPanel.tsx
@@ -27,6 +27,8 @@ export default function ControlPanel() {
     showGenerated && setTabState("generated");
   }, [showGenerated]);
 
+  const MemoizedTable = React.memo(SceneTreeTable);
+
   return (
     <Tabs radius="xs" value={tabState} onTabChange={setTabState}>
       <Tabs.List>
@@ -54,7 +56,7 @@ export default function ControlPanel() {
       </Tabs.Panel>
 
       <Tabs.Panel value="scene" pt="xs" p="sm">
-        <SceneTreeTable compact={true} />
+        <MemoizedTable compact={true} />
       </Tabs.Panel>
     </Tabs>
   );

diff --git a/viser/client/src/ControlPanel/SceneTreeTable.tsx b/viser/client/src/ControlPanel/SceneTreeTable.tsx
@@ -22,18 +22,39 @@ interface SceneTreeTableRow {
 export default function SceneTreeTable(props: { compact: boolean }) {
   const viewer = React.useContext(ViewerContext)!;
 
-  const attributesFromName = viewer.useSceneTree(
-    (state) => state.attributesFromName
-  );
   const nodeFromName = viewer.useSceneTree((state) => state.nodeFromName);
-  const setVisibility = viewer.useSceneTree((state) => state.setVisibility);
+  const setLabelVisibility = viewer.useSceneTree(
+    (state) => state.setLabelVisibility
+  );
+  function setVisible(name: string, visible: boolean) {
+    const attrs = viewer.nodeAttributesFromName.current[name];
+    if (attrs !== undefined) {
+      attrs.visibility = visible;
+      rerenderTable();
+    }
+  }
+
+  // For performance, scene node visibility is stored in a ref instead of the
+  // zustand state. This means that re-renders for the table need to be
+  // triggered manually when visibilities are updated.
+  const [, setTime] = React.useState(Date.now());
+  function rerenderTable() {
+    setTime(Date.now());
+  }
+  React.useEffect(() => {
+    const interval = setInterval(rerenderTable, 500);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
 
   // Debouncing to suppress onMouseEnter and onMouseDown events from
   // re-renders.
-  let debouncedReady = false;
+  const debouncedReady = React.useRef(false);
+  debouncedReady.current = false;
   setTimeout(() => {
-    debouncedReady = true;
-  }, 50);
+    debouncedReady.current = true;
+  }, 5);
 
   function getSceneTreeSubRows(
     parentName: string,
@@ -44,28 +65,43 @@ export default function SceneTreeTable(props: { compact: boolean }) {
     if (node === undefined) return [];
 
     return node.children.map((childName) => {
-      const isVisible = attributesFromName[childName]?.visibility
-        ? true
-        : false;
+      const isVisible =
+        viewer.nodeAttributesFromName.current[childName]?.visibility ?? true;
       const isVisibleEffective = isVisible && isParentVisible;
 
-      const mouseEnter = (event: React.MouseEvent) => {
-        if (event.buttons !== 0) {
-          debouncedReady && setVisibility(childName, !isVisible);
-        }
-      };
-
       const VisibleIcon = isVisible ? IconEye : IconEyeOff;
       return {
         name: childName,
         visible: (
           <ActionIcon
             onMouseDown={() => {
-              debouncedReady && setVisibility(childName, !isVisible);
+              const isVisible =
+                viewer.nodeAttributesFromName.current[childName]?.visibility ??
+                true;
+              if (debouncedReady.current) {
+                setVisible(childName, !isVisible);
+              }
+            }}
+            onClick={(evt) => {
+              // Don't propagate click events to the row containing the icon.
+              //
+              // If we don't stop propagation, clicking the visibility icon
+              // will also expand/collapse nodes in the scene tree.
+              evt.stopPropagation();
+            }}
+            onMouseEnter={(event) => {
+              if (event.buttons !== 0) {
+                const isVisible =
+                  viewer.nodeAttributesFromName.current[childName]
+                    ?.visibility ?? true;
+                if (debouncedReady.current) {
+                  setVisible(childName, !isVisible);
+                }
+              }
             }}
             sx={{ opacity: isVisibleEffective ? "1.0" : "0.5" }}
           >
-            <VisibleIcon onMouseEnter={mouseEnter} />
+            <VisibleIcon />
           </ActionIcon>
         ),
         subRows: getSceneTreeSubRows(
@@ -169,8 +205,14 @@ export default function SceneTreeTable(props: { compact: boolean }) {
           showRowsPerPage: false,
           showFirstLastPageButtons: false,
         }}
-        mantineTableBodyRowProps={({ row }) =>
-          row.subRows === undefined || row.subRows.length === 0
+        mantineTableBodyRowProps={({ row }) => ({
+          onPointerOver: () => {
+            setLabelVisibility(row.getValue("name"), true);
+          },
+          onPointerOut: () => {
+            setLabelVisibility(row.getValue("name"), false);
+          },
+          ...(row.subRows === undefined || row.subRows.length === 0
             ? {}
             : {
                 onClick: () => {
@@ -179,8 +221,8 @@ export default function SceneTreeTable(props: { compact: boolean }) {
                 sx: {
                   cursor: "pointer",
                 },
-              }
-        }
+              }),
+        })}
         enableFullScreenToggle={false}
         // Show/hide buttons.
         renderTopToolbarCustomActions={
@@ -206,7 +248,7 @@ export default function SceneTreeTable(props: { compact: boolean }) {
                       variant="filled"
                       onClick={() => {
                         table.getSelectedRowModel().flatRows.map((row) => {
-                          setVisibility(row.getValue("name"), true);
+                          setVisible(row.getValue("name"), true);
                         });
                       }}
                     >
@@ -218,7 +260,7 @@ export default function SceneTreeTable(props: { compact: boolean }) {
                       variant="filled"
                       onClick={() => {
                         table.getSelectedRowModel().flatRows.map((row) => {
-                          setVisibility(row.getValue("name"), false);
+                          setVisible(row.getValue("name"), false);
                         });
                       }}
                     >