[INFRA] Update demo from 0.9.0 to 0.10.0 (#128)

process-analytics · Jan 11, 2021 · 8c19b7f · 8c19b7f
1 parent 6a04b8a
commit 8c19b7f
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 1 deletion.
diff --git a/demo/elements-identification.html b/demo/elements-identification.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>BPMN Visualization Non Regression</title>
+    <link rel="shortcut icon" href="./static/img/favicon.ico">
+    <style>
+      #main-container {
+        top: 140px;
+        bottom: 10px;
+        left: 10px;
+        right: 10px;
+        position: absolute;
+      }
+      #bpmn-container {
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+
+        border-style: solid;
+        border-color: #B0B0B0;
+        border-width: 1px;
+
+        position: absolute;
+        overflow: hidden;
+      }
+
+      textarea {
+        resize: none;
+        height: 100px;
+        right: 10px;
+        position: absolute;
+        width: 70%;
+      }
+    </style>
+</head>
+<body>
+    <div id="controls">
+      <label for="bpmn-kinds-select">Select by Kinds:</label><select id="bpmn-kinds-select">
+        <option value="task">Abstract Task</option>
+        <option value="userTask">User Task</option>
+        <option value="scriptTask">Script Task</option>
+        <option value="serviceTask">Service Task</option>
+        <option value="startEvent">Start Event</option>
+        <option value="endEvent">End Event</option>
+        <option value="intermediateCatchEvent">Catch Event</option>
+        <option value="intermediateThrowEvent">Throw Event</option>
+        <option value="lane">Lane</option>
+      </select>
+      <button id="bpmn-kinds-textarea-clean-btn">Clear</button>
+      <textarea id="elements-result"></textarea>
+    </div>
+
+    <div id="main-container">
+      <div id="bpmn-container"></div>
+    </div>
+
+    <!-- load global settings -->
+    <script src="./static/js/configureMxGraphGlobals.js"></script>
+    <!-- load mxGraph client library -->
+    <script src="./static/js/mxClient.min.js"></script>
+    <!-- load app -->
+    <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/static/js/elements-identification.js b/demo/static/js/elements-identification.js
@@ -0,0 +1,49 @@
+/**
+ * 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, getElementsByKinds, log, startBpmnVisualization, updateLoadOptions } from '../../index.es.js';
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+function configureControls() {
+  const textArea = document.getElementById('elements-result');
+
+  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);
+
+    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;
+  };
+
+  document.getElementById('bpmn-kinds-textarea-clean-btn').onclick = function () {
+    textArea.value = '';
+  };
+}
+
+documentReady(() => {
+  startBpmnVisualization({
+    container: 'bpmn-container',
+    globalOptions: {
+      mouseNavigationSupport: true,
+    },
+  });
+  updateLoadOptions({ type: FitType.Center, margin: 20 });
+  configureControls();
+});