[FEAT] Enhance comparison example with full bpmn-js compatibility options

[tbouffard]

Is your feature request related to a problem? Please describe.

The current compare-with-bpmn-js example shows some rendering differences between bpmn-js and bpmn-visualization, but it does not let users activate all bpmn-visualization options that can mimic bpmn-js behavior.
This reduces its usefulness when investigating user feedback and troubleshooting.

Two new rendering options added in 0.48.0 are not demonstrated:

• label style differences ([FEAT] Provide an option to ignore BPMN LabelStyles bpmn-visualization-js#2468)
• activity label bounds ([FEAT] Provide an option to ignore BPMN Label Bounds of activities bpmn-visualization-js#2469)

These are important because bpmn-js ignores label styles and activity label bounds.
Past issues related to these differences include:

• activity label bounds ignored by bpmn-js: [BUG] Activity name in wrong position bpmn-visualization-js#2253
• differences linked to label bounds: [QUESTION] Bizagi diagram renderer wrong bpmn-visualization-js#2590 (comment)

Describe the solution you'd like

Allow users to apply or not the rendering options that mimic bpmn-js behavior. This will help to better understand the differences between the 2 libraries.s

The example should:

• Add a single checkbox that enables or disables all relevant bpmn-visualization options at once (to match bpmn-js behavior).

• Add an information icon that displays a tooltip summarizing which options are enabled.

• Provide a built-in comparison BPMN diagram that includes:

  • BPMN in color and bioc
  • tasks with incorrect label bounds
  • label style differences
  • BPMN elements unsupported by bpmn-visualization (mainly artifacts)

• Provide a second diagram where BPMN elements do not define label bounds, to show default behavior differences

  • see gateway feedback: [BUG] The label's position of the exclusiveGateway element is incorrect bpmn-visualization-js#2306

• Automatically load the comparison diagram when the page starts.

Additional context

Technical constraints:

• Rendering options can only be applied when creating a BpmnVisualization instance.
  Changing the checkbox must therefore create a new instance and dispose the previous one using the dispose feature from: feat: add dispose method to BpmnVisualization bpmn-visualization-js#3415 (available in 0.48.0).

• When a diagram is loaded, the application should store it and reload it after creating the new instance.

[theabhayprajapati]

can we edit BPMN diagram using bpmn-visualization?

[tbouffard]

can we edit BPMN diagram using bpmn-visualization?

Hi, no it is a viewer only, not a modeler.