Interactive Mini Map

[moklick]

Update: This feature is available since v11.2.0

Create a new <InteractiveMinimap /> or add props like draggable, zoomable, clickable to the existing <MiniMap /> component so that the user can use the mini map to navigate the flow.

[bcakmakoglu]

Could there potentially also be some events on Minimap nodes? Like click/dblclick or mouseovers?
For a potential usecase, where you want to click a minimap node and get it selected on the pane or something

[bcakmakoglu]

I just saw that this was suggested in another discussion already 😅

[moklick]

There were several. I locked them so that this can be the one source of truth ;) First of all we need an API for this new feature,

[Hamza-malikx]

@moklick do u have any live example. Because adding props like draggable, zoomable to existing component doesn't work for me
Is it under progress or has it been implemented?

[moklick]

WIP: #2530

preview: https://codesandbox.io/s/interactive-minimap-wo8qfw

[krvajal]

We have some clients asking for this as well. Glad to see you are working on it. I am happy to contribute, let me know how I can help.

[moklick]

Feedback is appreciated! How do you like the current state https://codesandbox.io/s/interactive-minimap-wo8qfw ?
The new version comes with four new props (all optional):

• pannable
• zoomable
• onClick(event, position)
• onNodeClick(event, node)

[krvajal]

I don't have a computer nearby this week. I tried it from my phone. I does not work on mobile (yet?).

[moklick]

thanks, I will check that.

[moklick]

Interactive Minimap is available since v11.2.0 https://github.com/wbkd/react-flow/releases/tag/11.2.0