[INFRA] Update BPMN Visualization version to 0.13.0 (#155)

process-analytics · Mar 22, 2021 · 67209f9 · 67209f9
1 parent 02e497c
commit 67209f9
Show file tree

Hide file tree

Showing 28 changed files with 155 additions and 46 deletions.
diff --git a/demo/index.es.js b/demo/index.es.js
diff --git a/demo/overlays.html b/demo/overlays.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>BPMN Visualization Overlays</title>
+    <link rel="shortcut icon" href="./static/img/favicon.ico">
+    <style>
+      #bpmn-container {
+        top: 10px;
+        bottom: 10px;
+        left: 10px;
+        right: 10px;
+        position: absolute;
+        overflow: hidden;
+      }
+    </style>
+</head>
+<body>
+    <div id="fetch-status"></div>
+    <div id="bpmn-container"></div>
+
+    <!-- load app -->
+    <script src="./static/js/overlays.js" type="module"></script>
+</body>
+</html>
diff --git a/demo/static/css/tailwind.css b/demo/static/css/tailwind.css
diff --git a/demo/static/js/elements-identification.js b/demo/static/js/elements-identification.js
@@ -13,34 +13,55 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { documentReady, FitType, getElementsByKinds, addCssClasses, removeCssClasses, log, startBpmnVisualization, updateLoadOptions, ShapeUtil } from '../../index.es.js';
+import {
+  documentReady,
+  FitType,
+  getElementsByKinds,
+  addCssClasses,
+  removeCssClasses,
+  log,
+  startBpmnVisualization,
+  updateLoadOptions,
+  ShapeUtil,
+  addOverlay,
+} from '../../index.es.js';
 
 let lastBpmnIdsWithExtraCssClasses = [];
 let lastCssClassName = '';
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-function configureControls() {
-  const textArea = document.getElementById('elements-result');
+function updateSelectedBPMNElements(textArea, bpmnKind) {
+  log(`Searching for Bpmn elements of '${bpmnKind}' kind`);
+  const elementsByKinds = getElementsByKinds(bpmnKind);
 
-  document.getElementById('bpmn-kinds-select').onchange = function (ev) {
-    const bpmnKind = ev.target.value;
-    log(`Searching for Bpmn elements of '${bpmnKind}' kind`);
-    const elementsByKinds = getElementsByKinds(bpmnKind);
+  // Update text area
+  const textHeader = `Found ${elementsByKinds.length} ${bpmnKind}(s)`;
+  log(textHeader);
+  const lines = elementsByKinds.map(elt => `  - ${elt.bpmnSemantic.id}: '${elt.bpmnSemantic.name}'`).join('\n');
 
-    const textHeader = `Found ${elementsByKinds.length} ${bpmnKind}(s)`;
-    log(textHeader);
-    const lines = elementsByKinds.map(elt => `  - ${elt.bpmnSemantic.id}: '${elt.bpmnSemantic.name}'`).join('\n');
+  textArea.value += [textHeader, lines].join('\n') + '\n';
+  textArea.scrollTop = textArea.scrollHeight;
 
-    textArea.value += [textHeader, lines].join('\n') + '\n';
-    textArea.scrollTop = textArea.scrollHeight;
+  // CSS classes update
+  removeCssClasses(lastBpmnIdsWithExtraCssClasses, lastCssClassName);
+  const bpmnIds = elementsByKinds.map(elt => elt.bpmnSemantic.id);
+  lastCssClassName = getCustomCssClassName(bpmnKind);
+  addCssClasses(bpmnIds, lastCssClassName);
+  lastBpmnIdsWithExtraCssClasses = bpmnIds;
 
-    // CSS classes update
-    removeCssClasses(lastBpmnIdsWithExtraCssClasses, lastCssClassName);
-    const bpmnIds = elementsByKinds.map(elt => elt.bpmnSemantic.id);
-    lastCssClassName = getCustomCssClassName(bpmnKind);
-    addCssClasses(bpmnIds, lastCssClassName);
-    lastBpmnIdsWithExtraCssClasses = bpmnIds;
-  };
+  // Overlay update
+  bpmnIds.forEach(id => {
+    addOverlay(id, getOverlay(bpmnKind));
+  });
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+function configureControls() {
+  const textArea = document.getElementById('elements-result');
+
+  const selectedKindElt = document.getElementById('bpmn-kinds-select');
+  selectedKindElt.onchange = event => updateSelectedBPMNElements(textArea, event.target.value);
+  document.addEventListener('diagramLoaded', () => updateSelectedBPMNElements(textArea, selectedKindElt.value), false);
 
   document.getElementById('bpmn-kinds-textarea-clean-btn').onclick = function () {
     textArea.value = '';
@@ -66,6 +87,22 @@ function getCustomCssClassName(bpmnKind) {
   return 'detection';
 }
 
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+function getOverlay(bpmnKind) {
+  if (ShapeUtil.isActivity(bpmnKind)) {
+    return { position: 'top-left', label: '30' };
+  } else if (bpmnKind.includes('Gateway')) {
+    return { position: 'top-right', label: '3' };
+  } else if (bpmnKind.includes('Event')) {
+    return { position: 'bottom-left', label: '15' };
+  } else if (bpmnKind.includes('lane')) {
+    return { position: 'bottom-right', label: '100' };
+  } else if (bpmnKind.includes('Flow')) {
+    return { position: 'middle', label: '999999' };
+  }
+  return { position: 'top-left', label: '40' };
+}
+
 documentReady(() => {
   startBpmnVisualization({
     globalOptions: {

diff --git a/demo/static/js/overlays.js b/demo/static/js/overlays.js
@@ -0,0 +1,47 @@
+/**
+ * Copyright 2020 Bonitasoft S.A.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { documentReady, FitType, startBpmnVisualization, updateLoadOptions, addOverlay } from '../../index.es.js';
+
+documentReady(() => {
+  startBpmnVisualization({
+    globalOptions: {
+      container: 'bpmn-container',
+      navigation: {
+        enabled: true,
+      },
+    },
+  });
+  updateLoadOptions({ type: FitType.Center, margin: 20 });
+
+  const positions = new Map([
+    ['StartEvent_1', 'top-left'],
+    // TODO: uncomment or use when we add support for edge overlay
+    // ['Flow_1', 'middle'],
+    ['Activity_1', 'top-right'],
+  ]);
+
+  setTimeout(() => {
+    // Overlay update
+    [
+      'StartEvent_1',
+      // TODO: uncomment or use when we add support for edge overlay
+      // 'Flow_1',
+      'Activity_1',
+    ].forEach(id => {
+      addOverlay(id, { position: positions.get(id), label: '123' });
+    });
+  }, 500);
+});
diff --git a/examples/custom-animation/growing-sequence-flow/index.html b/examples/custom-animation/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/bpmn-visualization@0.12.2/dist/bpmn-visualization.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.13.0/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-animation/running-dashed-message-flow/index.html b/examples/custom-animation/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/bpmn-visualization@0.12.2/dist/bpmn-visualization.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.13.0/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-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/bpmn-visualization@0.12.2/dist/bpmn-visualization.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.13.0/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/bpmn-visualization@0.12.2/dist/bpmn-visualization.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.13.0/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/bpmn-visualization@0.12.2/dist/bpmn-visualization.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.13.0/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/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/bpmn-visualization@0.12.2/dist/bpmn-visualization.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.13.0/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/custom-interaction/apply-css-classes/index.html b/examples/custom-interaction/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/bpmn-visualization@0.12.2/dist/bpmn-visualization.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.13.0/dist/bpmn-visualization.min.js"></script>
     <script src="../../static/js/bpmn-diagram-miwg-test-suite-c_1_1.js"></script>
     <script>
         const bpmnVisualization = new bpmnvisu.BpmnVisualization({ container: 'bpmn-container', navigation: { enabled: true} });

diff --git a/examples/custom-interaction/javascript-tooltip-and-popover/index.html b/examples/custom-interaction/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/bpmn-visualization@0.12.2/dist/bpmn-visualization.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.13.0/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-interaction/popover-static/index.html b/examples/custom-interaction/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/bpmn-visualization@0.12.2/dist/bpmn-visualization.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.13.0/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-interaction/select-elements-by-bpmn-kind/index.html b/examples/custom-interaction/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/bpmn-visualization@0.12.2/dist/bpmn-visualization.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.13.0/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>