Process Analytics - March 2022 News
Tags: typescript, news, bpmn, analytics
Published: 2022-05-03 13:36:42

Welcome to the Process Analytics monthly news 👋.

As we remind you each month, the goal of the Process Analytics project is to rapidly display meaningful Process Analytics components in your web pages using BPMN 2.0 notation and Open Source libraries.

In March, we worked on improving the bpmn-visualization TypeScript library and the bpmnVisualizationR package 🤗. Let’s see what’s new here 👀!

## bpmn-visualization TypeScript library

In March, we released 2 versions: [0.22.0](https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.22.0) & [0.23.0](https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.23.0). 

### Improvements for TypeScript projects 📃

We simplified the TypeScript integration by removing the need to install [typed-mxgraph](https://github.com/typed-mxgraph/typed-mxgraph) in your project.

It is now easier than ever to use [bpmn-visualization](https://www.npmjs.com/package/bpmn-visualization) in TypeScript projects 🎉.

### New API 📚

It is possible to use the new API to retrieve the [bpmn-visualization](https://www.npmjs.com/package/bpmn-visualization) and [mxGraph](https://github.com/jgraph/mxgraph) versions used at runtime: _[getVersion()](https://process-analytics.github.io/bpmn-visualization-js/api/classes/BpmnVisualization.html#getVersion)_.

An example of an integration is shown below 👇.

![new API usage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/alvpixas18fnyvfnx988.png)

This is done with the following JavaScript code that displays the version information in the footer of the page:

```javascript
// Use the new “Version” API
const version = bpmnVisualization.getVersion();

// bpmn-visualization version
const versionAsString = `bpmn-visualization@${version.lib}`;

// List all dependencies in the form of “dependency-1@version / dependency-2@version / ….”
const dependenciesAsString = [...version.dependencies].map(([name, version]) => `${name}@${version}`).join('/');

// “footer” is the html element that displays the version information
footer.innerText = `${versionAsString} with ${dependenciesAsString}`;
```

___
**_NOTE_**: This is helpful to debug projects that use a newer version of the [mxGraph](https://github.com/jgraph/mxgraph) library which currently causes issues, like version 4.2.2.
___

### BPMN rendering fixes ✅

☢️ The library didn't accept the coordinates of the waypoints of the edges defined in the BPMN 2.0 source. Instead, it forced the usage of orthogonal edges which had a lot of side effects.

The video below 👇 shows the behavior changes on message flows. The first part presents the rendering as it was done prior to the 0.23.0 version. The position of the message flow (and its label) sometimes changed depending on the zoom factor 😵‍💫. The same issue applied to overlays that were configured to be displayed at the middle of the edges. They were moved to the start or the end of the edge.

The second part of the video is done using the 0.23.0 version. The edge segments are no longer always orthogonal and the position of the element remains unchanged, regardless of the zoom factor. 🥳

![BPMN rendering fixes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k0b3k6dpkrf6wfc7nqet.gif)

Have a look at the [release notes of the 0.23.0 version](https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.23.0) to get the complete list of issues that are fixed by removing the '**always use orthogonal edges**' configuration.

### Documentation improvement 🎁

The icons used in the library are now available in **SVG** format in the [docs/users/images/icons](https://github.com/process-analytics/bpmn-visualization-js/tree/611e3e45e3a14029e399247096cd27025496519a/docs/users/images/icons) folder. Feel free to reuse the icons in your application.

The user documentation has also been updated to display the icons.

![Documentation improvement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4a9rjr23azlhvjgmfk5.png)

### Demo improvement ✨

The layout of the demo has been improved for mobile devices.

The demo also displays the current versions of [bpmn-visualization](https://www.npmjs.com/package/bpmn-visualization) and of the [mxGraph](https://github.com/jgraph/mxgraph) library in the footer.

![Demo improvement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/avuhgper4iv1iku2jns1.png)

## bpmnVisualizationR package

In March, we released 1 version: [0.1.2](https://github.com/process-analytics/bpmn-visualization-R/releases/tag/v0.1.2). 

The major change is the upgrade of the [bpmn-visualization](https://www.npmjs.com/package/bpmn-visualization) TypeScript library to version 0.23.0. 

## That’s All Folks!

We hope you enjoyed this March project news and are looking forward to what April will bring 👋.

In the meantime, to stay on top of the latest news and releases, follow us through:

* Website: [https://process-analytics.dev](https://process-analytics.dev/?utm_source=devto&utm_medium=display&utm_campaign=news)
* Twitter: [@ProcessAnalyti1](https://twitter.com/ProcessAnalyti1)
* GitHub: [https://github.com/process-analytics](https://github.com/process-analytics)

_Cover photo by Dustin Humes on[ Unsplash](https://unsplash.com/photos/2JozYOOMnCU)_