Merge branch 'master' into 793-detect_complex_gateway

Author: tbouffard

.github/workflows/fill-gh-draft-release.yml

@@ -14,6 +14,6 @@ jobs:
       contents: write
     steps:
       # Drafts your next Release notes as Pull Requests are merged into "master"
-      - uses: release-drafter/release-drafter@v5.20.1
+      - uses: release-drafter/release-drafter@v5.21.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/publish-npm.yml

@@ -17,7 +17,7 @@ jobs:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
       - name: Send message to Slack channel
         if: success()
-        uses: slackapi/slack-github-action@v1.21.0
+        uses: slackapi/slack-github-action@v1.22.0
         with:
           channel-id: 'CSF7TG6N5'
           payload: |

README.md

@@ -129,9 +129,11 @@ You can set the BPMN content using one of the following ways:
 
 #### 📜 TypeScript Support
 
-`bpmn-visualization` provides type definitions, so the integration should work out of the box in TypeScript projects.
+`bpmn-visualization` provides type definitions, so the integration works out of the box in TypeScript projects.
 
-Depending on the build system used by the TypeScript project, it may get the following type errors:
+`bpmn-visualization` requires **TypeScript 4.5** or greater.
+
+Depending on the TypeScript configuration of the project, the following errors can occur:
 - error TS2688: Cannot find type definition file for 'typed-mxgraph'
 - error TS7016: Could not find a declaration file for module 'mxgraph'
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "bpmn-visualization",
-  "version": "0.26.1-post",
+  "version": "0.26.2-post",
   "description": "A TypeScript library for visualizing process execution data on BPMN diagrams",
   "keywords": [
     "bpmn2",
@@ -38,7 +38,7 @@
     "type": "git",
     "url": "git+https://github.com/process-analytics/bpmn-visualization-js.git"
   },
-  "browser": "dist/bpmn-visualization.min.js",
+  "browser": "dist/bpmn-visualization.esm.js",
   "main": "dist/bpmn-visualization.cjs.js",
   "module": "dist/bpmn-visualization.esm.js",
   "types": "dist/bpmn-visualization.d.ts",
@@ -90,7 +90,7 @@
   "dependencies": {
     "@typed-mxgraph/typed-mxgraph": "~1.0.7",
     "entities": "~4.3.1",
-    "fast-xml-parser": "4.0.9",
+    "fast-xml-parser": "4.0.10",
     "lodash.debounce": "~4.0.8",
     "lodash.throttle": "~4.1.1",
     "mxgraph": "4.2.2",
@@ -105,19 +105,19 @@
     "@types/lodash.debounce": "~4.0.7",
     "@types/lodash.throttle": "~4.1.7",
     "@types/minimist": "~1.2.2",
-    "@typescript-eslint/eslint-plugin": "~5.37.0",
-    "@typescript-eslint/parser": "~5.37.0",
+    "@typescript-eslint/eslint-plugin": "~5.38.0",
+    "@typescript-eslint/parser": "~5.38.0",
     "asciidoctor": "~2.2.6",
-    "autoprefixer": "~10.4.9",
+    "autoprefixer": "~10.4.12",
     "clipboardy": "~3.0.0",
     "cross-env": "~7.0.3",
     "cssnano": "~5.1.13",
     "debug": "~4.3.4",
-    "eslint": "~8.23.1",
+    "eslint": "~8.24.0",
     "eslint-config-prettier": "~8.5.0",
     "eslint-plugin-jest": "~27.0.4",
     "eslint-plugin-notice": "~0.9.10",
-    "eslint-plugin-playwright": "~0.11.1",
+    "eslint-plugin-playwright": "~0.11.2",
     "eslint-plugin-prettier": "~4.2.1",
     "expect-playwright": "~0.8.0",
     "fs-extra": "~10.1.0",
@@ -133,22 +133,22 @@
     "minimist": "~1.2.6",
     "npm-run-all": "~4.1.5",
     "pinst": "~3.0.0",
-    "playwright": "~1.25.2",
+    "playwright": "~1.26.0",
     "postcss": "~8.4.14",
     "postcss-cli": "~10.0.0",
     "prettier": "~2.7.1",
     "rimraf": "~3.0.2",
-    "rollup": "~2.79.0",
+    "rollup": "~2.79.1",
     "rollup-plugin-auto-external": "~2.0.0",
     "rollup-plugin-node-externals": "~5.0.0",
     "rollup-plugin-sizes": "~1.0.4",
     "rollup-plugin-terser": "~7.0.2",
     "rollup-plugin-typescript2": "~0.34.0",
     "tailwindcss": "~3.1.8",
     "ts-jest": "~27.1.4",
-    "typedoc": "~0.23.14",
+    "typedoc": "~0.23.15",
     "typescript": "~4.8.3",
-    "vite": "~3.1.0"
+    "vite": "~3.1.3"
   },
   "lint-staged": {
     "*.{js,mjs,ts}": [

package.json

@@ -32,8 +32,9 @@ const pluginsBundleIIFE = [
   // to have sizes of dependencies listed at the end of build log
   sizes(),
 ];
+const iifeBundleFile = 'dist/bpmn-visualization.min.js';
 const outputIIFE = {
-  file: pkg.browser.replace('.min.js', '.js'),
+  file: iifeBundleFile.replace('.min.js', '.js'),
   name: 'bpmnvisu',
   format: 'iife',
 };
@@ -47,7 +48,7 @@ const configIIFEMinified = {
   input: libInput,
   output: {
     ...outputIIFE,
-    file: pkg.browser,
+    file: iifeBundleFile,
   },
   plugins: withMinification(pluginsBundleIIFE),
 };

rollup.config.js

@@ -4,7 +4,7 @@ sonar.organization=process-analytics
 
 # This is the name and version displayed in the SonarCloud UI.
 sonar.projectName=bpmn-visualization
-sonar.projectVersion=0.26.1-post
+sonar.projectVersion=0.26.2-post
 
 # Path is relative to the sonar-project.properties file. Replace "\" by "/" on Windows.
 sonar.sources=src

sonar-project.properties

@@ -20,6 +20,9 @@ import type BpmnModel from '../../model/bpmn/internal/BpmnModel';
 import type { ModelFilter } from '../options';
 import { ensureIsArray } from '../helpers/array-utils';
 
+/**
+ * @internal
+ */
 export class ModelFiltering {
   filter(bpmnModel: BpmnModel, modelFilter?: ModelFilter): BpmnModel {
     const poolIdsFilter: string[] = [];

src/component/registry/bpmn-model-filters.ts

@@ -18,7 +18,7 @@ import { mxgraph } from './mxgraph/initializer';
 
 // WARN: this constant is automatically updated at release time by the 'manage-version-in-files.mjs' script.
 // So, if you modify the name of this file or this constant, please update the script accordingly.
-const libVersion = '0.26.1-post';
+const libVersion = '0.26.2-post';
 
 /**
  * @internal

src/component/version.ts

@@ -53,7 +53,7 @@ function saveAndRegisterImages(matcherContext: MatcherContext, received: Buffer,
   // Manage expected and received images
   const baseImagePathWithName = `${options.customDiffDir}/${snapshotIdentifier}`;
   const expectedImagePath = `${baseImagePathWithName}-expected.png`;
-  copyFileSync(`${options.customSnapshotsDir}/${snapshotIdentifier}-snap.png`, expectedImagePath);
+  copyFileSync(`${options.customSnapshotsDir}/${snapshotIdentifier}.png`, expectedImagePath);
   // this image is generated by jest-image-snapshot when activating `storeReceivedOnFailure`
   const receivedImagePath = `${baseImagePathWithName}-received.png`;
 

test/config/jest.image.ts

@@ -266,7 +266,7 @@ class ImageSnapshotThresholds extends MultiBrowserImageSnapshotThresholds {
       [
         'labels.04.fonts',
         {
-          macos: 0.61 / 100, // 0.6044319789370367%
+          macos: 0.71 / 100, // 0.703880504764276%
         },
       ],
       [

test/e2e/bpmn.rendering.test.ts

@@ -40,6 +40,13 @@ describe('Bpmn Elements registry - CSS class management', () => {
       htmlElementLookup.expectServiceTask('serviceTask_1_2', { label: 'Service Task 1.2', additionalClasses: ['class1', 'class2', 'class3'] });
       htmlElementLookup.expectEndEvent('endEvent_message_1', ShapeBpmnEventDefinitionKind.MESSAGE, { label: 'message end 2', additionalClasses: ['class2', 'class3'] });
       htmlElementLookup.expectSequenceFlow('Flow_1bewc4s', { label: 'link', additionalClasses: ['class2', 'class3'] });
+
+      // add several classes by passing classes in a single string separated with spaces
+      // not documented in the API but this is working
+      bpmnVisualization.bpmnElementsRegistry.addCssClasses(['endEvent_message_1'], ['extra-class1 extra-class2 extra-class3']);
+      htmlElementLookup.expectEndEvent('endEvent_message_1', ShapeBpmnEventDefinitionKind.MESSAGE, {
+        additionalClasses: ['class2', 'class3', 'extra-class1', 'extra-class2', 'extra-class3'],
+      });
     });
 
     it('BPMN element does not exist', () => {
@@ -91,6 +98,20 @@ describe('Bpmn Elements registry - CSS class management', () => {
       bpmnVisualization.bpmnElementsRegistry.removeCssClasses(['lane_01', 'userTask_0'], ['class1', 'class3']);
       htmlElementLookup.expectLane('lane_01', { label: 'Lane 3', additionalClasses: ['class2'] });
       htmlElementLookup.expectUserTask('userTask_0', { label: 'User Task 0', additionalClasses: ['class2'] });
+
+      // remove several classes by passing classes in a single string separated with spaces
+      // this is not working (remember this is working for 'add css classes')
+      bpmnVisualization.bpmnElementsRegistry.addCssClasses(['userTask_0'], ['extra-class1', 'extra-class2', 'extra-class3']);
+      htmlElementLookup.expectUserTask('userTask_0', { additionalClasses: ['class2', 'extra-class1', 'extra-class2', 'extra-class3'] });
+      bpmnVisualization.bpmnElementsRegistry.removeCssClasses(['userTask_0'], ['extra-class1 extra-class2 extra-class3']);
+      htmlElementLookup.expectUserTask('userTask_0', { additionalClasses: ['class2', 'extra-class1', 'extra-class2', 'extra-class3'] });
+
+      // add the class with spaces and remove them with spaces
+      const extraClassNamesToAddThenRemove = ['extra-class1 extra-class2 extra-class3'];
+      bpmnVisualization.bpmnElementsRegistry.addCssClasses(['lane_01'], extraClassNamesToAddThenRemove);
+      htmlElementLookup.expectLane('lane_01', { additionalClasses: ['class2', 'extra-class1', 'extra-class2', 'extra-class3'] });
+      bpmnVisualization.bpmnElementsRegistry.removeCssClasses(['lane_01'], extraClassNamesToAddThenRemove);
+      htmlElementLookup.expectLane('lane_01', { additionalClasses: ['class2'] });
     });
 
     it('BPMN element does not exist', () => {
@@ -117,6 +138,20 @@ describe('Bpmn Elements registry - CSS class management', () => {
       bpmnVisualization.bpmnElementsRegistry.toggleCssClasses(['lane_02', 'gateway_01'], ['class1', 'class3', 'class4']);
       htmlElementLookup.expectLane('lane_02', { label: 'Lane 2', additionalClasses: ['class2', 'class4'] });
       htmlElementLookup.expectExclusiveGateway('gateway_01', { label: 'gateway 1', additionalClasses: ['class4'] });
+
+      // toggle several classes by passing classes in a single string separated with spaces
+      // this is not working (remember this is working for 'add css classes')
+      bpmnVisualization.bpmnElementsRegistry.toggleCssClasses(['gateway_01'], ['extra-class1', 'extra-class2']);
+      htmlElementLookup.expectExclusiveGateway('gateway_01', { additionalClasses: ['class4', 'extra-class1', 'extra-class2'] });
+      bpmnVisualization.bpmnElementsRegistry.toggleCssClasses(['gateway_01'], ['extra-class1 extra-class2']);
+      htmlElementLookup.expectExclusiveGateway('gateway_01', { additionalClasses: ['class4', 'extra-class1', 'extra-class2', 'extra-class1', 'extra-class2'] });
+
+      // add the class with spaces and remove them with spaces
+      const extraClassNamesToAddThenRemove = ['extra-class1 extra-class3'];
+      bpmnVisualization.bpmnElementsRegistry.toggleCssClasses(['lane_02'], extraClassNamesToAddThenRemove);
+      htmlElementLookup.expectLane('lane_02', { additionalClasses: ['class2', 'class4', 'extra-class1', 'extra-class3'] });
+      bpmnVisualization.bpmnElementsRegistry.toggleCssClasses(['lane_02'], extraClassNamesToAddThenRemove);
+      htmlElementLookup.expectLane('lane_02', { additionalClasses: ['class2', 'class4'] });
     });
 
     it('BPMN element does not exist', () => {

test/integration/dom.css.classes.test.ts

@@ -77,6 +77,16 @@ describe('manage css classes for BPMN cells', () => {
       expect(cssRegistry.getClassNames(bpmnElementId)).toEqual(classNames);
     });
 
+    it('register several classes with a single string parameter', () => {
+      const bpmnElementId = 'bpmn-id';
+      const classNames = ['class-name-1 class-name-2'];
+
+      const result = cssRegistry.addClassNames(bpmnElementId, classNames);
+
+      expect(result).toBeTruthy();
+      expect(cssRegistry.getClassNames(bpmnElementId)).toEqual(classNames);
+    });
+
     it('a class name should be registered only once, when add it twice', () => {
       const bpmnElementId = 'bpmn-id';
       cssRegistry.addClassNames(bpmnElementId, ['class-name-1', 'class-name-2']);
@@ -87,7 +97,7 @@ describe('manage css classes for BPMN cells', () => {
       expect(cssRegistry.getClassNames(bpmnElementId)).toEqual(['class-name-1', 'class-name-2']);
     });
 
-    it('the unregistered class names should be registered, when the other are already registered', () => {
+    it('register several classes several times, check classes order', () => {
       const bpmnElementId = 'bpmn-id';
       cssRegistry.addClassNames(bpmnElementId, ['class-name-1', 'class-name-2']);