[BUG] Failed to execute 'getComputedStyle' when using lit

[xxxLukskyxxx]

Describe the bug When the cursor is moved over the container, an error is triggered: Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

To Reproduce

1. Setup project with typescript, lit and vite
2. Use the bpmn-visualization in a custom element

Screenshots Error message in Chrome: Error message in Firefox:

Desktop (please complete the following information):

• Windows 10
• Chrome, Firefox, Edge
• Chrome 114.0.5735.90, Firefox 114

[brendanlaschke]

It seems to be related to the shadow dom of lit-element and the way mxGraph detects offsets. The Dom is traversed upwards (node = node.parentNode;) until a

• position: fixed node is reached
• or document.body is reached
• or document.documentElement is reached
• or the parent Node null is

None of them is the case for the shadow dom root of the web component -> the window.getComputedStyle is called on the shadow dom root and fails.

An obvious fix (if possible in your usage context) is to use a container with position: fixed around the bpmn-container. But this is no general fix as this influences positioning.

An reproduction example: https://codesandbox.io/p/sandbox/brave-curie-jhzvd9

But I don't have an idea at the moment how to change the behavior without touching mxGraphs code.

[tbouffard]

Thanks for the detailed report and the reproduction environment. The problem seems to be related to a mxGraph issue: https://github.com/jgraph/mxgraph/issues/186 As mxGraph is discontinued, we won't get a fix for that.

However, I know that someone fixed (or at least pretended to fix) this issue:

A fix is available in https://github.com/aire-ux/mxgraph/pull/1: this is a very large Pull Request containing other topics. The fix in located in mxUtils.getCurrentStyle and is the one proposed in https://github.com/jgraph/mxgraph/issues/186

You may use something like patch-package to locally patch mxGraph with the fix mention above.

[tbouffard]

I have been able to make it work by patching/fixing mxGraph with patch-package in a dedicated example: https://github.com/process-analytics/bpmn-visualization-examples/pull/507 It is based on the codesandbox project provided in https://github.com/process-analytics/bpmn-visualization-js/issues/2738#issuecomment-1583441764.

@xxxLukskyxxx Please let me know if this could work for you.

[tbouffard]

After discussion with @csouchet, we decided to not fix mxGraph directly in bpmn-visualization. https://github.com/process-analytics/bpmn-visualization-examples/pull/507 demonstrates how to workaround the problem.

We recognize that this problem has an impact on applications that want to integrate bpmn-visualization into Web Components. However, fixing mxGraph directly may introduce side-effects for other types of integration, whereas Web Components are not the most common use of bpmn-visualization. The root cause of the problem lies in mxGraph, which is no longer maintained. We're looking into the possibility of switching to a new diagram library. maxGraph is a candidate (see #2366) and will correct this problem (https://github.com/maxGraph/maxGraph/issues/68). We may also decide to switch to another library such as https://github.com/antvis/X6. So in a few months' time, you can expect this problem to be handled entirely by bpmn-visualization.

If you need more information, don't hesitate to post a comment here.

[xxxLukskyxxx]

@tbouffard Thank you for the fast patch!

[tbouffard]

Perfect. I would like to thanks @brendanlaschke again for the analysis and the reproduction environment.

The analysis enabled me to quickly recall the existing mxGraph problem. The associated issue proposed a workaround that I was able to use. I used the reproduction environment to validate the workaround and all that remained was to update it using a more recent version of the development dependencies 😸.