Merge pull request #209 from jeff-phillips-18/demo-pan-into-view

chore(panIntoView): Add demo of the panIntoView functionality on node selection
patternfly · Jun 3, 2024 · 842001a · 842001a
2 parents 6d0ff64 + 9aec5f9
commit 842001a
Showing 1 changed file with 20 additions and 0 deletions.
diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/TopologyPackage.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/TopologyPackage.tsx
@@ -59,6 +59,26 @@ const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps>
       setSelectedIds(ids);
     });
 
+    React.useEffect(() => {
+      let resizeTimeout: NodeJS.Timeout;
+
+      if (selectedIds[0]) {
+        const selectedNode = controller.getNodeById(selectedIds[0]);
+        if (selectedNode) {
+          // Use a timeout in order to allow the side panel to be shown and window size recomputed
+          resizeTimeout = setTimeout(() => {
+            controller.getGraph().panIntoView(selectedNode, { offset: 20, minimumVisible: 100 });
+            resizeTimeout = null;
+          }, 500);
+        }
+      }
+      return () => {
+        if (resizeTimeout) {
+          clearTimeout(resizeTimeout);
+        }
+      };
+    }, [selectedIds, controller]);
+
     React.useEffect(() => {
       controller.addEventListener(GRAPH_POSITION_CHANGE_EVENT, graphPositionChangeListener);
       controller.addEventListener(GRAPH_LAYOUT_END_EVENT, layoutEndListener);