Correctly assign click event target in shadow dom

[alexcjohnson]

Fixes #6108

When you start a drag - which happens on mouse down, even before you actually move the mouse - we attach a "coverslip" element to document.body, covering the entire page, so that we can continue tracking mouse movements outside the graph while the mouse is down. This is useful (and expected by users) for panning and sometimes zooming, the drag shouldn't stop when the mouse leaves the graph. We could look into whether this is still necessary in today's browsers, which have gotten more sophisticated about targeting events, but it was clearly required in the early days of plotly.js. Anyway the problem comes when the graph is in a shadow DOM, because then it's not really allowed access to document.body. The net effect of this is events that had been targeted at elements inside the graph, after the browser sees that they're being handled by the coverslip, they look like they're targeted at the shadow DOM container element instead, and when we use this element for position reference instead of the original target, we get the wrong coordinates so we select the wrong data point.

I fixed this by packaging the original event into a plain object instead of a MouseEvent, ensuring the correct target element is included, and passing that along to our handlers.

Adapted from @slietar's codepen, here's the code I've been using in the test dashboard to test this fix:

(() => {
let plots = document.getElementById('plots');
try { plots.removeChild(document.getElementById('graph2')); } catch(e) {}
let graph = document.getElementById('graph');
let graph2 = document.createElement('div');
graph2.id = 'graph2';
plots.appendChild(graph2);
let n = 100;
let fill = (n, fn) => new Array(n).fill(0).map(() => fn());

// Normal distribution
function normal() {
  return Math.sqrt(-2.0 * Math.log(Math.random())) * Math.cos(2.0 * Math.PI * Math.random());
}

// Initialize the shadow root

let root = graph2.attachShadow({ mode: 'open' });
let rootPlot = document.createElement('div');
root.appendChild(rootPlot);

let trace = {x: fill(n, normal), y: fill(n, normal), mode: 'markers' };
Plotly.newPlot(graph, [{...trace}], {width: 500, height: 500});
Plotly.newPlot(rootPlot, [{...trace}], {width: 500, height: 500});

// Add Plotly stylesheets to the shadow root

let style = document.createElement('style');
root.appendChild(style);

for (let plotlyStyle of document.querySelectorAll('[id^="plotly.js-"]')) {
  for (let rule of plotlyStyle.sheet.rules) {
    style.sheet.insertRule(rule.cssText);
  }
}
})();

While I was at it I removed an obsolete fallback for creating new synthetic mouse events when new MouseEvent fails. This appears to have ~10 years of support.

[alexcjohnson]

I slightly loosened this test, then this whole file passed locally. I had to look it up, apparently "1" as the second arg means a range of 10^-1, ie a span of 0.1, ie +/- 0.05, whereas the default is +/- 0.005 and I was getting errors of ~0.007.

[emilykl]

Looks good, thanks @alexcjohnson ! 🚀

[slietar]

Thanks @alexcjohnson!