Problem Summary:
We are using vis-network library to show graph visualization. We want to show a custom menu whenever a user right clicks on a node in canvas or presses space key.
We face an issue for limited set of users. On right click, instead of custom menu, browser menu shows up; space key does not show the custom menu either.
Sample code is as below.
Code (in typescript) :
import { Network } from 'vis-network/standalone';
export class GraphNetwork {
network: Network
selectNodeEvent: any
// network is being created successfully with container, data and options and graph is visible on canvas
this.network = new Network(container, data, options);
this.network.on('oncontext', (event) => {
handleRightClick(event);
});
this.network.on('hoverNode', (event) => {
// some logic for hove node working perfectly
});
this.network.on('selectNode', (event) => {
this.selectNodeEvent = event;
});
document.addEventListener('keyup', (event) => {
if (event.code === 'Space') {
handleRightClick (this. selectNodeEvent);
}
});
handleRightClick (eventPayload){
eventPayload.event.preventDefault()
document.addEventListener('contextmenu', (event) =>
event.preventDefault()
);
const nodeId = this.network.getNodeAtPosition(eventPayload.event.pointer.DOM);
// based on the nodeId will determine what menu to show from here
.
.
.
.
}
Any help, suggestion or comment will be great. Thanks in advance