From a9e6f62d8b3f2422482e07e2a35cf514e824eef6 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Wed, 4 Mar 2026 15:23:51 +0100 Subject: [PATCH 01/11] refactor: remove "Bpmn" prefix from renderer ignore option names MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Rename ignoreBpmnLabelStyles, ignoreBpmnActivityLabelBounds, and ignoreBpmnTaskLabelBounds to ignoreLabelStyles, ignoreActivityLabelBounds, and ignoreTaskLabelBounds. Also rename the corresponding test utility properties (rendererIgnoreBpmn* → rendererIgnore*). In addition, destructure the mxGraph objects for simplification. --- dev/ts/shared/main.ts | 6 +++--- src/component/mxgraph/BpmnRenderer.ts | 16 +++++++-------- src/component/mxgraph/initializer.ts | 20 +------------------ .../mxgraph/renderer/StyleComputer.ts | 6 +++--- src/component/options.ts | 10 +++++----- .../e2e/bpmn.rendering.ignore.options.test.ts | 12 +++++------ test/shared/visu/bpmn-page-utils.ts | 9 ++++----- .../component/mxgraph/BpmnRenderer.test.ts | 8 ++++---- .../mxgraph/renderer/StyleComputer.test.ts | 6 +++--- 9 files changed, 37 insertions(+), 56 deletions(-) diff --git a/dev/ts/shared/main.ts b/dev/ts/shared/main.ts index 8af52ecff2..2987f82d82 100644 --- a/dev/ts/shared/main.ts +++ b/dev/ts/shared/main.ts @@ -244,9 +244,9 @@ function getRendererOptionsFromParameters(config: BpmnVisualizationDemoConfigura // Mapping between query parameter names and RendererOptions boolean properties const rendererParameterMappings: Record> = { 'renderer.ignore.bpmn.colors': 'ignoreBpmnColors', - 'renderer.ignore.label.style': 'ignoreBpmnLabelStyles', - 'renderer.ignore.activity.label.bounds': 'ignoreBpmnActivityLabelBounds', - 'renderer.ignore.task.label.bounds': 'ignoreBpmnTaskLabelBounds', + 'renderer.ignore.label.style': 'ignoreLabelStyles', + 'renderer.ignore.activity.label.bounds': 'ignoreActivityLabelBounds', + 'renderer.ignore.task.label.bounds': 'ignoreTaskLabelBounds', }; // Process renderer parameters diff --git a/src/component/mxgraph/BpmnRenderer.ts b/src/component/mxgraph/BpmnRenderer.ts index 51ae8ceafc..796b39f933 100644 --- a/src/component/mxgraph/BpmnRenderer.ts +++ b/src/component/mxgraph/BpmnRenderer.ts @@ -34,8 +34,8 @@ import StyleComputer from './renderer/StyleComputer'; * @internal */ export class BpmnRenderer { - private readonly ignoreBpmnActivityLabelBounds: boolean; - private readonly ignoreBpmnTaskLabelBounds: boolean; + private readonly ignoreActivityLabelBounds: boolean; + private readonly ignoreTaskLabelBounds: boolean; constructor( readonly graph: BpmnGraph, @@ -43,8 +43,8 @@ export class BpmnRenderer { readonly styleComputer: StyleComputer, rendererOptions: RendererOptions, ) { - this.ignoreBpmnActivityLabelBounds = rendererOptions?.ignoreBpmnActivityLabelBounds ?? false; - this.ignoreBpmnTaskLabelBounds = rendererOptions?.ignoreBpmnTaskLabelBounds ?? false; + this.ignoreActivityLabelBounds = rendererOptions?.ignoreActivityLabelBounds ?? false; + this.ignoreTaskLabelBounds = rendererOptions?.ignoreTaskLabelBounds ?? false; } render(renderedModel: RenderedModel): void { @@ -78,7 +78,7 @@ export class BpmnRenderer { const bpmnElement = shape.bpmnElement; const parent = this.getParent(bpmnElement); const bounds = shape.bounds; - const labelBounds = isLabelBoundsIgnored(shape, this.ignoreBpmnActivityLabelBounds, this.ignoreBpmnTaskLabelBounds) ? undefined : shape.label?.bounds; + const labelBounds = isLabelBoundsIgnored(shape, this.ignoreActivityLabelBounds, this.ignoreTaskLabelBounds) ? undefined : shape.label?.bounds; const style = this.styleComputer.computeStyle(shape, labelBounds); this.insertVertex(parent, bpmnElement.id, bpmnElement.name, bounds, labelBounds, style); @@ -147,12 +147,12 @@ export class BpmnRenderer { /** * @internal */ -export function isLabelBoundsIgnored(shape: Shape, ignoreBpmnActivityLabelBounds: boolean, ignoreBpmnTaskLabelBounds: boolean): boolean { +export function isLabelBoundsIgnored(shape: Shape, ignoreActivityLabelBounds: boolean, ignoreTaskLabelBounds: boolean): boolean { const kind = shape.bpmnElement.kind; return ( ShapeUtil.isPoolOrLane(kind) || // pool/lane label bounds are not managed for now (use hard coded values) - (ignoreBpmnActivityLabelBounds && ShapeUtil.isActivity(kind)) || - (ignoreBpmnTaskLabelBounds && ShapeUtil.isTask(kind)) + (ignoreActivityLabelBounds && ShapeUtil.isActivity(kind)) || + (ignoreTaskLabelBounds && ShapeUtil.isTask(kind)) ); } diff --git a/src/component/mxgraph/initializer.ts b/src/component/mxgraph/initializer.ts index bbecd222da..4b861cd5e8 100644 --- a/src/component/mxgraph/initializer.ts +++ b/src/component/mxgraph/initializer.ts @@ -34,25 +34,7 @@ import factory, { type mxGraphExportObject } from 'mxgraph'; export const mxgraph = initialize(); /** @internal */ -export const mxCellRenderer = mxgraph.mxCellRenderer; -/** @internal */ -export const mxClient = mxgraph.mxClient; -/** @internal */ -export const mxConstants = mxgraph.mxConstants; -/** @internal */ -export const mxEvent = mxgraph.mxEvent; -/** @internal */ -export const mxPerimeter = mxgraph.mxPerimeter; -/** @internal */ -export const mxPoint = mxgraph.mxPoint; -/** @internal */ -export const mxRectangle = mxgraph.mxRectangle; -/** @internal */ -export const mxRectangleShape = mxgraph.mxRectangleShape; -/** @internal */ -export const mxSvgCanvas2D = mxgraph.mxSvgCanvas2D; -/** @internal */ -export const mxUtils = mxgraph.mxUtils; +export const { mxCellRenderer, mxClient, mxConstants, mxEvent, mxPerimeter, mxPoint, mxRectangle, mxRectangleShape, mxSvgCanvas2D, mxUtils } = mxgraph; /** @internal */ declare global { diff --git a/src/component/mxgraph/renderer/StyleComputer.ts b/src/component/mxgraph/renderer/StyleComputer.ts index d24cb54c42..d44e0704ba 100644 --- a/src/component/mxgraph/renderer/StyleComputer.ts +++ b/src/component/mxgraph/renderer/StyleComputer.ts @@ -39,11 +39,11 @@ import { BpmnStyleIdentifier } from '../style'; */ export default class StyleComputer { private readonly ignoreBpmnColors: boolean; - private readonly ignoreBpmnLabelStyles: boolean; + private readonly ignoreLabelStyles: boolean; constructor(options?: RendererOptions) { this.ignoreBpmnColors = options?.ignoreBpmnColors ?? true; - this.ignoreBpmnLabelStyles = options?.ignoreBpmnLabelStyles ?? false; + this.ignoreLabelStyles = options?.ignoreLabelStyles ?? false; } computeStyle(bpmnCell: Shape | Edge, labelBounds: Bounds): string { @@ -112,7 +112,7 @@ export default class StyleComputer { const styleValues = new Map(); const font = bpmnCell.label?.font; - if (font && !this.ignoreBpmnLabelStyles) { + if (font && !this.ignoreLabelStyles) { styleValues.set(mxConstants.STYLE_FONTFAMILY, font.name); styleValues.set(mxConstants.STYLE_FONTSIZE, font.size); styleValues.set(mxConstants.STYLE_FONTSTYLE, getFontStyleValue(font)); diff --git a/src/component/options.ts b/src/component/options.ts index 254ac94318..d3730bd39b 100644 --- a/src/component/options.ts +++ b/src/component/options.ts @@ -235,7 +235,7 @@ export type RendererOptions = { * @default false * @since 0.48.0 */ - ignoreBpmnActivityLabelBounds?: boolean; + ignoreActivityLabelBounds?: 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}. @@ -252,16 +252,16 @@ export type RendererOptions = { * @default false * @since 0.48.0 */ - ignoreBpmnLabelStyles?: boolean; + ignoreLabelStyles?: 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. - * This option is more restrictive than `ignoreBpmnActivityLabelBounds` as it only affects tasks, not sub-processes or call activities. + * This option is more restrictive than {@link ignoreActivityLabelBounds} as it only affects tasks, not sub-processes or call activities. * - * **Note**: When `ignoreBpmnActivityLabelBounds` is `true`, this option is ignored as the more general activity option takes precedence. + * **Note**: When {@link ignoreActivityLabelBounds} is `true`, this option is ignored as the more general activity option takes precedence. * * @default false * @since 0.48.0 */ - ignoreBpmnTaskLabelBounds?: boolean; + ignoreTaskLabelBounds?: boolean; }; diff --git a/test/e2e/bpmn.rendering.ignore.options.test.ts b/test/e2e/bpmn.rendering.ignore.options.test.ts index 0df536c3c8..c12332bf52 100644 --- a/test/e2e/bpmn.rendering.ignore.options.test.ts +++ b/test/e2e/bpmn.rendering.ignore.options.test.ts @@ -159,16 +159,16 @@ describe('BPMN rendering - ignore options', () => { describe('Ignore activity label bounds', () => { const bpmnDiagramName = 'activities.with.wrongly.positioned.labels'; - describe.each([false, true])('ignoreBpmnActivityLabelBounds: %s', (ignoreBpmnActivityLabelBounds: boolean) => { + describe.each([false, true])('ignoreActivityLabelBounds: %s', (ignoreActivityLabelBounds: boolean) => { const imageSnapshotConfigurator = new ImageSnapshotConfigurator(new ImageSnapshotThresholdsActivityLabelBounds(), 'bpmn-rendering-ignore-options'); it(`${bpmnDiagramName}`, async () => { await pageTester.gotoPageAndLoadBpmnDiagram(bpmnDiagramName, { - rendererIgnoreBpmnActivityLabelBounds: ignoreBpmnActivityLabelBounds, + rendererIgnoreActivityLabelBounds: ignoreActivityLabelBounds, }); const image = await page.screenshot({ fullPage: true }); - const config = imageSnapshotConfigurator.getConfig(getConfigName(bpmnDiagramName, ignoreBpmnActivityLabelBounds)); + const config = imageSnapshotConfigurator.getConfig(getConfigName(bpmnDiagramName, ignoreActivityLabelBounds)); expect(image).toMatchImageSnapshot(config); }); }); @@ -177,16 +177,16 @@ describe('BPMN rendering - ignore options', () => { describe('Ignore label styles', () => { const bpmnDiagramName = 'labels.with.font.styles'; - describe.each([false, true])('ignoreBpmnLabelStyles: %s', (ignoreBpmnLabelStyles: boolean) => { + describe.each([false, true])('ignoreLabelStyles: %s', (ignoreLabelStyles: boolean) => { const imageSnapshotConfigurator = new ImageSnapshotConfigurator(new ImageSnapshotThresholdsLabelStyles(), 'bpmn-rendering-ignore-options'); it(`${bpmnDiagramName}`, async () => { await pageTester.gotoPageAndLoadBpmnDiagram(bpmnDiagramName, { - rendererIgnoreBpmnLabelStyles: ignoreBpmnLabelStyles, + rendererIgnoreLabelStyles: ignoreLabelStyles, }); const image = await page.screenshot({ fullPage: true }); - const config = imageSnapshotConfigurator.getConfig(getConfigName(bpmnDiagramName, ignoreBpmnLabelStyles)); + const config = imageSnapshotConfigurator.getConfig(getConfigName(bpmnDiagramName, ignoreLabelStyles)); expect(image).toMatchImageSnapshot(config); }); }); diff --git a/test/shared/visu/bpmn-page-utils.ts b/test/shared/visu/bpmn-page-utils.ts index 1bcf699265..03d3c279ca 100644 --- a/test/shared/visu/bpmn-page-utils.ts +++ b/test/shared/visu/bpmn-page-utils.ts @@ -143,8 +143,8 @@ export interface PageOptions { bpmnElementIdToCollapse?: string; poolIdsToFilter?: string | string[]; rendererIgnoreBpmnColors?: boolean; - rendererIgnoreBpmnLabelStyles?: boolean; - rendererIgnoreBpmnActivityLabelBounds?: boolean; + rendererIgnoreLabelStyles?: boolean; + rendererIgnoreActivityLabelBounds?: boolean; } export interface Point { @@ -258,9 +258,8 @@ export class PageTester { otherPageOptions?.poolIdsToFilter && (url += `&bpmn.filter.pool.ids=${otherPageOptions.poolIdsToFilter}`); // renderer options otherPageOptions?.rendererIgnoreBpmnColors !== undefined && (url += `&renderer.ignore.bpmn.colors=${otherPageOptions.rendererIgnoreBpmnColors}`); - otherPageOptions?.rendererIgnoreBpmnLabelStyles !== undefined && (url += `&renderer.ignore.label.style=${otherPageOptions.rendererIgnoreBpmnLabelStyles}`); - otherPageOptions?.rendererIgnoreBpmnActivityLabelBounds !== undefined && - (url += `&renderer.ignore.activity.label.bounds=${otherPageOptions.rendererIgnoreBpmnActivityLabelBounds}`); + otherPageOptions?.rendererIgnoreLabelStyles !== undefined && (url += `&renderer.ignore.label.style=${otherPageOptions.rendererIgnoreLabelStyles}`); + otherPageOptions?.rendererIgnoreActivityLabelBounds !== undefined && (url += `&renderer.ignore.activity.label.bounds=${otherPageOptions.rendererIgnoreActivityLabelBounds}`); return url; } diff --git a/test/unit/component/mxgraph/BpmnRenderer.test.ts b/test/unit/component/mxgraph/BpmnRenderer.test.ts index 5702be6ae2..87c5957ff0 100644 --- a/test/unit/component/mxgraph/BpmnRenderer.test.ts +++ b/test/unit/component/mxgraph/BpmnRenderer.test.ts @@ -39,8 +39,8 @@ describe('isLabelBoundsIgnored', () => { }); }); - describe('with ignoreBpmnActivityLabelBounds option', () => { - describe.each([true, false])('with ignoreBpmnTaskLabelBounds option set to %s', (ignoreBpmnTaskLabelBounds: boolean) => { + describe('with ignoreActivityLabelBounds option', () => { + describe.each([true, false])('with ignoreTaskLabelBounds option set to %s', (ignoreTaskLabelBounds: boolean) => { test.each([ [ShapeBpmnElementKind.POOL, true], [ShapeBpmnElementKind.LANE, true], @@ -54,12 +54,12 @@ describe('isLabelBoundsIgnored', () => { [ShapeBpmnElementKind.GATEWAY_PARALLEL, false], ])('should ignore %s label bounds? %s', (kind, expected) => { const shape = new Shape('id', new ShapeBpmnElement('id', 'name', kind)); - expect(isLabelBoundsIgnored(shape, true, ignoreBpmnTaskLabelBounds)).toBe(expected); + expect(isLabelBoundsIgnored(shape, true, ignoreTaskLabelBounds)).toBe(expected); }); }); }); - describe('with ignoreBpmnTaskLabelBounds option', () => { + describe('with ignoreTaskLabelBounds option', () => { test.each([ [ShapeBpmnElementKind.POOL, true], [ShapeBpmnElementKind.LANE, true], diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index 46c2d6a144..b0a629b2bd 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -480,9 +480,9 @@ 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); + describe.each([[undefined], [false], [true]])(`Ignore BPMN label styles (renderer option): %s`, (ignoreLabelStyles: boolean) => { + const styleComputer = new StyleComputer(ignoreLabelStyles === undefined ? {} : { ignoreLabelStyles }); + const expectFontStyles = !(ignoreLabelStyles ?? false); function computeStyleWithIgnoreLabelStyles(element: Shape | Edge): string { return styleComputer.computeStyle(element, element.label?.bounds); From 4640f8ae45df4ef1828f89f27cde806b0245dc7a Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 5 Mar 2026 07:43:41 +0100 Subject: [PATCH 02/11] Internal: export more elements of mxgraph to never use mxgraph object directly --- dev/ts/component/SvgExporter.ts | 4 +-- src/component/mxgraph/BpmnCellRenderer.ts | 14 +++++------ src/component/mxgraph/BpmnGraph.ts | 10 ++++---- .../config/register-style-definitions.ts | 4 +-- src/component/mxgraph/initializer.ts | 25 ++++++++++++++++++- .../mxgraph/overlay/custom-overlay.ts | 4 +-- src/component/mxgraph/overlay/shapes.ts | 4 +-- src/component/mxgraph/shape/edges.ts | 4 +-- src/component/mxgraph/shape/event-shapes.ts | 4 +-- src/component/mxgraph/shape/gateway-shapes.ts | 4 +-- .../mxGraph.model.bpmn.elements.test.ts | 4 +-- 11 files changed, 51 insertions(+), 30 deletions(-) diff --git a/dev/ts/component/SvgExporter.ts b/dev/ts/component/SvgExporter.ts index 2a27695b4e..87cc527a22 100644 --- a/dev/ts/component/SvgExporter.ts +++ b/dev/ts/component/SvgExporter.ts @@ -16,7 +16,7 @@ limitations under the License. import type { mxGraph, mxSvgCanvas2D as mxSvgCanvas2DType } from 'mxgraph'; -import { mxgraph, mxClient, mxConstants, mxSvgCanvas2D, mxUtils } from '../../../src/component/mxgraph/initializer'; +import { mxClient, mxConstants, mxImageExport, mxSvgCanvas2D, mxUtils } from '../../../src/component/mxgraph/initializer'; interface SvgExportOptions { scale: number; @@ -92,7 +92,7 @@ ${svgAsString} svgCanvas.scale(s); - const imgExport = new mxgraph.mxImageExport(); + const imgExport = new mxImageExport(); // FIXME only the first overlay is placed at the right position // overlays put on element of subprocess/call-activity are not placed correctly in svg export imgExport.includeOverlays = true; diff --git a/src/component/mxgraph/BpmnCellRenderer.ts b/src/component/mxgraph/BpmnCellRenderer.ts index 36d6cede6e..584d5bec27 100644 --- a/src/component/mxgraph/BpmnCellRenderer.ts +++ b/src/component/mxgraph/BpmnCellRenderer.ts @@ -15,14 +15,14 @@ limitations under the License. */ import type { IconPainter } from './shape/render'; -import type { mxCellState, mxImageShape, mxShape } from 'mxgraph'; +import type { mxCellState, mxImageShape as mxImageShapeType, mxShape } from 'mxgraph'; -import { mxgraph, mxRectangle } from './initializer'; +import { mxCellRenderer, mxDictionary, mxImageShape, mxRectangle } from './initializer'; import { CustomCellOverlay } from './overlay/custom-overlay'; import { OverlayBadgeShape } from './overlay/shapes'; import { overrideCreateSvgCanvas } from './shape/utils'; -export class BpmnCellRenderer extends mxgraph.mxCellRenderer { +export class BpmnCellRenderer extends mxCellRenderer { constructor(private readonly iconPainter: IconPainter) { super(); } @@ -33,7 +33,7 @@ export class BpmnCellRenderer extends mxgraph.mxCellRenderer { let dict = null; if (overlays != null) { - dict = new mxgraph.mxDictionary(); + dict = new mxDictionary(); for (const currentOverlay of overlays) { const shape = state.overlays == null ? null : state.overlays.remove(currentOverlay); @@ -48,8 +48,8 @@ export class BpmnCellRenderer extends mxgraph.mxCellRenderer { if (currentOverlay instanceof CustomCellOverlay) { overlayShape = new OverlayBadgeShape(currentOverlay.label, new mxRectangle(0, 0, 0, 0), currentOverlay.style); } else { - overlayShape = new mxgraph.mxImageShape(new mxRectangle(0, 0, 0, 0), currentOverlay.image.src); - (overlayShape as mxImageShape).preserveImageAspect = false; + overlayShape = new mxImageShape(new mxRectangle(0, 0, 0, 0), currentOverlay.image.src); + (overlayShape as mxImageShapeType).preserveImageAspect = false; } // END bpmn-visualization CUSTOMIZATION @@ -57,7 +57,7 @@ export class BpmnCellRenderer extends mxgraph.mxCellRenderer { overlayShape.overlay = currentOverlay; // The 'initializeOverlay' signature forces us to hardly cast the overlayShape - this.initializeOverlay(state, overlayShape as mxImageShape); + this.initializeOverlay(state, overlayShape as mxImageShapeType); this.installCellOverlayListeners(state, currentOverlay, overlayShape); if (currentOverlay.cursor != null) { diff --git a/src/component/mxgraph/BpmnGraph.ts b/src/component/mxgraph/BpmnGraph.ts index 692e802490..7650cee4b8 100644 --- a/src/component/mxgraph/BpmnGraph.ts +++ b/src/component/mxgraph/BpmnGraph.ts @@ -15,10 +15,10 @@ limitations under the License. */ import type { IconPainter } from './shape/render'; -import type { mxCellRenderer, mxCellState, mxGraphView, mxPoint } from 'mxgraph'; +import type { mxCellRenderer, mxCellState, mxGraphView as mxGraphViewType, mxPoint } from 'mxgraph'; import { BpmnCellRenderer } from './BpmnCellRenderer'; -import { mxgraph } from './initializer'; +import { mxGraph, mxGraphView } from './initializer'; /** * Temporary storage for iconPainter during BpmnGraph construction. @@ -49,7 +49,7 @@ import { mxgraph } from './initializer'; */ let pendingIconPainter: IconPainter | undefined; -export class BpmnGraph extends mxgraph.mxGraph { +export class BpmnGraph extends mxGraph { /** * @internal */ @@ -72,7 +72,7 @@ export class BpmnGraph extends mxgraph.mxGraph { /** * @internal */ - override createGraphView(): mxGraphView { + override createGraphView(): mxGraphViewType { return new BpmnGraphView(this); } @@ -108,7 +108,7 @@ export class BpmnGraph extends mxgraph.mxGraph { } } -class BpmnGraphView extends mxgraph.mxGraphView { +class BpmnGraphView extends mxGraphView { override getFloatingTerminalPoint(edge: mxCellState, start: mxCellState, end: mxCellState, source: boolean): mxPoint { // some values may be null: the first and the last values are null prior computing floating terminal points const edgePoints = edge.absolutePoints.filter(Boolean); diff --git a/src/component/mxgraph/config/register-style-definitions.ts b/src/component/mxgraph/config/register-style-definitions.ts index fdab35423b..9798085776 100644 --- a/src/component/mxgraph/config/register-style-definitions.ts +++ b/src/component/mxgraph/config/register-style-definitions.ts @@ -17,7 +17,7 @@ limitations under the License. import type { mxAbstractCanvas2D, mxCell, mxPoint, mxShape } from 'mxgraph'; import { ShapeBpmnElementKind } from '../../../model/bpmn/internal'; -import { mxCellRenderer, mxgraph } from '../initializer'; +import { mxCellRenderer, mxMarker } from '../initializer'; import { BusinessRuleTaskShape, CallActivityShape, @@ -102,5 +102,5 @@ const dashMarkerFactory = ( }; export const registerEdgeMarkers = (): void => { - mxgraph.mxMarker.addMarker(MarkerIdentifier.ARROW_DASH, dashMarkerFactory); + mxMarker.addMarker(MarkerIdentifier.ARROW_DASH, dashMarkerFactory); }; diff --git a/src/component/mxgraph/initializer.ts b/src/component/mxgraph/initializer.ts index 4b861cd5e8..e04fdc3097 100644 --- a/src/component/mxgraph/initializer.ts +++ b/src/component/mxgraph/initializer.ts @@ -34,7 +34,30 @@ import factory, { type mxGraphExportObject } from 'mxgraph'; export const mxgraph = initialize(); /** @internal */ -export const { mxCellRenderer, mxClient, mxConstants, mxEvent, mxPerimeter, mxPoint, mxRectangle, mxRectangleShape, mxSvgCanvas2D, mxUtils } = mxgraph; +export const { + mxCellOverlay, + mxCellRenderer, + mxClient, + mxConnector, + mxConstants, + mxDictionary, + mxEllipse, + mxEvent, + mxGeometry, + mxGraph, + mxGraphView, + mxImageExport, + mxImageShape, + mxMarker, + mxPerimeter, + mxPoint, + mxRectangle, + mxRectangleShape, + mxRhombus, + mxSvgCanvas2D, + mxText, + mxUtils, +} = mxgraph; /** @internal */ declare global { diff --git a/src/component/mxgraph/overlay/custom-overlay.ts b/src/component/mxgraph/overlay/custom-overlay.ts index 534dc5c22a..f690861f14 100644 --- a/src/component/mxgraph/overlay/custom-overlay.ts +++ b/src/component/mxgraph/overlay/custom-overlay.ts @@ -17,7 +17,7 @@ limitations under the License. import type { OverlayStyle } from '../../registry'; import type { mxCellState, mxPoint as mxPointType, mxRectangle as mxRectangleType } from 'mxgraph'; -import { mxgraph, mxConstants, mxPoint, mxRectangle } from '../initializer'; +import { mxCellOverlay, mxConstants, mxPoint, mxRectangle } from '../initializer'; export type VerticalAlignType = 'bottom' | 'middle' | 'top'; export type HorizontalAlignType = 'left' | 'center' | 'right'; @@ -34,7 +34,7 @@ export interface CustomCellOverlayPosition { export type CustomCellOverlayStyle = Required; -export class CustomCellOverlay extends mxgraph.mxCellOverlay { +export class CustomCellOverlay extends mxCellOverlay { readonly style: CustomCellOverlayStyle; constructor( diff --git a/src/component/mxgraph/overlay/shapes.ts b/src/component/mxgraph/overlay/shapes.ts index 56005432d0..a7d383eb7f 100644 --- a/src/component/mxgraph/overlay/shapes.ts +++ b/src/component/mxgraph/overlay/shapes.ts @@ -17,9 +17,9 @@ limitations under the License. import type { CustomCellOverlayStyle } from './custom-overlay'; import type { mxRectangle } from 'mxgraph'; -import { mxgraph } from '../initializer'; +import { mxText } from '../initializer'; -export class OverlayBadgeShape extends mxgraph.mxText { +export class OverlayBadgeShape extends mxText { constructor(value: string, bounds: mxRectangle, style: CustomCellOverlayStyle) { super( value, diff --git a/src/component/mxgraph/shape/edges.ts b/src/component/mxgraph/shape/edges.ts index a66fcdd189..8c0aec5b0d 100644 --- a/src/component/mxgraph/shape/edges.ts +++ b/src/component/mxgraph/shape/edges.ts @@ -16,10 +16,10 @@ limitations under the License. import type { mxAbstractCanvas2D, mxPoint } from 'mxgraph'; -import { mxgraph, mxSvgCanvas2D, mxUtils } from '../initializer'; +import { mxConnector, mxSvgCanvas2D, mxUtils } from '../initializer'; import { BpmnStyleIdentifier } from '../style'; -export class BpmnConnector extends mxgraph.mxConnector { +export class BpmnConnector extends mxConnector { override paintEdgeShape(c: mxAbstractCanvas2D, pts: mxPoint[]): void { // The indirection via functions for markers is needed in // order to apply the offsets before painting the line and diff --git a/src/component/mxgraph/shape/event-shapes.ts b/src/component/mxgraph/shape/event-shapes.ts index 7a1994c2fb..21abb77a0f 100644 --- a/src/component/mxgraph/shape/event-shapes.ts +++ b/src/component/mxgraph/shape/event-shapes.ts @@ -18,7 +18,7 @@ import type { BpmnCanvas, PaintParameter, IconPainter } from './render'; import type { mxAbstractCanvas2D } from 'mxgraph'; import { ShapeBpmnEventDefinitionKind } from '../../../model/bpmn/internal'; -import { mxgraph, mxUtils } from '../initializer'; +import { mxEllipse, mxUtils } from '../initializer'; import { BpmnStyleIdentifier, StyleDefault } from '../style'; import { buildPaintParameter } from './render/icon-painter'; @@ -26,7 +26,7 @@ import { buildPaintParameter } from './render/icon-painter'; /** * @internal */ -export class EventShape extends mxgraph.mxEllipse { +export class EventShape extends mxEllipse { // The actual value is injected at runtime by BpmnCellRenderer protected iconPainter: IconPainter = undefined; diff --git a/src/component/mxgraph/shape/gateway-shapes.ts b/src/component/mxgraph/shape/gateway-shapes.ts index 3584720483..555c4ff462 100644 --- a/src/component/mxgraph/shape/gateway-shapes.ts +++ b/src/component/mxgraph/shape/gateway-shapes.ts @@ -18,13 +18,13 @@ import type { IconPainter, PaintParameter } from './render'; import type { mxAbstractCanvas2D } from 'mxgraph'; import { ShapeBpmnEventBasedGatewayKind } from '../../../model/bpmn/internal'; -import { mxgraph, mxUtils } from '../initializer'; +import { mxRhombus, mxUtils } from '../initializer'; import { BpmnStyleIdentifier, StyleDefault } from '../style'; import { getBpmnIsInstantiating } from '../style/utils'; import { buildPaintParameter } from './render/icon-painter'; -abstract class GatewayShape extends mxgraph.mxRhombus { +abstract class GatewayShape extends mxRhombus { // The actual value is injected at runtime by BpmnCellRenderer protected iconPainter: IconPainter = undefined; diff --git a/test/integration/mxGraph.model.bpmn.elements.test.ts b/test/integration/mxGraph.model.bpmn.elements.test.ts index 4ccade0458..0df869e6d3 100644 --- a/test/integration/mxGraph.model.bpmn.elements.test.ts +++ b/test/integration/mxGraph.model.bpmn.elements.test.ts @@ -36,11 +36,9 @@ import { ShapeBpmnMarkerKind, ShapeBpmnSubProcessKind, } from '@lib/bpmn-visualization'; -import { mxConstants, mxgraph, mxPoint } from '@lib/component/mxgraph/initializer'; +import { mxConstants, mxGeometry, mxPoint } from '@lib/component/mxgraph/initializer'; import { readFileSync } from '@test/shared/file-helper'; -const mxGeometry = mxgraph.mxGeometry; - describe('mxGraph model - BPMN elements', () => { describe('BPMN elements should be available in the mxGraph model', () => { describe('Diagram with all the kind of elements', () => { From 7759d7a28244668ce037c261b4a1040eb894a882 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Mon, 16 Mar 2026 16:56:05 +0100 Subject: [PATCH 03/11] remove unused export --- src/component/mxgraph/initializer.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/component/mxgraph/initializer.ts b/src/component/mxgraph/initializer.ts index e04fdc3097..a9b7d12006 100644 --- a/src/component/mxgraph/initializer.ts +++ b/src/component/mxgraph/initializer.ts @@ -43,7 +43,6 @@ export const { mxDictionary, mxEllipse, mxEvent, - mxGeometry, mxGraph, mxGraphView, mxImageExport, From 5b939e1fd7649c42ca24b51cbb01d51a38a72f5c Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Mon, 16 Mar 2026 17:02:26 +0100 Subject: [PATCH 04/11] fix type generation error Declaring some mxGraph types as internal broke the generation of the bundle of the types. There is no need to declare them as internal, they are not added to the bundle of the types, so remove the internal declaration --- src/component/mxgraph/initializer.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/component/mxgraph/initializer.ts b/src/component/mxgraph/initializer.ts index a9b7d12006..b3fc892f9b 100644 --- a/src/component/mxgraph/initializer.ts +++ b/src/component/mxgraph/initializer.ts @@ -33,7 +33,6 @@ import factory, { type mxGraphExportObject } from 'mxgraph'; */ export const mxgraph = initialize(); -/** @internal */ export const { mxCellOverlay, mxCellRenderer, From 09b11777264619338cd92e65c371d5a1fcbab911 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Mon, 16 Mar 2026 17:10:24 +0100 Subject: [PATCH 05/11] Revert "remove unused export" This reverts commit 7759d7a28244668ce037c261b4a1040eb894a882. --- src/component/mxgraph/initializer.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/component/mxgraph/initializer.ts b/src/component/mxgraph/initializer.ts index b3fc892f9b..37726d3c10 100644 --- a/src/component/mxgraph/initializer.ts +++ b/src/component/mxgraph/initializer.ts @@ -42,6 +42,7 @@ export const { mxDictionary, mxEllipse, mxEvent, + mxGeometry, // at least used in tests mxGraph, mxGraphView, mxImageExport, From 3f6a1040c779ef8af65f3f5d5086dedb6b226cd5 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Tue, 17 Mar 2026 14:28:28 +0100 Subject: [PATCH 06/11] Reapply "remove unused export" This reverts commit 09b11777264619338cd92e65c371d5a1fcbab911. --- src/component/mxgraph/initializer.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/component/mxgraph/initializer.ts b/src/component/mxgraph/initializer.ts index 37726d3c10..b3fc892f9b 100644 --- a/src/component/mxgraph/initializer.ts +++ b/src/component/mxgraph/initializer.ts @@ -42,7 +42,6 @@ export const { mxDictionary, mxEllipse, mxEvent, - mxGeometry, // at least used in tests mxGraph, mxGraphView, mxImageExport, From 3925b40d611260c1c74e17a2d0552131ba9b005d Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Tue, 17 Mar 2026 14:28:29 +0100 Subject: [PATCH 07/11] Revert "fix type generation error" This reverts commit 5b939e1fd7649c42ca24b51cbb01d51a38a72f5c. --- src/component/mxgraph/initializer.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/component/mxgraph/initializer.ts b/src/component/mxgraph/initializer.ts index b3fc892f9b..a9b7d12006 100644 --- a/src/component/mxgraph/initializer.ts +++ b/src/component/mxgraph/initializer.ts @@ -33,6 +33,7 @@ import factory, { type mxGraphExportObject } from 'mxgraph'; */ export const mxgraph = initialize(); +/** @internal */ export const { mxCellOverlay, mxCellRenderer, From 1f2251266c07bda8bf4b6997ec6fde3da2dd416e Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Tue, 17 Mar 2026 14:28:29 +0100 Subject: [PATCH 08/11] Revert "remove unused export" This reverts commit 7759d7a28244668ce037c261b4a1040eb894a882. --- src/component/mxgraph/initializer.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/component/mxgraph/initializer.ts b/src/component/mxgraph/initializer.ts index a9b7d12006..e04fdc3097 100644 --- a/src/component/mxgraph/initializer.ts +++ b/src/component/mxgraph/initializer.ts @@ -43,6 +43,7 @@ export const { mxDictionary, mxEllipse, mxEvent, + mxGeometry, mxGraph, mxGraphView, mxImageExport, From b786e68a11eebd41aee40be3e3ccfc0062db01b3 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Tue, 17 Mar 2026 14:28:30 +0100 Subject: [PATCH 09/11] Revert "Internal: export more elements of mxgraph to never use mxgraph object directly" This reverts commit 4640f8ae45df4ef1828f89f27cde806b0245dc7a. --- dev/ts/component/SvgExporter.ts | 4 +-- src/component/mxgraph/BpmnCellRenderer.ts | 14 +++++------ src/component/mxgraph/BpmnGraph.ts | 10 ++++---- .../config/register-style-definitions.ts | 4 +-- src/component/mxgraph/initializer.ts | 25 +------------------ .../mxgraph/overlay/custom-overlay.ts | 4 +-- src/component/mxgraph/overlay/shapes.ts | 4 +-- src/component/mxgraph/shape/edges.ts | 4 +-- src/component/mxgraph/shape/event-shapes.ts | 4 +-- src/component/mxgraph/shape/gateway-shapes.ts | 4 +-- .../mxGraph.model.bpmn.elements.test.ts | 4 ++- 11 files changed, 30 insertions(+), 51 deletions(-) diff --git a/dev/ts/component/SvgExporter.ts b/dev/ts/component/SvgExporter.ts index 87cc527a22..2a27695b4e 100644 --- a/dev/ts/component/SvgExporter.ts +++ b/dev/ts/component/SvgExporter.ts @@ -16,7 +16,7 @@ limitations under the License. import type { mxGraph, mxSvgCanvas2D as mxSvgCanvas2DType } from 'mxgraph'; -import { mxClient, mxConstants, mxImageExport, mxSvgCanvas2D, mxUtils } from '../../../src/component/mxgraph/initializer'; +import { mxgraph, mxClient, mxConstants, mxSvgCanvas2D, mxUtils } from '../../../src/component/mxgraph/initializer'; interface SvgExportOptions { scale: number; @@ -92,7 +92,7 @@ ${svgAsString} svgCanvas.scale(s); - const imgExport = new mxImageExport(); + const imgExport = new mxgraph.mxImageExport(); // FIXME only the first overlay is placed at the right position // overlays put on element of subprocess/call-activity are not placed correctly in svg export imgExport.includeOverlays = true; diff --git a/src/component/mxgraph/BpmnCellRenderer.ts b/src/component/mxgraph/BpmnCellRenderer.ts index 584d5bec27..36d6cede6e 100644 --- a/src/component/mxgraph/BpmnCellRenderer.ts +++ b/src/component/mxgraph/BpmnCellRenderer.ts @@ -15,14 +15,14 @@ limitations under the License. */ import type { IconPainter } from './shape/render'; -import type { mxCellState, mxImageShape as mxImageShapeType, mxShape } from 'mxgraph'; +import type { mxCellState, mxImageShape, mxShape } from 'mxgraph'; -import { mxCellRenderer, mxDictionary, mxImageShape, mxRectangle } from './initializer'; +import { mxgraph, mxRectangle } from './initializer'; import { CustomCellOverlay } from './overlay/custom-overlay'; import { OverlayBadgeShape } from './overlay/shapes'; import { overrideCreateSvgCanvas } from './shape/utils'; -export class BpmnCellRenderer extends mxCellRenderer { +export class BpmnCellRenderer extends mxgraph.mxCellRenderer { constructor(private readonly iconPainter: IconPainter) { super(); } @@ -33,7 +33,7 @@ export class BpmnCellRenderer extends mxCellRenderer { let dict = null; if (overlays != null) { - dict = new mxDictionary(); + dict = new mxgraph.mxDictionary(); for (const currentOverlay of overlays) { const shape = state.overlays == null ? null : state.overlays.remove(currentOverlay); @@ -48,8 +48,8 @@ export class BpmnCellRenderer extends mxCellRenderer { if (currentOverlay instanceof CustomCellOverlay) { overlayShape = new OverlayBadgeShape(currentOverlay.label, new mxRectangle(0, 0, 0, 0), currentOverlay.style); } else { - overlayShape = new mxImageShape(new mxRectangle(0, 0, 0, 0), currentOverlay.image.src); - (overlayShape as mxImageShapeType).preserveImageAspect = false; + overlayShape = new mxgraph.mxImageShape(new mxRectangle(0, 0, 0, 0), currentOverlay.image.src); + (overlayShape as mxImageShape).preserveImageAspect = false; } // END bpmn-visualization CUSTOMIZATION @@ -57,7 +57,7 @@ export class BpmnCellRenderer extends mxCellRenderer { overlayShape.overlay = currentOverlay; // The 'initializeOverlay' signature forces us to hardly cast the overlayShape - this.initializeOverlay(state, overlayShape as mxImageShapeType); + this.initializeOverlay(state, overlayShape as mxImageShape); this.installCellOverlayListeners(state, currentOverlay, overlayShape); if (currentOverlay.cursor != null) { diff --git a/src/component/mxgraph/BpmnGraph.ts b/src/component/mxgraph/BpmnGraph.ts index 7650cee4b8..692e802490 100644 --- a/src/component/mxgraph/BpmnGraph.ts +++ b/src/component/mxgraph/BpmnGraph.ts @@ -15,10 +15,10 @@ limitations under the License. */ import type { IconPainter } from './shape/render'; -import type { mxCellRenderer, mxCellState, mxGraphView as mxGraphViewType, mxPoint } from 'mxgraph'; +import type { mxCellRenderer, mxCellState, mxGraphView, mxPoint } from 'mxgraph'; import { BpmnCellRenderer } from './BpmnCellRenderer'; -import { mxGraph, mxGraphView } from './initializer'; +import { mxgraph } from './initializer'; /** * Temporary storage for iconPainter during BpmnGraph construction. @@ -49,7 +49,7 @@ import { mxGraph, mxGraphView } from './initializer'; */ let pendingIconPainter: IconPainter | undefined; -export class BpmnGraph extends mxGraph { +export class BpmnGraph extends mxgraph.mxGraph { /** * @internal */ @@ -72,7 +72,7 @@ export class BpmnGraph extends mxGraph { /** * @internal */ - override createGraphView(): mxGraphViewType { + override createGraphView(): mxGraphView { return new BpmnGraphView(this); } @@ -108,7 +108,7 @@ export class BpmnGraph extends mxGraph { } } -class BpmnGraphView extends mxGraphView { +class BpmnGraphView extends mxgraph.mxGraphView { override getFloatingTerminalPoint(edge: mxCellState, start: mxCellState, end: mxCellState, source: boolean): mxPoint { // some values may be null: the first and the last values are null prior computing floating terminal points const edgePoints = edge.absolutePoints.filter(Boolean); diff --git a/src/component/mxgraph/config/register-style-definitions.ts b/src/component/mxgraph/config/register-style-definitions.ts index 9798085776..fdab35423b 100644 --- a/src/component/mxgraph/config/register-style-definitions.ts +++ b/src/component/mxgraph/config/register-style-definitions.ts @@ -17,7 +17,7 @@ limitations under the License. import type { mxAbstractCanvas2D, mxCell, mxPoint, mxShape } from 'mxgraph'; import { ShapeBpmnElementKind } from '../../../model/bpmn/internal'; -import { mxCellRenderer, mxMarker } from '../initializer'; +import { mxCellRenderer, mxgraph } from '../initializer'; import { BusinessRuleTaskShape, CallActivityShape, @@ -102,5 +102,5 @@ const dashMarkerFactory = ( }; export const registerEdgeMarkers = (): void => { - mxMarker.addMarker(MarkerIdentifier.ARROW_DASH, dashMarkerFactory); + mxgraph.mxMarker.addMarker(MarkerIdentifier.ARROW_DASH, dashMarkerFactory); }; diff --git a/src/component/mxgraph/initializer.ts b/src/component/mxgraph/initializer.ts index e04fdc3097..4b861cd5e8 100644 --- a/src/component/mxgraph/initializer.ts +++ b/src/component/mxgraph/initializer.ts @@ -34,30 +34,7 @@ import factory, { type mxGraphExportObject } from 'mxgraph'; export const mxgraph = initialize(); /** @internal */ -export const { - mxCellOverlay, - mxCellRenderer, - mxClient, - mxConnector, - mxConstants, - mxDictionary, - mxEllipse, - mxEvent, - mxGeometry, - mxGraph, - mxGraphView, - mxImageExport, - mxImageShape, - mxMarker, - mxPerimeter, - mxPoint, - mxRectangle, - mxRectangleShape, - mxRhombus, - mxSvgCanvas2D, - mxText, - mxUtils, -} = mxgraph; +export const { mxCellRenderer, mxClient, mxConstants, mxEvent, mxPerimeter, mxPoint, mxRectangle, mxRectangleShape, mxSvgCanvas2D, mxUtils } = mxgraph; /** @internal */ declare global { diff --git a/src/component/mxgraph/overlay/custom-overlay.ts b/src/component/mxgraph/overlay/custom-overlay.ts index f690861f14..534dc5c22a 100644 --- a/src/component/mxgraph/overlay/custom-overlay.ts +++ b/src/component/mxgraph/overlay/custom-overlay.ts @@ -17,7 +17,7 @@ limitations under the License. import type { OverlayStyle } from '../../registry'; import type { mxCellState, mxPoint as mxPointType, mxRectangle as mxRectangleType } from 'mxgraph'; -import { mxCellOverlay, mxConstants, mxPoint, mxRectangle } from '../initializer'; +import { mxgraph, mxConstants, mxPoint, mxRectangle } from '../initializer'; export type VerticalAlignType = 'bottom' | 'middle' | 'top'; export type HorizontalAlignType = 'left' | 'center' | 'right'; @@ -34,7 +34,7 @@ export interface CustomCellOverlayPosition { export type CustomCellOverlayStyle = Required; -export class CustomCellOverlay extends mxCellOverlay { +export class CustomCellOverlay extends mxgraph.mxCellOverlay { readonly style: CustomCellOverlayStyle; constructor( diff --git a/src/component/mxgraph/overlay/shapes.ts b/src/component/mxgraph/overlay/shapes.ts index a7d383eb7f..56005432d0 100644 --- a/src/component/mxgraph/overlay/shapes.ts +++ b/src/component/mxgraph/overlay/shapes.ts @@ -17,9 +17,9 @@ limitations under the License. import type { CustomCellOverlayStyle } from './custom-overlay'; import type { mxRectangle } from 'mxgraph'; -import { mxText } from '../initializer'; +import { mxgraph } from '../initializer'; -export class OverlayBadgeShape extends mxText { +export class OverlayBadgeShape extends mxgraph.mxText { constructor(value: string, bounds: mxRectangle, style: CustomCellOverlayStyle) { super( value, diff --git a/src/component/mxgraph/shape/edges.ts b/src/component/mxgraph/shape/edges.ts index 8c0aec5b0d..a66fcdd189 100644 --- a/src/component/mxgraph/shape/edges.ts +++ b/src/component/mxgraph/shape/edges.ts @@ -16,10 +16,10 @@ limitations under the License. import type { mxAbstractCanvas2D, mxPoint } from 'mxgraph'; -import { mxConnector, mxSvgCanvas2D, mxUtils } from '../initializer'; +import { mxgraph, mxSvgCanvas2D, mxUtils } from '../initializer'; import { BpmnStyleIdentifier } from '../style'; -export class BpmnConnector extends mxConnector { +export class BpmnConnector extends mxgraph.mxConnector { override paintEdgeShape(c: mxAbstractCanvas2D, pts: mxPoint[]): void { // The indirection via functions for markers is needed in // order to apply the offsets before painting the line and diff --git a/src/component/mxgraph/shape/event-shapes.ts b/src/component/mxgraph/shape/event-shapes.ts index 21abb77a0f..7a1994c2fb 100644 --- a/src/component/mxgraph/shape/event-shapes.ts +++ b/src/component/mxgraph/shape/event-shapes.ts @@ -18,7 +18,7 @@ import type { BpmnCanvas, PaintParameter, IconPainter } from './render'; import type { mxAbstractCanvas2D } from 'mxgraph'; import { ShapeBpmnEventDefinitionKind } from '../../../model/bpmn/internal'; -import { mxEllipse, mxUtils } from '../initializer'; +import { mxgraph, mxUtils } from '../initializer'; import { BpmnStyleIdentifier, StyleDefault } from '../style'; import { buildPaintParameter } from './render/icon-painter'; @@ -26,7 +26,7 @@ import { buildPaintParameter } from './render/icon-painter'; /** * @internal */ -export class EventShape extends mxEllipse { +export class EventShape extends mxgraph.mxEllipse { // The actual value is injected at runtime by BpmnCellRenderer protected iconPainter: IconPainter = undefined; diff --git a/src/component/mxgraph/shape/gateway-shapes.ts b/src/component/mxgraph/shape/gateway-shapes.ts index 555c4ff462..3584720483 100644 --- a/src/component/mxgraph/shape/gateway-shapes.ts +++ b/src/component/mxgraph/shape/gateway-shapes.ts @@ -18,13 +18,13 @@ import type { IconPainter, PaintParameter } from './render'; import type { mxAbstractCanvas2D } from 'mxgraph'; import { ShapeBpmnEventBasedGatewayKind } from '../../../model/bpmn/internal'; -import { mxRhombus, mxUtils } from '../initializer'; +import { mxgraph, mxUtils } from '../initializer'; import { BpmnStyleIdentifier, StyleDefault } from '../style'; import { getBpmnIsInstantiating } from '../style/utils'; import { buildPaintParameter } from './render/icon-painter'; -abstract class GatewayShape extends mxRhombus { +abstract class GatewayShape extends mxgraph.mxRhombus { // The actual value is injected at runtime by BpmnCellRenderer protected iconPainter: IconPainter = undefined; diff --git a/test/integration/mxGraph.model.bpmn.elements.test.ts b/test/integration/mxGraph.model.bpmn.elements.test.ts index 0df869e6d3..4ccade0458 100644 --- a/test/integration/mxGraph.model.bpmn.elements.test.ts +++ b/test/integration/mxGraph.model.bpmn.elements.test.ts @@ -36,9 +36,11 @@ import { ShapeBpmnMarkerKind, ShapeBpmnSubProcessKind, } from '@lib/bpmn-visualization'; -import { mxConstants, mxGeometry, mxPoint } from '@lib/component/mxgraph/initializer'; +import { mxConstants, mxgraph, mxPoint } from '@lib/component/mxgraph/initializer'; import { readFileSync } from '@test/shared/file-helper'; +const mxGeometry = mxgraph.mxGeometry; + describe('mxGraph model - BPMN elements', () => { describe('BPMN elements should be available in the mxGraph model', () => { describe('Diagram with all the kind of elements', () => { From e98d1d672056536d1ae57cc9fdb891bcad82a5d2 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Tue, 17 Mar 2026 14:29:39 +0100 Subject: [PATCH 10/11] revert changes on mxgraph objects exports --- src/component/mxgraph/initializer.ts | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/component/mxgraph/initializer.ts b/src/component/mxgraph/initializer.ts index 4b861cd5e8..bbecd222da 100644 --- a/src/component/mxgraph/initializer.ts +++ b/src/component/mxgraph/initializer.ts @@ -34,7 +34,25 @@ import factory, { type mxGraphExportObject } from 'mxgraph'; export const mxgraph = initialize(); /** @internal */ -export const { mxCellRenderer, mxClient, mxConstants, mxEvent, mxPerimeter, mxPoint, mxRectangle, mxRectangleShape, mxSvgCanvas2D, mxUtils } = mxgraph; +export const mxCellRenderer = mxgraph.mxCellRenderer; +/** @internal */ +export const mxClient = mxgraph.mxClient; +/** @internal */ +export const mxConstants = mxgraph.mxConstants; +/** @internal */ +export const mxEvent = mxgraph.mxEvent; +/** @internal */ +export const mxPerimeter = mxgraph.mxPerimeter; +/** @internal */ +export const mxPoint = mxgraph.mxPoint; +/** @internal */ +export const mxRectangle = mxgraph.mxRectangle; +/** @internal */ +export const mxRectangleShape = mxgraph.mxRectangleShape; +/** @internal */ +export const mxSvgCanvas2D = mxgraph.mxSvgCanvas2D; +/** @internal */ +export const mxUtils = mxgraph.mxUtils; /** @internal */ declare global { From 9417067f774a924d1b1f4a8e471b623b7e63ece2 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Wed, 18 Mar 2026 11:01:27 +0100 Subject: [PATCH 11/11] test: remove ref to "bpmn" in titles --- test/unit/component/mxgraph/renderer/StyleComputer.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts index b0a629b2bd..0c26f4e98d 100644 --- a/test/unit/component/mxgraph/renderer/StyleComputer.test.ts +++ b/test/unit/component/mxgraph/renderer/StyleComputer.test.ts @@ -479,8 +479,8 @@ describe('Style Computer', () => { ); }); - describe('compute style - ignore BPMN label styles', () => { - describe.each([[undefined], [false], [true]])(`Ignore BPMN label styles (renderer option): %s`, (ignoreLabelStyles: boolean) => { + describe('compute style - ignore label styles', () => { + describe.each([[undefined], [false], [true]])(`Ignore label styles (renderer option): %s`, (ignoreLabelStyles: boolean) => { const styleComputer = new StyleComputer(ignoreLabelStyles === undefined ? {} : { ignoreLabelStyles }); const expectFontStyles = !(ignoreLabelStyles ?? false);