Crossing Styles
Different rendering styles can be set using BridgeManager’s property defaultBridgeCrossingStyle. The following table shows some of the styles defined by BridgeCrossingStyle:
| Name | Bridge Style | Scaled Variant |
|---|---|---|
 | ||
 |  | |
 |  | |
 |  |
The scaled variants of these styles scale their height according to their width.
Crossing Determination
The BridgeManager class knows several policies for determining crossings between obstacles. For example, edge segments that have either predominant horizontal or vertical orientation can be chosen to always lie atop of edge segments having contrary orientation. You can use the bridgeCrossingPolicy property to specify a determination policy from the BridgeCrossingPolicy enumeration.
Custom Obstacle Provider
Note that obstacles are not restricted to describe edge segments alone. A custom IObstacleProvider implementation, for example, can define the border of group nodes as obstacles as well.
// Custom obstacle provider which provides a node's outline
class MyNodeObstacleProvider extends BaseClass(IObstacleProvider) {
// Create a specific instance for a node
/**
* @param {!INode} node
*/
constructor(node) {
super()
this.node = node
}
/**
* IObstacleProvider implementation
* @param {!IRenderContext} context
* @returns {?GeneralPath}
*/
getObstacles(context) {
const style = this.node.style
if (style.renderer.getVisibilityTestable(this.node, style).isVisible(context, context.clip)) {
// only for nodes which are currently visible:
// let the IShapeGeometry return the outline as GeneralPath
const geometry = style.renderer.getShapeGeometry(this.node, style)
const obstaclePath = geometry.getOutline()
return obstaclePath
}
// not visible: return null
return null
}
}// Custom obstacle provider which provides a node's outline
class MyNodeObstacleProvider extends BaseClass(IObstacleProvider) {
// Create a specific instance for a node
constructor(private node: INode) {
super()
}
/** IObstacleProvider implementation */
getObstacles(context: IRenderContext): GeneralPath | null {
const style = this.node.style
if (style.renderer.getVisibilityTestable(this.node, style).isVisible(context, context.clip)) {
// only for nodes which are currently visible:
// let the IShapeGeometry return the outline as GeneralPath
const geometry = style.renderer.getShapeGeometry(this.node, style)
const obstaclePath = geometry.getOutline()
return obstaclePath
}
// not visible: return null
return null
}
}Note that querying nodes for obstacle providers has to be enabled on
GraphObstacleProvider first,
by setting queryNodes
to true.
// enable querying nodes on the obstacle provider
const provider = new GraphObstacleProvider()
provider.queryNodes = true
bridgeManager.addObstacleProvider(provider)
// add the custom obstacle provider
graph.decorator.nodeDecorator.obstacleProviderDecorator.setFactory(
// if the current node is a group node ...
(n) => graph.isGroupNode(n),
// ... then return our custom obstacle provider
(n) => new MyNodeObstacleProvider(n)
)
Bridges for Custom Edge Styles
The 10 Bridge Support sample of the Edge Style Implementation tutorial shows in detail what to do if your own edge style should support bridges.