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