Skip to content
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

[FEAT] Add an "halo" in the 2022 theme of the Hacktoberfest demo #556

Open
tbouffard opened this issue Sep 25, 2023 · 0 comments
Open

[FEAT] Add an "halo" in the 2022 theme of the Hacktoberfest demo #556

tbouffard opened this issue Sep 25, 2023 · 0 comments
Labels
enhancement New feature or request
Milestone

Comments

@tbouffard
Copy link
Member

tbouffard commented Sep 25, 2023

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

hacktoberfest_halo_experiment_20220927

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

@tbouffard tbouffard added the enhancement New feature or request label Sep 25, 2023
@tbouffard tbouffard added this to the 2023 Q3 milestone Sep 25, 2023
@tbouffard tbouffard self-assigned this Sep 25, 2023
@tbouffard tbouffard modified the milestones: 2023 Q3, 2023 Q4 Oct 3, 2023
@tbouffard tbouffard removed their assignment Oct 10, 2023
@tbouffard tbouffard modified the milestones: 2023 Q4, 2024 Q1 Jan 8, 2024
@tbouffard tbouffard modified the milestones: 2024 Q1, 2024 Q3-Q4 Aug 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
Status: Todo
Development

No branches or pull requests

1 participant