process-analytics / bpmn-visualization-js

A TypeScript library for visualizing process execution data on BPMN diagrams
https://process-analytics.github.io/bpmn-visualization-js/
Apache License 2.0
223 stars 30 forks source link

[BUG] Issue with fit center + zoom + scrollbars #1979

Open jeromecambon opened 2 years ago

jeromecambon commented 2 years ago

When the diagram is fit as Center, and navigation and the scrollbars are enabled, one cannot move in all the diagram:

https://user-images.githubusercontent.com/17833345/169330981-f69763ae-7153-482d-a0fd-6349c3a95be7.mov

To Reproduce

Desktop

tbouffard commented 2 years ago

@jeromecambon can we recheck the repro steps in the description please? I see

Enable scrollbars: set style BPMN container style "overflow: hidden;"

Did you mean overflow: auto; or something similar?

jeromecambon commented 2 years ago

Yes, it was a typo, it is overflow: auto; I have updated the "To reproduce" section above.

tbouffard commented 2 years ago

Perfect, thanks for the feedback.

We haven't dedicated code for Fit Center when there is a scrollbar. mxGraph has such code for other fit types but after doing some basic tests, I also see errors with some or all fit types. This requires a more deeper investigation. We don't have time to work on this for now but I will keep you posted when we prioritize effort on this topic.

We haven't considered scrollbar management as something really supported in bpmn-visualization (you won't see any issues or pull requests, nor automatic tests on this topic): what you see is the mxGraph support with the default configuration which may not be accurate for our use case. This doesn't mean that we don't want to support it in the future.

tbouffard commented 2 years ago

I have just realized that we have an example about the scrollbar usage. It was introduced in August 2021 in https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.19.0 This example doesn't apply fit on load but we see the same kind of issue when zooming. Example: https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/v0.25.0/examples/diagram-navigation/diagram-navigation/index.html