Fullscreen support of dmn modeler

f85dc6e6 · Jonas Blatt · e68eaa2b · f85dc6e6 · f85dc6e6 · f85dc6e6
Commit f85dc6e6 authored 5 years ago by Jonas Blatt
--- a/dmnverifierfrontend/src/main/resources/META-INF/resources/css/stylesheets.css
+++ b/dmnverifierfrontend/src/main/resources/META-INF/resources/css/stylesheets.css
@@ -101,11 +101,29 @@ span.select2 {
 /** Top-line configuration */
-.dmn-root {
+#dmn-root {
-  margin: -2px;
+}
+.dmn-js-parent {
+  width: 100%;
+  height: 900px;
+}
+.fullscreen {
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+  position: fixed !important;
+  top: 0;
+  left: 0;
+}
+.hidden {
+  display: none !important;
 }
-.dmn-top {
+#dmn-top {
  padding-left: 6px;
  padding-top: 6px;
  display: flex;

--- a/dmnverifierfrontend/src/main/resources/META-INF/resources/index.html
+++ b/dmnverifierfrontend/src/main/resources/META-INF/resources/index.html
@@ -22,8 +22,8 @@
  <link href="css/dmnEditorTabs.css" rel="stylesheet" type="text/css"/>
 </head>
 <body>
-<div class="dmn-root">
+<div id="dmn-root">
-  <div class="dmn-top">
+  <div id="dmn-top">
    <div class="dmn-top-item dmn-upload">
      <label class="clickable" for="dmn-file-upload" title="Upload dmn">
      </label>
@@ -45,7 +45,7 @@
      </label>
    </div>
    <div class="dmn-top-item">
-      <h1>Verification for Decision Modeling Notation</h1>
+      <h1 id="heading">Verification for Decision Modeling Notation</h1>
    </div>
    <div class="dmn-top-item">
      <span class="status-dot" id="backend-status" title="Backend status"/>

--- a/dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnViewer.js
+++ b/dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnViewer.js
@@ -6,6 +6,28 @@ 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');
+      // zoom to fit full viewport
+      canvas.zoom('fit-viewport');
+    } else {
+      let dmnModelerHeight = $(window).height() / 2.5;
+      $(".dmn-js-parent").css('height', dmnModelerHeight + 'px');
+    }
+  });
+});
 $tabs.delegate('.tab', 'click', function (e) {
  var viewIdx = parseInt(this.getAttribute('data-id'), 10);
  var view = dmnModeler.getViews()[viewIdx];
@@ -21,7 +43,6 @@ let dmnModelerHeight = $(window).height() / 2.5;
 let dmnModeler = new DmnJS({
  container: $container,
  height: dmnModelerHeight,
-  width: '100%',
  keyboard: {
    bindTo: window
  }