How to add a contextual menu to a node ?

[clabnet]

I would add a right click contextual menu to a custom node.
I think I can use the vue-simple-context-menu or other similar component,
but I'm not able to running it using VueFlow. Any suggestion please ? Thank's

[bcakmakoglu]

@clabnet I checked the component you linked and you just have to stop the propagation of the click - otherwise "vue-simple-context-menu" believes there was a click outside and immediately closes the context menu again

So you can just do something like this

onNodeClick(({ event }) => {
  event.stopImmediatePropagation()
  vueSimpleContextMenu.value.showMenu(event, { name: 'foo' })
})

You have to be aware though that this component will not scale by itself (when you scroll to zoom in and out, the context menu stays the same size)

You can "fix" that by using the menu in your node component but that will cause the context menu to appear somewhere different than the node, simply because "vue-simple-context-menu" uses MouseEvent "pageX" and "pageY" values as left and top offsets

You can assign a more fixed position to the context menu though by doing something like this, inside your custom node

onNodeClick(({ event, node }) => {
  if (node.id === props.id) {
    event.stopImmediatePropagation()
    vueSimpleContextMenu.value.showMenu({ pageX: props.dimensions.width - 75, pageY: props.dimensions.height + 5 }, { name: 'foo' })
  }
})

import type { Dimensions, NodeProps } from '@braks/vue-flow'

interface CustomNodeProps extends NodeProps {
  id: string
  dimensions: Dimensions
}

[kvedula18]

I've used this approach to provide context menu to add additional nodes from an existing node, i.e, creating a new node, and connecting the new node to the current node. That works great. But, I'm running into a small problem.

I've a node type called DecisionNode (a Diamond) which has 1 target handle, and 3 source handles on each of the vertices. When I use the UI to connect the nodes I could connect one for each of the source handles. But, when I do programmatically, after the first connection, all handles are becoming non connectable. On further observation I noticed that the classes "connectable connectionindicator" are missing from these handles. Is there a way I can set these classes programmatically?

const newNodeId = getId();
  var newNode={id:newNodeId, position: position, type:type, data:{}, label:`${type} node`};
  addNodes([newNode]);

var newEdge = {
    source: node.id, target: newNode.id,
    type: "smoothstep", markerEnd: MarkerType.ArrowClosed,
    updatable: true, markerWidth: 5,
    label: '', data: {operator:'', value:''}
  };
  
  addEdges([newEdge]);

  updateNodeInternals();

[bcakmakoglu]

That makes very little sense because addNodes has nothing to do with the class names on a handle.

If you can provide a sandbox reproduction for this I could help debugging the issue, otherwise I have no idea what you're doing and what's causing this ^^

[kvedula18]

Let me clarify this a little. Its not the addNode, its the addEdges that's doing it. Here is the sequence.

I create Node-1. It has handles, and they are connectable. If I use the handles to connect them to any other node, they work.

I create Node-2. It has handles, and they are connectable. If I use the context menu to create a new node, which calls the above code, where, I create a new Node-3 (programmatically) and connect Node-2 and Node-3 using addEdges. Now Node-3 has proper handles that are connectable, but Node-2 has two handles that are not connected, but do not have the 'connectable connectionindicator' classes.

Hope this is clear, else, I can share more code.

[kvedula18]

Upon further review, I realized this is because I was adding the handles to the decision node, and have set them to "single" for connectable property. However, when an edge is added to that node, it allowed only one source connection, even though there are 3 source handles.
It would be nice to have number of connections restriction based on number of handles or some other property.

[bcakmakoglu]

You can pass a callback function to the connectable prop and validate from there if it's still connectable or not.

Though I understand what you mean, it might be confusing that "single" means only one connection per node instead of handle (which it seems to be atm, I haven't checked the code 😅)