[REFACTOR] Update the FitType API

src/component/options.ts

@@ -64,13 +64,13 @@ export interface FitOptions {
  */
 export enum FitType {
   /** No fit, use dimensions and coordinates from the BPMN diagram. */
-  None,
+  None = 'None',
   /** Fit the whole html container available to render the BPMN diagram. */
-  HorizontalVertical,
+  HorizontalVertical = 'HorizontalVertical',
   /** Fit only horizontally. */
-  Horizontal,
+  Horizontal = 'Horizontal',
   /** Fit only vertically. */
-  Vertical,
+  Vertical = 'Vertical',
   /** Fit and center the BPMN Diagram. */
-  Center,
+  Center = 'Center',
 }

src/demo/index.ts

@@ -26,7 +26,7 @@ let loadOptions: LoadOptions = {};
 export function updateLoadOptions(fitOptions: FitOptions): void {
   log('Updating load options', fitOptions);
   loadOptions.fit = fitOptions;
-  log('Load options updated!', loadOptions);
+  log('Load options updated!', stringify(loadOptions));
 }
 
 /**
@@ -110,10 +110,11 @@ function defaultStatusFetchKoNotifier(errorMsg: string): void {
 }
 
 function getFitOptionsFromParameters(config: BpmnVisualizationDemoConfiguration, parameters: URLSearchParams): FitOptions {
-  const fitOptions = config.loadOptions?.fit || {};
-  const parameterFitType = parameters.get('fitTypeOnLoad');
+  const fitOptions: FitOptions = config.loadOptions?.fit || {};
+  const parameterFitType: string = parameters.get('fitTypeOnLoad');
   if (parameterFitType) {
-    fitOptions.type = FitType[parameterFitType as keyof typeof FitType];
+    // As the parameter is a string, and the load/fit APIs accept only enum to avoid error, we need to convert it
+    fitOptions.type = <FitType>parameterFitType;
   }
   const parameterFitMargin = parameters.get('fitMargin');
   if (parameterFitMargin) {

src/static/js/demo.js

@@ -47,7 +47,7 @@ function updateFitConfig(config) {
 
   fitOptions.margin = config.margin || fitOptions.margin;
   if (config.type) {
-    fitOptions.type = FitType[config.type];
+    fitOptions.type = config.type;
   }
   log('Fit config updated!', fitOptions);
 
@@ -66,7 +66,7 @@ function configureFitTypeSelect() {
   };
 
   if (fitOptions.type) {
-    fitTypeSelectedElt.value = FitType[fitOptions.type];
+    fitTypeSelectedElt.value = fitOptions.type;
   } else {
     updateFitConfig({ type: fitTypeSelectedElt.value });
   }

src/static/js/rendering-diagram.js

@@ -109,7 +109,7 @@ function configureControlsPanel(parameters) {
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function fitOnClick(fitType) {
-  document.getElementById(fitType).onclick = () => fit({ type: FitType[fitType] });
+  document.getElementById(fitType).onclick = () => fit({ type: fitType });
 }
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
@@ -150,11 +150,9 @@ function start() {
     },
   });
 
-  fitOnClick('None');
-  fitOnClick('HorizontalVertical');
-  fitOnClick('Horizontal');
-  fitOnClick('Vertical');
-  fitOnClick('Center');
+  for (let fitTypeElement in FitType) {
+    fitOnClick(fitTypeElement);
+  }
 }
 
 documentReady(start);

test/e2e/diagram.rendering.test.ts

@@ -17,7 +17,7 @@ import { BpmnDiagramPreparation, BpmnLoadMethod, ImageSnapshotConfigurator, Imag
 import { FitType, LoadOptions } from '../../src/component/options';
 import { join, dirname } from 'path';
 
-function getCustomSnapshotIdentifier(fitType: string, fileName: string, margin = 0): string {
+function getCustomSnapshotIdentifier(fitType: FitType, fileName: string, margin = 0): string {
   return `no-diagram-visual-regression-fit-type-${fitType}-margin-${margin == null || margin < 0 ? 0 : margin}-diagram-${fileName}`;
 }
 
@@ -54,15 +54,9 @@ describe('no diagram visual regression', () => {
     ]),
   );
 
-  const fitTypes: [string, FitType][] = [
-    [FitType[FitType.None], FitType.None],
-    [FitType[FitType.HorizontalVertical], FitType.HorizontalVertical],
-    [FitType[FitType.Horizontal], FitType.Horizontal],
-    [FitType[FitType.Vertical], FitType.Vertical],
-    [FitType[FitType.Center], FitType.Center],
-  ];
-  describe.each(fitTypes)('load options - fit %s', (loadFitTitle: string, loadFitType: FitType) => {
-    const loadFitDiffDir = join(loadDiffDir, `fit-type-${loadFitTitle}`);
+  const fitTypes: FitType[] = [FitType.None, FitType.HorizontalVertical, FitType.Horizontal, FitType.Vertical, FitType.Center];
+  describe.each(fitTypes)('load options - fit %s', (loadFitType: FitType) => {
+    const loadFitDiffDir = join(loadDiffDir, `fit-type-${loadFitType}`);
     const fitDiffDir = join(loadFitDiffDir, 'fit');
 
     describe.each(['horizontal', 'vertical', 'with_outside_flows', 'with_outside_labels'])('diagram %s', (fileName: string) => {
@@ -78,15 +72,15 @@ describe('no diagram visual regression', () => {
         const config = imageSnapshotConfigurator.getConfig(fileName, 0.00006);
         expect(image).toMatchImageSnapshot({
           ...config,
-          customSnapshotIdentifier: getCustomSnapshotIdentifier(loadFitTitle, fileName),
+          customSnapshotIdentifier: getCustomSnapshotIdentifier(loadFitType, fileName),
           customDiffDir: loadFitDiffDir,
         });
       });
 
-      it.each(fitTypes)(`load + fit %s`, async (fitTitle: string) => {
+      it.each(fitTypes)(`load + fit %s`, async (fitType: FitType) => {
         await initializePage({ fit: { type: loadFitType } }, fileName);
 
-        await page.click(`#${fitTitle}`);
+        await page.click(`#${fitType}`);
         // To unselect the button
         await page.mouse.click(0, 0);
 
@@ -99,8 +93,8 @@ describe('no diagram visual regression', () => {
         const config = imageSnapshotConfigurator.getConfig(fileName, 0.00006);
         expect(image).toMatchImageSnapshot({
           ...config,
-          customSnapshotIdentifier: getCustomSnapshotIdentifier(fitTitle, fileName),
-          customDiffDir: join(fitDiffDir, `fit-type-${fitTitle}`),
+          customSnapshotIdentifier: getCustomSnapshotIdentifier(fitType, fileName),
+          customDiffDir: join(fitDiffDir, `fit-type-${fitType}`),
         });
       });
 
@@ -117,8 +111,8 @@ describe('no diagram visual regression', () => {
           const config = imageSnapshotConfigurator.getConfig(fileName);
           expect(image).toMatchImageSnapshot({
             ...config,
-            customSnapshotIdentifier: getCustomSnapshotIdentifier(loadFitTitle, fileName, margin),
-            customDiffDir: join(loadDiffDir, `fit-type-${loadFitTitle}-margin-${margin}`),
+            customSnapshotIdentifier: getCustomSnapshotIdentifier(loadFitType, fileName, margin),
+            customDiffDir: join(loadDiffDir, `fit-type-${loadFitType}-margin-${margin}`),
           });
         });
       }

test/e2e/helpers/visu-utils.ts

@@ -109,7 +109,7 @@ export class BpmnDiagramPreparation {
     loadOptions: LoadOptions = { fit: { type: FitType.HorizontalVertical } },
   ) {
     const params = targetedPage.queryParams?.join('&') ?? '';
-    this.baseUrl = `http://localhost:10002/${targetedPage.name}.html?fitTypeOnLoad=${FitType[loadOptions?.fit?.type]}&fitMargin=${loadOptions?.fit?.margin}&${params}`;
+    this.baseUrl = `http://localhost:10002/${targetedPage.name}.html?fitTypeOnLoad=${loadOptions?.fit?.type}&fitMargin=${loadOptions?.fit?.margin}&${params}`;
   }
 
   /**