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