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

added fade in/out animations

Browse Source
This commit is contained in:
David Mosbach 2023-05-29 22:16:53 +02:00
parent b99dda2e85
commit aee488278f
3 changed files with 157 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
editor.css
View File

@ -67,15 +67,15 @@ body {
cursor: default; cursor: default;
} }
.selectedmenuitem .submenu { /* .selectedmenuitem .submenu {
display: block; display: block;
} } */
.submenu div { .submenu div {
position: relative; position: relative;
} }
.submenu, #sidepanel { .submenu, #sidepanel, #filepanel {
position:fixed; position:fixed;
background-color: rgb(230, 230, 230); background-color: rgb(230, 230, 230);
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);
@ -127,7 +127,7 @@ body {
/* height: 80%; */ /* height: 80%; */
} }
#sidebuttons { #sidebuttons, #filebuttons {
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;
left: 20px; left: 20px;
@ -226,7 +226,7 @@ a:active {
color: rgb(110, 212, 212); color: rgb(110, 212, 212);
} }
#sidebuttons button { #sidebuttons button, #filebuttons button {
font-family: 'Inter'; font-family: 'Inter';
padding: 5 5 5 5; padding: 5 5 5 5;
border-radius: 5px; border-radius: 5px;
@ -238,7 +238,7 @@ a:active {
cursor: pointer; cursor: pointer;
} }
#sidebuttons button:disabled { #sidebuttons button:disabled, #filebuttons button:disabled {
border-color: rgba(0, 0, 0, 0.267); border-color: rgba(0, 0, 0, 0.267);
background: rgba(120, 120, 120, 0.116); background: rgba(120, 120, 120, 0.116);
color: rgba(0, 0, 0, 0.267); color: rgba(0, 0, 0, 0.267);
@ -246,7 +246,7 @@ a:active {
cursor: not-allowed; cursor: not-allowed;
} }
#sidebuttons button:hover { #sidebuttons button:hover, #filebuttons button:hover {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.082), 0 2px 10px 0 rgba(0, 0, 0, 0.068); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.082), 0 2px 10px 0 rgba(0, 0, 0, 0.068);
transform: scale(1.02); transform: scale(1.02);
/* transition: all 100ms ease-in-out 0ms; */ /* transition: all 100ms ease-in-out 0ms; */
@ -254,7 +254,7 @@ a:active {
/* transition: box-shadow ease-in-out 100ms; */ /* transition: box-shadow ease-in-out 100ms; */
} }
#sidebuttons button:active { #sidebuttons button:active, #filebuttons button:active {
background: rgba(105, 105, 105, 0.692); background: rgba(105, 105, 105, 0.692);
} }
@ -267,6 +267,34 @@ label {
font-family: 'Inter'; font-family: 'Inter';
} }
#filepanel {
top: 20%;
bottom:20%;
left: 20%;
right:20%;
z-index:100;
overflow: hidden;
display: none;
}
#fileheading {
font-family: 'Inter';
text-align: center;
font-style: normal;
}
#curtain {
z-index: 50;
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: black;
opacity: 0%;
display: none;
}
.force-graph-container .graph-tooltip { .force-graph-container .graph-tooltip {
color: black; color: black;
background-color: rgb(230, 230, 230); background-color: rgb(230, 230, 230);

11
editor.html
View File

@ -9,6 +9,7 @@
<body> <body>
<div id="editor"> <div id="editor">
<div id="curtain" onclick="closeFileDisplay()"></div>
<div id="settings"> <!--Horizontal bar on top for selecting highlighting modes--> <div id="settings"> <!--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>
@ -17,7 +18,7 @@
<div class="menucenter">Redo (Ctrl + Y)</div> <div class="menucenter">Redo (Ctrl + Y)</div>
<div class="menucenter">Save</div> <div class="menucenter">Save</div>
<div class="menucenter">Export</div> <div class="menucenter">Export</div>
<div class="menubottom">Open</div> <div class="menubottom" onclick="openFileDisplay()">Open</div>
</div> </div>
</div> </div>
<div class="menuitem" onclick="openViewMenu(this)"> <div class="menuitem" onclick="openViewMenu(this)">
@ -62,6 +63,14 @@
<button type="submit" onclick="removeSelection()" style="position: absolute; right: 0px;">Delete</button> <button type="submit" onclick="removeSelection()" style="position: absolute; right: 0px;">Delete</button>
</div> </div>
</div> </div>
<div id="filepanel"> <!--Pop-up panel covering the center of the screen for file interactions-->
<h2 id="fileheading">Hello</h2>
<div id="filecontent"></div>
<div id="filebuttons">
<button type="submit">Load</button>
<button type="reset" onclick="closeFileDisplay()">Cancel</button>
</div>
</div>
<div id="ctmenubg" class="contextmenu"> <!--Context menu displayed after right-clicking the background--> <div id="ctmenubg" class="contextmenu"> <!--Context menu displayed after right-clicking the background-->
<div class="menutop" onclick="addState()"> <div class="menutop" onclick="addState()">
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg"> <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">

140
editor.js
View File

@ -8,19 +8,36 @@ var selectedMenuItem = null;
*/ */
function openMenuItem(menuitem) { function openMenuItem(menuitem) {
edgeTo = edgeFrom = rightSelection = null; edgeTo = edgeFrom = rightSelection = null;
contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none'; closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
if (menuitem === selectedMenuItem) { if (menuitem === selectedMenuItem) {
closeMenuItem(); closeMenuItem();
return; return;
} }
Array.from(document.getElementsByClassName('selectedmenuitem')).forEach(other => other.classList.remove('selectedmenuitem')); var fadeOuts = [];
Array.from(document.getElementsByClassName('selectedmenuitem')).forEach(other => {
other.classList.remove('selectedmenuitem');
Array.from(other.getElementsByClassName('submenu')).forEach(subMenu => fadeOuts.push({element: subMenu, min: 0}));
});
fadeOut(...fadeOuts);
menuitem.classList.add('selectedmenuitem'); menuitem.classList.add('selectedmenuitem');
var fadeIns = [];
Array.from(menuitem.getElementsByClassName('submenu')).forEach(subMenu => fadeIns.push({element: subMenu, max: 0.95}));
fadeIn(null, ...fadeIns);
selectedMenuItem = menuitem; selectedMenuItem = menuitem;
} }
function closeContextMenus(...menus) {
var items = []
menus.forEach(menu => items.push({element: menu, min: 0, step: 0.1}));
fadeOut(...items);
}
function closeMenuItem() { function closeMenuItem() {
if (!selectedMenuItem) return; if (!selectedMenuItem) return;
selectedMenuItem.classList.remove('selectedmenuitem'); selectedMenuItem.classList.remove('selectedmenuitem');
var fadeOuts = [];
Array.from(selectedMenuItem.getElementsByClassName('submenu')).forEach(subMenu => fadeOuts.push({element: subMenu, min: 0}));
fadeOut(...fadeOuts);
selectedMenuItem = null; selectedMenuItem = null;
} }
@ -44,6 +61,60 @@ function openSearchMenu(menuitem) {
openMenuItem(menuitem); openMenuItem(menuitem);
} }
document.getElementById('filepanel').style.opacity = 0;
function openFileDisplay() {
var panel = document.getElementById('filepanel');
var curtain = document.getElementById('curtain');
fadeIn(null, {element: panel, max: 1, step: 0.025}, {element: curtain, max: 0.5, step: 0.025});
closeMenuItem();
}
function closeFileDisplay() {
var panel = document.getElementById('filepanel');
var curtain = document.getElementById('curtain');
fadeOut({element: panel, min: 0, step: 0.025}, {element: curtain, min: 0, step: 0.025});
}
function fadeIn(callback, ...items) {
requestAnimationFrame(() => {
items.forEach(i => i.element.style.display = 'block');
if (callback) callback();
});
function fade() {
var proceed = false;
items.forEach(i => {
var newOpacity = (parseFloat(i.element.style.opacity) || 0) + (i.step || 0.05);
if (newOpacity <= i.max) {
i.element.style.opacity = newOpacity;
// console.log(i.max, i.element.style.opacity)
proceed = true;
} else if ((parseFloat(i.element.style.opacity) || 0) > i.max) i.element.style.opacity = i.max;
});
if (proceed) requestAnimationFrame(fade);
}
requestAnimationFrame(fade);
}
function fadeOut(...items) {
function fade() {
var proceed = false;
items.forEach(i => {
var newOpacity = (parseFloat(i.element.style.opacity) || 0) - (i.step || 0.05);
if (newOpacity >= i.min) {
i.element.style.opacity = newOpacity;
// console.log(i.max, i.element.style.opacity)
proceed = true;
} else {
if ((parseFloat(i.element.style.opacity) || 0) < i.min) i.element.style.opacity = i.min;
i.element.style.display = 'none';
}
});
if (proceed) requestAnimationFrame(fade);
}
requestAnimationFrame(fade);
}
// Workflow processing // Workflow processing
var workflow = {}; var workflow = {};
const wfGraph = ForceGraph(); const wfGraph = ForceGraph();
@ -77,7 +148,7 @@ var highlightedSources = [];
var highlightedTargets = []; var highlightedTargets = [];
function selectActor() { function selectActor() {
contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none'; closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
edgeFrom = edgeTo = rightSelection = null; edgeFrom = edgeTo = rightSelection = null;
highlightedSources = []; highlightedSources = [];
highlightedTargets = []; highlightedTargets = [];
@ -91,7 +162,7 @@ function selectActor() {
} }
function selectViewer() { function selectViewer() {
contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none'; closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
edgeFrom = edgeTo = rightSelection = null; edgeFrom = edgeTo = rightSelection = null;
highlightedSources = []; highlightedSources = [];
highlightedTargets = []; highlightedTargets = [];
@ -126,32 +197,37 @@ var newStateCoords = {'x': 0, 'y': 0}; //Initial coordinates of the next new sta
* @param {*} item The node or edge to select. * @param {*} item The node or edge to select.
*/ */
function select(item) { function select(item) {
contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none'; closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
edgeFrom = edgeTo = rightSelection = null; edgeFrom = edgeTo = rightSelection = null;
selection = selection === item ? null : item; selection = selection === item ? null : item;
if (selection === item) { if (selection === item) {
while (sideContent.firstChild) while (sideContent.firstChild)
sideContent.removeChild(sideContent.lastChild); sideContent.removeChild(sideContent.lastChild);
sidePanel.style.display = 'block' function callback() {
sideHeading.innerHTML = item.name; sideHeading.innerHTML = item.name;
var data = document.createElement('div'); var data = document.createElement('div');
var content = generatePanelContent(selection); var content = generatePanelContent(selection);
content.forEach(c => data.appendChild(c)); content.forEach(c => data.appendChild(c));
sideContent.appendChild(data); sideContent.appendChild(data);
var spStyle = window.getComputedStyle(sidePanel); var spStyle = window.getComputedStyle(sidePanel);
var shStyle = window.getComputedStyle(sideHeading); var shStyle = window.getComputedStyle(sideHeading);
sideContent.style.top = sideHeading.offsetHeight + parseFloat(spStyle.paddingTop) + parseFloat(shStyle.marginTop) + parseFloat(shStyle.marginBottom); sideContent.style.top = sideHeading.offsetHeight + parseFloat(spStyle.paddingTop) + parseFloat(shStyle.marginTop) + parseFloat(shStyle.marginBottom);
var sbStyle = window.getComputedStyle(sideButtons); var sbStyle = window.getComputedStyle(sideButtons);
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});
} else { } else {
sidePanel.style.display = 'none'; fadeOut({element: sidePanel, min: 0});
// sidePanel.style.display = 'none';
} }
console.log(item); console.log(item);
} }
function deselect() { function deselect() {
sidePanel.style.display = 'none'; fadeOut({element: sidePanel, min: 0});
// sidePanel.style.display = 'none';
selection = null; selection = null;
} }
@ -190,12 +266,14 @@ function connect(source, target) {
function markEdgeTo() { function markEdgeTo() {
edgeTo = rightSelection; edgeTo = rightSelection;
contextMenuSt.style.display = 'none'; closeContextMenus(contextMenuSt);
// contextMenuSt.style.display = 'none';
} }
function markEdgeFrom() { function markEdgeFrom() {
edgeFrom = rightSelection; edgeFrom = rightSelection;
contextMenuSt.style.display = 'none'; closeContextMenus(contextMenuSt);
// contextMenuSt.style.display = 'none';
} }
function removeSelection() { function removeSelection() {
@ -204,7 +282,7 @@ function removeSelection() {
else removeState(selection); else removeState(selection);
deselect(); deselect();
edgeFrom = edgeTo = rightSelection = null; edgeFrom = edgeTo = rightSelection = null;
contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none'; closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
} }
} }
@ -214,7 +292,7 @@ function removeRightSelection() {
else removeState(rightSelection); else removeState(rightSelection);
if (selection === rightSelection) deselect(); if (selection === rightSelection) deselect();
edgeFrom = edgeTo = rightSelection = null; edgeFrom = edgeTo = rightSelection = null;
contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none'; closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
} }
} }
@ -557,7 +635,8 @@ workflow.states.forEach(state => {
function openContextMenu(x, y, menu) { function openContextMenu(x, y, menu) {
menu.style.top = y - 25; menu.style.top = y - 25;
menu.style.left = x + 20; menu.style.left = x + 20;
menu.style.display = 'block'; fadeIn(null, {element: menu, max: 1, step: 0.1})
// menu.style.display = 'block';
edgeFrom = edgeTo = null; edgeFrom = edgeTo = null;
} }
@ -690,7 +769,8 @@ function openContextMenu(x, y, menu) {
}) })
.onNodeRightClick((node, event) => { .onNodeRightClick((node, event) => {
openContextMenu(event.layerX, event.layerY, contextMenuSt); openContextMenu(event.layerX, event.layerY, contextMenuSt);
contextMenuBg.style.display = contextMenuEd.style.display = 'none'; closeContextMenus(contextMenuBg, contextMenuEd);
// contextMenuBg.style.display = contextMenuEd.style.display = 'none';
rightSelection = node; rightSelection = node;
closeMenuItem(); closeMenuItem();
}) })
@ -700,12 +780,13 @@ function openContextMenu(x, y, menu) {
}) })
.onLinkRightClick((edge, event) => { .onLinkRightClick((edge, event) => {
openContextMenu(event.layerX, event.layerY, contextMenuEd); openContextMenu(event.layerX, event.layerY, contextMenuEd);
contextMenuBg.style.display = contextMenuSt.style.display = 'none'; closeContextMenus(contextMenuBg, contextMenuSt);
// contextMenuBg.style.display = contextMenuSt.style.display = 'none';
rightSelection = edge; rightSelection = edge;
closeMenuItem() closeMenuItem()
}) })
.onBackgroundClick(_ => { .onBackgroundClick(_ => {
contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none'; closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
deselect(); deselect();
edgeFrom = edgeTo = rightSelection = null; edgeFrom = edgeTo = rightSelection = null;
closeMenuItem(); closeMenuItem();
@ -713,9 +794,10 @@ function openContextMenu(x, y, menu) {
.onBackgroundRightClick(event => { .onBackgroundRightClick(event => {
newStateCoords = wfGraph.screen2GraphCoords(event.layerX, event.layerY); newStateCoords = wfGraph.screen2GraphCoords(event.layerX, event.layerY);
openContextMenu(event.layerX, event.layerY, contextMenuBg); openContextMenu(event.layerX, event.layerY, contextMenuBg);
contextMenuEd.style.display = contextMenuSt.style.display = 'none'; closeContextMenus(contextMenuEd, contextMenuSt);
// contextMenuEd.style.display = contextMenuSt.style.display = 'none';
edgeFrom = edgeTo = rightSelection = null; edgeFrom = edgeTo = rightSelection = null;
closeMenuItem() closeMenuItem();
}) })
.autoPauseRedraw(false); .autoPauseRedraw(false);