A complex IInputMode that can be used in a GraphComponent to edit an IGraph instance.
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 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 clicks to determine which items should get click events.
- doubleClickHitTestOrder – Determines the priorities for hit tests when double-clicking items.
- movableItems – 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 graph clipboard'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.
- 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.
- 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.
- shouldInstallCommand – Determines which of the built-in ICommands this input mode should provide and install.
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 (Ctrl+Minus) – Collapses the currently selected group nodes. Can be disabled with allowCollapseGroup of navigationInputMode.
- EXPAND_GROUP (Ctrl+Plus) – Expands the currently selected group nodes. Can be disabled with allowExpandGroup of navigationInputMode.
- TOGGLE_EXPANSION_STATE (Ctrl+Multiply) – Collapses expanded group nodes and expands collapsed group nodes in the current selection. Can be disabled with allowCollapseGroup and allowExpandGroup of navigationInputMode.
- ENTER_GROUP (Ctrl+Enter) – Replaces the currently displayed graph with the contents of the selected group node. Can be disabled with allowEnterGroup of navigationInputMode.
- EXIT_GROUP (Ctrl+Backspace) – 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 rectangle 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.
- handleInputMode (0) – Deals with displaying handles on or around items and interacting with them.
- KeyboardInputMode (0) – Handles commands and arbitrary keyboard shortcuts.
- ClickInputMode (10) – Handles mouse clicks and double-clicks.
- TapInputMode (20) – Handles taps and double-tap.
- MoveViewportInputMode (39) – Allows panning the viewport.
- moveLabelInputMode (39) – Allows moving labels to new positions.
- moveInputMode (40) – Allows moving items that are not labels.
- moveUnselectedInputMode (41) – Allows moving unselected items.
- createBendInputMode (42) – Allows creating bends on edges.
- createEdgeInputMode (45) – Allows creating edges
- LassoSelectionInputMode (45) – Allows dragging a lasso path to select items within it.
- MarqueeSelectionInputMode (50) – Allows dragging a rectangle to select items within it.
- ItemHoverInputMode (55) – Provides events to indicate that the mouse pointer hovers over an item.
- NavigationInputMode (55) – 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 (60) – Handles querying the context menu contents based on a location as well as preparing the menu for display.
- nodeDropInputMode (70) – Allows dropping nodes on the graphComponent, e.g. for dragging items from a palette.
- labelDropInputMode (70) – Allows dropping labels on the graphComponent, e.g. for dragging items from a palette.
- portDropInputMode (70) – Allows dropping ports on the graphComponent, e.g. for dragging items from a palette.
- MouseHoverInputMode (100) – Handles tool tips.
- textEditorInputMode (100) – 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 the Single Selection Demo.
Examples
The GraphEditorInputMode can be installed by setting it as inputMode on the graphComponent it handles.
graphComponent.inputMode = new GraphEditorInputMode({
allowGroupingOperations: true,
snapContext: new GraphSnapContext(),
labelSnapContext: new LabelSnapContext(),
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:
// 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 = falseSelecting 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(ICommand.TOGGLE_ITEM_SELECTION)
geim.availableCommands.remove(ICommand.SELECT_ALL)
geim.navigationInputMode.availableCommands.remove(
ICommand.EXTEND_SELECTION_LEFT
)
geim.navigationInputMode.availableCommands.remove(
ICommand.EXTEND_SELECTION_UP
)
geim.navigationInputMode.availableCommands.remove(
ICommand.EXTEND_SELECTION_DOWN
)
geim.navigationInputMode.availableCommands.remove(
ICommand.EXTEND_SELECTION_RIGHT
)
// disable selection of (possibly multiple) items
mode.pasteSelectableItems = GraphItemTypes.NONERelated Reading in the Developer's Guide
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-editor
- yfiles-umd modules
- view-editor, view-table, view
- Legacy UMD name
- yfiles.input.GraphEditorInputMode
See Also
Constructors
Creates a new instance that is not bound to an existing graph or selection, initially.
Remarks
Parameters
A map of options to pass to the method.
- orthogonalEdgeEditingContext - OrthogonalEdgeEditingContext
The orthogonal edge editing context. This option sets 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.
- hitTester - IHitTester<IModelItem>
The hitTester property. This option sets the hitTester property on the created object.
- pasteSelectableItems - GraphItemTypes
Which types of items should be selected after paste or duplicateSelection. This option sets the pasteSelectableItems property on the created object.
- 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.
- movableItems - GraphItemTypes
Which types of items should be movable using the moveInputMode or moveLabelInputMode respectively in case of labels. This option sets the movableItems 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) : booleanRepresents 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
trueif obj meets the criteria defined within the method represented by this delegate; otherwise,false.
- labelEditableItems - GraphItemTypes
Which types of items may have their labels edited. This option sets the labelEditableItems property on the created object.
- handleInputMode - HandleInputMode
The HandleInputMode as child input mode. This option sets 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.
- pasteDelta - Point
The offset for paste operation if clipboard operations are enabled. This option sets the pasteDelta 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.
- allowAddLabel - boolean
A value determining whether the ADD_LABEL command should be handled. This option sets the allowAddLabel property on the created object.
- textEditorInputModeConfigurator - function(IInputModeContext, TextEditorInputMode, ILabel):void
A handler which allows for configuring the textEditorInputMode during adding or editing labels. This option sets the textEditorInputModeConfigurator property on the created object.
Signature Details
function(context: IInputModeContext, mode: TextEditorInputMode, label: ILabel)Callback for configuring a TextEditorInputMode for editing a provided label instance.Parameters
- context - IInputModeContext
- The context in which the label is being edited or created.
- mode - TextEditorInputMode
- The mode that will be used for editing the label's text.
- label - ILabel
- The label that will be edited or created.
- moveInputMode - MoveInputMode
The MoveInputMode as child mode. This option sets the moveInputMode property on the created object.
- moveUnselectedInputMode - MoveInputMode
The MoveInputMode which handles unselected graph items. This option sets the moveUnselectedInputMode property on the created object.
- adjustContentRectPolicy - AdjustContentRectPolicy
A property that determines whether and how this instance should automatically adjust the contentRect if the graph changes. This option sets the adjustContentRectPolicy property on the created object.
- contentRectMargins - Insets
The margins to use for updateContentRect in adjustContentRect calls. This option sets the contentRectMargins property on the created object.
- snapContext - SnapContext
The SnapContext instance that handles interactive snapping of elements during drag operations like movements. This option sets the snapContext property on the created object.
- labelSnapContext - SnapContext
The LabelSnapContext instance that handles interactive snapping of ILabels to their owner during drag operations like movements. This option sets the labelSnapContext property on the created object.
- moveLabelInputMode - MoveLabelInputMode
The MoveLabelInputMode which handles interactive moving ILabels. This option sets the moveLabelInputMode 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.
- 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 click. This option sets the nodeCreator property on the created object.
Signature Details
function(context: IInputModeContext, graph: IGraph, location: Point, parent: INode) : Promise<INode | null> | INodeA 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.
nullif the new node should be created at root level.
Returns
- textEditorInputMode - TextEditorInputMode
The TextEditorInputMode which handles label editing. This option sets the textEditorInputMode property on the created object.
- createEdgeInputMode - CreateEdgeInputMode
The CreateEdgeInputMode which handles interactive edge creation. This option sets the createEdgeInputMode property on the created object.
- autoRemoveEmptyLabels - boolean
A value indicating whether this mode should automatically remove labels from the graph when a label text has been edited and the label text is empty. This option sets the autoRemoveEmptyLabels 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.
- hideLabelDuringEditing - boolean
A property that determines whether the label should be hidden while it is edited. This option sets the hideLabelDuringEditing property on the created object.
- createBendInputMode - CreateBendInputMode
The CreateBendInputMode which handles interactive bend creation on existing edges. This option sets 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 sets 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 sets 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 sets the portDropInputMode property on the created object.
- 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(Object, EventArgs):boolean
The event recognizer that determines if a click should select the item that is currently visible under the mouse cursor, without giving more important items higher priority. This option sets the detailSelectionRecognizer property on the created object.
Signature Details
function(eventSource: any, evt: EventArgs) : booleanA callback that recognizes events.Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.Parameters
- eventSource - any
- The source of the event.
- evt - EventArgs
- The arguments of the event to be decided to handle.
Returns
- boolean
trueif theevtis considered to be handled.
- cyclicSelectionRecognizer - function(Object, EventArgs):boolean
The event recognizer that determines if a click 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(eventSource: any, evt: EventArgs) : booleanA callback that recognizes events.Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.Parameters
- eventSource - any
- The source of the event.
- evt - EventArgs
- The arguments of the event to be decided to handle.
Returns
- boolean
trueif theevtis considered to be handled.
- multiSelectionRecognizer - function(Object, EventArgs):boolean
The event recognizer that determines if a click is deemed a multi selection gesture. This option sets the multiSelectionRecognizer property on the created object.
Signature Details
function(eventSource: any, evt: EventArgs) : booleanA callback that recognizes events.Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.Parameters
- eventSource - any
- The source of the event.
- evt - EventArgs
- The arguments of the event to be decided to handle.
Returns
- boolean
trueif theevtis 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.
- focusableItems - GraphItemTypes
The items that can be given focus via the setCurrentItem method. This option sets the focusableItems property on the created object.
- 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) : booleanRepresents 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
trueif 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.
- 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.
- ignoreVoidStyles - boolean
A value indicating whether void styles (VoidNodeStyle, VoidEdgeStyle, VoidLabelStyle, and VoidPortStyle) 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 sets 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.
- mouseHoverInputMode - MouseHoverInputMode
The MouseHoverInputMode which is responsible for displaying Tooltips on a CanvasComponent. This option sets the mouseHoverInputMode property on the created object.
- toolTipItems - GraphItemTypes
The types of the items that should be queried a tool tip for. This option sets the toolTipItems property on the created object.
- clickInputMode - ClickInputMode
The ClickInputMode that is used by this instance to determine clicks. This option sets the clickInputMode property on the created object.
- tapInputMode - TapInputMode
The TapInputMode which detects single and multiple taps on a CanvasComponent. This option sets the tapInputMode property on the created object.
- marqueeSelectionInputMode - MarqueeSelectionInputMode
The MarqueeSelectionInputMode which handles the selection of multiple elements by drawing a rectangle around them. This option sets 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 sets 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 sets 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 sets 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 sets the itemHoverInputMode property on the created object.
- moveViewportInputMode - MoveViewportInputMode
The MoveViewportInputMode associated with this instance. This option sets the moveViewportInputMode property on the created object.
- keyboardInputMode - KeyboardInputMode
The KeyboardInputMode associated with this instance. This option sets 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.
- 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
Gets or sets a property that determines whether and how this instance should automatically adjust the contentRect if the graph changes.
Remarks
Gets or sets a value determining whether the ADD_LABEL command should be handled.
Remarks
true pressing Shift+F2 will start the label editor. By default this feature is enabled.Examples
// 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_LABELSee Also
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
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 = trueSee Also
Gets or sets a value determining whether the DESELECT_ALL command should be handled.
Remarks
true.Examples
mode.allowClearSelection = trueGets or sets a property that determines whether clipboard operations with the usual shortcuts are enabled on the canvas.
Remarks
trueExamples
mode.allowClipboardOperations = falseDefined in
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
mode.allowCreateBend = true
mode.allowCreateEdge = true
mode.allowCreateNode = trueSee Also
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
mode.allowCreateBend = true
mode.allowCreateEdge = true
mode.allowCreateNode = trueSee Also
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
mode.allowCreateBend = true
mode.allowCreateEdge = true
mode.allowCreateNode = trueSee Also
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 = trueSee Also
Gets or sets a value determining whether the EDIT_LABEL command should be handled.
Remarks
true pressing F2 will start the label editor. By default this feature is enabled.Examples
// 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_LABELSee Also
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
// 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_LABELSee Also
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 false.
Examples
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 = trueSee Also
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
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 = trueSee Also
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 = trueSee Also
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
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 = trueSee Also
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
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 = trueSee Also
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.
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 undo engine needs to be available in the inputModeContext 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.
See Also
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
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 = trueSee Also
Gets or sets a value indicating whether this mode should automatically remove labels from the graph when a label text has been edited and the label text is empty.
Remarks
true if empty labels should be removed after text editing, false otherwise. DeletedItem is dispatched after a label has been removed.
The default value is true.
See Also
Gets or sets a property that determines whether clicking on a node should automatically select all bends of self loops adjacent to that node.
Gets a collection of commands that this input mode will handle.
Remarks
Defined in
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.EDGESee Also
Defined in
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
Arrays that contain strings describing the name of GraphItemTypes are converted to an array of GraphItemTypes. For example:
['node', 'edge']
['NODE', 'EDGE']Examples
mode.clickHitTestOrder = [
GraphItemTypes.BEND,
GraphItemTypes.NODE | GraphItemTypes.EDGE,
GraphItemTypes.LABEL
]See Also
Defined in
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<T> from the inputModeContext to determine the items being hit. If they match the clickableItems type, the ItemClicked event will be triggered. If they shouldFocus, the item will be set as the current item.
If no value has been set explicitly, the factory method createClickInputMode will be called upon first access. Upon change the onClickInputModeChanged method will be called.
By default this input mode has a priority of 10.
Throws
- Exception({ name: 'NotSupportedError' })
- If an attempt is made to change the instance while this mode is
. To exchange a mode, first , then to ensure that all data is initialized correctly.
Examples
mode.clickInputMode.enabled = falseSee Also
Defined in
Gets or sets which types of items should be selectable by mouse clicks.
Remarks
Examples
// 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.EDGESee Also
Defined in
Gets or sets the margins to use for updateContentRect in adjustContentRect calls.
Gets or sets the ContextMenuInputMode which handles context menus on a CanvasComponent.
Remarks
If no value has been set explicitly, the factory method createContextMenuInputMode will be called upon first access. Upon change the onContextMenuInputModeChanged method will be called.
By default this input mode has a priority of 60.
Throws
- Exception({ name: 'NotSupportedError' })
- If an attempt is made to change the instance while this mode is
. To exchange a mode, first , then to ensure that all data is initialized correctly.
Examples
mode.contextMenuInputMode.enabled = falseContextMenuInputMode. This involves registering for the PopulateItemContextMenu event instead of the PopulateMenu event:// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.contextMenuItems = GraphItemTypes.NODE
mode.addPopulateItemContextMenuListener((sender, args) => {
// Get the node which is handled or null if the item is not a node
const node = args.item
// Create the context menu items
if (node !== null) {
// Create a menu item to delete the node
// Show the menu
args.showMenu = true
// Mark the event as handled
args.handled = true
}
})Defined in
Gets or sets the types of items a context menu should be queried for.
Remarks
Examples
// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.contextMenuItems = GraphItemTypes.NODE
mode.addPopulateItemContextMenuListener((sender, args) => {
// Get the node which is handled or null if the item is not a node
const node = args.item
// Create the context menu items
if (node !== null) {
// Create a menu item to delete the node
// Show the menu
args.showMenu = true
// Mark the event as handled
args.handled = true
}
})Defined in
Gets the installed controller.
Defined in
Gets or sets the CreateBendInputMode which handles interactive bend creation on existing edges.
Remarks
If no value has been set explicitly, the factory method createCreateBendInputMode will be called upon first access. Upon change the onCreateBendInputModeChanged method will be called.
By default this input mode has a priority of 42.
Throws
- Exception({ name: 'NotSupportedError' })
- If an attempt is made to change the instance while this mode is
. To exchange a mode, first , then to ensure that all data is initialized correctly.
Examples
mode.createBendInputMode.enabled = falseNote that in order to diable 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 = falseBy 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.moveInputMode.priority - 1See Also
Gets or sets the CreateEdgeInputMode which handles interactive edge creation.
Remarks
If no value has been set explicitly, the factory method createCreateEdgeInputMode will be called upon first access. Upon change the onCreateEdgeInputModeChanged method will be called.
By default this input mode has a priority of 45.
Throws
- Exception({ name: 'NotSupportedError' })
- If an attempt is made to change the instance while this mode is
. To exchange a mode, first , then to ensure that all data is initialized correctly.
Examples
mode.createEdgeInputMode.enabled = falseSee Also
Gets or sets the event recognizer that determines if a click 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.
Signature Details
function(eventSource: any, evt: EventArgs) : boolean
Parameters
- eventSource - any
- The source of the event.
- evt - EventArgs
- The arguments of the event to be decided to handle.
Returns
- boolean
trueif theevtis considered to be handled.
Sample Graphs
Defined in
Gets or sets the cursor to use whenever no child mode prefers a different cursor.
Remarks
nullSee Also
Defined in
Gets or sets which types of items may be deleted using the deleteSelection action.
Remarks
Examples
mode.deletableItems = GraphItemTypes.NODE | GraphItemTypes.EDGESee Also
Gets or sets a predicate that is queried to determine whether an IModelItem can be deleted or not.
Remarks
null the effect is the same as a predicate that always returns true.Signature Details
function(obj: IModelItem) : boolean
Parameters
- obj - IModelItem
- The object to compare against the criteria defined within the method represented by this delegate.
Returns
- boolean
trueif obj meets the criteria defined within the method represented by this delegate; otherwise,false.
Examples
mode.selectablePredicate = (item) => item.tag === 'I am selectable'mode.selectablePredicate = (item: IModelItem): boolean =>
item.tag === 'I am selectable'See Also
Gets or sets the event recognizer that determines if a click should select the item that is currently visible under the mouse 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.
Signature Details
function(eventSource: any, evt: EventArgs) : boolean
Parameters
- eventSource - any
- The source of the event.
- evt - EventArgs
- The arguments of the event to be decided to handle.
Returns
- boolean
trueif theevtis considered to be handled.
Examples
mode.detailSelectionRecognizer = KeyEventRecognizers.SHIFT_IS_DOWNSample Graphs
Defined in
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
mode.doubleClickHitTestOrder = [
GraphItemTypes.BEND,
GraphItemTypes.NODE | GraphItemTypes.EDGE,
GraphItemTypes.LABEL
]See Also
Defined in
Gets or sets the enabled state of this input mode.
Remarks
Defined in
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
Gets or sets the items that can be given focus via the setCurrentItem method.
Remarks
Examples
mode.focusableItems = GraphItemTypes.NODE | GraphItemTypes.EDGEDefined in
Gets the graph instance from the inputModeContext.
Defined in
Gets the graphComponent instance this mode is working on or null.
Remarks
Gets the graph selection from the inputModeContext.
Defined in
Gets or sets the HandleInputMode as child input mode.
Remarks
If no value has been set explicitly, the factory method createHandleInputMode will be called upon first access. Upon change the onHandleInputModeChanged method will be called.
By default this input mode has a priority of 0.
Throws
- Exception({ name: 'NotSupportedError' })
- If an attempt is made to change the instance while this mode is
. To exchange a mode, first , then to ensure that all data is initialized correctly.
Examples
mode.handleInputMode.enabled = falsemode.handleInputMode.addDragFinishedListener((sender, args) => {
for (const item of mode.handleInputMode.affectedItems) {
// these items have been moved
}
})Gets or sets a property that determines whether the label should be hidden while it is edited.
Remarks
If enabled, any selection, focus, and highlight visualizations of the label are hidden along with the label visualization itself.
Even if enabled, the label text is still visible in the label text editor.
The default value is true.
Gets or sets the hitTester property.
Remarks
Gets or sets a value indicating whether void styles (VoidNodeStyle, VoidEdgeStyle, VoidLabelStyle, and VoidPortStyle) should be ignored when selecting or focusing items.
Remarks
false the invisible elements are not selectable by mouse clicks or marquee selection since their hit testable always returns false.Defined in
Gets the context instance this mode is currently installed in or null if this instance is not installed.
Remarks
Implements
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, the factory method createItemHoverInputMode will be called. Upon change the onItemHoverInputModeChanged method will be called.
By default this input mode has a priority of 55.
Throws
- Exception({ name: 'NotSupportedError' })
- If an attempt is made to change the instance while this mode is
. To exchange a mode, first , then to ensure that all data is initialized correctly.
Examples
mode.itemHoverInputMode.enabled = falsenull. One can also configure the item types which are reported:// 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
// ignore items of other types which might be in front of them
mode.itemHoverInputMode.discardInvalidItems = false
// handle changes on the hovered items
mode.itemHoverInputMode.addHoveredItemChangedListener((sender, args) => {
const oldItem = args.oldItem
// e.g. remove the highlight from oldItem here
const newItem = args.item
// e.g. add a highlight to newItem here
})Defined in
Gets or sets the KeyboardInputMode associated with this instance.
Remarks
0.Throws
- Exception({ name: 'NotSupportedError' })
- If an attempt is made to change the instance while this mode is
. To exchange a mode, first , then to ensure that all data is initialized correctly.
Examples
mode.keyboardInputMode.enabled = falseconst keyboardInputMode = graphEditorInputMode.keyboardInputMode
const myCommand = ICommand.createCommand('MyCommand')
// The command creates a new node in the center of the viewport
keyboardInputMode.addCommandBinding(
myCommand,
(command, parameter, target) => {
graphEditorInputMode.createNode(
graphEditorInputMode.graphComponent.viewport.center
)
return true
},
(command, parameter, target) => true
)
// Execute the command if the Insert key is pressed
keyboardInputMode.addKeyBinding(Key.INSERT, ModifierKeys.NONE, myCommand)const keyboardInputMode = graphEditorInputMode.keyboardInputMode
const myCommand = ICommand.createCommand('MyCommand')
// The command creates a new node in the center of the viewport
keyboardInputMode.addCommandBinding(
myCommand,
(command, parameter, target) => {
graphEditorInputMode.createNode(
graphEditorInputMode.graphComponent!.viewport.center
)
return true
},
(command, parameter, target) => true
)
// Execute the command if the Insert key is pressed
keyboardInputMode.addKeyBinding(Key.INSERT, ModifierKeys.NONE, myCommand)Defined in
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. If no value has been set explicitly, the factory method createLabelDropInputMode will be called upon first access. Upon change the onLabelDropInputModeChanged method will be called.
By default this input mode has a priority of 70.
Throws
- Exception({ name: 'NotSupportedError' })
- If an attempt is made to change the instance while this mode is
. To exchange a mode, first , then to ensure that all data is initialized correctly.
Examples
mode.labelDropInputMode.enabled = falseGets or sets which types of items may have their labels edited.
Remarks
Examples
// 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_LABELSee Also
Gets or sets the LabelSnapContext instance that handles interactive snapping of ILabels to their owner during drag operations like movements.
Remarks
To enable snapping for labels one has to set an instance of SnapContext, in most cases LabelSnapContext. Setting this property is not necessary if moving labels is not allowed or if the used label models do not support snapping or allow for discrete positions, anyway.
Setting this property to a SnapContext which is disabled will disable snapping, whereas setting it to null will make the child modes use the context from their IInputModeContexts, if available. Upon change the onLabelSnapContextChanged method is called, which will as a side effect configure the snap context to display the SnapResults in the CanvasComponent.
Default is null.
Examples
mode.snapContext = new GraphSnapContext()
mode.labelSnapContext = new LabelSnapContext()mode.labelSnapContext = new LabelSnapContext()See Also
Gets or sets the LassoSelectionInputMode which handles the selection of multiple elements by drawing a polygon around them.
Remarks
If no value has been set explicitly, the factory method createLassoSelectionInputMode will be called upon first access. Upon change the onLassoSelectionInputModeChanged method will be called.
The lassoSelectionInputMode respects the selectableItems and the marqueeSelectableItems as well as method shouldMarqueeSelect.
By default this input mode has a priority of 49 and is disabled.
Throws
- Exception({ name: 'NotSupportedError' })
- If an attempt is made to change the instance while this mode is
. To exchange a mode, first , then to ensure that all data is initialized correctly.
Defined in
Gets or sets which types of items should be selected during marquee selections or lasso selection.
Remarks
Examples
// 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.EDGESee Also
Defined in
Gets or sets the MarqueeSelectionInputMode which handles the selection of multiple elements by drawing a rectangle around them.
Remarks
If no value has been set explicitly, the factory method createMarqueeSelectionInputMode will be called upon first access. Upon change the onMarqueeSelectionInputModeChanged method will be called.
The marqueeSelectionInputMode respects the selectableItems and the marqueeSelectableItems as well as method shouldMarqueeSelect.
By default this input mode has a priority of 50.
Throws
- Exception({ name: 'NotSupportedError' })
- If an attempt is made to change the instance while this mode is
. To exchange a mode, first , then to ensure that all data is initialized correctly.
Examples
mode.marqueeSelectionInputMode.enabled = falseDefined in
Gets or sets the MouseHoverInputMode which is responsible for displaying Tooltips on a CanvasComponent.
Remarks
If no value has been set explicitly, the factory method createMouseHoverInputMode will be called upon first access. Upon change the onMouseHoverInputModeChanged method will be called.
By default this input mode has a priority of 100.
Throws
- Exception({ name: 'NotSupportedError' })
- If an attempt is made to change the instance while this mode is
. To exchange a mode, first , then to ensure that all data is initialized correctly.
Examples
mode.mouseHoverInputMode.enabled = falseMouseHoverInputMode. This involves registering for the QueryItemToolTip event instead of the QueryToolTip event:// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.toolTipItems = GraphItemTypes.NODE
// register a listener
mode.addQueryItemToolTipListener((src, args) => {
if (args.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 = args.item
if (hitNode.labels.size > 0) {
// Show the text of the first label as tooltip.
args.toolTip = hitNode.labels.get(0).text
// Indicate that the tooltip content has been set.
args.handled = true
}
})// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.toolTipItems = GraphItemTypes.NODE
// register a listener
mode.addQueryItemToolTipListener((src, args) => {
if (args.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 = args.item as INode
if (hitNode.labels.size > 0) {
// Show the text of the first label as tooltip.
args.toolTip = hitNode.labels.get(0).text
// Indicate that the tooltip content has been set.
args.handled = true
}
})Defined in
Gets or sets which types of items should be movable using the moveInputMode or moveLabelInputMode respectively in case of labels.
Remarks
Examples
mode.movableItems = GraphItemTypes.NODE | GraphItemTypes.EDGESee Also
Gets or sets the MoveInputMode as child mode.
Remarks
If no value has been set explicitly, the factory method createMoveInputMode will be called upon first access. Upon change the onMoveInputModeChanged method will be called. The newly created input mode is configured to handle selected items.
The moveInputMode does not handle labels, the moveLabelInputMode is used instead. By default, it only handles selected items. The moveUnselectedInputMode can be enabled to move unselected items, too.
The moveInputMode respects movableItems and method shouldMove.
By default this input mode has a priority of 40.
Throws
- Exception({ name: 'NotSupportedError' })
- If an attempt is made to change the instance while this mode is
. To exchange a mode, first , then to ensure that all data is initialized correctly.
Examples
mode.moveInputMode.enabled = falsemode.moveInputMode.addDragFinishedListener((sender, args) => {
for (const item of mode.moveInputMode.affectedItems) {
// these items have been moved
}
})See Also
Gets or sets the MoveLabelInputMode which handles interactive moving ILabels.
Remarks
This mode is responsible for moving labels to another candidate position. If no value has been set explicitly, the factory method createMoveLabelInputMode will be called upon first access. Upon change the onMoveLabelInputModeChanged method will be called.
By default this input mode has a priority of 39.
Throws
- Exception({ name: 'NotSupportedError' })
- If an attempt is made to change the instance while this mode is
. To exchange a mode, first , then to ensure that all data is initialized correctly.
Examples
mode.moveLabelInputMode.enabled = falseSee Also
Gets or sets the MoveInputMode which handles unselected graph items.
Remarks
If no value has been set explicitly, the factory method createMoveUnselectedInputMode will be called upon first access. Upon change the onMoveUnselectedInputModeChanged method will be called.
The moveUnselectedInputMode does not handle labels, the moveLabelInputMode is used instead.
The moveUnselectedInputMode respects movableItems and method shouldMove.
By default this input mode has a priority of 41 and is disabled.
Throws
- Exception({ name: 'NotSupportedError' })
- If an attempt is made to change the instance while this mode is
. To exchange a mode, first , then to ensure that all data is initialized correctly.
Examples
mode.moveUnselectedInputMode.enabled = trueMoveUnselectedInputMode interferes with the createEdgeInputMode. A possible solution is to set a higher priority to the MoveUnselectedInputMode than to the createEdgeInputMode and to add the ability to temporarily disable it. The following example shows how to configure the MoveUnselectedInputMode to be disabled when pressing the Shift key:mode.moveInputMode.enabled = false
// Enable the move input mode for unselected items
const moveUnselectedInputMode = mode.moveUnselectedInputMode
moveUnselectedInputMode.enabled = true
// Use a modifier recognizer for shift key not held down.
moveUnselectedInputMode.pressedRecognizer =
EventRecognizers.createAndRecognizer(
moveUnselectedInputMode.pressedRecognizer,
(sender, args) => !KeyEventRecognizers.SHIFT_IS_DOWN(sender, args)
)
moveUnselectedInputMode.hoverRecognizer =
EventRecognizers.createAndRecognizer(
moveUnselectedInputMode.hoverRecognizer,
(sender, args) => !KeyEventRecognizers.SHIFT_IS_DOWN(sender, args)
)
// Set a higher priority than CreateEdgeInputMode
moveUnselectedInputMode.priority = mode.createEdgeInputMode.priority - 1See Also
Gets or sets the MoveViewportInputMode associated with this instance.
Remarks
If no value has been set explicitly, the factory method createMoveViewportInputMode will be called upon first access. Upon change the onMoveViewportInputModeChanged method will be called.
By default this input mode has a priority of 39.
Throws
- Exception({ name: 'NotSupportedError' })
- If an attempt is made to change the instance while this mode is
. To exchange a mode, first , then to ensure that all data is initialized correctly.
Examples
mode.moveViewportInputMode.enabled = falseDefined in
Gets or sets the event recognizer that determines if a click 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 is an or-combination of CTRL_IS_DOWN and META_IS_DOWN.
Signature Details
function(eventSource: any, evt: EventArgs) : boolean
Parameters
- eventSource - any
- The source of the event.
- evt - EventArgs
- The arguments of the event to be decided to handle.
Returns
- boolean
trueif theevtis considered to be handled.
Defined in
Gets the IInputMode that currently owns the mutex.
Defined in
Gets or sets the callback that is responsible for creating a new node, for instance, in response to a mouse click.
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
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.
nullif the new node should be created at root level.
Returns
Examples
// set a custom node creator which creates a label on the new node
graphEditorInputMode.nodeCreator = (context, graph, location, parent) => {
// 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
}// 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
}See Also
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. If no value has been set explicitly, the factory method createNodeDropInputMode will be called upon first access. Upon change the onNodeDropInputModeChanged method will be called.
By default this input mode has a priority of 70.
Throws
- Exception({ name: 'NotSupportedError' })
- If an attempt is made to change the instance while this mode is
. To exchange a mode, first , then to ensure that all data is initialized correctly.
Examples
mode.nodeDropInputMode.enabled = falseGets or sets the policy that controls whether removing bends from an orthogonal edge will keep the edge orthogonal.
Remarks
See Also
Gets or sets the orthogonal edge editing context.
Remarks
Orthogonal edge editing is enabled by setting an instance of OrthogonalEdgeEditingContext.
The default value is null.
Examples
mode.orthogonalEdgeEditingContext = new OrthogonalEdgeEditingContext()See Also
Gets or sets the offset for paste operation if clipboard operations are enabled.
Remarks
The offset is applied to avoid that newly pasted elements are pasted exactly over their original.
Default is (15, 15).
Examples
mode.pasteDelta = Point.ORIGINSee Also
Gets or sets which types of items should be selected after paste or duplicateSelection.
Remarks
Examples
mode.pasteSelectableItems = GraphItemTypes.NODE | GraphItemTypes.BENDSee Also
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. If no value has been set explicitly, the factory method createPortDropInputMode will be called upon first access. Upon change the onPortDropInputModeChanged method will be called.
By default this input mode has a priority of 70.
Throws
- Exception({ name: 'NotSupportedError' })
- If an attempt is made to change the instance while this mode is
. To exchange a mode, first , then to ensure that all data is initialized correctly.
Examples
mode.portDropInputMode.enabled = falseGets the priority of this input mode.
Remarks
See Also
Implements
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.
If not already initialized, the factory method createReparentNodeHandler will be called on first access. Upon changes, the onReparentNodeHandlerChanged method will be called.
See Also
Gets or sets which types of items should be selectable at all.
Remarks
Examples
// 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.EDGESee Also
Defined in
Gets or sets a predicate that is queried to determine whether a given IModelItem is selectable.
Remarks
null the effect is the same as a predicate that always returns true.Signature Details
function(obj: IModelItem) : boolean
Parameters
- obj - IModelItem
- The object to compare against the criteria defined within the method represented by this delegate.
Returns
- boolean
trueif obj meets the criteria defined within the method represented by this delegate; otherwise,false.
Examples
mode.selectablePredicate = (item) => item.tag === 'I am selectable'mode.selectablePredicate = (item: IModelItem): boolean =>
item.tag === 'I am selectable'Defined in
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 = falseSee Also
Gets or sets the SnapContext instance that handles interactive snapping of elements during drag operations like movements.
Remarks
To enable snapping one has to set an instance of SnapContext, in most cases GraphSnapContext.
Setting this property to a SnapContext which is disabled will disable snapping, whereas setting it to null will make the child modes use the context from their IInputModeContexts, if available.
Upon change the onSnapContextChanged method is called, which will as a side effect configure the snap context to display the SnapResults in the CanvasComponent.
Note that label snapping is controlled by another context which has to be set separately: labelSnapContext.
Default is null.
Examples
mode.snapContext = new GraphSnapContext()mode.snapContext = new GraphSnapContext()
mode.labelSnapContext = new LabelSnapContext()See Also
Gets or sets the TapInputMode which detects single and multiple taps on a CanvasComponent.
Remarks
If no value has been set explicitly, the factory method createTapInputMode will be called upon first access. Upon change the onTapInputModeChanged method will be called.
By default this input mode has a priority of 20.
Throws
- Exception({ name: 'NotSupportedError' })
- If an attempt is made to change the instance while this mode is
. To exchange a mode, first , then to ensure that all data is initialized correctly.
Examples
mode.tapInputMode.enabled = falseDefined in
Gets or sets the TextEditorInputMode which handles label editing.
Remarks
If no value has been set explicitly, the factory method createTextEditorInputMode will be called upon first access. Upon change the onTextEditorInputModeChanged method will be called.
By default this input mode has a priority of 100.
Throws
- Exception({ name: 'NotSupportedError' })
- If an attempt is made to change the instance while this mode is
. To exchange a mode, first , then to ensure that all data is initialized correctly.
Examples
mode.textEditorInputMode.enabled = falseGets or sets a handler which allows for configuring the textEditorInputMode during adding or editing labels.
Remarks
Signature Details
function(context: IInputModeContext, mode: TextEditorInputMode, label: ILabel)
Parameters
- context - IInputModeContext
- The context in which the label is being edited or created.
- mode - TextEditorInputMode
- The mode that will be used for editing the label's text.
- label - ILabel
- The label that will be edited or created.
Examples
mode.textEditorInputModeConfigurator = (context, inputMode, label) => {
// anchor the text editor centered above the label
inputMode.anchor = new Point(0.5, 1)
// always place the editor horizontal
inputMode.upVector = new Point(0, -1)
// place the editor relative to the label's center
inputMode.location = label.layout.orientedRectangleCenter
}mode.textEditorInputModeConfigurator = (
context: IInputModeContext,
inputMode: TextEditorInputMode,
label: ILabel
): void => {
// anchor the text editor centered above the label
inputMode.anchor = new Point(0.5, 1)
// always place the editor horizontal
inputMode.upVector = new Point(0, -1)
// place the editor relative to the label's center
inputMode.location = label.layout.orientedRectangleCenter
}Gets or sets the types of the items that should be queried a tool tip for.
Remarks
Examples
// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.toolTipItems = GraphItemTypes.NODE
// register a listener
mode.addQueryItemToolTipListener((src, args) => {
if (args.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 = args.item
if (hitNode.labels.size > 0) {
// Show the text of the first label as tooltip.
args.toolTip = hitNode.labels.get(0).text
// Indicate that the tooltip content has been set.
args.handled = true
}
})// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.toolTipItems = GraphItemTypes.NODE
// register a listener
mode.addQueryItemToolTipListener((src, args) => {
if (args.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 = args.item as INode
if (hitNode.labels.size > 0) {
// Show the text of the first label as tooltip.
args.toolTip = hitNode.labels.get(0).text
// Indicate that the tooltip content has been set.
args.handled = true
}
})Defined in
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.
See Also
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
graphEditorInputMode.waiting = true
await longRunningAsyncProcess()
graphEditorInputMode.waiting = falseGets or sets the WaitInputMode that is provided by this instance for those who need to make use of it.
Remarks
If no value has been set explicitly, the factory method createWaitInputMode will be called upon first access. Upon change the onWaitInputModeChanged method will be called.
By default this input mode has a priority of -1.
Throws
- Exception({ name: 'NotSupportedError' })
- If an attempt is made to change the instance while this mode is
. To exchange a mode, first , then to ensure that all data is initialized correctly.
Examples
mode.waitInputMode.enabled = falsegraphEditorInputMode.waiting = true
await longRunningAsyncProcess()
graphEditorInputMode.waiting = falseSee Also
Defined in
Methods
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 can not and will not be deactivated if another IInputMode acquires the mutex.
Parameters
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
modehas 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 = multiplexingInputModeconst mode = new GraphEditorInputMode()
const customInputMode = new CustomInputMode()
customInputMode.priority = 10
mode.add(customInputMode)Defined in
Adds a new label to the given item interactively.
Remarks
This will activate the textEditorInputMode to let the user interactively enter the label's text and unless the user cancels label creation the returned Promise<T> will contain the label.
The text that the user enters may be validated before the label is actually added.
This method works nearly identical to createLabel. The only difference is when either the LabelAdding event is handled, or owner has an IEditLabelHelper, and via those instead of adding a label an existing one should be edited. This method will edit that label instead of adding a new one.
Parameters
A map of options to pass to the method.
- owner - ILabelOwner
- The item to add a label to.
Returns
- ↪Promise<ILabel|null>
- A Promise that fulfills with either the newly created label instance or
nullif the editing was canceled or the text did not validate.
addLabel
(labelOwner: ILabelOwner, newText: string, param?: ILabelModelParameter, style?: ILabelStyle, preferredSize?: Size, tag?: Object) : ILabelAdds a label to the given labelOwner after the textEditorInputMode has successfully finished editing after addLabel.
Remarks
true. Also this method will query the label's owner for an INodeSizeConstraintProvider if the owner is an INode and will make sure that the size constraints are still kept after adding the label by calling adjustToSizeConstraints.Parameters
A map of options to pass to the method.
- labelOwner - ILabelOwner
- The owner to add the label to.
- newText - string
- The text of the new label.
- param - ILabelModelParameter
- The label model parameter of the new label.
- style - ILabelStyle
- The style of the new label.
- preferredSize - Size
- The preferred size of the new label.
- tag - Object
- The tag of the new Label.
Returns
- ↪ILabel
- The newly created label.
Updates the contentRect using updateContentRect and contentRectMargins
Remarks
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
Defined in
Adjusts the size of the group nodes in the enumerable.
Remarks
true.Parameters
A map of options to pass to the method.
- nodes - IEnumerable<INode>
- The nodes to adjust their sizes.
Adjusts the size of the selected group nodes.
Adjusts the node's layout to adhere to possible size constraints.
Remarks
Parameters
A map of options to pass to the method.
- node - INode
- The node to possibly adjust the size of.
Cancels all modes.
Implements
Called by the child context's lookup method.
Parameters
A map of options to pass to the method.
Returns
- ↪any
- The result of the lookup query, or
null.
See Also
Overrides
Clears the selection on the current graphSelection.
Remarks
Defined in
Actually performs the click on the given item.
Remarks
Parameters
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
truewill indicate that the click was handled. By default this happens when the clicked item is either selected or focused.
Defined in
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
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
Creates a node on click.
Remarks
false.Parameters
A map of options to pass to the method.
- context - IInputModeContext
- The input mode context.
- location - Point
- The location of the click.
Returns
- ↪boolean
trueif a node was successfully created,falseotherwise.
Copies the currently selected elements to the clipboard.
Yields an IInputModeContext for the child modes of this mode.
Remarks
Returns
- ↪IInputModeContext
- A new instance that delegates to the parent's context.
Defined in
Factory method for the clickInputMode property.
Remarks
This method will be called upon first access to the clickInputMode property.
Returns
- ↪ClickInputMode
- a new instance of ClickInputMode
Defined in
Factory method for the contextMenuInputMode property.
Remarks
Returns
- ↪ContextMenuInputMode
- a new instance of ContextMenuInputMode
Defined in
Factory method for the createBendInputMode property.
Remarks
Returns
- ↪CreateBendInputMode
- a new instance of
CreateBendInputMode
Factory method for the createEdgeInputMode property.
Remarks
Returns
- ↪CreateEdgeInputMode
- a new instance of CreateEdgeInputMode
Factory method for the handleInputMode property.
Remarks
Returns
- ↪HandleInputMode
- a new instance of HandleInputMode
Helper method that yields a suitably configured InputModeEventArgs for this input mode.
Parameters
A map of options to pass to the method.
- context - IInputModeContext
An input mode context that is available in the InputModeEventArgs.
Can be
nullin 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
Factory method for the itemHoverInputMode property.
Remarks
Returns
Defined in
Factory method that creates the keyboardInputMode instance.
Defined in
Interactively creates a new label for the provided label owner.
Remarks
This method will invoke the text editor that will let the user edit the text of the label. If the user commits the label text the label will be added to the label owner.
The text that the user enters may be validated before the label is actually added.
This method works nearly identical to addLabel. The only difference is when either the LabelAdding event is handled, or owner has an IEditLabelHelper, and via those instead of adding a label an existing one should be edited. This method will do nothing instead of editing an existing label or adding a new one in that case.
Parameters
A map of options to pass to the method.
- owner - ILabelOwner
- The item to create a new label for.
Returns
- ↪Promise<ILabel|null>
- A Promise that fulfills either with the edited label, or with
nullif editing was canceled or the text did not validate.
Uses the text editor to actually create a new label.
Remarks
The label is added to the evt's owner.
This method is only called when label creation is not forbidden after querying LabelAdding and the label owner's IEditLabelHelper.
Parameters
A map of options to pass to the method.
- evt - LabelEditingEventArgs
- The information for label creation.
Returns
- ↪Promise<ILabel|null>
- A Promise that fulfills with either the newly created label instance or
nullif the editing was canceled or the text did not validate.
Factory method that creates the labelDropInputMode lazily the first time the property is accessed.
Returns
- ↪LabelDropInputMode
- A plain new instance of the LabelDropInputMode type, which is initially disabled.
Factory method for the lassoSelectionInputMode property.
Remarks
This method will be called upon first access to the lassoSelectionInputMode property.
The created input mode is disabled per default.
Returns
- ↪LassoSelectionInputMode
- a new instance of LassoSelectionInputMode
Defined in
Factory method for the marqueeSelectionInputMode property.
Remarks
Returns
- ↪MarqueeSelectionInputMode
- a new instance of MarqueeSelectionInputMode
Defined in
Factory method for the MouseHoverInputMode property.
Remarks
Returns
- ↪MouseHoverInputMode
- a new instance of MouseHoverInputMode
Defined in
Factory method for the moveInputMode property.
Remarks
Returns
- ↪MoveInputMode
- a new instance of MoveInputMode
Factory method for the moveLabelInputMode property.
Remarks
Returns
- ↪MoveLabelInputMode
- a new instance of MoveLabelInputMode
Factory method for the moveUnselectedInputMode property.
Remarks
Returns
- ↪MoveInputMode
- a new instance of MoveInputMode
Factory method for the MoveViewportInputMode property.
Remarks
This method will be called upon first access to the MoveViewportInputMode property.
This implementation will set the pressedRecognizer to react on left mouse button pressed with Ctrl pressed.
Returns
- ↪MoveViewportInputMode
- a new instance of MoveViewportInputMode
Overrides
Creates a node given a certain click point.
Remarks
This implementation delegates to the current node creation callback 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
A map of options to pass to the method.
- location - Point
- The point where the mouse had been clicked.
Returns
- ↪Promise<INode | null> | INode
- The newly created node,
null, or aPromiseresolving with a node ornull.
See Also
Factory method that creates the nodeDropInputMode lazily the first time the property is accessed.
Returns
- ↪NodeDropInputMode
- A plain new instance of the NodeDropInputMode type, which is initially disabled.
Factory method that creates the portDropInputMode lazily the first time the property is accessed.
Returns
- ↪PortDropInputMode
- A plain new instance of the PortDropInputMode type, which is initially disabled.
Factory method for the reparentNodeHandler property.
Remarks
Returns
- ↪IReparentNodeHandler
- a new instance of reparentNodeHandler
Helper method that yields a suitably configured SelectionEventArgs<T> using the graphSelection for this input mode.
Parameters
A map of options to pass to the method.
- context - IInputModeContext
An input mode context that is available in the SelectionEventArgs<T>.
Can be
nullin which case a new context for this instance is created automatically.
Returns
- ↪SelectionEventArgs<IModelItem>
- A selection event argument that is configured for this instance.
Defined in
Factory method for the tapInputMode property.
Remarks
Returns
- ↪TapInputMode
- a new instance of TapInputMode
Defined in
Factory method for the textEditorInputMode property.
Remarks
Returns
- ↪TextEditorInputMode
- a new instance of TextEditorInputMode
Factory method for the waitInputMode property.
Remarks
Returns
- ↪WaitInputMode
- a new instance of waitInputMode
Defined in
This method deletes the currently selected elements.
Remarks
See Also
Actually performs a double-click on the given item.
Remarks
trueParameters
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
truewill indicate that the double-click was handled and events on other items in the same location are no longer raised.
Overrides
Actually performs a double-tap on the given item.
Remarks
trueParameters
A map of options to pass to the method.
- item - IModelItem
- The item that has been double-tapped.
- evt - TapEventArgs
- The original event arguments for the tap. Setting its handled property to
truewill indicate that the double-tap was handled and events on other items in the same location are no longer raised.
Overrides
Initiates the handleInputMode to drag the given bend.
Parameters
A map of options to pass to the method.
- bend - IBend
- The bend to drag.
See Also
Starts editing the given label.
Remarks
This implementation uses the TextEditorInputMode to display an editor to edit the label. The text that the user enters may be validated before the label is actually edited.
The label to edit can be a SimpleLabel, which will be edited as usual, except that the label text changes will be written directly back into the instance.
This method will raise the LabelEditing event and query the IEditLabelHelper for the label and its owner, but will ignore the result except for the textEditorInputModeConfigurator property on the LabelEditingEventArgs. Thus editing a label via this method cannot be prevented by event handlers or IEditLabelHelpers.
Parameters
A map of options to pass to the method.
- label - ILabel
- The label to edit.
Returns
- ↪Promise<ILabel|null>
- A Promise that fulfills either with the edited label, or with
nullif editing was canceled or the text did not validate.
See Also
editLabelCore
(label: ILabel, configurator: function(IInputModeContext, TextEditorInputMode, ILabel):void) : Promise<string|null>Core label edit method - opens a new textEditorInputMode input field.
Remarks
Parameters
A map of options to pass to the method.
- label - ILabel
- The label to edit.
- configurator - function(IInputModeContext, TextEditorInputMode, ILabel):void
- A callback to configure the textEditorInputMode before the label is edited.
Signature Details
function(context: IInputModeContext, mode: TextEditorInputMode, label: ILabel)Callback for configuring a TextEditorInputMode for editing a provided label instance.Parameters
- context - IInputModeContext
- The context in which the label is being edited or created.
- mode - TextEditorInputMode
- The mode that will be used for editing the label's text.
- label - ILabel
- The label that will be edited or created.
Returns
- ↪Promise<string|null>
- A promise that resolves with either the label's text or a
nullif the text edit was canceled.
Starts label editing by executing EDIT_LABEL.
Remarks
Parameters
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
trueiff the request was handled.
See Also
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
Parameters
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) : booleanRepresents 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
trueif 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
/**
* @param {!IInputModeContext} context
* @param {!Point} location
*/
function HandleItemAtLocation(context, location) {
const graphEditorInputMode = context.lookup(GraphEditorInputMode.$class)
const graphItem = graphEditorInputMode
.findItems(location, [GraphItemTypes.NODE | GraphItemTypes.EDGE])
.first()
if (graphItem instanceof INode) {
// ... handle node
} else if (graphItem instanceof IEdge) {
// ... handle edge
}function HandleItemAtLocation(
context: IInputModeContext,
location: Point
): void {
const graphEditorInputMode = context.lookup(
GraphEditorInputMode.$class
) as GraphEditorInputMode
const graphItem = graphEditorInputMode
.findItems(location, [GraphItemTypes.NODE | GraphItemTypes.EDGE])
.first()
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
Parameters
A map of options to pass to the method.
- context - IInputModeContext
- The context to use for to the isHit callback.
- 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) : booleanRepresents 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
trueif 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
/**
* @param {!IInputModeContext} context
* @param {!Point} location
*/
function HandleItemAtLocation(context, location) {
const graphEditorInputMode = context.lookup(GraphEditorInputMode.$class)
const graphItem = graphEditorInputMode
.findItems(location, [GraphItemTypes.NODE | GraphItemTypes.EDGE])
.first()
if (graphItem instanceof INode) {
// ... handle node
} else if (graphItem instanceof IEdge) {
// ... handle edge
}function HandleItemAtLocation(
context: IInputModeContext,
location: Point
): void {
const graphEditorInputMode = context.lookup(
GraphEditorInputMode.$class
) as GraphEditorInputMode
const graphItem = graphEditorInputMode
.findItems(location, [GraphItemTypes.NODE | GraphItemTypes.EDGE])
.first()
if (graphItem instanceof INode) {
// ... handle node
} else if (graphItem instanceof IEdge) {
// ... handle edge
}Defined in
Returns a list of all modes managed by this instance in sorted order.
Creates a new group for all of the currently selected elements.
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.
See Also
Called by click to query the item for an IClickListener in its lookup and handle it appropriately.
Remarks
true.Parameters
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.
See Also
Defined in
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 inputModeContext 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.
See Also
Defined in
Installs this mode into the provided context.
Parameters
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.
See Also
Overrides
Invalidates the canvas this mode is currently installed in.
Defined in
Performs lasso-selection with the given path.
Remarks
Parameters
A map of options to pass to the method.
- lassoBorder - GeneralPath
- The lasso selection path.
Defined in
Lowers the visual representations of all selected IModelItems below their current predecessors.
Examples
mode.lowerSelection()See Also
Performs marquee selection with the given rectangle.
Remarks
Parameters
A map of options to pass to the method.
- marqueeRectangle - Rect
- The selection rectangle.
Defined in
Invoked if the shift+F2 key is pressed and allowAddLabel is set to true.
Remarks
This method determines the label owner to add to and delegates to createLabelCore.
This method also raises a LabelAdding event and queries potential ILabelOwner's IEditLabelHelper's onLabelAdding methods.
Raises the CanvasClicked event.
Remarks
true.Parameters
A map of options to pass to the method.
- evt - ClickEventArgs
- The ClickEventArgs instance that contains the information about the click.
Defined in
Raises the CanvasTapped event.
Remarks
true.Parameters
A map of options to pass to the method.
- evt - TapEventArgs
- The TapEventArgs instance that contains the information about the tap.
Defined in
Called when the clickInputMode property value changes and after initialization of the property.
Parameters
A map of options to pass to the method.
- oldMode - ClickInputMode
- the old value, which may be
nullthe first time - newMode - ClickInputMode
- the new value
Defined in
Called after the active property of the installed ConcurrencyController has been set to true.
Remarks
Overrides
Called after the active property of the installed ConcurrencyController has been set to false.
Remarks
null and releases the mutex if the mutex is currently owned by this instance. Also, all concurrent child modes will be disabled.Overrides
Called when the ContextMenuInputMode property value changes and after initialization of the property.
Parameters
A map of options to pass to the method.
- oldMode - ContextMenuInputMode
- the old value, which may be
nullthe first time - newMode - ContextMenuInputMode
- the new value
Defined in
Called as soon as CreateBendInputMode created a new bend.
Remarks
Called when the createBendInputMode property value changes and after initialization of the property.
Parameters
A map of options to pass to the method.
- oldMode - CreateBendInputMode
- the old value, which may be
nullthe first time - newMode - CreateBendInputMode
- the new value
Examples
mode.createBendInputMode.enabled = falseCalled when the createEdgeInputMode property value changes and after initialization of the property.
Parameters
A map of options to pass to the method.
- oldMode - CreateEdgeInputMode
- the old value, which may be
nullthe first time - newMode - CreateEdgeInputMode
- the new value
Raises the DeletedItem event.
Parameters
A map of options to pass to the method.
- evt - ItemEventArgs<IModelItem>
- The instance containing the event data.
Raises the DeletedSelection event.
Parameters
A map of options to pass to the method.
- evt - SelectionEventArgs<IModelItem>
- The SelectionEventArgs<T> instance containing the event data.
Raises the DeletingSelection event.
Parameters
A map of options to pass to the method.
- evt - SelectionEventArgs<IModelItem>
- The SelectionEventArgs<T> instance containing the event data.
Invoked after an edge's source and/or target ports have been changed as the result of an input gesture.
Remarks
Parameters
A map of options to pass to the method.
- evt - EdgeEventArgs
- The EdgeEventArgs for the EdgePortsChanged.
Invoked if the F2 key is pressed and allowEditLabel is set to true.
Remarks
Called when the graphComponent property changes.
Parameters
A map of options to pass to the method.
- oldGraphComponent - GraphComponent
- The old control.
- newGraphComponent - GraphComponent
- The new control.
Called when the GraphSelection property changes.
Remarks
Parameters
A map of options to pass to the method.
- oldSelection - IGraphSelection
- The old selection instance.
- newSelection - IGraphSelection
- The new selection instance.
Raises the GroupedSelection event.
Parameters
A map of options to pass to the method.
- evt - SelectionEventArgs<IModelItem>
- The SelectionEventArgs<T> instance containing the event data.
Raises the GroupingSelection event.
Parameters
A map of options to pass to the method.
- evt - SelectionEventArgs<IModelItem>
- The SelectionEventArgs<T> instance containing the event data.
Called when the handleInputMode property value changes and after initialization of the property.
Parameters
A map of options to pass to the method.
- oldMode - HandleInputMode
- the old value, which may be
nullthe first time - newMode - HandleInputMode
- the new value
Raises the ItemClicked event.
Remarks
true.Parameters
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
Raises the ItemDoubleClicked event.
Remarks
true.Parameters
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
Raises the ItemDoubleTapped event.
Remarks
true.Parameters
A map of options to pass to the method.
- evt - ItemTappedEventArgs<IModelItem>
- The ItemTappedEventArgs<T> instance that contains the item that has been double tapped.
Defined in
Called when the itemHoverInputMode property value changes and after initialization of the property.
Parameters
A map of options to pass to the method.
- oldMode - ItemHoverInputMode
- the old value, which may be
nullthe first time - newMode - ItemHoverInputMode
- the new value
Defined in
Raises the ItemLeftClicked event.
Remarks
true.Parameters
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
Raises the ItemLeftDoubleClicked event.
Remarks
true.Parameters
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
Raises the ItemRightClicked event.
Remarks
true.Parameters
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
Raises the ItemRightDoubleClicked event.
Remarks
true.Parameters
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
Raises the ItemTapped event.
Remarks
true.Parameters
A map of options to pass to the method.
- evt - ItemTappedEventArgs<IModelItem>
- The ItemTappedEventArgs<T> instance that contains the item that has been tapped.
Defined in
Called when the keyboardInputMode changed.
Parameters
A map of options to pass to the method.
- oldMode - KeyboardInputMode
- The old keyboardInputMode.
- newMode - KeyboardInputMode
- The new keyboardInputMode.
Defined in
Raises the LabelAdded event.
Parameters
A map of options to pass to the method.
- evt - LabelEventArgs
- The ItemEventArgs<T> instance that contains the ILabel that has been added.
Raises the LabelAdding event.
Remarks
evt as handled.Parameters
A map of options to pass to the method.
- evt - LabelEditingEventArgs
- The event arguments.
Called when the labelDropInputMode property value changes and after initialization of the property.
Parameters
A map of options to pass to the method.
- oldMode - LabelDropInputMode
- the old value, which may be
nullthe first time - newMode - LabelDropInputMode
- the new value
Called when the labelDropInputMode's ItemCreated event is triggered.
Remarks
Parameters
A map of options to pass to the method.
- sender - Object
- The sender.
- evt - ItemEventArgs<ILabel>
- The event argument instance containing the event data.
Raises the LabelEditing event.
Remarks
evt as handled.Parameters
A map of options to pass to the method.
- evt - LabelEditingEventArgs
- The event arguments.
Called when the labelSnapContext property context changed.
Parameters
A map of options to pass to the method.
- oldContext - SnapContext
- The old snap context.
- newContext - SnapContext
- The new snap context.
Raises the LabelTextChanged event.
Parameters
A map of options to pass to the method.
- evt - LabelEventArgs
- The ItemEventArgs<T> instance that contains the ILabel that has changed the text.
Called when the text of a label has been edited.
Remarks
Parameters
A map of options to pass to the method.
- label - ILabel
- The label that was edited.
- text - string
- The new text.
Raises the LabelTextEditingCanceled event.
Parameters
A map of options to pass to the method.
- evt - LabelEventArgs
- The LabelEventArgs instance containing the event data.
Raises the LabelTextEditingStarted event.
Parameters
A map of options to pass to the method.
- evt - LabelEventArgs
- The LabelEventArgs instance containing the event data.
Performs lasso-selection with the given path.
Remarks
Parameters
A map of options to pass to the method.
- context - IInputModeContext
- The input mode context.
- lassoBorder - GeneralPath
- The lasso selection path.
Defined in
onLassoSelectionInputModeChanged
(oldMode: LassoSelectionInputMode, newMode: LassoSelectionInputMode)Called when the lassoSelectionInputMode property value changes and after initialization of the property.
Parameters
A map of options to pass to the method.
- oldMode - LassoSelectionInputMode
- the old value, which may be
nullthe first time - newMode - LassoSelectionInputMode
- the new value
Defined in
onLassoSelectItems
(context: IInputModeContext, lassoBorder: GeneralPath, items: IEnumerable<IModelItem>, predicate: function(IModelItem):boolean)Selects the given elements in the editor inside the provided lasso-selection path.
Remarks
This implementation iterates over the items and queries them for an implementation of ILassoTestable using their lookup. This instance will be used to determine whether the item should be selected.
This method is, in the default implementation, only called with individual item types in items.
Parameters
A map of options to pass to the method.
- context - IInputModeContext
- The input mode context.
- lassoBorder - GeneralPath
- The lasso path in world coordinates.
- items - IEnumerable<IModelItem>
- The items to iterate over.
- predicate - function(IModelItem):boolean
- The predicate that determines whether the provided item should be tested at all. May be
null.Signature Details
function(obj: IModelItem) : booleanRepresents 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
trueif obj meets the criteria defined within the method represented by this delegate; otherwise,false.
See Also
Defined in
Performs marquee selection with the given rectangle.
Remarks
Parameters
A map of options to pass to the method.
- context - IInputModeContext
- The input mode context.
- marqueeRectangle - Rect
- The selection rectangle.
Defined in
onMarqueeSelectionInputModeChanged
(oldMode: MarqueeSelectionInputMode, newMode: MarqueeSelectionInputMode)Called when the marqueeSelectionInputMode property value changes and after initialization of the property.
Parameters
A map of options to pass to the method.
- oldMode - MarqueeSelectionInputMode
- the old value, which may be
nullthe first time - newMode - MarqueeSelectionInputMode
- the new value
Defined in
onMarqueeSelectItems
(context: IInputModeContext, marqueeRectangle: Rect, items: IEnumerable<IModelItem>, predicate?: function(IModelItem):boolean)Selects the given elements in the editor inside the provided marquee-selection rectangle.
Remarks
This implementation iterates over the items and queries them for an implementation of IMarqueeTestable using their lookup. This instance will be used to determine whether the item should be selected.
This method is, in the default implementation, only called with individual item types in items.
Parameters
A map of options to pass to the method.
- context - IInputModeContext
- The input mode context.
- marqueeRectangle - Rect
- The rectangle in world coordinates.
- items - IEnumerable<IModelItem>
- The items to iterate over.
- predicate - function(IModelItem):boolean
- The predicate that determines whether the provided item should be tested at all. May be
null.Signature Details
function(obj: IModelItem) : booleanRepresents 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
trueif obj meets the criteria defined within the method represented by this delegate; otherwise,false.
See Also
Defined in
Called when the MouseHoverInputMode property value changes and after initialization of the property.
Parameters
A map of options to pass to the method.
- oldMode - MouseHoverInputMode
- the old value, which may be
nullthe first time - newMode - MouseHoverInputMode
- the new value
Defined in
Called when the moveInputMode property value changes and after initialization of the property.
Parameters
A map of options to pass to the method.
- oldMode - MoveInputMode
- the old value, which may be
nullthe first time - newMode - MoveInputMode
- the new value
Called when the moveLabelInputMode property value changes and after initialization of the property.
Parameters
A map of options to pass to the method.
- oldMode - MoveLabelInputMode
- the old value, which may be
nullthe first time - newMode - MoveLabelInputMode
- the new value
Called when the moveUnselectedInputMode property value changes and after initialization of the property.
Parameters
A map of options to pass to the method.
- oldMode - MoveInputMode
- the old value, which may be
nullthe first time - newMode - MoveInputMode
- the new value
Called when the moveViewportInputMode property value changes and after initialization of the property.
Parameters
A map of options to pass to the method.
- oldMode - MoveViewportInputMode
- the old value, which may be
nullthe first time - newMode - MoveViewportInputMode
- the new value
Defined in
Raises the MultiSelectionFinished event.
Defined in
Raises the MultiSelectionStarted event.
Defined in
Raises the NodeCreated event.
Remarks
true, the reported node can actually be part of the master graph.Parameters
A map of options to pass to the method.
- evt - ItemEventArgs<INode>
- The ItemEventArgs<T> instance containing the created node.
Called when the nodeDropInputMode property value changes and after initialization of the property.
Parameters
A map of options to pass to the method.
- oldMode - NodeDropInputMode
- the old value, which may be
nullthe first time - newMode - NodeDropInputMode
- the new value
Called when the nodeDropInputMode's ItemCreated event is triggered.
Remarks
Parameters
A map of options to pass to the method.
- sender - Object
- The sender.
- evt - ItemEventArgs<INode>
- The event argument instance containing the event data.
Raises the NodeReparented event.
Parameters
A map of options to pass to the method.
- evt - NodeEventArgs
- The NodeEventArgs instance containing the event data.
See Also
Raises the PopulateItemContextMenu event.
Parameters
A map of options to pass to the method.
- evt - PopulateItemContextMenuEventArgs<IModelItem>
- The PopulateItemContextMenuEventArgs<TModelItem> instance containing the event data.
Defined in
Raises the PortAdded event.
Parameters
A map of options to pass to the method.
- evt - PortEventArgs
- The ItemEventArgs<T> instance that contains the IPort that has been added.
Called when the portDropInputMode property value changes and after initialization of the property.
Parameters
A map of options to pass to the method.
- oldMode - PortDropInputMode
- the old value, which may be
nullthe first time - newMode - PortDropInputMode
- the new value
Called when the portDropInputMode's ItemCreated event is triggered.
Remarks
Parameters
A map of options to pass to the method.
- sender - Object
- The sender.
- evt - ItemEventArgs<IPort>
- The event argument instance containing the event data.
Raises the QueryItemToolTip event.
Parameters
A map of options to pass to the method.
- evt - QueryItemToolTipEventArgs<IModelItem>
- The QueryItemToolTipEventArgs<TModelItem> instance containing the event data.
Defined in
Called when the reparentNodeHandler property value changes and after initialization of the property.
Parameters
A map of options to pass to the method.
- oldMode - IReparentNodeHandler
- the old value, which may be
nullthe first time - newMode - IReparentNodeHandler
- the new value
Called when the snapContext property context changed.
Parameters
A map of options to pass to the method.
- oldContext - SnapContext
- The old snap context.
- newContext - SnapContext
- The new snap context.
Called when the tapInputMode property value changes and after initialization of the property.
Parameters
A map of options to pass to the method.
- oldMode - TapInputMode
- the old value, which may be
nullthe first time - newMode - TapInputMode
- the new value
Defined in
Called when the textEditorInputMode property value changes and after initialization of the property.
Parameters
A map of options to pass to the method.
- oldMode - TextEditorInputMode
- the old value, which may be
nullthe first time - newMode - TextEditorInputMode
- the new value
Raises the UngroupedSelection event.
Parameters
A map of options to pass to the method.
- evt - SelectionEventArgs<IModelItem>
- The SelectionEventArgs<T> instance containing the event data.
Raises the UngroupingSelection event.
Parameters
A map of options to pass to the method.
- evt - SelectionEventArgs<IModelItem>
- The SelectionEventArgs<T> instance containing the event data.
Raises the ValidateLabelText event.
Parameters
A map of options to pass to the method.
- evt - LabelTextValidatingEventArgs
- The LabelTextValidatingEventArgs instance containing the event data.
Called when the waitInputMode property value changes and after initialization of the property.
Parameters
A map of options to pass to the method.
- oldMode - WaitInputMode
- the old value, which may be
nullthe first time - newMode - WaitInputMode
- the new value
Defined in
Pastes the current clipboard contents.
Pastes the current clipboard contents at the given location.
Remarks
Parameters
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)mode.pasteAtLocation(mode.graphComponent!.lastEventLocation)
See Also
Raises the visual representations of all selected IModelItems above their current successors.
Examples
mode.raiseSelection()See Also
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.
See Also
Removes the given mode from this compound mode.
Parameters
A map of options to pass to the method.
- mode - IInputMode
- The mode to remove.
Defined in
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.
See Also
Reverses the given edges.
Remarks
true and shouldReverseEdge returns true for the edge. A EdgePortsChanged event will be dispatched after the edge has been reversed.Reverses the given edges.
Remarks
The edges will only be reversed if allowReverseEdge is set to true and shouldReverseEdge returns true for the edge.
For each edge a EdgePortsChanged event will be dispatched.
See Also
Reverses the selected edges.
Remarks
This implementation invokes reverseEdges providing the selected edges.
The edges will only be reversed if shouldReverseEdge returns true for each edge.
For each edge an EdgePortsChanged event will be dispatched.
Clears the current selection and selects all nodes and bends in this graph.
Remarks
See Also
Defined in
Lowers the visual representations of all selected IModelItems to the back.
Examples
mode.selectionToBack()See Also
Raises the visual representations of all selected IModelItems to the front.
Examples
mode.selectionToFront()See Also
Selects the node and possible bends of selfloop edges.
Remarks
Parameters
A map of options to pass to the method.
- node - INode
- The node to select.
See Also
Called by this instance to set the current item on the NavigationInputMode
Parameters
A map of options to pass to the method.
- item - IModelItem
- The item to set as the new "current" item.
Defined in
Sets the label's text after it has been edited.
Remarks
Parameters
A map of options to pass to the method.
- label - ILabel
- The label to set the text or remove.
- text - string
- The new text.
Updates the bounds of the node.
Remarks
- 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.
- adjustContentRect is called.
Parameters
A map of options to pass to the method.
Uses the graphSelection to select the given item.
Parameters
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
Predicate that determines whether a label may be added interactively to item
Remarks
false for its onLabelAdding method.Parameters
A map of options to pass to the method.
- item - IModelItem
- The item to query
Returns
- ↪boolean
trueiff a label may be added
See Also
Called to determine whether the given item can be clicked.
Remarks
Parameters
A map of options to pass to the method.
- item - IModelItem
- The item to check.
Returns
- ↪boolean
- Whether the item should be clicked in response to a detected mouse click.
Defined in
Called to determine whether the given item should be selected when clicked with the primary mouse button.
Remarks
Parameters
A map of options to pass to the method.
- item - IModelItem
- The item to check.
Returns
- ↪boolean
- Whether the item should be selected in response to a detected mouse click with the primary button.
Defined in
Called to determine whether the given item should be deleted during deleteSelection.
Remarks
Parameters
A map of options to pass to the method.
- item - IModelItem
- The item.
Returns
- ↪boolean
- Whether to delete that item.
See Also
Called to determine whether the given item can be double clicked.
Remarks
Parameters
A map of options to pass to the method.
- item - IModelItem
- The item to check.
Returns
- ↪boolean
- Whether the item should be double clicked in response to a detected mouse click.
Defined in
Called to determine whether the label or the labels of the provided item should be edited in response to onEditLabel or onAddLabel.
Parameters
A map of options to pass to the method.
- item - IModelItem
- The item.
Returns
- ↪boolean
- Whether to edit the label or the labels for that item.
See Also
Determines whether the provided IModelItem should be set to the current item.
Remarks
Parameters
A map of options to pass to the method.
- item - IModelItem
- The item to check.
Returns
- ↪boolean
- Whether to set the item as the current item.
Defined in
CUsed to determine which of the built-in ICommands to install.
Remarks
true, subclasses may override this method to adjust the behavior.Parameters
A map of options to pass to the method.
- command - ICommand
- The command to install.
Returns
- ↪boolean
- Whether to install this command.
Defined in
Used by marqueeSelect and lassoSelect that takes marqueeSelectableItems and shouldSelectItem into account.
Parameters
A map of options to pass to the method.
- item - IModelItem
- The item to check.
Returns
- ↪boolean
- Whether to possibly marquee or lasso select the item.
Defined in
Determines whether or not moving the item is allowed.
Remarks
This predicate determines whether an item can be moved by any appropriate input mode, e.g by default it also evaluates to true for ILabels which are moved by moveLabelInputMode instead of moveInputMode.
This implementation returns the result of the movableItems property for the given item.
Parameters
A map of options to pass to the method.
- item - IModelItem
- The item to check.
Returns
- ↪boolean
- Whether or not moving the item is allowed.
See Also
Determines whether for the given item a context menu should be queried.
Remarks
Parameters
A map of options to pass to the method.
- item - IModelItem
- The item to check.
Returns
- ↪boolean
- Whether to raise a PopulateItemContextMenu event for the given item.
See Also
Defined in
Determines whether for the given item a tool tip should be queried.
Remarks
Parameters
A map of options to pass to the method.
- item - IModelItem
- The item to check.
Returns
- ↪boolean
- Whether to raise a QueryItemToolTip event for the given item.
Defined in
Called to determine whether the given edge should be reversed by reverseEdge, reverseEdges, or reverseEdges.
Remarks
Parameters
A map of options to pass to the method.
- edge - IEdge
- The edge which should be reversed.
Returns
- ↪boolean
trueif the edge should be reversed.
Can be overridden to determine which items should be selected after paste or duplicateSelection.
Remarks
true for the pasteSelectableItems items.Parameters
A map of options to pass to the method.
- item - IModelItem
- The item to check.
Returns
- ↪boolean
- Whether to select the item after paste or duplicateSelection.
Called as a broad classification whether an item can generally be selected.
Remarks
Parameters
A map of options to pass to the method.
- item - IModelItem
- The item to check.
Returns
- ↪boolean
trueif the item is selectable in general,falseif not.
Defined in
Determines whether to show the handles for the given item.
Parameters
A map of options to pass to the method.
- item - IModelItem
- The item to check
Returns
- ↪boolean
- Whether to show the item based on the setting of the corresponding showHandleItems, property.
Snaps the node to the grid using the IGridConstraintProvider<T> for INodes queried from the given context.
Remarks
See Also
Called when the priority of an installed sub mode has changed.
Remarks
Defined in
Actually performs the tap on the given item.
Remarks
Parameters
A map of options to pass to the method.
- item - IModelItem
- The item that has been tapped.
- evt - TapEventArgs
- The original event arguments for the tap. Setting its handled property to
truewill indicate that the tap was handled. By default this happens when the tapped item is either selected or focused.
Defined in
Tries to stop all modes.
Returns
- ↪boolean
trueif and only if the editing has been stopped or there was no edit in progress
See Also
Implements
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.
See Also
Makes each of the currently selected nodes a direct child of the root group.
Uninstalls this mode from the given context.
Remarks
Parameters
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
Events
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.
This event will also be raised for taps. In this case the CanvasTapped event will be raised before this event. If it is marked handled this event will not be raised anymore.
See Also
Defined in
Event Registration
addCanvasClickedListener(function(this, ClickEventArgs):void)Event Deregistration
removeCanvasClickedListener(function(this, ClickEventArgs):void)Signature Details
function(sender: this, evt: ClickEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - ClickEventArgs
- An object that contains the event data.
Occurs when the empty canvas area has been tapped.
Remarks
true the event will not be propagated anymore. This also means that the CanvasClicked event will not be raised in that case.See Also
Defined in
Event Registration
addCanvasTappedListener(function(this, TapEventArgs):void)Event Deregistration
removeCanvasTappedListener(function(this, TapEventArgs):void)Signature Details
function(sender: this, evt: TapEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - TapEventArgs
- An object that contains the event data.
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 DeletedSelection event which is raised only once after all items have been deleted.
The DeletingSelection event is raised before all items have been removed. The DeletedSelection event is raised after all items have been removed.
In addition to the deleted item and its type, the ItemEventArgs<IModelItem> provide information about the status before deletion.
Examples
mode.addDeletedItemListener((sender, e) => {
if (e instanceof NodeEventArgs) {
console.log(`Old parent: ${e.parent}`)
} else if (e instanceof EdgeEventArgs) {
console.log(`Old source port owner: ${e.sourcePortOwner}`)
console.log(`Old target port owner: ${e.targetPortOwner}`)
} else if (e instanceof PortEventArgs) {
console.log(`Old port owner: ${e.owner}`)
} else if (e instanceof LabelEventArgs) {
console.log(`Old label owner: ${e.owner}`)
} else if (e instanceof BendEventArgs) {
console.log(`Old bend owner: ${e.owner}`)
}
})See Also
Event Registration
addDeletedItemListener(function(this, ItemEventArgs<IModelItem>):void)Event Deregistration
removeDeletedItemListener(function(this, ItemEventArgs<IModelItem>):void)Signature Details
function(sender: this, evt: ItemEventArgs<IModelItem>)
Parameters
- sender - this
- The source of the event.
- evt - ItemEventArgs<IModelItem>
- An object that contains the event data.
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 DeletingSelection event is raised before all items have been removed. The DeletedItem is raised for each item after it has been removed.
Note that all items which have been removed are not in the selection anymore.
Examples
Applying a layout after the selected items have been deleted;
mode.addDeletedSelectionListener((sender, args) => {
mode.graph.applyLayout(new HierarchicLayout())
})mode.addDeletedSelectionListener((sender, args) => {
mode.graph!.applyLayout(new HierarchicLayout())
})The deleted items are neither in the selection nor in the graph. One has to retrieve them before deletion:
let selectedItems = new List()
mode.addDeletingSelectionListener((sender, args) => {
selectedItems = args.selection.toList()
})
mode.addDeletedSelectionListener((sender, args) => {
// the deleted items are the items which were selected before deletion
// and are not in the current selection
const list = args.selection.toList()
const deletedItems = selectedItems.filter((item) => !list.includes(item))
})let selectedItems = new List<IModelItem>()
mode.addDeletingSelectionListener((sender, args) => {
selectedItems = args.selection.toList()
})
mode.addDeletedSelectionListener((sender, args) => {
// the deleted items are the items which were selected before deletion
// and are not in the current selection
const list = args.selection.toList()
const deletedItems = selectedItems.filter((item) => !list.includes(item))
})See Also
Event Registration
addDeletedSelectionListener(function(this, SelectionEventArgs<IModelItem>):void)Event Deregistration
removeDeletedSelectionListener(function(this, SelectionEventArgs<IModelItem>):void)Signature Details
function(sender: this, evt: SelectionEventArgs<IModelItem>)
Parameters
- sender - this
- The source of the event.
- evt - SelectionEventArgs<IModelItem>
- An object that contains the event data.
Occurs just before the deleteSelection method starts its work and will be followed by any number of DeletedItem events and finalized by a DeletedSelection 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 DeletedItem is raised for each item after it has been removed. The DeletedSelection event is raised after all items have been removed.
Examples
let selectedItems = new List()
mode.addDeletingSelectionListener((sender, args) => {
selectedItems = args.selection.toList()
})
mode.addDeletedSelectionListener((sender, args) => {
// the deleted items are the items which were selected before deletion
// and are not in the current selection
const list = args.selection.toList()
const deletedItems = selectedItems.filter((item) => !list.includes(item))
})let selectedItems = new List<IModelItem>()
mode.addDeletingSelectionListener((sender, args) => {
selectedItems = args.selection.toList()
})
mode.addDeletedSelectionListener((sender, args) => {
// the deleted items are the items which were selected before deletion
// and are not in the current selection
const list = args.selection.toList()
const deletedItems = selectedItems.filter((item) => !list.includes(item))
})See Also
Event Registration
addDeletingSelectionListener(function(this, SelectionEventArgs<IModelItem>):void)Event Deregistration
removeDeletingSelectionListener(function(this, SelectionEventArgs<IModelItem>):void)Signature Details
function(sender: this, evt: SelectionEventArgs<IModelItem>)
Parameters
- sender - this
- The source of the event.
- evt - SelectionEventArgs<IModelItem>
- An object that contains the event data.
Occurs after an edge's source and/or target ports have been changed as the result of an input gesture.
See Also
Event Registration
addEdgePortsChangedListener(function(this, EdgeEventArgs):void)Event Deregistration
removeEdgePortsChangedListener(function(this, EdgeEventArgs):void)Signature Details
function(sender: this, evt: EdgeEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - EdgeEventArgs
- An object that contains the event data.
Occurs when the duplicateSelection operation finished successfully.
Occurs after the groupSelection method has grouped the selected items.
Remarks
This event is raised after the elements are grouped.
The event is not raised if no elements are selected.
See Also
Event Registration
addGroupedSelectionListener(function(this, SelectionEventArgs<IModelItem>):void)Event Deregistration
removeGroupedSelectionListener(function(this, SelectionEventArgs<IModelItem>):void)Signature Details
function(sender: this, evt: SelectionEventArgs<IModelItem>)
Parameters
- sender - this
- The source of the event.
- evt - SelectionEventArgs<IModelItem>
- An object that contains the event data.
Occurs just before the groupSelection method starts its work.
Remarks
This event is raised before the elements are grouped.
The event is not raised if no elements are selected.
See Also
Event Registration
addGroupingSelectionListener(function(this, SelectionEventArgs<IModelItem>):void)Event Deregistration
removeGroupingSelectionListener(function(this, SelectionEventArgs<IModelItem>):void)Signature Details
function(sender: this, evt: SelectionEventArgs<IModelItem>)
Parameters
- sender - this
- The source of the event.
- evt - SelectionEventArgs<IModelItem>
- An object that contains the event data.
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.
This event will also be raised for taps.
Button-specific and input type specific events (ItemLeftClicked, ItemRightClicked and ItemTapped) will be raised before this event. If one of those is marked handled this event will not be raised anymore.
Examples
mode.addItemClickedListener((sender, args) => {
const node = args.item
if (node !== null) {
doSomethingWithNode(node)
args.handled = true
}
})See Also
Defined in
Event Registration
addItemClickedListener(function(this, ItemClickedEventArgs<IModelItem>):void)Event Deregistration
removeItemClickedListener(function(this, ItemClickedEventArgs<IModelItem>):void)Signature Details
function(sender: this, evt: ItemClickedEventArgs<IModelItem>)
Parameters
- sender - this
- The source of the event.
- evt - ItemClickedEventArgs<IModelItem>
- An object that contains the event data.
Occurs when an item has been double clicked.
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 doubleClickPolicy property of clickInputMode this event may be preceded by no, one, or two ItemClicked events (as well as the corresponding button-specific event).
Button-specific and input-type specific events (ItemLeftDoubleClicked, ItemRightDoubleClicked and ItemDoubleTapped) will be raised before this event. If one of those is marked handled this event will not be raised anymore.
Examples
mode.addItemDoubleClickedListener((sender, args) => {
const node = args.item
if (node !== null) {
doSomethingWithNode(node)
args.handled = true
}
})See Also
Defined in
Event Registration
addItemDoubleClickedListener(function(this, ItemClickedEventArgs<IModelItem>):void)Event Deregistration
removeItemDoubleClickedListener(function(this, ItemClickedEventArgs<IModelItem>):void)Signature Details
function(sender: this, evt: ItemClickedEventArgs<IModelItem>)
Parameters
- sender - this
- The source of the event.
- evt - ItemClickedEventArgs<IModelItem>
- An object that contains the event data.
Occurs when an item has been double tapped.
Remarks
true the event will not be propagated anymore. This also means that the ItemDoubleClicked event will not be raised in that case.Examples
mode.addItemDoubleTappedListener((sender, args) => {
const node = args.item
if (node !== null) {
doSomethingWithNode(node)
args.handled = true
}
})See Also
Defined in
Event Registration
addItemDoubleTappedListener(function(this, ItemTappedEventArgs<IModelItem>):void)Event Deregistration
removeItemDoubleTappedListener(function(this, ItemTappedEventArgs<IModelItem>):void)Signature Details
function(sender: this, evt: ItemTappedEventArgs<IModelItem>)
Parameters
- sender - this
- The source of the event.
- evt - ItemTappedEventArgs<IModelItem>
- An object that contains the event data.
Occurs when an item has been left clicked.
Remarks
true the event will not be propagated anymore. This also means that the ItemClicked event will not be raised in that case.Examples
mode.addItemLeftClickedListener((sender, args) => {
const node = args.item
if (node !== null) {
doSomethingWithNode(node)
args.handled = true
}
})See Also
Defined in
Event Registration
addItemLeftClickedListener(function(this, ItemClickedEventArgs<IModelItem>):void)Event Deregistration
removeItemLeftClickedListener(function(this, ItemClickedEventArgs<IModelItem>):void)Signature Details
function(sender: this, evt: ItemClickedEventArgs<IModelItem>)
Parameters
- sender - this
- The source of the event.
- evt - ItemClickedEventArgs<IModelItem>
- An object that contains the event data.
Occurs when an item has been left double clicked.
Remarks
true the event will not be propagated anymore. This also means that the ItemDoubleClicked event will not be raised in that case.Examples
mode.addItemLeftDoubleClickedListener((sender, args) => {
const node = args.item
if (node !== null) {
doSomethingWithNode(node)
args.handled = true
}
})See Also
Defined in
Event Registration
addItemLeftDoubleClickedListener(function(this, ItemClickedEventArgs<IModelItem>):void)Event Deregistration
removeItemLeftDoubleClickedListener(function(this, ItemClickedEventArgs<IModelItem>):void)Signature Details
function(sender: this, evt: ItemClickedEventArgs<IModelItem>)
Parameters
- sender - this
- The source of the event.
- evt - ItemClickedEventArgs<IModelItem>
- An object that contains the event data.
Occurs when an item has been right clicked.
Remarks
true the event will not be propagated anymore. This also means that the ItemClicked event will not be raised in that case.Examples
mode.addItemRightClickedListener((sender, args) => {
const node = args.item
if (node !== null) {
doSomethingWithNode(node)
args.handled = true
}
})See Also
Defined in
Event Registration
addItemRightClickedListener(function(this, ItemClickedEventArgs<IModelItem>):void)Event Deregistration
removeItemRightClickedListener(function(this, ItemClickedEventArgs<IModelItem>):void)Signature Details
function(sender: this, evt: ItemClickedEventArgs<IModelItem>)
Parameters
- sender - this
- The source of the event.
- evt - ItemClickedEventArgs<IModelItem>
- An object that contains the event data.
Occurs when an item has been right double clicked.
Remarks
true the event will not be propagated anymore. This also means that the ItemDoubleClicked event will not be raised in that case.Examples
mode.addItemRightDoubleClickedListener((sender, args) => {
const node = args.item
if (node !== null) {
doSomethingWithNode(node)
args.handled = true
}
})See Also
Defined in
Event Registration
addItemRightDoubleClickedListener(function(this, ItemClickedEventArgs<IModelItem>):void)Event Deregistration
removeItemRightDoubleClickedListener(function(this, ItemClickedEventArgs<IModelItem>):void)Signature Details
function(sender: this, evt: ItemClickedEventArgs<IModelItem>)
Parameters
- sender - this
- The source of the event.
- evt - ItemClickedEventArgs<IModelItem>
- An object that contains the event data.
Occurs when an item has been tapped.
Remarks
true the event will not be propagated anymore. This also means that the ItemClicked event will not be raised in that case.Examples
mode.addItemTappedListener((sender, args) => {
const node = args.item
if (node !== null) {
doSomethingWithNode(node)
args.handled = true
}
})See Also
Defined in
Event Registration
addItemTappedListener(function(this, ItemTappedEventArgs<IModelItem>):void)Event Deregistration
removeItemTappedListener(function(this, ItemTappedEventArgs<IModelItem>):void)Signature Details
function(sender: this, evt: ItemTappedEventArgs<IModelItem>)
Parameters
- sender - this
- The source of the event.
- evt - ItemTappedEventArgs<IModelItem>
- An object that contains the event data.
Occurs when this mode has triggered the addition of an ILabel, for instance, in response to createLabel.
See Also
Event Registration
addLabelAddedListener(function(this, LabelEventArgs):void)Event Deregistration
removeLabelAddedListener(function(this, LabelEventArgs):void)Signature Details
function(sender: this, evt: LabelEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - LabelEventArgs
- An object that contains the event data.
Occurs when a label is about to be added.
Remarks
Examples
mode.addLabelAddingListener((source, args) => {
if (args.owner.labels.size >= 1) {
// don't add a second label
args.cancel = true
} else {
// the new label should be red
args.style = new DefaultLabelStyle({ backgroundFill: Fill.RED })
args.handled = true
}
})mode.addLabelAddingListener((source, args) => {
if (args.owner!.labels.size >= 1) {
// don't add a second label
args.cancel = true
} else {
// the new label should be red
args.style = new DefaultLabelStyle({ backgroundFill: Fill.RED })
args.handled = true
}
})See Also
Event Registration
addLabelAddingListener(function(this, LabelEditingEventArgs):void)Event Deregistration
removeLabelAddingListener(function(this, LabelEditingEventArgs):void)Signature Details
function(sender: this, evt: LabelEditingEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - LabelEditingEventArgs
- An object that contains the event data.
Occurs when a label is about to be edited.
Remarks
See Also
Event Registration
addLabelEditingListener(function(this, LabelEditingEventArgs):void)Event Deregistration
removeLabelEditingListener(function(this, LabelEditingEventArgs):void)Signature Details
function(sender: this, evt: LabelEditingEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - LabelEditingEventArgs
- An object that contains the event data.
Occurs when this mode has triggered the edit of an ILabel, for instance, in response to editLabel.
See Also
Event Registration
addLabelTextChangedListener(function(this, LabelEventArgs):void)Event Deregistration
removeLabelTextChangedListener(function(this, LabelEventArgs):void)Signature Details
function(sender: this, evt: LabelEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - LabelEventArgs
- An object that contains the event data.
Occurs when the actual label editing process is canceled.
Remarks
See Also
Event Registration
addLabelTextEditingCanceledListener(function(this, LabelEventArgs):void)Event Deregistration
removeLabelTextEditingCanceledListener(function(this, LabelEventArgs):void)Signature Details
function(sender: this, evt: LabelEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - LabelEventArgs
- An object that contains the event data.
Occurs when the actual label editing process is about to start.
Remarks
See Also
Event Registration
addLabelTextEditingStartedListener(function(this, LabelEventArgs):void)Event Deregistration
removeLabelTextEditingStartedListener(function(this, LabelEventArgs):void)Signature Details
function(sender: this, evt: LabelEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - LabelEventArgs
- An object that contains the event data.
Occurs when a single or multi select operation has been finished.
Remarks
Defined in
Event Registration
addMultiSelectionFinishedListener(function(this, SelectionEventArgs<IModelItem>):void)Event Deregistration
removeMultiSelectionFinishedListener(function(this, SelectionEventArgs<IModelItem>):void)Signature Details
function(sender: this, evt: SelectionEventArgs<IModelItem>)
Parameters
- sender - this
- The source of the event.
- evt - SelectionEventArgs<IModelItem>
- An object that contains the event data.
Occurs when a single or multi select operation has been started.
Remarks
Defined in
Event Registration
addMultiSelectionStartedListener(function(this, SelectionEventArgs<IModelItem>):void)Event Deregistration
removeMultiSelectionStartedListener(function(this, SelectionEventArgs<IModelItem>):void)Signature Details
function(sender: this, evt: SelectionEventArgs<IModelItem>)
Parameters
- sender - this
- The source of the event.
- evt - SelectionEventArgs<IModelItem>
- An object that contains the event data.
Occurs when this mode has created a node in response to user interaction.
Remarks
true, the reported node can actually be part of the master graph.Examples
mode.addNodeCreatedListener((sender, args) => {
mode.graph.applyLayout(new HierarchicLayout())
})mode.addNodeCreatedListener((sender, args) => {
mode.graph!.applyLayout(new HierarchicLayout())
})See Also
Event Registration
addNodeCreatedListener(function(this, ItemEventArgs<INode>):void)Event Deregistration
removeNodeCreatedListener(function(this, ItemEventArgs<INode>):void)Signature Details
function(sender: this, evt: ItemEventArgs<INode>)
Parameters
- sender - this
- The source of the event.
- evt - ItemEventArgs<INode>
- An object that contains the event data.
Occurs when a node has been reparented interactively.
Remarks
See Also
Event Registration
addNodeReparentedListener(function(this, NodeEventArgs):void)Event Deregistration
removeNodeReparentedListener(function(this, NodeEventArgs):void)Signature Details
function(sender: this, evt: NodeEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - NodeEventArgs
- An object that contains the event data.
Occurs when the context menu over an item is about to be opened to determine the contents of the context menu.
Remarks
Examples
// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.contextMenuItems = GraphItemTypes.NODE
mode.addPopulateItemContextMenuListener((sender, args) => {
// Get the node which is handled or null if the item is not a node
const node = args.item
// Create the context menu items
if (node !== null) {
// Create a menu item to delete the node
// Show the menu
args.showMenu = true
// Mark the event as handled
args.handled = true
}
})Defined in
Event Registration
addPopulateItemContextMenuListener(function(this, PopulateItemContextMenuEventArgs<IModelItem>):void)Event Deregistration
removePopulateItemContextMenuListener(function(this, PopulateItemContextMenuEventArgs<IModelItem>):void)Signature Details
function(sender: this, evt: PopulateItemContextMenuEventArgs<IModelItem>)
Parameters
- sender - this
- The source of the event.
- evt - PopulateItemContextMenuEventArgs<IModelItem>
- An object that contains the event data.
Occurs when this mode has triggered the addition of an IPort, for instance, in response to portDropInputMode.
Event Registration
addPortAddedListener(function(this, PortEventArgs):void)Event Deregistration
removePortAddedListener(function(this, PortEventArgs):void)Signature Details
function(sender: this, evt: PortEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - PortEventArgs
- An object that contains the event data.
Occurs when the mouse is hovering over an item to determine the tool tip to display.
Remarks
Examples
// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.toolTipItems = GraphItemTypes.NODE
// register a listener
mode.addQueryItemToolTipListener((src, args) => {
if (args.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 = args.item
if (hitNode.labels.size > 0) {
// Show the text of the first label as tooltip.
args.toolTip = hitNode.labels.get(0).text
// Indicate that the tooltip content has been set.
args.handled = true
}
})// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.toolTipItems = GraphItemTypes.NODE
// register a listener
mode.addQueryItemToolTipListener((src, args) => {
if (args.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 = args.item as INode
if (hitNode.labels.size > 0) {
// Show the text of the first label as tooltip.
args.toolTip = hitNode.labels.get(0).text
// Indicate that the tooltip content has been set.
args.handled = true
}
})Defined in
Event Registration
addQueryItemToolTipListener(function(this, QueryItemToolTipEventArgs<IModelItem>):void)Event Deregistration
removeQueryItemToolTipListener(function(this, QueryItemToolTipEventArgs<IModelItem>):void)Signature Details
function(sender: this, evt: QueryItemToolTipEventArgs<IModelItem>)
Parameters
- sender - this
- The source of the event.
- evt - QueryItemToolTipEventArgs<IModelItem>
- An object that contains the event data.
Occurs after the ungroupSelection method has ungrouped the selected items.
Remarks
This event is raised after the elements are ungrouped.
The event is not raised if no elements are selected.
See Also
Event Registration
addUngroupedSelectionListener(function(this, SelectionEventArgs<IModelItem>):void)Event Deregistration
removeUngroupedSelectionListener(function(this, SelectionEventArgs<IModelItem>):void)Signature Details
function(sender: this, evt: SelectionEventArgs<IModelItem>)
Parameters
- sender - this
- The source of the event.
- evt - SelectionEventArgs<IModelItem>
- An object that contains the event data.
Occurs just before the ungroupSelection method starts its work.
Remarks
This event is raised before the elements are ungrouped.
The event is not raised if no elements are selected.
See Also
Event Registration
addUngroupingSelectionListener(function(this, SelectionEventArgs<IModelItem>):void)Event Deregistration
removeUngroupingSelectionListener(function(this, SelectionEventArgs<IModelItem>):void)Signature Details
function(sender: this, evt: SelectionEventArgs<IModelItem>)
Parameters
- sender - this
- The source of the event.
- evt - SelectionEventArgs<IModelItem>
- An object that contains the event data.
Occurs when a label that is about to be added or edited.
Remarks
This event that can be used to validate the label text before inserting/updating the actual label. Set cancel to true to reject the currently edited label's newText or set an asynchronously validatedText.
Note that in the case of addLabel the label is not part of the current graph but only a dummy instance.
Examples
mode.addValidateLabelTextListener((o, args) => {
if (args.label.tag === 'int label') {
args.cancel = Number.isNaN(parseInt(args.newText))
}
})See Also
Event Registration
addValidateLabelTextListener(function(this, LabelTextValidatingEventArgs):void)Event Deregistration
removeValidateLabelTextListener(function(this, LabelTextValidatingEventArgs):void)Signature Details
function(sender: this, evt: LabelTextValidatingEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - LabelTextValidatingEventArgs
- An object that contains the event data.
Constants
An IHitTestable that tests if any selected model item that is movable is hit.
Remarks
This testable retrieves the GraphEditorInputMode from the lookup in isHit. All items in its selection that are movable and provide an IPositionHandler are queried for their IHitTestable
This testable is the default hitTestable of moveInputMode and any MoveInputMode using this testable has to be a child mode of an GraphEditorInputMode.
An IPositionHandler combining all position handlers of selected model items that are movable.
Remarks
This handler retrieves the GraphEditorInputMode from the lookup in initializeDrag. All items in its selection that are movable are queried for their IPositionHandler or IHandle and these drag handlers are combined afterwards.
This handler is the default positionHandler of moveInputMode and any MoveInputMode using this position handler has to be a child mode of an GraphEditorInputMode.
An IHitTestable that tests if any model item that is movable is hit.
Remarks
This testable retrieves the GraphEditorInputMode from the lookup in isHit. and tests if any hit items that is movable provides an IPositionHandler.
This testable is the default hitTestable of moveUnselectedInputMode. Any MoveInputMode using this testable has to be a child mode of an GraphEditorInputMode.
An event handler setting the IPositionHandler of the movable model item that is hit at the query location.
Remarks
This handler retrieves the GraphEditorInputMode from the lookup and tests if any item hit at the query location is movable and provides an IPositionHandler. If such an IPositionHandler is found, it is set as positionHandler.
This handler is added per default to the QueryPositionHandler event of moveUnselectedInputMode. Any MoveInputMode using this query handler has to be a child mode of an GraphEditorInputMode.
Signature Details
function(sender: this, evt: QueryPositionHandlerEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - QueryPositionHandlerEventArgs
- An object that contains the event data.