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

added full navigation menu

Browse Source
This commit is contained in:
David Mosbach 2023-05-29 00:33:41 +02:00
parent 411af0bd2f
commit d4008c812f
3 changed files with 166 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
editor.css
View File

@ -1,11 +1,3 @@
/* .body {
margin: 50px 50px 50px 50px;
}
#editor {
border: 10px solid red;
} */
body { body {
margin: 0 0 0 0; margin: 0 0 0 0;
} }
@ -16,34 +8,71 @@ body {
top: 0px; top: 0px;
width: 100%; width: 100%;
position: fixed; position: fixed;
padding: 8 8 8 8; /* padding: 8 8 8 8; */
padding-left: 10px;
background-color: rgb(230, 230, 230); background-color: rgb(230, 230, 230);
opacity: 0.95; opacity: 0.95;
z-index: 2; z-index: 2;
float: left; float: left;
overflow: auto; overflow: auto;
align-items: center;
} }
#settings div { .menuitem {
width: fit-content;
position: relative;
overflow: hidden;
float: left; float: left;
margin-right: 20;
} }
#sidepanel { .menuitem button {
padding: 10 0 10 0;
margin: 0 10 0 10;
font-size: 1em;
background-color: transparent;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: none;
border-right: none;
transition: all 200ms ease-out 0ms;
}
.menuitem:hover button {
border-bottom: 4px solid rgb(75, 151, 151);
}
.menuitem:active button, .selectedmenuitem button {
border-bottom: 4px solid rgb(75, 151, 151);
color: rgb(75, 151, 151);
}
.submenu {
width: fit-content;
position: fixed;
top: 60px;
overflow: hidden;
padding: 20 20 20 20;
display: none;
}
.selectedmenuitem .submenu {
display: block;
}
.submenu div {
position: relative;
}
.submenu, #sidepanel {
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);
top: 80px;
bottom:30px;
right:20px;
width: 500px;
opacity: 0.95; opacity: 0.95;
padding: 20px; padding: 20px;
border-radius: 20px; border-radius: 15px;
}
#sidepanel {
top: 70px;
bottom:20px;
right:20px;
width: 500px;
z-index:10; z-index:10;
overflow: hidden; overflow: hidden;
display: none; display: none;
@ -101,7 +130,7 @@ body {
padding: 5px; padding: 5px;
background-color: rgb(230, 230, 230); background-color: rgb(230, 230, 230);
opacity: 0.95; opacity: 0.95;
transition: background-color 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;
user-select: none; user-select: none;
@ -157,22 +186,37 @@ a:active {
color: rgb(110, 212, 212); color: rgb(110, 212, 212);
} }
button { #sidebuttons button {
padding: 5 5 5 5; padding: 5 5 5 5;
border-radius: 5px; border-radius: 5px;
border-style: solid; border-style: solid;
border-color: transparent; border-color: transparent;
background: rgba(120, 120, 120, 0.555); background: rgba(120, 120, 120, 0.555);
color: white; color: white;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.082), 0 2px 10px 0 rgba(0, 0, 0, 0.068);
transition: all 100ms ease-in-out 0ms;
cursor: pointer;
} }
button:disabled { #sidebuttons 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);
border-width: 1px; border-width: 1px;
cursor: not-allowed;
} }
select, option { #sidebuttons button:hover {
transform: scale(1.02);
/* transition: all 100ms ease-in-out 0ms; */
background: rgba(120, 120, 120, 0.651);
/* transition: box-shadow ease-in-out 100ms; */
}
#sidebuttons button:active {
background: rgba(105, 105, 105, 0.692);
}
select {
padding: 2 2 2 2; padding: 2 2 2 2;
} }

39
editor.html
View File

@ -11,13 +11,34 @@
<body> <body>
<div id="editor"> <div id="editor">
<div id="settings"> <!--Horizontal bar on top for selecting highlighting modes--> <div id="settings"> <!--Horizontal bar on top for selecting highlighting modes-->
<div> <div class="menuitem" onclick="openFileMenu(this)">
<label for="actor">Highlight actor: </label> <button>File</button>
<select name="actor" id="actor" onchange="selectActor();"></select> <div class="submenu">FOO</div>
</div> </div>
<div> <div class="menuitem" onclick="openViewMenu(this)">
<label for="viewer">Highlight viewer: </label> <button>View</button>
<select name="viewer" id="viewer" onchange="selectViewer();"></select> <div class="submenu" onclick="event.stopPropagation()">
<div>
<label for="actor">Highlight actor: </label>
<select name="actor" id="actor" onchange="selectActor();"></select>
</div>
<div>
<label for="viewer">Highlight viewer: </label>
<select name="viewer" id="viewer" onchange="selectViewer();"></select>
</div>
</div>
</div>
<div class="menuitem" onclick="openSettingsMenu(this)">
<button>Settings</button>
<div class="submenu">FOO</div>
</div>
<div class="menuitem" onclick="openAboutMenu(this)">
<button>About</button>
<div class="submenu">FOO</div>
</div>
<div class="menuitem" onclick="openSearchMenu(this)">
<button>Search</button>
<div class="submenu">FOO</div>
</div> </div>
</div> </div>
<div id="sidepanel"> <!--Pop-up panel on the right side for displaying/editing the selected state/action--> <div id="sidepanel"> <!--Pop-up panel on the right side for displaying/editing the selected state/action-->
@ -31,9 +52,9 @@
</div> </div>
<div id="sidecontent"></div> <div id="sidecontent"></div>
<div id="sidebuttons"> <div id="sidebuttons">
<button type="submit" disabled="disabled">Save</button> <button type="submit">Save</button>
<button type="reset" disabled="disabled">Cancel</button> <button type="reset" onclick="deselect()">Cancel</button>
<button type="submit" disabled="disabled" 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="ctmenubg" class="contextmenu"> <!--Context menu displayed after right-clicking the background--> <div id="ctmenubg" class="contextmenu"> <!--Context menu displayed after right-clicking the background-->

68
editor.js
View File

@ -1,3 +1,51 @@
// Menu bar
var selectedMenuItem = null;
/**
*
* @param {HTMLElement} menuitem
*/
function openMenuItem(menuitem) {
edgeTo = edgeFrom = rightSelection = null;
contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none';
if (menuitem === selectedMenuItem) {
closeMenuItem();
return;
}
Array.from(document.getElementsByClassName('selectedmenuitem')).forEach(other => other.classList.remove('selectedmenuitem'));
menuitem.classList.add('selectedmenuitem');
selectedMenuItem = menuitem;
}
function closeMenuItem() {
if (!selectedMenuItem) return;
selectedMenuItem.classList.remove('selectedmenuitem');
selectedMenuItem = null;
}
function openFileMenu(menuitem) {
openMenuItem(menuitem);
}
function openViewMenu(menuitem) {
openMenuItem(menuitem);
}
function openSettingsMenu(menuitem) {
openMenuItem(menuitem);
}
function openAboutMenu(menuitem) {
openMenuItem(menuitem);
}
function openSearchMenu(menuitem) {
openMenuItem(menuitem);
}
// Workflow processing
var workflow = {} var workflow = {}
// fetch('./test.json') // fetch('./test.json')
@ -394,6 +442,16 @@ function markEdgeFrom() {
contextMenuSt.style.display = 'none'; contextMenuSt.style.display = 'none';
} }
function removeSelection() {
if (selection) {
if (selection.actionData) removeAction(selection);
else removeState(selection);
deselect();
edgeFrom = edgeTo = rightSelection = null;
contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none';
}
}
function removeRightSelection() { function removeRightSelection() {
if (rightSelection) { if (rightSelection) {
if (rightSelection.actionData) removeAction(rightSelection); if (rightSelection.actionData) removeAction(rightSelection);
@ -631,28 +689,36 @@ const Graph = ForceGraph()
connect(node, edgeTo); connect(node, edgeTo);
edgeTo = null; edgeTo = null;
} else select(node); } else select(node);
closeMenuItem();
}) })
.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'; contextMenuBg.style.display = contextMenuEd.style.display = 'none';
rightSelection = node; rightSelection = node;
closeMenuItem();
})
.onLinkClick((edge, _) => {
select(edge);
closeMenuItem();
}) })
.onLinkClick((edge, _) => select(edge))
.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'; contextMenuBg.style.display = contextMenuSt.style.display = 'none';
rightSelection = edge; rightSelection = edge;
closeMenuItem()
}) })
.onBackgroundClick(_ => { .onBackgroundClick(_ => {
contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none'; contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none';
deselect(); deselect();
edgeFrom = edgeTo = rightSelection = null; edgeFrom = edgeTo = rightSelection = null;
closeMenuItem();
}) })
.onBackgroundRightClick(event => { .onBackgroundRightClick(event => {
newStateCoords = Graph.screen2GraphCoords(event.layerX, event.layerY); newStateCoords = Graph.screen2GraphCoords(event.layerX, event.layerY);
openContextMenu(event.layerX, event.layerY, contextMenuBg); openContextMenu(event.layerX, event.layerY, contextMenuBg);
contextMenuEd.style.display = contextMenuSt.style.display = 'none'; contextMenuEd.style.display = contextMenuSt.style.display = 'none';
edgeFrom = edgeTo = rightSelection = null; edgeFrom = edgeTo = rightSelection = null;
closeMenuItem()
}) })
.autoPauseRedraw(false); .autoPauseRedraw(false);