Implements
- I
Remarks
This class delegates most of the work to minor IInputMode implementations. However, it contains a number of properties that influence the general behavior:
- selectableItems – Determines the types of items that can be selected at all.
- selectablePredicate – Allows to further constrain selectableItems with a predicate.
- marqueeSelectableItems – Determines the types of items that can be selected with marquee selection and lasso selection.
- clickSelectableItems – Determines the types of items that can be selected by clicking or tapping them.
- detailSelectionRecognizer – Determines when to use a detail click selection mode, which allows for selecting the item that is directly under the mouse without taking into account the clickHitTestOrder.
- clickHitTestOrder – Determines the priorities for hit tests during mouse or stylus clicks or touch taps to determine which items should get click events.
- doubleClickHitTestOrder – Determines the priorities for hit tests when double-clicking items.
- movableSelectedItems – Determines the type of the items that can be moved with the mouse.
- showHandleItems – Determines the type of the items whose IHandles should be shown and movable by the handleInputMode.
- deletableItems – Determines the type of the items that can be deleted by deleteSelection.
- deletablePredicate – Allows to further constrain deletableItems with a predicate.
- labelEditableItems – Determines the type of the items that can have their labels edited.
- allowGroupingOperations – Determines whether this input mode should allow grouping operations at all.
- allowGroupSelection – Determines whether this input mode should allow grouping the current selection.
- allowUngroupSelection – Determines whether this input mode should allow ungrouping the current selection.
- allowClearSelection – Determines whether this input mode should allow clearing the selection. This has implications both for the DESELECT_ALL and for click/marquee selection which usually clear the selection unless the multiSelectionRecognizer is pressed.
- allowClipboardOperations – Determines whether this input mode should enable graph clipboard operations.
- allowDuplicate – Determines whether this input mode should enable GraphClipboard's duplicate operation.
- allowEditLabel – Determines whether this input mode should allow editing labels.
- allowReparentNodes – Determines whether this input mode should allow reparenting nodes to other groups.
- allowReparentToNonGroupNodes – Determines whether this input mode should allow reparenting nodes to other nodes which are not group nodes, transforming these into group nodes.
- allowAdjustGroupNodeSize – Determines whether the ADJUST_GROUP_NODE_SIZE command should be handled.
- allowCreateNode – Determines whether this input mode should allow creating new nodes via left mouse button clicks, stylus clicks or touch taps.
- allowCreateEdge – Determines whether createEdgeInputMode should be enabled to allow for creating new edges.
- allowEditLabelOnDoubleClick – Determines whether labels should be editable on otherwise unhandled double clicks or taps.
- allowReverseEdge – Determines whether edges can be reversed.
- allowCreateBend – Determines whether the createBendInputMode should be enabled to allow for creating new bends.
- allowEnterGroup – Determines whether the mode allows for entering group nodes in IFoldingViews.
- allowExitGroup – Determines whether the mode allows for exiting the current group node in IFoldingViews.
- allowCollapseGroup – Determines whether the mode allows for collapsing group nodes in IFoldingViews.
- allowExpandGroup – Determines whether the mode allows for expanding group nodes in IFoldingViews.
- hoverItems – Determines which items should be reported as being hovered through the corresponding event in this instance's ItemHoverInputMode.
By default, GraphEditorInputMode supports the following commands. Most of them have default keybindings:
- UNDO (Ctrl+Z) – Undoes the last operation. Can be disabled with allowUndoOperations.
- REDO (Ctrl+Y) – Redoes the last operation that was undone. Can be disabled with allowUndoOperations.
- SELECT_ALL (Ctrl+A) – Selects all items. Can be configured with selectableItems and selectablePredicate.
- DESELECT_ALL (Ctrl+Shift+A) – Clears the current selection. Can be disabled with allowClearSelection.
- CUT (Ctrl+X, Shift+Del) – Cuts the current selection and places it in the clipboard. Can be disabled with allowClipboardOperations.
- COPY (Ctrl+C, Ctrl+Ins) – Copies the current selection to the clipboard. Can be disabled with allowClipboardOperations.
- PASTE (Ctrl+V, Shift+Ins) – Pastes the current clipboard contents into the graph. Can be disabled with allowClipboardOperations.
- DUPLICATE (Ctrl+D) – Duplicates the current selection. Can be disabled with allowDuplicate.
- DELETE (Del) – Deletes the current selection. Can be configured with deletablePredicate and deletableItems.
- ADD_LABEL (Shift+F2) – Adds a new label to the selected item. Can be configured with labelEditableItems and disabled with allowAddLabel.
- EDIT_LABEL (F2) – Edits an existing label or adds a new one to the selected item. Can be configured with labelEditableItems and disabled with allowEditLabel.
- REVERSE_EDGE (Ctrl+R) – Reverses the direction of the selected edges. Can be disabled with allowReverseEdge.
- GROUP_SELECTION (Ctrl+G) – Creates a new group node and places the currently selected nodes into it. Can be disabled with allowGroupingOperations and allowGroupSelection.
- UNGROUP_SELECTION (Ctrl+U) – Makes each of the currently selected nodes a direct child of the root group. Can be disabled with allowGroupingOperations and allowUngroupSelection.
- ADJUST_GROUP_NODE_SIZE (Ctrl+Shift+G) – Adjusts the sizes of the selected group nodes to fit exactly around their contents. Can be disabled with allowGroupingOperations and allowAdjustGroupNodeSize.
- RAISE – Raises the visual representations of IModelItems.
- LOWER – Lowers the visual representations of IModelItems.
- TO_FRONT – Raises the visual representations of IModelItems to the front.
- TO_BACK – Lowers the visual representations of IModelItems to the back.
All commands can also be selectively disabled by using the availableCommands collection. Furthermore, there are a few commands provided by navigationInputMode:
- COLLAPSE_GROUP (Alt+Left) – Collapses the currently selected group nodes. Can be disabled with allowCollapseGroup of navigationInputMode.
- EXPAND_GROUP (Alt+Right) – Expands the currently selected group nodes. Can be disabled with allowExpandGroup of navigationInputMode.
- TOGGLE_EXPANSION_STATE (Alt+Shift+Left or Alt+Shift+Right) – Collapses expanded group nodes and expands collapsed group nodes in the current selection. Can be disabled with allowCollapseGroup and allowExpandGroup of navigationInputMode.
- ENTER_GROUP (Alt+Down) – Replaces the currently displayed graph with the contents of the selected group node. Can be disabled with allowEnterGroup of navigationInputMode.
- EXIT_GROUP (Alt+Up) – Replaces the currently displayed graph with the contents of the parent of the group node whose contents are currently displayed. Can be disabled with allowExitGroup of navigationInputMode.
GraphEditorInputMode can be configured to automatically adjust the content bounds of the graphComponent whenever the graph is changed using gestures.
This class contains a number of public methods that can be used to programmatically perform the corresponding actions, too.
Setting the nodeCreator to another instance or null changes the way nodes are created. Also, the various minor IInputMode instances can be disabled, to change the behavior, too.
This input mode manages a set of specialized input modes, each handling a specific part of the interaction with the graph. The following list details those along with their default priorities. Lower priorities come earlier when handling events.
- waitInputMode (−1) – Disables this input mode when layouts or animations run.
- keyboardInputMode (0) – Handles commands and arbitrary keyboard shortcuts.
- handleInputMode (10) – Deals with displaying handles on or around items and interacting with them.
- clickInputMode (20) – Handles mouse and stylus clicks and double-clicks as well as touch taps and double-taps.
- createEdgeInputMode (100) – Allows creating edges
- moveViewportInputMode (105) – Allows panning the viewport.
- moveSelectedItemsInputMode (110) – Allows moving selected items.
- moveUnselectedItemsInputMode (120) – Allows moving unselected items.
- createBendInputMode (130) – Allows creating bends on edges.
- lassoSelectionInputMode (150) – Allows dragging a lasso path to select items within it. Disabled by default.
- marqueeSelectionInputMode (160) – Allows dragging a rectangle to select items within it.
- itemHoverInputMode (200) – Provides events to indicate that the mouse pointer hovers over an item.
- navigationInputMode (210) – Provides general navigation facilities, such as navigating from one item to another with the arrow keys, collapsing, expanding, entering or exiting groups, as well as providing commands for those tasks.
- contextMenuInputMode (220) – Handles querying the context menu contents based on a location as well as preparing the menu for display.
- nodeDropInputMode (300) – Allows dropping nodes on the graphComponent, e.g. for dragging items from a palette.
- labelDropInputMode (310) – Allows dropping labels on the graphComponent, e.g. for dragging items from a palette.
- portDropInputMode (320) – Allows dropping ports on the graphComponent, e.g. for dragging items from a palette.
- toolTipInputMode (400) – Handles tool tips.
- editLabelInputMode (500) – Handles editing labels.
To enable single selection mode, disable MarqueeSelectionInputMode and set multiSelectionRecognizer to NEVER. Remove SELECT_ALL and TOGGLE_ITEM_SELECTION from availableCommands and from navigationInputMode.availableCommands. An example can be found in Demo.yFiles.Graph.Input.SingleSelection.
Examples
The GraphEditorInputMode can be installed by setting it as inputMode on the graphComponent it handles.
graphComponent.inputMode = new GraphEditorInputMode({
allowGroupingOperations: true,
snapContext: new GraphSnapContext(),
orthogonalEdgeEditingContext: new OrthogonalEdgeEditingContext({
enabled: false,
}),
})Note that the GraphEditorInputMode also supports grouping operations. This functionality, however, is disabled by default and has to be enabled. The following example shows how to enable grouping operations on the GraphEditorInputMode together with some detail settings:
// 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(Command.TOGGLE_ITEM_SELECTION)
geim.availableCommands.remove(Command.SELECT_ALL)
geim.navigationInputMode.availableCommands.remove(
Command.EXTEND_SELECTION_LEFT,
)
geim.navigationInputMode.availableCommands.remove(
Command.EXTEND_SELECTION_UP,
)
geim.navigationInputMode.availableCommands.remove(
Command.EXTEND_SELECTION_DOWN,
)
geim.navigationInputMode.availableCommands.remove(
Command.EXTEND_SELECTION_RIGHT,
)
// disable selection of (possibly multiple) items
mode.pasteSelectableItems = GraphItemTypes.NONESee Also
- An overview of this input mode is given in the section Editing Graphs. Additionally, specific support for graph hierarchies is discussed in Supported User Interactions: Grouping .
Developer's Guide
API
- createEdgeInputMode, createBendInputMode, nodeDropInputMode
Demos
- Shows the multitude of events provided by the classes
IGraph,GraphComponent, and the Input Modes. - Shows the graph editing features of the graph component.
- Shows how to configure GraphEditorInputMode for single selection mode.
- Shows the default interaction gestures that are provided by class GraphEditorInputMode.
Members
Show:
Constructors
The IGraph and IGraphSelection instances are obtained later from the IInputModeContext once this mode gets installed in a suitable canvas control.
Parameters
Properties
Gets or sets a predicate that is queried to determine whether a label can be added to the given IModelItem.
Gets or sets a predicate that is queried to determine whether a label can be added to the given IModelItem.
The default value returns the result of the labelEditableItems property for the given item.
final
Examples
The following code ensures that labels can only be added to items without a label.
mode.addLabelPredicate = (item) =>
item instanceof ILabelOwner && item.labels.size == 0See Also
Developer's Guide
Gets or sets a property that determines whether and how this instance should automatically adjust the contentBounds if the graph changes.
Gets or sets a property that determines whether and how this instance should automatically adjust the contentBounds if the graph changes.
The adjustContentBounds method is called whenever the content changes. The default is UNION.
conversionfinal
Property Value
Determines whether and how this instance should automatically adjust the contentBounds if the graph changes.
Gets or sets a value determining whether the ADD_LABEL command should be handled.
Gets or sets a value determining whether the ADD_LABEL command should be handled.
If this flag is set to
true pressing Shift+F2 will start the label editor. By default, this feature is enabled.final
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
Developer's Guide
API
- ADD_LABEL
Gets or sets a value determining whether the ADJUST_GROUP_NODE_SIZE command should be handled.
Gets or sets a value determining whether the ADJUST_GROUP_NODE_SIZE command should be handled.
This setting has no effect if grouping operations are generally disallowed by setting allowGroupingOperations to false.
The default value is true.
final
Examples
The following example shows how to configure the grouping support on the
GraphEditorInputMode. Note that general grouping support has to be enabled explicitly with allowGroupingOperations:// first and foremost: enable grouping operations at all
geim.allowGroupingOperations = true
// support grouping but not ungrouping the currently selected nodes
geim.allowGroupSelection = true
geim.allowUngroupSelection = false
// forbid adjusting the size with Ctrl-Shift-G
geim.allowAdjustGroupNodeSize = false
// allow adding nodes to other group nodes by moving
geim.allowReparentNodes = true
// also allow to add nodes to non-group nodes, transforming these into groups
geim.allowReparentToNonGroupNodes = trueSee Also
Developer's Guide
API
- allowGroupingOperations, adjustGroupNodeSizes, adjustGroupNodeSize
Gets or sets a value determining whether the DESELECT_ALL command should be handled.
Gets or sets a value determining whether the DESELECT_ALL command should be handled.
The default value is
true.final
Examples
mode.allowClearSelection = trueDefault value is
truefinal
Examples
mode.allowClipboardOperations = falseDefined in
GraphInputMode.allowClipboardOperationsGets or sets a value determining whether bend creation should be enabled.
Gets or sets a value determining whether bend creation should be enabled.
This property delegates to createBendInputMode's enabled property.
The default value is true.
final
Examples
mode.allowCreateBend = true
mode.allowCreateEdge = true
mode.allowCreateNode = trueSee Also
Developer's Guide
Gets or sets a value determining whether edge creation should be enabled.
Gets or sets a value determining whether edge creation should be enabled.
This property delegates to createEdgeInputMode's enabled property.
The default value is true.
final
Examples
mode.allowCreateBend = true
mode.allowCreateEdge = true
mode.allowCreateNode = trueSee Also
Developer's Guide
Gets or sets a value determining whether node creation by clicking on an empty canvas location is enabled.
Gets or sets a value determining whether node creation by clicking on an empty canvas location is enabled.
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.
final
Examples
mode.allowCreateBend = true
mode.allowCreateEdge = true
mode.allowCreateNode = trueSee Also
Developer's Guide
API
- nodeCreator, createNode
Gets or sets a value determining whether the DUPLICATE command should be handled.
Gets or sets a value determining whether the DUPLICATE command should be handled.
This setting has no effect if clipboard operations are generally disallowed by setting allowClipboardOperations to false.
The default value is true.
final
Examples
mode.allowClipboardOperations = true
mode.allowDuplicate = true
mode.allowPaste = trueSee Also
Developer's Guide
Gets or sets a value determining whether the EDIT_LABEL command should be handled.
Gets or sets a value determining whether the EDIT_LABEL command should be handled.
If this flag is set to
true pressing F2 will start the label editor. By default, this feature is enabled.final
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
Developer's Guide
API
- startLabelEditing, EDIT_LABEL
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.
final
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
If enabled, starting to type will automatically edit the current label or create a new label with the typed text.
This setting has no effect if label editing is generally disallowed by setting allowEditLabel to false.
The default value is true.
final
See Also
Gets or sets a value indicating whether grouping operations like grouping selected nodes or moving nodes into group nodes should be enabled.
Gets or sets a value indicating whether grouping operations like grouping selected nodes or moving nodes into group nodes should be enabled.
Setting this property to false effectively disables handling of all grouping commands. If this property is set to true the related properties allowGroupSelection, allowUngroupSelection, and allowReparentNodes allow for selectively enabling or disabling only certain grouping operations.
The default value is true.
final
Property Value
Whether grouping operations are supported by this input mode.
Examples
The following example shows how to enable grouping operations on the
GraphEditorInputMode together with some detail settings:// first and foremost: enable grouping operations at all
geim.allowGroupingOperations = true
// support grouping but not ungrouping the currently selected nodes
geim.allowGroupSelection = true
geim.allowUngroupSelection = false
// forbid adjusting the size with Ctrl-Shift-G
geim.allowAdjustGroupNodeSize = false
// allow adding nodes to other group nodes by moving
geim.allowReparentNodes = true
// also allow to add nodes to non-group nodes, transforming these into groups
geim.allowReparentToNonGroupNodes = trueSee Also
Developer's Guide
API
- allowGroupSelection, allowUngroupSelection, allowAdjustGroupNodeSize, allowReparentNodes
Gets or sets a value determining whether the GROUP_SELECTION command should be handled.
Gets or sets a value determining whether the GROUP_SELECTION command should be handled.
This setting has no effect if grouping operations are generally disallowed by setting allowGroupingOperations to false.
The default value is true.
final
Examples
The following example shows how to configure the grouping support on the
GraphEditorInputMode. Note that general grouping support has to be enabled explicitly with allowGroupingOperations:// first and foremost: enable grouping operations at all
geim.allowGroupingOperations = true
// support grouping but not ungrouping the currently selected nodes
geim.allowGroupSelection = true
geim.allowUngroupSelection = false
// forbid adjusting the size with Ctrl-Shift-G
geim.allowAdjustGroupNodeSize = false
// allow adding nodes to other group nodes by moving
geim.allowReparentNodes = true
// also allow to add nodes to non-group nodes, transforming these into groups
geim.allowReparentToNonGroupNodes = trueSee Also
Developer's Guide
API
- allowGroupingOperations, groupSelection
Gets or sets a value determining whether the PASTE command should be handled.
Gets or sets a value determining whether the PASTE command should be handled.
This setting has no effect if clipboard operations are generally disallowed by setting allowClipboardOperations to false.
The default value is true.
final
Examples
mode.allowClipboardOperations = true
mode.allowDuplicate = true
mode.allowPaste = trueSee Also
Developer's Guide
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.
final
Examples
The following example shows how to configure the grouping support on the
GraphEditorInputMode. Note that general grouping support has to be enabled explicitly with allowGroupingOperations:// first and foremost: enable grouping operations at all
geim.allowGroupingOperations = true
// support grouping but not ungrouping the currently selected nodes
geim.allowGroupSelection = true
geim.allowUngroupSelection = false
// forbid adjusting the size with Ctrl-Shift-G
geim.allowAdjustGroupNodeSize = false
// allow adding nodes to other group nodes by moving
geim.allowReparentNodes = true
// also allow to add nodes to non-group nodes, transforming these into groups
geim.allowReparentToNonGroupNodes = trueSee Also
Developer's Guide
API
- reparentNodeHandler
Gets or sets a value indicating whether moving nodes into non-group nodes is allowed to convert them into group nodes.
Gets or sets a value indicating whether moving nodes into non-group nodes is allowed to convert them into group nodes.
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.
final
Examples
The following example shows how to configure the grouping support on the
GraphEditorInputMode. Note that general grouping support has to be enabled explicitly with allowGroupingOperations:// first and foremost: enable grouping operations at all
geim.allowGroupingOperations = true
// support grouping but not ungrouping the currently selected nodes
geim.allowGroupSelection = true
geim.allowUngroupSelection = false
// forbid adjusting the size with Ctrl-Shift-G
geim.allowAdjustGroupNodeSize = false
// allow adding nodes to other group nodes by moving
geim.allowReparentNodes = true
// also allow to add nodes to non-group nodes, transforming these into groups
geim.allowReparentToNonGroupNodes = trueSee Also
Gets or sets a value indicating whether the REVERSE_EDGE command should be handled.
Gets or sets a value indicating whether the REVERSE_EDGE command should be handled.
If set to false the methods reverseEdge, reverseEdges, and reverseSelectedEdges do nothing.
The default value is true.
final
Note that even if this feature is enabled, an UndoEngine needs to be available in the parentInputModeContext in order to work.
Setting this property to false effectively disables handling of the commands UNDO and REDO. Note that this property is not respected when calling undo or redo directly.
The default value is true.
final
See Also
Gets or sets a value determining whether the UNGROUP_SELECTION command should be handled.
Gets or sets a value determining whether the UNGROUP_SELECTION command should be handled.
This setting has no effect if grouping operations are generally disallowed by setting allowGroupingOperations to false.
The default value is true.
final
Examples
The following example shows how to configure the grouping support on the
GraphEditorInputMode. Note that general grouping support has to be enabled explicitly with allowGroupingOperations:// first and foremost: enable grouping operations at all
geim.allowGroupingOperations = true
// support grouping but not ungrouping the currently selected nodes
geim.allowGroupSelection = true
geim.allowUngroupSelection = false
// forbid adjusting the size with Ctrl-Shift-G
geim.allowAdjustGroupNodeSize = false
// allow adding nodes to other group nodes by moving
geim.allowReparentNodes = true
// also allow to add nodes to non-group nodes, transforming these into groups
geim.allowReparentToNonGroupNodes = trueSee Also
Developer's Guide
API
- allowGroupingOperations, ungroupSelection
Gets a collection of commands that this input mode will handle.
Gets a collection of commands that this input mode will handle.
This collection can be modified by removing commands to prevent the input mode from handling them. Previously removed commands can also be re-added again to enable them again. However, the input mode will never handle commands that weren't in the initial collection. Adding those will do nothing.
readonlyfinal
Defined in
GraphInputMode.availableCommandsGets or sets which types of items should be reported through the item click events.
Gets or sets which types of items should be reported through the item click events.
This also affects taps.
The default is ALL.
conversionfinal
Examples
mode.clickableItems = GraphItemTypes.NODE | GraphItemTypes.EDGESee Also
Defined in
GraphInputMode.clickableItemsGets or sets a predicate that is queried to determine whether an item can be clicked.
Gets or sets a predicate that is queried to determine whether an item can be clicked.
The default value returns the result of the clickableItems property for the given item.
final
See Also
Defined in
GraphInputMode.clickablePredicateGets or sets the order of the types of items that should be used to determine what item has been clicked or tapped.
Gets or sets the order of the types of items that should be used to determine what item has been clicked or tapped.
Change this field to adjust which items will be selected if there are multiple items at a given location. The default order is the Z-Order but with a prioritization for elements behind labels. shouldSkipHitLabel.
Arrays that contain strings describing the name of GraphItemTypes are converted to an array of GraphItemTypes. For example:
['node', 'edge']
['NODE', 'EDGE']final
Examples
The following example defines the order 1. bends, 2. nodes and edges (with equal priority), 3. labels.
mode.clickHitTestOrder = [
GraphItemTypes.BEND,
GraphItemTypes.NODE | GraphItemTypes.EDGE,
GraphItemTypes.LABEL,
]See Also
Defined in
GraphInputMode.clickHitTestOrderGets or sets the ClickInputMode that is used by this instance to determine clicks.
Gets or sets the ClickInputMode that is used by this instance to determine clicks.
Whenever the mode detects a click, this mode will use the IHitTester from the parentInputModeContext to determine the items being hit. If they match the clickableItems type, the item-clicked event will be triggered. If they are focusable, the item will be set as the current item.
Upon change, the onClickInputModeChanged method will be called.
By default, this input mode has a priority of 20.
final
Examples
mode.clickInputMode.enabled = falseSee Also
Defined in
GraphInputMode.clickInputModeGets or sets which types of items should be selectable by mouse clicks.
Gets or sets which types of items should be selectable by mouse clicks.
The default is ALL.
conversionfinal
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
GraphInputMode.clickSelectableItemsGets or sets a predicate that is queried to determine whether an item should be selected when clicked with the primary mouse button.
Gets or sets a predicate that is queried to determine whether an item should be selected when clicked with the primary mouse button.
The default value returns the result of selectablePredicate and the clickSelectableItems property for the given item.
final
See Also
Defined in
GraphInputMode.clickSelectablePredicateGets or sets the margins to use for updateContentBounds in adjustContentBounds calls.
Gets or sets the margins to use for updateContentBounds in adjustContentBounds calls.
conversionfinal
Gets or sets the ContextMenuInputMode which handles context menus on a CanvasComponent.
Gets or sets the ContextMenuInputMode which handles context menus on a CanvasComponent.
Upon change, the onContextMenuInputModeChanged method will be called.
By default, this input mode has a priority of 220.
final
Examples
mode.contextMenuInputMode.enabled = false// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.contextMenuItems = GraphItemTypes.NODE
mode.addEventListener('populate-item-context-menu', (evt) => {
// Get the node which is handled or null if the item is not a node
const node = evt.item
// Create the context menu items
if (node !== null) {
// Create a menu item to delete the node
// Show the menu
evt.contextMenu = [
{ label: 'Delete Item', action: () => graph.remove(node) },
]
}
})Defined in
GraphInputMode.contextMenuInputModeGets or sets the types of items a context menu should be queried for.
Gets or sets the types of items a context menu should be queried for.
conversionfinal
Examples
// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.contextMenuItems = GraphItemTypes.NODE
mode.addEventListener('populate-item-context-menu', (evt) => {
// Get the node which is handled or null if the item is not a node
const node = evt.item
// Create the context menu items
if (node !== null) {
// Create a menu item to delete the node
// Show the menu
evt.contextMenu = [
{ label: 'Delete Item', action: () => graph.remove(node) },
]
}
})Defined in
GraphInputMode.contextMenuItemsGets the installed controller.
Gets the installed controller.
protectedreadonlyfinal
Defined in
MultiplexingInputMode.controllerGets or sets the CreateBendInputMode which handles interactive bend creation on existing edges.
Gets or sets the CreateBendInputMode which handles interactive bend creation on existing edges.
Upon change, the onCreateBendInputModeChanged method will be called.
By default, this input mode has a priority of 130.
final
Examples
mode.createBendInputMode.enabled = falseNote that in order to disable interactive bend creation, one has to disable bend creation during edge creation, too:
// mode is an instance of GraphEditorInputMode
mode.createBendInputMode.enabled = false
mode.createEdgeInputMode.allowCreateBend = 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.moveSelectedItemsInputMode.priority - 1See Also
Developer's Guide
Gets or sets the CreateEdgeInputMode which handles interactive edge creation.
Gets or sets the CreateEdgeInputMode which handles interactive edge creation.
Upon change, the onCreateEdgeInputModeChanged method will be called.
By default, this input mode has a priority of 100.
final
Examples
mode.createEdgeInputMode.enabled = falseSee Also
- An overview of this input mode is given in the section Creating Edges. Additionally, customization of edge creation is discussed in section Customizing User Interaction: Creating Edges .
Developer's Guide
Gets or sets which types of items should be selected after creation.
Gets or sets which types of items should be selected after creation.
This property only affects the selection of newly created items of type NODE, EDGE, NODE_LABEL and EDGE_LABEL. Bends and group nodes are always being selected after creation. The default is NONE.
conversionfinal
Examples
mode.creationSelectableItems = GraphItemTypes.NODE | GraphItemTypes.EDGESee Also
Gets or sets the event recognizer that determines if a click or tap should cycle through all the items that are currently under the mouse cursor.
Gets or sets the event recognizer that determines if a click or tap should cycle through all the items that are currently under the mouse cursor.
If the recognizer determines that the user wanted to use the cyclic click selection behavior, the hitTester will be queried for the given item and previously reported items will be ignored. E.g. if multiple nodes are overlapping each other, clicking on them will report the first item for the first click, the second one for the second click and so on. If all elements have been reported previously, the first one is going to be reported again. If the order of the elements at the clicked location changes, the cyclic selection is restarted anew.
The default is ALT_IS_DOWN.
final
Property Value
An event recognizer which determines that the user wants to use the cyclic click selection behavior.
Sample Graphs
ShownSetting: Alt pressed / cyclic selection recognizer returns true: repeated clicking at a location cycles through the elements at that location (the X).
Defined in
GraphInputMode.cyclicSelectionRecognizerGets or sets the cursor to use whenever no child mode prefers a different cursor.
Gets or sets the cursor to use whenever no child mode prefers a different cursor.
The default is
nullconversionfinal
See Also
Developer's Guide
API
- adjustCursor
Defined in
MultiplexingInputMode.defaultCursorGets or sets which types of items may be deleted using the deleteSelection action.
Gets or sets which types of items may be deleted using the deleteSelection action.
The default is ALL.
conversionfinal
Examples
mode.deletableItems = GraphItemTypes.NODE | GraphItemTypes.EDGESee Also
Developer's Guide
API
- deletablePredicate
Gets or sets a predicate that is queried to determine whether an IModelItem can be deleted or not.
Gets or sets a predicate that is queried to determine whether an IModelItem can be deleted or not.
The default value returns the result of the deletableItems property for the given item.
final
Examples
In the following example items are only deletable if their tag is the string "I am deletable":
mode.selectablePredicate = (item: IModelItem): boolean =>
item.tag === 'I am selectable'See Also
Developer's Guide
Gets or sets the event recognizer that determines if a click or tap should select the item that is currently visible under the pointer cursor, without giving more important items higher priority.
Gets or sets the event recognizer that determines if a click or tap should select the item that is currently visible under the pointer cursor, without giving more important items higher priority.
If the recognizer determines that the user wanted to use the detail clicking behavior, the hitTester will be queried for the given item and the first item that is returned will be considered a hit. Otherwise, all hit items are examined and are prioritized by item type. E.g. by default clicking on a node will select the node, even if there is a node label which has been clicked at the same point. If detail selection is recognized, the label will be selected.
The default is SHIFT_IS_DOWN.
final
Property Value
An event recognizer which determines that the user wants to use the detail clicking behavior.
Examples
mode.detailSelectionRecognizer = EventRecognizers.SHIFT_IS_DOWNSample Graphs
ShownSetting: No Shift / detail selection recognizer returns false: click on the label selects the higher prioritized node.
Defined in
GraphInputMode.detailSelectionRecognizerGets or sets a predicate that is queried to determine whether an item can be double clicked.
Gets or sets a predicate that is queried to determine whether an item can be double clicked.
The default value returns the result of the clickablePredicate property for the given item.
final
See Also
Defined in
GraphInputMode.doubleClickablePredicateGets or sets the order of the types of items that should be used to determine what item has been double-clicked or double-tapped.
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.
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']final
Examples
The following example defines the order 1. bends, 2. nodes and edges (with equal priority), 3. labels.
mode.doubleClickHitTestOrder = [
GraphItemTypes.BEND,
GraphItemTypes.NODE | GraphItemTypes.EDGE,
GraphItemTypes.LABEL,
]See Also
Defined in
GraphInputMode.doubleClickHitTestOrderGets or sets the EditLabelInputMode which handles label editing.
Gets or sets the EditLabelInputMode which handles label editing.
Upon change, the onEditLabelInputModeChanged method will be called.
By default, this input mode has a priority of 500.
final
Examples
mode.editLabelInputMode.enabled = falseSee Also
Developer's Guide
Gets or sets a predicate that is queried to determine whether the given label or a label owned by the given owner should be edited in response to a EDIT_LABEL command.
Gets or sets a predicate that is queried to determine whether the given label or a label owned by the given owner should be edited in response to a EDIT_LABEL command.
The default value returns the result of the labelEditableItems property for the given item.
final
Examples
In the following example, labels can only be edited if their tag or their owner's tag is the string "I am editable":
mode.editLabelPredicate = (item) => item.tag == 'I am editable'See Also
Developer's Guide
Clients can use this property to disable or reenable this instance. This will set the enabled property of the installed controller so a disabled instance should never try to acquire the input mutex.
Defined in
MultiplexingInputMode.enabledThe 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.
final
Defined in
MultiplexingInputMode.exclusiveGets or sets the items that can be given focus via the setCurrentItem method.
Gets or sets the items that can be given focus via the setCurrentItem method.
The focusable items. The default is NODE.
conversionfinal
Examples
mode.focusableItems = GraphItemTypes.NODE | GraphItemTypes.EDGEDefined in
GraphInputMode.focusableItemsGets or sets a predicate that is queried to determine whether an item should be set to the current item.
Gets or sets a predicate that is queried to determine whether an item should be set to the current item.
The default value returns the result of the focusableItems property for the given item. It also honors the ignoreVoidStyles property.
final
See Also
Defined in
GraphInputMode.focusablePredicateGets the graph instance from the parentInputModeContext.
Gets the graph instance from the parentInputModeContext.
Gets the graphComponent instance this mode is working on or null.
Gets the graphComponent instance this mode is working on or
null.This property is set when this mode is installed in a graphComponent.
readonlyfinal
Gets the graph selection from the parentInputModeContext.
Gets the graph selection from the parentInputModeContext.
readonly
Defined in
GraphInputMode.graphSelectionGets or sets the HandleInputMode as child input mode.
Gets or sets the HandleInputMode as child input mode.
Upon change, the onHandleInputModeChanged method will be called.
By default, this input mode has a priority of 10.
final
Examples
mode.handleInputMode.enabled = falsemode.handleInputMode.addEventListener('drag-finished', () => {
for (const item of mode.handleInputMode.affectedItems) {
// these items have been moved
}
})Gets or sets the hitTester property.
Gets or sets the hitTester property.
The implementation will be queried by findItems to find IModelItems at a given location, e.g. if the user clicks on the canvas.
final
Defined in
GraphInputMode.hitTesterVoid styles are styles which render their styled elements invisible. These are VOID_NODE_STYLE, VOID_EDGE_STYLE, VOID_LABEL_STYLE, and VOID_PORT_STYLE. Typically, one does not want to interact with these elements, either. The value of this property is considered by selectablePredicate and focusablePredicate. Note that even if this property is set to
false the invisible elements are not selectable by mouse clicks or marquee selection since their hit testable always returns false.final
Property Value
true if void styles should be ignored for selection and focus; false otherwise. Default is true.Defined in
GraphInputMode.ignoreVoidStylesGets or sets the ItemHoverInputMode that is provided by this instance to detect when the cursor hovers over a graph item.
Gets or sets the ItemHoverInputMode that is provided by this instance to detect when the cursor hovers over a graph item.
Note that initially the hoverItems property is set to NONE, which effectively disables the functionality of the mode initially. In order to get the mode to fire events, the property should be set to a corresponding value.
If the backing field has not yet been initialized upon first access, a new instance will be assigned. Upon change, onItemHoverInputModeChanged will be called.
By default, this input mode has a priority of 200.
final
Examples
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
// handle changes on the hovered items
mode.itemHoverInputMode.addEventListener(
'hovered-item-changed',
(evt) => {
const oldItem = evt.oldItem
// e.g. remove the highlight from oldItem here
const newItem = evt.item
// e.g. add a highlight to newItem here
},
)Defined in
GraphInputMode.itemHoverInputModeGets or sets the KeyboardInputMode associated with this instance.
Gets or sets the KeyboardInputMode associated with this instance.
By default, this input mode has a priority of
0.final
Property Value
The keyboardInputMode.
Examples
mode.keyboardInputMode.enabled = false// Execute the command if the Insert key is pressed
graphEditorInputMode.keyboardInputMode.addKeyBinding(
'Insert',
ModifierKeys.NONE,
() => {
graphEditorInputMode.createNode(
graphEditorInputMode.graphComponent!.viewport.center,
)
},
)Defined in
GraphInputMode.keyboardInputModeGets or sets the LabelDropInputMode that is responsible for handling drag and drop operations of labels onto the graphComponent.
Gets or sets the LabelDropInputMode that is responsible for handling drag and drop operations of labels onto the graphComponent.
The mode by default is disabled and needs to be enabled to work, first. Upon change the onLabelDropInputModeChanged method will be called.
By default, this input mode has a priority of 310.
final
Examples
mode.labelDropInputMode.enabled = falseThe default is LABEL_OWNER|LABEL, which allows for editing the labels of ILabelOwners, and existing ILabels.
conversionfinal
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
Developer's Guide
API
- editLabelPredicate
Gets or sets the LassoSelectionInputMode which handles the selection of multiple elements by drawing a polygon around them.
Gets or sets the LassoSelectionInputMode which handles the selection of multiple elements by drawing a polygon around them.
Upon change, the onLassoSelectionInputModeChanged method will be called.
The lassoSelectionInputMode respects the selectableItems and the marqueeSelectableItems used by marqueeSelectablePredicate.
By default, this input mode has a priority of 150 and is disabled.
final
Defined in
GraphInputMode.lassoSelectionInputModeGets or sets which types of items should be selected during marquee selections or lasso selection.
Gets or sets which types of items should be selected during marquee selections or lasso selection.
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
GraphInputMode.marqueeSelectableItemsThe default value returns the result of the marqueeSelectableItems property for the given item and takes selectablePredicate into account.
final
See Also
Gets or sets the MarqueeSelectionInputMode which handles the selection of multiple elements by drawing a rectangle around them.
Gets or sets the MarqueeSelectionInputMode which handles the selection of multiple elements by drawing a rectangle around them.
Upon change, the onMarqueeSelectionInputModeChanged method will be called.
The marqueeSelectionInputMode respects the selectableItems and the marqueeSelectableItems used by marqueeSelectablePredicate.
By default, this input mode has a priority of 160.
For GraphViewerInputMode, the default values of beginRecognizer and subtractSelectionRecognizer conflict, so in this case you will usually want to change one of these recognizers.
final
Examples
mode.marqueeSelectionInputMode.enabled = falseDefined in
GraphInputMode.marqueeSelectionInputModeGets or sets which types of items should be movable using the moveSelectedItemsInputMode.
Gets or sets which types of items should be movable using the moveSelectedItemsInputMode.
The default is ALL. Note that depending on the setting of movableUnselectedItems and whether moveUnselectedItemsInputMode is enabled, in order to prevent the user from moving items, the movableUnselectedItems should also be adjusted accordingly.
conversionfinal
Examples
mode.movableSelectedItems = GraphItemTypes.NODE | GraphItemTypes.EDGESee Also
Developer's Guide
API
- movableSelectedItemsPredicate
Gets or sets a predicate that is queried to determine whether moving an item is allowed.
Gets or sets a predicate that is queried to determine whether moving an item is allowed.
This predicate determines whether an item can be moved by the moveSelectedItemsInputMode.
The default value returns the result of the movableSelectedItems property for the given item.
final
See Also
Developer's Guide
API
- movableUnselectedItemsPredicate, movableSelectedItems, moveSelectedItemsInputMode
Gets or sets which types of items should be movable using the moveUnselectedItemsInputMode.
Gets or sets which types of items should be movable using the moveUnselectedItemsInputMode.
The default is ALL.
conversionfinal
Examples
mode.movableSelectedItems = GraphItemTypes.NODE | GraphItemTypes.EDGESee Also
Developer's Guide
API
- movableUnselectedItemsPredicate
Gets or sets a predicate that is queried to determine whether moving an item is allowed when it is not selected.
Gets or sets a predicate that is queried to determine whether moving an item is allowed when it is not selected.
This predicate determines whether an item can be moved by moveUnselectedItemsInputMode.
The default value returns the result of the movableUnselectedItems property for the given item.
final
See Also
Developer's Guide
API
- movableUnselectedItems, moveUnselectedItemsInputMode
Gets or sets the MoveInputMode as child mode.
Gets or sets the MoveInputMode as child mode.
Upon change, the onMoveSelectedItemsInputModeChanged method will be called. The newly created input mode is configured to handle selected items.
The moveSelectedItemsInputMode by default only handles selected items. The moveUnselectedItemsInputMode by default handles unselected items, too.
The moveSelectedItemsInputMode respects movableSelectedItems and method movableSelectedItemsPredicate.
By default, this input mode has a priority of 110.
final
Examples
mode.moveSelectedItemsInputMode.enabled = falseIf one needs to execute some code after some items have been moved by the MoveInputMode, he can register a handler to its drag-finished event. The moved items can be retrieved from the affectedItems property:
mode.moveSelectedItemsInputMode.addEventListener('drag-finished', () => {
for (const item of mode.moveSelectedItemsInputMode.affectedItems) {
// these items have been moved
}
})See Also
Developer's Guide
API
- movableSelectedItemsPredicate, movableSelectedItems, moveUnselectedItemsInputMode
Gets or sets the MoveInputMode which handles unselected graph items.
Gets or sets the MoveInputMode which handles unselected graph items.
Upon change, the onMoveUnselectedItemsInputModeChanged method will be called.
The moveUnselectedItemsInputMode respects movableUnselectedItems and movableUnselectedItemsPredicate.
By default, this input mode has a priority of 120 and is enabled. Also, its beginRecognizerTouch property is configured to only start when the user holds the touch device for a short amount of time to initiate the gesture of moving elements that are not selected.
final
Examples
mode.moveUnselectedItemsInputMode.enabled = truemode.moveSelectedItemsInputMode.enabled = false
// Enable the move input mode for unselected items
const moveUnselectedItemsInputMode = mode.moveUnselectedItemsInputMode
moveUnselectedItemsInputMode.enabled = true
// Use a modifier recognizer for shift key not held down.
const defaultPressedRecognizer =
moveUnselectedItemsInputMode.beginRecognizer
moveUnselectedItemsInputMode.beginRecognizer = (evt, sender) =>
defaultPressedRecognizer(evt, sender) &&
!EventRecognizers.SHIFT_IS_DOWN(evt, sender)
const defaultHoverRecognizer =
moveUnselectedItemsInputMode.hoverRecognizer
moveUnselectedItemsInputMode.hoverRecognizer = (evt, sender) =>
defaultHoverRecognizer(evt, sender) &&
!EventRecognizers.SHIFT_IS_DOWN(evt, sender)
// Set a higher priority than CreateEdgeInputMode
moveUnselectedItemsInputMode.priority =
mode.createEdgeInputMode.priority - 1See Also
Developer's Guide
API
- movableUnselectedItemsPredicate
Gets or sets the MoveViewportInputMode associated with this instance.
Gets or sets the MoveViewportInputMode associated with this instance.
Upon change, the onMoveViewportInputModeChanged method will be called.
By default, this input mode has a priority of 190.
final
Examples
mode.moveViewportInputMode.enabled = falseDefined in
GraphInputMode.moveViewportInputModeGets or sets the event recognizer that determines if a click or tap is deemed a multi-selection gesture.
Gets or sets the event recognizer that determines if a click or tap is deemed a multi-selection gesture.
If the multiSelectionRecognizer returns true for the current gesture, the element which is selected with that gesture will be added to the current selection. Otherwise, the selection will be cleared before adding the newly selected element.
The default detects the current system and delegates either to META_IS_DOWN (macOS) or CTRL_IS_DOWN (other systems).
final
Defined in
GraphInputMode.multiSelectionRecognizerGets the IInputMode that currently owns the mutex.
Gets the IInputMode that currently owns the mutex.
readonlyfinal
Property Value
The IInputMode that currently owns the mutex or
null.Defined in
MultiplexingInputMode.mutexOwnerUpon change the onNavigationInputModeChanged method will be called.
By default, this input mode has a priority of 210.
final
Examples
mode.navigationInputMode.enabled = falseThe navigationInputMode supports e.g. opening and closing group nodes. These actions can be configured in details:
// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
// enable expanding and collapsing group nodes
mode.navigationInputMode.allowCollapseGroup = true
mode.navigationInputMode.allowExpandGroup = true
// do not fit the content after expand/collapse
mode.navigationInputMode.fitContentAfterGroupActions = false
// expand/collapse group nodes in a way that their
// top right corner stays at its current coordinates
mode.navigationInputMode.autoGroupNodeAlignmentPolicy =
NodeAlignmentPolicy.TOP_RIGHTIt also reports when groups are opened or collapsed interactively by raising the following events:
// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.navigationInputMode.addEventListener('group-expanding', (evt) => {
const node = evt.item
// do something with the node before it will be expanded
})
mode.navigationInputMode.addEventListener('group-expanded', (evt) => {
const node = evt.item
// do something with the node after it has been expanded
})
mode.navigationInputMode.addEventListener('group-collapsing', () => {
/* same for collapse operations */
})
mode.navigationInputMode.addEventListener('group-collapsed', () => {
/* same for collapse operations */
})Defined in
GraphInputMode.navigationInputModeGets or sets the callback that is responsible for creating a new node, for instance, in response to a mouse or stylus click or touch tap.
Gets or sets the callback that is responsible for creating a new node, for instance, in response to a mouse or stylus click or touch tap.
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.
final
Examples
// set a custom node creator which creates a label on the new node
graphEditorInputMode.nodeCreator = (
context: IInputModeContext,
graph: IGraph,
location: Point,
parent: INode | null,
): INode | null | Promise<INode | null> => {
// create a node at the location with the given parent and the default size
const node = graph.createNode(
parent,
new Rect(location, graph.nodeDefaults.size),
)
// add a label
graph.addLabel(node, 'A new node')
// return the new node
return node
}See Also
Developer's Guide
API
- createNode
Gets or sets the NodeDropInputMode that is responsible for handling drag and drop operations of nodes onto the graphComponent.
Gets or sets the NodeDropInputMode that is responsible for handling drag and drop operations of nodes onto the graphComponent.
The mode by default is disabled and needs to be enabled to work, first. Upon change the onNodeDropInputModeChanged method will be called.
By default, this input mode has a priority of 300.
final
Examples
mode.nodeDropInputMode.enabled = falseGets or sets the policy that controls whether removing bends from an orthogonal edge will keep the edge orthogonal.
Gets or sets the policy that controls whether removing bends from an orthogonal edge will keep the edge orthogonal.
By default this feature is enabled automatically if an OrthogonalEdgeEditingContext is set. (Default is AUTO).
conversionfinal
Property Value
The policy which determines whether removing bends from an orthogonal edge will keep the edge orthogonal.
See Also
Developer's Guide
API
- orthogonalEdgeEditingContext
Gets or sets the orthogonal edge editing context.
Gets or sets the orthogonal edge editing context.
Orthogonal edge editing is enabled by default but only used for edges that provide an IOrthogonalEdgeHelper in their context.
For an edge using a PolylineEdgeStyle, it is sufficient to enable its orthogonalEditing property. Alternatively, the fallbackEdgeHelperProvider can be set to an instance supporting orthogonal edge editing that is then used for all edges providing no IOrthogonalEdgeHelper.
final
Property Value
The orthogonal edge editing context.
Examples
mode.orthogonalEdgeEditingContext.fallbackEdgeHelperProvider = (edge) =>
new OrthogonalEdgeHelper(edge)Related Programming Samples
- Orthogonal Edge Editing
- Shows how to enable interactive orthogonal edge editing.
See Also
Developer's Guide
Demos
- Shows how to enable interactive orthogonal edge editing.
Retrieves the IInputModeContext this mode has been installed in.
Retrieves the IInputModeContext this mode has been installed in.
The value will be
null if this mode is currently not installed. Use createInputModeContext to obtain a context that has this IInputMode as the inputMode.protectedreadonlyfinal
Gets or sets which types of items should be selected after paste or duplicateSelection.
Gets or sets which types of items should be selected after paste or duplicateSelection.
The default is ALL.
conversionfinal
Examples
mode.pasteSelectableItems = GraphItemTypes.NODE | GraphItemTypes.BENDSee Also
Developer's Guide
API
- pasteSelectablePredicate, smartPasteSelection, setSelected
Gets or sets a predicate that is queried to determine whether an item should be selected after paste or duplicateSelection.
Gets or sets a predicate that is queried to determine whether an item should be selected after paste or duplicateSelection.
The default value returns the result of the pasteSelectableItems property for the given item.
final
See Also
Gets or sets a predicate that is queried to determine whether a context menu should be shown for an item.
Gets or sets a predicate that is queried to determine whether a context menu should be shown for an item.
The default value returns the result of the contextMenuItems property for the given item.
final
See Also
Gets or sets the PortDropInputMode that is responsible for handling drag and drop operations of ports onto the graphComponent.
Gets or sets the PortDropInputMode that is responsible for handling drag and drop operations of ports onto the graphComponent.
The mode by default is disabled and needs to be enabled to work, first. Upon change, the onPortDropInputModeChanged method will be called.
By default, this input mode has a priority of 320.
final
Examples
mode.portDropInputMode.enabled = falseThe priority will influence the order in which the modes will be installed into the CanvasComponent. The lower the priority value, the earlier it will be installed. If two modes are using the same priority value, the first one to be registered will be installed earlier.
final
Defined in
MultiplexingInputMode.priorityGets or sets a predicate that is queried to determine whether a tool tip should be queried for an item.
Gets or sets a predicate that is queried to determine whether a tool tip should be queried for an item.
The default value returns the result of the toolTipItems property for the given item.
final
See Also
Defined in
GraphInputMode.queryToolTipPredicateGets or sets the IReparentNodeHandler that is used for moving nodes out of group nodes or into other group nodes.
Gets or sets the IReparentNodeHandler that is used for moving nodes out of group nodes or into other group nodes.
This setting has no effect if reparenting nodes is generally disallowed by setting allowReparentNodes to false.
Child input modes will use this IReparentNodeHandler as well, since it is added to childInputModeContextLookup.
Upon changes, the onReparentNodeHandlerChanged method will be called.
final
See Also
Developer's Guide
API
- allowReparentNodes, ReparentNodeHandler
Gets or sets a predicate that is queried to determine whether an edge should be reversed by reverseEdge, reverseEdges, or reverseEdges.
Gets or sets a predicate that is queried to determine whether an edge should be reversed by reverseEdge, reverseEdges, or reverseEdges.
The default value returns the value of allowReverseEdge.
final
Gets or sets which types of items should be selectable at all.
Gets or sets which types of items should be selectable at all.
The default is ALL.
conversionfinal
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
API
- setSelected
Defined in
GraphInputMode.selectableItemsGets or sets a predicate that is queried to determine whether a given IModelItem is selectable.
Gets or sets a predicate that is queried to determine whether a given IModelItem is selectable.
This allows to further restrict which items are selectable, compared to selectableItems. The default value uses and honors the selectableItems and ignoreVoidStyles. This property is by default also used by clickSelectablePredicate and marqueeSelectablePredicate, so turning selection off here also turns it off in other places.
final
Examples
In the following example items are only selectable if their tag is the string "I am selectable":
mode.selectablePredicate = (item: IModelItem): boolean =>
item.tag === 'I am selectable'Defined in
GraphInputMode.selectablePredicateGets or sets a predicate that is queried to determine whether an item should be selected after creation.
Gets or sets a predicate that is queried to determine whether an item should be selected after creation.
The default value returns the result of the creationSelectableItems property for the given item.
final
Gets or sets which types of items should have their IHandles shown.
Gets or sets which types of items should have their IHandles shown.
The default is ALL.
conversionfinal
Examples
mode.showHandleItems = GraphItemTypes.NODE | GraphItemTypes.EDGESee Also
Developer's Guide
API
- showHandlePredicate
Gets or sets a predicate that is queried to determine whether to show the handles for the given item.
Gets or sets a predicate that is queried to determine whether to show the handles for the given item.
The default value returns the result of the showHandleItems property for the given item.
final
See Also
Gets or sets a value that specifies whether during hit testing, labels should be skipped at all.
Gets or sets a value that specifies whether during hit testing, labels should be skipped at all.
Since typically users don't want to click a label when it covers a node or edge, but they typically want to click the label, but otherwise the Z-order should be considered, this setting will determine whether shouldSkipHitLabel should be queried during hit test enumeration if labels are hit before other elements.
This is only applicable when the respective clickHitTestOrder or doubleClickHitTestOrder is not explicit about the order.
This setting will influence the ILookup behavior of the IInputModeContext via childInputModeContextLookup so that the IHitTester interface swaps the order of the hits to report skipped labels only after the items behind the labels.
By default, this feature is enabled.
final
Defined in
GraphInputMode.skipHitLabelsGets 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.
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.
Disabling this feature will select all pasteSelectableItems after a paste or duplicate operation.
The default is true.
final
Examples
mode.smartPasteSelection = falseSee Also
Gets or sets the GraphSnapContext instance that handles interactive snapping of elements during drag operations like movements.
Gets or sets the GraphSnapContext instance that handles interactive snapping of elements during drag operations like movements.
To enable snapping set the enabled property to true.
Setting this property to a GraphSnapContext which is disabled will disable snapping. Child modes will use the instance from their respective IInputModeContexts, if any are set.
Upon change the onSnapContextChanged method is called, which will as a side effect configure the snap context to display the SnapResults in the CanvasComponent.
Default is null.
final
Examples
mode.snapContext = new GraphSnapContext()See Also
Developer's Guide
Gets or sets the toolTipInputMode which is responsible for displaying Tooltips on a CanvasComponent.
Gets or sets the toolTipInputMode which is responsible for displaying Tooltips on a CanvasComponent.
Upon change, the onToolTipInputModeChanged method will be called.
By default, this input mode has a priority of 400.
final
Examples
mode.toolTipInputMode.enabled = false// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.toolTipItems = GraphItemTypes.NODE
// register a listener
mode.addEventListener('query-item-tool-tip', (evt) => {
if (evt.handled) {
// A tooltip has already been assigned -> nothing to do.
return
}
// We can safely cast here because we set ToolTipItems to only Node.
const hitNode = evt.item as INode
if (hitNode.labels.size > 0) {
// Show the text of the first label as tooltip.
evt.toolTip = hitNode.labels.get(0).text
// Indicate that the tooltip content has been set.
evt.handled = true
}
})Defined in
GraphInputMode.toolTipInputModeGets or sets the types of the items that should be queried for a tooltip.
Gets or sets the types of the items that should be queried for a tooltip.
conversionfinal
Examples
// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.toolTipItems = GraphItemTypes.NODE
// register a listener
mode.addEventListener('query-item-tool-tip', (evt) => {
if (evt.handled) {
// A tooltip has already been assigned -> nothing to do.
return
}
// We can safely cast here because we set ToolTipItems to only Node.
const hitNode = evt.item as INode
if (hitNode.labels.size > 0) {
// Show the text of the first label as tooltip.
evt.toolTip = hitNode.labels.get(0).text
// Indicate that the tooltip content has been set.
evt.handled = true
}
})Defined in
GraphInputMode.toolTipItemsGets 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.
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.
true if the current item should be used as a fallback, false otherwise.
This applies to the following commands:
Default is false.
final
Property Value
Whether to use the currentItem as a fallback for the commands if no item is provided in the parameter and the current selection is empty.
true if the current item should be used as a fallback, false otherwise.See Also
Developer's Guide
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.
Gets or sets the WaitInputMode that is provided by this instance for those who need to make use of it.
Upon change, the onWaitInputModeChanged method will be called.
By default, this input mode has a priority of -1.
final
Examples
mode.waitInputMode.enabled = falsegraphEditorInputMode.waiting = true
await longRunningAsyncProcess()
graphEditorInputMode.waiting = falseSee Also
API
- waiting
Defined in
GraphInputMode.waitInputModeMethods
Adds the given mode.
Adds the given
mode.The input modes will be ordered according to their priority: Input modes with lower priority will be installed earlier.
Input modes will run exclusively if the exclusive property of their installed controller is set to true. Otherwise they cannot and will not be deactivated if another IInputMode acquires the mutex.
final
Parameters
- mode: IInputMode
- The input mode to add to this mode.
Throws
- Exception ({ name: 'ArgumentError' })
- If the same
modeis 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
MultiplexingInputMode.addThis method is called whenever the content changes and takes the adjustContentBoundsPolicy into account.
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.
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.
This method will set defaultCursor as the current cursor if no other preferredCursor has been specified.
Defined in
MultiplexingInputMode.adjustCursorAdjusts the size of the group nodes in the enumerable.
Adjusts the size of the group nodes in the enumerable.
This action is executed in response to the ADJUST_GROUP_NODE_SIZE if allowAdjustGroupNodeSize is set to
true.protected
Parameters
- nodes: IEnumerable<INode>
- The nodes to adjust their sizes.
Adjusts the size of the selected group nodes.
Adjusts the size of the selected group nodes.
This method delegates to adjustGroupNodeSize with the currently selected nodes.
See Also
Adjusts the node's layout to adhere to possible size constraints.
Adjusts the node's layout to adhere to possible size constraints.
This method will use the INodeSizeConstraintProvider for INode that can be found in their ILookup to make sure they are still valid. The actual work of this method will be delegated to setNodeLayout.
Parameters
- node: INode
- The node to possibly adjust the size of.
Defined in
MultiplexingInputMode.cancelCalled by the child context's lookup method.
Called by the child context's lookup method.
protected
Parameters
- type: Constructor
- The type argument passed to lookup.
Return Value
- any
- The result of the lookup query, or
null.
Clears the selection on the current graphSelection.
Clears the selection on the current graphSelection.
This implementation may be overridden for customizations. All it does is call clear.
Defined in
GraphInputMode.clearSelectionActually performs the click or tap on the given item.
Actually performs the click or tap on the given item.
This will raise the item-left-clicked, item-right-clicked (depending on the button), and item-clicked events. If either event is unhandled by all its event handlers, the item will be selected and focused. Before selection, the current selection will be cleared, unless the multiSelectionRecognizer is triggered.
protected
Parameters
- 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
GraphInputMode.clickClears the selection on click if the click is not recognized by multiSelectionRecognizer.
Clears the selection on click if the click is not recognized by multiSelectionRecognizer.
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.
protected
Parameters
- context: IInputModeContext
- The context where the click appeared.
Return Value
- boolean
- Whether the selection has been cleared by this method.
Defined in
GraphInputMode.clickClearSelectionCreates a node on a pointer click or tap.
Creates a node on a pointer click or tap.
This method is only called if no item has been hit and clickClearSelection returned
false.protected
Parameters
- context: IInputModeContext
- The context of the current input mode.
- location: Point
- The point where the pointer had been clicked.
Return Value
- boolean
trueif a node was successfully created,falseotherwise.
Yields an IInputModeContext for the child modes of this mode.
Yields an IInputModeContext for the child modes of this mode.
This method is called during installation to create a new context for the child modes and can be used by client code to obtain a suitable context object. The parentInputModeContext property is already set when this method is called. lookup calls for the created context will be resolved by this instance's childInputModeContextLookup method.
Return Value
- IInputModeContext
- A new instance that delegates to the parent's context.
Helper method that yields a suitably configured InputModeEventArgs for this input mode.
Helper method that yields a suitably configured InputModeEventArgs for this input mode.
protected
Parameters
- 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.
Return Value
- InputModeEventArgs
- An input mode event argument that is configured for this instance.
Creates a node at the given location.
Creates a node at the given location.
This implementation delegates to the current nodeCreator or simply returns null if there is no such callback or allowCreateNode yields false. Finally, it tries to set the node as the current item.
When the nodeCreator returns a Promise, this mode will wait until it is resolved, thereby blocking any user interaction.
Parameters
- location: Point
- The point where the pointer click or tap has occured.
Return Value
- any
- The newly created node,
null, or aPromiseresolving with a node ornull.
See Also
Developer's Guide
API
- onNodeCreated, setCurrentItem
If the IGraphSelection is non-empty, this implementation triggers the deleting-selection event, possibly a number of deleted-item events, and a final deleteSelection event. Note that deleted-item will not be called for items that are removed implicitly, e.g. if the event is triggered for a node, its labels, ports, and adjacent edges will not be reported separately.
See Also
Developer's Guide
API
- deleting-selection, deleted-item, deleted-selection
Actually performs a double-click on the given item.
Actually performs a double-click on the given item.
This will raise the item-left-double-clicked and item-right-double-clicked (depending on the button), and item-double-clicked events. If neither event was handled, label editing will be started, if allowEditLabelOnDoubleClick is
trueprotected
Parameters
- 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
GraphInputMode.doubleClickInitiates the handleInputMode to drag the given bend.
Initiates the handleInputMode to drag the given bend.
Starts label editing by executing EDIT_LABEL.
Starts label editing by executing EDIT_LABEL.
The method should return whether the request was satisfied.
protected
Parameters
- item: IModelItem
- The item whose label or the label itself that should be edited upon the double click gesture.
Return Value
- boolean
trueiff the request was handled.
See Also
Used as a callback to find the items hit underneath a certain point.
Used as a callback to find the items hit underneath a certain point.
This implementation uses the hitTester to determine the hit items.
Parameters
- 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.
Return Value
- IEnumerable<IModelItem>
- An enumerable over the items that have been found for the location.
Examples
function HandleItemAtLocation(
context: IInputModeContext,
location: Point,
): void {
const graphEditorInputMode = context.lookup(
GraphEditorInputMode,
) as GraphEditorInputMode
const graphItem = graphEditorInputMode
.findItems(location, [GraphItemTypes.NODE | GraphItemTypes.EDGE])
.at(0)
if (graphItem instanceof INode) {
// ... handle node
} else if (graphItem instanceof IEdge) {
// ... handle edge
}
}Defined in
GraphInputMode.findItemsUsed as a callback to find the items hit underneath a certain point.
Used as a callback to find the items hit underneath a certain point.
This implementation uses the hitTester to determine the hit items and also queries the IBendSelectionTester for bends at hit edges, as well as the IPortSelectionTester for ports at hit port owners.
Parameters
- context: IInputModeContext
- The context to use for 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.
Return Value
- IEnumerable<IModelItem>
- An enumerable over the items that have been found for the location.
Examples
function HandleItemAtLocation(
context: IInputModeContext,
location: Point,
): void {
const graphEditorInputMode = context.lookup(
GraphEditorInputMode,
) as GraphEditorInputMode
const graphItem = graphEditorInputMode
.findItems(location, [GraphItemTypes.NODE | GraphItemTypes.EDGE])
.at(0)
if (graphItem instanceof INode) {
// ... handle node
} else if (graphItem instanceof IEdge) {
// ... handle edge
}
}Defined in
GraphInputMode.findItemsReturns a list of all modes managed by this instance sorted by their priority.
Returns a list of all modes managed by this instance sorted by their priority.
final
Return Value
- IList<IInputMode>
- A list of the modes.
Defined in
MultiplexingInputMode.getSortedModesCreates a new group for all of the currently selected items.
Creates a new group for all of the currently selected items.
This method will also clear the selection and select the newly created group node.
The default shortcut for this is Ctrl+G.
Return Value
- INode
- The newly created group node or
null.
See Also
This method will query the IClickListener and check whether it was hit by the click, and if so, will invoke onClicked and return
true.protected
Parameters
- context: IInputModeContext
- The context for the click.
- item: IModelItem
- The item that has been clicked.
- location: Point
- The click location.
Return Value
- boolean
- Whether the action has been invoked and handling should be stopped.
See Also
API
- IClickListener, click
Defined in
GraphInputMode.handleClickListenerThis method should not be invoked by subclasses. This will be done automatically upon first installation of this mode.
This code will be executed only once per instance. The parentInputModeContext property will be null when this code is executed. This method should not be used to install this mode into a specific canvas. Subclasses should always call base.Initialize() first.
protected
See Also
API
- install
Defined in
MultiplexingInputMode.initializeInstalls this mode into the provided context.
Installs this mode into the provided context.
Parameters
- context: IInputModeContext
- The context to install this mode in and retrieve the graph and selection instance from.
- controller: ConcurrencyController
- The ConcurrencyController for this mode.
Overrides
GraphInputMode.installInvalidates the canvas this mode is currently installed in.
Invalidates the canvas this mode is currently installed in.
protected
Defined in
MultiplexingInputMode.invalidatePerforms lasso-selection with the given path.
Performs lasso-selection with the given path.
It delegates directly to the onLassoSelect overload internally.
final
Parameters
- lassoPath: GeneralPath
- The lasso selection path.
- selectionPolicy?: SelectionPolicy
- The policy to use for changing the selection of the elements.
Defined in
GraphInputMode.lassoSelectLowers the visual representations of all selected IModelItems below their current predecessors.
Lowers the visual representations of all selected IModelItems below their current predecessors.
Performs marquee selection with the given rectangle.
Performs marquee selection with the given rectangle.
It delegates directly to the onMarqueeSelect overload internally.
final
Parameters
- marqueeRectangle: Rect
- The selection rectangle.
- selectionPolicy?: SelectionPolicy
- The policy to use for changing the selection of the elements.
Defined in
GraphInputMode.marqueeSelectRaises the canvas-clicked event.
Raises the canvas-clicked event.
This implementation will stop the event propagation as soon as an event handler has set the handled property to
true.protected
Parameters
- evt: ClickEventArgs
- The ClickEventArgs instance that contains the information about the click.
Defined in
GraphInputMode.onCanvasClickedCalled when the clickInputMode property value changes and after initialization of the property.
Called when the clickInputMode property value changes and after initialization of the property.
protected
Parameters
- oldMode: ClickInputMode
- the old value, which may be
nullthe first time - newMode: ClickInputMode
- the new value
Defined in
GraphInputMode.onClickInputModeChangedThis implementation reenables previously disabled concurrent child modes.
protected
This implementation sets the preferredCursor property to
null and releases the mutex if the mutex is currently owned by this instance. Also, all concurrent child modes will be disabled.protected
onContextMenuInputModeChanged
(oldMode: ContextMenuInputMode, newMode: ContextMenuInputMode)protectedCalled when the ContextMenuInputMode property value changes and after initialization of the property.
onContextMenuInputModeChanged
(oldMode: ContextMenuInputMode, newMode: ContextMenuInputMode)protected
Called when the ContextMenuInputMode property value changes and after initialization of the property.
protected
Parameters
- oldMode: ContextMenuInputMode
- the old value, which may be
nullthe first time - newMode: ContextMenuInputMode
- the new value
Called when the createBendInputMode property value changes and after initialization of the property.
Called when the createBendInputMode property value changes and after initialization of the property.
protected
Parameters
- oldMode: CreateBendInputMode
- the old value, which may be
nullthe first time - newMode: CreateBendInputMode
- the new value
Examples
mode.createBendInputMode.enabled = falseCalled as soon as CreateBendInputMode created a new bend.
Called as soon as CreateBendInputMode created a new bend.
This method selects the bend and starts the handleInputMode using the handle for the newly created bend. The bend is created using the hit edge's IBendCreator implementation, as obtained from the edge's lookup and calls dragBend. If the subsequent drag is canceled by the user, this call will remove the bend again.
protected
Parameters
- evt: InputModeItemEventArgs<IBend>
- The InputModeItemEventArgs<IBend> that provides the new bend.
- sender: any
- The element on which the event was triggered.
Called when the createEdgeInputMode property value changes and after initialization of the property.
Called when the createEdgeInputMode property value changes and after initialization of the property.
protected
Parameters
- oldMode: CreateEdgeInputMode
- the old value, which may be
nullthe first time - newMode: CreateEdgeInputMode
- the new value
Raises the deleted-item event.
Raises the deleted-item event.
protected
Parameters
- evt: InputModeItemChangedEventArgs<IModelItem, EventArgs>
- The instance containing the event data.
Raises the deleted-selection event.
Raises the deleted-selection event.
Raises the deleting-selection event.
Raises the deleting-selection event.
protected
Parameters
- 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.
Invoked after an edge's source and/or target ports have been changed as the result of an input gesture.
Dispatches the edge-ports-changed event.
protected
Parameters
Called when the editLabelInputMode property value changes and after initialization of the property.
Called when the editLabelInputMode property value changes and after initialization of the property.
protected
Parameters
- oldMode: EditLabelInputMode
- the old value, which may be
nullthe first time - newMode: EditLabelInputMode
- the new value
onGraphComponentChanged
(oldGraphComponent: GraphComponent, newGraphComponent: GraphComponent)protectedCalled when the graphComponent property changes.
onGraphComponentChanged
(oldGraphComponent: GraphComponent, newGraphComponent: GraphComponent)protected
Called when the graphComponent property changes.
protected
Parameters
- oldGraphComponent: GraphComponent
- The old control.
- newGraphComponent: GraphComponent
- The new control.
Called when the IGraphSelection property changes.
Called when the IGraphSelection property changes.
protected
Parameters
- oldSelection: IGraphSelection
- The old selection instance.
- newSelection: IGraphSelection
- The new selection instance.
Raises the grouped-selection event.
Raises the grouped-selection event.
protected
Parameters
- evt: SelectionEventArgs<IModelItem>
- The SelectionEventArgs<T> instance containing the event data.
Raises the grouping-selection event.
Raises the grouping-selection event.
protected
Parameters
- evt: SelectionEventArgs<IModelItem>
- The SelectionEventArgs<T> instance containing the event data.
Called when the handleInputMode property value changes and after initialization of the property.
Called when the handleInputMode property value changes and after initialization of the property.
protected
Parameters
- oldMode: HandleInputMode
- the old value, which may be
nullthe first time - newMode: HandleInputMode
- the new value
Raises the item-clicked event.
Raises the item-clicked event.
This implementation will stop the event propagation as soon as an event handler has set the handled property to
true.protected
Parameters
- evt: ItemClickedEventArgs<IModelItem>
- The ItemClickedEventArgs<T> instance that contains the item that has been clicked.
Defined in
GraphInputMode.onItemClickedRaises the item-double-clicked event.
Raises the item-double-clicked event.
This implementation will stop the event propagation as soon as an event handler has set the handled property to
true.protected
Parameters
- evt: ItemClickedEventArgs<IModelItem>
- The ItemClickedEventArgs<T> instance that contains the item that has been double-clicked.
Defined in
GraphInputMode.onItemDoubleClickedCalled when the itemHoverInputMode property value changes and after initialization of the property.
Called when the itemHoverInputMode property value changes and after initialization of the property.
protected
Parameters
- oldMode: ItemHoverInputMode
- the old value, which may be
nullthe first time - newMode: ItemHoverInputMode
- the new value
Raises the item-left-clicked event.
Raises the item-left-clicked event.
This implementation will stop the event propagation as soon as an event handler has set the handled property to
true.protected
Parameters
- evt: ItemClickedEventArgs<IModelItem>
- The ItemClickedEventArgs<T> instance that contains the item that has been clicked.
Defined in
GraphInputMode.onItemLeftClickedRaises the item-left-double-clicked event.
Raises the item-left-double-clicked event.
This implementation will stop the event propagation as soon as an event handler has set the handled property to
true.protected
Parameters
- evt: ItemClickedEventArgs<IModelItem>
- The ItemClickedEventArgs<T> instance that contains the item that has been double-clicked.
Defined in
GraphInputMode.onItemLeftDoubleClickedRaises the item-right-clicked event.
Raises the item-right-clicked event.
This implementation will stop the event propagation as soon as an event handler has set the handled property to
true.protected
Parameters
- evt: ItemClickedEventArgs<IModelItem>
- The ItemClickedEventArgs<T> instance that contains the item that has been clicked.
Defined in
GraphInputMode.onItemRightClickedRaises the item-right-double-clicked event.
Raises the item-right-double-clicked event.
This implementation will stop the event propagation as soon as an event handler has set the handled property to
true.protected
Parameters
- evt: ItemClickedEventArgs<IModelItem>
- The ItemClickedEventArgs<T> instance that contains the item that has been double clicked.
Defined in
GraphInputMode.onItemRightDoubleClickedCalled when the keyboardInputMode changes.
Called when the keyboardInputMode changes.
protected
Parameters
- oldMode: KeyboardInputMode
- The old keyboardInputMode.
- newMode: KeyboardInputMode
- The new keyboardInputMode.
Raises the label-added event.
Raises the label-added event.
Propagates editLabelInputMode's label-added event.
protected
Parameters
- evt: InputModeItemEventArgs<ILabel>
- The InputModeItemEventArgs<TModelItem> instance that contains the ILabel that has been added.
Called when the labelDropInputMode property value changes and after initialization of the property.
Called when the labelDropInputMode property value changes and after initialization of the property.
protected
Parameters
- oldMode: LabelDropInputMode
- the old value, which may be
nullthe first time - newMode: LabelDropInputMode
- the new value
Called when the labelDropInputMode's item-created event is triggered.
Called when the labelDropInputMode's item-created event is triggered.
This implementation adjusts the content bounds, triggers the label-added event, and tries to set the newly created node as the current item.
protected
Parameters
- evt: InputModeItemEventArgs<ILabel>
- The event argument instance containing the event data.
- sender: any
- The sender.
Raises the label-edited event.
Raises the label-edited event.
Propagates editLabelInputMode's label-edited event.
protected
Parameters
- evt: InputModeItemEventArgs<ILabel>
- The InputModeItemEventArgs<TModelItem> instance that contains the ILabel that has changed the text.
This method is called internally when either the lassoSelect method is called or the user performs a lasso-selection gesture via lassoSelectionInputMode.
protected
Parameters
- context: IInputModeContext
- The input mode context.
- lassoPath: GeneralPath
- The lasso selection path.
- selectionPolicy: SelectionPolicy
- The policy to use for changing the selection of the elements.
Defined in
GraphInputMode.onLassoSelectonLassoSelectionInputModeChanged
(oldMode: LassoSelectionInputMode, newMode: LassoSelectionInputMode)protectedCalled when the lassoSelectionInputMode property value changes and after initialization of the property.
onLassoSelectionInputModeChanged
(oldMode: LassoSelectionInputMode, newMode: LassoSelectionInputMode)protected
Called when the lassoSelectionInputMode property value changes and after initialization of the property.
protected
Parameters
- oldMode: LassoSelectionInputMode
- the old value, which may be
nullthe first time - newMode: LassoSelectionInputMode
- the new value
This method is called internally when either the marqueeSelect method is called or the user performs a marquee-selection gesture via marqueeSelectionInputMode.
protected
Parameters
- context: IInputModeContext
- The input mode context.
- marqueeRectangle: Rect
- The selection rectangle.
- selectionPolicy: SelectionPolicy
- The policy for changing the selection.
Defined in
GraphInputMode.onMarqueeSelectonMarqueeSelectionInputModeChanged
(oldMode: MarqueeSelectionInputMode, newMode: MarqueeSelectionInputMode)protectedCalled when the marqueeSelectionInputMode property value changes and after initialization of the property.
onMarqueeSelectionInputModeChanged
(oldMode: MarqueeSelectionInputMode, newMode: MarqueeSelectionInputMode)protected
Called when the marqueeSelectionInputMode property value changes and after initialization of the property.
protected
Parameters
- oldMode: MarqueeSelectionInputMode
- the old value, which may be
nullthe first time - newMode: MarqueeSelectionInputMode
- the new value
Called when the moveSelectedItemsInputMode property value changes and after initialization of the property.
Called when the moveSelectedItemsInputMode property value changes and after initialization of the property.
protected
Parameters
- oldMode: MoveInputMode
- the old value, which may be
nullthe first time - newMode: MoveInputMode
- the new value
Called when the moveUnselectedItemsInputMode property value changes and after initialization of the property.
Called when the moveUnselectedItemsInputMode property value changes and after initialization of the property.
protected
Parameters
- oldMode: MoveInputMode
- the old value, which may be
nullthe first time - newMode: MoveInputMode
- the new value
onMoveViewportInputModeChanged
(oldMode: MoveViewportInputMode, newMode: MoveViewportInputMode)protectedCalled when the moveViewportInputMode property value changes and after initialization of the property.
onMoveViewportInputModeChanged
(oldMode: MoveViewportInputMode, newMode: MoveViewportInputMode)protected
Called when the moveViewportInputMode property value changes and after initialization of the property.
protected
Parameters
- oldMode: MoveViewportInputMode
- the old value, which may be
nullthe first time - newMode: MoveViewportInputMode
- the new value
Raises the multi-selection-finished event.
Raises the multi-selection-finished event.
protected
Parameters
- evt: SelectionEventArgs<IModelItem>
- The SelectionEventArgs<IModelItem> that provides the selection.
Defined in
GraphInputMode.onMultiSelectionFinishedRaises the multi-selection-started event.
Raises the multi-selection-started event.
protected
Parameters
- evt: SelectionEventArgs<IModelItem>
- The SelectionEventArgs<IModelItem> that provides the selection.
Defined in
GraphInputMode.onMultiSelectionStartedprotected
Parameters
- oldMode: NavigationInputMode
- the old value, which may be
nullthe first time - newMode: NavigationInputMode
- the new value
Raises the node-created event.
Raises the node-created event.
Note that if allowFolderNodeAsParent is set to
true, the reported node can actually be part of the master graph.protected
Parameters
- evt: InputModeItemEventArgs<INode>
- The InputModeItemEventArgs<TModelItem> instance containing the created node.
Called when the nodeDropInputMode property value changes and after initialization of the property.
Called when the nodeDropInputMode property value changes and after initialization of the property.
protected
Parameters
- oldMode: NodeDropInputMode
- the old value, which may be
nullthe first time - newMode: NodeDropInputMode
- the new value
Called when the nodeDropInputMode's item-created event is triggered.
Called when the nodeDropInputMode's item-created event is triggered.
This implementation adjusts the content bounds, triggers the node-created event, and tries to set the newly created node as the current item.
protected
Parameters
- evt: InputModeItemEventArgs<INode>
- The event argument instance containing the event data.
- sender: any
- The sender.
Raises the node-reparented event.
Raises the node-reparented event.
protected
Parameters
- evt: InputModeItemChangedEventArgs<INode, NodeEventArgs>
- The InputModeItemChangedEventArgs<TItem, TDetail> instance containing the event data. The details are of type NodeEventArgs which provide the old parent in its parent property.
See Also
Raises the populate-item-context-menu event.
Raises the populate-item-context-menu event.
protected
Parameters
- evt: PopulateItemContextMenuEventArgs<IModelItem>
- The PopulateItemContextMenuEventArgs<TModelItem> instance containing the event data.
Defined in
GraphInputMode.onPopulateItemContextMenuRaises the port-added event.
Raises the port-added event.
protected
Parameters
- evt: InputModeItemEventArgs<IPort>
- The InputModeItemEventArgs<TModelItem> instance that contains the IPort that has been added.
Called when the portDropInputMode property value changes and after initialization of the property.
Called when the portDropInputMode property value changes and after initialization of the property.
protected
Parameters
- oldMode: PortDropInputMode
- the old value, which may be
nullthe first time - newMode: PortDropInputMode
- the new value
Called when the portDropInputMode's item-created event is triggered.
Called when the portDropInputMode's item-created event is triggered.
This implementation adjusts the content bounds, triggers the port-added event, and tries to set the newly created node as the current item.
protected
Parameters
- evt: InputModeItemEventArgs<IPort>
- The event argument instance containing the event data.
- sender: any
- The sender.
Raises the query-item-tool-tip event.
Raises the query-item-tool-tip event.
protected
Parameters
- evt: QueryItemToolTipEventArgs<IModelItem>
- The QueryItemToolTipEventArgs<TModelItem> instance containing the event data.
Defined in
GraphInputMode.onQueryItemToolTiponReparentNodeHandlerChanged
(oldMode: IReparentNodeHandler, newMode: IReparentNodeHandler)protectedCalled when the reparentNodeHandler property value changes and after initialization of the property.
onReparentNodeHandlerChanged
(oldMode: IReparentNodeHandler, newMode: IReparentNodeHandler)protected
Called when the reparentNodeHandler property value changes and after initialization of the property.
protected
Parameters
- oldMode: IReparentNodeHandler
- the old value, which may be
nullthe first time - newMode: IReparentNodeHandler
- the new value
Called when the snapContext property context changed.
Called when the snapContext property context changed.
protected
Parameters
- oldContext: GraphSnapContext
- The old snap context.
- newContext: GraphSnapContext
- The new snap context.
Called when the toolTipInputMode property value changes and after initialization of the property.
Called when the toolTipInputMode property value changes and after initialization of the property.
protected
Parameters
- oldMode: ToolTipInputMode
- the old value, which may be
nullthe first time - newMode: ToolTipInputMode
- the new value
Defined in
GraphInputMode.onToolTipInputModeChangedRaises the ungrouped-selection event.
Raises the ungrouped-selection event.
protected
Parameters
- evt: SelectionEventArgs<IModelItem>
- The SelectionEventArgs<T> instance containing the event data.
Raises the ungrouping-selection event.
Raises the ungrouping-selection event.
protected
Parameters
- evt: SelectionEventArgs<IModelItem>
- The SelectionEventArgs<T> instance containing the event data.
Called when the waitInputMode property value changes and after initialization of the property.
Called when the waitInputMode property value changes and after initialization of the property.
protected
Parameters
- oldMode: WaitInputMode
- the old value, which may be
nullthe first time - newMode: WaitInputMode
- the new value
Defined in
GraphInputMode.onWaitInputModeChangedPastes the current clipboard contents at the given location.
Pastes the current clipboard contents at the given location.
The location is at the center of the bounds of the items that are pasted. This method reconfigures pasteOffset and calls paste.
Parameters
- location: Point
- The location at which the center of the clipboard's contents should be positioned.
Examples
mode.pasteAtLocation(mode.graphComponent!.lastEventLocation)See Also
Developer's Guide
Raises the visual representations of all selected IModelItems above their current successors.
Raises the visual representations of all selected IModelItems above their current successors.
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.
Removes the given mode from this compound mode.
This causes a query to all implementations of IHandle, IHandleProvider, and IReshapeHandleProvider from the lookupsee> of selected items.
This method is called when the showHandleItems property is changed.
Throws
- Exception ({ name: 'InvalidOperationError' })
- When the handleInputMode is active.
See Also
Developer's Guide
Reverses the given edges.
Reverses the given edges.
The edge will only be reversed if allowReverseEdge is set to
true and reversableEdgePredicate returns true for the edge. An edge-ports-changed event will be dispatched after the edge has been reversed.Parameters
Reverses the given edges.
Reverses the given edges.
The edges will only be reversed if allowReverseEdge is set to true and reversableEdgePredicate returns true for the edge.
For each edge a edge-ports-changed event will be dispatched.
Parameters
- edges: IEnumerable<IEdge>
- The IEdges to reverse.
See Also
API
- REVERSE_EDGE
This implementation invokes reverseEdges providing the selected edges.
The edges will only be reversed if reversableEdgePredicate returns true for each edge.
For each edge an edge-ports-changed event will be dispatched.
By default, this method will be called in response to a Ctrl+A key press recognized by keyboardInputMode.
See Also
Defined in
GraphInputMode.selectAllLowers the visual representations of all selected IModelItems to the back.
Lowers the visual representations of all selected IModelItems to the back.
Raises the visual representations of all selected IModelItems to the front.
Raises the visual representations of all selected IModelItems to the front.
Selects the node and possible bends of self-loop edges.
Selects the node and possible bends of self-loop edges.
This method delegates to setSelected for the node and all adjacent self-loop bends.
Parameters
- node: INode
- The node to select.
See Also
Called by this instance to set the current item on the NavigationInputMode
Called by this instance to set the current item on the NavigationInputMode
Parameters
- item: IModelItem
- The item to set as the new "current" item.
Defined in
GraphInputMode.setCurrentItemThis method differs from a call to setNodeLayout in a number of ways:
- An undo unit is enqueued.
- The node is reshaped interactively using the IReshapeHandler implementation found in its lookup. This enables correctly adjusting e.g. affected orthogonal edges and parent group nodes.
- adjustContentBounds is called.
Parameters
See Also
This method differs from a call to setNodeLayout in a number of ways:
- An undo unit is enqueued.
- The node is moved interactively using the IPositionHandler implementation found in its lookup. This enables correctly adjusting e.g. affected orthogonal edges, children of a group node, and parent group nodes.
- adjustContentBounds is called.
Parameters
See Also
Uses the graphSelection to select the given item.
Uses the graphSelection to select the given item.
Parameters
- item: IModelItem
- The item to set the selection state on.
- selected: boolean
- The new selection state.
Defined in
GraphInputMode.setSelectedCallback function that is used during hit testing, when an ILabel was hit tested before another non-label underneath it was reported.
Callback function that is used during hit testing, when an ILabel was hit tested before another non-label underneath it was reported.
This method can be used to prioritize the hit testing order for items below labels, depending on the label.
This implementation returns false if skipHitLabels is false or if the context's inputMode is not a GraphInputMode or MoveInputMode.
protected
Parameters
- context: IInputModeContext
- The context in which the hit testing is performed.
- hitLabel: ILabel
- The label that was hit before a non-label at the same location.
- location: Point
- The location the label was hit.
Return Value
- boolean
- Whether to first report the non-label during hit testing.
Defined in
GraphInputMode.shouldSkipHitLabelSnaps the node to the grid using the IGridConstraintProvider<T> for INodes queried from the given context.
Snaps the node to the grid using the IGridConstraintProvider<T> for INodes queried from the given context.
This method is called by this instance whenever new nodes are created using the UI.
Parameters
- context: IInputModeContext
- node: INode
See Also
Adds a new label to the given item interactively.
Adds a new label to the given item interactively.
This method will invoke editLabelInputMode's startLabelAddition method.
Parameters
- owner: ILabelOwner
- The item to add a label to.
Return Value
- any
- A Promise that fulfills either with the edited label, or with
nullif editing was canceled or the text did not validate.
Starts editing the given label.
Starts editing the given label.
This method will invoke editLabelInputMode's startLabelEditing method.
Parameters
- label: ILabel
- The label to edit.
Return Value
- any
- A Promise that fulfills either with the edited label, or with
nullif editing was canceled or the text did not validate.
This implementation uninstalls all sub modes and then re-installs them according to their new priorities.
protectedfinal
Return Value
- boolean
trueif the editing process was successfully stopped, or if there was no edit in progress to stop; otherwise,false.
Defined in
MultiplexingInputMode.tryStopDelegates 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
Uninstalls this mode from the given context.
Uninstalls this mode from the given context.
This code should clean up all changes made to the canvas in the install method. After a mode has been uninstalled it can be installed again into the same or another canvas.
Parameters
- context: IInputModeContext
- The context to deregister from. This is the same instance that had been passed to install during installation.
Overrides
GraphInputMode.uninstallEvents
Occurs when the empty canvas area has been clicked or tapped.
Occurs when the empty canvas area has been clicked or tapped.
If one of the event handlers sets the handled property to
true the event will not be propagated anymore.Properties of
ClickEventArgs- altKey: boolean
- Gets a value indicating whether the alt modifier was pressed at the time of the click.
- clickCount: number
- Gets the number of clicks associated with this event.
- context: IInputModeContext
- Gets the context for the current event.
- ctrlKey: boolean
- Gets a value indicating whether the control modifier was pressed at the time of the click.
- handled: booleanwritable
- Gets or sets a value indicating whether this instance has been handled.
- location: Point
- Gets the location of the click.
- metaKey: boolean
- Gets a value indicating whether the meta modifier was pressed at the time of the click.
- modifiers: ModifierKeys
- Gets the state of the modifiers at the time of the click.
- originalEventArgs: PointerEventArgs
- Gets the pointer event args that caused this event.
- pointerButtons: PointerButtons
- Gets the PointerButtons that have changed for this event.
- pointerType: PointerType
- Gets the type of the pointer that was the source of this event.
- shiftKey: boolean
- Gets a value indicating whether the shift modifier was pressed at the time of the click.
See Also
API
- item-clicked
Defined in
GraphInputMode.canvas-clickedOccurs when an item has been deleted interactively by this mode.
Occurs when an item has been deleted interactively by this mode.
Note that this event will not be triggered for items that are removed implicitly, e.g. if the event is triggered for a node, its labels, ports, and adjacent edges will not necessarily be reported separately. In order to be notified of any removal events, the IGraph events should be used instead.
This event is raised after each selected item have been removed. To clean up after deletion, e.g. by applying a new automatic layout, use the deleted-selection event which is raised only once after all items have been deleted.
The deleting-selection event is raised before all items have been removed. The deleted-selection event is raised after all items have been removed.
In addition to the deleted item and its type, the ItemChangedEventArgs<TItem, TValue> provide information about the status before deletion.
Properties of
InputModeItemChangedEventArgs<IModelItem, EventArgs>- context: IInputModeContext
- Gets the context for the current event.
- details: TDetail
- Gets additional information about the state of the item, before it has been deleted.
- item: TItem
- Gets the item which has been created or changed.
Examples
mode.addEventListener('deleted-item', (e) => {
if (e.details instanceof NodeEventArgs) {
const ne = e.details as NodeEventArgs
console.log(`Old parent: ${ne.parent}`)
} else if (e.details instanceof EdgeEventArgs) {
const ee = e.details as EdgeEventArgs
console.log(`Old source port owner: ${ee.sourcePortOwner}`)
console.log(`Old target port owner: ${ee.targetPortOwner}`)
} else if (e.details instanceof PortEventArgs) {
const pe = e.details as PortEventArgs
console.log(`Old port owner: ${pe.owner}`)
} else if (e.details instanceof LabelEventArgs) {
const le = e.details as LabelEventArgs
console.log(`Old label owner: ${le.owner}`)
} else if (e.details instanceof BendEventArgs) {
const be = e.details as BendEventArgs
console.log(`Old bend owner: ${be.owner}`)
}
})See Also
Developer's Guide
API
- deleteSelection, deleting-selection, deleted-selection
Occurs after all selected items have been removed in deleteSelection.
Occurs after all selected items have been removed in deleteSelection.
This event is raised after all selected items have been removed. It is recommended to register to this event if one wants to clean up after deletion, e.g. by applying a new automatic layout.
The deleting-selection event is raised before all items have been removed. The deleted-item is raised for each item after it has been removed.
Note that all items which have been removed are not in the selection anymore but are provided as items of the ItemsEventArgs.
Properties of
ItemsEventArgs- context: IInputModeContext
- Gets the context for the current event.
- items: IListEnumerable<IModelItem>
- Gets the items that are the subjects for this event.
Examples
Applying a layout after the selected items have been deleted;
mode.addEventListener('deleted-selection', () => {
mode.graph!.applyLayout(new HierarchicalLayout())
})The deleted items are neither in the selection nor in the graph. One has to retrieve them before deletion:
let selectedItems = new List<IModelItem>()
mode.addEventListener('deleting-selection', (evt) => {
selectedItems = evt.selection.toList()
})
mode.addEventListener('deleted-selection', (evt) => {
// the deleted items are not in the current selection anymore but are provided by the event arguments
const deletedItems = evt.items
})See Also
Developer's Guide
API
- deleteSelection
Occurs just before the deleteSelection method starts its work and will be followed by any number of deleted-item events and finalized by a deleted-selection event.
Occurs just before the deleteSelection method starts its work and will be followed by any number of deleted-item events and finalized by a deleted-selection event.
This event is raised before the deletion starts. It might be used to take a snapshot of the items to delete since there is no access to these afterwards.
The deleted-item is raised for each item after it has been removed. The deleted-selection event is raised after all items have been removed.
Properties of
SelectionEventArgs<IModelItem>- context: IInputModeContext
- Gets the context for the current event.
- selection: IObservableCollection<T>
- Gets the selection these event arguments refer to.
Examples
The deleted items are neither in the selection nor in the graph. One has to retrieve them before deletion:
let selectedItems = new List<IModelItem>()
mode.addEventListener('deleting-selection', (evt) => {
selectedItems = evt.selection.toList()
})
mode.addEventListener('deleted-selection', (evt) => {
// the deleted items are not in the current selection anymore but are provided by the event arguments
const deletedItems = evt.items
})See Also
Developer's Guide
API
- deleteSelection
Occurs after an edge's source and/or target ports have been changed as the result of an input gesture.
Occurs after an edge's source and/or target ports have been changed as the result of an input gesture.
The details are of type EdgeEventArgs.
Properties of
InputModeItemChangedEventArgs<IEdge, EdgeEventArgs>- context: IInputModeContext
- Gets the context for the current event.
- details: TDetail
- Gets additional information about the state of the item, before it has been deleted.
- item: TItem
- Gets the item which has been created or changed.
See Also
Occurs after the groupSelection method has grouped the selected items.
Occurs after the groupSelection method has grouped the selected items.
This event is raised after the items are grouped.
The event is not raised if no items are selected.
Properties of
SelectionEventArgs<IModelItem>- context: IInputModeContext
- Gets the context for the current event.
- selection: IObservableCollection<T>
- Gets the selection these event arguments refer to.
See Also
Occurs just before the groupSelection method starts its work.
Occurs just before the groupSelection method starts its work.
This event is raised before the items are grouped.
The event is not raised if no items are selected.
Properties of
SelectionEventArgs<IModelItem>- context: IInputModeContext
- Gets the context for the current event.
- selection: IObservableCollection<T>
- Gets the selection these event arguments refer to.
See Also
Occurs when an item has been clicked or tapped.
Occurs when an item has been clicked or tapped.
If one of the event handlers sets the handled property to true the event will not be propagated anymore.
Button-specific and input type specific events (item-left-clicked and item-right-clicked) will be raised before this event. If one of those is marked handled this event will not be raised anymore.
Properties of
ItemClickedEventArgs<IModelItem>- altKey: boolean
- Gets a value indicating whether the alt modifier was pressed at the time of the click.
- clickCount: number
- Gets the number of clicks associated with this event.
- context: IInputModeContext
- Gets the context for the current event.
- ctrlKey: boolean
- Gets a value indicating whether the control modifier was pressed at the time of the click.
- handled: booleanwritable
- Gets or sets a value indicating whether this instance has been handled.
- item: T
- Gets the item that is the subject of the event.
- location: Point
- Gets the location of the click.
- metaKey: boolean
- Gets a value indicating whether the meta modifier was pressed at the time of the click.
- modifiers: ModifierKeys
- Gets the state of the modifiers at the time of the click.
- originalEventArgs: PointerEventArgs
- Gets the pointer event args that caused this event.
- pointerButtons: PointerButtons
- Gets the PointerButtons that have changed for this event.
- pointerType: PointerType
- Gets the type of the pointer that was the source of this event.
- shiftKey: boolean
- Gets a value indicating whether the shift modifier was pressed at the time of the click.
Examples
mode.addEventListener('item-clicked', (evt) => {
const node = evt.item
if (node !== null) {
doSomethingWithNode(node)
evt.handled = true
}
})See Also
Developer's Guide
API
- clickableItems, item-double-clicked, item-left-clicked, item-right-clicked
Defined in
GraphInputMode.item-clickedOccurs when an item has been double-clicked or double-tapped.
Occurs when an item has been double-clicked or double-tapped.
If one of the event handlers sets the handled property to true the event will not be propagated anymore.
Depending on the value of the clickReportingPolicy property of clickInputMode this event may be preceded by no, one, or two item-clicked events (as well as the corresponding button-specific event).
Button-specific and input-type specific events (item-left-double-clicked and item-right-double-clicked) will be raised before this event. If one of those is marked handled this event will not be raised anymore.
Properties of
ItemClickedEventArgs<IModelItem>- altKey: boolean
- Gets a value indicating whether the alt modifier was pressed at the time of the click.
- clickCount: number
- Gets the number of clicks associated with this event.
- context: IInputModeContext
- Gets the context for the current event.
- ctrlKey: boolean
- Gets a value indicating whether the control modifier was pressed at the time of the click.
- handled: booleanwritable
- Gets or sets a value indicating whether this instance has been handled.
- item: T
- Gets the item that is the subject of the event.
- location: Point
- Gets the location of the click.
- metaKey: boolean
- Gets a value indicating whether the meta modifier was pressed at the time of the click.
- modifiers: ModifierKeys
- Gets the state of the modifiers at the time of the click.
- originalEventArgs: PointerEventArgs
- Gets the pointer event args that caused this event.
- pointerButtons: PointerButtons
- Gets the PointerButtons that have changed for this event.
- pointerType: PointerType
- Gets the type of the pointer that was the source of this event.
- shiftKey: boolean
- Gets a value indicating whether the shift modifier was pressed at the time of the click.
Examples
mode.addEventListener('item-double-clicked', (evt) => {
const node = evt.item
if (node !== null) {
doSomethingWithNode(node)
evt.handled = true
}
})See Also
Developer's Guide
API
- item-clicked, clickableItems, item-left-double-clicked, item-right-double-clicked
Defined in
GraphInputMode.item-double-clickedOccurs when an item has been left-clicked.
Occurs when an item has been left-clicked.
This event will be raised before the item-clicked event. If one of the event handlers sets the handled property to true the event will not be propagated anymore. This also means that the item-clicked event will not be raised in that case.
The term "left click" refers to a click with the left mouse button or a stylus tap.
Properties of
ItemClickedEventArgs<IModelItem>- altKey: boolean
- Gets a value indicating whether the alt modifier was pressed at the time of the click.
- clickCount: number
- Gets the number of clicks associated with this event.
- context: IInputModeContext
- Gets the context for the current event.
- ctrlKey: boolean
- Gets a value indicating whether the control modifier was pressed at the time of the click.
- handled: booleanwritable
- Gets or sets a value indicating whether this instance has been handled.
- item: T
- Gets the item that is the subject of the event.
- location: Point
- Gets the location of the click.
- metaKey: boolean
- Gets a value indicating whether the meta modifier was pressed at the time of the click.
- modifiers: ModifierKeys
- Gets the state of the modifiers at the time of the click.
- originalEventArgs: PointerEventArgs
- Gets the pointer event args that caused this event.
- pointerButtons: PointerButtons
- Gets the PointerButtons that have changed for this event.
- pointerType: PointerType
- Gets the type of the pointer that was the source of this event.
- shiftKey: boolean
- Gets a value indicating whether the shift modifier was pressed at the time of the click.
Examples
mode.addEventListener('item-left-clicked', (evt) => {
const node = evt.item
if (node !== null) {
doSomethingWithNode(node)
evt.handled = true
}
})See Also
Defined in
GraphInputMode.item-left-clickedOccurs when an item has been left double-clicked.
Occurs when an item has been left double-clicked.
This event will be raised before the item-double-clicked event. If one of the event handlers sets the handled property to
true the event will not be propagated anymore. This also means that the item-double-clicked event will not be raised in that case.Properties of
ItemClickedEventArgs<IModelItem>- altKey: boolean
- Gets a value indicating whether the alt modifier was pressed at the time of the click.
- clickCount: number
- Gets the number of clicks associated with this event.
- context: IInputModeContext
- Gets the context for the current event.
- ctrlKey: boolean
- Gets a value indicating whether the control modifier was pressed at the time of the click.
- handled: booleanwritable
- Gets or sets a value indicating whether this instance has been handled.
- item: T
- Gets the item that is the subject of the event.
- location: Point
- Gets the location of the click.
- metaKey: boolean
- Gets a value indicating whether the meta modifier was pressed at the time of the click.
- modifiers: ModifierKeys
- Gets the state of the modifiers at the time of the click.
- originalEventArgs: PointerEventArgs
- Gets the pointer event args that caused this event.
- pointerButtons: PointerButtons
- Gets the PointerButtons that have changed for this event.
- pointerType: PointerType
- Gets the type of the pointer that was the source of this event.
- shiftKey: boolean
- Gets a value indicating whether the shift modifier was pressed at the time of the click.
Examples
mode.addEventListener('item-left-double-clicked', (evt) => {
const node = evt.item
if (node !== null) {
doSomethingWithNode(node)
evt.handled = true
}
})See Also
Defined in
GraphInputMode.item-left-double-clickedOccurs when an item has been right-clicked.
Occurs when an item has been right-clicked.
This event will be raised before the item-clicked event. If one of the event handlers sets the handled property to
true the event will not be propagated anymore. This also means that the item-clicked event will not be raised in that case.Properties of
ItemClickedEventArgs<IModelItem>- altKey: boolean
- Gets a value indicating whether the alt modifier was pressed at the time of the click.
- clickCount: number
- Gets the number of clicks associated with this event.
- context: IInputModeContext
- Gets the context for the current event.
- ctrlKey: boolean
- Gets a value indicating whether the control modifier was pressed at the time of the click.
- handled: booleanwritable
- Gets or sets a value indicating whether this instance has been handled.
- item: T
- Gets the item that is the subject of the event.
- location: Point
- Gets the location of the click.
- metaKey: boolean
- Gets a value indicating whether the meta modifier was pressed at the time of the click.
- modifiers: ModifierKeys
- Gets the state of the modifiers at the time of the click.
- originalEventArgs: PointerEventArgs
- Gets the pointer event args that caused this event.
- pointerButtons: PointerButtons
- Gets the PointerButtons that have changed for this event.
- pointerType: PointerType
- Gets the type of the pointer that was the source of this event.
- shiftKey: boolean
- Gets a value indicating whether the shift modifier was pressed at the time of the click.
Examples
mode.addEventListener('item-right-clicked', (evt) => {
const node = evt.item
if (node !== null) {
doSomethingWithNode(node)
evt.handled = true
}
})See Also
Defined in
GraphInputMode.item-right-clickedOccurs when an item has been right double-clicked.
Occurs when an item has been right double-clicked.
This event will be raised before the item-double-clicked event. If one of the event handlers sets the handled property to
true the event will not be propagated anymore. This also means that the item-double-clicked event will not be raised in that case.Properties of
ItemClickedEventArgs<IModelItem>- altKey: boolean
- Gets a value indicating whether the alt modifier was pressed at the time of the click.
- clickCount: number
- Gets the number of clicks associated with this event.
- context: IInputModeContext
- Gets the context for the current event.
- ctrlKey: boolean
- Gets a value indicating whether the control modifier was pressed at the time of the click.
- handled: booleanwritable
- Gets or sets a value indicating whether this instance has been handled.
- item: T
- Gets the item that is the subject of the event.
- location: Point
- Gets the location of the click.
- metaKey: boolean
- Gets a value indicating whether the meta modifier was pressed at the time of the click.
- modifiers: ModifierKeys
- Gets the state of the modifiers at the time of the click.
- originalEventArgs: PointerEventArgs
- Gets the pointer event args that caused this event.
- pointerButtons: PointerButtons
- Gets the PointerButtons that have changed for this event.
- pointerType: PointerType
- Gets the type of the pointer that was the source of this event.
- shiftKey: boolean
- Gets a value indicating whether the shift modifier was pressed at the time of the click.
Examples
mode.addEventListener('item-right-double-clicked', (evt) => {
const node = evt.item
if (node !== null) {
doSomethingWithNode(node)
evt.handled = true
}
})See Also
Defined in
GraphInputMode.item-right-double-clickedOccurs when the copy operation finished successfully.
Occurs when the copy operation finished successfully.
The items in the ItemsEventArgs are the original items in graph that were copied during the copy operation.
Properties of
ItemsEventArgs- context: IInputModeContext
- Gets the context for the current event.
- items: IListEnumerable<IModelItem>
- Gets the items that are the subjects for this event.
See Also
Developer's Guide
Defined in
GraphInputMode.items-copiedOccurs when the cut operation finished successfully.
Occurs when the cut operation finished successfully.
The items in the ItemsEventArgs are the items that were removed during the cut operation.
Properties of
ItemsEventArgs- context: IInputModeContext
- Gets the context for the current event.
- items: IListEnumerable<IModelItem>
- Gets the items that are the subjects for this event.
See Also
Developer's Guide
Occurs when the duplicateSelection operation finished successfully.
Occurs when the duplicateSelection operation finished successfully.
The items in the ItemsEventArgs are the items that were created during the duplicate operation.
Properties of
ItemsEventArgs- context: IInputModeContext
- Gets the context for the current event.
- items: IListEnumerable<IModelItem>
- Gets the items that are the subjects for this event.
See Also
Developer's Guide
Occurs when the paste operation finished successfully.
Occurs when the paste operation finished successfully.
The items in the ItemsEventArgs are the items that were created during the paste operation.
Properties of
ItemsEventArgs- context: IInputModeContext
- Gets the context for the current event.
- items: IListEnumerable<IModelItem>
- Gets the items that are the subjects for this event.
See Also
Developer's Guide
Occurs when this mode has triggered the addition of an ILabel, for instance, in response to startLabelAddition.
Occurs when this mode has triggered the addition of an ILabel, for instance, in response to startLabelAddition.
Properties of
InputModeItemEventArgs<ILabel>- context: IInputModeContext
- Gets the context for the current event.
- item: TModelItem
- Gets the item which has been created or changed.
See Also
Developer's Guide
Occurs when this mode has triggered the edit of an ILabel, for instance, in response to startLabelEditing.
Occurs when this mode has triggered the edit of an ILabel, for instance, in response to startLabelEditing.
Properties of
InputModeItemEventArgs<ILabel>- context: IInputModeContext
- Gets the context for the current event.
- item: TModelItem
- Gets the item which has been created or changed.
See Also
Developer's Guide
Occurs when a single or multi select operation has been finished.
Occurs when a single or multi select operation has been finished.
The event is not triggered for the individual selection operations that constitute a multi selection operation.
Properties of
SelectionEventArgs<IModelItem>- context: IInputModeContext
- Gets the context for the current event.
- selection: IObservableCollection<T>
- Gets the selection these event arguments refer to.
Defined in
GraphInputMode.multi-selection-finishedOccurs when a single or multi select operation has been started.
Occurs when a single or multi select operation has been started.
The event is not triggered for the individual selection operations that constitute a multi selection operation.
Properties of
SelectionEventArgs<IModelItem>- context: IInputModeContext
- Gets the context for the current event.
- selection: IObservableCollection<T>
- Gets the selection these event arguments refer to.
Defined in
GraphInputMode.multi-selection-startedOccurs when this mode has created a node in response to user interaction.
Occurs when this mode has created a node in response to user interaction.
This event is triggered if the node is created using a click gesture via createNode, via a drag and drop operation that was completed by nodeDropInputMode, or by grouping nodes via GROUP_SELECTION. Note that if allowFolderNodeAsParent is set to
true, the reported node can actually be part of the master graph.Properties of
InputModeItemEventArgs<INode>- context: IInputModeContext
- Gets the context for the current event.
- item: TModelItem
- Gets the item which has been created or changed.
Examples
Applying a layout each time the user created a new node
mode.addEventListener('node-created', () => {
mode.graph!.applyLayout(new HierarchicalLayout())
})See Also
Developer's Guide
API
- createNode
Occurs when a node has been reparented interactively.
Occurs when a node has been reparented interactively.
This is triggered whenever the reparentNodeHandler's reparent method has been called to reparent a node interactively.
The details are of type NodeEventArgs which provide the old parent in its parent property.
Properties of
InputModeItemChangedEventArgs<INode, NodeEventArgs>- context: IInputModeContext
- Gets the context for the current event.
- details: TDetail
- Gets additional information about the state of the item, before it has been deleted.
- item: TItem
- Gets the item which has been created or changed.
See Also
This method will only be called for items that match the contextMenuItems type.
Properties of
PopulateItemContextMenuEventArgs<IModelItem>- context: IInputModeContext
- Gets the context for the current event.
- contextMenu: ContextMenuContentwritable
- Gets or sets the context menu content to use.
- handled: booleanwritable
- Gets or sets a value indicating whether this PopulateContextMenuEventArgs has been handled.
- item: TModelItem
- Gets the item for which the context menu is queried.
- queryLocation: Point
- Gets the queried location in world coordinates.
- showMenu: booleanwritable
- Gets or sets a value indicating whether to actually display the context menu.
Examples
// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.contextMenuItems = GraphItemTypes.NODE
mode.addEventListener('populate-item-context-menu', (evt) => {
// Get the node which is handled or null if the item is not a node
const node = evt.item
// Create the context menu items
if (node !== null) {
// Create a menu item to delete the node
// Show the menu
evt.contextMenu = [
{ label: 'Delete Item', action: () => graph.remove(node) },
]
}
})Occurs when this mode has triggered the addition of an IPort, for instance, in response to portDropInputMode.
Occurs when this mode has triggered the addition of an IPort, for instance, in response to portDropInputMode.
Properties of
InputModeItemEventArgs<IPort>- context: IInputModeContext
- Gets the context for the current event.
- item: TModelItem
- Gets the item which has been created or changed.
Occurs when the mouse is hovering over an item to determine the tool tip to display.
Occurs when the mouse is hovering over an item to determine the tool tip to display.
This method will only be called for items that match the toolTipItems type.
Properties of
QueryItemToolTipEventArgs<IModelItem>- context: IInputModeContext
- Gets the context for the current event.
- handled: booleanwritable
- Gets or sets a value indicating whether this QueryToolTipEventArgs has been handled.
- item: TModelItem
- Gets the item for which the tool tip is queried.
- queryLocation: Point
- Gets the query location in world coordinates.
- toolTip: anywritable
- Gets or sets the tooltip content to use.
Examples
// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.toolTipItems = GraphItemTypes.NODE
// register a listener
mode.addEventListener('query-item-tool-tip', (evt) => {
if (evt.handled) {
// A tooltip has already been assigned -> nothing to do.
return
}
// We can safely cast here because we set ToolTipItems to only Node.
const hitNode = evt.item as INode
if (hitNode.labels.size > 0) {
// Show the text of the first label as tooltip.
evt.toolTip = hitNode.labels.get(0).text
// Indicate that the tooltip content has been set.
evt.handled = true
}
})Defined in
GraphInputMode.query-item-tool-tipOccurs after the ungroupSelection method has ungrouped the selected items.
Occurs after the ungroupSelection method has ungrouped the selected items.
This event is raised after the items are ungrouped.
The event is not raised if no items are selected.
Properties of
SelectionEventArgs<IModelItem>- context: IInputModeContext
- Gets the context for the current event.
- selection: IObservableCollection<T>
- Gets the selection these event arguments refer to.
See Also
Occurs just before the ungroupSelection method starts its work.
Occurs just before the ungroupSelection method starts its work.
This event is raised before the items are ungrouped.
The event is not raised if no items are selected.
Properties of
SelectionEventArgs<IModelItem>- context: IInputModeContext
- Gets the context for the current event.
- selection: IObservableCollection<T>
- Gets the selection these event arguments refer to.
See Also
Constants
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 moveSelectedItemsInputMode and any MoveInputMode using this testable has to be a child mode of an GraphEditorInputMode.
static
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 moveSelectedItemsInputMode and any MoveInputMode using this position handler has to be a child mode of an GraphEditorInputMode.
static
An IHitTestable that tests if any model item that is movable is hit.
An IHitTestable that tests if any model item that is movable is hit.
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 moveUnselectedItemsInputMode. Any MoveInputMode using this testable has to be a child mode of an GraphEditorInputMode.
static
MOVE_UNSELECTED_ITEMS_QUERY_POSITION_HANDLER
: function(QueryPositionHandlerEventArgs, this): voidstaticAn event handler setting the IPositionHandler of the movable unselected model item that is hit at the queryLocation.
MOVE_UNSELECTED_ITEMS_QUERY_POSITION_HANDLER
: function(QueryPositionHandlerEventArgs, this): voidstatic
An event handler setting the IPositionHandler of the movable unselected model item that is hit at the queryLocation.
This handler retrieves the GraphEditorInputMode from the lookup and tests if any item hit at the queryLocation 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 query-position-handler event of moveUnselectedItemsInputMode. Any MoveInputMode using this query handler has to be a child mode of an GraphEditorInputMode.
static