[QUESTION] Bizagi diagram renderer wrong

alvarosantoscwb commented 1 year ago

issue

how i can fixed this?

tbouffard commented 1 year ago

Hi @sleeptd2 I need more information to be able to answer to you.

Can you share the diagram here? Feel free to make it anonymous if it contains sensitive information.
Can you also give more details on how you get the result you show in the screenshot? Is it taken from a single demo/example or a more complex application that may interfere with bpmn-visualization?
How did you display the different colors on the BPMN elements?

All the above information will help us understand and/or reproduce what you see. Thx

tbouffard commented 1 year ago

Potential causes of the rendering issues:

2 participants seem to be defined in the diagram. The "Processo" or the "Processo principal" process should be hidden but it shapes is present in the BPMNDI part of the BPMN XML source. Possible workaround: use the ModelFilter option when loading the diagram (see https://github.com/process-analytics/bpmn-visualization-js/blob/v0.33.0/src/component/options.ts#L116-L119)
user task without label: the label is displayed on the top left of the pool. The label bounds may be wrong in the BPMNDI. This is something that we already see in the past (#2253). This may be workaround if we implement #2469, but the cause of the issue is in the BPMN source, not in bpmn-visualization.

alvarosantoscwb commented 1 year ago

Any diagram that is exported from Bizagi, this ends up happening, the ones that are exported from camunda work correctly, the colors placed by css class, i just did a quick-start, put this diagram exported from Bizagi and this happened

tbouffard commented 1 year ago

Thanks for this first set of information.

Can you please share any of the diagrams you mentioned so I can test them with bpmn-visualization and other BPMN modelers and viewers? Thx

alvarosantoscwb commented 1 year ago

Same diagram but one is imported from Bizagi another from Camunda

diagrams.zip

alvarosantoscwb commented 1 year ago

@tbouffard
do you have any idea what it could be?

tbouffard commented 1 year ago

Hi @sleeptd2

I have been able to reproduce what you mentioned with the provided diagram and https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/v0.33.0/examples/misc/compare-with-bpmn-js/index.html. This is the example that let us compare the BPMN rendering of bpmn-visualization and bpmn-js.

`bpmn-js@11.1.1`	`bpmn-visualization@0.33.0`

Conclusions

The rendering issue you mentioned is the same with both bpmn-visualization and bpmn-js. The problem is with the content of the diagram, not with the way the two libraries handle the rendering (see below for more details). If Bizagi exports it this way and you have only modeled one process/participant in the tool, there is probably a problem with Bizagi. Otherwise, you may have made an unwanted and undetected change while using Bizagi, which created the problem.

Diagram analysis

The model contains 2 participants

line 172

<participant id="Id_3e8a82a9-2c3b-4b88-b928-bd0bf1131343" name="Processo principal" processRef="Id_deea4171-154c-4a86-b221-19cdfdbd694c">

line 187

<participant id="Id_2cc4ca13-3507-4512-b2ad-9c564f686ac2" name="Processo" processRef="Id_23cc42fc-17a7-46d8-9eae-9ed2ee354f11">

Both processRef are valid and the participants both have a related BPMNShape. So they must be rendered.

The positions of the pools are very close (x and y) and the dimensions are the same, so they overlap

"Processo principal"

<Bounds x="30" y="30" width="700" height="350" ...>

"Processo"

<Bounds x="5" y="4" width="700" height="350"

Discrepancies between bpmn-visualization and bpmn-js

Pool: the default fill color is

in bpmn-js: white with opacity lower than 100%, so we distinguish the border of "Processo"
in bpmn-visualization: transparent, so we see the whole border and content of "Processo"

Pool fonts: bpmn-visualization respects the LabelStyle whereas bpmn-js doesn't. Both pools reference a LabelStyle defining

<Font name="Segoe UI" size="10" isBold="true" isItalic="false" isUnderline="false" isStrikeThrough="false

Position of Label of the tasks The Label positions of the tasks are outside of the Task themselves in the BPMN source.

in bpmn-js: centered within the task. bpmn-js doesn't honor (at least by defaut) the Label Bounds defined in the diagram for tasks.
in bpmn-visualization: outside of the process, according to the Label bounds defined in the diagram

For instance, see the "Tarefa 1" BPMNShape

<BPMNShape id="DiagramElement_689aeebb-bd50-432e-9912-78fce30e43b0" bpmnElement="Id_e21d8d76-9530-4f0b-a371-be61cc6a61df">
  <extension xmlns="http://www.omg.org/spec/DD/20100524/DI" />
  <Bounds x="218" y="139" width="90" height="60" xmlns="http://www.omg.org/spec/DD/20100524/DC" />
  <BPMNLabel id="DiagramElement_5fb0a30a-49b2-4433-afc1-30dfabb16f0d" labelStyle="Style_e7c5fb1b-44ad-4689-b619-84fc19ce4914">
    <extension xmlns="http://www.omg.org/spec/DD/20100524/DI" />
    <Bounds x="0" y="0" width="90" height="60" xmlns="http://www.omg.org/spec/DD/20100524/DC" />
  </BPMNLabel>
</BPMNShape>

Possible workaround with `bpmn-visualization`

Note: these are only workaround, the best way to fix the problem is to fix the BPMN source.

The workaround is exactly what I described in https://github.com/process-analytics/bpmn-visualization-js/issues/2590#issuecomment-1481342256

Displaying a single Pool If you want to only display the "Processo principal", you use the ModelFilter option when loading the diagram (see bpmn-visualization-js/options.ts at v0.33.0 · process-analytics/bpmn-visualization-js · GitHub) to filter the pool.

bpmnVisualization.load(xml, {
  modelFilter: { 
    pools: {
      name: 'Processo principal'
   },
});

About the task whose label is displayed on the top left of the pool. The label bounds is wrong in the BPMNDI. This is something that we already saw in the past (#2253). This may be workaround if we implement #2469. Please vote for it if you cannot fix the BPMN source. If you want bpmn-visualization to ignore the LabelStyle because you cannot change the font of the pool (font family, bold) in the BPMN source, please vote for #2468.

alvarosantoscwb commented 1 year ago

Got it, thanks for the support I'll try those alternatives

process-analytics / bpmn-visualization-js