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

decreased opacity for edges of other actors

Browse Source
This commit is contained in:
David Mosbach 2023-05-22 21:14:14 +02:00
parent a83b587f49
commit 0b8c6c76ce
1 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
editor.js
View File

@ -57,6 +57,13 @@ const curvatureMinMax = 0.2; // Minimum/maximum curvature (1 +/- x) of overlappi
var selection = null; // The currently selected node/edge. var selection = null; // The currently selected node/edge.
const edgeColourDefault = '#999999ff';
const edgeColourSelected = '#000000ff';
const edgeColourHighlightDefault = 'magenta';
const edgeColourHighlightSelected = 'red';
const edgeColourSubtleDefault = '#99999955';
const edgeColourSubtleSelected = '#00000055';
/** /**
* Checks if two roles are equal. * Checks if two roles are equal.
@ -200,7 +207,7 @@ function removeState(state) {
* @param {*} node * @param {*} node
* @returns The colour the given node should have. * @returns The colour the given node should have.
*/ */
function getColour(node) { function getNodeColour(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';
@ -216,17 +223,21 @@ function getColour(node) {
} }
} }
function getEdgeColour(edge) {
if (edge.actionData.mode != 'automatic' && edge.actionData.actorNames.includes(selectedActor.value)) {
return selection === edge ? edgeColourHighlightSelected : edgeColourHighlightDefault;
} else if (selectedActor.value !== 'All Actors') {
return selection === edge ? edgeColourSubtleSelected : edgeColourSubtleDefault;
} else {
return selection === edge ? edgeColourSelected : edgeColourDefault;
}
}
const Graph = ForceGraph() const Graph = ForceGraph()
(document.getElementById('graph')) (document.getElementById('graph'))
.linkDirectionalArrowLength(6) .linkDirectionalArrowLength(6)
.linkDirectionalArrowRelPos(1) .linkDirectionalArrowRelPos(1)
.linkColor(edge => { .linkColor(getEdgeColour)
if (edge.actionData.mode != 'automatic' && edge.actionData.actorNames.includes(selectedActor.value)) {
return selection === edge ? 'red' : 'magenta';
} else {
return selection === edge ? 'black' : '#999999';
}
})
.linkCurvature('curvature') .linkCurvature('curvature')
.linkCanvasObjectMode(() => 'after') .linkCanvasObjectMode(() => 'after')
.linkCanvasObject((edge, context) => { .linkCanvasObject((edge, context) => {
@ -306,7 +317,7 @@ const Graph = ForceGraph()
context.textAlign = 'center'; context.textAlign = 'center';
context.textBaseline = 'middle'; context.textBaseline = 'middle';
context.fillStyle = selection === edge ? 'black' : 'darkgrey'; context.fillStyle = getEdgeColour(edge);
context.fillText(label, 0, 0); context.fillText(label, 0, 0);
context.restore(); context.restore();
}) })
@ -316,7 +327,7 @@ const Graph = ForceGraph()
.linkDirectionalParticleColor(() => '#00000055') .linkDirectionalParticleColor(() => '#00000055')
.linkDirectionalParticleWidth(edge => (edge.actionData.mode != 'automatic' && edge.actionData.actorNames.includes(selectedActor.value)) ? 3 : 0) .linkDirectionalParticleWidth(edge => (edge.actionData.mode != 'automatic' && edge.actionData.actorNames.includes(selectedActor.value)) ? 3 : 0)
.nodeCanvasObject((node, ctx) => { .nodeCanvasObject((node, ctx) => {
ctx.fillStyle = getColour(node); ctx.fillStyle = getNodeColour(node);
ctx.beginPath(); ctx.beginPath();
ctx.arc(node.x, node.y, 2*node.val, 0, 2 * Math.PI, false); ctx.arc(node.x, node.y, 2*node.val, 0, 2 * Math.PI, false);
ctx.fill(); ctx.fill();