Remarks
This class is the preferred way to execute a layout on the current or main thread. The layout animation can be customized in various ways via this class' properties.
If no fine-grained control of the animation is required, the methods applyLayout and applyLayoutAnimated can be used instead.
For larger graphs and complicated layouts that have a greater execution time, blocking the main JavaScript thread of the browser can result in a poor user experience. In order to reduce the blocking time, a Web Worker or an external layout service process may be used. This can be implemented conveniently with the help of the LayoutExecutorAsync class, which is almost fully API compatible to this class, but requires a two-way communication setup between the main thread and the worker thread. It is thus recommended to start with using this approach and potentially blocking the main thread and only switch to the multi-threaded solution in a second step, if required. The code used for the solution, here, can be reused for the asynchronous solution, too.
See Also
- Migrating from LayoutExecutor to LayoutExecutorAsync and when this should be done is explained in the section Migrating from Synchronous to Asynchronous Layout Calculation .
Developer's Guide
API
- LayoutExecutorAsync, LayoutGraphAdapter, applyLayoutAnimated
Members
Constructors
Initializes a new instance of the LayoutExecutor class.
Parameters
- graphComponent: GraphComponent
- The control which will be animated and provides the IGraph instance.
- layout: ILayoutAlgorithm
- The ILayoutAlgorithm to use.
Initializes a new instance of the LayoutExecutor class.
Parameters
- graphComponent: GraphComponent
- The control which will be animated and provides the IGraph instance.
- graph: IGraph
- The graph to layout.
- layout: ILayoutAlgorithm
- The ILayoutAlgorithm to use.
Properties
Gets the layout graph adapter that is used by this instance to calculate the layout.
Property Value
Gets or sets the mapping of graph items to LayoutAnchoringPolicy values, specifying which part of the items should be used to anchor the graph during layout.
This property anchors the graph on an initial position based on either a single graph item or the alignment of the bounds of several items (but not the positions of the individual items).
The default LayoutAnchoringPolicy for all items is NONE, meaning items are not anchored unless explicitly specified.
Examples
Use the bounds of all items to anchor the graph, ensuring that the overall structure remains stable:
const layout = new HierarchicalLayout()
await new LayoutExecutor({
graphComponent: graphComponent,
layout: layout,
anchoredItems: LayoutAnchoringPolicy.BOUNDS,
}).start()Alternatively, anchor the graph using the location of a single item. In this example, the upper-left corner of a node is fixed. This is particularly useful when recalculating the layout for scenarios like expanding or collapsing a group node. To provide a seamless user experience, the group node itself remains in the same position, ensuring that the expand/collapse button stays directly under the mouse pointer:
const layout = new HierarchicalLayout()
await new LayoutExecutor({
graphComponent: graphComponent,
layout: layout,
anchoredItems: (item) =>
item === fixedNode
? LayoutAnchoringPolicy.LOWER_LEFT
: LayoutAnchoringPolicy.NONE,
}).start()The result when this property is true after the animation is the same as calling fitGraphBounds. Setting this property to true and changing animationDuration to ZERO will disable the animation, but still change the viewport to the new graph bounds.
When the viewport should stay the same, the layout algorithms often have to be coerced to keep parts of the graph in the same location. This can be done by wrapping the layout algorithm in an instance of LayoutAnchoringStage.
The default value is true.
Property Value
true if the viewport should be animated; false otherwise.See Also
Developer's Guide
Gets or sets the duration of the animation.
Property Value
See Also
Developer's Guide
Gets or sets the maximum runtime for the layout calculation before it is automatically canceled.
Property Value
Throws
- Exception ({ name: 'ArgumentError' })
- if the duration is negative
See Also
Gets or sets a value indicating whether to respect the viewportLimiter of the GraphComponent of this instance.
true, but as updating the layout typically also updates the contentBounds, depending on the ViewportLimiter implementation and configuration, this could be set to false, instead.Property Value
Among other factors, the results produced by layout algorithms usually depend on the order of the nodes and edges within a graph. Unfortunately, useful operations such as hiding or unhiding elements from a graph or simply invoking layout algorithms on a graph will have the potential side effect of changing that order.
With this comparison it is possible to establish a predefined order of edges within a graph to avoid non-deterministic layout behavior.
See Also
Gets the graph this instance is working on.
Property Value
Gets the control this instance has been created for.
Property Value
Gets or sets a mapping that specifies how ILabels should be placed by the layout algorithm.
This setting only affects layout algorithms which support label placement. Also, if EdgeLabelPreferredPlacements are already defined for a label, all values other than KEEP_PARAMETER are ignored for that label.
Default is PREFER_MODEL.
Examples
Maintain the current label positions as much as possible during layout:
const layout = new HierarchicalLayout({
edgeLabelPlacement: EdgeLabelPlacement.INTEGRATED,
})
await new LayoutExecutor({
graphComponent: graphComponent,
layout: layout,
labelPlacementPolicies: LabelPlacementPolicy.PREFER_PARAMETER,
}).start()Customize label placement individually for each label. In this example, the placement policy is determined by the type of the label's owner:
const layout = new HierarchicalLayout({
edgeLabelPlacement: EdgeLabelPlacement.INTEGRATED,
})
await new LayoutExecutor({
graphComponent: graphComponent,
layout: layout,
labelPlacementPolicies: (label) =>
label.owner instanceof INode
? LabelPlacementPolicy.PREFER_MODEL
: LabelPlacementPolicy.PREFER_PARAMETER,
}).start()See Also
Developer's Guide
API
- EDGE_LABEL_PREFERRED_PLACEMENT_DATA_KEY, labelPlacementPolicies
Gets the ILayoutAlgorithm this instance is using.
Property Value
Among other factors, the results produced by layout algorithms usually depend on the order of the nodes and edges within a graph. Unfortunately, useful operations such as hiding or unhiding elements from a graph or simply invoking layout algorithms on a graph will have the potential side effect of changing that order.
With this comparison it is possible to establish a predefined order of nodes within a graph to avoid non-deterministic layout behavior.
See Also
Gets or sets the mapping from ports to a policy that specifies how port locations should be adjusted after a layout has been calculated.
This can be useful if the port assignment calculated by the layout algorithm is insufficient.
Layout algorithms only consider rectangular nodes even though the actual shape of a node is, for example, circular. Hence, the ports are usually placed at the border of the nodes' bounds (except for some layout algorithms that produce straight-line edge routes and place the ports at the nodes' center).
Based on this setting the edges will be shortened or lengthened in a way that their sourcePorts and targetPorts will be placed on the node's outline.
The default is a constant ItemMapping<TItem, TValue> returning LENGTHEN for all ports.
Examples
Automatically lengthen or shorten edges at all ports if the port is not located on the owner's outline:
const layout = new HierarchicalLayout()
await new LayoutExecutor({
graphComponent: graphComponent,
layout: layout,
portAdjustmentPolicies: PortAdjustmentPolicy.ALWAYS,
}).start()Customize edge adjustments individually for each port. In this example, the policy is determined by the type of the port's owner:
const layout = new HierarchicalLayout()
await new LayoutExecutor({
graphComponent: graphComponent,
layout: layout,
portAdjustmentPolicies: (port) =>
port.owner instanceof INode
? PortAdjustmentPolicy.SHORTEN
: PortAdjustmentPolicy.LENGTHEN,
}).start()See Also
Developer's Guide
API
- portAdjustmentPolicies
Examples
Treat all port labels as edge labels during layout:
const layout = new HierarchicalLayout()
await new LayoutExecutor({
graphComponent: graphComponent,
layout: layout,
portLabelPolicies: PortLabelPolicy.EDGE_LABEL,
}).start()Customize the handling of port labels individually. In this example, the policy is determined by the type of the port's owner:
const layout = new HierarchicalLayout()
await new LayoutExecutor({
graphComponent: graphComponent,
layout: layout,
portLabelPolicies: (label) =>
label.owner instanceof IPort && label.owner.owner instanceof INode
? PortLabelPolicy.NODE_LABEL
: PortLabelPolicy.EDGE_LABEL,
}).start()See Also
Developer's Guide
API
- PortLabelPolicy, portLabelPolicies
Gets or sets a mapping that specifies how IPorts should be placed by the layout algorithm.
This setting only affects layout algorithms which support PortCandidates. Also, if PortCandidates are already defined for an edge, they override the current port positions.
Default is PREFER_MODEL.
Examples
Maintain the current port locations as much as possible during layout:
const layout = new HierarchicalLayout()
await new LayoutExecutor({
graphComponent: graphComponent,
layout: layout,
portPlacementPolicies: PortPlacementPolicy.KEEP_SIDE,
}).start()Customize port locations individually for each port. In this example, the placement policy is determined by the type of the port's owner:
const layout = new HierarchicalLayout()
await new LayoutExecutor({
graphComponent: graphComponent,
layout: layout,
portPlacementPolicies: (port) =>
port.owner instanceof INode
? PortPlacementPolicy.KEEP_PARAMETER
: PortPlacementPolicy.PREFER_MODEL,
}).start()See Also
Property Value
The default value is true. In this case, this instance waits for other instances of LayoutExecutor that handle the same instance of GraphComponent to finish their operation before it executes.
If set to false, this instance ignores other potentially running instances, and doesn't try to stop them but rather executes immediately. Also it will not be stopped by other instances. This should only be used under special circumstances since it can result in race conditions if multiple animations or calculations are performed on the same graph instance.
Gets or sets the maximum runtime for the layout calculation before it is automatically stopped.
Property Value
Throws
- Exception ({ name: 'ArgumentError' })
- if the duration is negative
See Also
API
- stopDuration
Gets the tableLayoutConfigurator that is used if configureTableLayout is enabled.
Methods
Factory method that creates the IAnimation that will be used by this instance after the layout has been calculated.
Factory method that creates the animation for the IGraph.
Creates the LayoutGraphAdapter which is used when a layout is executed.
Creates an animation that transitions the layout of all ITables in the graph.
Create a new instance of TableLayoutConfigurator that is used if configureTableLayout is enabled.
Return Value
- TableLayoutConfigurator
- A new instance of the TableLayoutConfigurator class.
Factory method that creates the animation for the viewport.
Parameters
- targetBounds: Rect
- The target bounds of the animation.
Return Value
- IAnimation
- The animation instance.
See Also
Calculate the target bounds to be used for the contentBounds as well as the ViewportAnimation after the layout has finished.
Uses tableLayoutConfigurator to prepare a LayoutGridData<TNode, TEdge, TNodeLabel, TEdgeLabel> for the layout.
Return Value
- LayoutGridData<INode, IEdge, ILabel, ILabel>
- The configured LayoutGridData<TNode, TEdge, TNodeLabel, TEdgeLabel> instance that's applied to the graph.
Writes the table layout information provided through tableLayoutConfigurator back to all tables.
This method will ultimately call the execute method. If the animationDuration is zero, no animation will be performed.
If this instance is already running, this method returns immediately without doing anything and returns the previous Promise<void>.
The layout algorithm itself is executed using a LayoutGraphAdapter instance which is created and configured in method createLayoutGraphAdapter.
Although this method returns a Promise and the animation will be performed asynchronously without blocking the UI thread, the actual calculation of the layout will block the UI thread. To mitigate this, check the advice in the developer's guide in the section Using Asynchronous Layout Execution .
Return Value
See Also
Stops a currently running layout calculation or animation.
If a layout calculation is still running, it will be requested to stop via stop and the animation will not run. If the layout calculation was already completed, the animation will be aborted immediately and the layout result will be shown immediately.
To just skip the animation but let the calculation finish normally, the animationDuration can be set to zero at any time before the animation was started.
Return Value
- Promise<void>
- A promise that will resolve once the layout calculation or animation is stopped.
Static Methods
Makes sure the LayoutExecutor code is not stripped by build optimizations like tree shaking.
See Also
Developer's Guide