Adding overlays that DON'T prevent mouse events being captured by the underlying element

[sinisa.rudan]

Is there a way to add an overlay over an element that would NOT prevent mouse events being captured by the underlying element?

in the related question Event with overlay in a task
moderator @philippfromme suggested
pointer-events: none

Unfortunately, this doesn’t work because BPMN.io wraps our overlay in another div that captures mouse events.

Isn’t there an option on overlays adding to choose the case where we want it to happen? that would add pointer-events: none to that embedding div?

[sinisa.rudan]

I’ve solved it myself through a CSS-workaround (until the systemic solution is provided by BPMN.io):

CSS:

.highlight-overlay {
    background-color: blue; /* color elements as green */
    opacity: 0.2;
    border-radius: 10px;
    pointer-events: none; /* no pointer events, allows clicking through onto the element */
}
// preventing div, that is added by BPMN.IO as a wrapper around any of ours overlays, from catching mouse events
.djs-overlay:has(.highlight-overlay) {
    pointer-events: none;
}

adding the overlay:

const diagram: BpmnModeler | BpmnViewer;
...

const elementRegistry = diagram.get('elementRegistry');

const shape = elementRegistry.get(elementId);

const overlayHtml: HTMLDivElement = Object.assign(document.createElement('div'), {
			className: 'highlight-overlay',
			style: `width: ${shape.width}px; height: ${shape.height}px; pointer-events: none;`,
		});

const overlayId = overlays.add(elementId, {
			position: {
				top: 0,
				left: 0
			},
			html: overlayHtml
		});