An implementation of the IInputMode interface that handles the display of a custom context menu when the user right clicks on the CanvasComponent.
Remarks
This mode can be used with any context menu implementation since it does not impose any specific requirements. Typically, it is used in the following way.
First, this mode must be informed that the user wants to show the context menu with the method shouldOpenMenu, for example because a contextmenu event was fired.
Then, in response, this mode checks whether its current state allows opening a context menu, and fires the PopulateMenu and GraphInputMode.populateItemContextMenu.
If the context menu was closed because of user interaction with it, for example the user selected an menu entry, this mode must be informed by calling the method menuClosed.
This mode detects automatically if the menu must be closed because of other user interaction, for example the user clicked somewhere else, and fires the event CloseMenu to request closing of the context menu.
Examples
Typically the ContextMenuInputMode is installed as child mode of a GraphEditorInputMode or GraphViewerInputMode and can be retrieved from the contextMenuInputMode property.
const contextMenuInputMode = mode.contextMenuInputModeIt is recommended to configure the context menu handling on the parent GraphEditorInputMode or GraphViewerInputMode instead of the ContextMenuInputMode. This involves registering for the PopulateItemContextMenu event instead of the PopulateMenu event:
// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.contextMenuItems = GraphItemTypes.NODE
mode.addPopulateItemContextMenuListener((sender, args) => {
// Get the node which is handled or null if the item is not a node
const node = args.item
// Create the context menu items
if (node !== null) {
// Create a menu item to delete the node
// Show the menu
args.showMenu = true
// Mark the event as handled
args.handled = true
}
})Related Programming Samples
- Context Menu
- Shows how to add a context menu to the nodes of a graph and to the canvas background.
Type Details
- yfiles module
- view-component
- yfiles-umd modules
- All view modules
- Legacy UMD name
- yfiles.input.ContextMenuInputMode
See Also
context-menu event will stop other input modes from acting on the subsequent long-press event. Therefore lowering the longPressTime will extend the time frame between the long-press and the context-menu event.Constructors
Initializes a new instance of the ContextMenuInputMode class.
Parameters
A map of options to pass to the method.
- priority - number
- exclusive - boolean
A value indicating whether this mode will be the only one running when it has the mutex. This option sets the exclusive property on the created object.
- enabled - boolean
The enabled state of this input mode. This option sets the enabled property on the created object.
- validMenuLocationHitTestable - IHitTestable
An IHitTestable that determines whether it is valid to open a context menu at the queried position. This option sets the validMenuLocationHitTestable property on the created object.
- validMenuLocationCursor - Cursor
The cursor to use when the mouse is at a valid menu location. This option sets the validMenuLocationCursor property on the created object.
- swallowCloseClick - boolean
A value that determines whether clicks are swallowed if they happen within a short amount of time after a context menu was closed. This option sets the swallowCloseClick property on the created object.
Properties
Gets the installed ConcurrencyController.
Gets or sets the enabled state of this input mode.
Remarks
Examples
mode.contextMenuInputMode.enabled = falseGets or sets a value indicating whether this mode will be the only one running when it has the mutex.
Remarks
The value of this property will be delegated to the exclusive property of the controller.
If this mode is marked as exclusive and has the mutex, all other modes added to the same MultiplexingInputMode will be deactivated. Otherwise it will always run concurrently with all other modes.
Gets the context instance this mode is currently installed in or null if this instance is not installed.
Remarks
Implements
Gets the priority of this input mode.
Remarks
See Also
Implements
Gets or sets a value that determines whether clicks are swallowed if they happen within a short amount of time after a context menu was closed.
Remarks
true.Gets or sets the cursor to use when the mouse is at a valid menu location.
Remarks
nullGets or sets an IHitTestable that determines whether it is valid to open a context menu at the queried position.
Remarks
false onMenuOpening will not be queried and the context menu will not be shown. By default there is a hit testable instance that always yields true.See Also
Methods
Cancels the display of the context menu and requests that the context menu is closed.
Implements
Creates an IInputModeContext for use with the PopulateMenu call in the upcoming query.
Returns
- ↪IInputModeContext
- An instance of IInputModeContext.
Installs this mode in the canvas.
Parameters
A map of options to pass to the method.
- context - IInputModeContext
- The context to install this mode into.
- controller - ConcurrencyController
- The controller for this mode.
See Also
Implements
Called after cancel has been called.
Remarks
Can be overridden in subclasses to perform additional actions after the mode has been canceled.
This implementation does nothing.
Called when the menu is closed and triggers the CloseMenu event.
Called after the active property of the installed ConcurrencyController has been set to true.
Remarks
Can be overridden in subclasses to perform additional actions after the mode has been activated.
Overriding implementations should call the base implementation.
Called after the active property of the installed ConcurrencyController has been set to false.
Remarks
Can be overridden in subclasses to perform additional actions after the mode has been deactivated.
Overriding implementations should call the base implementation.
This will populate the context menu for the given world coordinate.
Remarks
true if the menu already contains elements.Parameters
A map of options to pass to the method.
- location - Point
- The location in the world coordinate system for which the context menu has been invoked.
Returns
- ↪boolean
- Whether to show the context menu.
Raises the PopulateMenu event.
Parameters
A map of options to pass to the method.
- evt - PopulateMenuEventArgs
- The PopulateMenuEventArgs instance containing the event data.
See Also
Called after tryStop has been called.
Remarks
Can be overridden in subclasses to perform additional actions after the mode has been stopped.
This implementation does nothing.
This method must be called by custom code to inform this input mode that a context menu is about to be opened by a user gesture.
Remarks
Parameters
A map of options to pass to the method.
- queryLocation - Point
- The optional location for which the context menu content should be queried. This value will be passed to onPopulateMenu and will ultimately be available in queryLocation. If not specified, the last known mouse location will be used.
See Also
Stops the display of the context menu and requests that the context menu is closed.
Returns
- ↪boolean
trueif and only if the editing has been stopped or there was no edit in progress
See Also
Implements
Removes the menu from the context and replaces it with the old instance.
Parameters
A map of options to pass to the method.
- context - IInputModeContext
- The context to uninstall this mode from.
Implements
Events
Occurs when the context menu is about to be shown.
Remarks
true. Every handler should query this property and decide carefully what to do.Examples
ContextMenuInputMode. This involves registering for the PopulateItemContextMenu event instead of this event:// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.contextMenuItems = GraphItemTypes.NODE
mode.addPopulateItemContextMenuListener((sender, args) => {
// Get the node which is handled or null if the item is not a node
const node = args.item
// Create the context menu items
if (node !== null) {
// Create a menu item to delete the node
// Show the menu
args.showMenu = true
// Mark the event as handled
args.handled = true
}
})See Also
Event Registration
addPopulateMenuListener(function(this, PopulateMenuEventArgs):void)Event Deregistration
removePopulateMenuListener(function(this, PopulateMenuEventArgs):void)Signature Details
function(sender: this, evt: PopulateMenuEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - PopulateMenuEventArgs
- An object that contains the event data.