[FEAT] Add an "halo" in the 2022 theme of the Hacktoberfest demo #556
Description
Check if we can add a "halo" on the background of the pool for the dark theme, as it is done in the Hacktoberfest website
Past experiments
As far as I (@tbouffard) remember, here is what I did
- using a static page displaying the diagram with the them (I copied the content of the bpmn-container for the Hacktoberfest 2022 dark theme)
- generate without fill color for pool and lane
- create a SVG rectangle or a path matching the boundaries of the pool (the same dimensions as the pool), without stroke
- fill it with SVG filters inspired by the web design found on Figma about Hacktoberfest 2022
- I remember that it was a painful task
- as it was done in a static page, I didn't validate that changing the project name (which triggers a mxGraph model refresh) keep the halo in the background. If not, we could repaint the halo after calling the refresh
- The opacity of the halo may be reduced (no tested)
- unfortunately, I haven't yet managed to find my experiments in my archives. I'll share them if I find them.
What I had in mind for the final implementation
- dynamically compute the size of the SVG group storing the halo based on the pool dimension
- remove the gradient color in the gateway and don't use any fill color everywhere (except for event). The black is darker than the halo.
- use a lib if this can help
- validate all use cases. The solution would probably fail with diagram navigation because of [POC] Experiment BPMN diagram navigation with CSS Transforms bpmn-visualization-js#2199, but we don't enable navigation here, so this should be OK
SVG resources for the filters
- https://drafts.fxtf.org/filter-effects/#FilterPrimitivesOverview
- https://www.w3schools.com/graphics/svg_grad_linear.asp
- https://docs.aspose.com/svg/net/drawing-basics/filters-and-gradients/ the most useful here
- https://www.npmjs.com/package/parse-svg-path may be used to get the details about the SVG elements of the pool. I managed this manually in my experiments