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

added dark mode

Browse Source
This commit is contained in:
David Mosbach 2023-06-03 02:56:36 +02:00
parent 4d19c3f24b
commit 6b03475f13
3 changed files with 285 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
editor.css
View File

@ -18,13 +18,11 @@ body {
top: 0px;
width: 100%;
position: fixed;
/* padding: 8 8 8 8; */
padding-left: 10px;
background-color: rgba(230, 230, 230, 0.8);
/* opacity: 0.95; */
/* background-color: rgba(230, 230, 230, 0.8); */
/* transition: all 100ms ease-out 50ms; */
z-index: 5;
float: left;
/* overflow: auto; */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
@ -47,6 +45,7 @@ body {
border-right: none;
transition: all 200ms ease-out 0ms;
cursor: pointer;
color: inherit;
}
.menuitem:hover button {
@ -82,7 +81,7 @@ body {
font-size: 1em;
font-family: 'Inter';
font-weight: normal;
color: rgba(120, 120, 120, 0.668);
/* color: rgba(120, 120, 120, 0.6); */
background-color: transparent;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
@ -91,9 +90,9 @@ body {
.submenu, #sidepanel, #filepanel {
position:fixed;
background-color: rgba(230, 230, 230, 0.8);
/* 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);
/* opacity: 0.95; */
/* transition: all 100ms ease-out 50ms; */
padding: 20px;
border-radius: 15px;
backdrop-filter: blur(10px);
@ -125,7 +124,7 @@ body {
position: absolute;
top: 10px;
left: 20px;
color: rgba(120, 120, 120, 0.538);
/* color: rgba(120, 120, 120, 0.538); */
}
#sidecontentedge, #sidecontentnode {
@ -181,8 +180,11 @@ body {
}
.contextmenu div, #filemenu div {
padding: 5px;
background-color: rgba(230, 230, 230, 0.8);
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
/* background-color: rgba(230, 230, 230, 0.8); */
/* opacity: 0.95; */
transition: all 100ms ease-out 50ms;
-webkit-user-select: none;
@ -201,14 +203,22 @@ body {
border-bottom-right-radius: 5px;
}
.contextmenu div:hover, #filemenu div:hover {
.contextmenu .menu-lightmode:hover, #filemenu .menu-lightmode:hover {
background-color: rgb(240, 240, 240, 0.8);
}
.contextmenu div:active, #filemenu div:active {
.contextmenu .menu-lightmode:active, #filemenu .menu-lightmode:active {
background-color: rgb(250, 250, 250, 0.8);
}
.contextmenu .menu-darkmode:hover, #filemenu .menu-darkmode:hover {
background-color: rgba(35, 35, 35, 0.8);
}
.contextmenu .menu-darkmode:active, #filemenu .menu-darkmode:active {
background-color: rgba(45, 45, 45, 0.8);
}
#filemenu .menutop {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
@ -233,6 +243,7 @@ body {
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
@ -388,9 +399,67 @@ label {
z-index: 3;
}
#settings-table {
line-height: 2;
color: inherit;
text-align: left;
}
#settings-table tr td:first-child {
padding-right: 10px;
}
.toggle {
position: relative;
display: inline-block;
width: 30px;
height: 20px;
}
.toggle input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(120, 120, 120, 0.5);
border-radius: 15px;
-webkit-transition: 200ms;
transition: 200ms;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 3px;
bottom: 3px;
background-color: white;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 15px;
-webkit-transition: 200ms;
transition: 200ms;
}
input:checked + .toggle-slider {
background-color: rgb(75, 151, 151);
}
input:checked + .toggle-slider:before {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
}
.force-graph-container .graph-tooltip {
color: black;
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);
/* opacity: 0.95; */
backdrop-filter: blur(10px);
@ -400,4 +469,38 @@ label {
border-radius: 5px;
padding-left: 5px;
padding-right: 5px;
}
.menu-lightmode, .force-graph-container .menu-lightmode {
color: black;
background-color: rgba(230, 230, 230, 0.8);
}
.menu-darkmode, .force-graph-container .menu-darkmode {
color: white;
background-color: rgba(25, 25, 25, 0.8);
}
.menu-lightmode svg {
stroke: rgb(63, 63, 63);
}
.menu-darkmode svg {
stroke: rgb(192, 192, 192);
}
.contenttype-lightmode, .menuitem .contenttype-lightmode {
color: rgba(120, 120, 120, 0.6);
}
.contenttype-darkmode, .menuitem .contenttype-darkmode {
color: rgba(135, 135, 135, 0.6);
}
.contenttype-lightmode svg {
stroke: rgba(120, 120, 120, 0.6);
}
.contenttype-darkmode svg {
stroke: rgba(135, 135, 135, 0.6);
}

164
editor.html
View File

@ -12,21 +12,21 @@
<div id="editor">
<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" class="menu-lightmode"> <!--Horizontal bar on top for selecting highlighting modes-->
<div class="menuitem" onclick="openFileMenu(this)">
<button>File</button>
<div id="filemenu" class="submenu" onclick="event.stopPropagation()">
<div class="menutop">Undo (Ctrl + Z)</div>
<div class="menucenter">Redo (Ctrl + Y)</div>
<div class="menucenter">Save (Ctrl + S)</div>
<div class="menucenter">Save As</div>
<div class="menucenter">Export</div>
<div class="menubottom" onclick="openFileDisplay()">Open</div>
<div class="menutop menu-lightmode">Undo (Ctrl + Z)</div>
<div class="menucenter menu-lightmode">Redo (Ctrl + Y)</div>
<div class="menucenter menu-lightmode">Save (Ctrl + S)</div>
<div class="menucenter menu-lightmode">Save As</div>
<div class="menucenter menu-lightmode">Export</div>
<div class="menubottom menu-lightmode" onclick="openFileDisplay()">Open</div>
</div>
</div>
<div class="menuitem" onclick="openViewMenu(this)">
<button>View</button>
<div class="submenu" onclick="event.stopPropagation()">
<div class="submenu menu-lightmode" onclick="event.stopPropagation()">
<div>
<label for="actor">Highlight actor: </label>
<select name="actor" id="actor" onchange="selectActor();"></select>
@ -38,36 +38,86 @@
</div>
</div>
<div class="menuitem" onclick="openSettingsMenu(this)">
<button>Settings</button>
<div class="submenu">Dark mode, visualisation settings, draw @@init or not, collapse all edges between 2 states, language</div>
<button>Settings</button> <!--Main settings menu-->
<div class="submenu menu-lightmode" onclick="event.stopPropagation()">
<table id="settings-table">
<tr>
<th colspan="2">
General
</th>
</tr>
<tr>
<td>
<label class="toggle" title="Dark Mode">
<input type="checkbox">
<span class="toggle-slider" onclick="toggleTheme()"></span>
</label>
</td>
<td>
Dark Mode
</td>
</tr>
<tr>
<td>
<label class="toggle" title="Foo">
<input type="checkbox" disabled>
<span class="toggle-slider"></span>
</label>
</td>
<td>
Language
</td>
</tr>
<tr>
<th colspan="2">
Visualisation
</th>
</tr>
<tr>
<td>
<label class="toggle" title="Foo">
<input type="checkbox" disabled>
<span class="toggle-slider"></span>
</label>
</td>
<td>
draw @@init or not, collapse all edges between 2 states
</td>
</tr>
</table>
<div>
</div>
<div>
</div>
</div>
</div>
<div class="menuitem" onclick="openAboutMenu(this)">
<button>About</button>
<div class="submenu">Visualiser & editor for Uni2work workflows</div>
<div class="submenu menu-lightmode">Visualiser & editor for Uni2work workflows</div>
</div>
<div class="menuitem" onclick="openSearchMenu(this)">
<button>Search</button>
<div class="submenu">Search for states, edges and their contents</div>
<div class="submenu menu-lightmode">Search for states, edges and their contents</div>
</div>
<div class="menuitem">
<button id="filename"></button>
<button id="filename" class="contenttype-lightmode"></button>
</div>
</div>
<div id="sidepanel"> <!--Pop-up panel on the right side for displaying/editing the selected state/action-->
<div id="sidepanel" class="menu-lightmode"> <!--Pop-up panel on the right side for displaying/editing the selected state/action-->
<div id="sideheader">
<div id="sidecontentedge" class="sidecontenttype">
<div id="sidecontentedge" class="sidecontenttype contenttype-lightmode">
<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" /> />
<circle cx="4" cy="4" r="3" stroke-width="2" fill="none" />
<polyline points="8,4 18,4" style="fill:none;stroke-width:2" stroke-linecap="round" />
<circle cx="22" cy="4" r="3" stroke-width="2" fill="none" /> />
</svg>
Edge
</div>
<div id="sidecontentnode" class="sidecontenttype">
<div id="sidecontentnode" class="sidecontenttype contenttype-lightmode">
<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" />
<polyline points="2,4 7,4" style="fill:none;stroke-width:2" stroke-linecap="round" />
<circle cx="11" cy="4" r="3" stroke-width="2" fill="none" />
<polyline points="15,4 20,4" style="fill:none;stroke-width:2" stroke-linecap="round" />
</svg>
Node
</div>
@ -85,7 +135,7 @@
<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-->
<div id="filepanel" class="menu-lightmode"> <!--Pop-up panel covering the center of the screen for file interactions-->
<div id="fileheader">
<h2 id="fileheading">Hello</h2>
<svg class="close" height="15" width="15" xmlns="http://www.w3.org/2000/svg" onclick="closeFileDisplay()">
@ -101,77 +151,77 @@
</div>
</div>
<div id="ctmenubg" class="contextmenu"> <!--Context menu displayed after right-clicking the background-->
<div class="menutop" onclick="addState()">
<div class="menutop menu-lightmode" onclick="addState()">
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
<circle cx="5" cy="5" r="4" stroke="rgb(63, 63, 63)" stroke-width="2" fill="none" />
<circle cx="5" cy="5" r="4" stroke-width="2" fill="none" />
</svg>
&nbsp;New State
&nbsp;&nbsp;New State
</div>
<div class="menubottom">
<div class="menubottom menu-lightmode">
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
<polyline points="1,1 9,9" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" />
<polyline points="1,1 9,9" style="fill:none;stroke-width:2" stroke-linecap="round" />
</svg>
&nbsp;New Edge
&nbsp;&nbsp;New Edge
</div>
</div>
<div id="ctmenust" class="contextmenu"> <!--Context menu displayed after right-clicking a state-->
<div class="menutop" onclick="markEdgeFrom()">
<div class="menutop menu-lightmode" onclick="markEdgeFrom()">
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
<polyline points="1,1 9,9" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" />
<polyline points="1,1 9,9" style="fill:none;stroke-width:2" stroke-linecap="round" />
</svg>
&nbsp;New Edge from here
&nbsp;&nbsp;New Edge from here
</div>
<div class="menucenter" onclick="markEdgeTo()">
<div class="menucenter menu-lightmode" onclick="markEdgeTo()">
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
<polyline points="1,9 9,1" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" />
<polyline points="1,9 9,1" style="fill:none;stroke-width:2" stroke-linecap="round" />
</svg>
&nbsp;New Edge to here
&nbsp;&nbsp;New Edge to here
</div>
<div class="menucenter" onclick="rightSelect()">
<div class="menucenter menu-lightmode" onclick="rightSelect()">
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
<polyline points="1,9 9,1" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:4" />
<polyline points="1,9 8,2" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" />
<polyline points="1,9 9,1" style="fill:none;stroke-width:4" />
<polyline points="1,9 8,2" style="fill:none;stroke-width:2" stroke-linecap="round" />
</svg>
&nbsp;Edit
&nbsp;&nbsp;Edit
</div>
<div class="menucenter">
<div class="menucenter menu-lightmode">
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
<rect width="5" height="5" x="1" y="4" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2"/>
<polyline points="4,4 4,1 9,1 9,6 5,6" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" />
<!-- <polyline points="1,9 8,2" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" /> -->
<rect width="5" height="5" x="1" y="4" style="fill:none;stroke-width:2"/>
<polyline points="4,4 4,1 9,1 9,6 5,6" style="fill:none;stroke-width:2" />
<!-- <polyline points="1,9 8,2" style="fill:none;stroke-width:2" stroke-linecap="round" /> -->
</svg>
&nbsp;Duplicate
&nbsp;&nbsp;Duplicate
</div>
<div class="menubottom" onclick="removeRightSelection()">
<div class="menubottom menu-lightmode" onclick="removeRightSelection()">
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
<polyline points="1,1 9,9" style="fill:none;stroke:rgb(183, 76, 76);stroke-width:2" stroke-linecap="round" />
<polyline points="9,1 1,9" style="fill:none;stroke:rgb(183, 76, 76);stroke-width:2" stroke-linecap="round" />
</svg>
&nbsp;Delete
&nbsp;&nbsp;Delete
</div>
</div>
<div id="ctmenued" class="contextmenu"> <!--Context menu displayed after right-clicking an edge-->
<div class="menutop" onclick="rightSelect()">
<div class="menutop menu-lightmode" onclick="rightSelect()">
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
<polyline points="1,9 9,1" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:4" />
<polyline points="1,9 8,2" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" />
<polyline points="1,9 9,1" style="fill:none;stroke-width:4" />
<polyline points="1,9 8,2" style="fill:none;stroke-width:2" stroke-linecap="round" />
</svg>
&nbsp;Edit
&nbsp;&nbsp;Edit
</div>
<div class="menucenter">
<div class="menucenter menu-lightmode">
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
<rect width="5" height="5" x="1" y="4" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2"/>
<polyline points="4,4 4,1 9,1 9,6 5,6" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" />
<!-- <polyline points="1,9 8,2" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" /> -->
<rect width="5" height="5" x="1" y="4" style="fill:none;stroke-width:2"/>
<polyline points="4,4 4,1 9,1 9,6 5,6" style="fill:none;stroke-width:2" />
<!-- <polyline points="1,9 8,2" style="fill:none;stroke-width:2" stroke-linecap="round" /> -->
</svg>
&nbsp;Duplicate
&nbsp;&nbsp;Duplicate
</div>
<div class="menubottom" onclick="removeRightSelection()">
<div class="menubottom menu-lightmode" onclick="removeRightSelection()">
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
<polyline points="1,1 9,9" style="fill:none;stroke:rgb(183, 76, 76);stroke-width:2" stroke-linecap="round" />
<polyline points="9,1 1,9" style="fill:none;stroke:rgb(183, 76, 76);stroke-width:2" stroke-linecap="round" />
</svg>
&nbsp;Delete
&nbsp;&nbsp;Delete
</div>
</div>
<div id="graph"></div> <!--The graph canvas-->

67
editor.js
View File

@ -1,5 +1,52 @@
// Menu bar
//Theme
var darkMode = false;
function toggleTheme() {
darkMode = !darkMode;
console.log('dark mode', darkMode);
var menus = [mainMenu, sidePanel, filePanel];
Array.from(document.getElementsByClassName('menuitem')).forEach(item =>
item !== fileMenu &&
Array.from(item.getElementsByClassName('submenu')).forEach(subMenu => menus.push(subMenu))
);
Array.from(fileMenu.children).forEach(child => menus.push(child));
Array.from(contextMenuBg.children).forEach(child => menus.push(child));
Array.from(contextMenuEd.children).forEach(child => menus.push(child));
Array.from(contextMenuSt.children).forEach(child => menus.push(child));
Array.from(document.getElementsByClassName('graph-tooltip')).forEach(tooltip => menus.push(tooltip));
var contentHints = [
document.getElementById('filename'),
document.getElementById('sidecontentedge'),
document.getElementById('sidecontentnode')
];
if (darkMode) {
menus.forEach(target => {
target.classList.add('menu-darkmode');
target.classList.remove('menu-lightmode');
});
contentHints.forEach(hint => {
hint.classList.add('contenttype-darkmode');
hint.classList.remove('contenttype-lightmode');
});
wfGraph.backgroundColor('black');
} else {
menus.forEach(target => {
target.classList.add('menu-lightmode');
target.classList.remove('menu-darkmode');
});
contentHints.forEach(hint => {
hint.classList.add('contenttype-lightmode');
hint.classList.remove('contenttype-darkmode');
});
wfGraph.backgroundColor('white');
}
}
// Menu bar
const mainMenu = document.getElementById('mainmenu');
var selectedMenuItem = null;
/**
@ -181,6 +228,9 @@ fetch('http://localhost:8080/index.json')
for (var key in data)
workflow[key] = data[key];
wfGraph(document.getElementById('graph')).graphData({nodes: workflow.states, links: workflow.actions});
Array.from(document.getElementsByClassName('graph-tooltip')).forEach(tooltip =>
tooltip.classList.add('menu-lightmode')
);
runnn();
});
@ -245,6 +295,7 @@ const sideButtons = document.getElementById('sidebuttons');
const sideInfoEdge = document.getElementById('sidecontentedge');
const sideInfoNode = document.getElementById('sidecontentnode');
//File panel
const fileMenu = document.getElementById('filemenu');
const filePanel = document.getElementById('filepanel');
const fileHeading = document.getElementById('fileheading');
const fileContent = document.getElementById('filecontent');
@ -674,10 +725,12 @@ function runnn() {
const edgeColourDefault = '#999999ff';
const edgeColourSelected = '#000000ff';
const edgeColourSelectedDarkMode = '#ffffffff';
const edgeColourHighlightDefault = '#6ed4d4';
const edgeColourHighlightSelected = 'magenta';
const edgeColourSubtleDefault = '#99999955';
const edgeColourSubtleSelected = '#00000055';
const edgeColourSubtleSelectedDarkMode = '#ffffff55';
const edgeColourMostSubtle = '#99999944';
/**
@ -724,9 +777,11 @@ function getEdgeColour(edge) {
} else if (selectedViewer.value !== NO_VIEWER && !isHighlightedViewerEdge(edge)) {
return isSelected ? edgeColourSubtleDefault : edgeColourMostSubtle;
} else if (selectedActor.value !== NO_ACTOR) {
return isSelected ? edgeColourSubtleSelected : edgeColourSubtleDefault;
return isSelected ? (darkMode ? edgeColourSubtleSelectedDarkMode : edgeColourSubtleSelected)
: edgeColourSubtleDefault;
} else {
return isSelected ? edgeColourSelected : edgeColourDefault;
return isSelected ? (darkMode ? edgeColourSelectedDarkMode : edgeColourSelected)
: edgeColourDefault;
}
}
wfGraph
@ -807,7 +862,7 @@ function getEdgeColour(edge) {
context.translate(textPos.x, textPos.y);
context.rotate(textAngle);
context.fillStyle = 'rgba(255, 255, 255, 0.8)';
context.fillStyle = darkMode ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)';
context.fillRect(- bckgDimensions[0] / 2, - bckgDimensions[1] / 2, ...bckgDimensions);
context.textAlign = 'center';
@ -819,7 +874,7 @@ function getEdgeColour(edge) {
.linkLineDash(edge => edge.actionData.mode == 'automatic' && [2, 3]) //[dash, gap]
.linkWidth(edge => (((edge === selection || edge === rightSelection) ? 2 : 0) + (isHighlightedActorEdge(edge) || isHighlightedViewerEdge(edge)) ? 4 : 1))
.linkDirectionalParticles(2)
.linkDirectionalParticleColor(() => '#00000055')
.linkDirectionalParticleColor(() => darkMode ? '#ffffff55' : '#00000055')
.linkDirectionalParticleWidth(edge => (isHighlightedActorEdge(edge)) ? 3 : 0)
.nodeCanvasObject((node, ctx) => {
ctx.fillStyle = getNodeColour(node);
@ -827,7 +882,7 @@ function getEdgeColour(edge) {
ctx.arc(node.x, node.y, 2*node.val, 0, 2 * Math.PI, false);
ctx.fill();
if (node === selection || node === rightSelection) {
ctx.strokeStyle = 'black';
ctx.strokeStyle = darkMode ? 'white' : 'black';
ctx.lineWidth = 1;
ctx.setLineDash([1, 2]);
ctx.lineCap = 'round';