Merge branch 'fix/canvasresize' into 'develop'

Fix/canvasresize

See merge request jonasblatt/ma-jonasblatt-dmn-verifier!47

dmnverifierfrontend/src/main/resources/META-INF/resources/css/dmnEditorTabs.css

@@ -72,3 +72,30 @@
   border-bottom: solid 3px #79818d;
   margin-bottom: 0;
 }
+
+.fullscreen-tabs {
+  position: absolute !important;
+  top: 0px;
+  left: 0px;
+}
+
+.fullscreen {
+  z-index: 9999;
+  width: 100%;
+  height: calc(100% - 40px);
+  position: fixed !important;
+  top: 40px;
+  left: 0;
+}
+
+.toggle-fullscreen {
+  background-image: url("img/iconFullscreen.png");
+  margin: 5px;
+  display: block;
+  background-size: cover;
+  background-position: center;
+  min-width: 20px;
+  max-width: 20px;
+  min-height: 20px;
+  max-height: 20px;
+}

dmnverifierfrontend/src/main/resources/META-INF/resources/css/stylesheets.css

@@ -110,15 +110,6 @@ span.select2 {
   height: 900px;
 }
 
-.fullscreen {
-  z-index: 9999;
-  width: 100%;
-  height: 100%;
-  position: fixed !important;
-  top: 0;
-  left: 0;
-}
-
 .hidden {
   display: none !important;
 }
@@ -323,7 +314,7 @@ span.select2 {
   color: white !important;
 }
 
-.highlightsoft {
+.highlight-soft {
   background-color: lightblue !important;
   fill: lightblue !important;
   color: black !important;

dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnVerifierActions.js

@@ -6,9 +6,9 @@
 function performVerificationFix(verificationEntry, fix, id) {
   console.log("FIX", fix);
   // highlight row
-  $('.verification-container').removeClass('highlightsoft');
-  $('#ver-entry-' + id).addClass('highlightsoft');
   cleanHighlightFunction();
+  $('.verification-container').removeClass('highlight-soft');
+  $('#ver-entry-' + id).addClass('highlight-soft');
   for (let i = 0; i < fix.actions.length; i++) {
     switch (fix.actions[i].actionType) {
       case 'SHOW':

dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnViewer.js

@@ -6,28 +6,6 @@ let CLASS_NAMES = {
   literalExpression: 'dmn-icon-literal-expression'
 };
 
-// Fullscreen functionality for dmn table
-$(document).ready(function () {
-  $(".dmn-js-parent").dblclick(function () {
-    $(".dmn-js-parent").toggleClass('fullscreen');
-    $("#root-dmn-verifier").toggleClass('hidden');
-    $("#dmn-top").toggleClass('hidden');
-    $(".editor-tabs").toggleClass('hidden');
-    // calc height
-    if ($(".dmn-js-parent").hasClass('fullscreen')) {
-      $(".dmn-js-parent").css('height', '');
-      var activeEditor = dmnModeler.getActiveViewer();
-      // access active editor components
-      var canvas = activeEditor.get('canvas');
-    } else {
-      let dmnModelerHeight = $(window).height() / 2.5;
-      $(".dmn-js-parent").css('height', dmnModelerHeight + 'px');
-    }
-    // zoom to fit full viewport
-    canvas.zoom('fit-viewport');
-  });
-});
-
 $tabs.delegate('.tab', 'click', function (e) {
   var viewIdx = parseInt(this.getAttribute('data-id'), 10);
   var view = dmnModeler.getViews()[viewIdx];
@@ -54,10 +32,16 @@ dmnModeler.on('views.changed', function (event) {
   var {views, activeView} = event;
   // clear tabs
   $tabs.empty();
+  // add fullscreen
+  $tabs.append($(`
+      <div class="toggle-fullscreen clickable" onclick="toggleFullscreen()">
+      </div>
+    `));
+  // add tabs
   views.forEach(function (v, idx) {
     const className = CLASS_NAMES[v.type];
     var tab = $(`
-            <div class="tab ${v === activeView ? 'active' : ''}" 
+            <div class="tab clickable ${v === activeView ? 'active' : ''}" 
             data-id="${idx}" id="tab-dec-${v.element.id}">
               <span class="${className}"></span>
               ${v.element.name || v.element.id}
@@ -111,6 +95,26 @@ function openDiagram(dmnXML) {
   });
 }
 
+function toggleFullscreen() {
+  $(".dmn-js-parent").toggleClass('fullscreen');
+  $("#root-dmn-verifier").toggleClass('hidden');
+  $("#dmn-top").toggleClass('hidden');
+  $(".editor-tabs").toggleClass('fullscreen-tabs');
+  // calc height
+  if ($(".dmn-js-parent").hasClass('fullscreen')) {
+    $(".dmn-js-parent").css('height', '');
+  } else {
+    let dmnModelerHeight = $(window).height() / 2.5;
+    $(".dmn-js-parent").css('height', dmnModelerHeight + 'px');
+  }
+  // zoom to fit full viewport
+  var activeEditor = dmnModeler.getActiveViewer();
+  // access active editor components
+  var canvas = activeEditor.get('canvas');
+  //canvas.zoom('fit-viewport');
+}
+
+// -----
 let renderHighlightFunction = [];
 
 function performHighlightFunction() {
@@ -120,7 +124,7 @@ function performHighlightFunction() {
 }
 
 function cleanHighlightFunction() {
-  $('.verification-container').removeClass('highlightsoft');
+  $('.verification-container').removeClass('highlight-soft');
   for (let i = 0; i < renderHighlightFunction.length; i++) {
     renderHighlightFunction[i].clean();
   }