Skip to content

Releases: process-analytics/bpmn-visualization-js

0.16.0

31 May 15:28
@tbouffard tbouffard
v0.16.0
1d81cb0
Compare
Choose a tag to compare
0.16.0

This new release focuses on improving the documentation and removing the demo code from the packaging.

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

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

Highlights

User documentation

Now, you can find in the user documentation the following new sections: Process Data, Overlays and Custom Behavior.

What's Changed

⤵️ Library Integration

📝 Documentation

📦 Dependency updates

👻 Maintenance

Assets 2
Loading

0.15.0

17 May 14:38
@csouchet csouchet
v0.15.0
57e4753
Compare
Choose a tag to compare
0.15.0

This new release focuses on diagram navigation and documentation improvements.

It contains the initial support for diagram navigation on touch screen devices. The diagram navigation on macOS has also been reviewed.

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

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

Highlights

You are now able to use diagram navigation on touch screen devices. For current limitations, see #847.

diagram navigation on mobile

What's Changed

🧲 BPMN diagram usability

📝 Documentation

📦 Dependency updates

👻 Maintenance

Assets 2
Loading

0.14.1

03 May 09:39
@csouchet csouchet
v0.14.1
6123109
Compare
Choose a tag to compare
0.14.1

Improved documentation and tests, update of dependencies
This new release consists of:

  • Documentation update
  • Tests improvement
  • Dependencies update

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

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

Highlights

Although no new functionality was introduced, the important improvement concerning Documentation, Tests, and update of dependencies were done.

What's Changed

📝 Documentation

  • [DOC] Improve the Diagram Navigation paragraph in user documentation (#1258) @tbouffard
  • [DOC] Improve the bpmn-visualization presentation sentence (#1255) @tbouffard
  • [DOC] Fix typo on the example for the RemoveAllOverlays in the documentation (#1243) @csouchet

📦 Dependency updates

👻 Maintenance

  • [TEST] Improve thresholds configuration for overlay styles visual tests (#1235) @tbouffard
Assets 2
Loading

0.14.0

19 Apr 09:41
@csouchet csouchet
v0.14.0
f783083
Compare
Choose a tag to compare
0.14.0

This new release focuses on the improvement of the API to add one or several Overlays, on implementation of the new API to remove all the overlays of a specific BPMN element, on adding automatic tests on Webkit, on the improvement of the coverage.

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

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

Highlights

Add one or several Overlays

API

class BpmnElementsRegistry {
  /**
   * Add one/several overlays to a BPMN element.
   *
   * Notice that if you pass an id that is not related to an existing BPMN element, nothing happens on the rendering side.
   *
   * @param bpmnElementId The BPMN id of the element where to add the overlays
   * @param overlays The overlays to add to the BPMN element
   */
  addOverlays(bpmnElementId: string, overlays: Overlay | Overlay[]): void {
      ...
   }
   ...
}

New position for Ovelay on Shape: top-center, bottom-center, middle-left, middle-right
Position for Ovelay on Edge: start, middle, end

Usage

Add one or several Overlays, with default style, on an Edge of the BPMN Diagram

  // Add an overlay to BPMN elements with id 'sequence_flow_1'
  bpmnVisualization.bpmnElementsRegistry.addOverlays('sequence_flow_1', { position: 'middle', label: '40' });

  // Add several overlays to BPMN element with id 'sequence_flow_3'
  bpmnVisualization.bpmnElementsRegistry.addOverlays('sequence_flow_3', [{ position: 'end', label: '110' }, { position: 'start', label: '40' }]);

Add one or several stylized Overlays

  // Add an overlay to BPMN elements with id 'task_1'
  bpmnVisualization.bpmnElementsRegistry.addOverlays('task_1', {
    position: 'top-left',
    label: '40',
    style: {
      font: { color: 'Chartreuse', size: 8 },
      fill: { color: 'Pink', opacity: 50 },
      stroke: { color: 'DarkSeaGreen', width: 2 }
    }
  });

  // Add several overlays to BPMN element with id 'task_3'
  bpmnVisualization.bpmnElementsRegistry.addOverlays('task_3', [
    {
      position: 'bottom-right',
      label: '110',
      style: {
        font: { color: '#663399', size: 8 },
        fill: { color: '#FFDAB9', opacity: 50 },
        stroke: { color: 'DarkSeaGreen', width: 2 }
      }
    },
    {
      position: 'top-left',
      label: '40',
      style: {
        font: { color: 'MidnightBlue', size: 30 },
        fill: { color: 'Aquamarine', opacity: 70 },
        stroke: { color: '#4B0082', width: 1 }
      }
    }
  ]);

Rendering

Add one or several Overlays, with default style, on an Shape of the BPMN Diagram

image

Add one or several Overlays, with default style, on an Edge of the BPMN Diagram

image

Add one or several stylized Overlays

image

Remove all the overlays of a specific BPMN element

API

class BpmnElementsRegistry {
  /**
   * Remove all overlays of a BPMN element.
   *
   * <b>WARNING</b>: could be renamed when adding support for removal of one or several specific overlays.
   *
   * @param bpmnElementId The BPMN id of the element where to remove the overlays
   */
  removeAllOverlays(bpmnElementId: string): void {
    ...
  }
   ...
}

Usage

  //  all overlays of the BPMN element with id: activity_1
  bpmnVisualization.bpmnElementsRegistry.removeAllOverlays('activity_1');

Automatic tests on Webkit

Github actions

The e2e tests are automatically run on Webkit on MacOs with Github actions on Pull request.

Locally

To execute the e2e tests on Webkit locally, run the following command:
BROWSERS=webkit npm run test:e2e

Coverage improvement

0.13.0

image

0.14.0

image

What's Changed

🧲 BPMN diagram usability

📝 Documentation

📦 Dependency updates

👻 Maintenance

Assets 2
Loading

0.13.0

22 Mar 14:56
@csouchet csouchet
v0.13.0
5b3491f
Compare
Choose a tag to compare
0.13.0

This new release focuses on the documentation improvement and on the first implementation of the new API to add one or several Overlays on a Shape.

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

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

Highlights

API documentation

The internal types are no longer displayed on the API documentation.
Now, the API documentation is generated in the same time as the User documentation.

API to add one or several Overlays on a Shape of the BPMN Diagram

API

class BpmnElementsRegistry {
  /**
   * Add one/several overlays to a BPMN element.
   *
   * Notice that if you pass an id that is not related to an existing BPMN element, nothing happens on the rendering side.
   *
   *
   * @param bpmnElementId The BPMN id of the element where to add the overlays
   * @param overlays The overlays to add to the BPMN element
   */
  addOverlays(bpmnElementId: string, overlays: Overlay | Overlay[]): void {
      ...
   }
   ...
}

Usage

  // Add an overlay to BPMN elements with id 'task_1'
  bpmnVisualization.bpmnElementsRegistry.addOverlays('task_1', { position: 'top-left', label: '40' });

  // Add several overlays to BPMN element with id 'task_3'
  bpmnVisualization.bpmnElementsRegistry.addOverlays('task_3', [{ position: 'bottom-right', label: '110' }, { position: 'top-left', label: '40' }]);

Rendering

image

What's Changed

🧲 BPMN diagram usability

📝 Documentation

📦 Dependency updates

👻 Maintenance

Assets 2
Loading

0.12.2

08 Mar 14:36
@csouchet csouchet
v0.12.2
1a5eeec
Compare
Choose a tag to compare
0.12.2

This new release focuses on improving bpmn-visualization internals.

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

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

Highlights

Dependencies

fast-xml-parser, which is used to parse the BPMN xml source, has been upgraded from 3.17.6 to 3.18.0.

Internals

We now store parts of the BpmnModel into memory and use it directly in BPMN elements retrieval (for instance, in BpmnElementsRegistry) instead of relying on mxGraph.
In the future, this will let bpmn-visualization provide more features like

  • diagram selection (#729 and #860)
  • pools filtering (#592 and #859)
  • search BPMN elements by name (or other criteria)
  • more BPMN Semantic data associated to selected BPMN elements (#929)

Testing

We now rely on playwright instead of puppeteer to run tests relying on web browsers.
This allows to run frequent Firefox tests on windows and will allow to run tests on Safari soon.

What's Changed

🚀 BPMN support

  • [FIX] Don't store 'edge without bpmn element' in the BpmnModel (#1113) @tbouffard

🐛 Bug Fixes

  • [FIX] Don't store 'edge without bpmn element' in the BpmnModel (#1113) @tbouffard

🦾 Robustness

📝 Documentation

📦 Dependency updates

👻 Maintenance

  • [INFRA] Dispatch event to the examples repository in order to update it automatically on release (#1141) @csouchet
  • [REFACTOR] Store part of the BpmnModel into memory for searches (#1115) @tbouffard
  • [INFRA] Use playwright instead of puppeteer in end-to-end tests (#1097) @csouchet
  • [INFRA] Publish demo preview for Pull Request (#1124) @csouchet
  • [FIX] Fix the technical debt detected by Sonar (#1116) @csouchet
  • [REFACTOR] Don't catch and only log warnings in the Json Parser (#1114) @tbouffard
Assets 2
Loading

0.12.1

08 Feb 16:20
@tbouffard tbouffard
v0.12.1
307b8d3
Compare
Choose a tag to compare
0.12.1

This new release focuses on the export fixing to customize the BPMN rendering.

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

No associated milestone

Highlights

API

Now, it's possible to access to the MxGraph object from the API: mxConstants.

What's Changed

👻 Maintenance

Assets 2
Loading

0.12.0

08 Feb 15:43
@csouchet csouchet
v0.12.0
0c5b276
Compare
Choose a tag to compare
0.12.0

This new release focuses on new API to toggle CSS classes on elements of the BPMN Diagram, improvement of the library initialization, documentation improvements, improvement of the tests.

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

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

Highlights

API to toggle CSS classes on elements of the BPMN Diagram

API

class BpmnElementsRegistry {
   /**
     * Toggle one/several CSS class(es) for one/several BPMN element(s).
     * Notice that if you pass ids that are not related to existing BPMN elements, their reference will be kept within the registry but nothing happens on the rendering side.
     *
     * @param bpmnElementIds The BPMN id of the element(s) where to remove the CSS classes
     * @param classNames The name of the class(es) to remove from the BPMN element(s)
     */
    toggleCssClasses(bpmnElementIds: string | string[], classNames: string | string[]): void;{
      ...
   }
   ...
}

Usage

 // Toggle 'highlight' for BPMN elements with id: activity_1 and activity_2
 bpmnVisualization.bpmnElementsRegistry.toggleCssClasses(['activity_1', 'activity_2'], 'highlight');

 // Toggle 'running' and 'additional-info' for BPMN element with id: task_3
 bpmnVisualization.bpmnElementsRegistry.toggleCssClasses('task_3', ['running', 'additional-info']);

Library initialization

No need for a configuration file for mxGraph.

Before

    <!-- load global settings for mxGraph -->
    <script src="static/js/configureMxGraphGlobals.js"></script>
    <!-- load mxGraph client library -->
    <script src="./static/js/mxClient.min.js"></script>
    <!-- load demo -->
    <script src="index.esm.js" type="module"></script>

Now

    <!-- load demo -->
    <script src="index.esm.js" type="module"></script>

Test

Now, it's possible to run the End-to-End tests on Firefox.

To use Firefox instead of Chromium, use a PUPPETEER_PRODUCT environment variable: first install Firefox for Puppeteer, then configure Puppeteer to use Firefox.

On Linux or macOS

# install Firefox for Puppeteer
PUPPETEER_PRODUCT=firefox npm install puppeteer
# Run tests with Firefox
PUPPETEER_PRODUCT=firefox npm run test:e2e

On Windows using cmd

  • ⚠️ for some reasons, tests on Windows are working only in mode headless: false (update test/e2e/jest-puppeteer.config.js
    or use extra environment variable, see below)
  • ⚠️ there is no space between firefox and &&
set PUPPETEER_PRODUCT=firefox&& npm install puppeteer
set PUPPETEER_PRODUCT=firefox&& npm run test:e2e

GitHub workflow

  • Use of npm cache
  • Manual publishing to gh-pages

Examples

With the new API, the customized view is persistent (before the added classes were disappearing on panning/zooming as mxGraph redraws everything).

What's Changed

🧲 BPMN diagram usability

  • [FEAT] Add new API to toggle CSS classes for BPMN elements (#1058) @aibcmars
  • [FEAT] Add new API to remove CSS classes from BPMN elements (#1045) @tbouffard

📝 Documentation

📦 Dependency updates

👻 Maintenance

Assets 2
Loading

0.11.0

25 Jan 14:02
@aibcmars aibcmars
v0.11.0
b70d4ea
Compare
Choose a tag to compare
0.11.0

This new release focuses on new API to add CSS classes on elements of the BPMN Diagram, improvement of the library initialization, new bundle, new documentation for public API, and new workflow to add security check with GitHub CodeQL.

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

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

Highlights

Library initialization

Before

class BpmnVisualization {
   constructor(protected container: HTMLElement, options?: GlobalOptions) {
      ...
   }
   ...
}

interface GlobalOptions {
   mouseNavigationSupport: boolean;
   zoomConfiguration: ZoomConfiguration;
}

Now

class BpmnVisualization {
   constructor(options: GlobalOptions) {
      ...
   }
   ...
}

interface GlobalOptions {
   /** The id of a DOM element or an HTML node where the BPMN diagram is rendered. */
   container: string | HTMLElement;
   /** Control the BPMN diagram navigation i.e. panning and zoom. */
   navigation?: NavigationConfiguration;
}

interface NavigationConfiguration {
   /**
    * @default false
    */
   enabled: boolean;
   /** Tune how the zoom behaves when using the mouse wheel or with gesture/pinch on touch devices. */
   zoom: ZoomConfiguration;
}

API to add CSS classes on elements of the BPMN Diagram

API

class BpmnElementsRegistry {
    /**
    * Add one/several CSS class(es) to one/several BPMN element(s)
    *
    * @param bpmnElementIds The BPMN id of the element(s) where to add the CSS classes
    * @param classNames The name of the class(es) to add to the BPMN element(s)
    */
   addCssClasses(bpmnElementIds: string | string[], classNames: string | string[]): void {
      ...
   }
   ...
}

Usage

   const bpmnVisualization =  new BpmnVisualization({ containerId: 'my_id' });
   bpmnVisualization.bpmnElementsRegistry.addCssClasses(bpmnElementId, classNames);

Non minified IIFE bundle

Before

Minified IIFE

Available in dist/bpmn-visualization.js

Non minified IIFE

⚠️ Unavailable

Now

Minified IIFE

Available in dist/bpmn-visualization.min.js

Non minified IIFE

Available in dist/bpmn-visualization.js

Documentation of Public API

A HTML documentation is generated in build/docs/api from src/api/public/api.ts with npm run api-docs or the new workflow generate-documentation-api.
It is available on Github pages.

What's Changed

🧲 BPMN diagram usability

⤵️ Library Integration

📝 Documentation

📦 Dependency updates

👻 Maintenance

Assets 2
Loading

0.10.0

11 Jan 15:19
@csouchet csouchet
v0.10.0
44c0316
Compare
Choose a tag to compare
0.10.0

This new release focuses on refactoring, a new API (select elements by kind), and several new examples. New rendering for the event-based gateway is available.

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

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

Highlights

Event-based gateway

image
image

API - Search elements by BPMN Kinds

The following example shows how to display only the desired Pools within a diagram (either by hiding either collapsing all other pools).

example_api_select_elements_by_kind

What's Changed

🚄 BPMN rendering

🧲 BPMN diagram usability

📝 Documentation

📦 Dependency updates

👻 Maintenance

Assets 2
Loading