Specifies custom data for the ClearAreaLayout.
Type Details
- yfiles module
- view-layout-bridge
- yfiles-umd modules
- view-layout-bridge
- Legacy UMD name
- yfiles.partial.ClearAreaLayoutData
Constructors
Creates a new instance of ClearAreaLayoutData.
Parameters
A map of options to pass to the method.
- expandedNode - SingleItem<INode>
The node that was expanded and, thus, defines the area that must be cleared. This option sets the expandedNode property on the created object.
- expandedNodeOriginalBounds - IRectangle
The original, non-expanded bounds of the expandedNode. This option sets the expandedNodeOriginalBounds property on the created object.
- expandedNodeOriginalEdgePaths - ItemMapping<IEdge,IEnumerable<IPoint>>
The mapping from edges adjacent to the expandedNode to their original edges paths, that is, their paths before the node was expanded. This option sets the expandedNodeOriginalEdgePaths property on the created object.
- areaNodes - ItemCollection<INode>
The collection of nodes that define the area which must be cleared. This option sets the areaNodes property on the created object.
- areaGroupNode - SingleItem<INode>
The group node inside which the cleared area should be located. This option sets the areaGroupNode property on the created object.
- componentIds - ItemMapping<INode,Object>
The mapping from nodes to an object defining their component id. This option sets the componentIds property on the created object.
- nodeHalos - ItemMapping<INode,NodeHalo>
- sourcePortConstraints - ItemMapping<IEdge,PortConstraint>
A mapping from edges to their source PortConstraint. This option sets the sourcePortConstraints property on the created object.
- targetPortConstraints - ItemMapping<IEdge,PortConstraint>
A mapping from edges to their target PortConstraint. This option sets the targetPortConstraints property on the created object.
- sourcePortCandidates - ItemMapping<IEdge,ICollection<PortCandidate>>
A mapping from edges to a collection of their source port candidates. This option sets the sourcePortCandidates property on the created object.
- targetPortCandidates - ItemMapping<IEdge,ICollection<PortCandidate>>
A mapping from edges to a collection of their target port candidates. This option sets the targetPortCandidates property on the created object.
- abortHandler - AbortHandler
The AbortHandler used during the layout. This option sets the abortHandler property on the created object.
- partitionGridData - PartitionGridData
The partition grid layout data. This option sets the partitionGridData property on the created object.
- sourceGroupIds - ItemMapping<IEdge,Object>
A mapping from edges to an object representing their source edge group. This option sets the sourceGroupIds property on the created object.
- sourcePortGroupIds - ItemMapping<IEdge,Object>
A mapping from edges to an object representing their source port group. This option sets the sourcePortGroupIds property on the created object.
- targetGroupIds - ItemMapping<IEdge,Object>
A mapping from edges to an object representing their target edge group. This option sets the targetGroupIds property on the created object.
- targetPortGroupIds - ItemMapping<IEdge,Object>
A mapping from edges to an object representing their target port group. This option sets the targetPortGroupIds property on the created object.
Properties
Gets or sets the AbortHandler used during the layout.
Remarks
An AbortHandler can be used to gracefully stop or cancel a running layout and offers options for automatically doing so after a predetermined time.
An AbortHandler configured or set here overrides the one on LayoutExecutor.
Examples
The most common use case would be to just configure the AbortHandler here, e.g. to set timeouts for a graceful stop or canceling the running layout:
layoutData.abortHandler.stopDuration = TimeSpan.fromSeconds(10) layoutData.abortHandler.cancelDuration = TimeSpan.fromSeconds(30)layoutData.abortHandler!.stopDuration = TimeSpan.fromSeconds(10) layoutData.abortHandler!.cancelDuration = TimeSpan.fromSeconds(30)
If there's already an AbortHandler instance that's pre-configured or will be used in a different place to, e.g., cancel the layout when the user presses a button, you can also set one explicitly:
layoutData.abortHandler = abortHandlerSee Also
Gets or sets the group node inside which the cleared area should be located.
Remarks
The area that is cleared of elements can be associated to one specific group node. This means that this group can grow because the free space must be created inside it. In consequence, all ancestor nodes of the group may grow, too. Other groups are treated as fixed and must be moved in order to avoid an overlap with the specified area.
If no group is specified, the free space will be created in the top-level hierarchy.
See Also
Sample Graphs
Gets or sets the collection of nodes that define the area which must be cleared.
Remarks
These nodes define a sort of component from which the area that must be cleared is derived by calling method createAreaOutline. This means that the area will exactly be defined by the current locations of these nodes (including the edges among them) such that after the algorithm execution there will not be any other elements intersecting with them.
Carefully observe that if group nodes are marked, all their descendants are treated as area nodes too. For example, if a folder node was expanded (and became a group node) then it suffices to only mark the group to get the effect that the area covered by it and all its descendants is cleared.
The area group node can not be defined manually, but the nearest common ancestor of all area nodes will become the area group node. For group nodes other than the area group either all their descendants including the group itself must be area nodes or all their descendants including the group must not be area nodes. If the input is not complete in this matter, the required nodes are internally automatically treated as area nodes too.
See Also
Sample Graphs
Gets or sets the mapping from nodes to an object defining their component id.
Remarks
See Also
Gets or sets the node that was expanded and, thus, defines the area that must be cleared.
Remarks
When an expanded node is provided, the area that must be cleared is directly derived from the size of the expanded node. Defining an expanded node is intended for the case that a node's size increased such that it might now overlap with other graph elements. This includes the use case of expanding a folder node.
It is strongly recommended to additionally provide the original (smaller) bounds of the expanded node via property expandedNodeOriginalBounds. If the node has incident edges, it is also recommended to provide the original paths of these edges via expandedNodeOriginalEdgePaths. The original paths are the edge paths before the size of the node was changed (for example, before expanding a folder node). This includes paths of edges that were only incident to the non-expanded node and are now incident to descendants of it. Using this knowledge the algorithm clears the area occupied by the expanded node but also considers how the layout looked before the change. This way the mental map may be preserved to a higher degree.
See Also
Gets or sets the original, non-expanded bounds of the expandedNode.
Remarks
See Also
Gets or sets the mapping from edges adjacent to the expandedNode to their original edges paths, that is, their paths before the node was expanded.
Remarks
When an expanded node is provided, the area that must be cleared is directly derived from the bounds of the expanded node. The original paths together with the original, non-expanded (smaller) bounds (expandedNodeOriginalBounds) of the expanded node are helpful to preserve the mental map of the overall drawing by providing knowledge about the previous layout state. Note, however, that only strategies PRESERVE_SHAPES, PRESERVE_SHAPES_UNIFORM and GLOBAL will significantly profit from it.
Carefully observe that the original paths must correspond to the ones that were valid when the expanded node still had its original, non-expanded bounds. Thus, they should only be provided when the original bounds are provided too. Also note that it is recommended that this mapping includes edges that are not adjacent to the expanded node anymore but were adjacent when it was in non-expanded state.
See Also
Gets or sets the mapping from nodes to their NodeHalo.
Remarks
Examples
The easiest option is to reserve the same space around all nodes, by setting a constant NodeHalo:
layoutData.nodeHalos.constant = NodeHalo.create(20)Handling only certain nodes differently can be done easily by using the mapper property:
// node1 only reserves space above and below
layoutData.nodeHalos.mapper.set(node1, NodeHalo.create(20, 0, 0, 10))
// node2 has space all around
layoutData.nodeHalos.mapper.set(node2, NodeHalo.create(25))
// all other nodes don't get extra spaceIn cases where the NodeHalo 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:
// Retrieve the space around the node from its Tag property
layoutData.nodeHalos = (node) => NodeHalo.create(parseFloat(node.tag))// Retrieve the space around the node from its Tag property
layoutData.nodeHalos = (node: INode): NodeHalo =>
NodeHalo.create(parseFloat(node.tag))See Also
Gets or sets the partition grid layout data.
See Also
Gets or sets a mapping from edges to an object representing their source edge group.
Remarks
Edges sharing a source group identifier share a common bus near the source or at a common source node.
The ClearAreaLayout considers edge grouping information only during the rerouting of edges using the specified edgeRouter. The applied routing algorithm must support edge grouping for this property to have an effect. Furthermore, if edges are not altered by ClearAreaLayout and not grouped in the input layout, then they will not be changed only to satisfy the edge grouping.
See Also
Gets or sets a mapping from edges to a collection of their source port candidates.
Remarks
Port constraints allow to define where an edge can connect to its source node and allow fine control over port placement.
If all that is needed is to fix the source port in its location or on a node side, port constraints are easier to work with, since they are a slightly simpler concept.
Examples
Source port candidates are effectively a collection of possible port placements with different costs and the layout algorithm is free to choose the candidate that fits best into the overall layout, while also preferring candidates with a lower cost. To set the same candidate list for all edges, it's easiest to use the constant property:
layoutData.sourcePortCandidates.constant = new List([
// Prefer the center position and route the edge downwards if possible (no cost for this candidate)
PortCandidate.createCandidate(0, 0, PortDirections.SOUTH),
// Alternatively, use any position at the bottom border of the node, but with a higher cost
PortCandidate.createCandidate(PortDirections.SOUTH, 1),
// If that fails, use either the left or the right side
PortCandidate.createCandidate(PortDirections.WEST, 2),
PortCandidate.createCandidate(PortDirections.EAST, 2)
])If certain edges need specific port candidates, it's usually convenient to use the mapper property:
// edge1 should leave the source node preferably on the node side in flow direction,
// but can also use a fixed port location on the left of the node.
layoutData.sourcePortCandidates.mapper.set(
edge1,
new List([
PortCandidate.createCandidate(PortDirections.WITH_THE_FLOW),
PortCandidate.createCandidate(-0.5, 0.25, PortDirections.WEST, 1)
])
)
// edge2 should leave the source node anywhere on the upper side of the node
layoutData.sourcePortCandidates.mapper.set(
edge2,
new List([PortCandidate.createCandidate(PortDirections.NORTH)])
)For cases when the desired configuration of port candidates can be readily created from the edge itself, the delegate is often the most convenient option:
// Assuming a flowchart, the "yes" edge should leave the decision in flow direction,
// and the "no" edge may leave either left or right of the flow direction.
// This also ensures that the layout still looks natural if the layout uses different orientations.
layoutData.sourcePortCandidates = (edge) => {
// Only handle decision nodes here
if (edge.sourceNode.tag instanceof FlowChartDecision) {
switch (edge.labels.get(0).text) {
case 'Yes':
return new List([
PortCandidate.createCandidate(PortDirections.WITH_THE_FLOW)
])
case 'No':
return new List([
PortCandidate.createCandidate(PortDirections.LEFT_IN_FLOW),
PortCandidate.createCandidate(PortDirections.RIGHT_IN_FLOW)
])
}
}
return null
}// Assuming a flowchart, the "yes" edge should leave the decision in flow direction,
// and the "no" edge may leave either left or right of the flow direction.
// This also ensures that the layout still looks natural if the layout uses different orientations.
layoutData.sourcePortCandidates = (
edge: IEdge
): ICollection<PortCandidate> => {
// Only handle decision nodes here
if (edge.sourceNode!.tag instanceof FlowChartDecision) {
switch (edge.labels.get(0).text) {
case 'Yes':
return new List([
PortCandidate.createCandidate(PortDirections.WITH_THE_FLOW)
])
case 'No':
return new List([
PortCandidate.createCandidate(PortDirections.LEFT_IN_FLOW),
PortCandidate.createCandidate(PortDirections.RIGHT_IN_FLOW)
])
}
}
return null!
}See Also
Sample Graphs
Gets or sets a mapping from edges to their source PortConstraint.
Remarks
Port constraints allow to define where an edge attaches to its source node and can either restrict that to one of the node's sides, or to a fixed port position.
A more general concept which allows finer control over where ports are placed, are port candidates.
Examples
If all edges should exit their source node on the same side, you can simply set a constant constraint for all edges:
// All source ports should be on the bottom side
layoutData.sourcePortConstraints.constant = PortConstraint.create(
PortSide.SOUTH
)To change the constraints for individual edges, it's usually easiest to use the mapper:
// edge1 should leave the source node on the left side, while keeping its exact port position (strong port constraint)
layoutData.sourcePortConstraints.mapper.set(
edge1,
PortConstraint.create(PortSide.WEST, true)
)
// edge2 should leave the source node downwards, but the port may be placed anywhere along that node border
layoutData.sourcePortConstraints.mapper.set(
edge2,
PortConstraint.create(PortSide.SOUTH)
)If a PortConstraint can readily be created from an edge, using a delegate is often easier:
// Source ports will be placed on the right side and use a property in the edge's tag
// to determine whether ports will stay fixed at their position.
layoutData.sourcePortConstraints = (edge) =>
PortConstraint.create(PortSide.EAST, edge.tag.fixPorts)// Source ports will be placed on the right side and use a property in the edge's tag
// to determine whether ports will stay fixed at their position.
layoutData.sourcePortConstraints = (edge: IEdge): PortConstraint =>
PortConstraint.create(PortSide.EAST, edge.tag.fixPorts)See Also
Sample Graphs
Gets or sets a mapping from edges to an object representing their source port group.
Remarks
All edges with the same port id at a node will share the same port location. However, they are routed independently and in contrast to source groups deviate from a common path as soon as possible instead of sharing as much of a common path as possible.
The ClearAreaLayout considers port grouping information only during the rerouting of edges using the specified edgeRouter. The applied routing algorithm must support port grouping for this property to have an effect. Furthermore, if edges are not altered by ClearAreaLayout and not port-grouped in the input layout, then they will not be changed only to satisfy the port grouping.
See Also
Gets or sets a mapping from edges to an object representing their target edge group.
Remarks
Edges sharing a target group identifier share a common bus near the target or at a common target node.
The ClearAreaLayout considers edge grouping information only during the rerouting of edges using the specified edgeRouter. The applied routing algorithm must support edge grouping for this property to have an effect. Furthermore, if edges are not altered by ClearAreaLayout and not grouped in the input layout, then they will not be changed only to satisfy the edge grouping.
See Also
Gets or sets a mapping from edges to a collection of their target port candidates.
Remarks
Port constraints allow to define where an edge can connect to its target node and allow fine control over port placement.
If all that is needed is to fix the target port in its location or on a node side, port constraints are easier to work with, since they are a slightly simpler concept.
Examples
Target port candidates are effectively a collection of possible port placements with different costs and the layout algorithm is free to choose the candidate that fits best into the overall layout, while also preferring candidates with a lower cost. To set the same candidate list for all edges, it's easiest to use the constant property:
layoutData.targetPortCandidates.constant = new List([
// Prefer the center position and enter the node from the top if possible (no cost for this candidate)
PortCandidate.createCandidate(0, 0, PortDirections.NORTH),
// Alternatively, use any position at the top border of the node, but with a higher cost
PortCandidate.createCandidate(PortDirections.NORTH, 1),
// If that fails, use either the left or the right side
PortCandidate.createCandidate(PortDirections.WEST, 2),
PortCandidate.createCandidate(PortDirections.EAST, 2)
])If certain edges need specific port candidates, it's usually convenient to use the mapper property:
// edge1 should enter the target node preferably on the node side in flow direction,
// but can also use a fixed port location on the left of the node.
layoutData.targetPortCandidates.mapper.set(
edge1,
new List([
PortCandidate.createCandidate(PortDirections.WITH_THE_FLOW),
PortCandidate.createCandidate(-0.5, -0.25, PortDirections.WEST, 1)
])
)
// edge2 should enter the target node anywhere on the bottom side of the node
layoutData.targetPortCandidates.mapper.set(
edge2,
new List([PortCandidate.createCandidate(PortDirections.SOUTH)])
)For cases when the desired configuration of port candidates can be readily created from the edge itself, the delegate is often the most convenient option:
// Assuming a flowchart, edges connecting to a terminal on the target side should enter that node either
// in flow direction (preferred) or from one of the sides.
// This also ensures that the layout still looks natural if the layout uses different orientations.
layoutData.targetPortCandidates = (edge) => {
// Only handle terminal nodes here
if (edge.targetNode.tag instanceof FlowChartTerminal) {
return new List([
PortCandidate.createCandidate(PortDirections.WITH_THE_FLOW),
PortCandidate.createCandidate(PortDirections.RIGHT_IN_FLOW, 1),
PortCandidate.createCandidate(PortDirections.LEFT_IN_FLOW, 1)
])
}
return null
}// Assuming a flowchart, edges connecting to a terminal on the target side should enter that node either
// in flow direction (preferred) or from one of the sides.
// This also ensures that the layout still looks natural if the layout uses different orientations.
layoutData.targetPortCandidates = (
edge: IEdge
): ICollection<PortCandidate> => {
// Only handle terminal nodes here
if (edge.targetNode!.tag instanceof FlowChartTerminal) {
return new List([
PortCandidate.createCandidate(PortDirections.WITH_THE_FLOW),
PortCandidate.createCandidate(PortDirections.RIGHT_IN_FLOW, 1),
PortCandidate.createCandidate(PortDirections.LEFT_IN_FLOW, 1)
])
}
return null!
}See Also
Sample Graphs
Gets or sets a mapping from edges to their target PortConstraint.
Remarks
Port constraints allow to define where an edge attaches to its target node and can either restrict that to one of the node's sides, or to a fixed port position.
A more general concept which allows finer control over where ports are placed, are port candidates.
Examples
If all edges should exit their source node on the same side, you can simply set a constant constraint for all edges:
// All target ports should be on the top side
layoutData.targetPortConstraints.constant = PortConstraint.create(
PortSide.NORTH
)To change the constraints for individual edges, it's usually easiest to use the mapper:
// edge1 should enter the target node on the right side, while keeping its exact port position (strong port
// constraint)
layoutData.targetPortConstraints.mapper.set(
edge1,
PortConstraint.create(PortSide.EAST, true)
)
// edge2 should enter the target node from the top, but the port may be placed anywhere along that node border
layoutData.targetPortConstraints.mapper.set(
edge2,
PortConstraint.create(PortSide.NORTH)
)If a PortConstraint can readily be created from an edge, using a delegate is often easier:
// Target ports will be placed on the right side and use a property in the edge's tag
// to determine whether ports will stay fixed at their position.
layoutData.targetPortConstraints = (edge) =>
PortConstraint.create(PortSide.EAST, edge.tag.fixPorts)// Target ports will be placed on the right side and use a property in the edge's tag
// to determine whether ports will stay fixed at their position.
layoutData.targetPortConstraints = (edge: IEdge): PortConstraint =>
PortConstraint.create(PortSide.EAST, edge.tag.fixPorts)See Also
Sample Graphs
Gets or sets a mapping from edges to an object representing their target port group.
Remarks
All edges with the same port id at a node share the same port location. However, they are routed independently and in contrast to target groups deviate from a common path as soon as possible instead of sharing as much of a common path as possible.
The ClearAreaLayout considers port grouping information only during the rerouting of edges using the specified edgeRouter. The applied routing algorithm must support port grouping for this property to have an effect. Furthermore, if edges are not altered by ClearAreaLayout and not port-grouped in the input layout, then they will not be changed only to satisfy the port grouping.
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.