First published in the Language finch documentation

​

Compared to the G6-Editor, the ContextMenu also has a lot less functionality and needs to do more of its own to hide the differences between the selected states. If the business needs a more complex right-click menu function, you may need to wrap a layer like the DetailPanel.

The import

import { ContextMenu } from "gg-editor";
Copy the code

use

Interface UI with AntDesign component library use

<ContextMenu
  type="node"
  renderContent={(item, position, hide) = > {
    const { x: left, y: top } = position;
    return (
      <div style={{ position: 'absolute', top.left}} >
        <Menu mode="vertical" selectable={false} onClick={hide}>
          <Menu.Item>
            <Command name={EditorCommand.Copy}>copy</Command>
          </Menu.Item>
          <Menu.Item>
            <Command name={EditorCommand.Remove}>delete</Command>
          </Menu.Item>
        </Menu>
      </div>); }} / >Copy the code

ContextMenu API

| type | menu type Can be enumerated, the canvas (canvas), and the node (nodes), edge (edge) – if the value is the node (nodes), then right-click menu only in right click on the * * * * node, will display. – If the value is edge, the right click menu will only be displayed if the right click is on an edge. – If the value is canvas, the right click menu will only be displayed if the right click is on the canvas. Default is canvas (canvas) | | — – | — – | | render content can receive options | menu is of type function. The function needs to return the DOM of renderContent (menu content). Function has three parameters, you can use, respectively is: 1. The item (the selected node or edge), (2) the position (the cursor position) 3. Hide (right-click menu hidden function) |