Skip to content

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

@tbouffard

Description

@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:

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

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

  • 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.

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions