process-analytics / bpmn-visualization-js

A TypeScript library for visualizing process execution data on BPMN diagrams
https://process-analytics.github.io/bpmn-visualization-js/
Apache License 2.0
224 stars 31 forks source link

[FEAT] Ensure the overlay is displayed when the label is not provided (minimal size) #1170

Open csouchet opened 3 years ago

csouchet commented 3 years ago

With the current (0.15.0) implementation, the overlay is not displayed when the label is empty. The leading and trailing spaces are not taken into account in non empty string.

Tweaking the generated svg (with browser dev tools) can display something.

The following examples show the overlay that previously displayed a non empty label that has been replaced by a space (font size: 30, default font family).

Number of characters default font size font size 30
1 image image
2 image image

Generated svg with non empty label, removing the text node keep the rectangle visible

<g style="cursor: default; visibility: visible;" class="overlay-badge" data-bpmn-id="Activity_1">
  <g fill="Chartreuse" font-family="Arial,Helvetica" text-anchor="middle" font-size="33px">
    <rect fill="DimGray" stroke="Black" x="504" y="221" width="21" height="37"
          stroke-width="3" transform="translate(0.5, 0.5)"></rect>
    <text x="515" y="251.5">label</text>
  </g>
</g>

Generated svg with empty label, the rect position and dimension are very small Same result with a label that only contains spaces (1 or several).

<g style="cursor: default; visibility: visible;" class="overlay-badge" data-bpmn-id="Activity_1">
  <g fill="Chartreuse" font-family="Arial,Helvetica" text-anchor="middle" font-size="33px">
    <rect fill="DimGray" stroke="Black" x="-1" y="0" width="2" height="0"
          stroke-width="3" transform="translate(0.5, 0.5)"></rect>
  </g>
</g>

Generated svg with null or undefined label

<g style="cursor: default; visibility: visible;" class="overlay-badge" data-bpmn-id="Activity_1">
</g>
tbouffard commented 3 years ago

POC https://github.com/process-analytics/bpmn-visualization-js/pull/1293#issuecomment-844685308 shows a way to manage empty labels.