search

xyflow / xyflow

React Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React (https://reactflow.dev) or Svelte (https://svelteflow.dev). Ready out-of-the-box and infinitely customizable.
https://xyflow.com
MIT License
21.54k stars 1.43k forks source link

Minimap's onNodeClick doesn't work when using a custom minimap node #4237

Closed mirisony closed 1 week ago

mirisony commented 2 weeks ago

Describe the Bug

When using a custom minimap node, the onNodeClick of the minimap doesn't work.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

  1. Configure basic minimap code to use a custom minimap node.
  2. Add onNodeClick to the minimap, for example: <MiniMap nodeComponent={MiniMapNode} onNodeClick={(_event, node) => { console.log(node); }} />
  3. Click on a minimap node.

Expected behavior

As a user, I expected my callback to be called

Screenshots or Videos

No response

Platform

Additional context

No response

peterkogo commented 1 week ago

The custom minimap node receives an onClick handler as a prop. Because you are in charge of the dom node you need to call the handler yourself.

<element onClick={(event) => props.onClick(event, nodeId)} />
mirisony commented 1 week ago

Thank you @peterkogo 🙏

Although - the nodeId isn't being passed in the onClick event. I took it from the the 'id' prop the MiniMapNode receives.