[INFRA] Update BPMN Visualization version to 0.17.1 (#205)

process-analytics · Jul 12, 2021 · 53dd55a · 53dd55a
1 parent b1d4c68
commit 53dd55a
Show file tree

Hide file tree

Showing 39 changed files with 73 additions and 110 deletions.
diff --git a/demo/load-and-navigation/diagram-navigation.html b/demo/load-and-navigation/diagram-navigation.html
@@ -1,7 +1,7 @@
+<!DOCTYPE html>
 <!-- Available query parameters to configure the behavior of this page -->
 <!-- showControlsPanel: if true, display buttons to apply overlays to BPMN elements (on the left side of the page) -->
 <!-- showMousePointer: if true, highlight/show the mouse position -->
-<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">

diff --git a/demo/load-and-navigation/elements-identification.html b/demo/load-and-navigation/elements-identification.html
@@ -48,7 +48,8 @@
         stroke: red;
       }
       /* lane */
-      .detection-lane > path:nth-child(3) {
+      .detection-lane > path:nth-child(2), /* label */
+      .detection-lane > path:nth-child(4) {
         fill: palevioletred;
       }
       /* sequence flow arrow */
@@ -93,6 +94,10 @@
       <button id="clear-btn">Clear</button>
       <textarea id="elements-result"></textarea>
     </div>
+    <div id="download-controls" style="margin-top: 10px;">
+      <button id="btn-dl-svg">Download SVG</button>
+      <button id="btn-dl-png">Download PNG</button>
+    </div>
 
     <div id="main-container">
       <div id="bpmn-container"></div>

diff --git a/demo/load-and-navigation/index.es.js b/demo/load-and-navigation/index.es.js
diff --git a/demo/load-and-navigation/overlays.html b/demo/load-and-navigation/overlays.html
@@ -1,7 +1,7 @@
+<!DOCTYPE html>
 <!-- Available query parameters to configure the behavior of this page -->
 <!-- showControlsPanel: if true, display buttons to apply overlays to BPMN elements (on the left side of the page) -->
 <!-- showMousePointer: if true, highlight/show the mouse position -->
-<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">

diff --git a/demo/load-and-navigation/static/css/tailwind.css b/demo/load-and-navigation/static/css/tailwind.css
diff --git a/demo/load-and-navigation/static/js/elements-identification.js b/demo/load-and-navigation/static/js/elements-identification.js
@@ -15,6 +15,8 @@
  */
 import {
   documentReady,
+  downloadPng,
+  downloadSvg,
   FitType,
   getElementsByKinds,
   addCssClasses,
@@ -137,6 +139,11 @@ function getOverlay(bpmnKind) {
   return { position: 'top-left', label: '40' };
 }
 
+function configureDownloadButtons() {
+  document.getElementById('btn-dl-svg').addEventListener('click', downloadSvg, false);
+  document.getElementById('btn-dl-png').addEventListener('click', downloadPng, false);
+}
+
 documentReady(() => {
   startBpmnVisualization({
     globalOptions: {
@@ -148,4 +155,5 @@ documentReady(() => {
   });
   updateLoadOptions({ type: FitType.Center, margin: 20 });
   configureControls();
+  configureDownloadButtons();
 });
diff --git a/demo/load-and-navigation/static/js/lib-integration.js b/demo/load-and-navigation/static/js/lib-integration.js
@@ -15,61 +15,24 @@
  */
 import { BpmnVisualization } from '../../index.es.js';
 
-const parameters = new URLSearchParams(window.location.search);
-const bpmnParameterValue = parameters.get('bpmn');
-
-let bpmn;
-if (bpmnParameterValue) {
-  bpmn = decodeURIComponent(bpmnParameterValue);
-} else {
-  bpmn = bpmnDefaultContent();
-}
-
 const bpmnVisualizationIntegration = new BpmnVisualization({ container: 'bpmn-container-custom' });
-bpmnVisualizationIntegration.load(bpmn);
+bpmnVisualizationIntegration.load(bpmnDefaultContent());
 
 function bpmnDefaultContent() {
   return `<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_0x0opj6" targetNamespace="http://example.bpmn.com/schema/bpmn">
-    <bpmn:process id="Process_1" isExecutable="false">
-      <bpmn:startEvent id="StartEvent_1" name="Start Event 1">
-        <bpmn:outgoing>Flow_1</bpmn:outgoing>
-      </bpmn:startEvent>
-      <bpmn:sequenceFlow id="Flow_1" sourceRef="StartEvent_1" targetRef="Activity_1" name="Sequence Flow 1" />
-      <bpmn:task id="Activity_1" name="Task 1">
-        <bpmn:incoming>Flow_1</bpmn:incoming>
-        <bpmn:outgoing>Flow_2</bpmn:outgoing>
-      </bpmn:task>
-      <bpmn:endEvent id="EndEvent_1" name="End Event 1">
-        <bpmn:incoming>Flow_2</bpmn:incoming>
-      </bpmn:endEvent>
-      <bpmn:sequenceFlow id="Flow_2" sourceRef="Activity_1" targetRef="EndEvent_1" />
-    </bpmn:process>
-    <bpmndi:BPMNDiagram id="BPMNDiagram_1">
-      <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
-        <bpmndi:BPMNEdge id="BPMNEdge_Flow_1" bpmnElement="Flow_1">
-          <di:waypoint x="192" y="99" />
-          <di:waypoint x="250" y="99" />
-        </bpmndi:BPMNEdge>
-        <bpmndi:BPMNEdge id="BPMNEdge_Flow_2" bpmnElement="Flow_2">
-          <di:waypoint x="350" y="99" />
-          <di:waypoint x="412" y="99" />
-        </bpmndi:BPMNEdge>
-        <bpmndi:BPMNShape id="BPMNShape_StartEvent_1" bpmnElement="StartEvent_1">
-          <dc:Bounds x="156" y="81" width="36" height="36" />
-          <bpmndi:BPMNLabel>
-            <dc:Bounds x="158" y="124" width="33" height="14" />
-          </bpmndi:BPMNLabel>
-        </bpmndi:BPMNShape>
-        <bpmndi:BPMNShape id="BPMNShape_Activity_1" bpmnElement="Activity_1">
-          <dc:Bounds x="250" y="59" width="100" height="80" />
-        </bpmndi:BPMNShape>
-        <bpmndi:BPMNShape id="BPMNShape_EndEvent_1" bpmnElement="EndEvent_1">
-          <dc:Bounds x="412" y="81" width="36" height="36" />
-          <bpmndi:BPMNLabel>
-            <dc:Bounds x="416" y="124" width="29" height="14" />
-          </bpmndi:BPMNLabel>
-        </bpmndi:BPMNShape>
-      </bpmndi:BPMNPlane>
-    </bpmndi:BPMNDiagram>
-  </bpmn:definitions>`;
+  <bpmn:process id="Process_1" isExecutable="false">
+    <bpmn:startEvent id="StartEvent_1" name="Start Event Only">
+    </bpmn:startEvent>
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
+      <bpmndi:BPMNShape id="BPMNShape_StartEvent_1" bpmnElement="StartEvent_1">
+        <dc:Bounds x="156" y="81" width="36" height="36" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="158" y="124" width="33" height="14" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>`;
 }
diff --git a/demo/monitoring-all-process-instances/index.html b/demo/monitoring-all-process-instances/index.html
@@ -147,7 +147,7 @@ <h2>Monitoring of all process instances demo</h2>
 
 <script src="../../examples/static/js/link-to-sources.js"></script>
 <!-- load bpmn-visualization -->
-<script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/bpmn-visualization.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/bpmn-visualization.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js" integrity="sha256-lNJnNIdh5oXecah6rOix/TxyGcOYnfkybx4Qii2uxSo=" crossorigin="anonymous"></script>
 <script src="../../examples/static/js/bpmn-diagrams.js"></script>
 <script src="./execution-data.js"></script>

diff --git a/examples/custom-behavior/apply-css-classes/index.html b/examples/custom-behavior/apply-css-classes/index.html
@@ -151,7 +151,7 @@ <h2>Apply css classes</h2>
     </section>
 
     <script src="../../static/js/link-to-sources.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/bpmn-visualization.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/bpmn-visualization.min.js"></script>
     <script src="../../static/js/bpmn-diagram-miwg-test-suite-c_1_1.js"></script>
     <script>
         let usePathHighLightingStepByStep = false;

diff --git a/examples/custom-behavior/call-activity-with-modal-on-mouse-over/index.html b/examples/custom-behavior/call-activity-with-modal-on-mouse-over/index.html
@@ -80,7 +80,7 @@ <h2>Open a modal on mouse over on a call activity</h2>
 
         <script src="../../static/js/link-to-sources.js"></script>
         <!-- load bpmn-visualization -->
-        <script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/bpmn-visualization.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/bpmn-visualization.min.js"></script>
         <script src="../../static/js/bpmn-diagrams.js"></script>
         <script src="./index.js"></script>
         <script src="./modal.js"></script>

diff --git a/examples/custom-behavior/call-activity-with-reload-on-dblclick/index.html b/examples/custom-behavior/call-activity-with-reload-on-dblclick/index.html
@@ -73,7 +73,7 @@ <h2>Load new BPMN diagram on double click on call activity</h2>
 
         <script src="../../static/js/link-to-sources.js"></script>
         <!-- load bpmn-visualization -->
-        <script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/bpmn-visualization.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/bpmn-visualization.min.js"></script>
         <script src="../../static/js/bpmn-diagrams.js"></script>
         <script src="./index.js"></script>
         <script src="./breadcrumbs.js"></script>

diff --git a/examples/custom-behavior/call-activity-with-tabs-on-click/index.html b/examples/custom-behavior/call-activity-with-tabs-on-click/index.html
@@ -75,7 +75,7 @@ <h2>Switch between BPMN renderings on click on call activity</h2>
 
         <script src="../../static/js/link-to-sources.js"></script>
         <!-- load bpmn-visualization -->
-        <script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/bpmn-visualization.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/bpmn-visualization.min.js"></script>
         <script src="../../static/js/bpmn-diagrams.js"></script>
         <script src="./index.js"></script>
     </body>

diff --git a/examples/custom-behavior/growing-sequence-flow/index.html b/examples/custom-behavior/growing-sequence-flow/index.html
@@ -89,7 +89,7 @@ <h2>Growing Sequence Flow</h2>
 
         <script src="../../static/js/link-to-sources.js"></script>
         <!-- load bpmn-visualization -->
-        <script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/bpmn-visualization.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/bpmn-visualization.min.js"></script>
         <script src="../../static/js/bpmn-diagrams.js"></script>
         <script src="./index.js"></script>
     </body>

diff --git a/examples/custom-behavior/javascript-tooltip-and-popover/index.html b/examples/custom-behavior/javascript-tooltip-and-popover/index.html
@@ -87,7 +87,7 @@ <h2>Attach tooltip and popover to BPMN elements</h2>
 
         <script src="../../static/js/link-to-sources.js"></script>
         <!-- load bpmn-visualization -->
-        <script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/bpmn-visualization.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/bpmn-visualization.min.js"></script>
         <script src="../../static/js/bpmn-diagrams.js"></script>
         <script src="index.js"></script>
     </body>

diff --git a/examples/custom-behavior/popover-static/index.html b/examples/custom-behavior/popover-static/index.html
@@ -116,7 +116,7 @@ <h5 class="mt-2">Popover content</h5>
 
         <script src="../../static/js/link-to-sources.js"></script>
         <!-- load bpmn-visualization -->
-        <script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/bpmn-visualization.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/bpmn-visualization.min.js"></script>
         <script src="../../static/js/bpmn-diagrams.js"></script>
         <script src="../../static/js/dom-helper.js"></script>
         <script src="./index.js"></script>

diff --git a/examples/custom-behavior/running-dashed-message-flow/index.html b/examples/custom-behavior/running-dashed-message-flow/index.html
@@ -89,7 +89,7 @@ <h2>Running Dashed Message Flow</h2>
 
         <script src="../../static/js/link-to-sources.js"></script>
         <!-- load bpmn-visualization -->
-        <script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/bpmn-visualization.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/bpmn-visualization.min.js"></script>
         <script src="../../static/js/bpmn-diagrams.js"></script>
         <script src="./index.js"></script>
     </body>

diff --git a/examples/custom-behavior/select-elements-by-bpmn-kind/index.html b/examples/custom-behavior/select-elements-by-bpmn-kind/index.html
@@ -130,7 +130,7 @@ <h2>Select elements by BPMN kind</h2>
     </section>
 
     <script src="../../static/js/link-to-sources.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/bpmn-visualization.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/bpmn-visualization.min.js"></script>
     <script src="../../static/js/bpmn-diagram-miwg-test-suite-a_4_1.js"></script>
     <script src="../../static/js/bpmn-diagram-miwg-test-suite-c_1_0.js"></script>
     <script src="../../static/js/bpmn-diagram-miwg-test-suite-c_1_1.js"></script>

diff --git a/examples/custom-bpmn-theme/custom-colors/custom-colors.js b/examples/custom-bpmn-theme/custom-colors/custom-colors.js
@@ -28,21 +28,12 @@ bpmnvisu.StyleConfigurator.configureCommonDefaultStyle = function (style) {
     style[bpmnvisu.mxConstants.STYLE_FILLCOLOR] = 'LemonChiffon';
     style[bpmnvisu.mxConstants.STYLE_STROKECOLOR] = 'Orange';
 }
-// hack to ensure that the pool and lane label area fill color are kept untouched
-const originalConfigureStyles = bpmnvisu.StyleConfigurator.prototype.configureStyles;
-bpmnvisu.StyleConfigurator.prototype.configureStyles = function () {
-    originalConfigureStyles.apply(this);
-    [bpmnvisu.ShapeBpmnElementKind.LANE, bpmnvisu.ShapeBpmnElementKind.POOL].forEach(kind => {
-        const style = this.graph.getStylesheet().styles[kind];
-        style[bpmnvisu.mxConstants.STYLE_FILLCOLOR] = bpmnvisu.StyleDefault.DEFAULT_FILL_COLOR;
-    });
-}
+
 const bpmnVisualizationCustomDefaultColor = new bpmnvisu.BpmnVisualization({ container: 'bpmn-container-custom-default-colors' });
 bpmnVisualizationCustomDefaultColor.load(bpmn);
 
 // restore StyleConfigurator defaults
 bpmnvisu.StyleConfigurator.configureCommonDefaultStyle = originalConfigureCommonDefaultStyle;
-bpmnvisu.StyleConfigurator.prototype.configureStyles = originalConfigureStyles;
 
 
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -150,7 +141,3 @@ class BpmnVisualizationCustomColorsUserTask extends bpmnvisu.BpmnVisualization {
 
 const bpmnVisualizationCustomColorsUserTask = new BpmnVisualizationCustomColorsUserTask('bpmn-container-custom-colors-user-task');
 bpmnVisualizationCustomColorsUserTask.load(bpmn);
-
-// restore StyleConfigurator defaults
-bpmnvisu.StyleConfigurator.configureCommonDefaultStyle = originalConfigureCommonDefaultStyle;
-bpmnvisu.StyleConfigurator.prototype.configureStyles = originalConfigureStyles;
diff --git a/examples/custom-bpmn-theme/custom-colors/index.html b/examples/custom-bpmn-theme/custom-colors/index.html
@@ -64,7 +64,7 @@ <h2>Custom colors for User Task</h2>
 
     <script src="../../static/js/link-to-sources.js"></script>
     <!-- load bpmn-visualization -->
-    <script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/bpmn-visualization.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/bpmn-visualization.min.js"></script>
     <!-- load the example -->
     <script src="../../static/js/bpmn-diagrams.js"></script>
     <script src="./custom-colors.js"></script>

diff --git a/examples/custom-bpmn-theme/custom-fonts/index.html b/examples/custom-bpmn-theme/custom-fonts/index.html
@@ -61,7 +61,7 @@ <h2>Custom BPMN element fonts</h2>
 
 <script src="../../static/js/link-to-sources.js"></script>
 <!-- load bpmn-visualization -->
-<script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/bpmn-visualization.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/bpmn-visualization.min.js"></script>
 <!-- load the example -->
 <script src="../../static/js/bpmn-diagrams.js"></script>
 <script src="./custom-fonts.js"></script>

diff --git a/examples/custom-bpmn-theme/custom-user-task-icon/index.html b/examples/custom-bpmn-theme/custom-user-task-icon/index.html
@@ -56,7 +56,7 @@ <h2>Custom User Task icon</h2>
 
 <script src="../../static/js/link-to-sources.js"></script>
 <!-- load bpmn-visualization -->
-<script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/bpmn-visualization.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/bpmn-visualization.min.js"></script>
 <!-- load the example -->
 <script src="../../static/js/bpmn-diagrams.js"></script>
 <script src="./custom-user-task-icon.js"></script>

diff --git a/examples/custom-bpmn-theme/hacktoberfest-diagram/hacktoberfest-diagram.js b/examples/custom-bpmn-theme/hacktoberfest-diagram/hacktoberfest-diagram.js
@@ -103,6 +103,7 @@ bpmnvisu.StyleDefault.DEFAULT_FILL_COLOR = blueDark;
 bpmnvisu.StyleDefault.DEFAULT_STROKE_COLOR = blueLight;
 bpmnvisu.StyleDefault.DEFAULT_FONT_COLOR = blueSuperLight;
 bpmnvisu.StyleDefault.DEFAULT_FONT_FAMILY = 'Inter, Helvetica, sans-serif';
+bpmnvisu.StyleDefault.POOL_LABEL_FILL_COLOR = blueMedium;
 
 class BpmnVisualizationHacktoberfestDarkTheme extends bpmnvisu.BpmnVisualization {
 
@@ -140,7 +141,6 @@ class BpmnVisualizationHacktoberfestDarkTheme extends bpmnvisu.BpmnVisualization
         // POOL
         style = styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.POOL];
         style[bpmnvisu.mxConstants.STYLE_SWIMLANE_FILLCOLOR] = blueDark;
-        style[bpmnvisu.mxConstants.STYLE_FILLCOLOR] = blueMedium;
         style[bpmnvisu.mxConstants.STYLE_FONTSIZE] = 16;
     }
 

diff --git a/examples/custom-bpmn-theme/hacktoberfest-diagram/index.html b/examples/custom-bpmn-theme/hacktoberfest-diagram/index.html
@@ -69,7 +69,7 @@ <h2>Dark Hacktoberfest Theme</h2>
 
     <script src="../../static/js/link-to-sources.js"></script>
     <!-- load bpmn-visualization -->
-    <script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/bpmn-visualization.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/bpmn-visualization.min.js"></script>
     <!-- load the example -->
     <script src="../../static/js/bpmn-diagrams.js"></script>
     <script src="./hacktoberfest-diagram.js"></script>

diff --git a/examples/diagram-navigation/diagram-fit-after-load/index.html b/examples/diagram-navigation/diagram-fit-after-load/index.html
@@ -131,7 +131,7 @@ <h2>Various fit after load</h2>
 
     <script src="../../static/js/link-to-sources.js"></script>
     <!-- load bpmn-visualization -->
-    <script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/bpmn-visualization.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/bpmn-visualization.min.js"></script>
 
     <script src="../../static/js/bpmn-diagrams.js"></script>
     <script>

diff --git a/examples/diagram-navigation/diagram-fit-on-load/index.html b/examples/diagram-navigation/diagram-fit-on-load/index.html
@@ -105,7 +105,7 @@ <h5>Fit type</h5>
 
         <script src="../../static/js/link-to-sources.js"></script>
         <!-- load bpmn-visualization -->
-        <script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/bpmn-visualization.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/bpmn-visualization.min.js"></script>
         <script src="../../static/js/bpmn-diagrams.js"></script>
         <script src="diagram-fit-on-load.js"></script>
     </body>

diff --git a/examples/diagram-navigation/diagram-navigation/index.html b/examples/diagram-navigation/diagram-navigation/index.html
@@ -75,7 +75,7 @@ <h2>Diagram Navigation</h2>
     </section>
 
     <script src="../../static/js/link-to-sources.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/bpmn-visualization.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/bpmn-visualization.min.js"></script>
     <script src="../../static/js/bpmn-diagrams.js"></script>
     <script src="./index.js"></script>
 </body>

diff --git a/examples/display-bpmn-diagram/01-getting-started/README.md b/examples/display-bpmn-diagram/01-getting-started/README.md
@@ -10,12 +10,12 @@ Javascript example to demonstrate how to integrate `bpmn-visualization` in an ht
 Load the browser bundle from [jsdelivr](https://www.jsdelivr.com/package/npm/bpmn-visualization), [unpkg](https://unpkg.com/browse/bpmn-visualization)
 or any other location:
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/bpmn-visualization.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/bpmn-visualization.min.js"></script>
 ```
 
 💡 During the development step, you can use the non-minified version:
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/bpmn-visualization.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/bpmn-visualization.js"></script>
 ```
 
 ### Use the library

diff --git a/examples/display-bpmn-diagram/01-getting-started/index.html b/examples/display-bpmn-diagram/01-getting-started/index.html
@@ -51,9 +51,9 @@ <h2>Getting Started</h2>
 
 <script src="../../static/js/link-to-sources.js"></script>
 <!-- load bpmn-visualization -->
-<script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/bpmn-visualization.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/bpmn-visualization.min.js"></script>
 <!-- if you prefer jsdlivr, comment unpkg and uncomment the following line -->
-<!--<script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/bpmn-visualization.min.js"></script>-->
+<!--<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/bpmn-visualization.min.js"></script>-->
 <script src="../../static/js/bpmn-diagrams.js"></script>
 <script>
     const bpmnVisualization = new bpmnvisu.BpmnVisualization({ container: 'bpmn-container' });

diff --git a/examples/display-bpmn-diagram/load-local-bpmn-diagrams/index.html b/examples/display-bpmn-diagram/load-local-bpmn-diagrams/index.html
@@ -89,7 +89,7 @@ <h2>Load local BPMN diagrams</h2>
 
 <script src="../../static/js/link-to-sources.js"></script>
 <!-- load bpmn-visualization -->
-<script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/bpmn-visualization.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/bpmn-visualization.min.js"></script>
 <script>
     document.getElementById('btn-open-file').addEventListener('change', handleFileSelect, false);
 

diff --git a/examples/display-bpmn-diagram/load-remote-bpmn-diagrams/index.html b/examples/display-bpmn-diagram/load-remote-bpmn-diagrams/index.html
@@ -102,7 +102,7 @@ <h2>Load remote BPMN diagrams</h2>
 
 <script src="../../static/js/link-to-sources.js"></script>
 <!-- load bpmn-visualization -->
-<script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/bpmn-visualization.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/bpmn-visualization.min.js"></script>
 
 <script>
     const bpmnVisualization = new bpmnvisu.BpmnVisualization({ container: 'bpmn-container' });