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

highlight automatic actions in appropriate context

Browse Source
This commit is contained in:
David Mosbach 2023-05-23 15:20:42 +02:00
parent f4748f7d9e
commit 82276d1a02
1 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
editor.js
View File

@ -45,8 +45,21 @@ actors.forEach(actor => {
selectedActor.add(option); selectedActor.add(option);
}); });
//source & target nodes of all currently highlighted actions
var highlightedSources = [];
var highlightedTargets = [];
function selectActor() { function selectActor() {
console.log(selectedActor.value); console.log(selectedActor.value);
highlightedSources = [];
highlightedTargets = [];
workflow.actions.forEach(act => {
if (act.actionData.mode != 'automatic' && act.actionData.actorNames.includes(selectedActor.value)) {
highlightedSources.push(act.source.id);
highlightedTargets.push(act.target.id);
}
});
} }
@ -223,8 +236,12 @@ function getNodeColour(node) {
} }
} }
function isHighlightedEdge(edge) {
return (edge.actionData.mode != 'automatic' && edge.actionData.actorNames.includes(selectedActor.value)) || (edge.actionData.mode === 'automatic' && highlightedTargets.includes(edge.source.id));
}
function getEdgeColour(edge) { function getEdgeColour(edge) {
if (edge.actionData.mode != 'automatic' && edge.actionData.actorNames.includes(selectedActor.value)) { if (isHighlightedEdge(edge)) {
return selection === edge ? edgeColourHighlightSelected : edgeColourHighlightDefault; return selection === edge ? edgeColourHighlightSelected : edgeColourHighlightDefault;
} else if (selectedActor.value !== 'All Actors') { } else if (selectedActor.value !== 'All Actors') {
return selection === edge ? edgeColourSubtleSelected : edgeColourSubtleDefault; return selection === edge ? edgeColourSubtleSelected : edgeColourSubtleDefault;
@ -322,10 +339,10 @@ const Graph = ForceGraph()
context.restore(); context.restore();
}) })
.linkLineDash(edge => edge.actionData.mode == 'automatic' && [2, 3]) //[dash, gap] .linkLineDash(edge => edge.actionData.mode == 'automatic' && [2, 3]) //[dash, gap]
.linkWidth(edge => (edge.actionData.mode != 'automatic' && edge.actionData.actorNames.includes(selectedActor.value)) ? 3 : 1) .linkWidth(edge => (isHighlightedEdge(edge)) ? 3 : 1)
.linkDirectionalParticles(2) .linkDirectionalParticles(2)
.linkDirectionalParticleColor(() => '#00000055') .linkDirectionalParticleColor(() => '#00000055')
.linkDirectionalParticleWidth(edge => (edge.actionData.mode != 'automatic' && edge.actionData.actorNames.includes(selectedActor.value)) ? 3 : 0) .linkDirectionalParticleWidth(edge => (isHighlightedEdge(edge)) ? 3 : 0)
.nodeCanvasObject((node, ctx) => { .nodeCanvasObject((node, ctx) => {
ctx.fillStyle = getNodeColour(node); ctx.fillStyle = getNodeColour(node);
ctx.beginPath(); ctx.beginPath();