documentationfor yFiles for HTML 2.6

PortRelocationHandle

A sophisticated implementation of the IHandle interface that lets the user change an edge's source and target port.

Inheritance Hierarchy
PortRelocationHandle
Implemented Interfaces

Remarks

This handle will move one of the edge's end points visually to another IPort or IPortCandidate and upon finalization of the gesture will set the new ports for the edge. This class heavily relies on the implementation of the IEdgeReconnectionPortCandidateProvider that is queried from the IEdge this handle is acting on.

Examples

Instances of this IHandle are provided by the PortRelocationHandleProvider. The most commonly used settings are available on the PortRelocationHandleProvider, too:

graph.decorator.edgeDecorator.edgePortHandleProviderDecorator.setFactory(
  (edge) => {
    const portRelocationHandleProvider = new PortRelocationHandleProvider(
      graph,
      edge
    )
    portRelocationHandleProvider.visualization = Visualization.LIVE
    portRelocationHandleProvider.showPortCandidates = false
    return portRelocationHandleProvider
  }
)

For less frequently used settings a custom PortRelocationHandleProvider has to be provided and its createPortRelocationHandle method has to be overridden to provide the configured PortRelocationHandle:

graph.decorator.edgeDecorator.edgePortHandleProviderDecorator.setFactory(
  (edge) => {
    const portRelocationHandleProvider = new MyHandleProvider(graph, edge)
    portRelocationHandleProvider.visualization = Visualization.LIVE
    portRelocationHandleProvider.showPortCandidates = false
    return portRelocationHandleProvider
  }
)

class MyHandleProvider extends PortRelocationHandleProvider {
  /**
   * @param {!IGraph} graph
   * @param {!IEdge} edge
   */
  constructor(graph, edge) {
    super(graph, edge)
  }

  /**
   * @param {!IGraph} graph
   * @param {!IEdge} edge
   * @param {boolean} sourceEnd
   * @returns {!IHandle}
   */
  createPortRelocationHandle(graph, edge, sourceEnd) {
    const portRelocationHandle = new PortRelocationHandle(
      graph,
      edge,
      sourceEnd
    )
    portRelocationHandle.addExistingPort = true
    return portRelocationHandle
  }
}graph.decorator.edgeDecorator.edgePortHandleProviderDecorator.setFactory(
  (edge) => {
    const portRelocationHandleProvider = new MyHandleProvider(graph, edge)
    portRelocationHandleProvider.visualization = Visualization.LIVE
    portRelocationHandleProvider.showPortCandidates = false
    return portRelocationHandleProvider
  }
)

class MyHandleProvider extends PortRelocationHandleProvider {
  constructor(graph: IGraph, edge: IEdge) {
    super(graph, edge)
  }

  createPortRelocationHandle(
    graph: IGraph,
    edge: IEdge,
    sourceEnd: boolean
  ): IHandle {
    const portRelocationHandle = new PortRelocationHandle(
      graph,
      edge,
      sourceEnd
    )
    portRelocationHandle.addExistingPort = true
    return portRelocationHandle
  }
}

Type Details

yfiles module
view-editor
yfiles-umd modules
view-editor, view-table, view
Legacy UMD name
yfiles.input.PortRelocationHandle

See Also

Constructors

Properties

Methods

Constants