[BUG] Activity name in wrong position

[NourEldin-Ali]

Describe the bug
The first activity name in wrong position.

To Reproduce
Steps to reproduce the behavior:

1. Built bpmn model using camunda
2. Load the bpmn file extracted from Camunda in bpmn-visualization
3. First activity name is in wrong position

Screenshots
bpmn-visualization (your library) screenshot

Camunda screenshot

bpmn-js screenshot

Desktop:

• OS: windows 11
• Browser: chrome v105.0.5195.102

Additional context
This zip file contains two bpmn files that I tried BPMN-model.zip

[tbouffard]

Thanks for providing the BPMN files, I have been able to reproduce what you see.

The issue you see is due to the values of the BPMN Label Bounds in the BPMN files.

For instance, in delta-BPMN.bpmn (used to provide the screenshots in the description of the issue), the coordinates of the labels are very different from the coordinates of the shape:

<bpmndi:BPMNShape id="S1401821444475__f0257a8e-1aca-45ce-8d51-42e43d3c57f0" bpmnElement="SendOutAppForm"
                  color:background-color="#ffffff" color:border-color="#000000">
  <dc:Bounds x="328" y="156" width="83" height="68" />
  <bpmndi:BPMNLabel color:color="#000000">
    <dc:Bounds x="244.17283948800343" y="271.2962968958858" width="82.99999999999997" height="26" />
  </bpmndi:BPMNLabel>
</bpmndi:BPMNShape>

Using the following label bounds fixes the display. See BPMN-model_label_bounds_fixed.zip that also includes fixed label bounds for Mortgage.bpmn.

<bpmndi:BPMNLabel color:color="#000000">
  <dc:Bounds x="330" y="175" width="78" height="26" />
</bpmndi:BPMNLabel>

bpmn-visualization respects the label bounds and label style values for all BPMN elements. bpmn-js and the Camunda Modeler don't use (at least by default) the label bounds of the BPMN activities. That's why the label are correctly positionned with the 2 tools but not with bpmn-visualization.
In addition, Camunda tools always ignore Label Style, so that's also why the font family and size are not the same than with bpmn-visualization when displaying the Mortgage.bpmn diagram.

Here is a comparison of the Mortgage diagram that shows the label style differences

bpmn-visualization	bpmn-js

When you import the diagram in demo.bpmn.io and you move an activity, the label are correctly displayed within the activity.
But when you export the diagram, the label bounds keep the original values you had at import time.
This may explain why the label bounds are incorrect in the provided files.

Please let me know if you need more explanations.