[REFACTOR] Update for 0.7.0 release (#95)

* Replace 0.6.0 demo by 0.7.0 demo * Replace all 0.6.0 references by 0.7.0
process-analytics · Nov 16, 2020 · 14005c8 · 14005c8
1 parent ee8e3a7
commit 14005c8
Show file tree

Hide file tree

Showing 23 changed files with 351 additions and 61 deletions.
diff --git a/demo/0.7.0/bpmn-visualization.js b/demo/0.7.0/bpmn-visualization.js
diff --git a/demo/index.es.js b/demo/index.es.js
diff --git a/demo/index.html b/demo/index.html
@@ -11,7 +11,10 @@
       <div id="options-panel">
         <div>
           <h3>Options</h3>
-          <label>Fit on load:
+          <label for="fitOnLoad">Fit on load
+            <input type="checkbox" id="fitOnLoad" name="fitOnLoad" checked>
+          </label><br>
+          <label>Fit type
             <select name="fitTypes" id="fitType-selected">
               <option value="None" selected="yes">None</option>
               <option value="HorizontalVertical">Horizontal-Vertical</option>
@@ -20,6 +23,9 @@ <h3>Options</h3>
               <option value="Center">Center</option>
             </select>
           </label>
+          <label for="fit-margin">Fit margin
+            <input type="number" id="fit-margin" min="0" max="100" maxlength="3" oninput="validity.valid||(value='');">
+          </label>
         </div>
       </div>
       <div id="file-panel">

diff --git a/demo/navigation-diagram.html b/demo/navigation-diagram.html
@@ -23,7 +23,7 @@
       }
       .tooltip {
         visibility: hidden;
-        width: 160px;
+        width: 300px;
         background-color: black;
         color: #fff;
         fill: #B0B0B0;
@@ -39,6 +39,33 @@
       .info:hover .tooltip {
         visibility: visible;
       }
+      #zoom-config-controls {
+        visibility: hidden;
+      }
+      .zoom-config {
+        font-size: 0.7em;
+        width: 38px;
+        position: absolute;
+        left: -6px;
+      }
+      #zoom-throttle {
+        top: 70px;
+      }
+      #zoom-debounce {
+        top: 130px;
+      }
+      .info label {
+        position: absolute;
+        left: -5px;
+        margin-top: 10px;
+        font-size: 0.7em;
+      }
+      label[for="zoom-throttle"] {
+        top: 40px;
+      }
+      label[for="zoom-debounce"] {
+        top: 100px;
+      }
     </style>
 </head>
 <body>
@@ -47,7 +74,14 @@
     <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-info-square-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
       <path fill-rule="evenodd" d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm8.93 4.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
     </svg>
-    <span class="tooltip">Drag and Drop a BPMN file</span>
+    <div class="tooltip">
+      <p>Drag and Drop a BPMN file</p>
+      <p>To show zoom config controls add this to the url: .../navigation-diagram.html?zoomConfigControls=true</p>
+    </div>
+    <div id="zoom-config-controls">
+      <label for="zoom-throttle">throttle</label><input id="zoom-throttle" class="zoom-config" type="number" placeholder="thr" value="40" disabled title="to play with throttle pass parameter in url like this: .../navigation-diagram.html?zoomConfigControls=true&zoomThrottle=40"/>
+      <label for="zoom-debounce">debounce</label><input id="zoom-debounce" class="zoom-config" type="number" placeholder="deb" value="30" disabled title="to play with debounce pass parameter in url like this: .../navigation-diagram.html?zoomConfigControls=true&zoomDebounce=30"/>
+    </div>
   </div>
 
     <div id="bpmn-viewport"></div>

diff --git a/demo/rendering-diagram.html b/demo/rendering-diagram.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>BPMN Visualization - Diagram Rendering</title>
+  <link rel="shortcut icon" href="./static/img/favicon.ico">
+
+  <link href='https://css.gg/close.css' rel='stylesheet'>
+  <link href='https://css.gg/code.css' rel='stylesheet'>
+  <link href='https://css.gg/select.css' rel='stylesheet'>
+  <link href='https://css.gg/minimize.css' rel='stylesheet'>
+  <link href='https://css.gg/maximize.css' rel='stylesheet'>
+
+  <style>
+    .flex-container{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .flex-container > div {
+      top: 20px;
+      bottom: 20px;
+      position: absolute;
+    }
+    .flex-sub-container{
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      opacity: 0;
+    }
+    #bpmn-container {
+      left: 50px;
+      right: 20px;
+      border-style: solid;
+      border-color: #B0B0B0;
+      border-width: 1px;
+      overflow: hidden;
+    }
+    button {
+      border-radius: 4px;
+      padding: 0px;
+      width:28px;
+      height:28px;
+      background-color: #f9dfe8;
+    }
+  </style>
+</head>
+<body>
+  <div class="flex-container">
+    <div class="flex-sub-container" style="flex-grow: 1">
+      <button type="button" id="None">
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z"
+            fill="currentColor"
+          />
+        </svg>
+      </button>
+      <button type="button" id="HorizontalVertical">
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M3 3H9V5H5V9H3V3Z" fill="currentColor" />
+          <path d="M3 21H9V19H5V15H3V21Z" fill="currentColor" />
+          <path d="M15 21H21V15H19V19H15V21Z" fill="currentColor" />
+          <path d="M21 3H15V5H19V9H21V3Z" fill="currentColor" />
+        </svg>
+      </button>
+      <button type="button" id="Horizontal">
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M9.95263 16.9123L8.59323 18.3608L2.03082 12.2016L8.18994 5.63922L9.64826 7.00791L4.85783 12.112L9.95212 16.8932L9.95263 16.9123Z"
+            fill="currentColor"
+          />
+          <path
+            d="M14.0474 16.9123L15.4068 18.3608L21.9692 12.2016L15.8101 5.63922L14.3517 7.00791L19.1422 12.112L14.0479 16.8932L14.0474 16.9123Z"
+            fill="currentColor"
+          />
+        </svg>
+      </button>
+      <button type="button" id="Vertical">
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6 9.65685L7.41421 11.0711L11.6569 6.82843L15.8995 11.0711L17.3137 9.65685L11.6569 4L6 9.65685Z"
+            fill="currentColor"
+          />
+          <path
+            d="M6 14.4433L7.41421 13.0291L11.6569 17.2717L15.8995 13.0291L17.3137 14.4433L11.6569 20.1001L6 14.4433Z"
+            fill="currentColor"
+          />
+        </svg>
+      </button>
+      <button type="button" id="Center">
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M9 9H3V7H7V3H9V9Z" fill="currentColor" />
+          <path d="M9 15H3V17H7V21H9V15Z" fill="currentColor" />
+          <path d="M21 15H15V21H17V17H21V15Z" fill="currentColor" />
+          <path d="M15 9.00012H21V7.00012H17V3.00012H15V9.00012Z" fill="currentColor" />
+        </svg>
+      </button>
+    </div>
+
+    <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/rendering-diagram.js" type="module"></script>
+</body>
+</html>
diff --git a/demo/static/css/main.css b/demo/static/css/main.css
@@ -23,16 +23,22 @@
 #options-panel div {
     border-radius: 10px;
     border: 2px solid PowderBlue;
-    margin-top: 5%;
-    margin-left: 5%;
-    margin-right: 10%;
-    margin-bottom: 5%;
-    margin-top: 15px;
-    padding-bottom: 15px;
+    margin: 15px 10% 5% 5%;
+    padding-bottom: 35px;
 }
 #options-panel > * {
     padding-left: 5%;
 }
+#options-panel div label {
+  padding-top: 5px;
+}
+
+#fit-margin {
+  width: 30%;
+}
+label[for=fit-margin] {
+  float: left;
+}
 
 .fixed-size {
   top: 10px;

diff --git a/demo/static/js/demo.js b/demo/static/js/demo.js
@@ -13,58 +13,102 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { documentReady, handleFileSelect, startBpmnVisualization, FitType, updateFitType } from '../../index.es.js';
+import { documentReady, handleFileSelect, startBpmnVisualization, FitType, fit, log, updateLoadOptions, getCurrentLoadOptions } from '../../index.es.js';
+
+let fitOnLoad = true;
+let fitOptions = {};
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-function updateFitTypeSelection(event) {
-  updateFitType(event);
+function configureBpmnViewport() {
+  const viewport = document.getElementById('graph');
 
-  if (event.target.value === 'None') {
-    resetClass(container);
+  const useFixedSize = !(fitOptions.type && FitType[fitOptions.type] === 'None'); // !== 'None'
+  if (useFixedSize) {
+    viewport.classList.add('fixed-size');
   } else {
-    setFixedSizeClass(container);
+    viewport.classList.remove('fixed-size');
   }
 }
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-function setFixedSizeClass(htmlElementId) {
-  const htmlElement = document.getElementById(htmlElementId);
-  htmlElement.classList.add('fixed-size');
+function configureFitOnLoadCheckBox() {
+  const fitOnLoadElt = document.getElementById('fitOnLoad');
+  fitOnLoadElt.onchange = event => {
+    fitOnLoad = event.target.checked;
+    log('Fit on load updated!', fitOnLoad);
+    updateLoadOptions(fitOnLoad ? fitOptions : {});
+  };
+  fitOnLoadElt.checked = fitOnLoad;
 }
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-function resetClass(htmlElementId) {
-  const htmlElement = document.getElementById(htmlElementId);
-  htmlElement.classList.remove('fixed-size');
+function updateFitConfig(config) {
+  log('Updating fit config', config);
+
+  fitOptions.margin = config.margin || fitOptions.margin;
+  if (config.type) {
+    fitOptions.type = FitType[config.type];
+  }
+  log('Fit config updated!', fitOptions);
+
+  if (fitOnLoad) {
+    updateLoadOptions(fitOptions);
+  }
 }
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-function startDemo() {
-  const parameters = new URLSearchParams(window.location.search);
+function configureFitTypeSelect() {
+  const fitTypeSelectedElt = document.getElementById('fitType-selected');
+  fitTypeSelectedElt.onchange = event => {
+    updateFitConfig({ type: event.target.value });
+    configureBpmnViewport();
+    fit(fitOptions);
+  };
 
-  // Update the selected option at the initialization
-  const fitTypeSelected = document.getElementById('fitType-selected');
-  fitTypeSelected.addEventListener('change', updateFitTypeSelection, false);
-
-  const parameterFitType = parameters.get('fitType');
-  if (parameterFitType) {
-    fitTypeSelected.value = parameterFitType;
+  if (fitOptions.type) {
+    fitTypeSelectedElt.value = FitType[fitOptions.type];
+  } else {
+    updateFitConfig({ type: fitTypeSelectedElt.value });
   }
 
-  if (fitTypeSelected.value !== 'None') {
-    setFixedSizeClass('graph');
-  }
+  configureBpmnViewport();
+}
 
-  startBpmnVisualization({ container: 'graph', loadOptions: { fitType: FitType[fitTypeSelected.value] } });
-  document.getElementById('bpmn-file').addEventListener('change', handleFileSelect, false);
+// 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 });
 
-  // Update control panel
+  if (fitOptions.margin) {
+    fitMarginElt.value = fitOptions.margin;
+  } else {
+    updateFitConfig({ margin: fitMarginElt.value });
+  }
+}
+
+// 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;
     classList.remove('controls');
     classList.add('hidden');
   }
 }
 
+// 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();
+  configureFitOnLoadCheckBox();
+  configureControlPanel();
+}
+
 // Start
 documentReady(startDemo);