This class allows to define additional constraints on nodes of a graph that will be applied by the OrganicLayout during the layout calculation.
Remarks
Type Details
- yfiles module
- view-layout-bridge
- yfiles-umd modules
- view-layout-bridge
- Legacy UMD name
- yfiles.organic.OrganicConstraintData
Constructors
Creates a new instance of OrganicConstraintData which helps configuring additional constraints on nodes of a graph that will be applied by the OrganicLayout during the layout calculation.
Methods
addAlignmentConstraint
(axis: OrganicLayoutConstraintOrientation, range?: number) : ItemCollection<INode>Adds constraints that cause the given nodes to align parallel to the specified axis.
Remarks
Parameters
A map of options to pass to the method.
- axis - OrganicLayoutConstraintOrientation
- HORIZONTAL to align the nodes parallel to the x-axis, VERTICAL to align them parallel to the y-axis.
- range - number
- The maximum horizontal distance between the centers of any two aligned nodes if the nodes are aligned vertically, and otherwise the maximum vertical distance between the centers of any two aligned nodes.
Returns
- ↪ItemCollection<INode>
- An ItemCollection<TItem> that is used to define the nodes affected by this constraint.
Throws
- Exception({ name: 'ArgumentError' })
- if the given alignment range is negative
Examples
The nodes that are affected by this constraint can be defined using the property source of ItemCollection<TItem>.
// align the currently selected nodes on a horizontal line
layoutData.constraints.addAlignmentConstraint(
OrganicLayoutConstraintOrientation.HORIZONTAL
).source = graphComponent.selection.selectedNodesNodes can be also added one by one. This can be more convenient than defining an own list and setting it to source.
// align four specific nodes on a horizontal line
const collection = layoutData.constraints.addAlignmentConstraint(
OrganicLayoutConstraintOrientation.HORIZONTAL
)
collection.items.add(node1)
collection.items.add(node2)
collection.items.add(node3)
collection.items.add(node4)Alternatively, a powerful option is to use the delegate to set a custom delegate that returns for every node whether it is contained in the set or not:
// align the selected nodes on a horizontal line
layoutData.constraints.addAlignmentConstraint(
OrganicLayoutConstraintOrientation.HORIZONTAL
).delegate = (node) => graphComponent.selection.isSelected(node)Adds constraints that cause the specified nodes to be arranged on the border of an ellipse with the given aspect ratio.
Remarks
Parameters
A map of options to pass to the method.
- regularPlacement - boolean
trueif the nodes should be placed in regular intervals along the border of the ellipse,falseotherwise.- aspectRatio - number
- a positive ratio between the horizontal and vertical diameter of the ellipse, or
0, if the ratio should be determined automatically.
Returns
- ↪ItemCollection<INode>
- An ItemCollection<TItem> that is used to define the nodes affected by this constraint.
Throws
- Exception({ name: 'ArgumentError' })
- if the given aspect ratio is negative
Examples
The nodes that are affected by this constraint can be defined using the property source of ItemCollection<TItem>.
// place selected nodes on an ellipse
layoutData.constraints.addEllipse(true).source =
graphComponent.selection.selectedNodesNodes can be also added one by one. This can be more convenient than defining an own list and setting it to source.
// place four specific nodes on an ellipse
const collection = layoutData.constraints.addEllipse(true)
collection.items.add(node1)
collection.items.add(node2)
collection.items.add(node3)
collection.items.add(node4)Alternatively, a powerful option is to use the delegate to set a custom delegate that returns for every node whether it is contained in the set or not:
// place nodes on an ellipse
layoutData.constraints.addEllipse(true).delegate = (node) =>
graphComponent.selection.isSelected(node)Adds constraints to fix the positions of the specified nodes in relation to one another along one coordinate axis.
Parameters
A map of options to pass to the method.
- axis - OrganicLayoutConstraintOrientation
- HORIZONTAL to fix the distances along the x-axis, VERTICAL to fix the distances along the y-axis or BOTH to fix the node's positions relative to each other.
Returns
- ↪ItemCollection<INode>
- An ItemCollection<TItem> that is used to define the nodes affected by this constraint.
Examples
The nodes that are affected by this constraint can be defined using the property source of ItemCollection<TItem>.
// fix relative distances of selected nodes
layoutData.constraints.addFixedDistances(
OrganicLayoutConstraintOrientation.BOTH
).source = graphComponent.selection.selectedNodesNodes can be also added one by one. This can be more convenient than defining an own list and setting it to source.
// fix relative distances of four specific nodes
const collection = layoutData.constraints.addFixedDistances(
OrganicLayoutConstraintOrientation.BOTH
)
collection.items.add(node1)
collection.items.add(node2)
collection.items.add(node3)
collection.items.add(node4)Alternatively, a powerful option is to use the delegate to set a custom delegate that returns for every node whether it is contained in the set or not:
// fix relative distances of selected nodes
layoutData.constraints.addFixedDistances(
OrganicLayoutConstraintOrientation.BOTH
).delegate = (node) => graphComponent.selection.isSelected(node)Adds constraints that prevent the specified nodes from occupying an area larger than the defined bounding box.
Parameters
A map of options to pass to the method.
- width - number
- The maximum width of the bounding box containing all specified nodes.
- height - number
- The maximum height of the bounding box containing all specified nodes.
Returns
- ↪ItemCollection<INode>
- An ItemCollection<TItem> that is used to define the nodes affected by this constraint.
Throws
- Exception({ name: 'ArgumentError' })
- if width or height is negative.
Examples
The nodes that are affected by this constraint can be defined using the property source of ItemCollection<TItem>.
// create for the selected nodes a bounding box with 500px width and 400px height
layoutData.constraints.addFloatingBoundingBox(500, 400).source =
graphComponent.selection.selectedNodesNodes can be also added one by one. This can be more convenient than defining an own list and setting it to source.
// create for two nodes a bounding box with 500px width and 400px height
const collection = layoutData.constraints.addFloatingBoundingBox(500, 400)
collection.items.add(node1)
collection.items.add(node2)Alternatively, a powerful option is to use the delegate to set a custom delegate that returns for every node whether it is contained in the set or not:
// create for the selected nodes a bounding box with 500px width and 400px height
layoutData.constraints.addFloatingBoundingBox(500, 400).delegate = (node) =>
graphComponent.selection.isSelected(node)addMaximumDistance
(node1: INode, node2: INode, distance: number, axis: OrganicLayoutConstraintOrientation)Adds constraints that enforce a maximum vertical or horizontal distance between the given nodes.
Parameters
A map of options to pass to the method.
- node1 - INode
- The first node that is constrained with respect to their maximum distance.
- node2 - INode
- The second node that is constrained with respect to their maximum distance.
- distance - number
- The largest allowed horizontal resp. vertical distance between both nodes. The distance is measured between the boundaries of the nodes.
- axis - OrganicLayoutConstraintOrientation
- The axis that is used for measuring the distance. HORIZONTAL to restrict the horizontal distance, VERTICAL to restrict the vertical distance or BOTH to restrict both.
Throws
- Exception({ name: 'ArgumentError' })
- if the maximum distance is negative.
Examples
// bound the horizontal distance between two nodes by 100px
layoutData.constraints.addMaximumDistance(
node1,
node2,
100,
OrganicLayoutConstraintOrientation.HORIZONTAL
)Adds constraints that enforce a minimum distance between the given nodes.
Parameters
A map of options to pass to the method.
- node1 - INode
- The first of the two nodes that are constrained with respect to their minimum distance.
- node2 - INode
- The second of the two nodes that are constrained with respect to their minimum distance.
- minimumDistance - number
- The minimum required distance between the two nodes. The distance is measured between the boundaries of the nodes.
Throws
- Exception({ name: 'ArgumentError' })
- if the minimum distance is negative.
Examples
// enforces a minimum distance of 100px between the nodes.
layoutData.constraints.addMinimumDistance(node1, node2, 100)Adds constraints that cause the given nodes to be placed along the specified axis in the order they are given.
Parameters
A map of options to pass to the method.
- axis - OrganicLayoutConstraintOrientation
- HORIZONTAL to order the nodes along the x-axis, VERTICAL to order them along the y-axis or BOTH to order them along both axes.
Returns
- ↪ItemCollection<INode>
- An ItemCollection<TItem> that is used to define the nodes affected by this constraint.
Examples
The nodes that are affected by this constraint can be defined using the property source of ItemCollection<TItem>.
// define x-order of seleced nodes
layoutData.constraints.addOrderConstraint(
OrganicLayoutConstraintOrientation.HORIZONTAL
).source = graphComponent.selection.selectedNodesNodes can be also added one by one. This can be more convenient than defining an own list and setting it to source.
// define x-order of four specific nodes
const collection = layoutData.constraints.addOrderConstraint(
OrganicLayoutConstraintOrientation.HORIZONTAL
)
collection.items.add(node1)
collection.items.add(node2)
collection.items.add(node3)
collection.items.add(node4)Alternatively, a powerful option is to use the delegate to set a custom delegate that returns for every node whether it is contained in the set or not:
// define x-order of the selected nodes
layoutData.constraints.addOrderConstraint(
OrganicLayoutConstraintOrientation.HORIZONTAL
).delegate = (node) => graphComponent.selection.isSelected(node)addPinnedBoundingBox
(left: number, top: number, width: number, height: number) : ItemCollection<INode>Adds constraints that prevent the given nodes from being placed outside the specified rectangle.
Parameters
A map of options to pass to the method.
- left - number
- The coordinate of the bounding rectangle's left boundary.
- top - number
- The coordinate of the bounding rectangle's top boundary.
- width - number
- The width of the bounding rectangle.
- height - number
- The height of the bounding rectangle.
Returns
- ↪ItemCollection<INode>
- An ItemCollection<TItem> that is used to define the nodes affected by this constraint.
Throws
- Exception({ name: 'ArgumentError' })
- if width or height is negative.
Examples
The nodes that are affected by this constraint can be defined using the property source of ItemCollection<TItem>.
// create for the selected nodes a bounding box with 500px width and 400px height
// such that its top-left corner is located at (x=50,y=50)
layoutData.constraints.addPinnedBoundingBox(50, 50, 500, 400).source =
graphComponent.selection.selectedNodesNodes can be also added one by one. This can be more convenient than defining an own list and setting it to source.
// create for two nodes a bounding box with 500px width and 400px height
// such that its top-left corner is located at (x=50,y=50)
const collection = layoutData.constraints.addPinnedBoundingBox(
50,
50,
500,
400
)
collection.items.add(node1)
collection.items.add(node2)Alternatively, a powerful option is to use the delegate to set a custom delegate that returns for every node whether it is contained in the set or not:
// create for the selected nodes a bounding box with 500px width and 400px height
// such that it top-left corner is located at (x=50, y=50)
layoutData.constraints.addPinnedBoundingBox(50, 50, 500, 400).delegate = (
node
) => graphComponent.selection.isSelected(node)Adds constraints that cause the specified nodes to be arranged on the border of a rectangle with the given aspect ratio.
Parameters
A map of options to pass to the method.
- aspectRatio - number
- a positive ratio between the width and height of the rectangle, or
0, if the ratio should be calculated automatically.
Returns
- ↪ItemCollection<INode>
- An ItemCollection<TItem> that is used to define the nodes affected by this constraint.
Throws
- Exception({ name: 'ArgumentError' })
- if the given aspect ratio is negative
Examples
The nodes that are affected by this constraint can be defined using the property source of ItemCollection<TItem>.
// place selected nodes on a rectangle
layoutData.constraints.addRectangle().source =
graphComponent.selection.selectedNodesNodes can be also added one by one. This can be more convenient than defining an own list and setting it to source.
// place four specific nodes on a rectangle
const collection = layoutData.constraints.addRectangle()
collection.items.add(node1)
collection.items.add(node2)
collection.items.add(node3)
collection.items.add(node4)Alternatively, a powerful option is to use the delegate to set a custom delegate that returns for every node whether it is contained in the set or not:
// place selected nodes on a rectangle
layoutData.constraints.addRectangle().delegate = (node) =>
graphComponent.selection.isSelected(node)addRegularAlignmentConstraint
(axis: OrganicLayoutConstraintOrientation, distance?: number) : ItemCollection<INode>Adds constraints that cause the given nodes to be aligned parallel to the specified axis.
Remarks
Parameters
A map of options to pass to the method.
- axis - OrganicLayoutConstraintOrientation
- HORIZONTAL to align the nodes parallel to the x-axis, VERTICAL to align them parallel to the y-axis.
- distance - number
- The distance between neighbouring nodes along the alignment. If the value is negative, the distance is determined automatically.
Returns
- ↪ItemCollection<INode>
- An ItemCollection<TItem> that is used to define the nodes affected by this constraint.
Examples
The nodes that are affected by this constraint can be defined using the property source of ItemCollection<TItem>.
// regularly align the selected nodes on a horizontal line
layoutData.constraints.addRegularAlignmentConstraint(
OrganicLayoutConstraintOrientation.HORIZONTAL
).source = graphComponent.selection.selectedNodesNodes can be also added one by one. This can be more convenient than defining an own list and setting it to source.
// regularly align four specific nodes on a horizontal line
const collection = layoutData.constraints.addRegularAlignmentConstraint(
OrganicLayoutConstraintOrientation.HORIZONTAL
)
collection.items.add(node1)
collection.items.add(node2)
collection.items.add(node3)
collection.items.add(node4)Alternatively, a powerful option is to use the delegate to set a custom delegate that returns for every node whether it is contained in the set or not:
// regularly align nodes on a horizontal line
layoutData.constraints.addRegularAlignmentConstraint(
OrganicLayoutConstraintOrientation.HORIZONTAL
).delegate = (node) => graphComponent.selection.isSelected(node)addSeparationConstraint
(axis: OrganicLayoutConstraintOrientation, minimumDistance: number) : OrganicLayoutSeparationConstraintAdds constraints that enforce a minimum distance between two sets of nodes.
Remarks
Parameters
A map of options to pass to the method.
- axis - OrganicLayoutConstraintOrientation
- HORIZONTAL to separate the nodes along the x-axis, VERTICAL to separate them along the y-axis, BOTH to separate them along both axes.
- minimumDistance - number
- The minimum distance by which the two sets are separated.
Returns
- ↪OrganicLayoutSeparationConstraint
- An OrganicLayoutSeparationConstraint that is used to define the two sets of nodes that should be separated.
Throws
- Exception({ name: 'ArgumentError' })
- if the minimum distance is negative.
Examples
The nodes that are affected by this constraint can be defined using the property source of ItemCollection<TItem>.
// horizontally separate selected nodes from non-selected nodes
const constraint = layoutData.constraints.addSeparationConstraint(
OrganicLayoutConstraintOrientation.HORIZONTAL,
100
)
constraint.firstSet.source = graph.nodes.filter((node) =>
graphComponent.selection.isSelected(node)
)
constraint.secondSet.source = graph.nodes.filter(
(node) => !graphComponent.selection.isSelected(node)
)Nodes can be also added one by one. This can be more convenient than defining an own list and setting it to source.
// horizontally separate two specific nodes from two other specific nodes
const constraint = layoutData.constraints.addSeparationConstraint(
OrganicLayoutConstraintOrientation.HORIZONTAL,
100
)
constraint.firstSet.items.add(node1)
constraint.firstSet.items.add(node2)
constraint.secondSet.items.add(node3)
constraint.secondSet.items.add(node4)Alternatively, a powerful option is to use the delegate to set a custom delegate that returns for every node whether it is contained in the set or not:
{
// horizontally separate selected nodes from non-selected nodes
const constraint = layoutData.constraints.addSeparationConstraint(
OrganicLayoutConstraintOrientation.HORIZONTAL,
100
)
constraint.firstSet.delegate = (node) =>
graphComponent.selection.isSelected(node)
constraint.secondSet.delegate = (node) =>
!graphComponent.selection.isSelected(node)
}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.