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

different edge highlighting for selected viewer

Browse Source
This commit is contained in:
David Mosbach 2023-06-02 00:47:01 +02:00
parent 04dc0ee9b1
commit 4d19c3f24b
1 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
editor.js
View File

@ -678,6 +678,7 @@ const edgeColourHighlightDefault = '#6ed4d4';
const edgeColourHighlightSelected = 'magenta'; const edgeColourHighlightSelected = 'magenta';
const edgeColourSubtleDefault = '#99999955'; const edgeColourSubtleDefault = '#99999955';
const edgeColourSubtleSelected = '#00000055'; const edgeColourSubtleSelected = '#00000055';
const edgeColourMostSubtle = '#99999944';
/** /**
* *
@ -704,18 +705,24 @@ function getNodeColour(node) {
} }
} }
function isHighlightedEdge(edge) { function isHighlightedActorEdge(edge) {
var data = edge.actionData var data = edge.actionData;
var isViewer = data.viewerNames.includes(selectedViewer.value) var isActor = data.mode != 'automatic' && data.actorNames.includes(selectedActor.value);
var isActor = data.mode != 'automatic' && data.actorNames.includes(selectedActor.value) var isActorAuto = data.mode == 'automatic' && highlightedTargets.includes(edge.source.id);
var isActorAuto = data.mode == 'automatic' && highlightedTargets.includes(edge.source.id) return isActor || isActorAuto;
return isViewer || isActor || isActorAuto; }
function isHighlightedViewerEdge(edge) {
var data = edge.actionData;
return data.viewerNames.includes(selectedViewer.value);
} }
function getEdgeColour(edge) { function getEdgeColour(edge) {
var isSelected = selection === edge || rightSelection === edge; var isSelected = selection === edge || rightSelection === edge;
if (isHighlightedEdge(edge)) { if (isHighlightedActorEdge(edge)) {
return isSelected ? edgeColourHighlightSelected : edgeColourHighlightDefault; return isSelected ? edgeColourHighlightSelected : edgeColourHighlightDefault;
} else if (selectedViewer.value !== NO_VIEWER && !isHighlightedViewerEdge(edge)) {
return isSelected ? edgeColourSubtleDefault : edgeColourMostSubtle;
} else if (selectedActor.value !== NO_ACTOR) { } else if (selectedActor.value !== NO_ACTOR) {
return isSelected ? edgeColourSubtleSelected : edgeColourSubtleDefault; return isSelected ? edgeColourSubtleSelected : edgeColourSubtleDefault;
} else { } else {
@ -810,10 +817,10 @@ function getEdgeColour(edge) {
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 === selection || edge === rightSelection) ? 1 : 0) + (isHighlightedEdge(edge)) ? 3 : 1)) .linkWidth(edge => (((edge === selection || edge === rightSelection) ? 2 : 0) + (isHighlightedActorEdge(edge) || isHighlightedViewerEdge(edge)) ? 4 : 1))
.linkDirectionalParticles(2) .linkDirectionalParticles(2)
.linkDirectionalParticleColor(() => '#00000055') .linkDirectionalParticleColor(() => '#00000055')
.linkDirectionalParticleWidth(edge => (isHighlightedEdge(edge)) ? 3 : 0) .linkDirectionalParticleWidth(edge => (isHighlightedActorEdge(edge)) ? 3 : 0)
.nodeCanvasObject((node, ctx) => { .nodeCanvasObject((node, ctx) => {
ctx.fillStyle = getNodeColour(node); ctx.fillStyle = getNodeColour(node);
ctx.beginPath(); ctx.beginPath();