CreateEdgeInputMode

Remarks

This class provides a factory callback that the final edge creation will be delegated to. The styling of the newly created edge can be customized via the edgeDefaults. Defaults can be automatically adjusted in response to the various events that will be triggered by this instance during the edge creation. Use the dummyEdgeGraph property to modify the appearance of the dummy edge. This class uses IPortCandidateProvider instances found in the ILookup of the nodes in the graph to display port candidates and to finally create the edges.

This mode is exclusive by default.

Examples

Typically the CreateEdgeInputMode is installed as child mode of a GraphEditorInputMode and can be retrieved from the createEdgeInputMode property.

Getting the CreateEdgeInputMode from its parent input mode

const createEdgeInputMode = mode.createEdgeInputMode

The following example shows how to configure touch gestures without long press.

Configure touch gestures without long press

mode.moveViewportInputMode.allowSinglePointerMovement = true
mode.createBendInputMode.prepareRecognizerTouch =
  TouchEventRecognizers.TOUCH_DOWN_PRIMARY
mode.createEdgeInputMode.prepareRecognizerTouch =
  TouchEventRecognizers.TOUCH_DOWN_PRIMARY
mode.handleInputMode.pressedRecognizerTouch =
  TouchEventRecognizers.TOUCH_DOWN_PRIMARY
mode.lassoSelectionInputMode.prepareRecognizerTouch =
  TouchEventRecognizers.TOUCH_DOWN_PRIMARY
mode.marqueeSelectionInputMode.pressedRecognizerTouch =
  TouchEventRecognizers.TOUCH_DOWN_PRIMARY
mode.moveInputMode.pressedRecognizerTouch =
  TouchEventRecognizers.TOUCH_DOWN_PRIMARY

Type Details

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

Constructors

CreateEdgeInputMode

()

Creates a new instance that will use the IGraph from the inputModeContext to create edges in.

Remarks

Setting the graph property can be used to optionally set a different graph to work on.

ParametersOptions Overload

options - Object
A map of options to pass to the method.

priority - number

exclusive - boolean

A value indicating whether this mode will be the only one running when it has the mutex. This option sets the exclusive property on the created object.

enabled - boolean

The enabled state of this input mode. This option sets the enabled property on the created object.

validBeginCursor - Cursor

The cursor that indicates a valid place to begin an edge creation. This option sets the validBeginCursor property on the created object.

validBendCursor - Cursor

The cursor that indicates a valid place to create a bend. This option sets the validBendCursor property on the created object.

dragCursor - Cursor

The cursor that is used while a new edge is created when there is no valid location to create a bend. This option sets the dragCursor property on the created object.

sourceNodeDraggingCursor - Cursor

The cursor that is used once edge creation has started but the mouse is still over the new edge's source node. This option sets the sourceNodeDraggingCursor property on the created object.

validEndCursor - Cursor

The cursor that indicates a valid place to finish creation. This option sets the validEndCursor property on the created object.

disableSnappingRecognizer - function(Object, EventArgs):boolean

Event recognizer that temporarily disables snapping. This option sets the disableSnappingRecognizer property on the created object.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

enableSnappingRecognizer - function(Object, EventArgs):boolean

Event recognizer that reenables temporarily disabled snapping. This option sets the enableSnappingRecognizer property on the created object.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

toggleSegmentOrientationRecognizer - function(Object, EventArgs):boolean

The event recognizer that toggles the orientation of the first orthogonally created segment. This option sets the toggleSegmentOrientationRecognizer property on the created object.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

toggleDirectionRecognizer - function(Object, EventArgs):boolean

The event recognizer that recognizes gesture which toggles the direction of the created edge. This option sets the toggleDirectionRecognizer property on the created object.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

finishRecognizer - function(Object, EventArgs):boolean

The event recognizer that recognizes the finishing gesture that is used to end the edge creation on the target node. This option sets the finishRecognizer property on the created object.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

prepareRecognizer - function(Object, EventArgs):boolean

The event recognizer that recognizes the starting gesture that is used to prepare the edge creation on the source node. This option sets the prepareRecognizer property on the created object.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

draggedRecognizer - function(Object, EventArgs):boolean

The event recognizer that recognizes the initial dragging gesture that is used to initiate the creation after the preparation. This option sets the draggedRecognizer property on the created object.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

endPointMovedRecognizer - function(Object, EventArgs):boolean

The event recognizer that recognizes the movement of the end point of the edge. This option sets the endPointMovedRecognizer property on the created object.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

createBendRecognizer - function(Object, EventArgs):boolean

The event recognizer that determines whether to create a bend. This option sets the createBendRecognizer property on the created object.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

cancelRecognizer - function(Object, EventArgs):boolean

The event recognizer that determines whether to cancel edge creation. This option sets the cancelRecognizer property on the created object.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

removeBendRecognizer - function(Object, EventArgs):boolean

The event recognizer that determines whether to remove bends. This option sets the removeBendRecognizer property on the created object.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

portCandidateResolutionRecognizer - function(Object, EventArgs):boolean

The event recognizer that determines whether dynamic port candidates should be resolved. This option sets the portCandidateResolutionRecognizer property on the created object.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

finishRecognizerTouch - function(Object, EventArgs):boolean

The event recognizer that recognizes the finishing gesture that is used to end the edge creation on the target node by a touch gesture. This option sets the finishRecognizerTouch property on the created object.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

prepareRecognizerTouch - function(Object, EventArgs):boolean

The event recognizer that recognizes the starting gesture that is used to prepare the edge creation on the source node via touch. This option sets the prepareRecognizerTouch property on the created object.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

draggedRecognizerTouch - function(Object, EventArgs):boolean

The event recognizer that recognizes the initial dragging gesture that is used to initiate the creation after the preparation via touch. This option sets the draggedRecognizerTouch property on the created object.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

createBendRecognizerTouch - function(Object, EventArgs):boolean

The event recognizer that determines whether to create a bend via touch. This option sets the createBendRecognizerTouch property on the created object.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

cancelRecognizerTouch - function(Object, EventArgs):boolean

The event recognizer that determines whether to cancel edge creation via touch. This option sets the cancelRecognizerTouch property on the created object.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

removeBendRecognizerTouch - function(Object, EventArgs):boolean

The event recognizer determines whether to remove bends via touch. This option sets the removeBendRecognizerTouch property on the created object.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

showPortCandidates - ShowPortCandidates

Whether and where to display possible port candidates during the creation of the edge. This option sets the showPortCandidates property on the created object.

allowEdgeToEdgeConnections - boolean

Whether or not edges are allowed to connect to other edges. This option sets the allowEdgeToEdgeConnections property on the created object.

snapDistance - number

The distance in the view coordinate system that determines how far the mouse should be snapped to a port candidate if snapToTargetCandidate is enabled. This option sets the snapDistance property on the created object.

snapContext - SnapContext

The snapContext which manages snapping model items to certain coordinates (for instance, other items). This option sets the snapContext property on the created object.

candidateDescriptor - ICanvasObjectDescriptor

The ICanvasObjectDescriptor that is used for visualizing the IPortCandidates in the canvas during the edit. This option sets the candidateDescriptor property on the created object.

closestCandidateDescriptor - ICanvasObjectDescriptor

The ICanvasObjectDescriptor that is used for visualizing the closest IPortCandidate in the canvas during the edit. This option sets the closestCandidateDescriptor property on the created object.

orthogonalSnapDistance - number

The distance in the view coordinate system that determines how far the mouse should be snapped to a horizontal or vertical line. This option sets the orthogonalSnapDistance property on the created object.

forceSnapToCandidate - boolean

A property that determines whether the mouse should be forced to snap to the nearest valid port candidate if the mouse hovers over a target node. This option sets the forceSnapToCandidate property on the created object.

useHitItemsCandidatesOnly - boolean

A property that determines whether this mode should use only the target port candidates of the node the mouse currently hovers over. This option sets the useHitItemsCandidatesOnly property on the created object.

orthogonalEdgeCreation - OrthogonalEdgeEditingPolicy

The policy that controls whether edges will be create orthogonally. This option sets the orthogonalEdgeCreation property on the created object.

preferredMinimalEdgeDistance - number

The preferred minimal distance of orthogonal edges. This option sets the preferredMinimalEdgeDistance property on the created object.

resolveSourcePortCandidates - boolean

A value indicating whether DYNAMIC ports that are part of the source port candidates should be resolved for the current mouse location. This option sets the resolveSourcePortCandidates property on the created object.

resolveTargetPortCandidates - boolean

A value indicating whether DYNAMIC ports that are part of the target port candidates should be resolved for the current mouse location. This option sets the resolveTargetPortCandidates property on the created object.

edgeDirectionPolicy - EdgeDirectionPolicy

A value that determines how the direction of a newly created edge is determined. This option sets the edgeDirectionPolicy property on the created object.

reversedEdgeCreation - boolean

A value indicating whether the current edge creation should be created from its target port to its source port. This option sets the reversedEdgeCreation property on the created object.

nodeBorderWidthRatio - number

The width of a node's border which is taken into account when deciding which way to route the first segment of an orthogonal edge. This option sets the nodeBorderWidthRatio property on the created object.

edgeCreator - function(IInputModeContext, IGraph, IPortCandidate, IPortCandidate, IEdge):Promise<IEdge|null>

The ports based edge creation callback. This option sets the edgeCreator property on the created object.

Signature Details

function(context: IInputModeContext, graph: IGraph, sourcePortCandidate: IPortCandidate, targetPortCandidate: IPortCandidate, templateEdge: IEdge) : Promise<IEdge | null> | IEdge

The delegate method that is used by CreateEdgeInputMode to create edges between instances of IPort.

The edgeCreator uses this type of callback to actually create edges between nodes.

Parameters

context - IInputModeContext: The context of the input mode this action is used in.
graph - IGraph: The graph to create the edge in.
sourcePortCandidate - IPortCandidate: The source port candidate.
targetPortCandidate - IPortCandidate: The target port candidate. If null the callback either has to create the target port itself or cancel the edge creation by returning null.
templateEdge - IEdge: The dummy edge instance that serves as template for the actual edge creation. This edge is not part of the graph

Returns

Promise<IEdge | null> | IEdge: The newly created edge, null, or a Promise resolving with an edge or null.

allowSelfloops - boolean

Whether or not to allow the creation of self loops. This option sets the allowSelfloops property on the created object.

cancelGestureOnInvalidTarget - boolean

Whether an edge creation gesture will be canceled when the gesture is ended on an invalid target and no bend may be created there. This option sets the cancelGestureOnInvalidTarget property on the created object.

allowCreateBend - boolean

Whether or not to allow the creation of bends. This option sets the allowCreateBend property on the created object.

sourcePortCandidate - IPortCandidate

The candidate for the sourcePort of the edge to be created. This option sets the sourcePortCandidate property on the created object.

targetPortCandidate - IPortCandidate

The current candidate for the targetPort of the edge to be created. This option sets the targetPortCandidate property on the created object.

showTargetHighlight - boolean

Whether the owner of the current targetPortCandidate should be highlighted. This option sets the showTargetHighlight property on the created object.

cancelEditImplicitly - boolean

Whether after calls to createEdge the current undo edit should be canceled if the method returns null. This option sets the cancelEditImplicitly property on the created object.

edgeDefaults - IEdgeDefaults

The appearance of newly created edges. This option sets the edgeDefaults property on the created object.

snapToTargetCandidate - boolean

Whether or not the edge's end point should snap to the current target port candidate during the creation of the edge. This option sets the snapToTargetCandidate property on the created object.

showSourcePortCandidatesHitTestable - IHitTestable

A IHitTestable that determines whether to show source port candidates if the cursor hovers over the provided location. This option sets the showSourcePortCandidatesHitTestable property on the created object.

beginHitTestable - IHitTestable

A IHitTestable that determines whether it is valid to start an edge creation gesture here. This option sets the beginHitTestable property on the created object.

endHitTestable - IHitTestable

A IHitTestable that determines whether it is valid to finish an edge creation gesture here if valid IPortCandidates are available. This option sets the endHitTestable property on the created object.

prematureEndHitTestable - IHitTestable

A IHitTestable that determines, whether it is valid to finish an edge creation gesture here even if no IPortCandidates are available. This option sets the prematureEndHitTestable property on the created object.

validBendHitTestable - IHitTestable

A IHitTestable that determines whether it is valid to create a bend here. This option sets the validBendHitTestable property on the created object.

startOverCandidateOnly - boolean

Whether edge creation should only start if the pointer is located directly over a valid port candidate. This option sets the startOverCandidateOnly property on the created object.

sourcePortCandidateHitRadius - number

The radius from within a valid port candidate will be considered as hit. This option sets the sourcePortCandidateHitRadius property on the created object.

sourceNodeDraggingFinishedRecognizer - function(Object, EventArgs):boolean

The event recognizer that starts the actual edge creation while dragging. This option sets the sourceNodeDraggingFinishedRecognizer property on the created object.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

enforceBendCreationRecognizer - function(Object, EventArgs):boolean

The event recognizer that will be queried to decide if bend creation is enforced. This option sets the enforceBendCreationRecognizer property on the created object.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

Properties

allowCreateBend

: boolean

Gets or sets whether or not to allow the creation of bends.

Remarks

The default is true.

Examples

To disable bend creation during edge creation and on existing edges one has to disable the createBendInputMode, too.

Disabling the bend creation during edge creation and on existing edges

// mode is an instance of GraphEditorInputMode
mode.createBendInputMode.enabled = false
mode.createEdgeInputMode.allowCreateBend = false

allowEdgeToEdgeConnections

: boolean

Gets or sets whether or not edges are allowed to connect to other edges.

Remarks

The default is false.

Examples

Enabling edge to edge connections (the red edge)

createEdgeInputMode.allowEdgeToEdgeConnections = true

allowSelfloops

: boolean

Gets or sets whether or not to allow the creation of self loops.

Remarks

The default is true, which enables that an edge is connected to a sourcePort and targetPort that have the same owner.

Examples

Enabling self loops:

createEdgeInputMode.allowSelfloops = true

beginHitTestable

Gets or sets a IHitTestable that determines whether it is valid to start an edge creation gesture here.

Remarks

The default implementation returns true if the cursor is located over a port owner.

Examples

To avoid showing port candidates for selected nodes (which will by default be moved instead of being considered as source of an edge) developers might set a hit testable which excludes selected nodes.

class UnselectedNodesHitTestable extends BaseClass(IHitTestable) {
  /**
   * @param {!IInputModeContext} context
   * @param {!Point} location
   * @returns {boolean}
   */
  isHit(context, location) {
    const graphComponent = context.canvasComponent
    return graphComponent.graph.nodes.some(
      (node) =>
        !graphComponent.selection.isSelected(node) &&
        node.style.renderer
          .getHitTestable(node, node.style)
          .isHit(context, location)
    )
  }
}class UnselectedNodesHitTestable extends BaseClass<IHitTestable>(
  IHitTestable
) {
  isHit(context: IInputModeContext, location: Point): boolean {
    const graphComponent = context.canvasComponent as GraphComponent
    return graphComponent.graph.nodes.some(
      (node) =>
        !graphComponent.selection.isSelected(node) &&
        node.style.renderer
          .getHitTestable(node, node.style)
          .isHit(context, location)
    )
  }
}

Note that the same hit testable should be set to showSourcePortCandidatesHitTestable, too.

cancelEditImplicitly

: boolean

Gets or sets whether after calls to createEdge the current undo edit should be canceled if the method returns null.

Remarks

This should be set to false if you want to perform some undoable actions in these methods and/or in the edgeCreator callback, but need to return null from any of these methods. Default value is true, meaning that returning null results in canceling the composite undo entry.

cancelGestureOnInvalidTarget

: boolean

Gets or sets whether an edge creation gesture will be canceled when the gesture is ended on an invalid target and no bend may be created there.

Remarks

If bend creation is allowed at the target location (i.e. validBendHitTestable returns true), the gesture will always continue by creating a bend. Otherwise, if this property is true, the gesture will be canceled automatically.

The default is false, meaning that the gesture must always be canceled explicitly.

cancelRecognizer

: function(any, EventArgs):boolean

Gets or sets the event recognizer that determines whether to cancel edge creation.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

cancelRecognizerTouch

: function(any, EventArgs):boolean

Gets or sets the event recognizer that determines whether to cancel edge creation via touch.

Remarks

The default is TOUCH_MULTI_TAP_SECONDARY.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

candidateDescriptor

: ICanvasObjectDescriptor

Gets or sets the ICanvasObjectDescriptor that is used for visualizing the IPortCandidates in the canvas during the edit.

Remarks

This descriptor is queried for the IVisualCreator to obtain the visualizations for the candidates that are not currently closest. By default an instance of DefaultPortCandidateDescriptor is used.

closestCandidateDescriptor

: ICanvasObjectDescriptor

Gets or sets the ICanvasObjectDescriptor that is used for visualizing the closest IPortCandidate in the canvas during the edit.

Remarks

This descriptor is queried for the IVisualCreator to obtain the visualization for the currently closest candidate. By default an instance of DefaultPortCandidateDescriptor is used.

controller

: ConcurrencyController

Gets the installed controller.

createBendRecognizer

: function(any, EventArgs):boolean

Gets or sets the event recognizer that determines whether to create a bend.

Remarks

The default is LEFT_UP.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

createBendRecognizerTouch

: function(any, EventArgs):boolean

Gets or sets the event recognizer that determines whether to create a bend via touch.

Remarks

The default is TOUCH_UP_PRIMARY.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

disableSnappingRecognizer

: function(any, EventArgs):boolean

Gets or sets event recognizer that temporarily disables snapping.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

dragCursor

: Cursor

Gets or sets the cursor that is used while a new edge is created when there is no valid location to create a bend.

Remarks

The default cursor is DEFAULT.

draggedRecognizer

: function(any, EventArgs):boolean

Gets or sets the event recognizer that recognizes the initial dragging gesture that is used to initiate the creation after the preparation.

Remarks

The default is DRAG.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

draggedRecognizerTouch

: function(any, EventArgs):boolean

Gets or sets the event recognizer that recognizes the initial dragging gesture that is used to initiate the creation after the preparation via touch.

Remarks

The default is TOUCH_MOVE_PRIMARY.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

dragPoint

: IPoint

Gets the dynamically updated dragging point for the edge creation.

dummyEdge

: IEdge

Gets the dummy edge instance that will be used to render a preview of the edge to be created.

Remarks

This instance will be used for rendering the edge during the gesture. If this property is unset initially, factory method createDummyEdge will be called.

dummyEdgeGraph

: IGraph

Gets the dummy graph instance that will hold the items that will render a preview of the newly created edge.

Remarks

The dummy edge graph can be used to change the appearance and other properties of the dummy edge, either when starting a gesture or during it in response to certain events. Possible actions are:

Changing the style of the dummy edge.
Adding bends to the dummy edge.
Adding labels to the dummy edge.
Changing style and other properties of the added labels.

All changes made to the dummy edge during the gesture will be persisted to the created edge in the original graph. This behavior can be changed by setting a custom edgeCreator.

The dummy edge graph only allows operations on the dummy edge.

Changing style of the dummy edge's source or target port has no effect. The style for these is controlled by the IPortCandidates and hence by an IPortCandidateProvider.

If the property is not set initially, method createDummyEdgeGraph will be used as the factory method.

dummySourceNodePort

: IPort

The IPort which is used as source port for the temporarily created dummyEdge during edge creation.

Remarks

This port's owner is a dummy node. The dummyEdge is either connected to this port, a dummy port at the real source node, or a real port in graph.

The port is created upon first access of property dummyEdgeGraph.

dummyTargetNode

: INode

The INode which is used as target node for the temporarily created dummyEdge during edge creation.

Remarks

By default, this node is invisible.

The node is created upon first access by method createDummyTargetNode.

dummyTargetNodePort

: IPort

The IPort which is used as target port for the temporarily created dummyEdge during edge creation.

Remarks

This port's owner is the dummyTargetNode. This port is used as target port of the dummyEdge unless the dummy edge snaps to a valid targetPortCandidate in which case the edge is connected to the port represented by that candidate.

The port is created upon first access by method createDummyTargetNodePort.

edgeCreator

: function(IInputModeContext, IGraph, IPortCandidate, IPortCandidate, IEdge):Promise<IEdge|null>

Gets or sets the ports based edge creation callback.

Remarks

The default creator will delegate to createEdge and obtain the tag from the dummyEdge. It will then copy over all bends, labels, and ports from the dummyEdge.

When a Promise is returned, this mode will keep the mutex until it is resolved, thereby blocking any user interaction.

Signature Details

function(context: IInputModeContext, graph: IGraph, sourcePortCandidate: IPortCandidate, targetPortCandidate: IPortCandidate, templateEdge: IEdge) : Promise<IEdge | null> | IEdge

The delegate method that is used by CreateEdgeInputMode to create edges between instances of IPort.

The edgeCreator uses this type of callback to actually create edges between nodes.

Parameters

context - IInputModeContext: The context of the input mode this action is used in.
graph - IGraph: The graph to create the edge in.
sourcePortCandidate - IPortCandidate: The source port candidate.
targetPortCandidate - IPortCandidate: The target port candidate. If null the callback either has to create the target port itself or cancel the edge creation by returning null.
templateEdge - IEdge: The dummy edge instance that serves as template for the actual edge creation. This edge is not part of the graph

Returns

Promise<IEdge | null> | IEdge: The newly created edge, null, or a Promise resolving with an edge or null.

Throws

Exception({ name: 'ArgumentError' }): If the argument is null

Examples

A custom edge creator

// set a custom edge creator which creates a label on the new edge
createEdgeInputMode.edgeCreator = (
  context,
  graph,
  sourceCandidate,
  targetCandidate,
  dummyEdge
) => {
  if (targetCandidate === null) {
    return null
  }
  // get the source and target ports from the candidates
  const sourcePort =
    sourceCandidate.port !== null
      ? sourceCandidate.port
      : sourceCandidate.createPort(context)
  const targetPort =
    targetCandidate.port !== null
      ? targetCandidate.port
      : targetCandidate.createPort(context)

  // create the edge between the source and target port
  const edge = graph.createEdge(sourcePort, targetPort, dummyEdge.style)
  // create a label
  graph.addLabel(edge, 'A new edge')
  // return the created edge
  return edge
}// set a custom edge creator which creates a label on the new edge
createEdgeInputMode.edgeCreator = (
  context: IInputModeContext,
  graph: IGraph,
  sourceCandidate: IPortCandidate,
  targetCandidate: IPortCandidate | null,
  dummyEdge: IEdge
): IEdge | null | Promise<IEdge | null> => {
  if (targetCandidate === null) {
    return null
  }
  // get the source and target ports from the candidates
  const sourcePort =
    sourceCandidate.port !== null
      ? sourceCandidate.port
      : sourceCandidate.createPort(context)
  const targetPort =
    targetCandidate.port !== null
      ? targetCandidate.port
      : targetCandidate.createPort(context)

  // create the edge between the source and target port
  const edge = graph.createEdge(sourcePort, targetPort, dummyEdge.style)
  // create a label
  graph.addLabel(edge, 'A new edge')
  // return the created edge
  return edge
}

edgeDefaults

: IEdgeDefaults

Gets or sets the appearance of newly created edges.

Remarks

This property directly delegates to the edgeDefaults of the dummyEdgeGraph.

edgeDirectionPolicy

: EdgeDirectionPolicy

Gets or sets a value that determines how the direction of a newly created edge is determined.

Remarks

This property is START_AT_SOURCE by default which means that edges are created from the source to the target. Setting the value to DETERMINE_FROM_PORT_CANDIDATES will query both source and target port candidates during getSourcePortCandidates. Depending on which candidate is chosen in getSourcePortCandidates the edge creation will either be reversed or not.

Setting the property to another value during edge creation will not affect the current edge. Set reversedEdgeCreation to control the direction of a currently active edge creation.

enabled

: boolean

Gets or sets the enabled state of this input mode.

Remarks

Clients can use this property to disable or reenable this instance. This will set the Enabled property of the installed controller so a disabled instance should never try to acquire the input mutex.

Examples

Disabling the CreateEdgeInputMode on its parent input mode

mode.createEdgeInputMode.enabled = false

enableSnappingRecognizer

: function(any, EventArgs):boolean

Gets or sets event recognizer that reenables temporarily disabled snapping.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

endHitTestable

Gets or sets a IHitTestable that determines whether it is valid to finish an edge creation gesture here if valid IPortCandidates are available.

Remarks

This hit testable is only queried if forceSnapToCandidate is disabled.

If this IHitTestable returns true a valid port candidate is searched. If and only if one is found the current location is considered as possible end for an edge creation. If this IHitTestable returns false prematureEndHitTestable is queried.

The default implementation returns true if there is a port owner at the given location.

endPointMovedRecognizer

: function(any, EventArgs):boolean

Gets or sets the event recognizer that recognizes the movement of the end point of the edge.

Remarks

The default is MOVE_OR_DRAG.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

enforceBendCreationRecognizer

: function(any, EventArgs):boolean

Gets or sets the event recognizer that will be queried to decide if bend creation is enforced.

Remarks

The default is CTRL_IS_DOWN or META_IS_DOWN.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

exclusive

: boolean

Gets or sets a value indicating whether this mode will be the only one running when it has the mutex.

Remarks

The value of this property will be delegated to the exclusive property of the controller.

If this mode is marked as exclusive and has the mutex, all other modes added to the same MultiplexingInputMode will be deactivated. Otherwise it will always run concurrently with all other modes.

finishRecognizer

: function(any, EventArgs):boolean

Gets or sets the event recognizer that recognizes the finishing gesture that is used to end the edge creation on the target node.

Remarks

The default is a combination of LEFT_DOWN and LEFT_UP.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

finishRecognizerTouch

: function(any, EventArgs):boolean

Gets or sets the event recognizer that recognizes the finishing gesture that is used to end the edge creation on the target node by a touch gesture.

Remarks

The default is TOUCH_UP_PRIMARY.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

forceSnapToCandidate

: boolean

Gets or sets a property that determines whether the mouse should be forced to snap to the nearest valid port candidate if the mouse hovers over a target node.

Remarks

If the nearest port candidate is farther away than snapDistance and the mouse hovers over a valid target, this property will cause the mouse to snap to the nearest valid candidate. The default is true.

graph

: IGraph

Gets the graph this mode is acting upon.

Throws

Exception({ name: 'NotSupportedError' }): If there is no input mode context available or the context does not contain the graph in the lookup.

inputModeContext

: IInputModeContext

Gets the context instance this mode is currently installed in or null if this instance is not installed.

Remarks

Note that this instance should not be passed down to subordinate modes or instances. Instead a corresponding context that has this instance set as the parentInputMode should be used.

Implements

: OrthogonalEdgeEditingPolicy

isCreationInProgress

: boolean

Gets whether currently an edge creation is in progress.

Remarks

This property yields true after the edge creation has been started and before it has been cancelled or finalized.

nodeBorderWidthRatio

: number

Gets or sets the width of a node's border which is taken into account when deciding which way to route the first segment of an orthogonal edge.

Remarks

An edge starting inside a given margin is always pointing away from it.

orthogonalEdgeCreation

Gets or sets the policy that controls whether edges will be create orthogonally.

Remarks

By default orthogonal edge creation is enabled if orthogonal edge editing is enabled on the parent input mode.

orthogonalSnapDistance

: number

Gets or sets the distance in the view coordinate system that determines how far the mouse should be snapped to a horizontal or vertical line.

Remarks

The default value is 5.

portCandidateResolutionRecognizer

: function(any, EventArgs):boolean

Gets or sets the event recognizer that determines whether dynamic port candidates should be resolved.

Remarks

By default this is SHIFT_IS_DOWN.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

preferredMinimalEdgeDistance

: number

Gets or sets the preferred minimal distance of orthogonal edges.

Remarks

This information is needed when deciding which way to route the first segment of an orthogonal edge.

prematureEndHitTestable

Gets or sets a IHitTestable that determines, whether it is valid to finish an edge creation gesture here even if no IPortCandidates are available.

Remarks

This hit testable is only queried if forceSnapToCandidate is disabled and endHitTestable returns false or no valid port candidate is found.

If this IHitTestable returns true the current location is considered as possible end for an edge creation, even if no valid IPortCandidate is available as target port candidate.

The default implementation always returns false.

prepareRecognizer

: function(any, EventArgs):boolean

Gets or sets the event recognizer that recognizes the starting gesture that is used to prepare the edge creation on the source node.

Remarks

The default is LEFT_DOWN.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

prepareRecognizerTouch

: function(any, EventArgs):boolean

Gets or sets the event recognizer that recognizes the starting gesture that is used to prepare the edge creation on the source node via touch.

Remarks

The default is TOUCH_LONG_PRESS_PRIMARY.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

priority

: number

Gets the priority of this input mode.

Remarks

The priority will influence the order in which the modes will be installed into the canvas control. The lower the priority value, the earlier it will be installed. If two modes are installed using the same priority value, the first one will be installed earlier.

Implements

removeBendRecognizer

: function(any, EventArgs):boolean

Gets or sets the event recognizer that determines whether to remove bends.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

removeBendRecognizerTouch

: function(any, EventArgs):boolean

Gets or sets the event recognizer determines whether to remove bends via touch.

Remarks

The default is TOUCH_LONG_PRESS_SECONDARY.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

resolveSourcePortCandidates

: boolean

Gets or sets a value indicating whether DYNAMIC ports that are part of the source port candidates should be resolved for the current mouse location.

Remarks

By default this feature is enabled and the portCandidateResolutionRecognizer is configured so that the resolution mechanism is used if the user holds the shift modifier during the gesture.

Note that "source" refers to the port candidate where the edge creation started. In case of reversed edge creation this will actually become the target port of the edge.

resolveTargetPortCandidates

: boolean

Gets or sets a value indicating whether DYNAMIC ports that are part of the target port candidates should be resolved for the current mouse location.

Remarks

By default this feature is enabled and the portCandidateResolutionRecognizer is configured so that the resolution mechanism is used if the user holds the shift modifier during the gesture.

reversedEdgeCreation

: boolean

Gets or sets a value indicating whether the current edge creation should be created from its target port to its source port.

Remarks

This property is automatically set at the start of the edge creation according to the value of edgeDirectionPolicy. It can be set to a different value during edge creation to change the direction of the created edge immediately. Note that the currently assigned sourcePortCandidate will stay the same, then, and is not queried again from the getSourcePortCandidates

Examples

Setting the reversedEdgeCreation in a listener to the SourcePortCandidateChanged event allows for fully customizing the edge creation direction. The example shows how to set the direction according to the candidate's tag.

createEdgeInputMode.addSourcePortCandidateChangedListener(
  (sender, args) =>
    (createEdgeInputMode.reversedEdgeCreation =
      args.item.owner.tag === 'createFromTarget')
)

Setting this value as shown above will override the edgeDirectionPolicy.

showPortCandidates

: ShowPortCandidates

Gets or sets whether and where to display possible port candidates during the creation of the edge.

Remarks

Setting this property to SOURCE or ALL will result in displaying source port candidates for each node the mouse is located over. For a CreateEdgeInputMode as child of a default GraphEditorInputMode selected nodes will rather be moved than serve as source of an edge creation. To disable showing port candidates for selected nodes developers might set appropriate showSourcePortCandidatesHitTestable and beginHitTestables. An example IHitTestable is shown there.

The default is TARGET.

showSourcePortCandidatesHitTestable

Gets or sets a IHitTestable that determines whether to show source port candidates if the cursor hovers over the provided location.

Remarks

If showPortCandidates is set to SOURCE or ALL the source port candidates will be shown as soon as this testable returns true.

The default implementation returns true if the cursor is located over a port owner.

Examples

class UnselectedNodesHitTestable extends BaseClass(IHitTestable) {
  /**
   * @param {!IInputModeContext} context
   * @param {!Point} location
   * @returns {boolean}
   */
  isHit(context, location) {
    const graphComponent = context.canvasComponent
    return graphComponent.graph.nodes.some(
      (node) =>
        !graphComponent.selection.isSelected(node) &&
        node.style.renderer
          .getHitTestable(node, node.style)
          .isHit(context, location)
    )
  }
}class UnselectedNodesHitTestable extends BaseClass<IHitTestable>(
  IHitTestable
) {
  isHit(context: IInputModeContext, location: Point): boolean {
    const graphComponent = context.canvasComponent as GraphComponent
    return graphComponent.graph.nodes.some(
      (node) =>
        !graphComponent.selection.isSelected(node) &&
        node.style.renderer
          .getHitTestable(node, node.style)
          .isHit(context, location)
    )
  }
}

Note that the same hit testable should be set to beginHitTestable, too.

showTargetHighlight

: boolean

Gets or sets whether the owner of the current targetPortCandidate should be highlighted.

Remarks

The default is true.

snapContext

: SnapContext

Gets or sets the snapContext which manages snapping model items to certain coordinates (for instance, other items).

Remarks

If set to null (the default) this input mode tries to obtain the snapContext from the IInputModeContext. To explicitly disable snapping, a snapContext implementation that does nothing has to be set to this instance.

snapDistance

: number

Gets or sets the distance in the view coordinate system that determines how far the mouse should be snapped to a port candidate if snapToTargetCandidate is enabled.

Remarks

The default value is 20.

snapToTargetCandidate

: boolean

Gets or sets whether or not the edge's end point should snap to the current target port candidate during the creation of the edge.

Remarks

This will make the edge's end point point to the position of the target port candidate. This will result in the preview edge looking exactly like the edge after creation. By default this feature is enabled.

sourceNodeDraggingCursor

: Cursor

Gets or sets the cursor that is used once edge creation has started but the mouse is still over the new edge's source node.

Remarks

The default cursor is DEFAULT.

sourceNodeDraggingFinishedRecognizer

: function(any, EventArgs):boolean

Gets or sets the event recognizer that starts the actual edge creation while dragging.

Remarks

The default implementation starts edge creation after the mouse pointer has left the source node.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

sourcePortCandidate

: IPortCandidate

Gets or sets the candidate for the sourcePort of the edge to be created.

Remarks

This property will be populated automatically when edge creation has started.

sourcePortCandidateHitRadius

: number

Gets or sets the radius from within a valid port candidate will be considered as hit.

Remarks

The radius is in world coordinates.

This value will be considered if startOverCandidateOnly is set to true.

Default is 5.

startOverCandidateOnly

: boolean

Gets or sets whether edge creation should only start if the pointer is located directly over a valid port candidate.

Remarks

If set to false edge creation can start if the pointer is located anywhere over a port owner. In this case the closest valid port candidate will be chosen as source port.

If set to true edge creation can only start if the pointer is located over a valid port candidate. This candidate will be chosen as source port. The radius within which a port is considered as hit can be set using sourcePortCandidateHitRadius. Showing source port candidates can be enabled using showPortCandidates.

Default is false.

Examples

A possible use case is to support edge creation at selected nodes without disabling the moveInputMode. The following example sets a higher priority to the createEdgeInputMode but restricts possible start points to valid port candidates. That way, if a user drags from a valid port candidate, edge creation will start. If he drags from other regions of the selected node, the node will be moved:

graphEditorInputMode.moveInputMode.priority = 45
graphEditorInputMode.createEdgeInputMode.priority = 40
graphEditorInputMode.createEdgeInputMode.showPortCandidates =
  ShowPortCandidates.ALL
graphEditorInputMode.createEdgeInputMode.startOverCandidateOnly = true

startPoint

: Point

Gets a copy of the starting point at which the edge creation gesture started.

targetPortCandidate

: IPortCandidate

Gets or sets the current candidate for the targetPort of the edge to be created.

toggleDirectionRecognizer

: function(any, EventArgs):boolean

Gets or sets the event recognizer that recognizes gesture which toggles the direction of the created edge.

Remarks

The default instance never triggers.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

Examples

createEdgeInputMode.toggleDirectionRecognizer = KeyEventRecognizers.SHIFT_DOWN

toggleSegmentOrientationRecognizer

: function(any, EventArgs):boolean

Gets or sets the event recognizer that toggles the orientation of the first orthogonally created segment.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

useHitItemsCandidatesOnly

: boolean

Gets or sets a property that determines whether this mode should use only the target port candidates of the node the mouse currently hovers over.

Remarks

The default is true.

validBeginCursor

: Cursor

Gets or sets the cursor that indicates a valid place to begin an edge creation.

Remarks

The default cursor is POINTER.

validBendCursor

: Cursor

Gets or sets the cursor that indicates a valid place to create a bend.

Remarks

The default cursor is DEFAULT.

validBendHitTestable

Gets or sets a IHitTestable that determines whether it is valid to create a bend here.

Remarks

The default implementation returns always true.

validEndCursor

: Cursor

Gets or sets the cursor that indicates a valid place to finish creation.

Remarks

The default cursor is POINTER.

Methods

cancel

()

Cancels the editing of this mode.

Remarks

This implementation releases the mutex if it is currently owned by this instance and calls onCanceled.

Implements

createDummyBend

(location: Point) : IBend

Creates a dummy bend at the given location and adds it to the dummyEdge that will be displayed by the input mode during the creation.

Remarks

The bend must be part of the dummyEdgeGraph.

Depending on reversedEdgeCreation, the bend is added at the start or end of the dummyEdge's bend list.

Parameters

options - Object
A map of options to pass to the method.

location - Point: The coordinates to create the bend at.

Returns

↪IBend: The newly created bend or null.

createDummyEdge

() : IEdge

Creates the dummy edge that will be displayed by the input mode during the creation.

Remarks

The edge must be part of the dummyEdgeGraph and therefore be created by one of its factory methods createEdge.

Returns

↪IEdge: An IEdge implementation that can be used as a dummy.

createDummyEdgeGraph

() : IGraph

Factory method that will create the dummy graph to hold the preview of the dummyEdge.

Remarks

Note that the instance returned by this instance must accept any port as valid source and target ports for its setEdgePorts method. This will allow the preview edge to be connected to the actual graph.

Returns

↪IGraph: A graph instance that will be rendered as a preview.

createDummyTargetNode

() : INode

Creates the dummy node which is used as target for the dummyEdge during the creation.

Remarks

The node must be part of the dummyEdgeGraph and therefore be created by one of its factory methods createNode.

This implementation creates a node at origin using the nodeDefaults of the dummyEdgeGraph (zero size and invisible).

Returns

↪INode: An INode implementation that can be used as a dummy.

createDummyTargetNodePort

() : IPort

Creates the dummy port which is used as target for the dummyEdge during the creation.

Remarks

The port must be part of the dummyEdgeGraph and therefore be created by its factory method addPort with the dummyTargetNode as owner.

This port will only be used if the edge is not connected to a valid target.

The default implementation creates an invisible port at the center of the dummyTargetNode with the FreeNodePortLocationModel.

Returns

↪IPort: An IPort implementation that can be used as a dummy.

createEdge

(graph: IGraph, sourcePortCandidate: IPortCandidate, targetPortCandidate: IPortCandidate) : Promise<IEdge | null> | IEdge

Called at the end of the edge creation process if both sourcePortCandidate and targetPortCandidate have been set.

Remarks

This method will first create the new ports if necessary and then create the edge via the edgeCreator callback to the ports. After the ports are created the corresponding PortAdded events are triggered. If the edge creation is canceled by the creator callback, newly created ports will be removed again.

Parameters

options - Object
A map of options to pass to the method.

graph - IGraph: The graph to create the edge for.
sourcePortCandidate - IPortCandidate: The candidate to use for the source end of the edge. Usually the sourcePortCandidate. In case reverse edge creation, though, the value of targetPortCandidate.
targetPortCandidate - IPortCandidate: The candidate to use for the target end of the edge. Usually the targetPortCandidate. In case reverse edge creation, though, the value of sourcePortCandidate.

Returns

↪Promise<IEdge | null> | IEdge: The edge created, null, or a Promise resolving with an edge or null.

createEdgeCreationInputModeContext

() : IInputModeContext

Creates an IInputModeContext for use with the port candidates queries for the upcoming edge creation operation and the actual edge creation

Returns

↪IInputModeContext: An instance of IInputModeContext that is configured for this mode.

doStartEdgeCreation

(sourcePortCandidate: IPortCandidate, initialTargetLocation?: IPoint) : Promise<IEdge>

Synthetically starts the interactive edge creation process using the provided IPortCandidate as the source port.

Remarks

This instance needs to be installed and enabled and it needs to be able to request the input mutex in order to proceed. If any of these conditions are not satisfied, this method will throw an InvalidOperationError.

Parameters

options - Object
A map of options to pass to the method.

sourcePortCandidate - IPortCandidate: The source port candidate to use for the edge creation.
initialTargetLocation - IPoint: The initial location that is passed to updateTargetLocation.

Returns

↪Promise<IEdge>: A task that represents the asynchronous edge creation. The result of the task contains the newly created edge or null if the creation was canceled.

getClosestCandidate

(candidates: IEnumerable<IPortCandidate>, location: Point) : IPortCandidate

Finds the closest VALID candidate given a number of IPortCandidates and a location in world coordinates.

Parameters

options - Object
A map of options to pass to the method.

candidates - IEnumerable<IPortCandidate>: The candidates to find the closest from.
location - Point: The location of the mouse in world coordinates.

Returns

↪IPortCandidate: The candidate to use or null if no candidate satisfies the needs

getClosestSourceCandidate

(candidates: IEnumerable<IPortCandidate>, location: Point) : IPortCandidate

Finds the closest candidate given a number of IPortCandidates and a location in world coordinates.

Parameters

options - Object
A map of options to pass to the method.

candidates - IEnumerable<IPortCandidate>: The candidates to find the closest from.
location - Point: The location of the pointer in world coordinates.

Returns

↪IPortCandidate: The candidate to use or null if no candidate satisfies the needs

getClosestTargetCandidate

(candidates: IEnumerable<IPortCandidate>, location: Point) : IPortCandidate

Finds the closest target candidate given a number of IPortCandidates and a location in world coordinates.

Parameters

options - Object
A map of options to pass to the method.

candidates - IEnumerable<IPortCandidate>: The candidates to find the closest from.
location - Point: The location of the mouse in world coordinates.

Returns

↪IPortCandidate: The candidate to use or null if no candidate satisfies the needs or enforceBendCreationRecognizer yields true.

getDummyEdgeSnapLines

(context: GraphSnapContext, provider: ISnapLineProvider) : IEnumerable<OrthogonalSnapLine>

Gets the snap lines lines that are induced by the current dummy edge.

Parameters

options - Object
A map of options to pass to the method.

context - GraphSnapContext: The graph snap context.
provider - ISnapLineProvider: The dummy edge segment snap line provider.

Returns

↪IEnumerable<OrthogonalSnapLine>: The snap lines induced by the current dummy edge.

getFirstSegmentDirection

() : EdgeSegmentDirection

Calculates direction of first edge segment of the DummyNode.

Remarks

An edge starting in an border will always be orthogonal to the border's outer line. An edge starting in a corner will point the way the user dragged the mouse. An edge starting in the inner of the node will be directed the way dragged unless another edge that is close to the new edge (preferredMinimalEdgeDistance) already went that way.

Returns

↪EdgeSegmentDirection: A EdgeSegmentDirection defining the direction of the first edge segment.

getPortOwner

(location: Point) : IPortOwner

Retrieves the port owner at a given position in world coordinates.

Remarks

If there is a IHitTester<T> for type INode in the lookup of this mode's inputModeContext then this instance will be used for the query.

Otherwise this implementation calls the getHitTestable method of the nodes to find hit nodes and uses an IComparer<T> to determine the first hit node.

Parameters

options - Object
A map of options to pass to the method.

location - Point: The position in world coordinates.

Returns

↪IPortOwner: The node or null if no suitable node was found.

getPortOwners

() : IEnumerable<IPortOwner>

Retrieves the port owners from the graph in the order of their importance.

Remarks

This implementation only considers nodes in the graph unless allowEdgeToEdgeConnections is set to true, in which case edges are also added to the enumerable.

Returns

↪IEnumerable<IPortOwner>: An enumerable over all IPortOwners in this graph

getSource

(sourceLocation: Point) : IPortOwner

Finds the source port owner at the specified location.

Remarks

This always is the source node if allowEdgeToEdgeConnections is set to false.

This default implementation simply delegates to getPortOwner.

Parameters

options - Object
A map of options to pass to the method.

sourceLocation - Point: The location of the mouse at the beginning of the gesture.

Returns

↪IPortOwner: The port owner to use for the source of the edge creation or null.

getSourcePortCandidate

(candidates: IEnumerable<IPortCandidate>, location: Point, resolveCandidates: boolean) : IPortCandidate

Finds the best matching source port IPortCandidate for the given candidates at the provided location.

Remarks

The resolveCandidates parameter determines whether dynamic port candidates should be resolved with respect to location or simply be discarded.

Note that "source" refers to the port candidate where the edge creation started. In case of reversed edge creation this will actually become the target port of the edge.

Parameters

options - Object
A map of options to pass to the method.

candidates - IEnumerable<IPortCandidate>: The candidates.
location - Point: The location where the gesture was initiated.
resolveCandidates - boolean: Determines whether DYNAMIC ports should be resolved with respect to the location or not.

Returns

↪IPortCandidate: The candidate to use or null.

getSourcePortCandidateProvider

(sourceLocation: Point) : IPortCandidateProvider

Finds the source port candidate provider at the specified location.

Remarks

This default implementation simply delegates to getSource to get a port owner and returns the IPortCandidateProvider returned by that port owner's lookup.

Parameters

options - Object
A map of options to pass to the method.

sourceLocation - Point: The location of the mouse at the beginning of the gesture.

Returns

↪IPortCandidateProvider: The port candidate provider to use for the source of the edge creation or null.

getSourcePortCandidates

(location: Point) : IEnumerable<IPortCandidate>

Gets the source port candidates for the given location.

Remarks

This implementation first tries to get port candidate provider for the given location. If a provider is found its method getAllSourcePortCandidates is called to get the candidates.

If no owner or provider is found, null is returned.

Note that "source" refers to the port candidate where the edge creation started. In case of reversed edge creation this will actually become the target port of the edge.

Parameters

options - Object
A map of options to pass to the method.

location - Point: The location to get the port candidates for.

Returns

↪IEnumerable<IPortCandidate>: The port candidates for the given location or null if there are none.

getTarget

(targetLocation: Point) : IPortOwner

Finds the target port owner at the specified location.

Remarks

This always is a target node if allowEdgeToEdgeConnections is set to false.

This default implementation simply delegates to getPortOwner.

Note that "target" refers to the end of the edge where creation finishes. In case of reversed edge creation this will actually become the source end of the created edge.

Parameters

options - Object
A map of options to pass to the method.

targetLocation - Point: The location of the pointer at the beginning of the gesture.

Returns

↪IPortOwner: The port owner or null.

getTargetPortCandidateProvider

(sourcePortCandidate: IPortCandidate, location: Point) : IPortCandidateProvider

Retrieves the IPortCandidateProvider instance that provides the possible candidates for the target of the edge given the current source candidate.

Remarks

This implementation queries all nodes in the graph for their provider and returns a composite unless useHitItemsCandidatesOnly is set to true in which case the lookupTargetPortCandidateProvider is queried using the current target.

Note that "target" refers to the port candidate where the edge creation finishes. In case of reversed edge creation this will actually become the source port of the edge.

Parameters

options - Object
A map of options to pass to the method.

sourcePortCandidate - IPortCandidate: The candidate at the other end of the edge that has been chosen for the edge creation. In case of reversed edge creation this is actually the candidate for the target endof the edge.
location - Point: The location of the mouse.

Returns

↪IPortCandidateProvider: The provider to get the port candidates from.

getTargetPortCandidates

(location: Point, resolveCandidates: boolean) : IEnumerable<IPortCandidate>

Retrieves the target port candidates for a given location in world coordinates.

Remarks

The resolveCandidates parameter determines whether dynamic port candidates should be resolved with respect to location or simply be discarded.

This implementation delegates to getTargetPortCandidateProvider or returns an empty enumerable if no provider has been found.

Note that "target" refers to the port candidate where the edge creation finishes. In case of reversed edge creation this will actually become the source port of the edge.

Parameters

options - Object
A map of options to pass to the method.

location - Point: The location of the mouse in world coordinates.
resolveCandidates - boolean: Determines whether DYNAMIC ports should be resolved with respect to the location or not.

Returns

↪IEnumerable<IPortCandidate>: A possibly empty enumeration over all target port candidates.

install

(context: IInputModeContext, controller: ConcurrencyController)

Installs this mode into the given context that is provided by the canvas.

Remarks

In general a mode can only be installed into a single canvas at all times.

This method is called to initialize this instance. Subclasses should override this method to register the corresponding event handler delegates for the various input events they need to register with.

Overriding implementations should call the base implementation, first.

Parameters

options - Object
A map of options to pass to the method.

context - IInputModeContext: The context that this instance shall be installed into. The same instance will be passed to this instance during uninstall. A reference to the context may be kept and queried during the time the mode is installed.
controller - ConcurrencyController: The controller for this mode.

Implements

lookupSourcePortCandidateProvider

(sourceOwner: IPortOwner) : IPortCandidateProvider

Retrieves the port candidate provider instance given a source port owner.

Remarks

This implementations uses the sourceOwner's lookup to retrieve an IPortCandidateProvider implementation.

Parameters

options - Object
A map of options to pass to the method.

sourceOwner - IPortOwner: The IPortOwner to find the candidates for.

Returns

↪IPortCandidateProvider: A provider instance or null.

lookupTargetPortCandidateProvider

(sourcePortCandidate: IPortCandidate, targetOwner: IPortOwner, location: Point) : IPortCandidateProvider

Retrieves the port candidate provider instance given a source port candidate and a possible target item.

Remarks

This implementations uses the targetOwner's lookup to retrieve an IPortCandidateProvider implementation.

Parameters

options - Object
A map of options to pass to the method.

sourcePortCandidate - IPortCandidate: The current source port candidate.
targetOwner - IPortOwner: The IPortOwner to find the candidates for.
location - Point: The location of the mouse.

Returns

↪IPortCandidateProvider: A provider instance or null.

measureDistance

(candidate: IPortCandidate, location: Point) : number

Measures the distance between a port candidate and a given location.

Remarks

If a projection is set, this method returns the distance in view coordinates. Otherwise, the distance in world coordinates is returned.

Parameters

options - Object
A map of options to pass to the method.

candidate - IPortCandidate: The port candidate.
location - Point: The location in world coordinates.

Returns

↪number: The distance between the candidate and the location (in world coordinates if no projection is set; in view coordinates if it has.

onCanceled

()

Called after cancel has been called.

Remarks

Can be overridden in subclasses to perform additional actions after the mode has been canceled.

This implementation does nothing.

onConcurrencyControllerActivated

()

Called after the ConcurrencyController property of the installed ConcurrencyController has been set to true.

Remarks

Can be overridden in subclasses to perform additional actions after the mode has been activated.

Overriding implementations should call the base implementation.

onConcurrencyControllerDeactivated

()

Called after the active property of the installed ConcurrencyController has been set to false.

Remarks

Can be overridden in subclasses to perform additional actions after the mode has been deactivated.

Overriding implementations should call the base implementation.

onEdgeCreated

(evt: EdgeEventArgs)

Called after the edge has been finalized.

Remarks

This method will trigger the EdgeCreated event.

Parameters

options - Object
A map of options to pass to the method.

evt - EdgeEventArgs: The event argument holding the edge.

onEdgeCreationStarted

(evt: EdgeEventArgs)

Raises the EdgeCreationStarted event when the gesture for creating an edge has been initialized.

Parameters

options - Object
A map of options to pass to the method.

evt - EdgeEventArgs: The EdgeEventArgs instance containing the dummy edge that will be used during edge creation.

onGestureCanceled

Triggers the GestureCanceled event.

Parameters

options - Object
A map of options to pass to the method.

evt - InputModeEventArgs: The event argument that contains context information.

onGestureCanceling

Triggers the GestureCanceling event.

Parameters

options - Object
A map of options to pass to the method.

evt - InputModeEventArgs: The event argument that contains context information.

onGestureFinished

Called once the drag has been finalized.

Remarks

This method triggers the GestureFinished event.

Parameters

options - Object
A map of options to pass to the method.

evt - InputModeEventArgs: The event argument that contains context information.

onGestureFinishing

Called before the drag will be finalized.

Remarks

This method triggers the GestureFinishing event.

Parameters

options - Object
A map of options to pass to the method.

evt - InputModeEventArgs: The event argument that contains context information.

onGestureStarted

Triggers the GestureStarted event.

Parameters

options - Object
A map of options to pass to the method.

evt - InputModeEventArgs: The event argument that contains context information.

onGestureStarting

Triggers the GestureStarting event.

Parameters

options - Object
A map of options to pass to the method.

evt - InputModeEventArgs: The event argument that contains context information.

onMoved

Called at the end of each drag.

Remarks

This method triggers the Moved event.

Parameters

options - Object
A map of options to pass to the method.

evt - InputModeEventArgs: The event argument that contains context information.

onMoving

Called at the start of each drag.

Remarks

This method triggers the Moving event.

Parameters

options - Object
A map of options to pass to the method.

evt - InputModeEventArgs: The event argument that contains context information.

onPortAdded

(evt: ItemEventArgs<IPort>)

Raises the PortAdded event if the mode has added a port for the source or target node to complete the edge creation.

Parameters

options - Object
A map of options to pass to the method.

evt - ItemEventArgs<IPort>: The ItemEventArgs<T> instance containing the port that has been added.

onReversedEdgeCreationChanged

()

Called when the reversedEdgeCreation property changes and the edge creation is in progress.

Remarks

This implementation swaps source and target port of the dummy edge and adjusts the bends by reversing their locations.

onSourcePortCandidateChanged

(evt: ItemEventArgs<IPortCandidate>)

Triggers the SourcePortCandidateChanged event.

Parameters

options - Object
A map of options to pass to the method.

evt - ItemEventArgs<IPortCandidate>: The event argument that contains context information.

onStopped

()

Called after tryStop has been called.

Remarks

Can be overridden in subclasses to perform additional actions after the mode has been stopped.

This implementation does nothing.

onTargetPortCandidateChanged

(evt: ItemEventArgs<IPortCandidate>)

Triggers the TargetPortCandidateChanged event.

Parameters

options - Object
A map of options to pass to the method.

evt - ItemEventArgs<IPortCandidate>: The event argument that contains context information.

relocateDragPoint

(newLocation: Point)

Sets the position of the tip of the edge during creation.

Remarks

Has to set the dragPoint and the center of the dummyTargetNode to newLocation.

Parameters

options - Object
A map of options to pass to the method.

newLocation - Point: The location of the tip of the edge.

resolveCandidates

(candidates: IEnumerable<IPortCandidate>, location: Point) : IEnumerable<IPortCandidate>

Returns an enumerable over the given candidates where no instance has DYNAMIC validity.

Remarks

If the location has a value, method getPortCandidateAt is used to resolve the dynamic candidate to a real candidate, otherwise that candidate is discarded.

Parameters

options - Object
A map of options to pass to the method.

candidates - IEnumerable<IPortCandidate>: The candidates to possibly resolve.
location - Point: The location to resolve dynamic candidates against or null if they should be discarded instead.

Returns

↪IEnumerable<IPortCandidate>: An enumerable of non-DYNAMIC port candidates.

tryStop

() : boolean

Called by the client in order to stop a current editing progress.

Remarks

This should stop the current edit, if one is in progress and possibly commit all of the changes. If stopping is not possible, this method can return false

Returns

↪boolean: true if and only if the editing has been stopped or there was no edit in progress

Implements

uninstall

(context: IInputModeContext)

Uninstalls this mode from the given context.

Remarks

This code should clean up all changes made to the canvas in the install method. After a mode has been uninstalled it can be installed again into the same or another canvas.

Overriding implementations should call the base implementation after their own code.

Parameters

options - Object
A map of options to pass to the method.

context - IInputModeContext: The context to deregister from. This is the same instance that had been passed to install during installation.

Implements