[REFACTOR] Update the examples for fit after load (#94)

* Fit after load - Add fit center button - Replace mxgraph function to fit, by fit function of the library * Navignation - Replace mxgraph function for reset
process-analytics · Nov 16, 2020 · ee8e3a7 · ee8e3a7
1 parent 3636c54
commit ee8e3a7
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 31 deletions.
diff --git a/demo/0.7.0/bpmn-visualization.js b/demo/0.7.0/bpmn-visualization.js
diff --git a/examples/diagram-fit-variants/index.html b/examples/diagram-fit-variants/index.html
@@ -80,7 +80,7 @@ <h2>Various fit variants</h2>
 
                     <div id="controls">
                         <div id="btn-group-fit" class="col-2" style="float: left">
-                            <button id="btn-zoom-actual" title="Reset to initial loading dimensions" class="btn btn-primary has-icon-right">
+                            <button id="btn-fit-none" title="Reset to initial loading dimensions" class="btn btn-primary has-icon-right">
                                 <span class="icon icon-refresh mb-1"></span>
                             </button>
                             <button id="btn-fit-horizontally" title="Fit horizontally" class="btn btn-primary has-icon-right">
@@ -92,6 +92,9 @@ <h2>Various fit variants</h2>
                             <button id="btn-fit-all" title="Fit both horizontally and vertically" class="btn btn-primary has-icon-right">
                                 <span class="icon icon-apps mb-1"></span>
                             </button>
+                            <button id="btn-fit-center" title="Fit center" class="btn btn-primary has-icon-right">
+                                <span class="icon icon-location mb-1"></span>
+                            </button>
                         </div>
 
                         <div class="col-3" style="float: left">
@@ -125,9 +128,12 @@ <h2>Various fit variants</h2>
     </section>
 
     <!-- load bpmn-visualization -->
-    <script src="https://unpkg.com/[email protected]/dist/bpmn-visualization.js"></script>
+    <!-- To uncomment on 0.7.0 release -->
+<!--    <script src="https://unpkg.com/[email protected]/dist/bpmn-visualization.js"></script>-->
+    <script src="../../demo/0.7.0/bpmn-visualization.js"></script>
+
     <script>
-        let fitType = undefined;
+        let fitType = bpmnvisu.FitType.None;
         let fitMargin = 10;
         const fitMarginValueElt = document.getElementById('fit-margin-value');
         fitMarginValueElt.innerHTML = `<code>${fitMargin}</code>`;
@@ -144,41 +150,28 @@ <h2>Various fit variants</h2>
             }
         }
 
-        // TODO use the lib methods when available, see https://github.com/process-analytics/bpmn-visualization-js/issues/738
-        document.getElementById('btn-zoom-actual').onclick = function() {
-            fitType = undefined;
-            bpmnVisualization.graph.zoomActual();
+        document.getElementById('btn-fit-none').onclick = function() {
+            performFit(bpmnvisu.FitType.None);
         };
         document.getElementById('btn-fit-horizontally').onclick = function() {
-            performFit('horizontal');
+            performFit(bpmnvisu.FitType.Horizontal);
         };
         document.getElementById('btn-fit-vertically').onclick = function() {
-            performFit('vertical');
+            performFit(bpmnvisu.FitType.Vertical);
         };
         document.getElementById('btn-fit-all').onclick = function() {
-            performFit('all');
+            performFit(bpmnvisu.FitType.HorizontalVertical);
         };
+        document.getElementById('btn-fit-center').onclick = function() {
+            performFit(bpmnvisu.FitType.Center);
+        };
+
 
         function performFit(type) {
-            if (type) {
+            if (type !== undefined) {
                 fitType = type;
             }
-            if (!fitType) {
-                return;
-            }
-
-            let ignoreWidth = false,
-                ignoreHeight = false;
-            switch (fitType) {
-                case 'horizontal':
-                    ignoreHeight = true;
-                    break;
-                case 'vertical':
-                    ignoreWidth = true;
-                    break;
-            }
-
-            bpmnVisualization.graph.fit(fitMargin, false, 0, true, ignoreWidth, ignoreHeight);
+            bpmnVisualization.fit({type: fitType, margin: fitMargin});
         }
 
         // 'Fit Margin' dropdown list

diff --git a/examples/diagram-navigation/index.html b/examples/diagram-navigation/index.html
@@ -75,8 +75,9 @@ <h2>With Diagram Navigation enabled</h2>
             </section>
     </section>
 
-    <!-- load bpmn-visualization -->
-    <script src="https://unpkg.com/[email protected]/dist/bpmn-visualization.js"></script>
+    <!-- To uncomment on 0.7.0 release -->
+    <!--    <script src="https://unpkg.com/[email protected]/dist/bpmn-visualization.js"></script>-->
+    <script src="../../demo/0.7.0/bpmn-visualization.js"></script>
     <script>
         const bpmnVisualization = new bpmnvisu.BpmnVisualization(document.getElementById('bpmn-container-default'));
         bpmnVisualization.load(bpmnDiagram());
@@ -85,8 +86,7 @@ <h2>With Diagram Navigation enabled</h2>
         bpmnVisualizationNavigation.load(bpmnDiagram());
 
         document.getElementById('btn-reset').onclick = function() {
-            // TODO use the lib method when available, see https://github.com/process-analytics/bpmn-visualization-js/issues/738
-            bpmnVisualizationNavigation.graph.zoomActual();
+            bpmnVisualizationNavigation.fit({type: bpmnvisu.FitType.None});
         };
 
         function bpmnDiagram() {