Due to the viewer-centric nature of this input mode, collapsing and expanding groups is disabled per default. To enable this feature, set allowCollapseGroup and allowExpandGroup to true.
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 handing events.
waitInputMode (−1) – Disables this input mode when layouts or animations run.
keyboardInputMode (0) – Handles commands and arbitrary keyboard shortcuts.
clickInputMode (20) – Handles mouse and stylus clicks and double-clicks as well as touch taps and double-taps.
lassoSelectionInputMode (150) – Allows dragging a lasso path to select items within it. Disabled by default.
Gets a collection of commands that this input mode will handle.
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.
Gets or sets the order of the types of items that should be used to determine what item has been clicked or tapped.
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.
Determine which items should be selectable by different selection gestures
// Nodes, edges, and bends are selectablemode.selectableItems = GraphItemTypes.NODE | GraphItemTypes.EDGE | GraphItemTypes.BEND// Only nodes and bends are selectable by marquee selectionmode.marqueeSelectableItems = GraphItemTypes.NODE | GraphItemTypes.BEND// Only nodes and edges are selectable by click selectionmode.clickSelectableItems = GraphItemTypes.NODE | GraphItemTypes.EDGE
// mode is either an instance of GraphEditorInputMode or GraphViewerInputModemode.contextMenuItems = GraphItemTypes.NODEmode.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) }, ] }})
Gets or sets the types of items a context menu should be queried for.
The items for which a context menu should be queried. The default value is NODE|EDGE.
conversionfinal
Examples
// mode is either an instance of GraphEditorInputMode or GraphViewerInputModemode.contextMenuItems = GraphItemTypes.NODEmode.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) }, ] }})
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.
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.
An event recognizer which determines that the user wants to use the cyclic click selection behavior.
Sample Graphs
ShownSetting: Alt pressed / cyclic selection recognizer returns true: repeated clicking at a location cycles through the elements at that location (the X).
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.
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.
Gets or sets the enabled state of this input mode.
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.
Gets or sets a value indicating whether this mode will be the only one running when it has the mutex.
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.
Gets or sets a value indicating whether void styles should be ignored when selecting or focusing items.
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.
final
Property Value
true if void styles should be ignored for selection and focus; false otherwise. Default is true.
Gets or sets the ItemHoverInputMode that is provided by this instance to detect when the cursor hovers over a graph item.
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.
final
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 nodesmode.itemHoverInputMode.enabled = truemode.itemHoverInputMode.hoverItems = GraphItemTypes.EDGE | GraphItemTypes.NODE// handle changes on the hovered itemsmode.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 },)
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 pressedgraphEditorInputMode.keyboardInputMode.addKeyBinding( 'Insert', ModifierKeys.NONE, () => { graphEditorInputMode.createNode( graphEditorInputMode.graphComponent!.viewport.center, ) },)
The default is a combination of NODE, EDGE, and BEND.
conversionfinal
Examples
Determine which items should be selectable by different selection gestures
// Nodes, edges, and bends are selectablemode.selectableItems = GraphItemTypes.NODE | GraphItemTypes.EDGE | GraphItemTypes.BEND// Only nodes and bends are selectable by marquee selectionmode.marqueeSelectableItems = GraphItemTypes.NODE | GraphItemTypes.BEND// Only nodes and edges are selectable by click selectionmode.clickSelectableItems = GraphItemTypes.NODE | GraphItemTypes.EDGE
Gets or sets the event recognizer that determines if a click or tap is deemed a multi-selection gesture.
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).
By default, this input mode has a priority of 210.
final
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 nodesmode.navigationInputMode.allowCollapseGroup = truemode.navigationInputMode.allowExpandGroup = true// do not fit the content after expand/collapsemode.navigationInputMode.fitContentAfterGroupActions = false// expand/collapse group nodes in a way that their// top right corner stays at its current coordinatesmode.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 GraphViewerInputModemode.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 */})
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.
Determine which items should be selectable by different selection gestures
// Nodes, edges, and bends are selectablemode.selectableItems = GraphItemTypes.NODE | GraphItemTypes.EDGE | GraphItemTypes.BEND// Only nodes and bends are selectable by marquee selectionmode.marqueeSelectableItems = GraphItemTypes.NODE | GraphItemTypes.BEND// Only nodes and edges are selectable by click selectionmode.clickSelectableItems = GraphItemTypes.NODE | GraphItemTypes.EDGE
Gets or sets a value that specifies whether during hit testing, labels should be skipped at all.
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.
// mode is either an instance of GraphEditorInputMode or GraphViewerInputModemode.toolTipItems = GraphItemTypes.NODE// register a listenermode.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 }})
Gets or sets the types of the items that should be queried for a tooltip.
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.
conversionfinal
Examples
Configuring the ToolTipInputMode to display tooltips for nodes
// mode is either an instance of GraphEditorInputMode or GraphViewerInputModemode.toolTipItems = GraphItemTypes.NODE// register a listenermode.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 }})
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.
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.
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.
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.
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:
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:
Performs one-time initialization of this instance.
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.
Installs this mode into the given context that is provided by the canvas.
In general a mode can only be installed into a single canvas at all times.
This method is called to initialize this instance. Implement this method to register the corresponding event handlers for the various input events this mode will listen to.
When this instance gets uninstalled from the context the same context instance will be passed to it.
Implementations may hold a reference to the context instance and use it while installed.
The context that this instance shall be installed into. The same instance will be passed to this instance during uninstall. A reference to the context may be kept and queried while the mode is installed.
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.
This method is called internally when either the lassoSelect method is called or the user performs a lasso-selection gesture via lassoSelectionInputMode.
Performs marquee selection with the given rectangle.
This method is called internally when either the marqueeSelect method is called or the user performs a marquee-selection gesture via marqueeSelectionInputMode.
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.
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.
Occurs when an item has been double-clicked or double-tapped.
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).
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.
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.
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.
Occurs when an item has been right double-clicked.
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.
Gets or sets a value indicating whether to actually display the context menu.
Examples
// mode is either an instance of GraphEditorInputMode or GraphViewerInputModemode.contextMenuItems = GraphItemTypes.NODEmode.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) }, ] }})
Gets or sets a Promise<T> that provides the tooltip content to use.
Examples
Configuring the ToolTipInputMode to display tooltips for nodes
// mode is either an instance of GraphEditorInputMode or GraphViewerInputModemode.toolTipItems = GraphItemTypes.NODE// register a listenermode.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 }})