[BUG] The label's position of the exclusiveGateway element is incorrect

[13322211021]

Describe the bug
The exclusiveGateway label is far from the exclusiveGateway element.

To Reproduce
Please render the the test.txt(please change the suffix to .bpmn).

Screenshots
bpmn-visualization screenshot

bpmn-io screenshot

Desktop (please complete the following information):

• OS: [Mac iOS]
• Browser [chrome]
• Version [0.27.1]

[tbouffard]

Hi @13322211021
There are no label bounds in the BPMN diagram provided in the description of the issue. So, what you see are the default positions of the gateway labels.
bpmn-js places them above the gateway whereas bpmn-visualization places them at the top left. This applies to all gateway kinds and not only to exclusive gateways.

Here is how bpmn-visualization places labels by default 👇. The screenshot is taken from the non regression visual tests for version 0.27.1. Default positions haven't changed for a while, so if you are still using v0.20.1 because of #2221, defaults are the same.

Labels are supposed to be positioned at modeling time, so please consider the default positions as a fallback.
For bpmn-visualization, we chose a tradeoff to handle short and large labels. However, for short labels, they are not placed very close to the gateway.

Here are a comparison of default positions for large labels using gateway_label_default_positions_large_labels.bpmn.txt

bpmn-js	bpmn-visualization

[tbouffard]

The default position of gateway labels is defined here:

bpmn-visualization-js/src/component/mxgraph/config/StyleConfigurator.ts

Lines 213 to 225 in ba61b38

	ShapeUtil.gatewayKinds().forEach(kind => {
	const style: StyleMap = {};
	style[mxgraph.mxConstants.STYLE_SHAPE] = kind;
	style[mxgraph.mxConstants.STYLE_PERIMETER] = mxgraph.mxPerimeter.RhombusPerimeter;
	style[mxgraph.mxConstants.STYLE_STROKEWIDTH] = StyleDefault.STROKE_WIDTH_THIN;
	style[mxgraph.mxConstants.STYLE_VERTICAL_ALIGN] = mxgraph.mxConstants.ALIGN_TOP;
	// Default label positioning
	style[mxgraph.mxConstants.STYLE_LABEL_POSITION] = mxgraph.mxConstants.ALIGN_LEFT;
	style[mxgraph.mxConstants.STYLE_VERTICAL_LABEL_POSITION] = mxgraph.mxConstants.ALIGN_TOP;
	this.putCellStyle(kind, style);
	});

It is possible to change these defaults by overriding the mxGraph style applied to gateways

// assuming that bpmnVisualization is the instance of bpmn-visualization in the application
// get the mxGraph stylesheet
const styleSheet = bpmnVisualization.graph.getStylesheet()

// let's apply the changes to all kind of gateways
ShapeUtil.gatewayKinds().forEach(kind => {
  const style = styleSheet.styles[kind];
  delete style['labelPosition'];
  delete style['verticalLabelPosition'];
}

See also https://github.com/process-analytics/bpmn-visualization-examples/blob/v0.27.1/examples/custom-bpmn-theme/custom-colors/index.js for more ways to customize styles.

[tbouffard]

In conclusion, feel free to continue to open up these kinds of issues in the future. It is often difficult to understand why there are differences in rendering between BPMN tools, so it is always useful to ask or report a bug.

Recently, another user opened one about the same topic: #2253.
These questions help clarify the behavior and will help all users better understand the internals of bpmn-visualization 😃

[13322211021]

Thanks for your quick reply, I will try it.

[tbouffard]

Closing as this is not a bug.
Feel free to post new comments if you have more questions.