Specifies custom layout data for the GivenCoordinatesStage.
Examples
The following example shows how to create a new instance of GivenCoordinatesStageData and use it with a GivenCoordinatesStage:
const layoutData = new GivenCoordinatesStageData()
// Resize all nodes to same size
layoutData.nodeSizes.constant = new Size(30, 30)
// Reset all edge paths
layoutData.edgePaths.constant = IEnumerable.from([])
// Combine the layout data of the stage and the core layout
const compositeLayoutData = new CompositeLayoutData(
coreLayoutData,
layoutData
)
graphComponent.graph.applyLayout(
new GivenCoordinatesStage(coreLayout),
compositeLayoutData
)In many cases the complete initialization of GivenCoordinatesStageData can also be done in a single object initializer:
const layoutData = new GivenCoordinatesStageData({
// Resize all nodes to same size
nodeSizes: new Size(30, 30),
// Reset all edge paths
edgePaths: IListEnumerable.EMPTY
})
// Combine the layout data of the stage and the core layout
const compositeLayoutData = new CompositeLayoutData(
coreLayoutData,
layoutData
)
graphComponent.graph.applyLayout(
new GivenCoordinatesStage(coreLayout),
compositeLayoutData
)Type Details
- yfiles module
- view-layout-bridge
- yfiles-umd modules
- view-layout-bridge
- Legacy UMD name
- yfiles.layout.GivenCoordinatesStageData
Constructors
Creates a new instance of GivenCoordinatesStageData which helps configuring GivenCoordinatesStage.
Parameters
A map of options to pass to the method.
- nodeLocations - ItemMapping<INode,IPoint>
The mapping from nodes to their initial location. This option sets the nodeLocations property on the created object.
- nodeSizes - ItemMapping<INode,ISize>
The mapping from nodes to their sizes. This option sets the nodeSizes property on the created object.
- edgePaths - ItemMapping<IEdge,IEnumerable<IPoint>>
A mapping from edges to their initial edge paths. This option sets the edgePaths property on the created object.
Properties
Gets or sets a mapping from edges to their initial edge paths.
Remarks
Before calling the core layout algorithm, the GivenCoordinatesStage sets the path of each edge to the mapped point path. The path must contain the source port location, followed by the bends (if any), followed by the target port location.
If an empty path is specified, the current path will be reset (all bends are cleared, the current source/target port locations are kept). The path of edges that have no associated path are not changed by the stage.
Examples
The easiest option is to reset all paths, by setting a constant empty path:
// reset all edge paths
layoutData.edgePaths.constant = IEnumerable.from([])Handling only certain edges differently can be done easily by using the mapper property:
// reset the edge paths of edge1
layoutData.edgePaths.mapper.set(edge1, IEnumerable.from([]))
// and edge2
layoutData.edgePaths.mapper.set(edge2, IEnumerable.from([]))
// all other edges don't change their pathsIn cases where the path for each edge can be determined by looking at the edge itself it's often easier to just set a delegate instead of preparing a mapper:
// make all edge orthogonal
layoutData.edgePaths = (edge) => {
const sourceLocation = edge.sourcePort.location
const targetLocation = edge.targetPort.location
return new List([
sourceLocation,
new Point(sourceLocation.x, targetLocation.y),
targetLocation
])
}// make all edge orthogonal
layoutData.edgePaths = (edge: IEdge): IEnumerable<IPoint> => {
const sourceLocation = edge.sourcePort!.location
const targetLocation = edge.targetPort!.location
return new List([
sourceLocation,
new Point(sourceLocation.x, targetLocation.y),
targetLocation
])
}See Also
Gets or sets the mapping from nodes to their initial location.
Remarks
Examples
The easiest option is to place all nodes on the same location, by setting a constant location:
// place all nodes to the center of the GraphComponent
layoutData.nodeLocations.constant = graphComponent.viewport.centerHandling only certain nodes differently can be done easily by using the mapper property:
// node1 get the initial location (10, 20)
layoutData.nodeLocations.mapper.set(node1, new Point(10, 20))
// and node2 (50, 70)
layoutData.nodeLocations.mapper.set(node2, new Point(50, 70))
// all other nodes don't change their initial locationsIn cases where the location for each node can be determined by looking at the node itself it's often easier to just set a delegate instead of preparing a mapper:
// Align all nodes horizontally to x = 0
layoutData.nodeLocations = (node) => new Point(0, node.layout.y)// Align all nodes horizontally to x = 0
layoutData.nodeLocations = (node: INode): IPoint =>
new Point(0, node.layout.y)See Also
Gets or sets the mapping from nodes to their sizes.
Remarks
Examples
The easiest option is to resize all nodes to the same dimension, by setting a constant size:
// resize all nodes to (30, 30)
layoutData.nodeSizes.constant = new Size(30, 30)Handling only certain nodes differently can be done easily by using the mapper property:
// node1 get the size (10, 20)
layoutData.nodeSizes.mapper.set(node1, new Size(10, 20))
// and node2 (50, 70)
layoutData.nodeSizes.mapper.set(node2, new Size(50, 70))
// all other nodes don't change their dimensionsIn cases where the dimension for each node can be determined by looking at the node itself it's often easier to just set a delegate instead of preparing a mapper:
// all nodes grow by 50%
layoutData.nodeSizes = (node) => node.layout.toSize().multiply(1.5)// all nodes grow by 50%
layoutData.nodeSizes = (node: INode): ISize =>
node.layout.toSize().multiply(1.5)See Also
Methods
Combines this instance with the given layout data.
Remarks
Parameters
A map of options to pass to the method.
- data - LayoutData
- The LayoutData to combine this instance with.
Returns
- ↪LayoutData
- The combined layout data.