Minimap navigation breaks after resizing window

Developers Modeler
1

If I resize the width of the viewport e.g. by snapping the browser window to a side or by resizing the dev-tools, the minimap doesn’t navigate towards the point that was clicked.

If the difference in width is somewhat high, I can’t even use the minimap to get back to the diagram. The larger the difference is, the larger is the discrepency between where I want to navigate and to where the minimap actually navigates.

Can be reproduced by using the codesandbox from this thread or this codesandbox.

2

Can you share a screencast of the behavior you are describing? It will be much easier for us to reproduce and consider this as a bug.

Thanks :heart:

3

Here’s a demo. I am not dragging the box which works but clicking which is the only option for naviation if the box is ouside the minimap. bpmn minimap navigation breaks after resize

If the page goes down in the future, you can still have a look at this gif

ezgif-2-4a5d43f7a6cf

4

@Niklas_Kiefer did this help you? do you think it’s a bug? and if so do you want me to file the bug report at bpmn-js or at diagram-js-minimap or do you report the bug?

5

Thanks for sharing (and sorry for the late response)! In your gif it really looks buggy after resizing the window. I was not able to reproduce it on my machine though.

Indeed it would be great if you could open a bug issue and giving all the necessary details (steps to reproduce, adding your gif, your system information as os and browser). With this information, we can see how we can detect the root cause. Thanks already! :+1:

6

I submitted the bug at diagram-js-minimap. I also found out that clicking the minmap before resizing is key in order to reproduce it. Maybe that’s why you coudn’t reproduce it.

1 Like
7

For anyone who needs this to work properly: You have to add this snippet to your project

window.addEventListener("resize", () => {
  bpmnModeler.get("canvas").resized();
});

Source: github

In my opinion, this should be in the bpmn-js examples as well as in the readme of the minimap.

8

Feel free to open a Pull Request that improves the situation :+1: