Changing Z-Index of bpmn-elements

vdeppe · February 12, 2020, 10:04pm

hello,
due to some modification at bpmn-renderer, I need to change the z-index of the connection-arrow (such that the Connection arrow between 2 modified Elements overlays their Rendering graphics).
I added this css-code to index.html (className was found at diagram-js.css) but it doesn’t work.
.djs-connection {
z-index: 1000;
}
Thanks in Advance and kind regards

philippfromme · February 13, 2020, 9:05am

There is a dedicated feature in diagram-js that takes care of ordering.

In bpmn-js this feature is used to specify the order of BPMN elements. You can change the order of sequence flows by overriding the default ordering provider.

vdeppe · February 13, 2020, 8:51pm

I’ve changed the Level of bpmn:SequenceFlow from 3 to 10, but it still doesn’t overlay the custom Rendering graphics. Any suggestions?

vdeppe · February 13, 2020, 9:23pm

bpmn_graphic
I inserted a small example, which shows the problem. The dashed line works and overlays
the custom Rendering, but the other doesn’t. The red rectangle is done with function
drawRect, that I copied from

github.com

bpmn-io/bpmn-js/blob/master/lib/draw/BpmnRenderer.js

import inherits from 'inherits';

import {
  isObject,
  assign,
  forEach
} from 'min-dash';

import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';

import {
  isExpanded,
  isEventSubProcess
} from '../util/DiUtil';

import {
  getLabel
} from '../features/label-editing/LabelUtil';

import { is } from '../util/ModelUtil';

This file has been truncated. show original

Maybe, because the red rectangle is actually a svg-Graphic?

philippfromme · February 14, 2020, 7:59am

How do you add the red rounded rectangle?

vdeppe · February 14, 2020, 2:28pm

Similar as shown in the custom-elements example via a customRenderer. The red rectangles are drawn by the drawRect function, that I linked above and which is within the customRenderer class.

vdeppe · February 16, 2020, 4:58pm

Isn‘t it possible to access the z-index of a svg-graphic?

nikku · February 19, 2020, 1:09pm

Isn‘t it possible to access the z-index of a svg-graphic?

No, it is not. The z-index inside an SVG is determined by the order of elements in the SVG.

chrissoares · August 1, 2023, 2:32pm

So, I am facing a similar issue. The arrows that connect the task are always on top of everything. Looking at the order of sequence flows, it shows that the lanes are at level -1, so I thought it would make it below everything. Did I get it wrong?