Merge branch 'master' into copilot/fix-843b1ce6-17c8-4e97-aa4d-a934b93a1f70

# Conflicts:
#	src/component/mxgraph/renderer/StyleComputer.ts
#	src/component/options.ts

Author: tbouffard

dev/ts/shared/main.ts

@@ -26,6 +26,7 @@ import type {
   ModelFilter,
   Overlay,
   PoolFilter,
+  RendererOptions,
   StyleUpdate,
   ZoomType,
 } from '../../../src/bpmn-visualization';
@@ -310,12 +311,24 @@ export function startBpmnVisualization(config: BpmnVisualizationDemoConfiguratio
   log(`Initializing BpmnVisualization with container:`, config.globalOptions.container);
 
   const parameters = new URLSearchParams(window.location.search);
-  const rendererIgnoreBpmnColors = parameters.get('renderer.ignore.bpmn.colors');
-  if (rendererIgnoreBpmnColors) {
-    const ignoreBpmnColors = rendererIgnoreBpmnColors === 'true';
-    log('Ignore support for "BPMN in Color"?', ignoreBpmnColors);
-    !config.globalOptions.renderer && (config.globalOptions.renderer = {});
-    config.globalOptions.renderer.ignoreBpmnColors = ignoreBpmnColors;
+
+  // Always initialize renderer options
+  !config.globalOptions.renderer && (config.globalOptions.renderer = {});
+
+  // Mapping between query parameter names and RendererOptions properties
+  const rendererParameterMappings: Record<string, keyof RendererOptions> = {
+    'renderer.ignore.bpmn.colors': 'ignoreBpmnColors',
+    'renderer.ignore.label.style': 'ignoreBpmnLabelStyles',
+  };
+
+  // Process renderer parameters
+  for (const [parameterName, optionKey] of Object.entries(rendererParameterMappings)) {
+    const parameterValue = parameters.get(parameterName);
+    if (parameterValue) {
+      const optionValue = parameterValue === 'true';
+      log(`Setting renderer option '${optionKey}':`, optionValue);
+      config.globalOptions.renderer[optionKey] = optionValue;
+    }
   }
 
   bpmnVisualization = new ThemedBpmnVisualization(config.globalOptions);

package-lock.json

@@ -105,7 +105,7 @@
   },
   "dependencies": {
     "@typed-mxgraph/typed-mxgraph": "~1.0.8",
-    "es-toolkit": "~1.39.3",
+    "es-toolkit": "~1.39.10",
     "fast-xml-parser": "5.2.5",
     "mxgraph": "4.2.2"
   },

package.json

@@ -39,11 +39,13 @@ import { BpmnStyleIdentifier } from '../style';
  */
 export default class StyleComputer {
   private readonly ignoreBpmnColors: boolean;
+  private readonly ignoreBpmnLabelStyles: boolean;
   private readonly ignoreBpmnActivityLabelBounds: boolean;
   private readonly ignoreBpmnTaskLabelBounds: boolean;
 
   constructor(options?: RendererOptions) {
     this.ignoreBpmnColors = options?.ignoreBpmnColors ?? true;
+    this.ignoreBpmnLabelStyles = options?.ignoreBpmnLabelStyles ?? false;
     this.ignoreBpmnActivityLabelBounds = options?.ignoreBpmnActivityLabelBounds ?? false;
     this.ignoreBpmnTaskLabelBounds = options?.ignoreBpmnTaskLabelBounds ?? false;
   }
@@ -118,7 +120,7 @@ export default class StyleComputer {
     const styleValues = new Map<string, string | number>();
 
     const font = bpmnCell.label?.font;
-    if (font) {
+    if (font && !this.ignoreBpmnLabelStyles) {
       styleValues.set(mxConstants.STYLE_FONTFAMILY, font.name);
       styleValues.set(mxConstants.STYLE_FONTSIZE, font.size);
       styleValues.set(mxConstants.STYLE_FONTSTYLE, getFontStyleValue(font));

src/component/mxgraph/renderer/StyleComputer.ts

@@ -197,6 +197,15 @@ export type ParserOptions = {
  * @since 0.35.0
  */
 export type RendererOptions = {
+  /**
+   * If set to `true`, ignore the label bounds configuration defined in the BPMN diagram for all activities.
+   * This forces the use of default label positioning instead of the bounds specified in the BPMN source.
+   * Activities include tasks, sub-processes, and call activities.
+   *
+   * @default false
+   * @since 0.48.0
+   */
+  ignoreBpmnActivityLabelBounds?: boolean;
   /**
    * If set to `false`, support the "BPMN in Color" specification with a fallback with bpmn.io colors. For more details about the support, see
    * {@link https://github.com/process-analytics/bpmn-visualization-js/pull/2614}.
@@ -207,14 +216,13 @@ export type RendererOptions = {
    */
   ignoreBpmnColors?: boolean;
   /**
-   * If set to `true`, ignore the label bounds configuration defined in the BPMN diagram for all activities.
-   * This forces the use of default label positioning instead of the bounds specified in the BPMN source.
-   * Activities include tasks, sub-processes, and call activities.
+   * If set to `true`, ignore the font configurations defined in the BPMN LabelStyles.
+   * This ensures font consistency in the rendered diagram.
    *
    * @default false
    * @since 0.48.0
    */
-  ignoreBpmnActivityLabelBounds?: boolean;
+  ignoreBpmnLabelStyles?: boolean;
   /**
    * If set to `true`, ignore the label bounds configuration defined in the BPMN diagram for tasks only.
    * This forces the use of default label positioning for tasks instead of the bounds specified in the BPMN source.

src/component/options.ts

@@ -46,10 +46,12 @@ class BpmnPage {
   ) {}
 
   async expectAvailableBpmnContainer(options?: PageWaitForSelectorOptions): Promise<void> {
-    pageCheckLog('Expecting the BPMN container available (confirm bpmn-visualization initialization)');
+    pageCheckLog('Waiting for the BPMN container to be initialized (verifying bpmn-visualization setup)');
+    // Check that mxGraph updated the DOM with the SVG element. This is done during the bpmn-visualization initialization.
+    // See BpmnQuerySelectors, the 2nd 'g' node contains the BPMN elements
     // eslint-disable-next-line jest/no-standalone-expect
-    await expect(this.page).toMatchAttribute(`#${this.bpmnContainerId}`, 'style', /cursor: default/, options);
-    pageCheckLog('BPMN container available');
+    await expect(this.page).toHaveSelector(`#${this.bpmnContainerId} > svg > g > g:nth-child(2)`, options);
+    pageCheckLog('BPMN container initialized');
   }
 
   async expectPageTitle(title: string): Promise<void> {

test/shared/visu/bpmn-page-utils.ts

@@ -479,6 +479,61 @@ describe('Style Computer', () => {
     );
   });
 
+  describe('compute style - ignore BPMN label styles', () => {
+    describe.each([[undefined], [false], [true]])(`Ignore BPMN label styles (renderer option): %s`, (ignoreBpmnLabelStyles: boolean) => {
+      const styleComputer = new StyleComputer(ignoreBpmnLabelStyles === undefined ? {} : { ignoreBpmnLabelStyles });
+      const expectFontStyles = !(ignoreBpmnLabelStyles ?? false);
+
+      function computeStyleWithIgnoreLabelStyles(element: Shape | Edge): string {
+        return styleComputer.computeStyle(element, element.label?.bounds);
+      }
+
+      describe('shapes', () => {
+        it('shape with font family only', () => {
+          const shape = new Shape('id', newShapeBpmnElement(ShapeBpmnElementKind.TASK_SCRIPT), undefined, new Label(toFont({ name: 'Roboto' }), undefined));
+          const expectedFontStyle = expectFontStyles ? ';fontFamily=Roboto' : '';
+          expect(computeStyleWithIgnoreLabelStyles(shape)).toBe(`scriptTask${expectedFontStyle}`);
+        });
+
+        it('shape with bold font', () => {
+          const shape = new Shape(
+            'id',
+            newShapeBpmnElement(ShapeBpmnElementKind.GATEWAY_EXCLUSIVE),
+            undefined,
+            new Label(toFont({ name: 'Courier', size: 9, isBold: true }), undefined),
+          );
+          const expectedFontStyle = expectFontStyles ? ';fontFamily=Courier;fontSize=9;fontStyle=1' : '';
+          expect(computeStyleWithIgnoreLabelStyles(shape)).toBe(`exclusiveGateway${expectedFontStyle}`);
+        });
+
+        it('shape with italic font', () => {
+          const shape = new Shape(
+            'id',
+            newShapeBpmnElement(ShapeBpmnElementKind.EVENT_INTERMEDIATE_CATCH),
+            undefined,
+            new Label(toFont({ name: 'Arial', isItalic: true }), undefined),
+          );
+          const expectedFontStyle = expectFontStyles ? ';fontFamily=Arial;fontStyle=2' : '';
+          expect(computeStyleWithIgnoreLabelStyles(shape)).toBe(`intermediateCatchEvent${expectedFontStyle}`);
+        });
+      });
+
+      describe('edges', () => {
+        it('edge with strike-through font', () => {
+          const edge = new Edge('id', newSequenceFlow(SequenceFlowKind.CONDITIONAL_FROM_ACTIVITY), undefined, new Label(toFont({ size: 14.2, isStrikeThrough: true }), undefined));
+          const expectedFontStyle = expectFontStyles ? ';fontSize=14.2;fontStyle=8' : '';
+          expect(computeStyleWithIgnoreLabelStyles(edge)).toBe(`sequenceFlow;conditional_from_activity${expectedFontStyle}`);
+        });
+
+        it('edge with underline font', () => {
+          const edge = new Edge('id', newSequenceFlow(SequenceFlowKind.DEFAULT), undefined, new Label(toFont({ isUnderline: true }), undefined));
+          const expectedFontStyle = expectFontStyles ? ';fontStyle=4' : '';
+          expect(computeStyleWithIgnoreLabelStyles(edge)).toBe(`sequenceFlow;default${expectedFontStyle}`);
+        });
+      });
+    });
+  });
+
   describe('compute style - colors', () => {
     describe.each([[undefined], [false], [true]])(`Ignore BPMN colors: %s`, (ignoreBpmnColors: boolean) => {
       // 'undefined' RendererOptions tested in other tests in this file