chore: migrate the code of the demo/test pages to TypeScript (#2794)

process-analytics · Aug 18, 2023 · 2ac896c · 2ac896c
1 parent 0c65082
commit 2ac896c
Show file tree

Hide file tree

Showing 23 changed files with 155 additions and 122 deletions.
diff --git a/dev/public/bpmn-rendering.html b/dev/public/bpmn-rendering.html
@@ -18,7 +18,7 @@
         font-weight: bold;
       }
     </style>
-    <script src="./static/js/bpmn-rendering.js" type="module"></script>
+    <script src="../ts/pages/bpmn-rendering.ts" type="module"></script>
 </head>
 <body>
     <div id="status-zone"></div>

diff --git a/dev/public/diagram-navigation.html b/dev/public/diagram-navigation.html
@@ -18,7 +18,7 @@
       width: 35px;
     }
   </style>
-  <script src="./static/js/diagram-navigation.js" type="module"></script>
+  <script src="../ts/pages/diagram-navigation.ts" type="module"></script>
 </head>
 <body>
 <div class="flex-container">

diff --git a/dev/public/elements-identification.html b/dev/public/elements-identification.html
@@ -132,7 +132,7 @@
         color: var(--color-flow) !important;
       }
     </style>
-    <script src="./static/js/elements-identification.js" type="module"></script>
+    <script src="../ts/pages/elements-identification.ts" type="module"></script>
 </head>
 <body>
     <div id="controls">

diff --git a/dev/public/index.html b/dev/public/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.2/css/all.css">
     <link href="./static/css/styles.css" rel="stylesheet">
     <link rel="icon" type="image/svg+xml" href="./static/img/favicon.svg">
-    <script src="./static/js/index.js" type="module"></script>
+    <script src="../ts/pages/index.ts" type="module"></script>
 </head>
 <body class="bg-gray-800 font-sans leading-normal tracking-normal flex flex-col h-screen">
     <!--Nav-->

diff --git a/dev/public/lib-integration.html b/dev/public/lib-integration.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <title>bpmn-visualization - Library Integration</title>
   <link rel="icon" type="image/svg+xml" href="./static/img/favicon.svg">
-  <script src="./static/js/lib-integration.js" type="module"></script>
+  <script src="../ts/pages/lib-integration.ts" type="module"></script>
 </head>
 <body>
   <div id="bpmn-container-custom"></div>

diff --git a/dev/public/overlays.html b/dev/public/overlays.html
@@ -13,7 +13,7 @@
       background-color: MintCream;
     }
   </style>
-  <script src="./static/js/overlays.js" type="module"></script>
+  <script src="../ts/pages/overlays.ts" type="module"></script>
 </head>
 <body>
 <div class="flex-container">

diff --git a/dev/ts/component/DropFileUserInterface.ts b/dev/ts/component/DropFileUserInterface.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { logErrorAndOpenAlert } from '../utils/internal-helpers';
+import { logErrorAndOpenAlert } from '../shared/internal-helpers';
 
 export class DropFileUserInterface {
   private document: Document;

diff --git a/dev/ts/component/ThemedBpmnVisualization.ts b/dev/ts/component/ThemedBpmnVisualization.ts
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { BpmnVisualization, FlowKind, ShapeBpmnElementKind, ShapeUtil, StyleConfigurator, StyleDefault } from '../../../src/bpmn-visualization';
-import { logStartup } from '../utils/internal-helpers';
+import { logStartup } from '../shared/internal-helpers';
 import { mxConstants } from '../../../src/component/mxgraph/initializer';
 
 interface Theme {

diff --git a/dev/ts/component/download.ts b/dev/ts/component/download.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { logDownload } from '../utils/internal-helpers';
+import { logDownload } from '../shared/internal-helpers';
 
 // inspired from https://ourcodeworld.com/articles/read/189/how-to-create-a-file-and-generate-a-download-with-javascript-in-the-browser-without-a-server
 function download(filename: string, contentType: string, text: string): void {

diff --git a/dev/ts/dev-bundle-index.ts b/dev/ts/dev-bundle-index.ts
@@ -14,6 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-export * from './main';
-export * from './utils/shared-helpers';
+export * from './shared/controls';
+export * from './shared/main';
+export * from './shared/shared-helpers';
 export * from '../../src/bpmn-visualization';
+// extra code not exported by bpmn-visualization
+export * from '../../src/model/bpmn/internal/edge/utils';
diff --git a/dev/public/static/js/bpmn-rendering.js → dev/ts/pages/bpmn-rendering.ts b/dev/public/static/js/bpmn-rendering.js → dev/ts/pages/bpmn-rendering.ts
@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { documentReady, log, logError, startBpmnVisualization } from '../../../ts/dev-bundle-index';
+import { documentReady, log, logError, startBpmnVisualization } from '../dev-bundle-index';
 
-function statusFetchKO(errorMsg) {
+function statusFetchKO(errorMsg: string): void {
   logError(errorMsg);
   const statusElt = document.getElementById('status-zone');
   statusElt.innerText = errorMsg;

diff --git a/dev/public/static/js/diagram-navigation.js → dev/ts/pages/diagram-navigation.ts b/dev/public/static/js/diagram-navigation.js → dev/ts/pages/diagram-navigation.ts
@@ -14,10 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { documentReady, fit, FitType, startBpmnVisualization, zoom, ZoomType } from '../../../ts/dev-bundle-index';
-import { configureControlsPanel, configureMousePointer } from './helpers/controls.js';
+import { configureControlsPanel, configureMousePointer, documentReady, fit, FitType, startBpmnVisualization, zoom, ZoomType } from '../dev-bundle-index';
 
-function configureFitAndZoomButtons() {
+function configureFitAndZoomButtons(): void {
   Object.values(FitType).forEach(fitType => {
     document.getElementById(fitType).onclick = () => fit({ type: fitType });
   });
@@ -26,23 +25,23 @@ function configureFitAndZoomButtons() {
   });
 }
 
-function configureZoomThrottleInput(parameters) {
-  const elZoomThrottle = document.getElementById('zoom-throttle');
+function configureZoomThrottleInput(parameters: URLSearchParams): HTMLInputElement {
+  const elZoomThrottle = <HTMLInputElement>document.getElementById('zoom-throttle');
   if (parameters.get('zoomThrottle')) {
     elZoomThrottle.value = parameters.get('zoomThrottle');
   }
   return elZoomThrottle;
 }
 
-function configureZoomDebounceInput(parameters) {
-  const elZoomDebounce = document.getElementById('zoom-debounce');
+function configureZoomDebounceInput(parameters: URLSearchParams): HTMLInputElement {
+  const elZoomDebounce = <HTMLInputElement>document.getElementById('zoom-debounce');
   if (parameters.get('zoomDebounce')) {
     elZoomDebounce.value = parameters.get('zoomDebounce');
   }
   return elZoomDebounce;
 }
 
-function start() {
+function start(): void {
   const parameters = new URLSearchParams(window.location.search);
   configureMousePointer(parameters);
   configureControlsPanel(parameters);
@@ -56,8 +55,8 @@ function start() {
       navigation: {
         enabled: true,
         zoom: {
-          throttleDelay: elZoomThrottle.value,
-          debounceDelay: elZoomDebounce.value,
+          throttleDelay: Number(elZoomThrottle.value),
+          debounceDelay: Number(elZoomDebounce.value),
         },
       },
     },

diff --git a/...blic/static/js/elements-identification.js → dev/ts/pages/elements-identification.ts b/...blic/static/js/elements-identification.js → dev/ts/pages/elements-identification.ts
@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import type { BpmnElement, BpmnElementKind, Overlay, ShapeStyleUpdate, StyleUpdate, FlowKind } from '../dev-bundle-index';
 import {
   addCssClasses,
   addOverlays,
@@ -34,17 +35,32 @@ import {
   getParentElementIds,
   ShapeBpmnElementKind,
   isChildOfSubProcess,
-} from '../../../ts/dev-bundle-index';
+  isFlowKind,
+} from '../dev-bundle-index';
 
-let lastIdentifiedBpmnIds = [];
-let lastIdentifiedParentBpmnIds = [];
-let styledPoolAndLaneIds = [];
+let lastIdentifiedBpmnIds: string[] = [];
+let lastIdentifiedParentBpmnIds: string[] = [];
+let styledPoolAndLaneIds: string[] = [];
 const cssClassName = 'detection';
 let isOverlaysDisplayed = true;
 let useCSS = true;
 
-function computeStyleUpdateByKind(bpmnKind) {
-  const style = { font: {}, fill: {}, stroke: {} };
+function computeStyleUpdateByKind(bpmnKind: BpmnElementKind): StyleUpdate {
+  const style: ShapeStyleUpdate = { font: {}, fill: {}, stroke: {} };
+
+  if (isFlowKind(bpmnKind)) {
+    switch (bpmnKind as FlowKind) {
+      case 'messageFlow':
+      case 'sequenceFlow':
+      case 'association':
+        style.font.color = 'Chocolate';
+        style.stroke.color = 'Chocolate';
+        style.stroke.width = 4;
+        break;
+    }
+    return style;
+  }
+
   if (ShapeUtil.isTask(bpmnKind)) {
     style.font.color = 'Indigo';
     style.fill.color = 'gold';
@@ -99,19 +115,12 @@ function computeStyleUpdateByKind(bpmnKind) {
         style.stroke.color = 'Chartreuse';
         style.stroke.width = 6;
         break;
-      case 'messageFlow':
-      case 'sequenceFlow':
-      case 'association':
-        style.font.color = 'Chocolate';
-        style.stroke.color = 'Chocolate';
-        style.stroke.width = 4;
-        break;
     }
   }
   return style;
 }
 
-function updateStyleByAPI(bpmnIds, bpmnKind) {
+function updateStyleByAPI(bpmnIds: string[], bpmnKind: ShapeBpmnElementKind): void {
   const subProcessChildrenIds = bpmnIds.filter(isChildOfSubProcess);
   const otherIds = bpmnIds.filter(bpmnId => !subProcessChildrenIds.includes(bpmnId));
 
@@ -130,25 +139,25 @@ function updateStyleByAPI(bpmnIds, bpmnKind) {
   updateStyle(otherIds, style);
 }
 
-function styleByCSS(idsToStyle) {
+function styleByCSS(idsToStyle: string[]): void {
   removeCssClasses(lastIdentifiedBpmnIds, cssClassName);
   addCssClasses(idsToStyle, cssClassName);
 }
 
-function styleByAPI(idsToStyle, bpmnKind) {
+function styleByAPI(idsToStyle: string[], bpmnKind: ShapeBpmnElementKind): void {
   resetStyleByAPI();
   updateStyleByAPI(idsToStyle, bpmnKind);
 }
 
-function resetStyleByAPI() {
+function resetStyleByAPI(): void {
   resetStyle(lastIdentifiedBpmnIds);
   resetStyle(lastIdentifiedParentBpmnIds);
   lastIdentifiedParentBpmnIds = [];
   resetStyle(styledPoolAndLaneIds);
   styledPoolAndLaneIds = [];
 }
 
-function manageOverlays(idsToAddOverlay, bpmnKind) {
+function manageOverlays(idsToAddOverlay: string[], bpmnKind: ShapeBpmnElementKind): void {
   lastIdentifiedBpmnIds.forEach(id => removeAllOverlays(id));
   if (isOverlaysDisplayed) {
     idsToAddOverlay.forEach(id => addOverlays(id, getOverlay(bpmnKind)));
@@ -157,7 +166,7 @@ function manageOverlays(idsToAddOverlay, bpmnKind) {
   }
 }
 
-function updateSelectedBPMNElements(bpmnKind) {
+function updateSelectedBPMNElements(bpmnKind: ShapeBpmnElementKind): void {
   log(`Searching for Bpmn elements of '${bpmnKind}' kind`);
   const elementsByKinds = getElementsByKinds(bpmnKind);
 
@@ -172,8 +181,8 @@ function updateSelectedBPMNElements(bpmnKind) {
   lastIdentifiedBpmnIds = newlyIdentifiedBpmnIds;
 }
 
-function updateTextArea(elementsByKinds, bpmnKind) {
-  const textArea = document.getElementById('elements-result');
+function updateTextArea(elementsByKinds: BpmnElement[], bpmnKind: string): void {
+  const textArea = <HTMLTextAreaElement>document.getElementById('elements-result');
 
   const textHeader = `Found ${elementsByKinds.length} ${bpmnKind}(s)`;
   log(textHeader);
@@ -183,15 +192,15 @@ function updateTextArea(elementsByKinds, bpmnKind) {
   textArea.scrollTop = textArea.scrollHeight;
 }
 
-function resetTextArea() {
-  const textArea = document.getElementById('elements-result');
+function resetTextArea(): void {
+  const textArea = <HTMLTextAreaElement>document.getElementById('elements-result');
   textArea.value = '';
 }
 
-function configureControls() {
-  const selectedKindElt = document.getElementById('bpmn-kinds-select');
-  selectedKindElt.onchange = event => updateSelectedBPMNElements(event.target.value);
-  document.addEventListener('diagramLoaded', () => updateSelectedBPMNElements(selectedKindElt.value), false);
+function configureControls(): void {
+  const selectedKindElt = <HTMLSelectElement>document.getElementById('bpmn-kinds-select');
+  selectedKindElt.onchange = event => updateSelectedBPMNElements((<HTMLSelectElement>event.target).value as ShapeBpmnElementKind);
+  document.addEventListener('diagramLoaded', () => updateSelectedBPMNElements(selectedKindElt.value as ShapeBpmnElementKind), false);
 
   document.getElementById('clear-btn').onclick = function () {
     resetTextArea();
@@ -204,16 +213,16 @@ function configureControls() {
   };
 
   // display overlay option
-  const checkboxDisplayOverlaysElt = document.getElementById('checkbox-display-overlays');
+  const checkboxDisplayOverlaysElt = <HTMLInputElement>document.getElementById('checkbox-display-overlays');
   checkboxDisplayOverlaysElt.addEventListener('change', function () {
     isOverlaysDisplayed = this.checked;
     log('Request overlays display:', isOverlaysDisplayed);
-    updateSelectedBPMNElements(selectedKindElt.value);
+    updateSelectedBPMNElements(selectedKindElt.value as ShapeBpmnElementKind);
   });
   checkboxDisplayOverlaysElt.checked = isOverlaysDisplayed;
 
   // use CSS or API to style the BPMN elements
-  const checkboxUseCSSElt = document.getElementById('checkbox-css-style');
+  const checkboxUseCSSElt = <HTMLInputElement>document.getElementById('checkbox-css-style');
   checkboxUseCSSElt.addEventListener('change', function () {
     useCSS = this.checked;
     log('Request CSS style feature:', useCSS);
@@ -223,13 +232,13 @@ function configureControls() {
       addCssClasses(lastIdentifiedBpmnIds, cssClassName);
     } else {
       removeCssClasses(lastIdentifiedBpmnIds, cssClassName);
-      updateStyleByAPI(lastIdentifiedBpmnIds, selectedKindElt.value);
+      updateStyleByAPI(lastIdentifiedBpmnIds, selectedKindElt.value as ShapeBpmnElementKind);
     }
   });
   checkboxUseCSSElt.checked = useCSS;
 }
 
-function getOverlay(bpmnKind) {
+function getOverlay(bpmnKind: BpmnElementKind): Overlay {
   if (ShapeUtil.isActivity(bpmnKind)) {
     return {
       position: 'top-right',
@@ -274,7 +283,7 @@ function getOverlay(bpmnKind) {
   return { position: 'top-left', label: '40' };
 }
 
-function configureDownloadButtons() {
+function configureDownloadButtons(): void {
   document.getElementById('btn-dl-svg').addEventListener('click', downloadSvg, false);
   document.getElementById('btn-dl-png').addEventListener('click', downloadPng, false);
 }
@@ -283,7 +292,7 @@ documentReady(() => {
   startBpmnVisualization({
     globalOptions: {
       // Use a DOM element without id to test the fix for https://github.com/process-analytics/bpmn-visualization-js/issues/2270
-      container: document.querySelector('.bpmn-container'),
+      container: <HTMLElement>document.querySelector('.bpmn-container'),
       navigation: {
         enabled: true,
       },