Skip to content

Commit

Permalink
Merge pull request #82 from jeff-phillips-18/layout-end-event
Browse files Browse the repository at this point in the history
fix(event): Fix firing of GRAPH_LAYOUT_END_EVENT
  • Loading branch information
jeff-phillips-18 authored Jul 17, 2023
2 parents d63d21c + de5f843 commit 5e27388
Show file tree
Hide file tree
Showing 9 changed files with 56 additions and 14 deletions.
17 changes: 16 additions & 1 deletion packages/demo-app-ts/src/demos/TopologyPackage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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(() => {
Expand Down
5 changes: 3 additions & 2 deletions packages/module/src/layouts/BaseLayout.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 });
}
}
3 changes: 2 additions & 1 deletion packages/module/src/layouts/BreadthFirstLayout.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -119,5 +119,6 @@ export class BreadthFirstLayout extends BaseLayout implements Layout {
x = 0;
}
}
this.graph.getController().fireEvent(GRAPH_LAYOUT_END_EVENT, { graph: this.graph });
}
}
11 changes: 7 additions & 4 deletions packages/module/src/layouts/ColaGroupsLayout.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand All @@ -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();
})();
});
}
Expand Down Expand Up @@ -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;
}
Expand Down
21 changes: 19 additions & 2 deletions packages/module/src/layouts/ColaLayout.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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();
}

Expand All @@ -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 => {
Expand All @@ -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 {
Expand Down
3 changes: 2 additions & 1 deletion packages/module/src/layouts/ConcentricLayout.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 });
}
}
4 changes: 3 additions & 1 deletion packages/module/src/layouts/DagreLayout.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 });
}
}
}
3 changes: 2 additions & 1 deletion packages/module/src/layouts/ForceLayout.ts
Original file line number Diff line number Diff line change
@@ -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 '.';
Expand All @@ -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 });
}
});
}
Expand Down
3 changes: 2 additions & 1 deletion packages/module/src/layouts/GridLayout.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -67,5 +67,6 @@ export class GridLayout extends BaseLayout implements Layout {
}
}
}
this.graph.getController().fireEvent(GRAPH_LAYOUT_END_EVENT, { graph: this.graph });
}
}

0 comments on commit 5e27388

Please sign in to comment.