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

edges can now be created

Browse Source
This commit is contained in:
David Mosbach 2023-05-28 20:18:24 +02:00
parent a4dafe2365
commit b791e9d3f1
3 changed files with 53 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
editor.css
View File

@ -155,4 +155,24 @@ a:hover {
a:active {
color: rgb(110, 212, 212);
}
button {
padding: 5 5 5 5;
border-radius: 5px;
border-style: solid;
border-color: transparent;
background: rgba(120, 120, 120, 0.555);
color: white;
}
button:disabled {
border-color: rgba(0, 0, 0, 0.267);
background: rgba(120, 120, 120, 0.116);
color: rgba(0, 0, 0, 0.267);
border-width: 1px;
}
select, option {
padding: 2 2 2 2;
}

5
editor.html
View File

@ -33,6 +33,7 @@
<div id="sidebuttons">
<button type="submit" disabled="disabled">Save</button>
<button type="reset" disabled="disabled">Cancel</button>
<button type="submit" disabled="disabled" style="position: absolute; right: 0px;">Delete</button>
</div>
</div>
<div id="ctmenubg" class="contextmenu"> <!--Context menu displayed after right-clicking the background-->
@ -50,13 +51,13 @@
</div>
</div>
<div id="ctmenust" class="contextmenu"> <!--Context menu displayed after right-clicking a state-->
<div class="menutop">
<div class="menutop" 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" />
</svg>
&nbsp;New Edge from here
</div>
<div class="menucenter">
<div class="menucenter" 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" />
</svg>

41
editor.js
View File

@ -150,7 +150,7 @@ var highlightedTargets = [];
function selectActor() {
contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none';
rightSelection = null;
edgeFrom = edgeTo = rightSelection = null;
highlightedSources = [];
highlightedTargets = [];
selectedViewer.value = NO_VIEWER;
@ -164,7 +164,7 @@ function selectActor() {
function selectViewer() {
contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none';
rightSelection = null;
edgeFrom = edgeTo = rightSelection = null;
highlightedSources = [];
highlightedTargets = [];
selectedActor.value = NO_ACTOR;
@ -182,7 +182,9 @@ const selfLoopCurvMin = 0.5; // Minimum curvature of a self loop.
const curvatureMinMax = 0.2; // Minimum/maximum curvature (1 +/- x) of overlapping edges.
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.
var edgeTo = null; // Target of an edge to be created.
var edgeFrom = null; // Start on an edge to be created.
const sidePanel = document.getElementById('sidepanel');
const sideContent = document.getElementById('sidecontent');
const sideHeading = document.getElementById('sideheading');
@ -309,7 +311,7 @@ function generatePanelContent(selection) {
*/
function select(item) {
contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none';
rightSelection = null;
edgeFrom = edgeTo = rightSelection = null;
selection = selection === item ? null : item;
if (selection === item) {
while (sideContent.firstChild)
@ -360,9 +362,12 @@ function updateGraph() {
*/
function connect(source, target) {
let linkId = actionIdCounter ++;
action = {id: linkId, source: source, target: target, name: 'action_' + linkId};
action = {id: linkId, source: source, target: target, name: 'action_' + linkId, actionData: {
viewerNames: [], actorNames: []
}};
workflow.actions.push(action);
updateGraph();
select(action);
}
@ -379,8 +384,14 @@ function addState() {
select(state);
}
function addEdge() {
//TODO
function markEdgeTo() {
edgeTo = rightSelection;
contextMenuSt.style.display = 'none';
}
function markEdgeFrom() {
edgeFrom = rightSelection;
contextMenuSt.style.display = 'none';
}
function removeRightSelection() {
@ -388,7 +399,7 @@ function removeRightSelection() {
if (rightSelection.actionData) removeAction(rightSelection);
else removeState(rightSelection);
if (selection === rightSelection) deselect();
rightSelection = null;
edgeFrom = edgeTo = rightSelection = null;
contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none';
}
}
@ -611,7 +622,15 @@ const Graph = ForceGraph()
node.fx = node.x;
node.fy = node.y;
})
.onNodeClick((node, _) => select(node))
.onNodeClick((node, _) => {
if (edgeFrom) {
connect(edgeFrom, node);
edgeFrom = null;
} else if (edgeTo) {
connect(node, edgeTo);
edgeTo = null;
} else select(node);
})
.onNodeRightClick((node, event) => {
openContextMenu(event.layerX, event.layerY, contextMenuSt);
contextMenuBg.style.display = contextMenuEd.style.display = 'none';
@ -626,13 +645,13 @@ const Graph = ForceGraph()
.onBackgroundClick(_ => {
contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none';
deselect();
rightSelection = null;
edgeFrom = edgeTo = rightSelection = null;
})
.onBackgroundRightClick(event => {
newStateCoords = Graph.screen2GraphCoords(event.layerX, event.layerY);
openContextMenu(event.layerX, event.layerY, contextMenuBg);
contextMenuEd.style.display = contextMenuSt.style.display = 'none';
rightSelection = null;
edgeFrom = edgeTo = rightSelection = null;
})
.autoPauseRedraw(false);