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

59
editor.js
View File

@ -137,25 +137,32 @@ function removeState(state) {
workflow.states.splice(workflow.states.indexOf(state), 1);
}
/**
*
* @param {*} 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.final === 'True' || node.stateData.final === 'ok') {
return selection === node ? '#a4eb34' : '#7fad36';
} else if (node.stateData.final === 'not-ok') {
return selection === node ? '#f77474' : '#f25050';
} else {
//console.log(node.stateData.final);
}
} else if (node.name === '@@INIT') {
return selection === node ? '#e8cd84' : '#d1ad4b';
} else {
return selection === node ? '#5fbad9' : '#4496b3';
}
}
const Graph = ForceGraph()
(document.getElementById('graph'))
.linkDirectionalArrowLength(6)
.linkDirectionalArrowRelPos(1)
.nodeColor(node => {
if (node.stateData && node.stateData.final !== 'False' && node.stateData.final !== '') {
if (node.stateData.final === 'True' || node.stateData.final === 'ok') {
return selection === node ? '#a4eb34' : '#7fad36';
} else if (node.stateData.final === 'not-ok') {
return selection === node ? '#f77474' : '#f25050';
} else {
//console.log(node.stateData.final);
}
} else if (node.name === '@@INIT') {
return selection === node ? '#e8cd84' : '#d1ad4b';
} else {
return selection === node ? '#5fbad9' : '#4496b3';
}
})
.linkColor(edge => selection === edge ? 'black' : '#999999')
.linkCurvature('curvature')
.linkCanvasObjectMode(() => 'after')
@ -241,6 +248,28 @@ const Graph = ForceGraph()
context.restore();
})
.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 => {
node.fx = node.x;
node.fy = node.y;