feat(Topology): Add option to fit layout to screen upon layout completion

Author: jeff-phillips-18

packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/PipelineLayout.tsx

@@ -13,7 +13,8 @@ import {
   PipelineDagreLayout,
   PipelineNodeModel,
   getSpacerNodes,
-  getEdgesFromNodes
+  getEdgesFromNodes,
+  useVisualizationController
 } from '@patternfly/react-topology';
 import '@patternfly/react-styles/css/components/Topology/topology-components.css';
 import withTopologySetup from './utils/withTopologySetup';
@@ -77,6 +78,9 @@ const getModel = (layout: string): Model => {
 export const PipelineLayout = withTopologySetup(() => {
   useLayoutFactory((type: string, graph: Graph): Layout | undefined => new PipelineDagreLayout(graph, { nodesep: 95 }));
   useComponentFactory(pipelineComponentFactory);
+  const controller = useVisualizationController();
+  controller.setFitToScreenOnLayout(true);
+
   // support pan zoom and drag
   useComponentFactory(
     React.useCallback<ComponentFactory>(kind => {

packages/react-topology/src/Visualization.ts

@@ -17,7 +17,9 @@ import {
   ModelKind,
   LayoutFactory,
   Layout,
-  ViewPaddingSettings
+  ViewPaddingSettings,
+  GRAPH_LAYOUT_END_EVENT,
+  GraphLayoutEndEventListener
 } from './types';
 import defaultElementFactory from './elements/defaultElementFactory';
 import Stateful from './utils/Stateful';
@@ -59,6 +61,8 @@ export class Visualization extends Stateful implements Controller {
 
   private eventListeners: { [type: string]: EventListener[] } = {};
 
+  private fitToScreenListener: GraphLayoutEndEventListener;
+
   @observable.shallow
   private readonly store = {};
 
@@ -254,6 +258,20 @@ export class Visualization extends Stateful implements Controller {
     }
   }
 
+  setFitToScreenOnLayout(fitToScreen: boolean, padding: number = 80): void {
+    if (this.fitToScreenListener) {
+      this.removeEventListener(GRAPH_LAYOUT_END_EVENT, this.fitToScreenListener);
+    }
+
+    if (fitToScreen) {
+      this.fitToScreenListener = ({ graph }): void => {
+        graph.fit(padding);
+      };
+      this.addEventListener(GRAPH_LAYOUT_END_EVENT, this.fitToScreenListener);
+      return;
+    }
+  }
+
   shouldRenderNode(node: Node): boolean {
     if (!this.viewConstraintsEnabled) {
       return true;

packages/react-topology/src/types.ts

@@ -313,6 +313,7 @@ export interface Controller extends WithState {
   getGraph(): Graph;
   setGraph(graph: Graph): void;
   getLayout(type: string | undefined): Layout | undefined;
+  setFitToScreenOnLayout(fitToScreen: boolean, padding?: number): void;
   getElementById(id: string): GraphElement | undefined;
   getNodeById(id: string): Node | undefined;
   getEdgeById(id: string): Edge | undefined;