Remarks
In contrast to LayoutExecutor, this class serves as one half of the pair of two classes that perform the calculation in separate contexts, asynchronously to the main thread that starts the layout. This allows the main thread to continue and the UI to stay responsive when longer layout calculations need to be performed, or multiple layout calculations should be carried out in parallel.
Instances of this class will serialize all the information that is required to execute the algorithm and send that information to a separate context, which processes the data with the help of the LayoutExecutorAsyncWorker class. The context that worker executes in often is a Web Worker, but it could also be running on a different machine or a server.
The actual transmission of the serialized data to the other context is not part of this implementation. Rather, it can be added by means of passing a function callback to the constructor. That function will be given an opaque blob that can be serialized and sent to the second context where it will be processed by a call to process. Once the the response is received from the other context, the function callback resolves the Promise and the results are applied to the graph.
See Also
- The ability to execute layouts asynchronously via web workers is presented in detail in the section Asynchronous Layout Calculation .
Developer's Guide
API
- LayoutExecutorAsyncWorker, LayoutExecutor
Members
Constructors
messageHandler will be given the serialized information to pass to the layout worker. Once the worker returns the results, the handler will need to resolve the Promise and the results will be deserialized and applied to the graph.Parameters
- messageHandler: function(object): Promise<object>
The function that will send the data to the remote worker. It's an asynchronous function that will need to resolve it's
Promiseonce it receives the processed data from the worker. The parameter passed to (and returned from) the function is JSON serializable and structurally cloneable . Otherwise, the contents of the data blob are considered an implementation detail and may change at any time between releases.When no additional data has to be passed between the threads, the convenience method createWebWorkerMessageHandler can be used to create the message handler.
- graph: IGraph
- The graph that will be serialized and transferred to the worker.
- layoutDescriptor?: LayoutDescriptor
- The optional descriptor to serialize and send to the worker. This property can later be set and reset via the layoutDescriptor property.
- layoutData?: LayoutData<INode, IEdge, ILabel, ILabel>
- The optional data that is associated with the graph items that needs to be transferred to the worker. This property can also later be set and reset via the layoutData property.
messageHandler will be given the serialized information to pass to the layout worker. Once the worker returns the results, the handler will need to resolve the Promise and the results will be deserialized and applied to the graph. If you don't have a GraphComponent, use the constructor variant that takes the IGraph, instead.Parameters
- messageHandler: function(object): Promise<object>
The function that will send the data to the remote worker. It's an asynchronous function that will need to resolve it's
Promiseonce it receives the processed data from the worker. The parameter passed to (and returned from) the function is JSON serializable and structurally cloneable . Otherwise, the contents of the data blob are considered an implementation detail and may change at any time between releases.When no additional data has to be passed between the threads, the convenience method createWebWorkerMessageHandler can be used to create the message handler.
- graphComponent: GraphComponent
- layoutDescriptor?: LayoutDescriptor
- The optional descriptor to serialize and send to the worker. This property can later be set and reset via the layoutDescriptor property.
- layoutData?: LayoutData<INode, IEdge, ILabel, ILabel>
- The optional data that is associated with the graph items that needs to be transferred to the worker. This property can also later be set and reset via the layoutData property.
Properties
If false, the WaitInputMode is queried from the CanvasComponent and waiting is enabled during the animation.
The default value is false.
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.Gets or sets the duration of the animation.
Gets or sets the duration a layout may run before being cancelled automatically.
Property Value
Throws
- Exception ({ name: 'ArgumentError' })
- if the duration is negative
See Also
true.Property Value
true if table layout should be configured automatically; false otherwise.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
true.Property Value
true if the animation should be done with eased; false otherwise.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 a mapping from edges in the LayoutGraph to their new layout, after the results are in.
Throws
- Exception ({ name: 'InvalidOperationError' })
- Throws when the results are not yet available.
See Also
3x3.See Also
Gets the graph this instance is working on.
Property Value
Gets the component this instance has been created for.
Property Value
null if this instance runs without a graph component.See Also
Throws
- Exception ({ name: 'InvalidOperationError' })
- Throws when the results are not yet available.
See Also
Gets a mapping from labels in the LayoutGraph to their new layout parameters, after the results are in.
Throws
- Exception ({ name: 'InvalidOperationError' })
- Throws when the results are not yet available.
See Also
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 layoutDescriptor: LayoutDescriptor = {
name: 'HierarchicalLayout',
}
await new LayoutExecutorAsync({
messageHandler: webWorkerMessageHandler,
graphComponent: graphComponent,
layoutDescriptor: layoutDescriptor,
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 layoutDescriptor: LayoutDescriptor = {
name: 'HierarchicalLayout',
}
await new LayoutExecutorAsync({
messageHandler: webWorkerMessageHandler,
graphComponent: graphComponent,
layoutDescriptor: layoutDescriptor,
labelPlacementPolicies: (label) =>
label.owner instanceof INode
? LabelPlacementPolicy.PREFER_MODEL
: LabelPlacementPolicy.PREFER_PARAMETER,
}).start()See Also
See Also
Developer's Guide
API
- layoutDescriptor, LayoutExecutorAsyncWorker
Gets or sets the descriptor that will be sent to the worker.
See Also
Developer's Guide
API
- LayoutData, LayoutExecutorAsyncWorker
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
Throws
- Exception ({ name: 'InvalidOperationError' })
- Throws when the results are not yet available.
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 layoutDescriptor: LayoutDescriptor = {
name: 'HierarchicalLayout',
}
await new LayoutExecutorAsync({
messageHandler: webWorkerMessageHandler,
graphComponent: graphComponent,
layoutDescriptor: layoutDescriptor,
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 layoutDescriptor: LayoutDescriptor = {
name: 'HierarchicalLayout',
}
await new LayoutExecutorAsync({
messageHandler: webWorkerMessageHandler,
graphComponent: graphComponent,
layoutDescriptor: layoutDescriptor,
portAdjustmentPolicies: (port) =>
port.owner instanceof INode
? PortAdjustmentPolicy.SHORTEN
: PortAdjustmentPolicy.LENGTHEN,
}).start()See Also
Gets a mapping from ports in the LayoutGraph to their new location parameters, after the results are in.
Throws
- Exception ({ name: 'InvalidOperationError' })
- Throws when the results are not yet available.
See Also
Examples
Treat all port labels as edge labels during layout:
const layoutDescriptor: LayoutDescriptor = {
name: 'HierarchicalLayout',
}
await new LayoutExecutorAsync({
messageHandler: webWorkerMessageHandler,
graphComponent: graphComponent,
layoutDescriptor: layoutDescriptor,
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 layoutDescriptor: LayoutDescriptor = {
name: 'HierarchicalLayout',
}
await new LayoutExecutorAsync({
messageHandler: webWorkerMessageHandler,
graphComponent: graphComponent,
layoutDescriptor: layoutDescriptor,
portLabelPolicies: (label) =>
label.owner instanceof IPort && label.owner.owner instanceof INode
? PortLabelPolicy.NODE_LABEL
: PortLabelPolicy.EDGE_LABEL,
}).start()See Also
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 layoutDescriptor: LayoutDescriptor = {
name: 'HierarchicalLayout',
}
await new LayoutExecutorAsync({
messageHandler: webWorkerMessageHandler,
graphComponent: graphComponent,
layoutDescriptor: layoutDescriptor,
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 layoutDescriptor: LayoutDescriptor = {
name: 'HierarchicalLayout',
}
await new LayoutExecutorAsync({
messageHandler: webWorkerMessageHandler,
graphComponent: graphComponent,
layoutDescriptor: layoutDescriptor,
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, and LayoutExecutorAsync respectively, that work on the same instance of GraphComponent to finish their operation before it starts execution.
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 duration a layout may run before being stopped automatically.
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.
Gets or sets the padding (in world coordinates) that will be added to the content bounds when calculating the target viewport.
Gets or sets a value indicating whether the contentBounds property of the graphComponent should be updated upon completion.
true.Property Value
true if the content bounds should be updated; false otherwise.Methods
Cancels a currently running layout calculation or animation.
If a layout calculation is still running, the results of the other LayoutExecutorAsyncWorker are discarded and not applied to the graph. If the layout calculation was already completed and an animation is running, it will be aborted immediately and the layout result will be applied and shown immediately.
The promise returned from start is resolved immediately, without waiting for pending layout results. Results returned from running workers are silently discarded when passed on to this instance. The workers are not terminated when this method was called.
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
Promisethat will resolve once the layout calculation or animation is canceled.
Factory method that creates the IAnimation that will be used by this instance after the layout has been calculated.
Return Value
- IAnimation
- The animation to use after the layout.
See Also
Callback factory method that creates the IRectangle for the given IPort that is used as a dummy to represent the port at the IEdge that owns port.
port.Parameters
- port: IPort
- The port to create the layout for.
Return Value
- IRectangle
- An IRectangle that uses the port's location as the center of the node.
See Also
Factory method that creates the animation for the IGraph.
Return Value
- IAnimation
- The animation instance.
See Also
Creates an animation that morphs the layout of all ITables in the graph.
Return Value
- IAnimation
- The animation that morphs the layout of all ITables in the graph.
See Also
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.
Return Value
- LayoutGridData<INode, IEdge, ILabel, ILabel>
- A LayoutGridData<TNode, TEdge, TNodeLabel, TEdgeLabel> instance for all tables in the graph, or
nullif no LayoutGrid is necessary.
Writes the table layout information provided through tableLayoutConfigurator back to all tables.
Triggers the asynchronous execution and returns a Promise that resolves when the calculation is done.
Promise that resolves when the calculation is done.This will serialize the LayoutGraph, the layoutDescriptor, and the LayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel> and send that information via the callback function that was passed to the constructor at construction time to the remote worker
After the results have been returned, they will be parsed by this instance, the results will be applied to the graph, either in an animated fashion or directly.
Return Value
- Promise<void>
- The promise to track the progress of the execution.
Throws
- Exception ({ name: 'Error' })
Static Methods
Convenience method for creating a default message handler for a web worker that can be passed to the LayoutExecutorAsync constructor.
Parameters
- worker: Worker
- The web worker instance that the messages should be exchanged with.
Return Value
- function(object): Promise<object>
- A default message handler for the given web worker instance.
See Also
Developer's Guide
API
- initializeWebWorker