-
Notifications
You must be signed in to change notification settings - Fork 29
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[POC] Experiment BPMN diagram navigation with CSS Transforms #2199
base: master
Are you sure you want to change the base?
Conversation
…nsforms in bpmn-visualization
…ng - needed adaptations This was working with scrollbars as in draw.io but not without In BpmnGraph, adapt the code to make it work. The panGraph code update the "transform" attribute directly during the pan operations. Once pan ends, the transform is set to the same value by the regular code
🎊 PR Preview 1718816 has been successfully built and deployed to https://process-analytics-bpmn-visualization-js-demo_preview-pr-2199.surge.sh 🕐 Build time: 20.112s 🤖 By surge-preview |
🎊 PR Preview 1718816 has been successfully built and deployed to https://process-analytics-bpmn-visualization-js-doc_preview-pr-2199.surge.sh 🕐 Build time: 13.066s 🤖 By surge-preview |
B.2.0 navigation examples v0.26.0B.2.0-navigation_v0.26.0.mp4commit 150a01dB.2.0-navigation_PR_2199_commit_150a01d.mp4 |
✔️ External DOM modifications are not dropped anymore. v0.26.0Modifications are dropped after pan (or zoom or fit) external_DOM_update_v0.26.0-2022-08-26_17.09.25.mp4commit 1718816Modifications are kept after navigation external_DOM_update_PR_2199_commit_1718816e150a01d-2022-08-26_17.03.40.mp4 |
Kudos, SonarCloud Quality Gate passed! |
DISCLAIMER: This is a POC it is not intended to be merged. Tests can fail, SonarCloud complains and force-push can occur at any time
TODO description in progress
Rationale
By default, mxGraph manages pan and zoom/fit by recomputing and rendering the graph again (this involves DOM manipulation). This has bad performances and decreases the User Experience.
See maxGraph/maxGraph#2 (comment), jgraph/mxgraph#204 or jgraph/mxgraph#265
Notice that if the container used to display the graph has scrollbars, the pan is managed by default by using the scroll bars, which is cheap.
As part of the support of the "zoom with the mouse wheel" in
bpmn-visualization
, we have been forced to dothrottle/debounce
to limit lags, but lags can occur when using the zoom API (currently, there is no throttle/debounce on it). Others like draw.io, the mxGraph graphEditor example used the same technique with features called fastZoomEnabled or lazyZoomEnabled.However, if this solution avoids lags, the zoom experience isn't smooth. There is a delay between mouse wheel scroll and the actual application of the new scale, especially because of the denounce.
In addition, if updates are done on the DOM elements related to the diagrams prior navigation, they are removed after navigation. This limits a lot the customization that can be done outside
bpmn-visualization
.We introduced the CSS API not only to help people applying CSS classes (we hide selectors) but also to ensure the classes remained applied when mxGraph redo rendering.
However, this doesn't cover all use cases. For instance
I also recently see warnings in the DevTools console with Chrome 104.0.5112.101 (Official build) (64 bits) or Brave 1.42.97 Chromium: 104.0.5112.102 (Official build) (64 bits)
With reference file B.2.0, at load time (whatever the fit type is), when zooming, doing fit or panning
Solution experimented here
Instead of doing new rendering, the zoom/fit and move should rely on the transform attribute to manage the scaling and the translation of the graph. This delegates all navigation operations to the browser as this is generally done in diagramming and rendering solutions.
In draw.io and in the mxGraph graphEditor examples, there is a
useCssTransforms
property in theGraph
prototype (which inherits from themxGraph
prototype).https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/examples/grapheditor/www/js/Graph.js#L1647-L1660
<-- I thought that a code snippet will be displayed with a specific commit but it doesn't work
https://github.com/jgraph/mxgraph/blob/273779f744f4ff9012847a423bbb620839da58bb/javascript/examples/grapheditor/www/js/Graph.js#L1647-L1660
-->
There are also a bunch of code (function prototype redefinition mainly in
mxGraph
andmxGraphView
) to change the xxx. to continue....Implementation done here
I have integrated the [email protected] and [email protected] code related to
useCssTransforms
.Then
The code can still managed the zoom and pan as curently done in the bpmn-visualization release.
It could be possible to make the usage of CSS transforms an option for evaluation.
1st results
With B.2.0,
Possible next steps
Run performance tests to have more insights
The e2e tests for the BPMN rendering fail: the differences seem coming for the scaling computation (may be a rounding issue)
Investigate what is happening when adding overlays (see xxxx)
Review the value of the zoomFactor that may not be accurate for CSS transforms. We may need to make it configurable at initialization and/or at runtime.