bpmn-visualization-js icon indicating copy to clipboard operation
bpmn-visualization-js copied to clipboard

[BUG] Issue with fit center + zoom + scrollbars

Open jeromecambon opened this issue 2 years ago • 4 comments

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

  • Enable navigation: initialize BpmnVisualization with "navigation: { enabled: true }"
  • Enable scrollbars: set style BPMN container style "overflow: auto;"
  • Fit the diagram to its container: call load() method with "{ fit: {type: bpmnvisu.FitType.Center} }"

Desktop

  • OS: MacOS
  • Browser Chrome
  • Version 101.0.4951.64

jeromecambon avatar May 19 '22 15:05 jeromecambon

@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?

tbouffard avatar Jun 14 '22 11:06 tbouffard

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

jeromecambon avatar Jun 14 '22 12:06 jeromecambon

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 avatar Jun 14 '22 16:06 tbouffard

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

tbouffard avatar Jul 04 '22 06:07 tbouffard