iVis-at-Bilkent / cytoscape.js-context-menus

A Cytoscape.js extension to provide context menu around elements and core instance
MIT License
86 stars 41 forks source link

Is it possible to generate a fresh context menu during every right-click event on a node? #68

Closed lilfrootyloops closed 2 years ago

lilfrootyloops commented 2 years ago

Description: As I mentioned in my other issue, after implementing functionality to dynamically add items to a submenu depending on the node that has been selected using appendMenuItems(), I'm currently running into a runtime error whenever I open a context menu for either the same or a different node after opening a context menu prior. The error is as follows:

Error: There is already an element with id=swagSauce in the context menu

Rather than setting conditions to check whether a menu item with a particular ID already exists and then preventing appendMenuItems() from running (which as I mentioned in the other issue I raised, I do not know how to do & would like to understand how to do so), would it be possible to just clear the context menu and generate a fresh one during every right-click event on a node? If so, I'd really appreciate it if someone could explain how I can do that. I've included my code below:

Code:

let submenuItems = [];

function Object(x, y) {
    this.id = x;
    this.content = `${x}: ${y}`;
    this.tooltipText = `${x}: ${y}`;
    this.onClickFunction = () => {
        testFunction(x, y)
    };
};

const options = {
    evtType: 'cxttap',
    menuItems: [
        {
            id: 'one',
            content: 'This is the first option in the menu',
            selector: 'node',
            onClickFunction(evt) {
                genericFunctionName(evt, 'one')
            },
        },
        {
            id: 'two',
            content: 'This is the second option in the menu',
            selector: 'node',
            onClickFunction(evt) {
                genericFunctionName(evt, 'two')
            },
        },
        {
            id: 'three',
            content: 'This is the third option in the menu',
            selector: 'node',
            submenu: [],
        },
    ],
};

let instance = cyRef.current.contextMenus(options);

cyRef.current.on('cxttap', "node", function(evt) {
    for (const variable in evt.target.data('properties')) {
        submenuItems.push(new Object(variable, evt.target.data('properties')[variable]));
    }

    instance.appendMenuItems(submenuItems, "three");
}

Additional Context I am using Cytoscape Context Menus v4.1.0.