Overlay to disable editing not working despite z-index

Developers
1

I am trying to create an overlay that I can use to disable editing, but I am unable to get it to appear on top of the diagram.

Here is a codesandbox which illustrates my problem:

2

Looking at the example I cannot see how that illustrates your problem. Where’s the overlay?

3

It’s in /components/App.js

The component returns an overlay like:

      <div id="overlay">
        <div id="bpmncontainer">
          <div
            id="bpmnview"
            style={{
              width: "100%",
              height: "100vh",
              float: "left"
            }}
          />
        </div>
      </div>

I ended up giving up trying to style the overlay so that it would appear over bmpn and just manually added css to diagram elements like:

    const djsHits = document.getElementsByClassName("djs-hit");

    if (showPanel === true) {
      [...djsHits].forEach(item => {
        item.style.pointerEvents = "none";
      });
    } else {
      [...djsHits].forEach(item => {
        item.style.pointerEvents = "";
      });
    }
4

I didn’t understand so far, what this overlay should achieve? Should it overlay the complete diagram to disable modeling? Why not using the Viewer instead?