From 9cbdf2c26536f6e2c13c6e0ca9786a6c417cca1d Mon Sep 17 00:00:00 2001
From: Jonas Blatt <jonasblatt@uni-koblenz.de>
Date: Wed, 23 Oct 2019 11:20:50 +0200
Subject: [PATCH] #23 Fullscreen of dmn canvas only when expected
---
.../META-INF/resources/css/dmnEditorTabs.css | 27 +++++++++
.../resources/css/img/iconFullscreen.png | Bin 0 -> 257 bytes
.../META-INF/resources/css/stylesheets.css | 11 +---
.../resources/js/dmnVerifierActions.js | 4 +-
.../META-INF/resources/js/dmnViewer.js | 52 ++++++++++--------
5 files changed, 58 insertions(+), 36 deletions(-)
create mode 100644 dmnverifierfrontend/src/main/resources/META-INF/resources/css/img/iconFullscreen.png
diff --git a/dmnverifierfrontend/src/main/resources/META-INF/resources/css/dmnEditorTabs.css b/dmnverifierfrontend/src/main/resources/META-INF/resources/css/dmnEditorTabs.css
index 4f04db21..c84642e9 100644
--- a/dmnverifierfrontend/src/main/resources/META-INF/resources/css/dmnEditorTabs.css
+++ b/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;
+}
diff --git a/dmnverifierfrontend/src/main/resources/META-INF/resources/css/img/iconFullscreen.png b/dmnverifierfrontend/src/main/resources/META-INF/resources/css/img/iconFullscreen.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d3c7e1c0d132f6dcb0451f538ef0b7d41e33688
GIT binary patch
literal 257
zcmeAS@N?(olHy`uVBq!ia0y~yU{C;I4mJh`hT^KKFANL}EX7WqAsieW95oy%9SjT%
zoCO|{#S9GG!XV7ZFl&wk0|UciPZ!6Kh}O5$9l4qf1YGAoD)q8;JgI2o)+)D@)&HSx
z)UNRIy}hwJCN6BgsHF6d{pKH@dOMXyP6zws*qP7FjvMzH#E7z<sLRm(Q1a?F$9c92
zi)u!T=!<bZ)h?5lhHSh4%zXg^*969;7nA1Q3d(x0dC`7>q;?e^<2y6h>g9e+XLu5J
z#byD+alQ!#ca9m#ekgmD{lN60WW%AGyBXBAU*%W4VTezy^7Fm(#B>S+0|SGntDnm{
Hr-UW|1|M8z
literal 0
HcmV?d00001
diff --git a/dmnverifierfrontend/src/main/resources/META-INF/resources/css/stylesheets.css b/dmnverifierfrontend/src/main/resources/META-INF/resources/css/stylesheets.css
index b20c63e3..c7826d4f 100644
--- a/dmnverifierfrontend/src/main/resources/META-INF/resources/css/stylesheets.css
+++ b/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;
diff --git a/dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnVerifierActions.js b/dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnVerifierActions.js
index 484a851b..881f4707 100644
--- a/dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnVerifierActions.js
+++ b/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':
diff --git a/dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnViewer.js b/dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnViewer.js
index 221e7cd0..b40ca4a6 100644
--- a/dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnViewer.js
+++ b/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', '');
- } 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');
- });
-});
-
$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();
}
--
GitLab