Rete context menu plugin (for Vue.js v2)

Rete.js plugin

Check out vue3 branch if you need version for Vue.js v3

importContextMenuPlugin,{Menu,Item,Search}from'rete-context-menu-plugin';editor.use(ContextMenuPlugin,{searchBar: false,// true by defaultsearchKeep: title=>true,// leave item when searching, optional. For example, title => ['Refresh'].includes(title)delay: 100,allocate(component){return['Submenu'];},rename(component){returncomponent.name;},items: {'Click me'(){console.log('Works!')}},nodeItems: {'Click me'(){console.log('Works for node!')},'Delete': false,// don't show Delete item'Clone': false// or Clone item},// ORnodeItems: node=>{if(node.name==='Add'){return{'Only for Add nodes'()=>{console.log('Works for add node!')},};}return{'Click me'(){console.log('Works for node!')}}},vueComponent: CustomVueComponent// extends Menu});

Options	Description	Default
searchBar	Showing search bar	true
delay	Delay hide, ms	1000
allocate	function for placing of components into submenu	() => []
rename	function for renaming of items	component => component.name
items	custom items (Object with nested objects and functions)	{}
nodeItems	custom items for Node menu or a function that returns node items	{}

You can arbitrarily put a component in a submenu. Examples:

allocate(){return["Single submenu"]}

allocate(component){returncomponent.path}// where path is a stack of menu for every component

allocate(component){returnnull}// exclude component from menu items

To change the items that create nodes, you may need to change the name.

classMyComponent{constructor(){super("My comp");this.contextMenuName="Add My comp";}}///rename(component){returncomponent.contextMenuName||component.name}

Prevent showing context menu

editor.on('showcontextmenu',({ e, node })=>{// e - MouseEvent, node - Node instance or nullreturnBoolean(node);// show context menu for nodes only});

Prevent context menu for particular Node

classAddComponentextendsRete.Component{constructor(){// ...this.data.noContextMenu=true;}// ...editor.on('showcontextmenu',({ node })=>{return!node||!editor.components.get(node.name).data.noContextMenu;});