Minimap

[devmondo]

Hi,

could we have something like this https://github.com/bpmn-io/diagram-js-minimap

thanks!

[jerosoler]

Hi @devmondo

It could be done by listening to the events.

Or look at integrating external plugins into drawflow.

[devmondo]

@jerosoler thanks for the reply, I am not sure I understood, but I will take a second look at that.

[jerosoler]

Hi!!

I have created a demo with a minimap example.

Here the repo: https://github.com/jerosoler/drawflow-minimap-example Demo: https://jerosoler.github.io/drawflow-minimap-example/

Better late than never!

Jero

[devmondo]

just a note: i think that the mouse click and move in the map should move the rectangle to cover the mini representation of the flow. it is confusing as of now :)

many thanks again!

[jerosoler]

Uhmmm...

I'll take a look!

The problem is that drawflow has an infinite canvas and not defined by a size. And in this case we indicate a zoom to the minimap.

For example: https://www.piskelapp.com/p/agxzfnBpc2tlbC1hcHByEwsSBlBpc2tlbBiAgICAyJ2kCQw/edit This canvas is a defined by size of pixels.

I think you could do something like detect the limit of the nodes and with automatic zoom. And always show all nodes in minimap. Even if its position is at -5000px and another at + 5000px.

It is also just an example. I will work on it.

[devmondo]

@jerosoler many thanks for your hard work and continuous support for any question!

the example piskelapp.com/p/agxzfnBpc2tlbC1hcHByEwsSBlBpc2tlbBiAgICAyJ2kCQw/edit you provided is perfect!

[learnerYoung]

@jerosoler Hi, This example is inaccessible, can you republish it. thank you https://www.piskelapp.com/p/agxzfnBpc2tlbC1hcHByEwsSBlBpc2tlbBiAgICAyJ2kCQw/edit