Merge pull request #82 from jeff-phillips-18/layout-end-event

fix(event): Fix firing of GRAPH_LAYOUT_END_EVENT

Author: jeff-phillips-18

packages/demo-app-ts/src/demos/TopologyPackage.tsx

@@ -2,11 +2,15 @@ import * as React from 'react';
 import { action } from 'mobx';
 import * as _ from 'lodash';
 import {
+  Controller,
   createTopologyControlButtons,
   defaultControlButtonsOptions,
   EdgeModel,
   EventListener,
   GRAPH_POSITION_CHANGE_EVENT,
+  GRAPH_LAYOUT_END_EVENT,
+  isNode,
+  Node,
   NodeModel,
   SELECTION_EVENT,
   SelectionEventListener,
@@ -67,6 +71,14 @@ const graphPositionChangeListener: EventListener = ({ graph }): void => {
   }, 1000);
 };
 
+const layoutEndListener: EventListener = ({ graph }): void => {
+  const controller: Controller = graph.getController();
+  const positions = controller.getElements().filter(e => isNode(e)).map((node) => `Node: ${node.getLabel()}: ${Math.round((node as Node).getPosition().x)},${Math.round((node as Node).getPosition().y)}`);
+
+  // eslint-disable-next-line no-console
+  console.log(`Layout Complete:\n${positions.join('\n')}`);
+};
+
 
 const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps> = ({
   useSidebar,
@@ -118,9 +130,12 @@ const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps>
   React.useEffect(() => {
 
     controller.addEventListener(GRAPH_POSITION_CHANGE_EVENT, graphPositionChangeListener);
+    controller.addEventListener(GRAPH_LAYOUT_END_EVENT, layoutEndListener);
+
     return () => {
       controller.removeEventListener(GRAPH_POSITION_CHANGE_EVENT, graphPositionChangeListener);
-    }
+      controller.removeEventListener(GRAPH_LAYOUT_END_EVENT, layoutEndListener);
+    };
   }, [controller]);
 
   React.useEffect(() => {

packages/module/src/layouts/BaseLayout.ts

@@ -477,10 +477,11 @@ export class BaseLayout implements Layout {
       // Reset the force simulation
       this.stopSimulation();
 
-      this.startLayout(this.graph, initialRun, addingNodes);
+      this.startLayout(this.graph, initialRun, addingNodes, () => {
+        this.graph.getController().fireEvent(GRAPH_LAYOUT_END_EVENT, { graph: this.graph });
+      });
     } else if (restart && this.options.layoutOnDrag) {
       this.updateLayout();
     }
-    this.graph.getController().fireEvent(GRAPH_LAYOUT_END_EVENT, { graph: this.graph });
   }
 }

packages/module/src/layouts/BreadthFirstLayout.ts

@@ -1,4 +1,4 @@
-import { Edge, Graph, Layout, Node } from '../types';
+import { Edge, Graph, GRAPH_LAYOUT_END_EVENT, Layout, Node } from '../types';
 import { BaseLayout } from './BaseLayout';
 import { LayoutOptions } from './LayoutOptions';
 import { LayoutNode } from './LayoutNode';
@@ -119,5 +119,6 @@ export class BreadthFirstLayout extends BaseLayout implements Layout {
         x = 0;
       }
     }
+    this.graph.getController().fireEvent(GRAPH_LAYOUT_END_EVENT, { graph: this.graph });
   }
 }

packages/module/src/layouts/ColaGroupsLayout.ts

@@ -52,7 +52,7 @@ class ColaGroupsLayout extends ColaLayout implements Layout {
       this.simulationRunning = false;
       action(() => {
         if (this.destroyed) {
-          this.onEnd && this.onEnd();
+          this.handleLayoutEnd();
           return;
         }
         this.layoutNodes.forEach(d => {
@@ -68,15 +68,18 @@ class ColaGroupsLayout extends ColaLayout implements Layout {
           this.simulationStopped = false;
           if (this.restartOnEnd !== undefined) {
             this.startColaLayout(false, this.restartOnEnd);
-            this.startLayout(graph, false, this.restartOnEnd, this.onEnd);
+            this.startLayout(graph, false, this.restartOnEnd, this.handleLayoutEnd);
             delete this.restartOnEnd;
+          } else {
+            this.handleLayoutEnd();
           }
         } else if (this.addingNodes) {
           // One round of simulation to adjust for new nodes
           this.forceSimulation.useForceSimulation(this.nodes, this.edges, this.getFixedNodeDistance);
           this.forceSimulation.restart();
+        } else {
+          this.handleLayoutEnd();
         }
-        this.onEnd && this.onEnd();
       })();
     });
   }
@@ -124,7 +127,7 @@ class ColaGroupsLayout extends ColaLayout implements Layout {
     edges: LayoutLink[],
     groups: LayoutGroup[]
   ): BaseLayout {
-    const layout = new ColaGroupsLayout(graph, { ...this.options, listenForChanges: false });
+    const layout = new ColaGroupsLayout(graph, { ...this.options, onSimulationEnd: undefined, listenForChanges: false });
     layout.setupLayout(graph, nodes, edges, groups);
     return layout;
   }

packages/module/src/layouts/ColaLayout.ts

@@ -10,6 +10,7 @@ import { LayoutNode } from './LayoutNode';
 import { ColaNode } from './ColaNode';
 import { ColaGroup } from './ColaGroup';
 import { ColaLink } from './ColaLink';
+import { ForceSimulation } from './ForceSimulation';
 
 export interface ColaLayoutOptions {
   maxTicks: number;
@@ -52,6 +53,10 @@ class ColaLayout extends BaseLayout implements Layout {
       ...COLA_LAYOUT_DEFAULTS,
       ...options
     };
+    this.forceSimulation = new ForceSimulation({
+      ...this.options,
+      onSimulationEnd: options?.onSimulationEnd ?? this.onSimulationEnd
+    });
     this.initializeLayout();
   }
 
@@ -74,7 +79,7 @@ class ColaLayout extends BaseLayout implements Layout {
       this.simulationRunning = false;
       action(() => {
         if (this.destroyed) {
-          this.onEnd && this.onEnd();
+          this.handleLayoutEnd();
           return;
         }
         this.nodes.forEach(d => {
@@ -91,24 +96,36 @@ class ColaLayout extends BaseLayout implements Layout {
           if (this.restartOnEnd !== undefined) {
             this.startColaLayout(false, this.restartOnEnd);
             delete this.restartOnEnd;
+          } else {
+            this.handleLayoutEnd();
           }
         } else if (this.addingNodes) {
           // One round of simulation to adjust for new nodes
           this.forceSimulation.useForceSimulation(this.nodes, this.edges, this.getFixedNodeDistance);
           this.forceSimulation.restart();
+        } else {
+          this.handleLayoutEnd();
         }
-        this.onEnd && this.onEnd();
       })();
     });
   }
 
+  protected handleLayoutEnd = () => {
+    if (this.onEnd) {
+      // Only call on end once, then clear it so that it doesn't get called again on simulations
+      this.onEnd();
+      this.onEnd = undefined;
+    }
+  }
+
   protected onSimulationEnd = () => {
     if (this.addingNodes) {
       if (!this.options.layoutOnDrag) {
         this.forceSimulation.stopSimulation();
       }
       this.addingNodes = false;
     }
+    this.handleLayoutEnd();
   };
 
   destroy(): void {

packages/module/src/layouts/ConcentricLayout.ts

@@ -1,4 +1,4 @@
-import { Edge, Graph, Layout, Node } from '../types';
+import { Edge, Graph, GRAPH_LAYOUT_END_EVENT, Layout, Node } from '../types';
 import { BaseLayout } from './BaseLayout';
 import { LayoutOptions } from './LayoutOptions';
 import { LayoutNode } from './LayoutNode';
@@ -103,5 +103,6 @@ export class ConcentricLayout extends BaseLayout implements Layout {
         r += maxWH + padding;
       }
     }
+    this.graph.getController().fireEvent(GRAPH_LAYOUT_END_EVENT, { graph: this.graph });
   }
 }

packages/module/src/layouts/DagreLayout.ts

@@ -1,6 +1,6 @@
 import * as dagre from 'dagre';
 import * as _ from 'lodash';
-import { Edge, Graph, Layout, Node } from '../types';
+import { Edge, Graph, GRAPH_LAYOUT_END_EVENT, Layout, Node } from '../types';
 import { BaseLayout, LAYOUT_DEFAULTS } from './BaseLayout';
 import { LayoutOptions } from './LayoutOptions';
 import { LayoutLink } from './LayoutLink';
@@ -88,6 +88,8 @@ export class DagreLayout extends BaseLayout implements Layout {
 
     if (this.dagreOptions.layoutOnDrag) {
       this.forceSimulation.useForceSimulation(this.nodes, this.edges, this.getFixedNodeDistance);
+    } else {
+      this.graph.getController().fireEvent(GRAPH_LAYOUT_END_EVENT, { graph: this.graph });
     }
   }
 }

packages/module/src/layouts/ForceLayout.ts

@@ -1,4 +1,4 @@
-import { Graph, Layout } from '../types';
+import { Graph, GRAPH_LAYOUT_END_EVENT, Layout } from '../types';
 import { getGroupPadding } from '../utils/element-utils';
 import { ForceSimulationNode } from './ForceSimulation';
 import { BaseLayout } from '.';
@@ -12,6 +12,7 @@ export class ForceLayout extends BaseLayout implements Layout {
       layoutOnDrag: true,
       onSimulationEnd: () => {
         this.nodes.forEach(n => n.setFixed(false));
+        this.graph.getController().fireEvent(GRAPH_LAYOUT_END_EVENT, { graph: this.graph });
       }
     });
   }

packages/module/src/layouts/GridLayout.ts

@@ -1,4 +1,4 @@
-import { Edge, Graph, Layout, Node } from '../types';
+import { Edge, Graph, GRAPH_LAYOUT_END_EVENT, Layout, Node } from '../types';
 import { BaseLayout } from './BaseLayout';
 import { LayoutOptions } from './LayoutOptions';
 import { LayoutNode } from './LayoutNode';
@@ -67,5 +67,6 @@ export class GridLayout extends BaseLayout implements Layout {
         }
       }
     }
+    this.graph.getController().fireEvent(GRAPH_LAYOUT_END_EVENT, { graph: this.graph });
   }
 }