[INFRA] Update BPMN Visualization version from 0.10.0 to 0.11.0 (#134)

process-analytics · Jan 25, 2021 · 53dfe4c · 53dfe4c
1 parent aa2678b
commit 53dfe4c
Show file tree

Hide file tree

Showing 49 changed files with 129 additions and 131 deletions.
diff --git a/demo/elements-identification.html b/demo/elements-identification.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>BPMN Visualization Non Regression</title>
-    <link rel="shortcut icon" href="./static/img/favicon.ico">
+    <link rel="shortcut icon" href="static/img/favicon.ico">
     <style>
       #main-container {
         top: 140px;
@@ -33,6 +33,10 @@
         position: absolute;
         width: 70%;
       }
+
+      .test > rect {
+        fill: aquamarine;
+      }
     </style>
 </head>
 <body>
@@ -57,10 +61,10 @@
     </div>
 
     <!-- load global settings -->
-    <script src="./static/js/configureMxGraphGlobals.js"></script>
+    <script src="static/js/configureMxGraphGlobals.js"></script>
     <!-- load mxGraph client library -->
-    <script src="./static/js/mxClient.min.js"></script>
+    <script src="static/js/mxClient.min.js"></script>
     <!-- load app -->
-    <script src="./static/js/elements-identification.js" type="module"></script>
+    <script src="static/js/elements-identification.js" type="module"></script>
 </body>
 </html>
diff --git a/demo/index.es.js b/demo/index.es.js
diff --git a/demo/index.html b/demo/index.html
@@ -7,8 +7,8 @@
     <title>BPMN Visualization Demo</title>
 
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
-    <link href="./static/css/tailwind.css" rel="stylesheet">
-    <link rel="shortcut icon" href="./static/img/favicon.ico">
+    <link href="static/css/tailwind.css" rel="stylesheet">
+    <link rel="shortcut icon" href="static/img/favicon.ico">
 </head>
 <body class="overflow-hidden bg-gray-800 font-sans leading-normal tracking-normal mt-12">
     <!--Nav-->
@@ -105,10 +105,10 @@ <h3 class="font-bold pl-2">Diagram</h3>
     </div>
 
     <!-- load global settings -->
-    <script src="./static/js/configureMxGraphGlobals.js"></script>
+    <script src="static/js/configureMxGraphGlobals.js"></script>
     <!-- load mxGraph client library -->
-    <script src="./static/js/mxClient.min.js"></script>
+    <script src="static/js/mxClient.min.js"></script>
     <!-- load demo -->
-    <script src="./static/js/demo.js" type="module"></script>
+    <script src="static/js/demo.js" type="module"></script>
 </body>
 </html>
diff --git a/demo/lib-integration.html b/demo/lib-integration.html
@@ -3,16 +3,16 @@
 <head>
   <meta charset="UTF-8">
   <title>BPMN Visualization Lib Integration</title>
-  <link rel="shortcut icon" href="./static/img/favicon.ico">
+  <link rel="shortcut icon" href="static/img/favicon.ico">
 </head>
 <body>
   <div id="bpmn-container-custom"></div>
 
   <!-- load global settings -->
-  <script src="./static/js/configureMxGraphGlobals.js"></script>
+  <script src="static/js/configureMxGraphGlobals.js"></script>
   <!-- load mxGraph client library -->
-  <script src="./static/js/mxClient.min.js"></script>
+  <script src="static/js/mxClient.min.js"></script>
   <!-- load app -->
-  <script src="./static/js/lib-integration.js" type="module"></script>
+  <script src="static/js/lib-integration.js" type="module"></script>
 </body>
 </html>
diff --git a/demo/non-regression.html b/demo/non-regression.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>BPMN Visualization Non Regression</title>
-    <link rel="shortcut icon" href="./static/img/favicon.ico">
+    <link rel="shortcut icon" href="static/img/favicon.ico">
     <style>
       #bpmn-container {
         top: 10px;
@@ -24,10 +24,10 @@
     <div id="bpmn-container"></div>
 
     <!-- load global settings -->
-    <script src="./static/js/configureMxGraphGlobals.js"></script>
+    <script src="static/js/configureMxGraphGlobals.js"></script>
     <!-- load mxGraph client library -->
-    <script src="./static/js/mxClient.min.js"></script>
+    <script src="static/js/mxClient.min.js"></script>
     <!-- load app -->
-    <script src="./static/js/non-regression.js" type="module"></script>
+    <script src="static/js/non-regression.js" type="module"></script>
 </body>
 </html>
diff --git a/demo/rendering-diagram.html b/demo/rendering-diagram.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>BPMN Visualization - Diagram Rendering</title>
-  <link rel="shortcut icon" href="./static/img/favicon.ico">
+  <link rel="shortcut icon" href="static/img/favicon.ico">
 
   <style>
     .hidden {
@@ -175,10 +175,10 @@
   </div>
 
   <!-- load global settings -->
-  <script src="./static/js/configureMxGraphGlobals.js"></script>
+  <script src="static/js/configureMxGraphGlobals.js"></script>
   <!-- load mxGraph client library -->
-  <script src="./static/js/mxClient.min.js"></script>
+  <script src="static/js/mxClient.min.js"></script>
   <!-- load app -->
-  <script src="./static/js/rendering-diagram.js" type="module"></script>
+  <script src="static/js/rendering-diagram.js" type="module"></script>
 </body>
 </html>
diff --git a/demo/static/js/demo.js b/demo/static/js/demo.js
@@ -13,23 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { documentReady, handleFileSelect, startBpmnVisualization, FitType, fit, log, updateLoadOptions, getCurrentLoadOptions } from '../../index.es.js';
+import { documentReady, handleFileSelect, startBpmnVisualization, fit, log, updateLoadOptions, getCurrentLoadOptions } from '../../index.es.js';
 
 let fitOnLoad = true;
 let fitOptions = {};
 
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-function configureBpmnContainer() {
-  const container = document.getElementById('bpmn-container');
-
-  const useFixedSize = !(fitOptions.type && FitType[fitOptions.type] === 'None'); // !== 'None'
-  if (useFixedSize) {
-    container.classList.add('fixed-size');
-  } else {
-    container.classList.remove('fixed-size');
-  }
-}
-
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function configureFitOnLoadCheckBox() {
   const fitOnLoadElt = document.getElementById('fitOnLoad');
@@ -61,7 +49,6 @@ function configureFitTypeSelect() {
   const fitTypeSelectedElt = document.getElementById('fitType-selected');
   fitTypeSelectedElt.onchange = event => {
     updateFitConfig({ type: event.target.value });
-    configureBpmnContainer();
     fit(fitOptions);
   };
 
@@ -70,8 +57,6 @@ function configureFitTypeSelect() {
   } else {
     updateFitConfig({ type: fitTypeSelectedElt.value });
   }
-
-  configureBpmnContainer();
 }
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
@@ -140,12 +125,14 @@ function startDemo() {
     zoomDebounceElt.value = parameters.get('zoomDebounce');
   }
   startBpmnVisualization({
-    container: bpmnContainerId,
     globalOptions: {
-      mouseNavigationSupport: true,
-      zoomConfiguration: {
-        throttleDelay: zoomThrottleElt.value,
-        debounceDelay: zoomDebounceElt.value,
+      container: bpmnContainerId,
+      navigation: {
+        enabled: true,
+        zoom: {
+          throttleDelay: zoomThrottleElt.value,
+          debounceDelay: zoomDebounceElt.value,
+        },
       },
     },
   });

diff --git a/demo/static/js/elements-identification.js b/demo/static/js/elements-identification.js
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { documentReady, FitType, getElementsByKinds, log, startBpmnVisualization, updateLoadOptions } from '../../index.es.js';
+import { documentReady, FitType, getElementsByKinds, addCssClasses, log, startBpmnVisualization, updateLoadOptions } from '../../index.es.js';
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function configureControls() {
@@ -30,6 +30,9 @@ function configureControls() {
 
     textArea.value += [textHeader, lines].join('\n') + '\n';
     textArea.scrollTop = textArea.scrollHeight;
+
+    const bpmnIds = elementsByKinds.map(elt => elt.bpmnSemantic.id);
+    addCssClasses(bpmnIds, 'test');
   };
 
   document.getElementById('bpmn-kinds-textarea-clean-btn').onclick = function () {
@@ -39,9 +42,11 @@ function configureControls() {
 
 documentReady(() => {
   startBpmnVisualization({
-    container: 'bpmn-container',
     globalOptions: {
-      mouseNavigationSupport: true,
+      container: 'bpmn-container',
+      navigation: {
+        enabled: true,
+      },
     },
   });
   updateLoadOptions({ type: FitType.Center, margin: 20 });

diff --git a/demo/static/js/lib-integration.js b/demo/static/js/lib-integration.js
@@ -25,8 +25,8 @@ if (bpmnParameterValue) {
   // eslint-disable-next-line @typescript-eslint/no-use-before-define
   bpmn = bpmnDefaultContent();
 }
-//
-const bpmnVisualizationIntegration = new BpmnVisualization(window.document.getElementById('bpmn-container-custom'));
+
+const bpmnVisualizationIntegration = new BpmnVisualization({ container: 'bpmn-container-custom' });
 bpmnVisualizationIntegration.load(bpmn);
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type

diff --git a/demo/static/js/non-regression.js b/demo/static/js/non-regression.js
@@ -22,4 +22,4 @@ function statusFetchKO(errorMsg) {
   statusElt.className = 'status-ko';
 }
 
-documentReady(() => startBpmnVisualization({ container: 'bpmn-container', statusFetchKoNotifier: statusFetchKO }));
+documentReady(() => startBpmnVisualization({ globalOptions: { container: 'bpmn-container' }, statusFetchKoNotifier: statusFetchKO }));
diff --git a/demo/static/js/rendering-diagram.js b/demo/static/js/rendering-diagram.js
@@ -140,12 +140,14 @@ function start() {
   const elZoomDebounce = configureZoomDebounceInput(parameters);
 
   startBpmnVisualization({
-    container: 'bpmn-container',
     globalOptions: {
-      mouseNavigationSupport: true,
-      zoomConfiguration: {
-        throttleDelay: elZoomThrottle.value,
-        debounceDelay: elZoomDebounce.value,
+      container: 'bpmn-container',
+      navigation: {
+        enabled: true,
+        zoom: {
+          throttleDelay: elZoomThrottle.value,
+          debounceDelay: elZoomDebounce.value,
+        },
       },
     },
   });

diff --git a/examples/custom-bpmn-theme/custom-colors/README.md b/examples/custom-bpmn-theme/custom-colors/README.md
@@ -36,7 +36,7 @@ StyleConfigurator.prototype.configureCommonDefaultStyle = function (style) {
 class BpmnVisualizationCustomColors extends BpmnVisualization {
 
     constructor(containerId) {
-        super(window.document.getElementById(containerId));
+        super({ container: containerId });
         this.configureStyle();
     }
 
@@ -67,7 +67,7 @@ const bpmnVisualizationCustomColors = new BpmnVisualizationCustomColors('bpmn-co
 class BpmnVisualizationCustomEventColors extends BpmnVisualization {
 
     constructor(containerId) {
-        super(window.document.getElementById(containerId));
+        super({ container: containerId });
         this.configureStyle();
     }
 
@@ -92,7 +92,7 @@ const bpmnVisualizationEventCustomColors = new BpmnVisualizationCustomEventColor
 class BpmnVisualizationCustomColorsUserTask extends BpmnVisualization {
 
     constructor(containerId) {
-        super(window.document.getElementById(containerId));
+        super({ container: containerId });
         this.configureStyle();
     }
 

diff --git a/examples/custom-bpmn-theme/custom-colors/custom-colors.js b/examples/custom-bpmn-theme/custom-colors/custom-colors.js
@@ -3,7 +3,7 @@ const bpmn = getCustomColorsBpmnDiagram();
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // default colors
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-const bpmnVisualization = new bpmnvisu.BpmnVisualization(window.document.getElementById('bpmn-container-default'));
+const bpmnVisualization = new bpmnvisu.BpmnVisualization({ container: 'bpmn-container-default' });
 bpmnVisualization.load(bpmn);
 
 
@@ -12,7 +12,7 @@ bpmnVisualization.load(bpmn);
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 const originalDefaultFontColor = bpmnvisu.StyleDefault.DEFAULT_FONT_COLOR;
 bpmnvisu.StyleDefault.DEFAULT_FONT_COLOR = 'Cyan';
-const bpmnVisualizationCustomDefaultFontColor = new bpmnvisu.BpmnVisualization(window.document.getElementById('bpmn-container-custom-font-color'));
+const bpmnVisualizationCustomDefaultFontColor = new bpmnvisu.BpmnVisualization({ container: 'bpmn-container-custom-font-color' });
 bpmnVisualizationCustomDefaultFontColor.load(bpmn);
 
 // restore StyleConstant defaults
@@ -37,7 +37,7 @@ bpmnvisu.StyleConfigurator.prototype.configureStyles = function () {
         style[mxConstants.STYLE_FILLCOLOR] = bpmnvisu.StyleDefault.DEFAULT_FILL_COLOR;
     });
 }
-const bpmnVisualizationCustomDefaultColor = new bpmnvisu.BpmnVisualization(window.document.getElementById('bpmn-container-custom-default-colors'));
+const bpmnVisualizationCustomDefaultColor = new bpmnvisu.BpmnVisualization({ container: 'bpmn-container-custom-default-colors' });
 bpmnVisualizationCustomDefaultColor.load(bpmn);
 
 // restore StyleConfigurator defaults
@@ -51,7 +51,7 @@ bpmnvisu.StyleConfigurator.prototype.configureStyles = originalConfigureStyles;
 class BpmnVisualizationCustomColors extends bpmnvisu.BpmnVisualization {
 
     constructor(containerId) {
-        super(window.document.getElementById(containerId));
+        super({ container: containerId });
         this.configureStyle();
     }
 
@@ -96,7 +96,7 @@ bpmnVisualizationCustomColors.load(bpmn);
 class BpmnVisualizationCustomEventColors extends bpmnvisu.BpmnVisualization {
 
     constructor(containerId) {
-        super(window.document.getElementById(containerId));
+        super({ container: containerId });
         this.configureStyle();
     }
 
@@ -133,7 +133,7 @@ bpmnVisualizationEventCustomColors.load(bpmn);
 class BpmnVisualizationCustomColorsUserTask extends bpmnvisu.BpmnVisualization {
 
     constructor(containerId) {
-        super(window.document.getElementById(containerId));
+        super({ container: containerId });
         this.configureStyle();
     }
 

diff --git a/examples/custom-bpmn-theme/custom-colors/index.html b/examples/custom-bpmn-theme/custom-colors/index.html
@@ -63,7 +63,7 @@ <h2>Custom colors for User Task</h2>
     </section>
 
     <!-- load bpmn-visualization -->
-    <script src="https://unpkg.com/bpmn-visualization@0.10.0/dist/bpmn-visualization.js"></script>
+    <script src="https://unpkg.com/bpmn-visualization@0.11.0/dist/bpmn-visualization.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/README.md b/examples/custom-bpmn-theme/custom-fonts/README.md
@@ -36,7 +36,7 @@ StyleConfigurator.prototype.configureCommonDefaultStyle = function (style) {
 class BpmnVisualizationCustomFonts extends BpmnVisualization {
 
     constructor(containerId) {
-        super(window.document.getElementById(containerId));
+        super({ container: containerId });
         this.configureStyle();
     }
 

diff --git a/examples/custom-bpmn-theme/custom-fonts/custom-fonts.js b/examples/custom-bpmn-theme/custom-fonts/custom-fonts.js
@@ -3,7 +3,7 @@ const bpmn = getCustomFontsBpmnDiagram();
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // default colors
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-const bpmnVisualization = new bpmnvisu.BpmnVisualization(window.document.getElementById('bpmn-container-default'));
+const bpmnVisualization = new bpmnvisu.BpmnVisualization({ container: 'bpmn-container-default' });
 bpmnVisualization.load(bpmn);
 
 
@@ -22,7 +22,7 @@ bpmnvisu.StyleConfigurator.prototype.configureCommonDefaultStyle = function (sty
     style[mxConstants.STYLE_FONTSTYLE] = mxConstants.FONT_ITALIC;
 }
 
-const bpmnVisualizationCustomDefaultFont = new bpmnvisu.BpmnVisualization(window.document.getElementById('bpmn-container-custom-default-font'));
+const bpmnVisualizationCustomDefaultFont = new bpmnvisu.BpmnVisualization({ container: 'bpmn-container-custom-default-font' });
 bpmnVisualizationCustomDefaultFont.load(bpmn);
 
 bpmnvisu.StyleDefault.DEFAULT_FONT_FAMILY = originalDefaultFontFamily;
@@ -37,7 +37,7 @@ bpmnvisu.StyleConfigurator.prototype.configureCommonDefaultStyle = originalConfi
 class BpmnVisualizationCustomFonts extends bpmnvisu.BpmnVisualization {
 
     constructor(containerId) {
-        super(window.document.getElementById(containerId));
+        super({ container: containerId });
         this.configureStyle();
     }
 

diff --git a/examples/custom-bpmn-theme/custom-fonts/index.html b/examples/custom-bpmn-theme/custom-fonts/index.html
@@ -60,7 +60,7 @@ <h2>Custom BPMN element fonts</h2>
 </section>
 
 <!-- load bpmn-visualization -->
-<script src="https://unpkg.com/bpmn-visualization@0.10.0/dist/bpmn-visualization.js"></script>
+<script src="https://unpkg.com/bpmn-visualization@0.11.0/dist/bpmn-visualization.js"></script>
 <!-- load the example -->
 <script src="../../static/js/bpmn-diagrams.js"></script>
 <script src="./custom-fonts.js"></script>