0.36.0

This new version brings several improvements, including enhancements to BPMN support (Ad-Hoc and Transition Sub-Processes), documentation updates, dependency updates, and maintenance. It also includes external contributions from community members.

Thanks to all the contributors of this release 🌈: @brendanlaschke, @csouchet and @tbouffard

See milestone 0.36.0 to get the list of issues covered by this release.

Highlights

🚀 BPMN support

Transition Sub-Process

We have introduced the support for the Transition Sub-Process.

See the image below for an example:

Ad-Hoc Sub-Process

We have also added the parsing functionality for the Ad-Hoc Sub-Process, although their visualization is not yet implemented.

⚠️ Please note that the rendering of the Ad-Hoc marker will be implemented in a future release.

See the image below for a representation:

External Contributions

We are excited to include the following external contributions in this release:

Vue Example

A new integration project for Vue has been contributed to the bpmn-visualization Examples repository.

ℹ️ Check it out here.

Dependencies

We have addressed a security vulnerability related to fast-xml-parser (#2736).
It's important to note that bpmn-visualization itself is not vulnerable to this CVE as it doesn't use the processEntities feature implicated in the vulnerability.
However, we recommend updating your application to the latest version of bpmn-visualization for optimal security.

ℹ️ Further information can be found here.

Breaking changes

This release includes some breaking changes that affect applications extending or modifying the BPMN theme. These changes should be transparent, and no impact has been observed in the bpmn-visualization examples and demo.

• In order to improve the implementation, the BpmnStyleIdentifier and MarkerIdentifier have been redefined as constant objects instead of classes.
  ℹ️ Refer to PR #2716 for more details.
• The StyleDefaut enum has been replaced with a constant object.
  ℹ️ PR #2728 provides additional information about this modification.

⚠️ Review and update your codebase to accommodate these breaking changes if necessary.

Install Size for Development

The installation size of the library for development purposes has been decreased.
Comments and JSDoc have been removed from the ESM and IIFE (non-minified) bundles provided in the npm package.

ℹ️ For more information, you can refer to this pull request.

What's Changed

Full Changelog: v0.35.0...v0.36.0

🚀 BPMN support

• feat: detect Ad-Hoc Sub-Processes (#2723) @tbouffard
• feat: add support for 'transaction' subprocess (#2719) @tbouffard

📝 Documentation

• docs: improve paragraphs about colors and styles (#2734) @tbouffard
• docs: update browsers version in README (#2726) @tbouffard

📦 Dependency updates

• chore(deps): bump @typed-mxgraph/typed-mxgraph from 1.0.7 to 1.0.8 (#2737) @csouchet
• chore(deps): bump fast-xml-parser from 4.2.2 to 4.2.4 (#2736) @dependabot

👻 Maintenance

• refactor!: transform StyleDefault into an object (#2728) @tbouffard
• test: simplify integration tests (#2727) @tbouffard
• ci: run the "performance test" workflow less often (#2725) @tbouffard
• test(e2e): correctly display diff images in the report generated on windows (#2720) @brendanlaschke
• ci: better configure the "paths" triggering the execution of workflows running tests (#2722) @csouchet
• refactor: simplify the parsing of elements of process (#2721) @tbouffard
• refactor: use object instead of class for style identifiers (#2716) @tbouffard
• chore: remove comments from bundle files (#2718) @tbouffard
• ci: run e2e and performance tests workflows less often (#2717) @tbouffard

0.35.0

This new version introduces support for the "BPMN in color" specification and dependency changes.

Thanks to all the contributors of this release 🌈: @tbouffard

See milestone 0.35.0 to get the list of issues covered by this release.

Highlights

Support for the BPMN in Color specification

The "BPMN in Color" specification lets you define the colors of BPMN elements during modeling.
This specification is recommended for color exchange between BPMN modeling tools.

ℹ️ More details about the specification are available in the bpmn-miwg/bpmn-in-color GitHub repository.

In bpmn-visualization 0.35.0, "BPMN in Color" support is enabled with a fallback to bpmn.io-specific BPMN extensions for colors.
By default, rendering of colors defined in the BPMN source is disabled. To enable "BPMN in Color" support, use the following code snippet:

const bpmnVisualization = new BpmnVisualization({
            container: 'bpmn-container',
            renderer: { ignoreBpmnColors: false }
});

Rendering of the C.1.0 diagram when the "BPMN in Color" support is enable

⏩ Want to test it live? Give a try to the following example:

• Load and navigation demo
• Example that loads diagrams from miwg-test-suite. Load A.4.1 or C.1.0 for instance.

Dependency changes

Switched from lodash to lodash-es

Previously, bpmn-visualization depended on the lodash-throttle and lodash-debounce CommonJS dependencies.
They have been replaced by a single ESM dependency: lodash-es.

Using the ESM dependency allows for better tree shaking and improves interoperability with bundlers.

For example, this change eliminates the need to configure the removal of warnings issued by Angular 15 due to lodash dependencies.
In Angular 15, there is a warning about using CommonJS dependencies, specifically for the lodash dependencies. However, the step to remove these warnings is no longer necessary as demonstrated in process-analytics/bpmn-visualization-examples#495.

ℹ️ For more information, see #2678.

Removal of entities

bpmn-visualization no longer depends on the entities dependency to decode XML attribute entities.
Instead, it provides its own default entities decoder. Users can also use their own decoder when initializing the library.
The following code snippet demonstrates how to create a decoder using the entities library:

import { decodeXML } from 'entities';
const bpmnVisualization = new BpmnVisualization({
            container: 'bpmn-container',
            parser: {
              additionalXmlAttributeProcessor: (val: string) => { return decodeXML(val) }
            }
});

ℹ️ For more details, see #2704.

What's Changed

Full Changelog: v0.34.1...v0.35.0

🚀 BPMN support

• feat: add support for 'BPMN in Color' (#2614) @tbouffard

🧲 BPMN diagram usability

• fix: keep existing CSS classes when calling the "Update Style" API (#2709) @tbouffard

🐛 Bug Fixes

• fix: keep existing CSS classes when calling the "Update Style" API (#2709) @tbouffard

⤵️ Library Integration

• feat(parser): let configure XML attribute processing (#2704) @tbouffard
• feat(parser): generate more explicit warning logs (#2677) @tbouffard

🎮 Demo and Examples

• feat(demo): simplify logs displaying fit and load options (#2707) @tbouffard

📦 Dependency updates

• chore(deps): use the lodash-es dependency (#2678) @tbouffard

👻 Maintenance

• test: prepare support for transaction sub-processes (#2713) @tbouffard
• test(e2e): only run the "Update Style" API when query parameters are set (#2693) @tbouffard
• chore: fix a typo in the release-drafter template (#2685) @tbouffard

0.34.1

This is a maintenance release, including documentation improvements.

Thanks to all the contributors of this release 🌈: @csouchet and @tbouffard

See milestone 0.34.1 to get the list of issues covered by this release.

Highlights

Examples improvements

The examples have been updated to demonstrate the improvements provided with version 0.34.0.
ℹ️ For more details about all changes, see the examples 0.34.0 release notes.

The Monitoring demo now uses the Update Style API instead of the CSS API to have a consistent stroke width even when zooming.
Want to give a try to the updated demo? Have a look at the ⏩ live environment.

The projects have been reworked and they all demonstrate how to use the Overlays, CSS and Update Style API. The following screenshot shows the rendering with the example application 👇🏿

The examples running in Live IDE have been updated as well to let play with all API, in particular the Update Style API 👇🏿.

Have a look at the ⏩ live environment.

What's Changed

Full Changelog: v0.34.0...v0.34.1

📝 Documentation

• docs: improve the README (examples + firefox logo) (#2670) @tbouffard
• docs(release): add tips for referencing the examples repository (#2669) @tbouffard

👻 Maintenance

• refactor: transform overlay types from interface to type (#2675) @csouchet
• refactor: avoid using "bind" when calling methods in the css registry (#2668) @tbouffard

0.34.0

Among the highlights of this release is the addition of a new API to remove all CSS classes from HTML elements of BPMN diagram, the improvement of the linking of EdgeBpmnSemantic and ShapeBpmnSemantic, and the usage of the "Update Style" API in the "Elements Identification" demo.

Thanks to all the contributors of this release 🌈: @brendanlaschke, @csouchet and @tbouffard

See milestone 0.34.0 to get the list of issues covered by this release.

Highlights

New API to remove all CSS classes of BPMN elements

A new API called removeAllCssClasses has been added to the BpmnElementsRegistry, allowing users to remove all CSS classes from HTML elements of BPMN elements.

Also, the TS doc of BpmnElementsRegistry has been updated to be more English-friendly.

ℹ️ For more details, visit #2666.

Enhanced linking of EdgeBpmnSemantic and ShapeBpmnSemantic

The incomingIds and outgoingIds properties of ShapeBpmnElement are now assigned from the Flow, resulting in improved linking of Edge and Shape in the internal model.

As a result, the incomingIds and outgoingIds properties of ShapeBpmnSemantic now store the links calculated from the EdgeBpmnSemantic.

ℹ️ For more details, visit #2521 and #2638.

"Elements Identification" Demo Uses the "Update Style" API

The "Elements Identification" demo now includes a radio button to select the mode to apply the style: CSS or API.
The style is updated according to the selected BPMN kind and style method.

Style by CSS

Style by API

Additionally, we have included the missing TS Doc API for StyleWithOpacity.

ℹ️ For more details, visit #2630.

What's Changed

Full Changelog: v0.33.1...v0.34.0

🧲 BPMN diagram usability

• feat: enrich links between edges and shapes in the internal model (#2638) @csouchet

🌈 BPMN diagram styling

• feat: add an API to remove all CSS classes of BPMN elements (#2666) @csouchet

🎮 Demo and Examples

• feat: use the "Update Style" API in the "Elements Identification" demo (#2630) @csouchet

📦 Dependency updates

• chore(deps): bump fast-xml-parser from 4.2.0 to 4.2.2 (#2652) @dependabot

👻 Maintenance

• test: move shared code to a dedicated directory (#2662) @tbouffard
• refactor: fix code smells detected by SonarCloud (#2667) @csouchet
• test: add visual tests for label of collapsed/expanded activities (#2664) @tbouffard
• test: simplify imports in test code (#2467) @tbouffard
• ci: publish npm package with "provenance" (#2658) @tbouffard
• refactor: remove duplication in the "Update Style" API (#2586) @tbouffard
• chore(build): replace rollup-plugin-auto-external with rollup-plugin-node-externals (#2649) @brendanlaschke
• test: improve JsonBuilder for the Text Annotation (#2636) @csouchet
• test: simplify constructors of "page utils" classes (#2641) @tbouffard
• test: improve JsonBuilder for global task and call activity (#2634) @csouchet
• test: improve JsonBuilder for the Association (#2633) @csouchet
• test: improve JsonBuilder for the Sub-Process (#2632) @csouchet
• test: remove unnecessary attribute check in json parsing tests (#2631) @csouchet

0.33.1

This new version brings a bug fix on diagram loading, and demo updating.

Thanks to all the contributors of this release 🌈: @csouchet and @tbouffard

What's Changed

Full Changelog: v0.33.0...v0.33.1

🐛 Bug Fixes

• fix(registry): fix error when no diagram has been loaded (#2611) @tbouffard

🦾 Robustness

• fix(registry): fix error when no diagram has been loaded (#2611) @tbouffard

🎮 Demo and Examples

• feat(demo): update the overlay style in the elements-identification page (#2625) @csouchet
• chore(demo): bump fontawesome from 6.3.0 to 6.4.0 (#2599) @tbouffard

📦 Dependency updates

• chore(deps): bump fast-xml-parser from 4.1.3 to 4.2.0 (#2618) @dependabot

0.33.0

This new version provides a new API that allows to update the style of one or more BPMN elements at runtime.

Thanks to all the contributors of this release 🌈: @csouchet and @tbouffard

See milestone 0.33.0 to get the list of issues covered by this release.

Highlights

Introducing the new "Update Style" API

The new API lets update the style of one or more elements. The fill, font, stroke and global opacity properties can be updated or reset to default values.

// Change the style of a Task
bpmnVisualization.bpmnElementsRegistry.updateStyle('task_1', {  
 fill: {color: 'orange', opacity: 40},
 stroke: {color: 'blue', width: 3},  
});  
// Change the style of a Sequence Flow
bpmnVisualization.bpmnElementsRegistry.updateStyle('sequenceFlow_1', {  
 stroke: {color: 'blue', width: 4},  
});

// Change the the fill color of the Task again
// Previously updated properties remain in effect
bpmnVisualization.bpmnElementsRegistry.updateStyle('task_1', {  
 fill: {color: 'blue'},
});

// Restore the default value of the stroke color of the Task and Sequence Flow
bpmnVisualization.bpmnElementsRegistry.updateStyle(['task_1', 'sequenceFlow_1'], {  
 stroke: {color: 'default'},  
});

For more details about the options you can use to update the style, see the v0.33.0 type definitions.

What's Changed

Full Changelog: v0.32.0...v0.33.0

🌈 BPMN diagram styling

• feat: reset style per property with the "Update Style" API (#2585) @tbouffard
• feat: configure programatically the width of stroke style of a shape/edge (#2583) @csouchet
• feat(style): configure programatically the opacity style properties of a shape (#2581) @csouchet
• feat(style): configure programatically the fill style of a shape (#2580) @csouchet
• feat(style): configure programatically the font style of a shape/edge (#2579) @csouchet
• feat: introduce the Update Style API (#2556) @tbouffard

📝 Documentation

• docs: update the list of working chromium browsers (#2569) @tbouffard

🎮 Demo and Examples

• feat: add all BPMN Elements in Elements Identification page (#2584) @csouchet

👻 Maintenance

• refactor: change snapshot name of e2e for consistency (#2582) @csouchet
• test: simplify utility code in integration tests (#2572) @tbouffard
• test: use explicit ids in the "registry" BPMN diagrams (#2565) @tbouffard
• ci(release): improve the release commit message (#2564) @tbouffard
• ci(e2e-tests): fix false positive tests on macOS with Firefox (#2562) @tbouffard

0.32.0

This new version improves the robustness of bpmn-visualization.

Thanks to all the contributors of this release 🌈: @tbouffard

See milestone 0.32.0 to get the list of issues covered by this release.

Highlights

CVE fix in fast-xml-parser

bpmn-visualization uses fast-xml-parser to parse the BPMN diagrams in XML format. Unfortunately, a vulnerability in fast-xml-parser has recently been disclosed. See SNYK-JS-FASTXMLPARSER-3325616 for more details.

A fix is now available and bpmn-visualization uses a version of fast-xml-parser that includes the fix.

However, the vulnerability exists in all versions of fast-xml-parser prior to version 4.1.2. Since earlier versions of bpmn-visualization depend on older versions of fast-xml-parser, we strongly recommend that all users update their application to bpmn-visualization 0.32.0 immediately.
Users can also manually update the version of fast-xml-parser in their application. Note that there is no guarantee that it will work fully with the older version of bpmn-visualization.

ℹ️ See #2548 for more information.

Breaking Changes

StyleUtils may have been used in rare cases to redefine the way the shapes are rendered. It wasn't used in the bpmn-visualization examples.

StyleUtils was marked as experimental and was subject to change as part of the BPMN Theme refactoring. So users already knew that it might be removed.

ℹ️ See #2550 for more information.

What's Changed

Full Changelog: v0.31.0...v0.32.0

📝 Documentation

• docs: fix license header in files of the root directory (#2557) @tbouffard
• docs(contributor): add missing link to mxGeometry source (#2540) @tbouffard
• docs: switch header license from JSDoc to regular block comments (#2525) @tbouffard

📦 Dependency updates

• chore(deps): bump fast-xml-parser from 4.1.2 to 4.1.3 (#2552) @dependabot
• chore(deps): bump fast-xml-parser from 4.1.1 to 4.1.2 (#2548) @dependabot

👻 Maintenance

• refactor: rework label position setting in StyleComputer (#2551) @tbouffard
• test: add test for gateway label position in visual tests (#2553) @tbouffard
• test: improve the layout of the integration test BPMN Diagram (#2554) @tbouffard
• refactor: remove StyleUtils (#2550) @tbouffard
• test: remove duplication in font value computation (#2549) @tbouffard
• refactor: introduce batchUpdate for model transaction (#2538) @tbouffard
• chore: ensure that the PR title follows "Conventional Commits" (#2529) @tbouffard

0.31.0

This new version makes it easy to navigate between the elements of the diagram.

Thanks to all the contributors of this release 🌈: @tbouffard

See milestone 0.31.0 to get the list of issues covered by this release.

Highlights

APIs return the links between elements in the BPMN Semantic

The getElementsByIds and getElementsByKinds methods of BpmnElementsRegistry now return

• for shape/flownode: the id of the incoming and outgoing edge/flow

{
  id: string;
  name: string;
  isShape: boolean;
  kind: BpmnElementKind;
  // new properties
  incomingIds: string[];
  outgoingIds: string[];
}

• for edge/flow: the id of the source and target shape/flownode

{
  id: string;
  name: string;
  isShape: boolean;
  kind: BpmnElementKind;
  // new properties
  sourceRefId: string;
  targetRefId: string;
}

This makes it easy to navigate between the elements of the diagram.

The js-popover example has been updated to display the new available information: go to the ⏩ v0.31.0 live example or see the screenshots below 👇🏿.

shape	edge

New draw path demo

This new demo show how to highlight 2 consecutive shapes by clicking on a shape/flownode or an edge/flow as shown in the video below 👇🏿.

Enregistrement.de.l.ecran.2023-02-14.a.17.11.19.mov

draw-path demo: click on shape then on consecutive shape

For more videos, see process-analytics/bpmn-visualization-examples#452.

To play with the live demo, go to ⏩ https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/v0.31.0/demo/draw-path/index.html.

What's Changed

Full Changelog: v0.30.0...v0.31.0

🚀 BPMN support

• [FEAT] Include Flownodes incoming/outgoing in the internal model (#2520) @tbouffard

🧲 BPMN diagram usability

• [FEAT] BpmnElementsRegistry API returns shape incoming/outgoing (#2523) @tbouffard
• [FEAT] BpmnElementsRegistry API returns source/target for edges (#2522) @tbouffard

📝 Documentation

• [DOC] Add license header to all dist files in npm package (#2524) @tbouffard

🎮 Demo and Examples

• [DEMO] Bump fontawesome from 6.2.1 to 6.3.0 (#2512) @tbouffard

👻 Maintenance

• [REFACTOR] Do not ignore the 'ban-ts-comment' eslint rule per file (#2526) @tbouffard

0.30.0

This new version brings direct access to the mxgraph context.

Thanks to all the contributors of this release 🌈: @tbouffard

See milestone 0.30.0 to get the list of issues covered by this release.

Highlights

Export the mxgraph context

Now, it's possible to access to the mxgraph context directly from bpmn-visualization.

What's Changed

Full Changelog: v0.29.2...v0.30.0

⤵️ Library Integration

• [FEAT] Export the mxgraph context (#2502) @tbouffard

📦 Dependency updates

• [INFRA] deps - Bump fast-xml-parser from 4.0.14 to 4.1.1 (#2506) @dependabot
• [INFRA] deps - Bump fast-xml-parser from 4.0.13 to 4.0.14 (#2475) @dependabot

👻 Maintenance

• [INFRA] GH runners use ubuntu-22.04 and windows-2022 (#2477) @tbouffard
• [INFRA] Bump Node from 16 to 18 (#2478) @tbouffard
• [INFRA] Rename the GH workflow that build and test the npm package (#2479) @tbouffard
• [INFRA] Revert "use organization variables for runners" (#2476) @tbouffard

0.29.2

This is a maintenance release.

Thanks to all the contributors of this release 🌈: @csouchet and @tbouffard

See milestone 0.29.2 to get the list of issues covered by this release.

What's Changed

Full Changelog: v0.29.1...v0.29.2

👻 Maintenance

• [INFRA] Use organization variables for runners (#2465) @csouchet
• [INFRA] Use organization variables for PA bot (#2466) @csouchet
• [REFACTOR] Clarify the style configuration for Associations (#2461) @tbouffard
• [REFACTOR] Improve the default style configuration (#2462) @tbouffard