Orthogonal Edge Editing

yFiles for HTML can be configured to create and edit edges so that their paths remain orthogonal, with segments oriented either horizontally or vertically. This feature is enabled by default, as described in the section Orthogonal Edge Editing.

The GraphEditorInputMode's orthogonalEdgeEditingContext queries the edited edge’s lookup for an IOrthogonalEdgeHelper to determine whether orthogonal editing is supported for that particular edge. Therefore, orthogonal editing requires the edge to provide an IOrthogonalEdgeHelper in its lookup. All built-in edge styles in yFiles for HTML modify the edge’s lookup to return an IOrthogonalEdgeHelper, but not all returned instances support orthogonal edge editing.

IOrthogonalEdgeHelper

Although all yFiles for HTML’s edge styles provide an IOrthogonalEdgeHelper in their context, only PolylineEdgeStyle offers support for orthogonal editing. By default, this feature is disabled and can be enabled by setting orthogonalEditing to true.

graph.setStyle(edge, new PolylineEdgeStyle({ orthogonalEditing: true }))

To enable orthogonal edge editing for all edges, you can configure a fallback implementation in the OrthogonalEdgeEditingContext by setting an OrthogonalEdgeHelper to the fallbackEdgeHelperProvider. This ensures that all edges return an enabled helper implementation when looked up:

graphEditorInputMode.orthogonalEdgeEditingContext.fallbackEdgeHelperProvider =
  (edge) => new OrthogonalEdgeHelper(edge)

The IOrthogonalEdgeHelper provides the following methods:

shouldEditOrthogonally(context: IInputModeContext): boolean

Returns whether the edge should be edited orthogonally.

getSegmentOrientation(context: IInputModeContext, segmentIndex: number): SegmentOrientation

Returns the orientation of the given edge segment as specified in SegmentOrientation. One of HORIZONTAL, VERTICAL, or NON_ORTHOGONAL. The latter can also be returned for segments which should not be edited orthogonally.

shouldMoveEndImplicitly(context: IInputModeContext, sourceEnd: boolean): boolean

Returns whether the given end of the edge can be moved in the input mode context. If false, the orthogonality might be kept by splitting the first or last segment. Note that this method is only queried if OrthogonalEdgeEditingContext.movePorts is set to true.

cleanUpEdge(context: IInputModeContext, graph: IGraph): void

Called at the end of an editing gesture. Used to remove unused bends and finalize the gesture.

Custom IOrthogonalEdgeHelper implementations can be set using the edge decorator:

graph.decorator.edges.orthogonalEdgeHelper.addFactory(
  (edge) => new ImplicitlyMoveEndsHelper(edge)
)

Instead of implementing IOrthogonalEdgeHelper from scratch, it is often more convenient to create a subclass of OrthogonalEdgeHelper and override only a few methods:

/**
 * An OrthogonalEdgeHelper that enables moving the source/target of the edge to another port.
 */
class ImplicitlyMoveEndsHelper extends OrthogonalEdgeHelper {
  /**
   *  Creates a new instance for the given edge.
   * @param edge The edge to inspect.
   */
  constructor(edge) {
    super(edge)
  }

  /**
   * Enables moving the source and target of the edge to other ports.
   */
  shouldMoveEndImplicitly(context, sourceEnd) {
    return true
  }
}/**
 * An OrthogonalEdgeHelper that enables moving the source/target of the edge to another port.
 */
class ImplicitlyMoveEndsHelper extends OrthogonalEdgeHelper {
  /**
   *  Creates a new instance for the given edge.
   * @param edge The edge to inspect.
   */
  constructor(edge: IEdge) {
    super(edge)
  }

  /**
   * Enables moving the source and target of the edge to other ports.
   */
  shouldMoveEndImplicitly(
    context: IInputModeContext,
    sourceEnd: boolean
  ): boolean {
    return true
  }
}

For common use cases, it might be sufficient to use an individually configured OrthogonalEdgeHelper:

graph.decorator.edges.orthogonalEdgeHelper.addFactory(
  (edge) => new OrthogonalEdgeHelper({ edge: edge, implicitlyMoveEnds: true })
)

The source code of the Orthogonal Edge Editing Customization demo shows how to use different IOrthogonalEdgeHelper implementations to customize various aspects of orthogonal edge editing.

General Configuration Options

While IOrthogonalEdgeHelper configures the orthogonal edge editing support for individual edges, class OrthogonalEdgeEditingContext provides general configuration options. GraphEditorInputMode provides an instance which is enabled by default.

The default OrthogonalEdgeEditingContext supports orthogonal edge creation as well as orthogonal bend removal (i.e., removing bends in a way that the edge stays orthogonal). Both features can be enabled or disabled independently by setting CreateEdgeInputMode.orthogonalEdgeCreation or GraphEditorInputMode.orthogonalBendRemoval to OrthogonalEdgeEditingPolicy.ALWAYS or NEVER, respectively.

The OrthogonalEdgeEditingContext can be disabled temporarily by setting enabled to false.

The movePorts property determines whether the source port (target port) should move along with the first (last) bend to retain orthogonality of the first (last) edge segment.

OrthogonalEdgeEditingContext dispatches a number of events at the start and end of the edge editing gesture: