GraphEditorInputMode

GraphEditorInputMode

Implemented Interfaces

Remarks

This class delegates most of the work to minor IInputMode implementations. However, it contains a number of properties that influence the general behavior:

selectableItems – Determines the types of items that can be selected at all.
selectablePredicate – Allows to further constrain selectableItems with a predicate.
marqueeSelectableItems – Determines the types of items that can be selected with marquee selection and lasso selection.
clickSelectableItems – Determines the types of items that can be selected by clicking or tapping them.
detailSelectionRecognizer – Determines when to use a detail click selection mode, which allows for selecting the item that is directly under the mouse without taking into account the clickHitTestOrder.
clickHitTestOrder – Determines the priorities for hit tests during mouse or stylus clicks or touch taps to determine which items should get click events.
doubleClickHitTestOrder – Determines the priorities for hit tests when double-clicking items.
movableSelectedItems – Determines the type of the items that can be moved with the mouse.
showHandleItems – Determines the type of the items whose IHandles should be shown and movable by the handleInputMode.
deletableItems – Determines the type of the items that can be deleted by deleteSelection.
deletablePredicate – Allows to further constrain deletableItems with a predicate.
labelEditableItems – Determines the type of the items that can have their labels edited.
allowGroupingOperations – Determines whether this input mode should allow grouping operations at all.
allowGroupSelection – Determines whether this input mode should allow grouping the current selection.
allowUngroupSelection – Determines whether this input mode should allow ungrouping the current selection.
allowClearSelection – Determines whether this input mode should allow clearing the selection. This has implications both for the DESELECT_ALL and for click/marquee selection which usually clear the selection unless the multiSelectionRecognizer is pressed.
allowClipboardOperations – Determines whether this input mode should enable graph clipboard operations.
allowDuplicate – Determines whether this input mode should enable GraphClipboard's duplicate operation.
allowEditLabel – Determines whether this input mode should allow editing labels.
allowReparentNodes – Determines whether this input mode should allow reparenting nodes to other groups.
allowReparentToNonGroupNodes – Determines whether this input mode should allow reparenting nodes to other nodes which are not group nodes, transforming these into group nodes.
allowAdjustGroupNodeSize – Determines whether the ADJUST_GROUP_NODE_SIZE command should be handled.
allowCreateNode – Determines whether this input mode should allow creating new nodes via left mouse button clicks, stylus clicks or touch taps.
allowCreateEdge – Determines whether createEdgeInputMode should be enabled to allow for creating new edges.
allowEditLabelOnDoubleClick – Determines whether labels should be editable on otherwise unhandled double clicks or taps.
allowReverseEdge – Determines whether edges can be reversed.
allowCreateBend – Determines whether the createBendInputMode should be enabled to allow for creating new bends.
allowEnterGroup – Determines whether the mode allows for entering group nodes in IFoldingViews.
allowExitGroup – Determines whether the mode allows for exiting the current group node in IFoldingViews.
allowCollapseGroup – Determines whether the mode allows for collapsing group nodes in IFoldingViews.
allowExpandGroup – Determines whether the mode allows for expanding group nodes in IFoldingViews.
hoverItems – Determines which items should be reported as being hovered through the corresponding event in this instance's ItemHoverInputMode.

By default, GraphEditorInputMode supports the following commands. Most of them have default keybindings:

UNDO (Ctrl+Z) – Undoes the last operation. Can be disabled with allowUndoOperations.
REDO (Ctrl+Y) – Redoes the last operation that was undone. Can be disabled with allowUndoOperations.
SELECT_ALL (Ctrl+A) – Selects all items. Can be configured with selectableItems and selectablePredicate.
DESELECT_ALL (Ctrl+Shift+A) – Clears the current selection. Can be disabled with allowClearSelection.
CUT (Ctrl+X, Shift+Del) – Cuts the current selection and places it in the clipboard. Can be disabled with allowClipboardOperations.
COPY (Ctrl+C, Ctrl+Ins) – Copies the current selection to the clipboard. Can be disabled with allowClipboardOperations.
PASTE (Ctrl+V, Shift+Ins) – Pastes the current clipboard contents into the graph. Can be disabled with allowClipboardOperations.
DUPLICATE (Ctrl+D) – Duplicates the current selection. Can be disabled with allowDuplicate.
DELETE (Del) – Deletes the current selection. Can be configured with deletablePredicate and deletableItems.
ADD_LABEL (Shift+F2) – Adds a new label to the selected item. Can be configured with labelEditableItems and disabled with allowAddLabel.
EDIT_LABEL (F2) – Edits an existing label or adds a new one to the selected item. Can be configured with labelEditableItems and disabled with allowEditLabel.
REVERSE_EDGE (Ctrl+R) – Reverses the direction of the selected edges. Can be disabled with allowReverseEdge.
GROUP_SELECTION (Ctrl+G) – Creates a new group node and places the currently selected nodes into it. Can be disabled with allowGroupingOperations and allowGroupSelection.
UNGROUP_SELECTION (Ctrl+U) – Makes each of the currently selected nodes a direct child of the root group. Can be disabled with allowGroupingOperations and allowUngroupSelection.
ADJUST_GROUP_NODE_SIZE (Ctrl+Shift+G) – Adjusts the sizes of the selected group nodes to fit exactly around their contents. Can be disabled with allowGroupingOperations and allowAdjustGroupNodeSize.
RAISE – Raises the visual representations of IModelItems.
LOWER – Lowers the visual representations of IModelItems.
TO_FRONT – Raises the visual representations of IModelItems to the front.
TO_BACK – Lowers the visual representations of IModelItems to the back.

All commands can also be selectively disabled by using the availableCommands collection. Furthermore, there are a few commands provided by navigationInputMode:

COLLAPSE_GROUP (Alt+Left) – Collapses the currently selected group nodes. Can be disabled with allowCollapseGroup of navigationInputMode.
EXPAND_GROUP (Alt+Right) – Expands the currently selected group nodes. Can be disabled with allowExpandGroup of navigationInputMode.
TOGGLE_EXPANSION_STATE (Alt+Shift+Left or Alt+Shift+Right) – Collapses expanded group nodes and expands collapsed group nodes in the current selection. Can be disabled with allowCollapseGroup and allowExpandGroup of navigationInputMode.
ENTER_GROUP (Alt+Down) – Replaces the currently displayed graph with the contents of the selected group node. Can be disabled with allowEnterGroup of navigationInputMode.
EXIT_GROUP (Alt+Up) – Replaces the currently displayed graph with the contents of the parent of the group node whose contents are currently displayed. Can be disabled with allowExitGroup of navigationInputMode.

GraphEditorInputMode can be configured to automatically adjust the content bounds of the graphComponent whenever the graph is changed using gestures.

This class contains a number of public methods that can be used to programmatically perform the corresponding actions, too.

Setting the nodeCreator to another instance or null changes the way nodes are created. Also, the various minor IInputMode instances can be disabled, to change the behavior, too.

This input mode manages a set of specialized input modes, each handling a specific part of the interaction with the graph. The following list details those along with their default priorities. Lower priorities come earlier when handling events.

waitInputMode (−1) – Disables this input mode when layouts or animations run.
keyboardInputMode (0) – Handles commands and arbitrary keyboard shortcuts.
handleInputMode (10) – Deals with displaying handles on or around items and interacting with them.
clickInputMode (20) – Handles mouse and stylus clicks and double-clicks as well as touch taps and double-taps.
createEdgeInputMode (100) – Allows creating edges
moveViewportInputMode (105) – Allows panning the viewport.
moveSelectedItemsInputMode (110) – Allows moving selected items.
moveUnselectedItemsInputMode (120) – Allows moving unselected items.
createBendInputMode (130) – Allows creating bends on edges.
lassoSelectionInputMode (150) – Allows dragging a lasso path to select items within it. Disabled by default.
marqueeSelectionInputMode (160) – Allows dragging a rectangle to select items within it.
itemHoverInputMode (200) – Provides events to indicate that the mouse pointer hovers over an item.
navigationInputMode (210) – Provides general navigation facilities, such as navigating from one item to another with the arrow keys, collapsing, expanding, entering or exiting groups, as well as providing commands for those tasks.
contextMenuInputMode (220) – Handles querying the context menu contents based on a location as well as preparing the menu for display.
nodeDropInputMode (300) – Allows dropping nodes on the graphComponent, e.g. for dragging items from a palette.
labelDropInputMode (310) – Allows dropping labels on the graphComponent, e.g. for dragging items from a palette.
portDropInputMode (320) – Allows dropping ports on the graphComponent, e.g. for dragging items from a palette.
toolTipInputMode (400) – Handles tool tips.
editLabelInputMode (500) – Handles editing labels.

To enable single selection mode, disable MarqueeSelectionInputMode and set multiSelectionRecognizer to NEVER. Remove SELECT_ALL and TOGGLE_ITEM_SELECTION from availableCommands and from navigationInputMode.availableCommands. An example can be found in Demo.yFiles.Graph.Input.SingleSelection.

Examples

The GraphEditorInputMode can be installed by setting it as inputMode on the graphComponent it handles.

Installing a configured GraphEditorInputMode

graphComponent.inputMode = new GraphEditorInputMode({
  allowGroupingOperations: true,
  snapContext: new GraphSnapContext(),
  orthogonalEdgeEditingContext: new OrthogonalEdgeEditingContext({
    enabled: false,
  }),
})

Note that the GraphEditorInputMode also supports grouping operations. This functionality, however, is disabled by default and has to be enabled. The following example shows how to enable grouping operations on the GraphEditorInputMode together with some detail settings:

Configuring grouping operations

// first and foremost: enable grouping operations at all
geim.allowGroupingOperations = true
// support grouping but not ungrouping the currently selected nodes
geim.allowGroupSelection = true
geim.allowUngroupSelection = false
// forbid adjusting the size with Ctrl-Shift-G
geim.allowAdjustGroupNodeSize = false
// allow adding nodes to other group nodes by moving
geim.allowReparentNodes = true
// also allow to add nodes to non-group nodes, transforming these into groups
geim.allowReparentToNonGroupNodes = true
// support navigation like opening and closing groups
geim.navigationInputMode.allowExpandGroup = true
geim.navigationInputMode.allowCollapseGroup = true
// forbid entering and exiting groups
geim.navigationInputMode.allowEnterGroup = false
geim.navigationInputMode.allowExitGroup = false

Selecting multiple items is supported by default. Enabling selection for only one or no selected item at once is described in the Developer's Guide and shown in the following example:

// disable marquee and lasso selection
geim.marqueeSelectionInputMode.enabled = false
geim.lassoSelectionInputMode.enabled = false
// disable multi selection with Ctrl-Click
geim.multiSelectionRecognizer = EventRecognizers.NEVER

// deactivate commands that can lead to multi selection
geim.availableCommands.remove(Command.TOGGLE_ITEM_SELECTION)
geim.availableCommands.remove(Command.SELECT_ALL)

geim.navigationInputMode.availableCommands.remove(
  Command.EXTEND_SELECTION_LEFT,
)
geim.navigationInputMode.availableCommands.remove(
  Command.EXTEND_SELECTION_UP,
)
geim.navigationInputMode.availableCommands.remove(
  Command.EXTEND_SELECTION_DOWN,
)
geim.navigationInputMode.availableCommands.remove(
  Command.EXTEND_SELECTION_RIGHT,
)

// disable selection of (possibly multiple) items
mode.pasteSelectableItems = GraphItemTypes.NONE

Related Programming Samples

Events Viewer: Shows the multitude of events provided by the classes IGraph, GraphComponent, and the Input Modes.
Graph Editor: Shows the graph editing features of the graph component.
Single Selection: Shows how to configure GraphEditorInputMode for single selection mode.
06 Basic Interaction: Shows the default interaction gestures that are provided by class GraphEditorInputMode.

Type Details

yFiles module: view

Constructors

GraphEditorInputMode

()

Creates a new instance that is not bound to an existing graph or selection, initially.

Remarks

The IGraph and IGraphSelection instances are obtained later from the IInputModeContext once this mode gets installed in a suitable canvas control.

ParametersOptions Overload

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

orthogonalEdgeEditingContext - OrthogonalEdgeEditingContext

The orthogonal edge editing context. This option either sets the value directly or recursively sets properties to the instance of the orthogonalEdgeEditingContext property on the created object.

orthogonalBendRemoval - OrthogonalEdgeEditingPolicy

The policy that controls whether removing bends from an orthogonal edge will keep the edge orthogonal. This option sets the orthogonalBendRemoval property on the created object.

reparentNodeHandler - IReparentNodeHandler

The IReparentNodeHandler that is used for moving nodes out of group nodes or into other group nodes. This option sets the reparentNodeHandler property on the created object.

creationSelectableItems - GraphItemTypes

Which types of items should be selected after creation. This option sets the creationSelectableItems property on the created object.

selectAfterCreationPredicate - function(IModelItem):boolean

A predicate that is queried to determine whether an item should be selected after creation. This option sets the selectAfterCreationPredicate property on the created object.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

pasteSelectableItems - GraphItemTypes

Which types of items should be selected after paste or duplicateSelection. This option sets the pasteSelectableItems property on the created object.

pasteSelectablePredicate - function(IModelItem):boolean

A predicate that is queried to determine whether an item should be selected after paste or duplicateSelection. This option sets the pasteSelectablePredicate property on the created object.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

smartPasteSelection - boolean

Whether nodes, edges, labels, and ports should only be selected after paste or duplicateSelection if they were selected when they were initially copied into the clipboard. This option sets the smartPasteSelection property on the created object.

movableSelectedItems - GraphItemTypes

Which types of items should be movable using the moveSelectedItemsInputMode. This option sets the movableSelectedItems property on the created object.

movableUnselectedItems - GraphItemTypes

Which types of items should be movable using the moveUnselectedItemsInputMode. This option sets the movableUnselectedItems property on the created object.

deletableItems - GraphItemTypes

Which types of items may be deleted using the deleteSelection action. This option sets the deletableItems property on the created object.

deletablePredicate - function(IModelItem):boolean

A predicate that is queried to determine whether an IModelItem can be deleted or not. This option sets the deletablePredicate property on the created object.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

handleInputMode - HandleInputMode

The HandleInputMode as child input mode. This option either sets the value directly or recursively sets properties to the instance of the handleInputMode property on the created object.

showHandleItems - GraphItemTypes

Which types of items should have their IHandles shown. This option sets the showHandleItems property on the created object.

useCurrentItemForCommands - boolean

A value indicating whether to use the currentItem as a fallback for the commands if no item is provided in the parameter and the current selection is empty. This option sets the useCurrentItemForCommands property on the created object.

allowEditLabel - boolean

A value determining whether the EDIT_LABEL command should be handled. This option sets the allowEditLabel property on the created object.

allowEditLabelOnDoubleClick - boolean

A value determining whether double-clicking should start label editing. This option sets the allowEditLabelOnDoubleClick property on the created object.

allowEditLabelOnTyping - boolean

A value determining whether starting to type should start label editing. This option sets the allowEditLabelOnTyping property on the created object.

allowAddLabel - boolean

A value determining whether the ADD_LABEL command should be handled. This option sets the allowAddLabel property on the created object.

editLabelInputMode - EditLabelInputMode

The EditLabelInputMode which handles label editing. This option either sets the value directly or recursively sets properties to the instance of the editLabelInputMode property on the created object.

labelEditableItems - GraphItemTypes

Which types of items may have their labels edited or added. This option sets the labelEditableItems property on the created object.

editLabelPredicate - function(IModelItem):boolean

A predicate that is queried to determine whether the given label or a label owned by the given owner should be edited in response to a EDIT_LABEL command. This option sets the editLabelPredicate property on the created object.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

addLabelPredicate - function(IModelItem):boolean

A predicate that is queried to determine whether a label can be added to the given IModelItem. This option sets the addLabelPredicate property on the created object.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

moveSelectedItemsInputMode - MoveInputMode

The MoveInputMode as child mode. This option either sets the value directly or recursively sets properties to the instance of the moveSelectedItemsInputMode property on the created object.

moveUnselectedItemsInputMode - MoveInputMode

The MoveInputMode which handles unselected graph items. This option either sets the value directly or recursively sets properties to the instance of the moveUnselectedItemsInputMode property on the created object.

adjustContentBoundsPolicy - AdjustContentBoundsPolicy

A property that determines whether and how this instance should automatically adjust the contentBounds if the graph changes. This option sets the adjustContentBoundsPolicy property on the created object.

contentMargins - Insets

The margins to use for updateContentBounds in adjustContentBounds calls. This option sets the contentMargins property on the created object.

snapContext - GraphSnapContext

The GraphSnapContext instance that handles interactive snapping of elements during drag operations like movements. This option either sets the value directly or recursively sets properties to the instance of the snapContext property on the created object.

allowGroupingOperations - boolean

A value indicating whether grouping operations like grouping selected nodes or moving nodes into group nodes should be enabled. This option sets the allowGroupingOperations property on the created object.

allowGroupSelection - boolean

A value determining whether the GROUP_SELECTION command should be handled. This option sets the allowGroupSelection property on the created object.

allowAdjustGroupNodeSize - boolean

A value determining whether the ADJUST_GROUP_NODE_SIZE command should be handled. This option sets the allowAdjustGroupNodeSize property on the created object.

allowUngroupSelection - boolean

A value determining whether the UNGROUP_SELECTION command should be handled. This option sets the allowUngroupSelection property on the created object.

allowClearSelection - boolean

A value determining whether the DESELECT_ALL command should be handled. This option sets the allowClearSelection property on the created object.

allowPaste - boolean

A value determining whether the PASTE command should be handled. This option sets the allowPaste property on the created object.

allowDuplicate - boolean

A value determining whether the DUPLICATE command should be handled. This option sets the allowDuplicate property on the created object.

allowUndoOperations - boolean

A value indicating whether undo operations, that is, UNDO and REDO should be enabled. This option sets the allowUndoOperations property on the created object.

allowReparentNodes - boolean

A value indicating whether moving nodes out of group nodes or into other group nodes is allowed. This option sets the allowReparentNodes property on the created object.

allowReparentToNonGroupNodes - boolean

A value indicating whether moving nodes into non-group nodes is allowed to convert them into group nodes. This option sets the allowReparentToNonGroupNodes property on the created object.

allowCreateNode - boolean

A value determining whether node creation by clicking on an empty canvas location is enabled. This option sets the allowCreateNode property on the created object.

allowCreateBend - boolean

A value determining whether bend creation should be enabled. This option sets the allowCreateBend property on the created object.

allowCreateEdge - boolean

A value determining whether edge creation should be enabled. This option sets the allowCreateEdge property on the created object.

reversableEdgePredicate - function(IEdge):boolean

A predicate that is queried to determine whether an edge should be reversed by reverseEdge, reverseEdges, or reverseEdges. This option sets the reversableEdgePredicate property on the created object.

Signature Details

function(obj: IEdge) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IEdge: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

allowReverseEdge - boolean

A value indicating whether the REVERSE_EDGE command should be handled. This option sets the allowReverseEdge property on the created object.

nodeCreator - function(IInputModeContext, IGraph, Point, INode):Promise<INode|null>

The callback that is responsible for creating a new node, for instance, in response to a mouse or stylus click or touch tap. This option sets the nodeCreator property on the created object.

Signature Details

function(context: IInputModeContext, graph: IGraph, location: Point, parent: INode) : Promise<INode | null> | INode

A callback that is used by GraphEditorInputMode for the creation of nodes.

This callback can be used to conveniently provide a hook to the GraphEditorInputMode using its nodeCreator property.

Parameters

context - IInputModeContext: The context for which the node should be created.
graph - IGraph: The graph to create the node for.
location - Point: The location where the node shall be created.
parent - INode: A group node at the click location which can be used as parent node for the newly-created node. null if the new node should be created at root level.

Returns

Promise<INode | null> | INode: The created node or null.

createEdgeInputMode - CreateEdgeInputMode

The CreateEdgeInputMode which handles interactive edge creation. This option either sets the value directly or recursively sets properties to the instance of the createEdgeInputMode property on the created object.

autoSelectSelfLoopBends - boolean

A property that determines whether clicking on a node should automatically select all bends of self-loops adjacent to that node. This option sets the autoSelectSelfLoopBends property on the created object.

createBendInputMode - CreateBendInputMode

The CreateBendInputMode which handles interactive bend creation on existing edges. This option either sets the value directly or recursively sets properties to the instance of the createBendInputMode property on the created object.

nodeDropInputMode - NodeDropInputMode

The NodeDropInputMode that is responsible for handling drag and drop operations of nodes onto the graphComponent. This option either sets the value directly or recursively sets properties to the instance of the nodeDropInputMode property on the created object.

labelDropInputMode - LabelDropInputMode

The LabelDropInputMode that is responsible for handling drag and drop operations of labels onto the graphComponent. This option either sets the value directly or recursively sets properties to the instance of the labelDropInputMode property on the created object.

portDropInputMode - PortDropInputMode

The PortDropInputMode that is responsible for handling drag and drop operations of ports onto the graphComponent. This option either sets the value directly or recursively sets properties to the instance of the portDropInputMode property on the created object.

showHandlePredicate - function(IModelItem):boolean

A predicate that is queried to determine whether to show the handles for the given item. This option sets the showHandlePredicate property on the created object.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

movableSelectedItemsPredicate - function(IModelItem):boolean

A predicate that is queried to determine whether moving an item is allowed. This option sets the movableSelectedItemsPredicate property on the created object.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

movableUnselectedItemsPredicate - function(IModelItem):boolean

A predicate that is queried to determine whether moving an item is allowed when it is not selected. This option sets the movableUnselectedItemsPredicate property on the created object.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

waiting - boolean

Whether the user interaction should be blocked. This option sets the waiting property on the created object.

clickHitTestOrder - GraphItemTypes[]

The order of the types of items that should be used to determine what item has been clicked or tapped. This option sets the clickHitTestOrder property on the created object.

doubleClickHitTestOrder - GraphItemTypes[]

The order of the types of items that should be used to determine what item has been double-clicked or double-tapped. This option sets the doubleClickHitTestOrder property on the created object.

detailSelectionRecognizer - function(EventArgs, unknown):boolean

The event recognizer that determines if a click or tap should select the item that is currently visible under the pointer cursor, without giving more important items higher priority. This option sets the detailSelectionRecognizer property on the created object.

Signature Details

function(evt: EventArgs, eventSource: unknown) : 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

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

Returns

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

cyclicSelectionRecognizer - function(EventArgs, unknown):boolean

The event recognizer that determines if a click or tap should cycle through all the items that are currently under the mouse cursor. This option sets the cyclicSelectionRecognizer property on the created object.

Signature Details

function(evt: EventArgs, eventSource: unknown) : 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

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

Returns

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

multiSelectionRecognizer - function(EventArgs, unknown):boolean

The event recognizer that determines if a click or tap is deemed a multi-selection gesture. This option sets the multiSelectionRecognizer property on the created object.

Signature Details

function(evt: EventArgs, eventSource: unknown) : 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

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

Returns

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

clickableItems - GraphItemTypes

Which types of items should be reported through the item click events. This option sets the clickableItems property on the created object.

clickablePredicate - function(IModelItem):boolean

A predicate that is queried to determine whether an item can be clicked. This option sets the clickablePredicate property on the created object.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

doubleClickablePredicate - function(IModelItem):boolean

A predicate that is queried to determine whether an item can be double clicked. This option sets the doubleClickablePredicate property on the created object.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

focusableItems - GraphItemTypes

The items that can be given focus via the setCurrentItem method. This option sets the focusableItems property on the created object.

focusablePredicate - function(IModelItem):boolean

A predicate that is queried to determine whether an item should be set to the current item. This option sets the focusablePredicate property on the created object.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

selectableItems - GraphItemTypes

Which types of items should be selectable at all. This option sets the selectableItems property on the created object.

selectablePredicate - function(IModelItem):boolean

A predicate that is queried to determine whether a given IModelItem is selectable. This option sets the selectablePredicate property on the created object.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

clickSelectableItems - GraphItemTypes

Which types of items should be selectable by mouse clicks. This option sets the clickSelectableItems property on the created object.

clickSelectablePredicate - function(IModelItem):boolean

A predicate that is queried to determine whether an item should be selected when clicked with the primary mouse button. This option sets the clickSelectablePredicate property on the created object.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

marqueeSelectableItems - GraphItemTypes

Which types of items should be selected during marquee selections or lasso selection. This option sets the marqueeSelectableItems property on the created object.

marqueeSelectablePredicate - function(IModelItem):boolean

A predicate that is queried to determine whether an item can be selected by marquee or lasso selection. This option sets the marqueeSelectablePredicate property on the created object.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

ignoreVoidStyles - boolean

A value indicating whether void styles should be ignored when selecting or focusing items. This option sets the ignoreVoidStyles property on the created object.

contextMenuInputMode - ContextMenuInputMode

The ContextMenuInputMode which handles context menus on a CanvasComponent. This option either sets the value directly or recursively sets properties to the instance of the contextMenuInputMode property on the created object.

contextMenuItems - GraphItemTypes

The types of items a context menu should be queried for. This option sets the contextMenuItems property on the created object.

populateContextMenuPredicate - function(IModelItem):boolean

A predicate that is queried to determine whether a context menu should be shown for an item. This option sets the populateContextMenuPredicate property on the created object.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

toolTipInputMode - ToolTipInputMode

The toolTipInputMode which is responsible for displaying Tooltips on a CanvasComponent. This option either sets the value directly or recursively sets properties to the instance of the toolTipInputMode property on the created object.

toolTipItems - GraphItemTypes

The types of the items that should be queried for a tooltip. This option sets the toolTipItems property on the created object.

queryToolTipPredicate - function(IModelItem):boolean

A predicate that is queried to determine whether a tool tip should be queried for an item. This option sets the queryToolTipPredicate property on the created object.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

clickInputMode - ClickInputMode

The ClickInputMode that is used by this instance to determine clicks. This option either sets the value directly or recursively sets properties to the instance of the clickInputMode property on the created object.

marqueeSelectionInputMode - MarqueeSelectionInputMode

The MarqueeSelectionInputMode which handles the selection of multiple elements by drawing a rectangle around them. This option either sets the value directly or recursively sets properties to the instance of the marqueeSelectionInputMode property on the created object.

lassoSelectionInputMode - LassoSelectionInputMode

The LassoSelectionInputMode which handles the selection of multiple elements by drawing a polygon around them. This option either sets the value directly or recursively sets properties to the instance of the lassoSelectionInputMode property on the created object.

navigationInputMode - NavigationInputMode

The NavigationInputMode which is responsible for navigating and traversing the elements in the IGraph. This option either sets the value directly or recursively sets properties to the instance of the navigationInputMode property on the created object.

waitInputMode - WaitInputMode

The WaitInputMode that is provided by this instance for those who need to make use of it. This option either sets the value directly or recursively sets properties to the instance of the waitInputMode property on the created object.

itemHoverInputMode - ItemHoverInputMode

The ItemHoverInputMode that is provided by this instance to detect when the cursor hovers over a graph item. This option either sets the value directly or recursively sets properties to the instance of the itemHoverInputMode property on the created object.

moveViewportInputMode - MoveViewportInputMode

The MoveViewportInputMode associated with this instance. This option either sets the value directly or recursively sets properties to the instance of the moveViewportInputMode property on the created object.

keyboardInputMode - KeyboardInputMode

The KeyboardInputMode associated with this instance. This option either sets the value directly or recursively sets properties to the instance of the keyboardInputMode property on the created object.

allowClipboardOperations - boolean

A property that determines whether clipboard operations with the usual shortcuts are enabled on the canvas. This option sets the allowClipboardOperations property on the created object.

hitTester - IHitTester

The hitTester property. This option sets the hitTester property on the created object.

skipHitLabels - boolean

A value that specifies whether during hit testing, labels should be skipped at all. This option sets the skipHitLabels property on the created object.

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.

priority - number

defaultCursor - Cursor

The cursor to use whenever no child mode prefers a different cursor. This option sets the defaultCursor property on the created object.

Properties

addLabelPredicate

: function(IModelItem):boolean

Gets or sets a predicate that is queried to determine whether a label can be added to the given IModelItem.

Remarks

The default value returns the result of the labelEditableItems property for the given item.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

Examples

The following code ensures that labels can only be added to items without a label.

mode.addLabelPredicate = (item) =>
  item instanceof ILabelOwner && item.labels.size == 0

adjustContentBoundsPolicy

: AdjustContentBoundsPolicy

Gets or sets a property that determines whether and how this instance should automatically adjust the contentBounds if the graph changes.

Remarks

The adjustContentBounds method is called whenever the content changes. The default is UNION.

Property Value

Determines whether and how this instance should automatically adjust the contentBounds if the graph changes.

allowAddLabel

: boolean

Gets or sets a value determining whether the ADD_LABEL command should be handled.

Remarks

If this flag is set to true pressing Shift+F2 will start the label editor. By default, this feature is enabled.

Examples

Configure label editing

// forbid adding new labels
mode.allowAddLabel = false
// allow editing existing labels
mode.allowEditLabel = true
// start label editing on double click
mode.allowEditLabelOnDoubleClick = true
// only support editing node labels
mode.labelEditableItems = GraphItemTypes.NODE | GraphItemTypes.NODE_LABEL

allowAdjustGroupNodeSize

: boolean

Gets or sets a value determining whether the ADJUST_GROUP_NODE_SIZE command should be handled.

Remarks

This setting has no effect if grouping operations are generally disallowed by setting allowGroupingOperations to false.

The default value is true.

Examples

The following example shows how to configure the grouping support on the GraphEditorInputMode. Note that general grouping support has to be enabled explicitly with allowGroupingOperations:

// first and foremost: enable grouping operations at all
geim.allowGroupingOperations = true
// support grouping but not ungrouping the currently selected nodes
geim.allowGroupSelection = true
geim.allowUngroupSelection = false
// forbid adjusting the size with Ctrl-Shift-G
geim.allowAdjustGroupNodeSize = false
// allow adding nodes to other group nodes by moving
geim.allowReparentNodes = true
// also allow to add nodes to non-group nodes, transforming these into groups
geim.allowReparentToNonGroupNodes = true

allowClearSelection

: boolean

Gets or sets a value determining whether the DESELECT_ALL command should be handled.

Remarks

The default value is true.

Examples

mode.allowClearSelection = true

allowClipboardOperations

: boolean

Gets or sets a property that determines whether clipboard operations with the usual shortcuts are enabled on the canvas.

Remarks

Default value is true

Examples

Disabling clipboard operations

mode.allowClipboardOperations = false

Defined in

: IObservableCollection<Command>

allowCreateBend

: boolean

Gets or sets a value determining whether bend creation should be enabled.

Remarks

This property delegates to createBendInputMode's enabled property.

The default value is true.

Examples

Enabling or disabling item creation

mode.allowCreateBend = true
mode.allowCreateEdge = true
mode.allowCreateNode = true

allowCreateEdge

: boolean

Gets or sets a value determining whether edge creation should be enabled.

Remarks

This property delegates to createEdgeInputMode's enabled property.

The default value is true.

Examples

Enabling or disabling item creation

mode.allowCreateBend = true
mode.allowCreateEdge = true
mode.allowCreateNode = true

allowCreateNode

: boolean

Gets or sets a value determining whether node creation by clicking on an empty canvas location is enabled.

Remarks

To disable node creation via drag and drop gestures, the nodeDropInputMode must be disabled, too. However, it is disabled by default.

The default value is true.

Examples

Enabling or disabling item creation

mode.allowCreateBend = true
mode.allowCreateEdge = true
mode.allowCreateNode = true

allowDuplicate

: boolean

Gets or sets a value determining whether the DUPLICATE command should be handled.

Remarks

This setting has no effect if clipboard operations are generally disallowed by setting allowClipboardOperations to false.

The default value is true.

Examples

mode.allowClipboardOperations = true
mode.allowDuplicate = true
mode.allowPaste = true

allowEditLabel

: boolean

Gets or sets a value determining whether the EDIT_LABEL command should be handled.

Remarks

If this flag is set to true pressing F2 will start the label editor. By default, this feature is enabled.

Examples

Configure label editing

// forbid adding new labels
mode.allowAddLabel = false
// allow editing existing labels
mode.allowEditLabel = true
// start label editing on double click
mode.allowEditLabelOnDoubleClick = true
// only support editing node labels
mode.labelEditableItems = GraphItemTypes.NODE | GraphItemTypes.NODE_LABEL

allowEditLabelOnDoubleClick

: boolean

Gets or sets a value determining whether double-clicking should start label editing.

Remarks

If enabled, double-clicking an item will automatically execute the EDIT_LABEL command.

This setting has no effect if label editing is generally disallowed by setting allowEditLabel to false.

The default value is true.

Examples

Configure label editing

// forbid adding new labels
mode.allowAddLabel = false
// allow editing existing labels
mode.allowEditLabel = true
// start label editing on double click
mode.allowEditLabelOnDoubleClick = true
// only support editing node labels
mode.labelEditableItems = GraphItemTypes.NODE | GraphItemTypes.NODE_LABEL

allowEditLabelOnTyping

: boolean

Gets or sets a value determining whether starting to type should start label editing.

Remarks

If enabled, starting to type will automatically edit the current label or create a new label with the typed text.

This setting has no effect if label editing is generally disallowed by setting allowEditLabel to false.

The default value is true.

allowGroupingOperations

: boolean

Gets or sets a value indicating whether grouping operations like grouping selected nodes or moving nodes into group nodes should be enabled.

Remarks

Setting this property to false effectively disables handling of all grouping commands. If this property is set to true the related properties allowGroupSelection, allowUngroupSelection, and allowReparentNodes allow for selectively enabling or disabling only certain grouping operations.

The default value is true.

Property Value

Whether grouping operations are supported by this input mode.

Examples

The following example shows how to enable grouping operations on the GraphEditorInputMode together with some detail settings:

// first and foremost: enable grouping operations at all
geim.allowGroupingOperations = true
// support grouping but not ungrouping the currently selected nodes
geim.allowGroupSelection = true
geim.allowUngroupSelection = false
// forbid adjusting the size with Ctrl-Shift-G
geim.allowAdjustGroupNodeSize = false
// allow adding nodes to other group nodes by moving
geim.allowReparentNodes = true
// also allow to add nodes to non-group nodes, transforming these into groups
geim.allowReparentToNonGroupNodes = true

allowGroupSelection

: boolean

Gets or sets a value determining whether the GROUP_SELECTION command should be handled.

Remarks

This setting has no effect if grouping operations are generally disallowed by setting allowGroupingOperations to false.

The default value is true.

Examples

The following example shows how to configure the grouping support on the GraphEditorInputMode. Note that general grouping support has to be enabled explicitly with allowGroupingOperations:

// first and foremost: enable grouping operations at all
geim.allowGroupingOperations = true
// support grouping but not ungrouping the currently selected nodes
geim.allowGroupSelection = true
geim.allowUngroupSelection = false
// forbid adjusting the size with Ctrl-Shift-G
geim.allowAdjustGroupNodeSize = false
// allow adding nodes to other group nodes by moving
geim.allowReparentNodes = true
// also allow to add nodes to non-group nodes, transforming these into groups
geim.allowReparentToNonGroupNodes = true

allowPaste

: boolean

Gets or sets a value determining whether the PASTE command should be handled.

Remarks

This setting has no effect if clipboard operations are generally disallowed by setting allowClipboardOperations to false.

The default value is true.

Examples

mode.allowClipboardOperations = true
mode.allowDuplicate = true
mode.allowPaste = true

allowReparentNodes

: boolean

Gets or sets a value indicating whether moving nodes out of group nodes or into other group nodes is allowed.

Remarks

If set to false the reparentNodeHandler will effectively be disabled and not called anymore for reparenting operations.

This setting has no effect if grouping operations are generally disallowed by setting allowGroupingOperations to false.

The default value is true.

Examples

The following example shows how to configure the grouping support on the GraphEditorInputMode. Note that general grouping support has to be enabled explicitly with allowGroupingOperations:

// first and foremost: enable grouping operations at all
geim.allowGroupingOperations = true
// support grouping but not ungrouping the currently selected nodes
geim.allowGroupSelection = true
geim.allowUngroupSelection = false
// forbid adjusting the size with Ctrl-Shift-G
geim.allowAdjustGroupNodeSize = false
// allow adding nodes to other group nodes by moving
geim.allowReparentNodes = true
// also allow to add nodes to non-group nodes, transforming these into groups
geim.allowReparentToNonGroupNodes = true

allowReparentToNonGroupNodes

: boolean

Gets or sets a value indicating whether moving nodes into non-group nodes is allowed to convert them into group nodes.

Remarks

If reparenting nodes is allowed in general and this property is enabled, users may reparent nodes not only to groups and folders but also to non-group nodes. Still, the decision about the final acceptance of the reparenting and the actual execution are delegated to the reparentNodeHandler.

This setting has no effect if grouping operations are generally disallowed by setting allowGroupingOperations to false.

The default value is false.

Examples

The following example shows how to configure the grouping support on the GraphEditorInputMode. Note that general grouping support has to be enabled explicitly with allowGroupingOperations:

// first and foremost: enable grouping operations at all
geim.allowGroupingOperations = true
// support grouping but not ungrouping the currently selected nodes
geim.allowGroupSelection = true
geim.allowUngroupSelection = false
// forbid adjusting the size with Ctrl-Shift-G
geim.allowAdjustGroupNodeSize = false
// allow adding nodes to other group nodes by moving
geim.allowReparentNodes = true
// also allow to add nodes to non-group nodes, transforming these into groups
geim.allowReparentToNonGroupNodes = true

allowReverseEdge

: boolean

Gets or sets a value indicating whether the REVERSE_EDGE command should be handled.

Remarks

If set to false the methods reverseEdge, reverseEdges, and reverseSelectedEdges do nothing.

The default value is true.

allowUndoOperations

: boolean

Gets or sets a value indicating whether undo operations, that is, UNDO and REDO should be enabled.

Remarks

Note that even if this feature is enabled, an UndoEngine needs to be available in the parentInputModeContext in order to work.

Setting this property to false effectively disables handling of the commands UNDO and REDO. Note that this property is not respected when calling undo or redo directly.

The default value is true.

allowUngroupSelection

: boolean

Gets or sets a value determining whether the UNGROUP_SELECTION command should be handled.

Remarks

This setting has no effect if grouping operations are generally disallowed by setting allowGroupingOperations to false.

The default value is true.

Examples

The following example shows how to configure the grouping support on the GraphEditorInputMode. Note that general grouping support has to be enabled explicitly with allowGroupingOperations:

// first and foremost: enable grouping operations at all
geim.allowGroupingOperations = true
// support grouping but not ungrouping the currently selected nodes
geim.allowGroupSelection = true
geim.allowUngroupSelection = false
// forbid adjusting the size with Ctrl-Shift-G
geim.allowAdjustGroupNodeSize = false
// allow adding nodes to other group nodes by moving
geim.allowReparentNodes = true
// also allow to add nodes to non-group nodes, transforming these into groups
geim.allowReparentToNonGroupNodes = true

autoSelectSelfLoopBends

: boolean

Gets or sets a property that determines whether clicking on a node should automatically select all bends of self-loops adjacent to that node.

Remarks

The default value is true.

availableCommands

Gets a collection of commands that this input mode will handle.

Remarks

This collection can be modified by removing commands to prevent the input mode from handling them. Previously removed commands can also be re-added again to enable them again. However, the input mode will never handle commands that weren't in the initial collection. Adding those will do nothing.

Defined in

clickableItems

Gets or sets which types of items should be reported through the item click events.

Remarks

This also affects taps.

The default is ALL.

Examples

mode.clickableItems = GraphItemTypes.NODE | GraphItemTypes.EDGE

Defined in

clickablePredicate

: function(IModelItem):boolean

Gets or sets a predicate that is queried to determine whether an item can be clicked.

Remarks

The default value returns the result of the clickableItems property for the given item.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

Defined in

clickHitTestOrder

Gets or sets the order of the types of items that should be used to determine what item has been clicked or tapped.

Remarks

Change this field to adjust which items will be selected if there are multiple items at a given location. The default order is the Z-Order but with a prioritization for elements behind labels. shouldSkipHitLabel.

Arrays that contain strings describing the name of GraphItemTypes are converted to an array of GraphItemTypes. For example:

['node', 'edge']
['NODE', 'EDGE']

Examples

The following example defines the order 1. bends, 2. nodes and edges (with equal priority), 3. labels.

mode.clickHitTestOrder = [
  GraphItemTypes.BEND,
  GraphItemTypes.NODE | GraphItemTypes.EDGE,
  GraphItemTypes.LABEL,
]

Defined in

clickInputMode

: ClickInputMode

Gets or sets the ClickInputMode that is used by this instance to determine clicks.

Remarks

Whenever the mode detects a click, this mode will use the IHitTester from the parentInputModeContext to determine the items being hit. If they match the clickableItems type, the item-clicked event will be triggered. If they are focusable, the item will be set as the current item.

Upon change, the onClickInputModeChanged method will be called.

By default, this input mode has a priority of 20.

Examples

Disabling the ClickInputMode on its parent input mode

mode.clickInputMode.enabled = false

Defined in

clickSelectableItems

Gets or sets which types of items should be selectable by mouse clicks.

Remarks

The default is ALL.

Examples

Determine which items should be selectable by different selection gestures

// Nodes, edges, and bends are selectable
mode.selectableItems =
  GraphItemTypes.NODE | GraphItemTypes.EDGE | GraphItemTypes.BEND
// Only nodes and bends are selectable by marquee selection
mode.marqueeSelectableItems = GraphItemTypes.NODE | GraphItemTypes.BEND
// Only nodes and edges are selectable by click selection
mode.clickSelectableItems = GraphItemTypes.NODE | GraphItemTypes.EDGE

Defined in

clickSelectablePredicate

: function(IModelItem):boolean

Gets or sets a predicate that is queried to determine whether an item should be selected when clicked with the primary mouse button.

Remarks

The default value returns the result of selectablePredicate and the clickSelectableItems property for the given item.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

Defined in

contentMargins

: Insets

Gets or sets the margins to use for updateContentBounds in adjustContentBounds calls.

contextMenuInputMode

: ContextMenuInputMode

Gets or sets the ContextMenuInputMode which handles context menus on a CanvasComponent.

Remarks

Upon change, the onContextMenuInputModeChanged method will be called.

By default, this input mode has a priority of 220.

Examples

Disabling the ContextMenuInputMode on its parent input mode

mode.contextMenuInputMode.enabled = false

It is recommended to configure the context menu handling on the parent GraphEditorInputMode or GraphViewerInputMode instead of the contextMenuInputMode. This involves registering for the populate-item-context-menu event instead of the populate-menu event:

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.contextMenuItems = GraphItemTypes.NODE
mode.addEventListener('populate-item-context-menu', (evt) => {
  // Get the node which is handled or null if the item is not a node
  const node = evt.item
  // Create the context menu items
  if (node !== null) {
    // Create a menu item to delete the node

    // Show the menu
    evt.contextMenu = [
      { label: 'Delete Item', action: () => graph.remove(node) },
    ]
  }
})

Defined in

contextMenuItems

Gets or sets the types of items a context menu should be queried for.

Remarks

The items for which a context menu should be queried. The default value is NODE|EDGE.

Examples

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.contextMenuItems = GraphItemTypes.NODE
mode.addEventListener('populate-item-context-menu', (evt) => {
  // Get the node which is handled or null if the item is not a node
  const node = evt.item
  // Create the context menu items
  if (node !== null) {
    // Create a menu item to delete the node

    // Show the menu
    evt.contextMenu = [
      { label: 'Delete Item', action: () => graph.remove(node) },
    ]
  }
})

Defined in

controller

: ConcurrencyController?

Gets the installed controller.

Defined in

createBendInputMode

: CreateBendInputMode

Gets or sets the CreateBendInputMode which handles interactive bend creation on existing edges.

Remarks

Upon change, the onCreateBendInputModeChanged method will be called.

By default, this input mode has a priority of 130.

Examples

Disabling the CreateBendInputMode on its parent input mode

mode.createBendInputMode.enabled = false

Note that in order to disable interactive bend creation, one has to disable bend creation during edge creation, too:

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

By default, dragging on selected edges will move the edge. In order to start bend creation on selected edges, too, the CreateBendInputMode has to be set to a higher priority than the MoveInputMode which handles moving the edge.

mode.createBendInputMode.priority =
  mode.moveSelectedItemsInputMode.priority - 1

createEdgeInputMode

: CreateEdgeInputMode

Gets or sets the CreateEdgeInputMode which handles interactive edge creation.

Remarks

Upon change, the onCreateEdgeInputModeChanged method will be called.

By default, this input mode has a priority of 100.

Examples

Disabling the CreateEdgeInputMode on its parent input mode

mode.createEdgeInputMode.enabled = false

creationSelectableItems

Gets or sets which types of items should be selected after creation.

Remarks

This property only affects the selection of newly created items of type NODE, EDGE, NODE_LABEL and EDGE_LABEL. Bends and group nodes are always being selected after creation. The default is NONE.

Examples

mode.creationSelectableItems = GraphItemTypes.NODE | GraphItemTypes.EDGE

cyclicSelectionRecognizer

: function(EventArgs, unknown):boolean

Gets or sets the event recognizer that determines if a click or tap should cycle through all the items that are currently under the mouse cursor.

Remarks

If the recognizer determines that the user wanted to use the cyclic click selection behavior, the hitTester will be queried for the given item and previously reported items will be ignored. E.g. if multiple nodes are overlapping each other, clicking on them will report the first item for the first click, the second one for the second click and so on. If all elements have been reported previously, the first one is going to be reported again. If the order of the elements at the clicked location changes, the cyclic selection is restarted anew.

The default is ALT_IS_DOWN.

Property Value

An event recognizer which determines that the user wants to use the cyclic click selection behavior.

Signature Details

function(evt: EventArgs, eventSource: unknown) : 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

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

Returns

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

Sample Graphs

Defined in

defaultCursor

: Cursor?

Gets or sets the cursor to use whenever no child mode prefers a different cursor.

Remarks

The default is null

Defined in

deletableItems

Gets or sets which types of items may be deleted using the deleteSelection action.

Remarks

The default is ALL.

Examples

Defining items which can be deleted as bitwise combination of the GraphItemTypes

mode.deletableItems = GraphItemTypes.NODE | GraphItemTypes.EDGE

deletablePredicate

: function(IModelItem):boolean

Gets or sets a predicate that is queried to determine whether an IModelItem can be deleted or not.

Remarks

The default value returns the result of the deletableItems property for the given item.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

Examples

In the following example items are only deletable if their tag is the string "I am deletable":

mode.selectablePredicate = (item: IModelItem): boolean =>
  item.tag === 'I am selectable'

detailSelectionRecognizer

: function(EventArgs, unknown):boolean

Gets or sets the event recognizer that determines if a click or tap should select the item that is currently visible under the pointer cursor, without giving more important items higher priority.

Remarks

If the recognizer determines that the user wanted to use the detail clicking behavior, the hitTester will be queried for the given item and the first item that is returned will be considered a hit. Otherwise, all hit items are examined and are prioritized by item type. E.g. by default clicking on a node will select the node, even if there is a node label which has been clicked at the same point. If detail selection is recognized, the label will be selected.

The default is SHIFT_IS_DOWN.

Property Value

An event recognizer which determines that the user wants to use the detail clicking behavior.

Signature Details

function(evt: EventArgs, eventSource: unknown) : 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

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

Returns

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

Examples

mode.detailSelectionRecognizer = EventRecognizers.SHIFT_IS_DOWN

Sample Graphs

Defined in

doubleClickablePredicate

: function(IModelItem):boolean

Gets or sets a predicate that is queried to determine whether an item can be double clicked.

Remarks

The default value returns the result of the clickablePredicate property for the given item.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

Defined in

doubleClickHitTestOrder

Gets or sets the order of the types of items that should be used to determine what item has been double-clicked or double-tapped.

Remarks

Change this field to adjust which items will be considered when double-clicked if there are multiple items at a given location. The default order is

Arrays that contain strings describing the name of GraphItemTypes are converted to an array of GraphItemTypes. For example:

['node', 'edge']
['NODE', 'EDGE']

Examples

The following example defines the order 1. bends, 2. nodes and edges (with equal priority), 3. labels.

mode.doubleClickHitTestOrder = [
  GraphItemTypes.BEND,
  GraphItemTypes.NODE | GraphItemTypes.EDGE,
  GraphItemTypes.LABEL,
]

Defined in

editLabelInputMode

: EditLabelInputMode

Gets or sets the EditLabelInputMode which handles label editing.

Remarks

Upon change, the onEditLabelInputModeChanged method will be called.

By default, this input mode has a priority of 500.

Examples

Disabling the EditLabelInputMode on its parent input mode

mode.editLabelInputMode.enabled = false

editLabelPredicate

: function(IModelItem):boolean

Gets or sets a predicate that is queried to determine whether the given label or a label owned by the given owner should be edited in response to a EDIT_LABEL command.

Remarks

The default value returns the result of the labelEditableItems property for the given item.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

Examples

In the following example, labels can only be edited if their tag or their owner's tag is the string "I am editable":

mode.editLabelPredicate = (item) => item.tag == 'I am editable'

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.

Defined in

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.

Defined in

focusableItems

Gets or sets the items that can be given focus via the setCurrentItem method.

Remarks

The focusable items. The default is NODE.

Examples

mode.focusableItems = GraphItemTypes.NODE | GraphItemTypes.EDGE

Defined in

focusablePredicate

: function(IModelItem):boolean

Gets or sets a predicate that is queried to determine whether an item should be set to the current item.

Remarks

The default value returns the result of the focusableItems property for the given item. It also honors the ignoreVoidStyles property.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

Defined in

graph

: IGraph?

Gets the graph instance from the parentInputModeContext.

Property Value

The graph to use, which can be null.

Defined in

graphComponent

: GraphComponent?

Gets the graphComponent instance this mode is working on or null.

Remarks

This property is set when this mode is installed in a graphComponent.

graphSelection

: IGraphSelection?

Gets the graph selection from the parentInputModeContext.

Defined in

handleInputMode

: HandleInputMode

Gets or sets the HandleInputMode as child input mode.

Remarks

Upon change, the onHandleInputModeChanged method will be called.

By default, this input mode has a priority of 10.

Examples

Disabling the HandleInputMode on its parent input mode

mode.handleInputMode.enabled = false

If one needs to execute some code after some items have been moved by the HandleInputMode, he can register a handler to its drag-finished event. The moved items can be retrieved from the affectedItems property:

mode.handleInputMode.addEventListener('drag-finished', () => {
  for (const item of mode.handleInputMode.affectedItems) {
    // these items have been moved
  }
})

hitTester

: IHitTester

Gets or sets the hitTester property.

Remarks

The implementation will be queried by findItems to find IModelItems at a given location, e.g. if the user clicks on the canvas.

Defined in

ignoreVoidStyles

: boolean

Gets or sets a value indicating whether void styles should be ignored when selecting or focusing items.

Remarks

Void styles are styles which render their styled elements invisible. These are VOID_NODE_STYLE, VOID_EDGE_STYLE, VOID_LABEL_STYLE, and VOID_PORT_STYLE. Typically, one does not want to interact with these elements, either. The value of this property is considered by selectablePredicate and focusablePredicate. Note that even if this property is set to false the invisible elements are not selectable by mouse clicks or marquee selection since their hit testable always returns false.

Property Value

true if void styles should be ignored for selection and focus; false otherwise. Default is true.

Defined in

itemHoverInputMode

: ItemHoverInputMode

Gets or sets the ItemHoverInputMode that is provided by this instance to detect when the cursor hovers over a graph item.

Remarks

Note that initially the hoverItems property is set to NONE, which effectively disables the functionality of the mode initially. In order to get the mode to fire events, the property should be set to a corresponding value.

If the backing field has not yet been initialized upon first access, a new instance will be assigned. Upon change, onItemHoverInputModeChanged will be called.

By default, this input mode has a priority of 200.

Examples

Disabling the ItemHoverInputMode on its parent input mode

mode.itemHoverInputMode.enabled = false

The itemHoverInputMode raises the hovered-item-changed event each time cursor hovers over a different item or the canvas in which case the hovered item is null. One can also configure the item types which are reported:

Configuring the ItemHoverInputMode to handle nodes and edges

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode

// enable the ItemHoverInputMode and let it handle edges and nodes
mode.itemHoverInputMode.enabled = true
mode.itemHoverInputMode.hoverItems =
  GraphItemTypes.EDGE | GraphItemTypes.NODE
// handle changes on the hovered items
mode.itemHoverInputMode.addEventListener(
  'hovered-item-changed',
  (evt) => {
    const oldItem = evt.oldItem
    // e.g. remove the highlight from oldItem here
    const newItem = evt.item
    // e.g. add a highlight to newItem here
  },
)

Defined in

keyboardInputMode

: KeyboardInputMode

Gets or sets the KeyboardInputMode associated with this instance.

Remarks

By default, this input mode has a priority of 0.

Property Value

The keyboardInputMode.

Examples

Disabling the KeyboardInputMode on its parent input mode

mode.keyboardInputMode.enabled = false

Adding a handler for a keyboard event

// Execute the command if the Insert key is pressed
graphEditorInputMode.keyboardInputMode.addKeyBinding(
  'Insert',
  ModifierKeys.NONE,
  () => {
    graphEditorInputMode.createNode(
      graphEditorInputMode.graphComponent!.viewport.center,
    )
  },
)

Defined in

labelDropInputMode

: LabelDropInputMode

Gets or sets the LabelDropInputMode that is responsible for handling drag and drop operations of labels onto the graphComponent.

Remarks

The mode by default is disabled and needs to be enabled to work, first. Upon change the onLabelDropInputModeChanged method will be called.

By default, this input mode has a priority of 310.

Examples

Disabling the LabelDropInputMode on its parent input mode

mode.labelDropInputMode.enabled = false

labelEditableItems

Gets or sets which types of items may have their labels edited or added.

Remarks

The default is LABEL_OWNER|LABEL, which allows for editing the labels of ILabelOwners, and existing ILabels.

Examples

Configure label editing

// forbid adding new labels
mode.allowAddLabel = false
// allow editing existing labels
mode.allowEditLabel = true
// start label editing on double click
mode.allowEditLabelOnDoubleClick = true
// only support editing node labels
mode.labelEditableItems = GraphItemTypes.NODE | GraphItemTypes.NODE_LABEL

lassoSelectionInputMode

: LassoSelectionInputMode

Gets or sets the LassoSelectionInputMode which handles the selection of multiple elements by drawing a polygon around them.

Remarks

Upon change, the onLassoSelectionInputModeChanged method will be called.

The lassoSelectionInputMode respects the selectableItems and the marqueeSelectableItems used by marqueeSelectablePredicate.

By default, this input mode has a priority of 150 and is disabled.

Defined in

marqueeSelectableItems

Gets or sets which types of items should be selected during marquee selections or lasso selection.

Remarks

The default is a combination of NODE, EDGE, and BEND.

Examples

Determine which items should be selectable by different selection gestures

// Nodes, edges, and bends are selectable
mode.selectableItems =
  GraphItemTypes.NODE | GraphItemTypes.EDGE | GraphItemTypes.BEND
// Only nodes and bends are selectable by marquee selection
mode.marqueeSelectableItems = GraphItemTypes.NODE | GraphItemTypes.BEND
// Only nodes and edges are selectable by click selection
mode.clickSelectableItems = GraphItemTypes.NODE | GraphItemTypes.EDGE

Defined in

marqueeSelectablePredicate

: function(IModelItem):boolean

Gets or sets a predicate that is queried to determine whether an item can be selected by marquee or lasso selection.

Remarks

The default value returns the result of the marqueeSelectableItems property for the given item and takes selectablePredicate into account.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

Defined in

marqueeSelectionInputMode

: MarqueeSelectionInputMode

Gets or sets the MarqueeSelectionInputMode which handles the selection of multiple elements by drawing a rectangle around them.

Remarks

Upon change, the onMarqueeSelectionInputModeChanged method will be called.

The marqueeSelectionInputMode respects the selectableItems and the marqueeSelectableItems used by marqueeSelectablePredicate.

By default, this input mode has a priority of 160.

Examples

Disabling the MarqueeSelectionInputMode on its parent input mode

mode.marqueeSelectionInputMode.enabled = false

Defined in

movableSelectedItems

Gets or sets which types of items should be movable using the moveSelectedItemsInputMode.

Remarks

The default is ALL. Note that depending on the setting of movableUnselectedItems and whether moveUnselectedItemsInputMode is enabled, in order to prevent the user from moving items, the movableUnselectedItems should also be adjusted accordingly.

Examples

Defining movable items as bitwise combination of the GraphItemTypes

mode.movableSelectedItems = GraphItemTypes.NODE | GraphItemTypes.EDGE

movableSelectedItemsPredicate

: function(IModelItem):boolean

Gets or sets a predicate that is queried to determine whether moving an item is allowed.

Remarks

This predicate determines whether an item can be moved by the moveSelectedItemsInputMode.

The default value returns the result of the movableSelectedItems property for the given item.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

movableUnselectedItems

Gets or sets which types of items should be movable using the moveUnselectedItemsInputMode.

Remarks

The default is ALL.

Examples

Defining movable items as bitwise combination of the GraphItemTypes

mode.movableSelectedItems = GraphItemTypes.NODE | GraphItemTypes.EDGE

movableUnselectedItemsPredicate

: function(IModelItem):boolean

Gets or sets a predicate that is queried to determine whether moving an item is allowed when it is not selected.

Remarks

This predicate determines whether an item can be moved by moveUnselectedItemsInputMode.

The default value returns the result of the movableUnselectedItems property for the given item.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

moveSelectedItemsInputMode

: MoveInputMode

Gets or sets the MoveInputMode as child mode.

Remarks

Upon change, the onMoveSelectedItemsInputModeChanged method will be called. The newly created input mode is configured to handle selected items.

The moveSelectedItemsInputMode by default only handles selected items. The moveUnselectedItemsInputMode by default handles unselected items, too.

The moveSelectedItemsInputMode respects movableSelectedItems and method movableSelectedItemsPredicate.

By default, this input mode has a priority of 110.

Examples

Disabling the MoveSelectedItemsInputMode on its parent input mode

mode.moveSelectedItemsInputMode.enabled = false

If one needs to execute some code after some items have been moved by the MoveInputMode, he can register a handler to its drag-finished event. The moved items can be retrieved from the affectedItems property:

mode.moveSelectedItemsInputMode.addEventListener('drag-finished', () => {
  for (const item of mode.moveSelectedItemsInputMode.affectedItems) {
    // these items have been moved
  }
})

moveUnselectedItemsInputMode

: MoveInputMode

Gets or sets the MoveInputMode which handles unselected graph items.

Remarks

Upon change, the onMoveUnselectedItemsInputModeChanged method will be called.

The moveUnselectedItemsInputMode respects movableUnselectedItems and movableUnselectedItemsPredicate.

By default, this input mode has a priority of 120 and is enabled. Also, its beginRecognizerTouch property is configured to only start when the user holds the touch device for a short amount of time to initiate the gesture of moving elements that are not selected.

Examples

Enabling the MoveUnselectedInputMode on its parent input mode

mode.moveUnselectedItemsInputMode.enabled = true

By default, the moveUnselectedItemsInputMode can interfere with the createEdgeInputMode when custom port candidates are used that prevent the item from being hit or resized because of the port candidate locations. A possible solution is to set a higher priority to the moveUnselectedItemsInputMode than to the createEdgeInputMode and to add the ability to temporarily disable it. The following example shows how to configure the moveUnselectedItemsInputMode to be disabled when pressing the Shift key:

mode.moveSelectedItemsInputMode.enabled = false
// Enable the move input mode for unselected items
const moveUnselectedItemsInputMode = mode.moveUnselectedItemsInputMode
moveUnselectedItemsInputMode.enabled = true

// Use a modifier recognizer for shift key not held down.
const defaultPressedRecognizer =
  moveUnselectedItemsInputMode.beginRecognizer
moveUnselectedItemsInputMode.beginRecognizer = (evt, sender) =>
  defaultPressedRecognizer(evt, sender) &&
  !EventRecognizers.SHIFT_IS_DOWN(evt, sender)
const defaultHoverRecognizer =
  moveUnselectedItemsInputMode.hoverRecognizer
moveUnselectedItemsInputMode.hoverRecognizer = (evt, sender) =>
  defaultHoverRecognizer(evt, sender) &&
  !EventRecognizers.SHIFT_IS_DOWN(evt, sender)
// Set a higher priority than CreateEdgeInputMode
moveUnselectedItemsInputMode.priority =
  mode.createEdgeInputMode.priority - 1

moveViewportInputMode

: MoveViewportInputMode

Gets or sets the MoveViewportInputMode associated with this instance.

Remarks

Upon change, the onMoveViewportInputModeChanged method will be called.

By default, this input mode has a priority of 190.

Examples

Disabling the MoveViewportInputMode on its parent input mode

mode.moveViewportInputMode.enabled = false

Defined in

multiSelectionRecognizer

: function(EventArgs, unknown):boolean

Gets or sets the event recognizer that determines if a click or tap is deemed a multi-selection gesture.

Remarks

If the multiSelectionRecognizer returns true for the current gesture, the element which is selected with that gesture will be added to the current selection. Otherwise, the selection will be cleared before adding the newly selected element.

The default detects the current system and delegates either to META_IS_DOWN (macOS) or CTRL_IS_DOWN (other systems).

Signature Details

function(evt: EventArgs, eventSource: unknown) : 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

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

Returns

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

Defined in

mutexOwner

: IInputMode?

Gets the IInputMode that currently owns the mutex.

Property Value

The IInputMode that currently owns the mutex or null.

Defined in

navigationInputMode

: NavigationInputMode

Gets or sets the NavigationInputMode which is responsible for navigating and traversing the elements in the IGraph.

Remarks

Upon change the onNavigationInputModeChanged method will be called.

By default, this input mode has a priority of 210.

Examples

Disabling the NavigationInputMode on its parent input mode

mode.navigationInputMode.enabled = false

The navigationInputMode supports e.g. opening and closing group nodes. These actions can be configured in details:

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode

// enable expanding and collapsing group nodes
mode.navigationInputMode.allowCollapseGroup = true
mode.navigationInputMode.allowExpandGroup = true
// do not fit the content after expand/collapse
mode.navigationInputMode.fitContentAfterGroupActions = false
// expand/collapse group nodes in a way that their
// top right corner stays at its current coordinates
mode.navigationInputMode.autoGroupNodeAlignmentPolicy =
  NodeAlignmentPolicy.TOP_RIGHT

It also reports when groups are opened or collapsed interactively by raising the following events:

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.navigationInputMode.addEventListener('group-expanding', (evt) => {
  const node = evt.item
  // do something with the node before it will be expanded
})
mode.navigationInputMode.addEventListener('group-expanded', (evt) => {
  const node = evt.item
  // do something with the node after it has been expanded
})
mode.navigationInputMode.addEventListener('group-collapsing', () => {
  /* same for collapse operations */
})
mode.navigationInputMode.addEventListener('group-collapsed', () => {
  /* same for collapse operations */
})

Defined in

: OrthogonalEdgeEditingPolicy

nodeCreator

: function(IInputModeContext, IGraph, Point, INode):Promise<INode|null>?

Gets or sets the callback that is responsible for creating a new node, for instance, in response to a mouse or stylus click or touch tap.

Remarks

A null value will disable node creation using mouse clicks, just as setting allowCreateNode to false.

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

Signature Details

function(context: IInputModeContext, graph: IGraph, location: Point, parent: INode) : Promise<INode | null> | INode

A callback that is used by GraphEditorInputMode for the creation of nodes.

This callback can be used to conveniently provide a hook to the GraphEditorInputMode using its nodeCreator property.

Parameters

context - IInputModeContext: The context for which the node should be created.
graph - IGraph: The graph to create the node for.
location - Point: The location where the node shall be created.
parent - INode: A group node at the click location which can be used as parent node for the newly-created node. null if the new node should be created at root level.

Returns

Promise<INode | null> | INode: The created node or null.

Examples

// set a custom node creator which creates a label on the new node
graphEditorInputMode.nodeCreator = (
  context: IInputModeContext,
  graph: IGraph,
  location: Point,
  parent: INode | null,
): INode | null | Promise<INode | null> => {
  // create a node at the location with the given parent and the default size
  const node = graph.createNode(
    parent,
    new Rect(location, graph.nodeDefaults.size),
  )
  // add a label
  graph.addLabel(node, 'A new node')
  // return the new node
  return node
}

nodeDropInputMode

: NodeDropInputMode

Gets or sets the NodeDropInputMode that is responsible for handling drag and drop operations of nodes onto the graphComponent.

Remarks

The mode by default is disabled and needs to be enabled to work, first. Upon change the onNodeDropInputModeChanged method will be called.

By default, this input mode has a priority of 300.

Examples

Disabling the NodeDropInputMode on its parent input mode

mode.nodeDropInputMode.enabled = false

orthogonalBendRemoval

Gets or sets the policy that controls whether removing bends from an orthogonal edge will keep the edge orthogonal.

Remarks

By default this feature is enabled automatically if an OrthogonalEdgeEditingContext is set. (Default is AUTO).

Property Value

The policy which determines whether removing bends from an orthogonal edge will keep the edge orthogonal.

orthogonalEdgeEditingContext

: OrthogonalEdgeEditingContext

Gets or sets the orthogonal edge editing context.

Remarks

Orthogonal edge editing is enabled by default but only used for edges that provide an IOrthogonalEdgeHelper in their context.

For an edge using a PolylineEdgeStyle, it is sufficient to enable its orthogonalEditing property. Alternatively, the fallbackEdgeHelperProvider can be set to an instance supporting orthogonal edge editing that is then used for all edges providing no IOrthogonalEdgeHelper.

Property Value

The orthogonal edge editing context.

Examples

Enabling orthogonal edge editing

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

parentInputModeContext

: IInputModeContext?

Retrieves the IInputModeContext this mode has been installed in.

Remarks

The value will be null if this mode is currently not installed. Use createInputModeContext to obtain a context that has this IInputMode as the inputMode.

Defined in

pasteSelectableItems

Gets or sets which types of items should be selected after paste or duplicateSelection.

Remarks

The default is ALL.

Examples

mode.pasteSelectableItems = GraphItemTypes.NODE | GraphItemTypes.BEND

pasteSelectablePredicate

: function(IModelItem):boolean

Gets or sets a predicate that is queried to determine whether an item should be selected after paste or duplicateSelection.

Remarks

The default value returns the result of the pasteSelectableItems property for the given item.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

populateContextMenuPredicate

: function(IModelItem):boolean

Gets or sets a predicate that is queried to determine whether a context menu should be shown for an item.

Remarks

The default value returns the result of the contextMenuItems property for the given item.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

Defined in

portDropInputMode

: PortDropInputMode

Gets or sets the PortDropInputMode that is responsible for handling drag and drop operations of ports onto the graphComponent.

Remarks

The mode by default is disabled and needs to be enabled to work, first. Upon change, the onPortDropInputModeChanged method will be called.

By default, this input mode has a priority of 320.

Examples

Disabling the PortDropInputMode on its parent input mode

mode.portDropInputMode.enabled = false

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 CanvasComponent. The lower the priority value, the earlier it will be installed. If two modes are using the same priority value, the first one to be registered will be installed earlier.

Implements

queryToolTipPredicate

: function(IModelItem):boolean

Gets or sets a predicate that is queried to determine whether a tool tip should be queried for an item.

Remarks

The default value returns the result of the toolTipItems property for the given item.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

Defined in

reparentNodeHandler

: IReparentNodeHandler

Gets or sets the IReparentNodeHandler that is used for moving nodes out of group nodes or into other group nodes.

Remarks

This setting has no effect if reparenting nodes is generally disallowed by setting allowReparentNodes to false.

Child input modes will use this IReparentNodeHandler as well, since it is added to childInputModeContextLookup.

Upon changes, the onReparentNodeHandlerChanged method will be called.

reversableEdgePredicate

: function(IEdge):boolean

Gets or sets a predicate that is queried to determine whether an edge should be reversed by reverseEdge, reverseEdges, or reverseEdges.

Remarks

The default value returns the value of allowReverseEdge.

Signature Details

function(obj: IEdge) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IEdge: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

selectableItems

Gets or sets which types of items should be selectable at all.

Remarks

The default is ALL.

Examples

Determine which items should be selectable by different selection gestures

// Nodes, edges, and bends are selectable
mode.selectableItems =
  GraphItemTypes.NODE | GraphItemTypes.EDGE | GraphItemTypes.BEND
// Only nodes and bends are selectable by marquee selection
mode.marqueeSelectableItems = GraphItemTypes.NODE | GraphItemTypes.BEND
// Only nodes and edges are selectable by click selection
mode.clickSelectableItems = GraphItemTypes.NODE | GraphItemTypes.EDGE

Defined in

selectablePredicate

: function(IModelItem):boolean

Gets or sets a predicate that is queried to determine whether a given IModelItem is selectable.

Remarks

This allows to further restrict which items are selectable, compared to selectableItems. The default value uses and honors the selectableItems and ignoreVoidStyles. This property is by default also used by clickSelectablePredicate and marqueeSelectablePredicate, so turning selection off here also turns it off in other places.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

Examples

In the following example items are only selectable if their tag is the string "I am selectable":

mode.selectablePredicate = (item: IModelItem): boolean =>
  item.tag === 'I am selectable'

Defined in

selectAfterCreationPredicate

: function(IModelItem):boolean

Gets or sets a predicate that is queried to determine whether an item should be selected after creation.

Remarks

The default value returns the result of the creationSelectableItems property for the given item.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

showHandleItems

Gets or sets which types of items should have their IHandles shown.

Remarks

The default is ALL.

Examples

Defining items which provide handles as bitwise combination of the GraphItemTypes

mode.showHandleItems = GraphItemTypes.NODE | GraphItemTypes.EDGE

showHandlePredicate

: function(IModelItem):boolean

Gets or sets a predicate that is queried to determine whether to show the handles for the given item.

Remarks

The default value returns the result of the showHandleItems property for the given item.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

skipHitLabels

: boolean

Gets or sets a value that specifies whether during hit testing, labels should be skipped at all.

Remarks

Since typically users don't want to click a label when it covers a node or edge, but they typically want to click the label, but otherwise the Z-order should be considered, this setting will determine whether shouldSkipHitLabel should be queried during hit test enumeration if labels are hit before other elements.

This is only applicable when the respective clickHitTestOrder or doubleClickHitTestOrder is not explicit about the order.

This setting will influence the ILookup behavior of the IInputModeContext via childInputModeContextLookup so that the IHitTester interface swaps the order of the hits to report skipped labels only after the items behind the labels.

By default, this feature is enabled.

Defined in

smartPasteSelection

: boolean

Gets or sets whether nodes, edges, labels, and ports should only be selected after paste or duplicateSelection if they were selected when they were initially copied into the clipboard.

Remarks

Disabling this feature will select all pasteSelectableItems after a paste or duplicate operation.

The default is true.

Examples

mode.smartPasteSelection = false

snapContext

: GraphSnapContext

Gets or sets the GraphSnapContext instance that handles interactive snapping of elements during drag operations like movements.

Remarks

To enable snapping set the enabled property to true.

Setting this property to a GraphSnapContext which is disabled will disable snapping. Child modes will use the instance from their respective IInputModeContexts, if any are set.

Upon change the onSnapContextChanged method is called, which will as a side effect configure the snap context to display the SnapResults in the CanvasComponent.

Default is null.

Examples

Setting the snap context

mode.snapContext = new GraphSnapContext()

toolTipInputMode

: ToolTipInputMode

Gets or sets the toolTipInputMode which is responsible for displaying Tooltips on a CanvasComponent.

Remarks

Upon change, the onToolTipInputModeChanged method will be called.

By default, this input mode has a priority of 400.

Examples

Disabling the ToolTipInputMode on its parent input mode

mode.toolTipInputMode.enabled = false

It is recommended to configure the tooltip handling on the parent GraphEditorInputMode or GraphViewerInputMode instead of the toolTipInputMode. This involves registering for the query-item-tool-tip event instead of the query-tool-tip event:

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.toolTipItems = GraphItemTypes.NODE
// register a listener
mode.addEventListener('query-item-tool-tip', (evt) => {
  if (evt.handled) {
    // A tooltip has already been assigned -> nothing to do.
    return
  }
  // We can safely cast here because we set ToolTipItems to only Node.
  const hitNode = evt.item as INode
  if (hitNode.labels.size > 0) {
    // Show the text of the first label as tooltip.
    evt.toolTip = hitNode.labels.get(0).text

    // Indicate that the tooltip content has been set.
    evt.handled = true
  }
})

Defined in

toolTipItems

Gets or sets the types of the items that should be queried for a tooltip.

Remarks

The items for which a tooltip text should be queried. The default value is a combination of NODE, EDGE, LABEL, and PORT, i.e. everything except bends.

Examples

Configuring the ToolTipInputMode to display tooltips for nodes

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.toolTipItems = GraphItemTypes.NODE
// register a listener
mode.addEventListener('query-item-tool-tip', (evt) => {
  if (evt.handled) {
    // A tooltip has already been assigned -> nothing to do.
    return
  }
  // We can safely cast here because we set ToolTipItems to only Node.
  const hitNode = evt.item as INode
  if (hitNode.labels.size > 0) {
    // Show the text of the first label as tooltip.
    evt.toolTip = hitNode.labels.get(0).text

    // Indicate that the tooltip content has been set.
    evt.handled = true
  }
})

Defined in

useCurrentItemForCommands

: boolean

Gets or sets a value indicating whether to use the currentItem as a fallback for the commands if no item is provided in the parameter and the current selection is empty.

Remarks

true if the current item should be used as a fallback, false otherwise.

This applies to the following commands:

Default is false.

Property Value

Whether to use the currentItem as a fallback for the commands if no item is provided in the parameter and the current selection is empty. true if the current item should be used as a fallback, false otherwise.

waiting

: boolean

Gets or sets whether the user interaction should be blocked.

Remarks

Setting this property to true will start the waiting process. Setting it to false will end the waiting.

Blocking the user interaction is done by the WaitInputMode. This property has no effect if WaitInputMode is disabled.

Examples

Blocking user interaction during an asynchronous process

graphEditorInputMode.waiting = true
await longRunningAsyncProcess()
graphEditorInputMode.waiting = false

waitInputMode

: WaitInputMode

Gets or sets the WaitInputMode that is provided by this instance for those who need to make use of it.

Remarks

Upon change, the onWaitInputModeChanged method will be called.

By default, this input mode has a priority of -1.

Examples

Disabling the WaitInputMode on its parent input mode

mode.waitInputMode.enabled = false

Blocking user interaction during an asynchronous process

graphEditorInputMode.waiting = true
await longRunningAsyncProcess()
graphEditorInputMode.waiting = false

Defined in

Methods

add

(mode: IInputMode)

Adds the given mode.

Remarks

The input modes will be ordered according to their priority: Input modes with lower priority will be installed earlier.

Input modes will run exclusively if the exclusive property of their installed controller is set to true. Otherwise they cannot and will not be deactivated if another IInputMode acquires the mutex.

Parameters

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

mode - IInputMode: The input mode to add to this mode.

Throws

Exception({ name: 'ArgumentError' }): If the same mode is already added to this instance.

Examples

const multiplexingInputMode = new MultiplexingInputMode()
const waitInputMode = new WaitInputMode()
waitInputMode.priority = 0
multiplexingInputMode.add(waitInputMode)
const moveInputMode = new MoveViewportInputMode()
moveInputMode.priority = 5
multiplexingInputMode.add(moveInputMode)
graphComponent.inputMode = multiplexingInputMode

const mode = new GraphEditorInputMode()
const customInputMode = new CustomInputMode()
customInputMode.priority = 10
mode.add(customInputMode)

Defined in

adjustContentBounds

()

Updates the contentBounds using updateContentBounds and contentMargins

Remarks

This method is called whenever the content changes and takes the adjustContentBoundsPolicy into account.

adjustCursor

()

Adjusts the cursor of the CanvasComponent according to the current input mutex owner or the first mode in the list whose ConcurrencyController returns a non-null preferredCursor.

Remarks

This method will set defaultCursor as the current cursor if no other preferredCursor has been specified.

Defined in

adjustGroupNodeSize

(nodes: IEnumerable<INode>)

Adjusts the size of the group nodes in the enumerable.

Remarks

This action is executed in response to the ADJUST_GROUP_NODE_SIZE if allowAdjustGroupNodeSize is set to true.

Parameters

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

nodes - IEnumerable<INode>: The nodes to adjust their sizes.

adjustGroupNodeSizes

()

Adjusts the size of the selected group nodes.

Remarks

This method delegates to adjustGroupNodeSize with the currently selected nodes.

adjustToSizeConstraints

(node: INode)

Adjusts the node's layout to adhere to possible size constraints.

Remarks

This method will use the INodeSizeConstraintProvider for INode that can be found in their ILookup to make sure they are still valid. The actual work of this method will be delegated to setNodeLayout.

Parameters

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

node - INode: The node to possibly adjust the size of.

cancel

()

Cancels all modes.

Implements

GraphInputMode.childInputModeContextLookup

childInputModeContextLookup

(type: Constructor) : any

Called by the child context's lookup method.

Parameters

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

type - Constructor: The type argument passed to lookup.

Returns

↪any?: The result of the lookup query, or null.

Overrides

clearSelection

()

Clears the selection on the current graphSelection.

Remarks

This implementation may be overridden for customizations. All it does is call clear.

Defined in

click

(item: IModelItem, evt: ClickEventArgs)

Actually performs the click or tap on the given item.

Remarks

This will raise the item-left-clicked, item-right-clicked (depending on the button), and item-clicked events. If either event is unhandled by all its event handlers, the item will be selected and focused. Before selection, the current selection will be cleared, unless the multiSelectionRecognizer is triggered.

Parameters

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

item - IModelItem: The item that has been clicked.
evt - ClickEventArgs: The original event arguments for the click. Setting its handled property to true will indicate that the click was handled. By default, this happens when the clicked item is either selected or focused.

Defined in

clickClearSelection

(context: IInputModeContext) : boolean

Clears the selection on click if the click is not recognized by multiSelectionRecognizer.

Remarks

This method is only called if no item has been hit and at least one item is currently selected.

This will use the clearSelection method to deselect all items.

Parameters

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

context - IInputModeContext: The context where the click appeared.

Returns

↪boolean: Whether the selection has been cleared by this method.

Defined in

clickCreateNode

(context: IInputModeContext, location: Point) : boolean

Creates a node on a pointer click or tap.

Remarks

This method is only called if no item has been hit and clickClearSelection returned false.

Parameters

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

context - IInputModeContext: The context of the current input mode.
location - Point: The point where the pointer had been clicked.

Returns

↪boolean: true if a node was successfully created, false otherwise.

copy

()

Copies the currently selected elements to the clipboard.

Examples

mode.copy()

Defined in

createInputModeContext

() : IInputModeContext

Yields an IInputModeContext for the child modes of this mode.

Remarks

This method is called during installation to create a new context for the child modes and can be used by client code to obtain a suitable context object. The parentInputModeContext property is already set when this method is called. lookup calls for the created context will be resolved by this instance's childInputModeContextLookup method.

Returns

↪IInputModeContext: A new instance that delegates to the parent's context.

Defined in

createInputModeEventArgs

(context: IInputModeContext) : InputModeEventArgs

Helper method that yields a suitably configured InputModeEventArgs for this input mode.

Parameters

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

context - IInputModeContext: An input mode context that is available in the InputModeEventArgs.
Can be null in which case a new context for this instance is created automatically.

Returns

↪InputModeEventArgs: An input mode event argument that is configured for this instance.

Defined in

GraphInputMode.doubleClick

createNode

(location: Point) : Promise<INode | null> | INode

Creates a node at the given location.

Remarks

This implementation delegates to the current nodeCreator or simply returns null if there is no such callback or allowCreateNode yields false. Finally, it tries to set the node as the current item.

When the nodeCreator returns a Promise, this mode will wait until it is resolved, thereby blocking any user interaction.

Parameters

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

location - Point: The point where the pointer click or tap has occured.

Returns

↪Promise<INode | null> | INode?: The newly created node, null, or a Promise resolving with a node or null.

cut

()

Cuts and inserts the currently selected items to the clipboard.

Examples

mode.cut()

deleteSelection

()

This method deletes the currently selected items.

Remarks

If the IGraphSelection is non-empty, this implementation triggers the deleting-selection event, possibly a number of deleted-item events, and a final deleteSelection event. Note that deleted-item will not be called for items that are removed implicitly, e.g. if the event is triggered for a node, its labels, ports, and adjacent edges will not be reported separately.

doubleClick

(item: IModelItem, evt: ClickEventArgs)

Actually performs a double-click on the given item.

Remarks

This will raise the item-left-double-clicked and item-right-double-clicked (depending on the button), and item-double-clicked events. If neither event was handled, label editing will be started, if allowEditLabelOnDoubleClick is true

Parameters

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

item - IModelItem: The item that has been double-clicked.
evt - ClickEventArgs: The original event arguments for the click. Setting its handled property to true will indicate that the double-click was handled and events on other items in the same location are no longer raised.

Overrides

dragBend

(bend: IBend)

Initiates the handleInputMode to drag the given bend.

Parameters

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

bend - IBend: The bend to drag.

duplicateSelection

()

Duplicates the selected items.

Examples

mode.duplicateSelection()

editLabelOnDoubleClick

(item: IModelItem) : boolean

Starts label editing by executing EDIT_LABEL.

Remarks

The method should return whether the request was satisfied.

Parameters

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

item - IModelItem: The item whose label or the label itself that should be edited upon the double click gesture.

Returns

↪boolean: true iff the request was handled.

findItems

(location: Point, tests: GraphItemTypes[], filter?: function(IModelItem):boolean) : IEnumerable<IModelItem>

Used as a callback to find the items hit underneath a certain point.

Remarks

This implementation uses the hitTester to determine the hit items.

Parameters

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

location - Point

The location to test.

tests - GraphItemTypes[]

An array of GraphItemTypes values that encode for which model items the hit test should be performed for prioritizing. Arrays that contain strings describing the name of GraphItemTypes are converted to an array of GraphItemTypes. For example:

['node', 'edge']
['NODE', 'EDGE']

filter - function(IModelItem):boolean

The predicate that can be used to filter the results. May be null.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

Returns

↪IEnumerable<IModelItem>: An enumerable over the items that have been found for the location.

Examples

function HandleItemAtLocation(
  context: IInputModeContext,
  location: Point,
): void {
  const graphEditorInputMode = context.lookup(
    GraphEditorInputMode,
  ) as GraphEditorInputMode

  const graphItem = graphEditorInputMode
    .findItems(location, [GraphItemTypes.NODE | GraphItemTypes.EDGE])
    .at(0)

  if (graphItem instanceof INode) {
    // ... handle node
  } else if (graphItem instanceof IEdge) {
    // ... handle edge
  }
}

Defined in

findItems

(context: IInputModeContext, location: Point, tests: GraphItemTypes[], filter?: function(IModelItem):boolean) : IEnumerable<IModelItem>

Used as a callback to find the items hit underneath a certain point.

Remarks

This implementation uses the hitTester to determine the hit items and also queries the IBendSelectionTester for bends at hit edges, as well as the IPortSelectionTester for ports at hit port owners.

Parameters

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

context - IInputModeContext

The context to use for the isHit callback.

location - Point

The location to test.

tests - GraphItemTypes[]

['node', 'edge']
['NODE', 'EDGE']

filter - function(IModelItem):boolean

The predicate that can be used to filter the results. May be null.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

Returns

↪IEnumerable<IModelItem>: An enumerable over the items that have been found for the location.

Examples

function HandleItemAtLocation(
  context: IInputModeContext,
  location: Point,
): void {
  const graphEditorInputMode = context.lookup(
    GraphEditorInputMode,
  ) as GraphEditorInputMode

  const graphItem = graphEditorInputMode
    .findItems(location, [GraphItemTypes.NODE | GraphItemTypes.EDGE])
    .at(0)

  if (graphItem instanceof INode) {
    // ... handle node
  } else if (graphItem instanceof IEdge) {
    // ... handle edge
  }
}

Defined in

getSortedModes

() : IList<IInputMode>

Returns a list of all modes managed by this instance sorted by their priority.

Returns

↪IList<IInputMode>: A list of the modes.

Defined in

groupSelection

() : INode

Creates a new group for all of the currently selected items.

Remarks

This method will also clear the selection and select the newly created group node.

The default shortcut for this is Ctrl+G.

Returns

↪INode?: The newly created group node or null.

handleClickListener

(context: IInputModeContext, item: IModelItem, location: Point) : boolean

Called by click to query the item for an IClickListener in its lookup and handle it appropriately.

Remarks

This method will query the IClickListener and check whether it was hit by the click, and if so, will invoke onClicked and return true.

Parameters

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

context - IInputModeContext: The context for the click.
item - IModelItem: The item that has been clicked.
location - Point: The click location.

Returns

↪boolean: Whether the action has been invoked and handling should be stopped.

Defined in

initialize

()

Performs one-time initialization of this instance.

Remarks

This method should not be invoked by subclasses. This will be done automatically upon first installation of this mode.

This code will be executed only once per instance. The parentInputModeContext property will be null when this code is executed. This method should not be used to install this mode into a specific canvas. Subclasses should always call base.Initialize() first.

Defined in

install

(context: IInputModeContext, controller: ConcurrencyController)

Installs this mode into the provided context.

Parameters

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

context - IInputModeContext: The context to install this mode in and retrieve the graph and selection instance from.
controller - ConcurrencyController: The ConcurrencyController for this mode.

Overrides

IInputMode.install

invalidate

()

Invalidates the canvas this mode is currently installed in.

Defined in

lassoSelect

(lassoPath: GeneralPath, selectionPolicy?: SelectionPolicy)

Performs lasso-selection with the given path.

Remarks

It delegates directly to the onLassoSelect overload internally.

Parameters

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

lassoPath - GeneralPath: The lasso selection path.
selectionPolicy - SelectionPolicy: The policy to use for changing the selection of the elements.

Defined in

lowerSelection

()

Lowers the visual representations of all selected IModelItems below their current predecessors.

Examples

mode.lowerSelection()

marqueeSelect

(marqueeRectangle: Rect, selectionPolicy?: SelectionPolicy)

Performs marquee selection with the given rectangle.

Remarks

It delegates directly to the onMarqueeSelect overload internally.

Parameters

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

marqueeRectangle - Rect: The selection rectangle.
selectionPolicy - SelectionPolicy: The policy to use for changing the selection of the elements.

Defined in

onCanvasClicked

(evt: ClickEventArgs)

Raises the canvas-clicked event.

Remarks

This implementation will stop the event propagation as soon as an event handler has set the handled property to true.

Parameters

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

evt - ClickEventArgs: The ClickEventArgs instance that contains the information about the click.

Defined in

onClickInputModeChanged

(oldMode: ClickInputMode, newMode: ClickInputMode)

Called when the clickInputMode property value changes and after initialization of the property.

Parameters

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

oldMode - ClickInputMode: the old value, which may be null the first time
newMode - ClickInputMode: the new value

Defined in

onConcurrencyControllerActivated

()

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

Remarks

This implementation reenables previously disabled concurrent child modes.

Defined in

GraphInputMode.onConcurrencyControllerDeactivated

onConcurrencyControllerDeactivated

()

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

Remarks

This implementation sets the preferredCursor property to null and releases the mutex if the mutex is currently owned by this instance. Also, all concurrent child modes will be disabled.

Overrides

onContextMenuInputModeChanged

(oldMode: ContextMenuInputMode, newMode: ContextMenuInputMode)

Called when the ContextMenuInputMode property value changes and after initialization of the property.

Parameters

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

oldMode - ContextMenuInputMode: the old value, which may be null the first time
newMode - ContextMenuInputMode: the new value

Defined in

onCreateBendInputModeChanged

(oldMode: CreateBendInputMode, newMode: CreateBendInputMode)

Called when the createBendInputMode property value changes and after initialization of the property.

Parameters

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

oldMode - CreateBendInputMode: the old value, which may be null the first time
newMode - CreateBendInputMode: the new value

Examples

Disabling the CreateBendInputMode on its parent input mode

mode.createBendInputMode.enabled = false

onCreateBendInputModeDragSegmentFinished

(evt: InputModeItemEventArgs<IBend>, sender: any)

Called as soon as CreateBendInputMode created a new bend.

Remarks

This method selects the bend and starts the handleInputMode using the handle for the newly created bend. The bend is created using the hit edge's IBendCreator implementation, as obtained from the edge's lookup and calls dragBend. If the subsequent drag is canceled by the user, this call will remove the bend again.

Parameters

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

evt - InputModeItemEventArgs<IBend>: The InputModeItemEventArgs<IBend> that provides the new bend.
sender - any: The element on which the event was triggered.

onCreateEdgeInputModeChanged

(oldMode: CreateEdgeInputMode, newMode: CreateEdgeInputMode)

Called when the createEdgeInputMode property value changes and after initialization of the property.

Parameters

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

oldMode - CreateEdgeInputMode: the old value, which may be null the first time
newMode - CreateEdgeInputMode: the new value

onDeletedItem

(evt: InputModeItemChangedEventArgs<IModelItem,EventArgs>)

Raises the deleted-item event.

Parameters

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

evt - InputModeItemChangedEventArgs<IModelItem,EventArgs>: The instance containing the event data.

onDeletedSelection

(evt: ItemsEventArgs)

Raises the deleted-selection event.

Parameters

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

evt - ItemsEventArgs: The SelectionEventArgs<T> instance containing the event data.

onDeletingSelection

Raises the deleting-selection event.

Parameters

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

evt - SelectionEventArgs<IModelItem>: The SelectionEventArgs<T> instance containing the event data.

onEdgePortsChanged

(evt: InputModeItemChangedEventArgs<IEdge,EdgeEventArgs>)

Invoked after an edge's source and/or target ports have been changed as the result of an input gesture.

Remarks

Dispatches the edge-ports-changed event.

Parameters

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

evt - InputModeItemChangedEventArgs<IEdge,EdgeEventArgs>: The InputModeItemChangedEventArgs<TItem,TDetail> for the edge-ports-changed.

onEditLabelInputModeChanged

(oldMode: EditLabelInputMode, newMode: EditLabelInputMode)

Called when the editLabelInputMode property value changes and after initialization of the property.

Parameters

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

oldMode - EditLabelInputMode: the old value, which may be null the first time
newMode - EditLabelInputMode: the new value

onGraphComponentChanged

(oldGraphComponent: GraphComponent, newGraphComponent: GraphComponent)

Called when the graphComponent property changes.

Parameters

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

oldGraphComponent - GraphComponent: The old control.
newGraphComponent - GraphComponent: The new control.

onGraphSelectionChanged

(oldSelection: IGraphSelection, newSelection: IGraphSelection)

Called when the IGraphSelection property changes.

Remarks

This will update the internal state of the modes and is called both during install and uninstall.

Parameters

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

oldSelection - IGraphSelection: The old selection instance.
newSelection - IGraphSelection: The new selection instance.

onGroupedSelection

Raises the grouped-selection event.

Parameters

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

evt - SelectionEventArgs<IModelItem>: The SelectionEventArgs<T> instance containing the event data.

onGroupingSelection

Raises the grouping-selection event.

Parameters

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

evt - SelectionEventArgs<IModelItem>: The SelectionEventArgs<T> instance containing the event data.

onHandleInputModeChanged

(oldMode: HandleInputMode, newMode: HandleInputMode)

Called when the handleInputMode property value changes and after initialization of the property.

Parameters

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

oldMode - HandleInputMode: the old value, which may be null the first time
newMode - HandleInputMode: the new value

onItemClicked

Raises the item-clicked event.

Remarks

This implementation will stop the event propagation as soon as an event handler has set the handled property to true.

Parameters

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

evt - ItemClickedEventArgs<IModelItem>: The ItemClickedEventArgs<T> instance that contains the item that has been clicked.

Defined in

onItemDoubleClicked

Raises the item-double-clicked event.

Remarks

This implementation will stop the event propagation as soon as an event handler has set the handled property to true.

Parameters

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

evt - ItemClickedEventArgs<IModelItem>: The ItemClickedEventArgs<T> instance that contains the item that has been double-clicked.

Defined in

onItemHoverInputModeChanged

(oldMode: ItemHoverInputMode, newMode: ItemHoverInputMode)

Called when the itemHoverInputMode property value changes and after initialization of the property.

Parameters

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

oldMode - ItemHoverInputMode: the old value, which may be null the first time
newMode - ItemHoverInputMode: the new value

Defined in

onItemLeftClicked

Raises the item-left-clicked event.

Remarks

This implementation will stop the event propagation as soon as an event handler has set the handled property to true.

Parameters

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

evt - ItemClickedEventArgs<IModelItem>: The ItemClickedEventArgs<T> instance that contains the item that has been clicked.

Defined in

onItemLeftDoubleClicked

Raises the item-left-double-clicked event.

Remarks

This implementation will stop the event propagation as soon as an event handler has set the handled property to true.

Parameters

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

evt - ItemClickedEventArgs<IModelItem>: The ItemClickedEventArgs<T> instance that contains the item that has been double-clicked.

Defined in

onItemRightClicked

Raises the item-right-clicked event.

Remarks

This implementation will stop the event propagation as soon as an event handler has set the handled property to true.

Parameters

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

evt - ItemClickedEventArgs<IModelItem>: The ItemClickedEventArgs<T> instance that contains the item that has been clicked.

Defined in

onItemRightDoubleClicked

Raises the item-right-double-clicked event.

Remarks

This implementation will stop the event propagation as soon as an event handler has set the handled property to true.

Parameters

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

evt - ItemClickedEventArgs<IModelItem>: The ItemClickedEventArgs<T> instance that contains the item that has been double clicked.

Defined in

GraphInputMode.onKeyboardInputModeChanged

onKeyboardInputModeChanged

(oldMode: KeyboardInputMode, newMode: KeyboardInputMode)

Called when the keyboardInputMode changes.

Parameters

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

oldMode - KeyboardInputMode: The old keyboardInputMode.
newMode - KeyboardInputMode: The new keyboardInputMode.

Overrides

onLabelAdded

(evt: InputModeItemEventArgs<ILabel>)

Raises the label-added event.

Remarks

Propagates editLabelInputMode's label-added event.

Parameters

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

evt - InputModeItemEventArgs<ILabel>: The InputModeItemEventArgs<TModelItem> instance that contains the ILabel that has been added.

onLabelDropInputModeChanged

(oldMode: LabelDropInputMode, newMode: LabelDropInputMode)

Called when the labelDropInputMode property value changes and after initialization of the property.

Parameters

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

oldMode - LabelDropInputMode: the old value, which may be null the first time
newMode - LabelDropInputMode: the new value

onLabelDropInputModeLabelCreated

(evt: InputModeItemEventArgs<ILabel>, sender: any)

Called when the labelDropInputMode's item-created event is triggered.

Remarks

This implementation adjusts the content bounds, triggers the label-added event, and tries to set the newly created node as the current item.

Parameters

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

evt - InputModeItemEventArgs<ILabel>: The event argument instance containing the event data.
sender - any: The sender.

onLabelEdited

(evt: InputModeItemEventArgs<ILabel>)

Raises the label-edited event.

Remarks

Propagates editLabelInputMode's label-edited event.

Parameters

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

evt - InputModeItemEventArgs<ILabel>: The InputModeItemEventArgs<TModelItem> instance that contains the ILabel that has changed the text.

onLassoSelect

(context: IInputModeContext, lassoPath: GeneralPath, selectionPolicy: SelectionPolicy)

Performs lasso-selection with the given path.

Remarks

This method is called internally when either the lassoSelect method is called or the user performs a lasso-selection gesture via lassoSelectionInputMode.

Parameters

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

context - IInputModeContext: The input mode context.
lassoPath - GeneralPath: The lasso selection path.
selectionPolicy - SelectionPolicy: The policy to use for changing the selection of the elements.

Defined in

onLassoSelectionInputModeChanged

(oldMode: LassoSelectionInputMode, newMode: LassoSelectionInputMode)

Called when the lassoSelectionInputMode property value changes and after initialization of the property.

Parameters

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

oldMode - LassoSelectionInputMode: the old value, which may be null the first time
newMode - LassoSelectionInputMode: the new value

Defined in

onMarqueeSelect

(context: IInputModeContext, marqueeRectangle: Rect, selectionPolicy: SelectionPolicy)

Performs marquee selection with the given rectangle.

Remarks

This method is called internally when either the marqueeSelect method is called or the user performs a marquee-selection gesture via marqueeSelectionInputMode.

Parameters

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

context - IInputModeContext: The input mode context.
marqueeRectangle - Rect: The selection rectangle.
selectionPolicy - SelectionPolicy: The policy for changing the selection.

Defined in

onMarqueeSelectionInputModeChanged

(oldMode: MarqueeSelectionInputMode, newMode: MarqueeSelectionInputMode)

Called when the marqueeSelectionInputMode property value changes and after initialization of the property.

Parameters

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

oldMode - MarqueeSelectionInputMode: the old value, which may be null the first time
newMode - MarqueeSelectionInputMode: the new value

Defined in

onMoveSelectedItemsInputModeChanged

(oldMode: MoveInputMode, newMode: MoveInputMode)

Called when the moveSelectedItemsInputMode property value changes and after initialization of the property.

Parameters

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

oldMode - MoveInputMode: the old value, which may be null the first time
newMode - MoveInputMode: the new value

onMoveUnselectedItemsInputModeChanged

(oldMode: MoveInputMode, newMode: MoveInputMode)

Called when the moveUnselectedItemsInputMode property value changes and after initialization of the property.

Parameters

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

oldMode - MoveInputMode: the old value, which may be null the first time
newMode - MoveInputMode: the new value

onMoveViewportInputModeChanged

(oldMode: MoveViewportInputMode, newMode: MoveViewportInputMode)

Called when the moveViewportInputMode property value changes and after initialization of the property.

Parameters

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

oldMode - MoveViewportInputMode: the old value, which may be null the first time
newMode - MoveViewportInputMode: the new value

Defined in

onMultiSelectionFinished

Raises the multi-selection-finished event.

Parameters

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

evt - SelectionEventArgs<IModelItem>: The SelectionEventArgs<IModelItem> that provides the selection.

Defined in

onMultiSelectionStarted

Raises the multi-selection-started event.

Parameters

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

evt - SelectionEventArgs<IModelItem>: The SelectionEventArgs<IModelItem> that provides the selection.

Defined in

onNavigationInputModeChanged

(oldMode: NavigationInputMode, newMode: NavigationInputMode)

Called when the navigationInputMode property value changes and after initialization of the property.

Parameters

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

oldMode - NavigationInputMode: the old value, which may be null the first time
newMode - NavigationInputMode: the new value

Defined in

onNodeCreated

(evt: InputModeItemEventArgs<INode>)

Raises the node-created event.

Remarks

Note that if allowFolderNodeAsParent is set to true, the reported node can actually be part of the master graph.

Parameters

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

evt - InputModeItemEventArgs<INode>: The InputModeItemEventArgs<TModelItem> instance containing the created node.

onNodeDropInputModeChanged

(oldMode: NodeDropInputMode, newMode: NodeDropInputMode)

Called when the nodeDropInputMode property value changes and after initialization of the property.

Parameters

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

oldMode - NodeDropInputMode: the old value, which may be null the first time
newMode - NodeDropInputMode: the new value

onNodeDropInputModeNodeCreated

(evt: InputModeItemEventArgs<INode>, sender: any)

Called when the nodeDropInputMode's item-created event is triggered.

Remarks

This implementation adjusts the content bounds, triggers the node-created event, and tries to set the newly created node as the current item.

Parameters

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

evt - InputModeItemEventArgs<INode>: The event argument instance containing the event data.
sender - any: The sender.

onNodeReparented

(evt: InputModeItemChangedEventArgs<INode,NodeEventArgs>)

Raises the node-reparented event.

Parameters

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

evt - InputModeItemChangedEventArgs<INode,NodeEventArgs>: The InputModeItemChangedEventArgs<TItem,TDetail> instance containing the event data. The details are of type NodeEventArgs which provide the old parent in its parent property.

onPopulateItemContextMenu

(evt: PopulateItemContextMenuEventArgs<IModelItem>)

Raises the populate-item-context-menu event.

Parameters

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

evt - PopulateItemContextMenuEventArgs<IModelItem>: The PopulateItemContextMenuEventArgs<TModelItem> instance containing the event data.

Defined in

onPortAdded

(evt: InputModeItemEventArgs<IPort>)

Raises the port-added event.

Parameters

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

evt - InputModeItemEventArgs<IPort>: The InputModeItemEventArgs<TModelItem> instance that contains the IPort that has been added.

onPortDropInputModeChanged

(oldMode: PortDropInputMode, newMode: PortDropInputMode)

Called when the portDropInputMode property value changes and after initialization of the property.

Parameters

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

oldMode - PortDropInputMode: the old value, which may be null the first time
newMode - PortDropInputMode: the new value

onPortDropInputModePortCreated

(evt: InputModeItemEventArgs<IPort>, sender: any)

Called when the portDropInputMode's item-created event is triggered.

Remarks

This implementation adjusts the content bounds, triggers the port-added event, and tries to set the newly created node as the current item.

Parameters

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

evt - InputModeItemEventArgs<IPort>: The event argument instance containing the event data.
sender - any: The sender.

onQueryItemToolTip

(evt: QueryItemToolTipEventArgs<IModelItem>)

Raises the query-item-tool-tip event.

Parameters

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

evt - QueryItemToolTipEventArgs<IModelItem>: The QueryItemToolTipEventArgs<TModelItem> instance containing the event data.

Defined in

onReparentNodeHandlerChanged

(oldMode: IReparentNodeHandler, newMode: IReparentNodeHandler)

Called when the reparentNodeHandler property value changes and after initialization of the property.

Parameters

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

oldMode - IReparentNodeHandler: the old value, which may be null the first time
newMode - IReparentNodeHandler: the new value

onSnapContextChanged

(oldContext: GraphSnapContext, newContext: GraphSnapContext)

Called when the snapContext property context changed.

Parameters

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

oldContext - GraphSnapContext: The old snap context.
newContext - GraphSnapContext: The new snap context.

onToolTipInputModeChanged

(oldMode: ToolTipInputMode, newMode: ToolTipInputMode)

Called when the toolTipInputMode property value changes and after initialization of the property.

Parameters

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

oldMode - ToolTipInputMode: the old value, which may be null the first time
newMode - ToolTipInputMode: the new value

Defined in

onUngroupedSelection

Raises the ungrouped-selection event.

Parameters

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

evt - SelectionEventArgs<IModelItem>: The SelectionEventArgs<T> instance containing the event data.

onUngroupingSelection

Raises the ungrouping-selection event.

Parameters

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

evt - SelectionEventArgs<IModelItem>: The SelectionEventArgs<T> instance containing the event data.

onWaitInputModeChanged

(oldMode: WaitInputMode, newMode: WaitInputMode)

Called when the waitInputMode property value changes and after initialization of the property.

Parameters

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

oldMode - WaitInputMode: the old value, which may be null the first time
newMode - WaitInputMode: the new value

Defined in

paste

()

Pastes the current clipboard contents.

Examples

mode.paste()

pasteAtLocation

(location: Point)

Pastes the current clipboard contents at the given location.

Remarks

The location is at the center of the bounds of the items that are pasted. This method reconfigures pasteOffset and calls paste.

Parameters

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

location - Point: The location at which the center of the clipboard's contents should be positioned.

Examples

mode.pasteAtLocation(mode.graphComponent!.lastEventLocation)

raiseSelection

()

Raises the visual representations of all selected IModelItems above their current successors.

Examples

mode.raiseSelection()

redo

()

Redoes the last undone operation.

Remarks

Delegates to the IGraph's UndoEngine's redo method.

This method will return without doing anything if undo has not been enabled on the graphComponent's graph or if the UndoEngine cannot redo operations.

remove

(mode: IInputMode)

Removes the given mode from this compound mode.

Parameters

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

mode - IInputMode: The mode to remove.

Defined in

requeryHandles

()

Re-evaluate all visible handles.

Remarks

This causes a query to all implementations of IHandle, IHandleProvider, and IReshapeHandleProvider from the lookupsee> of selected items.

This method is called when the showHandleItems property is changed.

Throws

Exception({ name: 'InvalidOperationError' }): When the handleInputMode is active.

reverseEdge

(edge: IEdge)

Reverses the given edges.

Remarks

The edge will only be reversed if allowReverseEdge is set to true and reversableEdgePredicate returns true for the edge. An edge-ports-changed event will be dispatched after the edge has been reversed.

Parameters

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

edge - IEdge: The IEdge to reverse.

reverseEdges

(edges: IEnumerable<IEdge>)

Reverses the given edges.

Remarks

The edges will only be reversed if allowReverseEdge is set to true and reversableEdgePredicate returns true for the edge.

For each edge a edge-ports-changed event will be dispatched.

Parameters

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

edges - IEnumerable<IEdge>: The IEdges to reverse.

reverseSelectedEdges

()

Reverses the selected edges.

Remarks

This implementation invokes reverseEdges providing the selected edges.

The edges will only be reversed if reversableEdgePredicate returns true for each edge.

For each edge an edge-ports-changed event will be dispatched.

selectAll

()

Clears the current selection and selects all nodes and bends in this graph.

Remarks

By default, this method will be called in response to a Ctrl+A key press recognized by keyboardInputMode.

Defined in

selectionToBack

()

Lowers the visual representations of all selected IModelItems to the back.

Examples

mode.selectionToBack()

selectionToFront

()

Raises the visual representations of all selected IModelItems to the front.

Examples

mode.selectionToFront()

selectNodeAndSelfLoopBends

(node: INode)

Selects the node and possible bends of self-loop edges.

Remarks

This method delegates to setSelected for the node and all adjacent self-loop bends.

Parameters

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

node - INode: The node to select.

setCurrentItem

(item: IModelItem)

Called by this instance to set the current item on the NavigationInputMode

Parameters

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

item - IModelItem: The item to set as the new "current" item.

Defined in

setNodeLayout

(node: INode, layout: Rect)

Updates the bounds of the node.

Remarks

This method differs from a call to setNodeLayout in a number of ways:

An undo unit is enqueued.
The node is reshaped interactively using the IReshapeHandler implementation found in its lookup. This enables correctly adjusting e.g. affected orthogonal edges and parent group nodes.
adjustContentBounds is called.

Parameters

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

node - INode: The node to reshape.
layout - Rect: The new node layout.

setNodeLocation

(node: INode, location: Point)

Updates the location of the node.

Remarks

This method differs from a call to setNodeLayout in a number of ways:

An undo unit is enqueued.
The node is moved interactively using the IPositionHandler implementation found in its lookup. This enables correctly adjusting e.g. affected orthogonal edges, children of a group node, and parent group nodes.
adjustContentBounds is called.

Parameters

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

node - INode: The node to move.
location - Point: The new node location.

setSelected

(item: IModelItem, selected: boolean)

Uses the graphSelection to select the given item.

Parameters

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

item - IModelItem: The item to set the selection state on.
selected - boolean: The new selection state.

Defined in

shouldSkipHitLabel

(context: IInputModeContext, hitLabel: ILabel, location: Point) : boolean

Callback function that is used during hit testing, when an ILabel was hit tested before another non-label underneath it was reported.

Remarks

This method can be used to prioritize the hit testing order for items below labels, depending on the label.

This implementation returns false if skipHitLabels is false or if the context's inputMode is not a GraphInputMode or MoveInputMode.

Parameters

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

context - IInputModeContext: The context in which the hit testing is performed.
hitLabel - ILabel: The label that was hit before a non-label at the same location.
location - Point: The location the label was hit.

Returns

↪boolean: Whether to first report the non-label during hit testing.

Defined in

snapToGrid

(context: IInputModeContext, node: INode)

Snaps the node to the grid using the IGridConstraintProvider<T> for INodes queried from the given context.

Remarks

This method is called by this instance whenever new nodes are created using the UI.

startLabelAddition

(owner: ILabelOwner) : Promise<yfiles.graph.ILabel|null>

Adds a new label to the given item interactively.

Remarks

This method will invoke editLabelInputMode's startLabelAddition method.

Parameters

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

owner - ILabelOwner: The item to add a label to.

Returns

↪Promise<yfiles.graph.ILabel|null>: A Promise that fulfills either with the edited label, or with null if editing was canceled or the text did not validate.

startLabelEditing

(label: ILabel) : Promise<yfiles.graph.ILabel|null>

Starts editing the given label.

Remarks

This method will invoke editLabelInputMode's startLabelEditing method.

Parameters

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

label - ILabel: The label to edit.

Returns

↪Promise<yfiles.graph.ILabel|null>: A Promise that fulfills either with the edited label, or with null if editing was canceled or the text did not validate.

subModePriorityChanged

()

Called when the priority of an installed sub mode has changed.

Remarks

This implementation uninstalls all sub modes and then re-installs them according to their new priorities.

Defined in

tryStop

() : boolean

Tries to stop all modes.

Returns

↪boolean: true if the editing process was successfully stopped, or if there was no edit in progress to stop; otherwise, false.

Implements

undo

()

Undoes the last operation.

Remarks

Delegates to the IGraph's UndoEngine's undo method.

This method will return without doing anything if undo has not been enabled on the graphComponent's graph or if the UndoEngine cannot undo operations.

ungroupSelection

()

Makes each of the currently selected nodes a direct child of the root group.

Remarks

The default shortcut for this is Ctrl+U.

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.

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.

Overrides

IInputMode.uninstall

Events

'canvas-clicked'

: function(ClickEventArgs, this):void

Occurs when the empty canvas area has been clicked or tapped.

Remarks

If one of the event handlers sets the handled property to true the event will not be propagated anymore.

Defined in

'deleted-item'

: function(InputModeItemChangedEventArgs<IModelItem,EventArgs>, this):void

Occurs when an item has been deleted interactively by this mode.

Remarks

Note that this event will not be triggered for items that are removed implicitly, e.g. if the event is triggered for a node, its labels, ports, and adjacent edges will not necessarily be reported separately. In order to be notified of any removal events, the IGraph events should be used instead.

This event is raised after each selected item have been removed. To clean up after deletion, e.g. by applying a new automatic layout, use the deleted-selection event which is raised only once after all items have been deleted.

The deleting-selection event is raised before all items have been removed. The deleted-selection event is raised after all items have been removed.

In addition to the deleted item and its type, the ItemChangedEventArgs<TItem,TValue> provide information about the status before deletion.

Examples

mode.addEventListener('deleted-item', (e) => {
  if (e.details instanceof NodeEventArgs) {
    const ne = e.details as NodeEventArgs
    console.log(`Old parent: ${ne.parent}`)
  } else if (e.details instanceof EdgeEventArgs) {
    const ee = e.details as EdgeEventArgs
    console.log(`Old source port owner: ${ee.sourcePortOwner}`)
    console.log(`Old target port owner: ${ee.targetPortOwner}`)
  } else if (e.details instanceof PortEventArgs) {
    const pe = e.details as PortEventArgs
    console.log(`Old port owner: ${pe.owner}`)
  } else if (e.details instanceof LabelEventArgs) {
    const le = e.details as LabelEventArgs
    console.log(`Old label owner: ${le.owner}`)
  } else if (e.details instanceof BendEventArgs) {
    const be = e.details as BendEventArgs
    console.log(`Old bend owner: ${be.owner}`)
  }
})

'deleted-selection'

: function(ItemsEventArgs, this):void

Occurs after all selected items have been removed in deleteSelection.

Remarks

This event is raised after all selected items have been removed. It is recommended to register to this event if one wants to clean up after deletion, e.g. by applying a new automatic layout.

The deleting-selection event is raised before all items have been removed. The deleted-item is raised for each item after it has been removed.

Note that all items which have been removed are not in the selection anymore but are provided as items of the ItemsEventArgs.

Examples

Applying a layout after the selected items have been deleted;

mode.addEventListener('deleted-selection', () => {
  mode.graph!.applyLayout(new HierarchicalLayout())
})

The deleted items are neither in the selection nor in the graph. One has to retrieve them before deletion:

let selectedItems = new List<IModelItem>()
mode.addEventListener('deleting-selection', (evt) => {
  selectedItems = evt.selection.toList()
})
mode.addEventListener('deleted-selection', (evt) => {
  // the deleted items are not in the current selection anymore but are provided by the event arguments
  const deletedItems = evt.items
})

'deleting-selection'

: function(SelectionEventArgs<IModelItem>, this):void

Occurs just before the deleteSelection method starts its work and will be followed by any number of deleted-item events and finalized by a deleted-selection event.

Remarks

This event is raised before the deletion starts. It might be used to take a snapshot of the items to delete since there is no access to these afterwards.

The deleted-item is raised for each item after it has been removed. The deleted-selection event is raised after all items have been removed.

Examples

The deleted items are neither in the selection nor in the graph. One has to retrieve them before deletion:

let selectedItems = new List<IModelItem>()
mode.addEventListener('deleting-selection', (evt) => {
  selectedItems = evt.selection.toList()
})
mode.addEventListener('deleted-selection', (evt) => {
  // the deleted items are not in the current selection anymore but are provided by the event arguments
  const deletedItems = evt.items
})

'edge-ports-changed'

: function(InputModeItemChangedEventArgs<IEdge,EdgeEventArgs>, this):void

Occurs after an edge's source and/or target ports have been changed as the result of an input gesture.

Remarks

The details are of type EdgeEventArgs.

'grouped-selection'

: function(SelectionEventArgs<IModelItem>, this):void

Occurs after the groupSelection method has grouped the selected items.

Remarks

This event is raised after the items are grouped.

The event is not raised if no items are selected.

'grouping-selection'

: function(SelectionEventArgs<IModelItem>, this):void

Occurs just before the groupSelection method starts its work.

Remarks

This event is raised before the items are grouped.

The event is not raised if no items are selected.

'item-clicked'

: function(ItemClickedEventArgs<IModelItem>, this):void

Occurs when an item has been clicked or tapped.

Remarks

If one of the event handlers sets the handled property to true the event will not be propagated anymore.

Button-specific and input type specific events (item-left-clicked and item-right-clicked) will be raised before this event. If one of those is marked handled this event will not be raised anymore.

Examples

mode.addEventListener('item-clicked', (evt) => {
  const node = evt.item
  if (node !== null) {
    doSomethingWithNode(node)
    evt.handled = true
  }
})

Defined in

'item-double-clicked'

: function(ItemClickedEventArgs<IModelItem>, this):void

Occurs when an item has been double-clicked or double-tapped.

Remarks

If one of the event handlers sets the handled property to true the event will not be propagated anymore.

Depending on the value of the clickReportingPolicy property of clickInputMode this event may be preceded by no, one, or two item-clicked events (as well as the corresponding button-specific event).

Button-specific and input-type specific events (item-left-double-clicked and item-right-double-clicked) will be raised before this event. If one of those is marked handled this event will not be raised anymore.

Examples

mode.addEventListener('item-double-clicked', (evt) => {
  const node = evt.item
  if (node !== null) {
    doSomethingWithNode(node)
    evt.handled = true
  }
})

Defined in

'item-left-clicked'

: function(ItemClickedEventArgs<IModelItem>, this):void

Occurs when an item has been left-clicked.

Remarks

This event will be raised before the item-clicked event. If one of the event handlers sets the handled property to true the event will not be propagated anymore. This also means that the item-clicked event will not be raised in that case.

The term "left click" refers to a click with the left mouse button or a stylus tap.

Examples

mode.addEventListener('item-left-clicked', (evt) => {
  const node = evt.item
  if (node !== null) {
    doSomethingWithNode(node)
    evt.handled = true
  }
})

Defined in

'item-left-double-clicked'

: function(ItemClickedEventArgs<IModelItem>, this):void

Occurs when an item has been left double-clicked.

Remarks

This event will be raised before the item-double-clicked event. If one of the event handlers sets the handled property to true the event will not be propagated anymore. This also means that the item-double-clicked event will not be raised in that case.

Examples

mode.addEventListener('item-left-double-clicked', (evt) => {
  const node = evt.item
  if (node !== null) {
    doSomethingWithNode(node)
    evt.handled = true
  }
})

Defined in

'item-right-clicked'

: function(ItemClickedEventArgs<IModelItem>, this):void

Occurs when an item has been right-clicked.

Remarks

Examples

mode.addEventListener('item-right-clicked', (evt) => {
  const node = evt.item
  if (node !== null) {
    doSomethingWithNode(node)
    evt.handled = true
  }
})

Defined in

'item-right-double-clicked'

: function(ItemClickedEventArgs<IModelItem>, this):void

Occurs when an item has been right double-clicked.

Remarks

Examples

mode.addEventListener('item-right-double-clicked', (evt) => {
  const node = evt.item
  if (node !== null) {
    doSomethingWithNode(node)
    evt.handled = true
  }
})

Defined in

'items-copied'

: function(ItemsEventArgs, this):void

Occurs when the copy operation finished successfully.

Remarks

The items in the ItemsEventArgs are the original items in graph that were copied during the copy operation.

Defined in

'items-cut'

: function(ItemsEventArgs, this):void

Occurs when the cut operation finished successfully.

Remarks

The items in the ItemsEventArgs are the items that were removed during the cut operation.

'items-duplicated'

: function(ItemsEventArgs, this):void

Occurs when the duplicateSelection operation finished successfully.

Remarks

The items in the ItemsEventArgs are the items that were created during the duplicate operation.

'items-pasted'

: function(ItemsEventArgs, this):void

Occurs when the paste operation finished successfully.

Remarks

The items in the ItemsEventArgs are the items that were created during the paste operation.

'label-added'

: function(InputModeItemEventArgs<ILabel>, this):void

Occurs when this mode has triggered the addition of an ILabel, for instance, in response to startLabelAddition.

'label-edited'

: function(InputModeItemEventArgs<ILabel>, this):void

Occurs when this mode has triggered the edit of an ILabel, for instance, in response to startLabelEditing.

'multi-selection-finished'

: function(SelectionEventArgs<IModelItem>, this):void

Occurs when a single or multi select operation has been finished.

Remarks

The event is not triggered for the individual selection operations that constitute a multi selection operation.

Defined in

'multi-selection-started'

: function(SelectionEventArgs<IModelItem>, this):void

Occurs when a single or multi select operation has been started.

Remarks

The event is not triggered for the individual selection operations that constitute a multi selection operation.

Defined in

'node-created'

: function(InputModeItemEventArgs<INode>, this):void

Occurs when this mode has created a node in response to user interaction.

Remarks

This event is triggered if the node is created using a click gesture via createNode, via a drag and drop operation that was completed by nodeDropInputMode, or by grouping nodes via GROUP_SELECTION. Note that if allowFolderNodeAsParent is set to true, the reported node can actually be part of the master graph.

Examples

Applying a layout each time the user created a new node

mode.addEventListener('node-created', () => {
  mode.graph!.applyLayout(new HierarchicalLayout())
})

'node-reparented'

: function(InputModeItemChangedEventArgs<INode,NodeEventArgs>, this):void

Occurs when a node has been reparented interactively.

Remarks

This is triggered whenever the reparentNodeHandler's reparent method has been called to reparent a node interactively.

The details are of type NodeEventArgs which provide the old parent in its parent property.

'populate-item-context-menu'

: function(PopulateItemContextMenuEventArgs<IModelItem>, this):void

Occurs when the context menu over an item is about to be opened to determine the contents of the context menu.

Remarks

This method will only be called for items that match the contextMenuItems type.

Examples

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.contextMenuItems = GraphItemTypes.NODE
mode.addEventListener('populate-item-context-menu', (evt) => {
  // Get the node which is handled or null if the item is not a node
  const node = evt.item
  // Create the context menu items
  if (node !== null) {
    // Create a menu item to delete the node

    // Show the menu
    evt.contextMenu = [
      { label: 'Delete Item', action: () => graph.remove(node) },
    ]
  }
})

Defined in

'port-added'

: function(InputModeItemEventArgs<IPort>, this):void

Occurs when this mode has triggered the addition of an IPort, for instance, in response to portDropInputMode.

'query-item-tool-tip'

: function(QueryItemToolTipEventArgs<IModelItem>, this):void

Occurs when the mouse is hovering over an item to determine the tool tip to display.

Remarks

This method will only be called for items that match the toolTipItems type.

Examples

Configuring the ToolTipInputMode to display tooltips for nodes

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.toolTipItems = GraphItemTypes.NODE
// register a listener
mode.addEventListener('query-item-tool-tip', (evt) => {
  if (evt.handled) {
    // A tooltip has already been assigned -> nothing to do.
    return
  }
  // We can safely cast here because we set ToolTipItems to only Node.
  const hitNode = evt.item as INode
  if (hitNode.labels.size > 0) {
    // Show the text of the first label as tooltip.
    evt.toolTip = hitNode.labels.get(0).text

    // Indicate that the tooltip content has been set.
    evt.handled = true
  }
})

Defined in