Hi I am trying to use https://github.com/iVis-at-Bilkent/cytoscape.js-context-menus to create context menus in my nodes but am stuck. I would like to display node attributes. Below is my code. Could I get some help please?
<CytoscapeComponent
elements={props.elements}
style={ {
height: sizeHeight + 'px',
cursor: my_cursor
} }
cy={cy => {
cy.on('add', 'node', _evt => {
cy.layout(layout).run()
cy.fit()
setCy(cy)
})
cy.on('mouseover', 'node', (evt) => {
changeCursor('pointer')
//makePopper(evt.target)
});
cy.on('mouseout', 'node', (evt) => {
changeCursor('default')
var options = {
// Customize event to bring up the context menu
// Possible options https://js.cytoscape.org/#events/user-input-device-events
evtType: 'tap',
// List of initial menu items
// A menu item must have either onClickFunction or submenu or both
menuItems: [
{
content: 'test',
selector: 'node',
onClickFunction: function (evt) {
console.log(evt.target.data('123'))// The function to be executed on click
//console.log('remove element');
},
show: false
},
{
id: 'test',
content: 'test1',
selector: 'node',
coreAsWell: false,
show: true,
onClickFunction: function (evt) {
console.log('test')// The function to be executed on click
//console.log('remove element');
},
}
cy.contextMenus(options);
}