C

ContextMenuInputMode

Show Usages
An implementation of the IInputMode interface that handles the display of a custom context menu when the user right-clicks on the CanvasComponent.
ImplementsInheritance Hierarchy

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:

When this mode is informed that the user wants to show the context menu for example because a contextmenu event was fired, it checks whether its current state allows opening a context menu, and fires the populate-menu and GraphInputMode.populateItemContextMenu events.

If the context menu was closed because of user interaction with it, for example the user selected a menu entry in a custom context menu, this mode must be informed by calling the method closeMenu.

The context menu HTML element is positioned using "position: absolute". It is therefore positioned with respect to it's offset parent, which is the closest ancestor with "position: relative". In summary, for the context menu to work properly, the element containing the graph component must be styled with "position: relative".

Examples

Typically, the ContextMenuInputMode is installed as child mode of a GraphEditorInputMode or GraphViewerInputMode and can be retrieved from the contextMenuInputMode property.

Getting the ContextMenuInputMode from its parent input mode
const contextMenuInputMode = mode.contextMenuInputMode

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

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

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

See Also

Developer's Guide

Demos

Shows how to add a context menu to the nodes of a graph and to the canvas background.

Members

Show:

Constructors

ContextMenuInputMode

()
Initializes a new instance of the ContextMenuInputMode class.

Parameters

Properties

contextMenuParentElement

: HTMLElement
Gets or sets a custom parent element to which the context menu is added as a child in the DOM.

By default this property is null, which means that the menu is added to the document.body.

When specifying some other element as parent, it must be assured that the element is currently visible (i.e. has no style with property display: none).

final

controller

: ConcurrencyController
protectedreadonly
Gets the installed ConcurrencyController.
protectedreadonlyfinal

enabled

: boolean
Gets or sets the enabled state of this input mode.
Clients can use this property to disable or reenable this instance. This will set the enabled property of the installed controller so a disabled instance should never try to acquire the input mutex.

Examples

Disabling the ContextMenuInputMode on its parent input mode
mode.contextMenuInputMode.enabled = false

exclusive

: boolean
Gets or sets a value indicating whether this mode will be the only one running when it has the mutex.

The value of this property will be delegated to the exclusive property of the controller.

If this mode is marked as exclusive and has the mutex, all other modes added to the same MultiplexingInputMode will be deactivated. Otherwise, it will always run concurrently with all other modes.

final

parentInputModeContext

: IInputModeContext
protectedreadonly
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

priority

: number
Gets the priority of this input mode.
The priority will influence the order in which the modes will be installed into the CanvasComponent. The lower the priority value, the earlier it will be installed. If two modes are using the same priority value, the first one to be registered will be installed earlier.
final

swallowCloseClick

: boolean
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.
This is especially useful to cancel the menu by clicking somewhere outside the menu without creating a node. The default is true.
final

validMenuLocationCursor

: Cursor
Gets or sets the cursor to use when the mouse is at a valid menu location.
The default is null
conversionfinal

validMenuLocationHitTestable

: IHitTestable
Gets or sets an IHitTestable that determines whether it is valid to open a context menu at the queried position.
If the instance yields 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.
final

See Also

Developer's Guide

Methods

cancel

()
Cancels the display of the context menu and requests that the context menu is closed.

closeMenu

()
This method must be called by custom event listeners on HTMLElements added in contextMenu to indicate that the menu has been closed.
Since this input mode cannot know when the user has closed a custom context menu, this callback should be used to allow the instance to adjust the internal state.
final

createInputModeContext

(): IInputModeContext
protected
Creates an input mode context that uses this instance as the inputMode and delegates to parentInputModeContext otherwise.
This method can only be called when parentInputModeContext is not null, i.e. while this mode is installed.
protected

Return Value

IInputModeContext
An instance that has this IInputMode set as the inputMode

createPopulateMenuContext

(): IInputModeContext
protected
Creates an IInputModeContext for use with the populate-menu call in the upcoming query.

install

(context: IInputModeContext, controller: ConcurrencyController)
Installs this mode in the canvas.

Parameters

context: IInputModeContext
The context to install this mode into.
controller: ConcurrencyController
The controller for this mode.

onCanceled

()
protected
Called after cancel has been called.

Can be overridden in subclasses to perform additional actions after the mode has been canceled.

This implementation does nothing.

protected

onConcurrencyControllerActivated

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

Can be overridden in subclasses to perform additional actions after the mode has been activated.

Overriding implementations should call the base implementation.

protected

onConcurrencyControllerDeactivated

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

Can be overridden in subclasses to perform additional actions after the mode has been deactivated.

Overriding implementations should call the base implementation.

protected

onMenuClosed

()
protected
Called when the menu is closed and triggers the menu-closed event.

onMenuOpening

(location: Point): PopulateContextMenuEventArgs
protected
Populates the context menu for the given world coordinate.
This implementation will trigger the populate-menu event.
protected

Parameters

location: Point
The location in the world coordinate system for which the context menu has been invoked.

Return Value

PopulateContextMenuEventArgs

onPopulateMenu

(evt: PopulateContextMenuEventArgs)
protected
Raises the populate-menu event.
protected

Parameters

evt: PopulateContextMenuEventArgs
The PopulateContextMenuEventArgs instance containing the event data.

See Also

Developer's Guide

onStopped

()
protected
Called after tryStop has been called.

Can be overridden in subclasses to perform additional actions after the mode has been stopped.

This implementation does nothing.

protected

tryStop

(): boolean
Stops the display of the context menu and requests that the context menu is closed.

Return Value

boolean
true if successful, otherwise false.

uninstall

(context: IInputModeContext)
Removes the menu from the context and replaces it with the old instance.

Parameters

context: IInputModeContext
The context to uninstall this mode from.

Events

'menu-closed'

: EventArgs
Occurs when this instance requests closing an open context menu.
Custom context menus must be closed in response to this event.

Properties of

EventArgs

'populate-menu'

: PopulateContextMenuEventArgs
Occurs when the context menu is about to be shown.
Handlers of the event can populate their context menu, and set or respect the handled property. Note that all handlers will be called, even if one of them sets the handled property to true. Every handler should query this property and decide carefully what to do.
context: IInputModeContext
Gets the context for the current event.
contextMenu: ContextMenuContent
writable
Gets or sets the context menu content to use.
handled: boolean
writable
Gets or sets a value indicating whether this PopulateContextMenuEventArgs has been handled.
queryLocation: Point
Gets the queried location in world coordinates.
showMenu: boolean
writable
Gets or sets a value indicating whether to actually display the context menu.

Examples

It is recommended to configure the context menu handling on the parent GraphEditorInputMode or GraphViewerInputMode instead of the ContextMenuInputMode. This involves registering for the populate-item-context-menu event instead of this event:
// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.contextMenuItems = GraphItemTypes.NODE
mode.addEventListener('populate-item-context-menu', (evt) => {
  // Get the node which is handled or null if the item is not a node
  const node = evt.item
  // Create the context menu items
  if (node !== null) {
    // Create a menu item to delete the node

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

See Also

Developer's Guide