refactor: simplify registration of style definitions

.github/workflows/test-e2e.yml

@@ -63,6 +63,11 @@ jobs:
           # only test Edge on Windows
           - os: windows-2022
             browser: msedge
+        exclude:
+          # TEMP skip testing Chrome on ubuntu
+          # The GH Actions runner includes a newer version of Chrome that the one matching the Chromium version installed by Playwright, so some tests fail.
+          - os: ubuntu-24.04
+            browser: chrome
     steps:
       - name: Checkout
         uses: actions/checkout@v4

docs/contributors/mxgraph-integration.md

@@ -44,7 +44,7 @@ The [style](https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxStylesheet
 is defined and registered in `StyleConfigurator`. In particular, it refers to the name of a [mxShape](https://jgraph.github.io/mxgraph/docs/js-api/files/shape/mxShape-js.html)
 used for the rendering.
 
-The `mxShape` can be a standard `mxGraph` class or a custom BPMN `mxShape` defined by the `bpmn-visualization`. The custom `mxShapes` are registered by [ShapeConfigurator](../../src/component/mxgraph/config/ShapeConfigurator.ts).
+The `mxShape` can be a standard `mxGraph` class or a custom BPMN `mxShape` defined by the `bpmn-visualization`. The custom `mxShapes` are registered by [registerShapes()](../../src/component/mxgraph/config/register-style-definitions.ts).
 which associates the `mxShape` name (used in style definition) with the `mxShape` class to be used.
 
 For more details, see [BPMN Support - How To](./bpmn-support-how-to.md).

src/component/mxgraph/GraphConfigurator.ts

@@ -15,8 +15,7 @@ limitations under the License.
 */
 
 import { BpmnGraph } from './BpmnGraph';
-import MarkerConfigurator from './config/MarkerConfigurator';
-import ShapeConfigurator from './config/ShapeConfigurator';
+import { registerEdgeMarkers, registerShapes } from './config/register-style-definitions';
 import { StyleConfigurator } from './config/StyleConfigurator';
 
 /**
@@ -37,8 +36,8 @@ export default class GraphConfigurator {
   configure(): BpmnGraph {
     this.configureGraph();
     new StyleConfigurator(this.graph).configureStyles();
-    new ShapeConfigurator().configureShapes();
-    new MarkerConfigurator().configureMarkers();
+    registerShapes();
+    registerEdgeMarkers();
     return this.graph;
   }
 

src/component/mxgraph/config/ShapeConfigurator.ts → src/component/mxgraph/config/register-style-definitions.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 Bonitasoft S.A.
+Copyright 2025 Bonitasoft S.A.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import type { mxShape } from 'mxgraph';
+import type { mxAbstractCanvas2D, mxCell, mxPoint, mxShape } from 'mxgraph';
 
 import { ShapeBpmnElementKind } from '../../../model/bpmn/internal';
-import { mxCellRenderer } from '../initializer';
+import { mxCellRenderer, mxgraph } from '../initializer';
 import {
   BusinessRuleTaskShape,
   CallActivityShape,
@@ -35,9 +35,9 @@ import { EndEventShape, EventShape, IntermediateEventShape, ThrowIntermediateEve
 import { MessageFlowIconShape } from '../shape/flow-shapes';
 import { ComplexGatewayShape, EventBasedGatewayShape, ExclusiveGatewayShape, InclusiveGatewayShape, ParallelGatewayShape } from '../shape/gateway-shapes';
 import { TextAnnotationShape } from '../shape/text-annotation-shapes';
-import { BpmnStyleIdentifier } from '../style';
+import { BpmnStyleIdentifier, MarkerIdentifier } from '../style';
 
-const registerShapes = (): void => {
+export const registerShapes = (): void => {
   // Inspired by the default shapes registration done in maxGraph
   // eslint-disable-next-line @typescript-eslint/no-explicit-any -- required by the signature of registerShape
   const shapesToRegister: [string, new (...arguments_: any) => mxShape][] = [
@@ -75,12 +75,32 @@ const registerShapes = (): void => {
     mxCellRenderer.registerShape(shapeName, shapeClass);
   }
 };
+// This implementation is adapted from the draw.io BPMN 'dash' marker
+// https://github.com/jgraph/drawio/blob/f539f1ff362e76127dcc7e68b5a9d83dd7d4965c/src/main/webapp/js/mxgraph/Shapes.js#L2796
+// prefix parameter name - common practice to acknowledge the fact that some parameter is unused (e.g. in TypeScript compiler)
+const dashMarkerFactory = (
+  c: mxAbstractCanvas2D,
+  _shape: mxShape,
+  _type: string,
+  pe: mxPoint,
+  unitX: number,
+  unitY: number,
+  size: number,
+  _source: mxCell,
+  strokewidth: number,
+  // eslint-disable-next-line unicorn/consistent-function-scoping -- Code from mxGraph example
+): (() => void) => {
+  const nx = unitX * (size + strokewidth + 4);
+  const ny = unitY * (size + strokewidth + 4);
 
-/**
- * @internal
- */
-export default class ShapeConfigurator {
-  configureShapes(): void {
-    registerShapes();
-  }
-}
+  return function () {
+    c.begin();
+    c.moveTo(pe.x - nx / 2 - ny / 2, pe.y - ny / 2 + nx / 2);
+    c.lineTo(pe.x + ny / 2 - (3 * nx) / 2, pe.y - (3 * ny) / 2 - nx / 2);
+    c.stroke();
+  };
+};
+
+export const registerEdgeMarkers = (): void => {
+  mxgraph.mxMarker.addMarker(MarkerIdentifier.ARROW_DASH, dashMarkerFactory);
+};