0.7.0

⚡ Exciting New Features in this Release! ⚡

Check out the full list of issues here: Milestone 0.7.0

🚀 Highlights

🎨 New Plugin: StyleByNamePlugin

In bpmn-visualization, BPMN elements are identified by their unique IDs. However, in some cases (like "Process Discovery"), only the element names are available to applications.

Previously, the BpmnElementsSearcher was introduced to retrieve an element's ID by name, allowing the use of existing bpmn-visualization APIs. With this release, the new StyleByNamePlugin simplifies things! Now, you can directly style elements using their names, mirroring the functionality of StyleRegistry.

Before:

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

const bpmnElementsRegistry = bpmnVisualization.bpmnElementsRegistry;
const searcher = new BpmnElementsSearcher(bpmnElementsRegistry);

// Update the style of a given element
const bpmnElementId = searcher.getElementIdByName('element-name');
bpmnElementsRegistry.updateStyle(bpmnElementId, styleUpdate);

// Updating the style of multiple elements was even more complex
const bpmnElementIds = searcher.searcher.getElementsByNames(['element-name-1', 'element-name-2'])
                                        .map(bpmnElement => bpmnElement.id);
bpmnElementsRegistry.updateStyle(bpmnElementIds, styleUpdate);

Now:

const bpmnVisualization = new BpmnVisualization({
  container: 'bpmn-container',
  plugins: [StyleByNamePlugin], // register the plugin
});

const styleByNamePlugin = bpmnVisualization.getPlugin<StyleByNamePlugin>('style');

// Update the style of a given element
styleByNamePlugin.updateStyle('element-name', styleUpdate);
// Update the style of multiple elements
styleByNamePlugin.updateStyle(['element-name-1', 'element-name-2'], styleUpdate);

✨ This streamlined approach significantly reduces complexity when working with element names!

📣 More name-based plugins are coming soon: 🎉

• #73
• #74
• #76

🛠️ Introducing Specialized Plugins

This version also introduces several new plugins, breaking down the BpmnElementsRegistry API into focused, interface-specific components:

• CssClassesPlugin mirrors CssClassesRegistry
• OverlaysPlugin mirrors OverlaysRegistry
• StylePlugin mirrors StyleRegistry

These plugins hint at the future direction of bpmn-visualization, where the BpmnElementsRegistry will be split into more specialized APIs.

ℹ️ For further details, visit Issue #77

What's Changed

🎉 New Features

• feat: introduce StyleByNamePlugin by @tbouffard in #281
• feat(demo): demonstrate the style update plugin using BPMN names by @tbouffard in #285
• feat: introduce the StylePlugin by @tbouffard in #286
• feat: introduce CssClassesPlugin by @tbouffard in #288
• feat(type): add guidance to retrieve core plugins by @tbouffard in #289

🐛 Bug Fixes

• fix: add missing ElementsPlugin export by @tbouffard in #280

📝 Documentation

• docs: improve BpmnElementsSearcher documentation by @tbouffard in #221

⚙️ Other Changes

• chore(dev): build with Node 20 by @tbouffard in #271
• refactor(demo): reorganize CSS by @tbouffard in #284

Full Changelog: v0.6.1...v0.7.0