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;
}
.selectedmenuitem .submenu {
/* .selectedmenuitem .submenu {
display: block;
}
} */
.submenu div {
position: relative;
}
.submenu, #sidepanel {
.submenu, #sidepanel, #filepanel {
position:fixed;
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);
@ -127,7 +127,7 @@ body {
/* height: 80%; */
}
#sidebuttons {
#sidebuttons, #filebuttons {
position: absolute;
bottom: 20px;
left: 20px;
@ -226,7 +226,7 @@ a:active {
color: rgb(110, 212, 212);
}
#sidebuttons button {
#sidebuttons button, #filebuttons button {
font-family: 'Inter';
padding: 5 5 5 5;
border-radius: 5px;
@ -238,7 +238,7 @@ a:active {
cursor: pointer;
}
#sidebuttons button:disabled {
#sidebuttons button:disabled, #filebuttons button:disabled {
border-color: rgba(0, 0, 0, 0.267);
background: rgba(120, 120, 120, 0.116);
color: rgba(0, 0, 0, 0.267);
@ -246,7 +246,7 @@ a:active {
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);
transform: scale(1.02);
/* transition: all 100ms ease-in-out 0ms; */
@ -254,7 +254,7 @@ a:active {
/* transition: box-shadow ease-in-out 100ms; */
}
#sidebuttons button:active {
#sidebuttons button:active, #filebuttons button:active {
background: rgba(105, 105, 105, 0.692);
}
@ -267,6 +267,34 @@ label {
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 {
color: black;
background-color: rgb(230, 230, 230);

11
editor.html
View File

@ -9,6 +9,7 @@
<body>
<div id="editor">
<div id="curtain" onclick="closeFileDisplay()"></div>
<div id="settings"> <!--Horizontal bar on top for selecting highlighting modes-->
<div class="menuitem" onclick="openFileMenu(this)">
<button>File</button>
@ -17,7 +18,7 @@
<div class="menucenter">Redo (Ctrl + Y)</div>
<div class="menucenter">Save</div>
<div class="menucenter">Export</div>
<div class="menubottom">Open</div>
<div class="menubottom" onclick="openFileDisplay()">Open</div>
</div>
</div>
<div class="menuitem" onclick="openViewMenu(this)">
@ -62,6 +63,14 @@
<button type="submit" onclick="removeSelection()" style="position: absolute; right: 0px;">Delete</button>
</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 class="menutop" onclick="addState()">
<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) {
edgeTo = edgeFrom = rightSelection = null;
contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none';
closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
if (menuitem === selectedMenuItem) {
closeMenuItem();
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');
var fadeIns = [];
Array.from(menuitem.getElementsByClassName('submenu')).forEach(subMenu => fadeIns.push({element: subMenu, max: 0.95}));
fadeIn(null, ...fadeIns);
selectedMenuItem = menuitem;
}
function closeContextMenus(...menus) {
var items = []
menus.forEach(menu => items.push({element: menu, min: 0, step: 0.1}));
fadeOut(...items);
}
function closeMenuItem() {
if (!selectedMenuItem) return;
selectedMenuItem.classList.remove('selectedmenuitem');
var fadeOuts = [];
Array.from(selectedMenuItem.getElementsByClassName('submenu')).forEach(subMenu => fadeOuts.push({element: subMenu, min: 0}));
fadeOut(...fadeOuts);
selectedMenuItem = null;
}
@ -44,6 +61,60 @@ function openSearchMenu(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
var workflow = {};
const wfGraph = ForceGraph();
@ -77,7 +148,7 @@ var highlightedSources = [];
var highlightedTargets = [];
function selectActor() {
contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none';
closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
edgeFrom = edgeTo = rightSelection = null;
highlightedSources = [];
highlightedTargets = [];
@ -91,7 +162,7 @@ function selectActor() {
}
function selectViewer() {
contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none';
closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
edgeFrom = edgeTo = rightSelection = null;
highlightedSources = [];
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.
*/
function select(item) {
contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none';
closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
edgeFrom = edgeTo = rightSelection = null;
selection = selection === item ? null : item;
if (selection === item) {
while (sideContent.firstChild)
sideContent.removeChild(sideContent.lastChild);
sidePanel.style.display = 'block'
sideHeading.innerHTML = item.name;
var data = document.createElement('div');
var content = generatePanelContent(selection);
content.forEach(c => data.appendChild(c));
sideContent.appendChild(data);
var spStyle = window.getComputedStyle(sidePanel);
var shStyle = window.getComputedStyle(sideHeading);
sideContent.style.top = sideHeading.offsetHeight + parseFloat(spStyle.paddingTop) + parseFloat(shStyle.marginTop) + parseFloat(shStyle.marginBottom);
var sbStyle = window.getComputedStyle(sideButtons);
sideContent.style.bottom = sideButtons.offsetHeight + parseFloat(spStyle.paddingBottom) + parseFloat(sbStyle.marginTop) + parseFloat(sbStyle.marginBottom);
// console.log(sideHeading.offsetHeight + shStyle.marginTop + shStyle.marginBottom);
function callback() {
sideHeading.innerHTML = item.name;
var data = document.createElement('div');
var content = generatePanelContent(selection);
content.forEach(c => data.appendChild(c));
sideContent.appendChild(data);
var spStyle = window.getComputedStyle(sidePanel);
var shStyle = window.getComputedStyle(sideHeading);
sideContent.style.top = sideHeading.offsetHeight + parseFloat(spStyle.paddingTop) + parseFloat(shStyle.marginTop) + parseFloat(shStyle.marginBottom);
var sbStyle = window.getComputedStyle(sideButtons);
sideContent.style.bottom = sideButtons.offsetHeight + parseFloat(spStyle.paddingBottom) + parseFloat(sbStyle.marginTop) + parseFloat(sbStyle.marginBottom);
// console.log(sideHeading.offsetHeight + shStyle.marginTop + shStyle.marginBottom);
}
fadeIn(callback, {element: sidePanel, max: 0.95});
} else {
sidePanel.style.display = 'none';
fadeOut({element: sidePanel, min: 0});
// sidePanel.style.display = 'none';
}
console.log(item);
}
function deselect() {
sidePanel.style.display = 'none';
fadeOut({element: sidePanel, min: 0});
// sidePanel.style.display = 'none';
selection = null;
}
@ -190,12 +266,14 @@ function connect(source, target) {
function markEdgeTo() {
edgeTo = rightSelection;
contextMenuSt.style.display = 'none';
closeContextMenus(contextMenuSt);
// contextMenuSt.style.display = 'none';
}
function markEdgeFrom() {
edgeFrom = rightSelection;
contextMenuSt.style.display = 'none';
closeContextMenus(contextMenuSt);
// contextMenuSt.style.display = 'none';
}
function removeSelection() {
@ -204,7 +282,7 @@ function removeSelection() {
else removeState(selection);
deselect();
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);
if (selection === rightSelection) deselect();
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) {
menu.style.top = y - 25;
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;
}
@ -690,7 +769,8 @@ function openContextMenu(x, y, menu) {
})
.onNodeRightClick((node, event) => {
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;
closeMenuItem();
})
@ -700,12 +780,13 @@ function openContextMenu(x, y, menu) {
})
.onLinkRightClick((edge, event) => {
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;
closeMenuItem()
})
.onBackgroundClick(_ => {
contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none';
closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
deselect();
edgeFrom = edgeTo = rightSelection = null;
closeMenuItem();
@ -713,9 +794,10 @@ function openContextMenu(x, y, menu) {
.onBackgroundRightClick(event => {
newStateCoords = wfGraph.screen2GraphCoords(event.layerX, event.layerY);
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;
closeMenuItem()
closeMenuItem();
})
.autoPauseRedraw(false);