Context menu wrapper

The context menu in common-canvas can be used in your application by importing the ContextMenuWrapper React component. Aside from providing a standard context menu to allow users to select different actions, this context menu also allows for configuration of submenus as a menu item, as well as a visual dividers.

Step 1: Import Context Menu Wrapper
Step 2: Pass in the correct props

To use Context Menu Wrapper in your React application you need to import the ContextMenuWrapper React component from the common-canvas library. It’s recommended to use All Components if common-canvas is also being imported, otherwise use ContextMenuWrapper only option.

All components

import {ContextMenuWrapper} from "@elyra/canvas";

ContextMenuWrapper only

import ContextMenuWrapper from "@elyra/canvas/dist/lib/context-menu";

Step 2: Pass in the correct props

contextMenuDef array (required): an array of menu item objects consisting of action and label. You can also pass in a divider item.

const menuDef = [
    { action: ACTION.BUILD, label: "Build" },
{ action: ACTION.EXTEND, label: "Extend" },
{ action: ACTION.CLEAR, label: "Clear" },
{ divider: true },
{ action: ACTION.SCORE, label: "Score" },
];

containingDivId string (required): the id of the element that the context menu will be absolutely positioned inside. typically, the page element is used.
contextMenuPos object (required): the position of the context menu within the containing div.

const menuPos = { x: 500  , y: 300  };

*contextMenuActionHandler func (required): this handler is where context menu actions are defined.

contextMenuActionHandler(action) {
    switch (action) {
       case "BUILD":
         break;
       case "EXTEND":
         break;
       default:
        }
}

closeContextMenu func (required): this handler will be called when the context menu is closed.
stopPropagation bool (optional): this is optional and only for very specific, uncommon use cases. When this flag is set, if a user clicks outside the context menu, the event will not bubble to parent elements, preventing parent event handlers from being called.

Example

const contextMenuWrapper = (
    <ContextMenuWrapper
    contextMenuDef={menuDef}
        containingDivId="main-page"
        contextMenuPos={menuPos}
    contextMenuActionHandler={this.contextMenuActionHandler}
        closeContextMenu={this.props.closeContextMenu}
/>
);

Common Canvas: Customizing node layout

Common Canvas: External subflows support

Context menu wrapper

Step 1: Import Context Menu Wrapper

Step 2: Pass in the correct props