process-analytics / bpmn-visualization-js

A TypeScript library for visualizing process execution data on BPMN diagrams
https://process-analytics.github.io/bpmn-visualization-js/
Apache License 2.0
223 stars 30 forks source link

[FEAT] Consider rendering shapes above the edges #350

Open tbouffard opened 4 years ago

tbouffard commented 4 years ago

Is your feature request related to a problem? Please describe. If an edge crosses a shape, for instance a task, it is often displayed on top of the shape which makes the visualization unpleasant

Loading the sketch_tutorial-2-03-threetrace-decision-loop.bpmn.txt file from https://www.bpmn-sketch-miner.ai/examples/tutorial-2-03-threetrace-decision-loop.html# using lib version 0.1.3 (same behaviour with 0.1.5-dev) shows the issue

image

Describe the solution you'd like bpmn-js@7.0.0 use transparency for shape on top of edge

image

Describe alternatives you've considered Notice that the BPMN diagram definition should manage this, this feature is a nice to have to cover non happy path scenarios

Additional context Another BPMN diagram with the issue, rendered with 0.1.4 (see #349 for more details) - have a look at the sequence flow from Task 2 to End Event image

Notes about mxGraph features

mxGraph provides keepEdgesInBackground and keepEdgesInForeground settings for this. See https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/view/mxGraph.js#L1333-L1349

tbouffard commented 4 years ago

mxGraph provide options to force the position of the edges in foreground or background. https://github.com/jgraph/mxgraph2/blob/mxgraph-4_2_0/javascript/src/js/view/mxGraph.js#L1334

/**
 * Variable: keepEdgesInForeground
 * Specifies if edges should appear in the foreground regardless of their order
 * in the model. If <keepEdgesInForeground> and <keepEdgesInBackground> are
 * both true then the normal order is applied. Default is false.
 */
mxGraph.prototype.keepEdgesInForeground = false;

/**
 * Variable: keepEdgesInBackground
 * Specifies if edges should appear in the background regardless of their order
 * in the model. If <keepEdgesInForeground> and <keepEdgesInBackground> are
 * both true then the normal order is applied. Default is false.
 */
mxGraph.prototype.keepEdgesInBackground = false;

The edges are currently always placed in the model after the vertex. We associate source and target vertex to the edge. If they are not already available in the model when adding the edge, mxGraph don't consider the edge. So to ensure edges are always added, we put all verticles in the model first, then the edges.