jacomyal
Events are not propagated when using sigmajs within the shadow root
Is your feature request related to a problem? Please describe. Events are not propagated when using sigmajs within the shadow root.
Something like this doesn't work:
this.#sigma_renderer.on('enterNode', ({node}) => {
this.setHoveredNode(node);
});
this.#sigma_renderer.on('leaveNode', () => {
this.setHoveredNode(undefined);
});
Describe the solution you'd like Use 'composed'. More info: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
Describe alternatives you've considered Not use Shadow Root
I have also encountered this issue, and would like to propose a potential solution for consideration.
According to the MDN mentioned by Tardo,
All UA-dispatched UI events are composed (click/touch/mouseover/copy/paste, etc.).
so the mousemove event has the composed property set by default.
But due to the special standard involving shadow tree, as detailed in the DOM - Standard shadow root,
A shadow root’s get the parent algorithm, given an event, returns null if event’s composed flag is unset and shadow root is the root of event’s path’s first struct’s invocation target; otherwise shadow root’s host.
This implies that if the event's composed flag is set, the event will propagate with event.target being the shadow root's host. However, sigma's captor does not take account for this case so the event is discarded here.
https://github.com/jacomyal/sigma.js/blob/7f1785c9a393d88764633cb5744e262efd249641/packages/sigma/src/core/captors/mouse.ts#L230-L232
For testing purposes, there is a Sandbox Example
It's important to note that occasionally, after clicking the Sandbox's refresh button, an error may display stating
CustomElementRegistry.define: 'sigma-shadow' has already been defined as a custom element
If this happens, pls simply click the button again to proceed.
The shadow or light DOM implementations can be toggled by mutating the isShadow boolean variable on line 10.
When it's light, the leaveEdge and enterEdge work fine, but not work any more when it's shadow. Wheel and click events work in both contexts.
A potential solution is obtaining the desired target by event.composedPath().
if (e.target === this.container || e.composedPath()[0] === this.container)
BTW, there exist two non-standard methods as per MDN Comparison of Event Targets: event.originalTarget and event.explicitOriginalTarget, behave as expected in Firefox 123.0a1 (a nightly version), but these methods were not present in Edge 120.0.2210.144.
