Prepare the demo page for the fit after load

process-analytics · Nov 10, 2020 · 203f179 · 203f179
1 parent edf7106
commit 203f179
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 45 deletions.
diff --git a/src/demo/index.ts b/src/demo/index.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import BpmnVisualization from '../component/BpmnVisualization';
-import { BpmnVisualizationOptions, FitType, LoadOptions } from '../component/Options';
+import { BpmnVisualizationOptions, FitOptions, FitType, LoadOptions } from '../component/Options';
 import { log, logStartup } from './helper';
 import { DropFileUserInterface } from './component/DropFileUserInterface';
 
@@ -23,14 +23,10 @@ export * from './helper';
 let bpmnVisualization: BpmnVisualization;
 let loadOptions: LoadOptions = {};
 
-export function updateFitConfig(config: { type?: string; margin?: number }): void {
-  log('Updating fit config', config);
-
-  loadOptions.fit.margin = config.margin || loadOptions.fit.margin;
-  if (config.type) {
-    loadOptions.fit.type = FitType[config.type as keyof typeof FitType];
-  }
-  log('Fit config updated!', loadOptions.fit);
+export function updateLoadOptions(fitOptions: FitOptions): void {
+  log('Updating load options', fitOptions);
+  loadOptions.fit = fitOptions;
+  log('Load options updated!', loadOptions);
 }
 
 /**
@@ -43,7 +39,7 @@ export function getCurrentLoadOptions(): LoadOptions {
 function loadBpmn(bpmn: string): void {
   log('Loading bpmn....');
   bpmnVisualization.load(bpmn, loadOptions);
-  log('BPMN loaded');
+  log('BPMN loaded with configuration', JSON.stringify(loadOptions, undefined, 2));
 }
 
 // callback function for opening | dropping the file to be loaded
@@ -103,6 +99,19 @@ function defaultStatusFetchKoNotifier(errorMsg: string): void {
   console.error(errorMsg);
 }
 
+function getFitOptionsFromParameters(config: BpmnVisualizationDemoConfiguration, parameters: URLSearchParams): FitOptions {
+  const fitOptions = config.loadOptions?.fit || {};
+  const parameterFitType = parameters.get('fitTypeOnLoad');
+  if (parameterFitType) {
+    fitOptions.type = FitType[parameterFitType as keyof typeof FitType];
+  }
+  const parameterFitMargin = parameters.get('fitMargin');
+  if (parameterFitMargin) {
+    fitOptions.margin = Number(parameterFitMargin);
+  }
+  return fitOptions;
+}
+
 export function startBpmnVisualization(config: BpmnVisualizationDemoConfiguration): void {
   const log = logStartup;
   const container = config.container;
@@ -117,16 +126,7 @@ export function startBpmnVisualization(config: BpmnVisualizationDemoConfiguratio
 
   log('Configuring Load Options');
   loadOptions = config.loadOptions || {};
-  loadOptions.fit ??= {};
-  const parameterFitType = parameters.get('fitType');
-  if (parameterFitType) {
-    loadOptions.fit.type = FitType[parameterFitType as keyof typeof FitType];
-  }
-  const parameterFitMargin = parameters.get('fitMargin');
-  if (parameterFitMargin) {
-    loadOptions.fit.margin = Number(parameterFitMargin);
-  }
-  log(`Load Options: ${JSON.stringify(loadOptions, undefined, 2)}`);
+  loadOptions.fit = getFitOptionsFromParameters(config, parameters);
 
   log("Checking if 'BPMN content' is provided as query parameter");
   const bpmnParameterValue = parameters.get('bpmn');

diff --git a/src/index.html b/src/index.html
@@ -11,7 +11,7 @@
       <div id="options-panel">
         <div>
           <h3>Options</h3>
-          <label>Fit on load
+          <label>Fit type
             <select name="fitTypes" id="fitType-selected">
               <option value="None" selected="yes">None</option>
               <option value="HorizontalVertical">Horizontal-Vertical</option>

diff --git a/src/static/js/demo.js b/src/static/js/demo.js
@@ -13,20 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { documentReady, handleFileSelect, startBpmnVisualization, getCurrentLoadOptions, updateFitConfig, FitType } from '../../index.es.js';
+import { documentReady, handleFileSelect, startBpmnVisualization, FitType, log, updateLoadOptions, getCurrentLoadOptions } from '../../index.es.js';
 
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-function updateFitTypeSelection(event) {
-  const fitType = event.target.value;
-  updateFitConfig({ type: fitType });
-  configureBpmnViewport(fitType);
-}
+let fitOptions = {};
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-function configureBpmnViewport(fitType) {
+function configureBpmnViewport() {
   const viewport = document.getElementById('graph');
 
-  const useFixedSize = !(fitType === 'None'); // !== 'None'
+  const useFixedSize = !(fitOptions.type && FitType[fitOptions.type] === 'None'); // !== 'None'
   if (useFixedSize) {
     viewport.classList.add('fixed-size');
   } else {
@@ -35,33 +30,49 @@ function configureBpmnViewport(fitType) {
 }
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-function startDemo() {
-  startBpmnVisualization({ container: 'graph' });
+function updateFitConfig(config) {
+  log('Updating fit config', config);
 
-  // Configure custom html elements
-  document.getElementById('bpmn-file').addEventListener('change', handleFileSelect, false);
+  fitOptions.margin = config.margin || fitOptions.margin;
+  if (config.type) {
+    fitOptions.type = FitType[config.type];
+  }
+  log('Fit config updated!', fitOptions);
 
-  const fitTypeSelectedElt = document.getElementById('fitType-selected');
-  fitTypeSelectedElt.addEventListener('change', updateFitTypeSelection, false);
+  updateLoadOptions(fitOptions);
+}
 
-  const fitMarginElt = document.getElementById('fit-margin');
-  fitMarginElt.onchange = function (event) {
-    updateFitConfig({ margin: event.target.value });
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+function configureFitTypeSelect() {
+  const fitTypeSelectedElt = document.getElementById('fitType-selected');
+  fitTypeSelectedElt.onchange = event => {
+    updateFitConfig({ type: event.target.value });
+    configureBpmnViewport();
   };
 
-  // Update Fit Options based on configuration
-  const fitOptions = getCurrentLoadOptions().fit;
-
   if (fitOptions.type) {
     fitTypeSelectedElt.value = FitType[fitOptions.type];
+  } else {
+    updateFitConfig({ type: fitTypeSelectedElt.value });
   }
-  configureBpmnViewport(fitTypeSelectedElt.value);
+
+  configureBpmnViewport();
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+function configureFitMarginInput() {
+  const fitMarginElt = document.getElementById('fit-margin');
+  fitMarginElt.onchange = event => updateFitConfig({ margin: event.target.value });
 
   if (fitOptions.margin) {
     fitMarginElt.value = fitOptions.margin;
+  } else {
+    updateFitConfig({ margin: fitMarginElt.value });
   }
+}
 
-  // Update control panel
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+function configureControlPanel() {
   const parameters = new URLSearchParams(window.location.search);
   if (parameters.get('hideControls') === 'true') {
     const classList = document.getElementById('controls').classList;
@@ -70,5 +81,18 @@ function startDemo() {
   }
 }
 
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+function startDemo() {
+  startBpmnVisualization({ container: 'graph' });
+
+  // Configure custom html elements
+  document.getElementById('bpmn-file').addEventListener('change', handleFileSelect, false);
+
+  fitOptions = getCurrentLoadOptions().fit;
+  configureFitTypeSelect();
+  configureFitMarginInput();
+  configureControlPanel();
+}
+
 // Start
 documentReady(startDemo);
diff --git a/test/e2e/helpers/visu-utils.ts b/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?fitType=${FitType[loadOptions?.fit?.type]}&fitMargin=${loadOptions?.fit?.margin}&${params}`;
+    this.baseUrl = `http://localhost:10002/${targetedPage.name}.html?fitTypeOnLoad=${FitType[loadOptions?.fit?.type]}&fitMargin=${loadOptions?.fit?.margin}&${params}`;
   }
 
   /**