feat: use the "Update Style" API in the monitoring demo #486
Conversation
Remove the CSS class previously used to highlight the paths, and use the API instead. It provides better rendering results when zooming (proportions are kept).
|
@csouchet the path legends is now fixed and the colors are set dynamically using the colors defined in the style object used to use the API. I am giving a try to a custom mxGraph style definition of sequence flows to see if I can handle the limitations (arrows glitch) directly in the demo. If it works, we will decide if we move that directly in the lib later. |
| @@ -198,8 +199,49 @@ class ExecutionData { | |||
| } | |||
| }; | |||
| if (pathClass) { | |||
| data.pathClass = pathClass; | |||
| data.styleUpdate = buildStyleUpdateOptions(pathClass); | |||
There was a problem hiding this comment.
suggestion:
I thought that the property and the functions for the style of the path were not clear.
It took me a while to understand what they were referring to 🙁
There was a problem hiding this comment.
Let's rename
- styleUpdate property --> pathStyle
- buildStyleUpdateOptions function --> buildPathStyle
- buildResetStyleUpdateOptions function --> buildResetPathStyle
- pathClass variable --> pathName
- styleUpdate property --> pathStyle - buildStyleUpdateOptions function --> buildPathStyle - buildResetStyleUpdateOptions function --> buildResetPathStyle - pathClass variable --> pathName
There was a problem hiding this comment.
It's ok with the proposition in the comment #486 (comment).
Remove the CSS class previously used to highlight the paths, and use the API instead. It provides better rendering results when zooming (proportions are kept).
closes #463
Live environment of examples
https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/463_monitoring_demo_use_update-style_api/examples/index.html
Limitations
The line of the edge finishes at the same point of the top of the arrow, so the arrow seems not very sharp.
To avoid this, we should make the line finish prior to the end of the arrow . mxGraph options exist for this
Screenshots