lmu/uni2work.workflows.visualiser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added blur effects

Browse Source
This commit is contained in:
David Mosbach 2023-06-02 00:21:10 +02:00
parent f2a5b858ad
commit 04dc0ee9b1
3 changed files with 66 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
editor.css
View File

@ -20,11 +20,13 @@ body {
position: fixed; position: fixed;
/* padding: 8 8 8 8; */ /* padding: 8 8 8 8; */
padding-left: 10px; padding-left: 10px;
background-color: rgb(230, 230, 230); background-color: rgba(230, 230, 230, 0.8);
opacity: 0.95; /* opacity: 0.95; */
z-index: 2; z-index: 5;
float: left; float: left;
overflow: auto; /* overflow: auto; */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
} }
.menuitem { .menuitem {
@ -89,11 +91,13 @@ body {
.submenu, #sidepanel, #filepanel { .submenu, #sidepanel, #filepanel {
position:fixed; position:fixed;
background-color: rgb(230, 230, 230); background-color: rgba(230, 230, 230, 0.8);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
opacity: 0.95; /* opacity: 0.95; */
padding: 20px; padding: 20px;
border-radius: 15px; border-radius: 15px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
} }
#sidepanel { #sidepanel {
@ -106,6 +110,10 @@ body {
display: none; display: none;
} }
#sidepanel * {
background: none;
}
#sideheader, #fileheader { #sideheader, #fileheader {
width: 100%; width: 100%;
} }
@ -168,12 +176,14 @@ body {
line-height: 2; line-height: 2;
position: absolute; position: absolute;
z-index: 15; z-index: 15;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
} }
.contextmenu div, #filemenu div { .contextmenu div, #filemenu div {
padding: 5px; padding: 5px;
background-color: rgb(230, 230, 230); background-color: rgba(230, 230, 230, 0.8);
opacity: 0.95; /* opacity: 0.95; */
transition: all 100ms ease-out 50ms; transition: all 100ms ease-out 50ms;
-webkit-user-select: none; -webkit-user-select: none;
-ms-user-select: none; -ms-user-select: none;
@ -192,11 +202,11 @@ body {
} }
.contextmenu div:hover, #filemenu div:hover { .contextmenu div:hover, #filemenu div:hover {
background-color: rgb(240, 240, 240); background-color: rgb(240, 240, 240, 0.8);
} }
.contextmenu div:active, #filemenu div:active { .contextmenu div:active, #filemenu div:active {
background-color: rgb(250, 250, 250); background-color: rgb(250, 250, 250, 0.8);
} }
#filemenu .menutop { #filemenu .menutop {
@ -213,6 +223,7 @@ body {
#filemenu { #filemenu {
padding: 0 0 0 0; padding: 0 0 0 0;
background-color: transparent;
} }
#filemenu div { #filemenu div {
@ -366,11 +377,24 @@ label {
display: none; display: none;
} }
#submenu-backdrop {
position: fixed;
top: 60px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 15px;
background: transparent;
display: none;
z-index: 3;
}
.force-graph-container .graph-tooltip { .force-graph-container .graph-tooltip {
color: black; color: black;
background-color: rgb(230, 230, 230); background-color: rgba(230, 230, 230, 0.8);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
opacity: 0.95; /* opacity: 0.95; */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font-family: 'Inter'; font-family: 'Inter';
font-size: .75em; font-size: .75em;
border-radius: 5px; border-radius: 5px;

5
editor.html
View File

@ -10,7 +10,8 @@
<body> <body>
<div id="editor"> <div id="editor">
<div id="curtain" onclick="closeFileDisplay()"></div> <div id="curtain" onclick="closeFileDisplay()"></div> <!--Backdrop behind the file menu-->
<div id="submenu-backdrop"></div>
<div id="mainmenu"> <!--Horizontal bar on top for selecting highlighting modes--> <div id="mainmenu"> <!--Horizontal bar on top for selecting highlighting modes-->
<div class="menuitem" onclick="openFileMenu(this)"> <div class="menuitem" onclick="openFileMenu(this)">
<button>File</button> <button>File</button>
@ -38,7 +39,7 @@
</div> </div>
<div class="menuitem" onclick="openSettingsMenu(this)"> <div class="menuitem" onclick="openSettingsMenu(this)">
<button>Settings</button> <button>Settings</button>
<div class="submenu">Dark mode, visualisation settings, language</div> <div class="submenu">Dark mode, visualisation settings, draw @@init or not, collapse all edges between 2 states, language</div>
</div> </div>
<div class="menuitem" onclick="openAboutMenu(this)"> <div class="menuitem" onclick="openAboutMenu(this)">
<button>About</button> <button>About</button>

36
editor.js
View File

@ -16,13 +16,29 @@ function openMenuItem(menuitem) {
var fadeOuts = []; var fadeOuts = [];
Array.from(document.getElementsByClassName('selectedmenuitem')).forEach(other => { Array.from(document.getElementsByClassName('selectedmenuitem')).forEach(other => {
other.classList.remove('selectedmenuitem'); other.classList.remove('selectedmenuitem');
Array.from(other.getElementsByClassName('submenu')).forEach(subMenu => fadeOuts.push({element: subMenu, min: 0})); Array.from(other.getElementsByClassName('submenu')).forEach(subMenu => fadeOuts.push({element: subMenu, min: 0, step: 0.1}));
}); });
fadeOut(...fadeOuts); fadeOut(...fadeOuts);
menuitem.classList.add('selectedmenuitem'); menuitem.classList.add('selectedmenuitem');
var fadeIns = []; var fadeIns = [{element: submenuBackdrop, max: 1}];
Array.from(menuitem.getElementsByClassName('submenu')).forEach(subMenu => fadeIns.push({element: subMenu, max: 0.95})); var lastSubMenu = null;
fadeIn(null, ...fadeIns); Array.from(menuitem.getElementsByClassName('submenu')).forEach(subMenu => {
fadeIns.push({element: subMenu, max: 1});
lastSubMenu = subMenu;
});
function callback() {
var smRect = lastSubMenu.getBoundingClientRect();
console.log(smRect);
submenuBackdrop.style.top = smRect.top;// sideHeading.offsetHeight + parseFloat(smStyle.paddingTop) + parseFloat(shStyle.marginTop) + parseFloat(shStyle.marginBottom);
submenuBackdrop.style.left = smRect.left;
submenuBackdrop.style.width = lastSubMenu.offsetWidth;
submenuBackdrop.style.height = lastSubMenu.offsetHeight;
// var sbStyle = window.getComputedStyle(sideButtons);
// sideContent.style.bottom = sideButtons.offsetHeight + parseFloat(smStyle.paddingBottom) + parseFloat(sbStyle.marginTop) + parseFloat(sbStyle.marginBottom);
// console.log(sideHeading.offsetHeight + shStyle.marginTop + shStyle.marginBottom);
// var width =
}
fadeIn(callback, ...fadeIns);
selectedMenuItem = menuitem; selectedMenuItem = menuitem;
} }
@ -35,8 +51,8 @@ function closeContextMenus(...menus) {
function closeMenuItem() { function closeMenuItem() {
if (!selectedMenuItem) return; if (!selectedMenuItem) return;
selectedMenuItem.classList.remove('selectedmenuitem'); selectedMenuItem.classList.remove('selectedmenuitem');
var fadeOuts = []; var fadeOuts = [{element: submenuBackdrop, min: 0, step: 0.1}];
Array.from(selectedMenuItem.getElementsByClassName('submenu')).forEach(subMenu => fadeOuts.push({element: subMenu, min: 0})); Array.from(selectedMenuItem.getElementsByClassName('submenu')).forEach(subMenu => fadeOuts.push({element: subMenu, min: 0, step: 0.1}));
fadeOut(...fadeOuts); fadeOut(...fadeOuts);
selectedMenuItem = null; selectedMenuItem = null;
} }
@ -73,7 +89,7 @@ function openFileDisplay() {
var bStyle = window.getComputedStyle(fileButtons); var bStyle = window.getComputedStyle(fileButtons);
fileContent.style.bottom = fileButtons.offsetHeight + parseFloat(pStyle.paddingBottom) + parseFloat(bStyle.marginTop) + parseFloat(bStyle.marginBottom); fileContent.style.bottom = fileButtons.offsetHeight + parseFloat(pStyle.paddingBottom) + parseFloat(bStyle.marginTop) + parseFloat(bStyle.marginBottom);
} }
fadeIn(callback, {element: filePanel, max: 0.95, step: 0.025}, {element: curtain, max: 0.5, step: 0.025}); fadeIn(callback, {element: filePanel, max: 1, step: 0.025}, {element: curtain, max: 0.5, step: 0.025});
closeMenuItem(); closeMenuItem();
} }
@ -218,7 +234,9 @@ var selection = null; // The currently selected node/edge.
var rightSelection = null; // The currently right clicked node/edge. var rightSelection = null; // The currently right clicked node/edge.
var edgeTo = null; // Target of an edge to be created. var edgeTo = null; // Target of an edge to be created.
var edgeFrom = null; // Start on an edge to be created. var edgeFrom = null; // Start on an edge to be created.
//Utility elements
const curtain = document.getElementById('curtain'); const curtain = document.getElementById('curtain');
const submenuBackdrop = document.getElementById('submenu-backdrop');
//Side Panel //Side Panel
const sidePanel = document.getElementById('sidepanel'); const sidePanel = document.getElementById('sidepanel');
const sideContent = document.getElementById('sidecontent'); const sideContent = document.getElementById('sidecontent');
@ -272,7 +290,7 @@ function select(item) {
sideContent.style.bottom = sideButtons.offsetHeight + parseFloat(spStyle.paddingBottom) + parseFloat(sbStyle.marginTop) + parseFloat(sbStyle.marginBottom); sideContent.style.bottom = sideButtons.offsetHeight + parseFloat(spStyle.paddingBottom) + parseFloat(sbStyle.marginTop) + parseFloat(sbStyle.marginBottom);
// console.log(sideHeading.offsetHeight + shStyle.marginTop + shStyle.marginBottom); // console.log(sideHeading.offsetHeight + shStyle.marginTop + shStyle.marginBottom);
} }
fadeIn(callback, {element: sidePanel, max: 0.95}); fadeIn(callback, {element: sidePanel, max: 1});
} else { } else {
fadeOut({element: sidePanel, min: 0}); fadeOut({element: sidePanel, min: 0});
@ -705,7 +723,7 @@ function getEdgeColour(edge) {
} }
} }
wfGraph wfGraph
.linkDirectionalArrowLength(6) .linkDirectionalArrowLength(4)
.linkDirectionalArrowRelPos(1) .linkDirectionalArrowRelPos(1)
.linkColor(getEdgeColour) .linkColor(getEdgeColour)
.linkCurvature('curvature') .linkCurvature('curvature')