[INFRA] new demo 0.2.0 (#51)

process-analytics · Aug 25, 2020 · 0b7c305 · 0b7c305
1 parent 001e231
commit 0b7c305
Show file tree

Hide file tree

Showing 6 changed files with 156 additions and 7 deletions.
diff --git a/demo/0.2.0/index.es.js b/demo/0.2.0/index.es.js
diff --git a/demo/0.2.0/lib-integration.html b/demo/0.2.0/lib-integration.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>BPMN Visualization Lib Integration</title>
+  <link rel="shortcut icon" href="./static/img/favicon.ico">
+</head>
+<body>
+  <div id="bpmn-visualization-viewport"></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/lib-integration.js" type="module"></script>
+</body>
+</html>
diff --git a/demo/0.2.0/non-regression.html b/demo/0.2.0/non-regression.html
@@ -0,0 +1,33 @@
+<!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>
+      .graph-container {
+        top: 10px;
+        bottom: 10px;
+        left: 10px;
+        right: 10px;
+        position: absolute;
+        overflow: hidden;
+      }
+      .status-ko {
+        color: red;
+        font-weight: bold;
+      }
+    </style>
+</head>
+<body>
+    <div id="fetch-status"></div>
+    <div id="viewport" class="graph-container"></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/non-regression.js" type="module"></script>
+</body>
+</html>
diff --git a/demo/0.2.0/static/js/demo.js b/demo/0.2.0/static/js/demo.js
@@ -13,13 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { documentReady, DropFileUserInterface, handleFileSelect, readAndLoadFile, startBpmnVisualization } from '../../index.es.js';
-
-const visualizationContainer = 'graph';
-// TODO: move to UI initializer
-new DropFileUserInterface(window, 'drop-container', visualizationContainer, readAndLoadFile);
+import { documentReady, handleFileSelect, startBpmnVisualization } from '../../index.es.js';
 
 document.getElementById('bpmn-file').addEventListener('change', handleFileSelect, false);
 document.getElementById('file-selector').classList.remove('hidden');
 
-documentReady(startBpmnVisualization(visualizationContainer));
+documentReady(startBpmnVisualization({ container: 'graph' }));
diff --git a/demo/0.2.0/static/js/lib-integration.js b/demo/0.2.0/static/js/lib-integration.js
@@ -0,0 +1,77 @@
+/**
+ * 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 { 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 {
+  // eslint-disable-next-line @typescript-eslint/no-use-before-define
+  bpmn = bpmnDefaultContent();
+}
+//
+const bpmnVisualizationIntegration = new BpmnVisualization(window.document.getElementById('bpmn-visualization-viewport'));
+bpmnVisualizationIntegration.load(bpmn);
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+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>`;
+}
diff --git a/demo/0.2.0/static/js/non-regression.js b/demo/0.2.0/static/js/non-regression.js
@@ -0,0 +1,25 @@
+/**
+ * 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, startBpmnVisualization } from '../../index.es.js';
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+function statusFetchKO(errorMsg) {
+  const statusElt = document.getElementById('fetch-status');
+  statusElt.innerText = errorMsg;
+  statusElt.className = 'status-ko';
+}
+
+documentReady(startBpmnVisualization({ container: 'viewport', statusFetchKoNotifier: statusFetchKO }));