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 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();