Merge pull request #981 from 3DStreet/scrollintoview-if-not-visible

In SceneGraph, only scroll node into view if it's not currently visible
3DStreet · Dec 22, 2024 · 7632b22 · 7632b22
2 parents 2926a00 + 0349d51
commit 7632b22
Showing 1 changed file with 15 additions and 5 deletions.
diff --git a/src/editor/components/scenegraph/SceneGraph.js b/src/editor/components/scenegraph/SceneGraph.js
@@ -92,11 +92,21 @@ export default class SceneGraph extends React.Component {
       if (entityOption.entity === entity) {
         this.setState({ selectedIndex: i });
         setTimeout(() => {
-          // wait 500ms to allow user to double click on entity
-          document
-            .getElementById('sgnode' + i)
-            ?.scrollIntoView({ behavior: 'smooth' });
-        }, 500);
+          // wait 100ms to allow React to update the UI and create the node we're interested in
+          const node = document.getElementById('sgnode' + i);
+          const scrollableContainer = document.querySelector(
+            '#scenegraph .layers'
+          );
+          if (!node || !scrollableContainer) return;
+          const containerRect = scrollableContainer.getBoundingClientRect();
+          const nodeRect = node.getBoundingClientRect();
+          const isVisible =
+            nodeRect.top >= containerRect.top &&
+            nodeRect.bottom <= containerRect.bottom;
+          if (!isVisible) {
+            node.scrollIntoView({ behavior: 'smooth' });
+          }
+        }, 100);
         // Make sure selected value is visible in scenegraph
         this.expandToRoot(entity);
         posthog.capture('entity_selected', {