bpmn-visualization-js icon indicating copy to clipboard operation
bpmn-visualization-js copied to clipboard

[FEAT] Consider rendering shapes above the edges

Open tbouffard opened this issue 5 years ago • 1 comments

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 [email protected] 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 avatar Jun 24 '20 20:06 tbouffard

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.

tbouffard avatar Oct 09 '20 13:10 tbouffard