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 {
/* position: absolute;
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px; */
right: 20px;
overflow-y: auto;
overflow-x: hidden;
text-align: justify;
hyphens: auto;
word-wrap: break-word;
height: 80%;
/* height: 80%; */
}
#sidebuttons {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
padding-top: 20px;
}
.contextmenu {

21
editor.html
View File

@ -10,12 +10,7 @@
<body>
<div id="editor">
<!-- <br/>
<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 id="settings"> <!--Horizontal bar on top for selecting highlighting modes-->
<div>
<label for="actor">Highlight actor: </label>
<select name="actor" id="actor" onchange="selectActor();"></select>
@ -25,7 +20,7 @@
<select name="viewer" id="viewer" onchange="selectViewer();"></select>
</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">
<h1 id="sideheading">Hello</h1>
<svg height="15" width="15" xmlns="http://www.w3.org/2000/svg" onclick="deselect()">
@ -35,8 +30,12 @@
</svg>
</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 id="ctmenubg" class="contextmenu">
<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">
<circle cx="5" cy="5" r="4" stroke="rgb(63, 63, 63)" stroke-width="2" fill="none" />
@ -50,7 +49,7 @@
&nbsp;New Edge
</div>
</div>
<div id="ctmenust" class="contextmenu">
<div id="ctmenust" class="contextmenu"> <!--Context menu displayed after right-clicking a state-->
<div class="menutop">
<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" />
@ -86,7 +85,7 @@
&nbsp;Delete
</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()">
<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" />
@ -110,7 +109,7 @@
&nbsp;Delete
</div>
</div>
<div id="graph"></div>
<div id="graph"></div> <!--The graph canvas-->
</div>
<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.
const sidePanel = document.getElementById('sidepanel');
const sideContent = document.getElementById('sidecontent');
const sideHeading = document.getElementById('sideheading');
const sideButtons = document.getElementById('sidebuttons');
//Context menus
const contextMenuBg = document.getElementById('ctmenubg'); //Click on background
const contextMenuSt = document.getElementById('ctmenust'); //Click on state
@ -313,11 +315,17 @@ function select(item) {
while (sideContent.firstChild)
sideContent.removeChild(sideContent.lastChild);
sidePanel.style.display = 'block'
document.getElementById('sideheading').innerHTML = item.name;
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);
} else {
sidePanel.style.display = 'none';
}