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

added context infos to workspace areas

Browse Source
This commit is contained in:
David Mosbach 2023-05-30 21:57:56 +02:00
parent cd2c624300
commit 59541275c2
3 changed files with 75 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
editor.css
View File

@ -12,7 +12,7 @@ body {
margin: 0 0 0 0; margin: 0 0 0 0;
} }
#settings { #mainmenu {
line-height: 2; line-height: 2;
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: 0px; top: 0px;
@ -67,14 +67,26 @@ body {
cursor: default; cursor: default;
} }
/* .selectedmenuitem .submenu {
display: block;
} */
.submenu div { .submenu div {
position: relative; position: relative;
} }
.menuitem #filename {
position: fixed;
right: 10px;
padding: 10 0 10 0;
margin: 0 10 0 10;
text-align: center;
font-size: 1em;
font-family: 'Inter';
font-weight: normal;
color: rgba(120, 120, 120, 0.668);
background-color: transparent;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
cursor: default;
}
.submenu, #sidepanel, #filepanel { .submenu, #sidepanel, #filepanel {
position:fixed; position:fixed;
background-color: rgb(230, 230, 230); background-color: rgb(230, 230, 230);
@ -98,7 +110,21 @@ body {
width: 100%; width: 100%;
} }
#sideheader svg { .sidecontenttype {
font-family: 'Inter';
float: left;
line-height: 2;
position: absolute;
top: 10px;
left: 20px;
color: rgba(120, 120, 120, 0.538);
}
#sidecontentedge, #sidecontentnode {
display: none;
}
.close {
position: absolute; position: absolute;
top: 20px; top: 20px;
right: 20px; right: 20px;

32
editor.html
View File

@ -11,13 +11,14 @@
<body> <body>
<div id="editor"> <div id="editor">
<div id="curtain" onclick="closeFileDisplay()"></div> <div id="curtain" onclick="closeFileDisplay()"></div>
<div id="settings"> <!--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>
<div id="filemenu" class="submenu" onclick="event.stopPropagation()"> <div id="filemenu" class="submenu" onclick="event.stopPropagation()">
<div class="menutop">Undo (Ctrl + Z)</div> <div class="menutop">Undo (Ctrl + Z)</div>
<div class="menucenter">Redo (Ctrl + Y)</div> <div class="menucenter">Redo (Ctrl + Y)</div>
<div class="menucenter">Save</div> <div class="menucenter">Save (Ctrl + S)</div>
<div class="menucenter">Save As</div>
<div class="menucenter">Export</div> <div class="menucenter">Export</div>
<div class="menubottom" onclick="openFileDisplay()">Open</div> <div class="menubottom" onclick="openFileDisplay()">Open</div>
</div> </div>
@ -37,21 +38,40 @@
</div> </div>
<div class="menuitem" onclick="openSettingsMenu(this)"> <div class="menuitem" onclick="openSettingsMenu(this)">
<button>Settings</button> <button>Settings</button>
<div class="submenu">FOO</div> <div class="submenu">Dark mode, visualisation settings, language</div>
</div> </div>
<div class="menuitem" onclick="openAboutMenu(this)"> <div class="menuitem" onclick="openAboutMenu(this)">
<button>About</button> <button>About</button>
<div class="submenu">FOO</div> <div class="submenu">Visualiser & editor for Uni2work workflows</div>
</div> </div>
<div class="menuitem" onclick="openSearchMenu(this)"> <div class="menuitem" onclick="openSearchMenu(this)">
<button>Search</button> <button>Search</button>
<div class="submenu">FOO</div> <div class="submenu">Search for states, edges and their contents</div>
</div>
<div class="menuitem">
<button id="filename"></button>
</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-->
<div id="sideheader"> <div id="sideheader">
<div id="sidecontentedge" class="sidecontenttype">
<svg height="10" width="28" xmlns="http://www.w3.org/2000/svg" onclick="deselect()">
<circle cx="4" cy="4" r="3" stroke="rgba(120, 120, 120, 0.538)" stroke-width="2" fill="none" />
<polyline points="8,4 18,4" style="fill:none;stroke:rgba(120, 120, 120, 0.538);stroke-width:2" stroke-linecap="round" />
<circle cx="22" cy="4" r="3" stroke="rgba(120, 120, 120, 0.538)" stroke-width="2" fill="none" /> />
</svg>
Edge
</div>
<div id="sidecontentnode" class="sidecontenttype">
<svg height="10" width="22" xmlns="http://www.w3.org/2000/svg" onclick="deselect()">
<polyline points="2,4 7,4" style="fill:none;stroke:rgba(120, 120, 120, 0.538);stroke-width:2" stroke-linecap="round" />
<circle cx="11" cy="4" r="3" stroke="rgba(120, 120, 120, 0.538)" stroke-width="2" fill="none" />
<polyline points="15,4 20,4" style="fill:none;stroke:rgba(120, 120, 120, 0.538);stroke-width:2" stroke-linecap="round" />
</svg>
Node
</div>
<h1 id="sideheading">Hello</h1> <h1 id="sideheading">Hello</h1>
<svg height="15" width="15" xmlns="http://www.w3.org/2000/svg" onclick="deselect()"> <svg class="close" height="15" width="15" xmlns="http://www.w3.org/2000/svg" onclick="deselect()">
<polyline points="1,1 14,14" style="fill:none;stroke:rgb(183, 76, 76);stroke-width:2" stroke-linecap="round" /> <polyline points="1,1 14,14" style="fill:none;stroke:rgb(183, 76, 76);stroke-width:2" stroke-linecap="round" />
<polyline points="14,1 1,14" style="fill:none;stroke:rgb(183, 76, 76);stroke-width:2" stroke-linecap="round" /> <polyline points="14,1 1,14" style="fill:none;stroke:rgb(183, 76, 76);stroke-width:2" stroke-linecap="round" />
X X

23
editor.js
View File

@ -138,7 +138,8 @@ function defineOnClick(item, url, title) {
workflow[key] = data[key]; workflow[key] = data[key];
prepareWorkflow(); prepareWorkflow();
updateGraph(); updateGraph();
document.title = title; document.getElementById('filename').innerText = title;
document.title = title + ' | Editor';
}); });
}); });
} }
@ -151,7 +152,7 @@ fetch('http://localhost:8080/index.json')
var item = document.createElement('div'); var item = document.createElement('div');
item.innerHTML = '<h3>' + workflowFiles[i].name + '</h3>' + workflowFiles[i].description; item.innerHTML = '<h3>' + workflowFiles[i].name + '</h3>' + workflowFiles[i].description;
var url = 'http://localhost:8080' + workflowFiles[i].url; var url = 'http://localhost:8080' + workflowFiles[i].url;
defineOnClick(item, url, workflowFiles[i].name + ' | Editor'); defineOnClick(item, url, workflowFiles[i].name);
fileContent.appendChild(item); fileContent.appendChild(item);
} }
var url = 'http://localhost:8080' + workflowFiles[0].url; var url = 'http://localhost:8080' + workflowFiles[0].url;
@ -159,6 +160,7 @@ fetch('http://localhost:8080/index.json')
}) })
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
document.getElementById('filename').innerText = workflowFiles[0].name;
document.title = workflowFiles[0].name + ' | Editor'; document.title = workflowFiles[0].name + ' | Editor';
for (var key in data) for (var key in data)
workflow[key] = data[key]; workflow[key] = data[key];
@ -218,10 +220,12 @@ 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.
const curtain = document.getElementById('curtain'); const curtain = document.getElementById('curtain');
//Side Panel //Side Panel
const sidePanel = document.getElementById('sidepanel'); const sidePanel = document.getElementById('sidepanel');
const sideContent = document.getElementById('sidecontent'); const sideContent = document.getElementById('sidecontent');
const sideHeading = document.getElementById('sideheading'); const sideHeading = document.getElementById('sideheading');
const sideButtons = document.getElementById('sidebuttons'); const sideButtons = document.getElementById('sidebuttons');
const sideInfoEdge = document.getElementById('sidecontentedge');
const sideInfoNode = document.getElementById('sidecontentnode');
//File panel //File panel
const filePanel = document.getElementById('filepanel'); const filePanel = document.getElementById('filepanel');
const fileHeading = document.getElementById('fileheading'); const fileHeading = document.getElementById('fileheading');
@ -249,6 +253,13 @@ function select(item) {
while (sideContent.firstChild) while (sideContent.firstChild)
sideContent.removeChild(sideContent.lastChild); sideContent.removeChild(sideContent.lastChild);
function callback() { function callback() {
if (item.actionData) {
sideInfoEdge.style.display = 'block';
sideInfoNode.style.display = 'none';
} else {
sideInfoEdge.style.display = 'none';
sideInfoNode.style.display = 'block';
}
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);