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

displayed abbreviated node names

Browse Source
This commit is contained in:
David Mosbach 2023-05-05 17:50:45 +02:00
parent 1740c1a1e2
commit 2611130ac7
1 changed files with 44 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
editor.js
View File

@ -137,11 +137,13 @@ function removeState(state) {
workflow.states.splice(workflow.states.indexOf(state), 1); workflow.states.splice(workflow.states.indexOf(state), 1);
} }
const Graph = ForceGraph()
(document.getElementById('graph')) /**
.linkDirectionalArrowLength(6) *
.linkDirectionalArrowRelPos(1) * @param {*} node
.nodeColor(node => { * @returns The colour the given node should have.
*/
function getColour(node) {
if (node.stateData && node.stateData.final !== 'False' && node.stateData.final !== '') { if (node.stateData && node.stateData.final !== 'False' && node.stateData.final !== '') {
if (node.stateData.final === 'True' || node.stateData.final === 'ok') { if (node.stateData.final === 'True' || node.stateData.final === 'ok') {
return selection === node ? '#a4eb34' : '#7fad36'; return selection === node ? '#a4eb34' : '#7fad36';
@ -155,7 +157,12 @@ const Graph = ForceGraph()
} else { } else {
return selection === node ? '#5fbad9' : '#4496b3'; return selection === node ? '#5fbad9' : '#4496b3';
} }
}) }
const Graph = ForceGraph()
(document.getElementById('graph'))
.linkDirectionalArrowLength(6)
.linkDirectionalArrowRelPos(1)
.linkColor(edge => selection === edge ? 'black' : '#999999') .linkColor(edge => selection === edge ? 'black' : '#999999')
.linkCurvature('curvature') .linkCurvature('curvature')
.linkCanvasObjectMode(() => 'after') .linkCanvasObjectMode(() => 'after')
@ -241,6 +248,28 @@ const Graph = ForceGraph()
context.restore(); context.restore();
}) })
.linkLineDash(edge => edge.actionData.mode == 'automatic' && [2, 3]) .linkLineDash(edge => edge.actionData.mode == 'automatic' && [2, 3])
.nodeCanvasObject((node, ctx) => {
ctx.fillStyle = getColour(node);
ctx.beginPath();
ctx.arc(node.x, node.y, 2*node.val, 0, 2 * Math.PI, false);
ctx.fill();
ctx.fillStyle = 'white';
ctx.font = '4px Sans-Serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// var label = node.name.substring(0, 5);
var label = node.name.split(' '); // [node.name.substring(0, 6), node.name.substring(6, 12), node.name.substring(12, 18)];
for (var i = 0; i < label.length; i++) {
var isBrace = label[i][0] === '(';
label[i] = label[i].substring(isBrace ? 1 : 0, isBrace ? 2 : 1);
}
// for (var i = 0; i < label.length; i++) {
// ctx.fillText(label[i], node.x, (node.y - 4) + i * 4);
// }
ctx.fillText(label.join('').substring(0,6), node.x, node.y);
})
.onNodeDragEnd(node => { .onNodeDragEnd(node => {
node.fx = node.x; node.fx = node.x;
node.fy = node.y; node.fy = node.y;