documentationfor yFiles for HTML 3.0.0.3

Customizing Bridges

Crossing Styles

Different rendering styles can be set using BridgeManager’s property defaultBridgeCrossingStyle. The following table shows some of the styles defined by BridgeCrossingStyle:

Some bridge rendering styles
Name Bridge Style Scaled Variant

GAP

bridge gap

ARC

bridge arc

bridge arc scaled

RECTANGLE

bridge rect

bridge rect scaled

TWO_SIDES

bridge two sides

bridge two sides scaled

The scaled variants of these styles adjust their height proportionally to their width.

Crossing Determination

The BridgeManager class offers several policies for determining crossings between obstacles. For example, edge segments that have either a predominantly horizontal or vertical orientation can be configured to always appear on top of edge segments with the opposite orientation. You can use the bridgeCrossingPolicy property to specify a determination policy from the BridgeCrossingPolicy enumeration.

Custom Obstacle Provider

Note that obstacles are not limited to just edge segments. A custom IObstacleProvider implementation, for example, can define the border of group nodes as obstacles as well.

A custom obstacle provider for nodes
// 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.

Enabling the custom obstacle provider for group nodes
// enable querying nodes on the obstacle provider
const provider = new GraphObstacleProvider()
provider.queryNodes = true
bridgeManager.addObstacleProvider(provider)

// add the custom obstacle provider
graph.decorator.nodes.obstacleProvider.addFactory(
  // if the current node is a group node ...
  (n) => graph.isGroupNode(n),
  // ... then return our custom obstacle provider
  (n) => new MyNodeObstacleProvider(n)
)
Custom obstacle provider for group nodes
bridge custom obstacle provider 1
Default bridge behavior
bridge custom obstacle provider 2
Border of group nodes as obstacles

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.