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

height of sidebar content is dynamically adjusted

Browse Source
This commit is contained in:
David Mosbach 2023-05-28 13:36:02 +02:00
parent 3ce28ee25c
commit 4520c8a120
3 changed files with 31 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
editor.css
View File

@ -66,16 +66,25 @@ body {
} }
#sidecontent { #sidecontent {
/* position: absolute; position: absolute;
top: 20px;
bottom: 20px; bottom: 20px;
left: 20px; left: 20px;
right: 20px; */ right: 20px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
text-align: justify; text-align: justify;
hyphens: auto; hyphens: auto;
word-wrap: break-word; word-wrap: break-word;
height: 80%; /* height: 80%; */
}
#sidebuttons {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
padding-top: 20px;
} }
.contextmenu { .contextmenu {

21
editor.html
View File

@ -10,12 +10,7 @@
<body> <body>
<div id="editor"> <div id="editor">
<!-- <br/> <div id="settings"> <!--Horizontal bar on top for selecting highlighting modes-->
<div style="text-align: center; color: silver">
<b>New node:</b> click on the canvas, <b>New link:</b> drag one node close enough to another one,
<b>Rename</b> node or link by clicking on it, <b>Remove</b> node or link by right-clicking on it
</div> -->
<div id="settings">
<div> <div>
<label for="actor">Highlight actor: </label> <label for="actor">Highlight actor: </label>
<select name="actor" id="actor" onchange="selectActor();"></select> <select name="actor" id="actor" onchange="selectActor();"></select>
@ -25,7 +20,7 @@
<select name="viewer" id="viewer" onchange="selectViewer();"></select> <select name="viewer" id="viewer" onchange="selectViewer();"></select>
</div> </div>
</div> </div>
<div id="sidepanel"> <div id="sidepanel"> <!--Pop-up panel on the right side for displaying/editing the selected state/action-->
<div id="sideheader"> <div id="sideheader">
<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 height="15" width="15" xmlns="http://www.w3.org/2000/svg" onclick="deselect()">
@ -35,8 +30,12 @@
</svg> </svg>
</div> </div>
<div id="sidecontent"></div> <div id="sidecontent"></div>
<div id="sidebuttons">
<button type="submit" disabled="disabled">Save</button>
<button type="reset" disabled="disabled">Cancel</button>
</div>
</div> </div>
<div id="ctmenubg" class="contextmenu"> <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">
<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="rgb(63, 63, 63)" stroke-width="2" fill="none" />
@ -50,7 +49,7 @@
&nbsp;New Edge &nbsp;New Edge
</div> </div>
</div> </div>
<div id="ctmenust" class="contextmenu"> <div id="ctmenust" class="contextmenu"> <!--Context menu displayed after right-clicking a state-->
<div class="menutop"> <div class="menutop">
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg"> <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:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" />
@ -86,7 +85,7 @@
&nbsp;Delete &nbsp;Delete
</div> </div>
</div> </div>
<div id="ctmenued" class="contextmenu"> <div id="ctmenued" class="contextmenu"> <!--Context menu displayed after right-clicking an edge-->
<div class="menutop" onclick="rightSelect()"> <div class="menutop" onclick="rightSelect()">
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg"> <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 9,1" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:4" />
@ -110,7 +109,7 @@
&nbsp;Delete &nbsp;Delete
</div> </div>
</div> </div>
<div id="graph"></div> <div id="graph"></div> <!--The graph canvas-->
</div> </div>
<script src="./workflow.js"></script> <script src="./workflow.js"></script>

10
editor.js
View File

@ -185,6 +185,8 @@ var selection = null; // The currently selected node/edge.
var rightSelection = null; // The currently right clicked node/edge. var rightSelection = null; // The currently right clicked node/edge.
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 sideButtons = document.getElementById('sidebuttons');
//Context menus //Context menus
const contextMenuBg = document.getElementById('ctmenubg'); //Click on background const contextMenuBg = document.getElementById('ctmenubg'); //Click on background
const contextMenuSt = document.getElementById('ctmenust'); //Click on state const contextMenuSt = document.getElementById('ctmenust'); //Click on state
@ -313,11 +315,17 @@ function select(item) {
while (sideContent.firstChild) while (sideContent.firstChild)
sideContent.removeChild(sideContent.lastChild); sideContent.removeChild(sideContent.lastChild);
sidePanel.style.display = 'block' sidePanel.style.display = 'block'
document.getElementById('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 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);
} else { } else {
sidePanel.style.display = 'none'; sidePanel.style.display = 'none';
} }