Panning inside shadowDOM does not work

[medunaplexim]

When echarts is placed into a shadowRoot ('open' mode) and 3D surface is displayed, then panning is not working when mouse is over echarts div.

This behaviour was tested in Chrome / Safari.

Minimal example is below, in HTML <shadow-test></shadow-test> must be placed:

var echarts = require('echarts');
require('echarts-gl');

class Shadow extends HTMLElement {
  constructor() {
    super();

    const shadow = this.attachShadow({ mode: 'open' });

    const div = document.createElement('div')
    const style = document.createElement('style')

    div.setAttribute("id", "main")
    style.textContent = `
    #main {
      height: 800px;
      width: 800px;
    }`;

    shadow.appendChild(style);
    shadow.appendChild(div);

    var myChart = echarts.init(div);
    var option;

    option = {
      tooltip: {},
      backgroundColor: '#fff',
      xAxis3D: {
        type: 'value'
      },
      yAxis3D: {
        type: 'value' 
      },
      zAxis3D: {
        type: 'value'
      },
      grid3D: {
      },
      series: [
        {
          type: 'surface',
          equation: {
            x: {
              step: 0.05
            },
            y: {
              step: 0.05
            },
            z: function (x, y) {
              if (Math.abs(x) < 0.1 && Math.abs(y) < 0.1) {
                return '-';
              }
              return Math.sin(x * Math.PI) * Math.sin(y * Math.PI);
            }
          }
        }
      ]
    };

    option && myChart.setOption(option);
  }
}
customElements.define('shadow-test', Shadow);

https://user-images.githubusercontent.com/128685143/227183781-fc063f49-d904-47ef-ae40-46a8a584ba72.mov

I do have suspicion that the issue is present in function

_mouseMoveHandler: function (e) {
        if (e.target && e.target.__isGLToZRProxy) {
            return;
        }

        if (this._isAnimating()) {
            return;
        }

        var panSensitivity = convertToArray(this.panSensitivity);
        var rotateSensitivity = convertToArray(this.rotateSensitivity);

        if (this._mode === 'rotate') {
            this._rotateVelocity.y = (e.offsetX - this._mouseX) / this.zr.getHeight() * 2 * rotateSensitivity[0];
            this._rotateVelocity.x = (e.offsetY - this._mouseY) / this.zr.getWidth() * 2 * rotateSensitivity[1];
        }
        else if (this._mode === 'pan') {
            this._panVelocity.x = (e.offsetX - this._mouseX) / this.zr.getWidth() * panSensitivity[0] * 400;
            this._panVelocity.y = (-e.offsetY + this._mouseY) / this.zr.getHeight() * panSensitivity[1] * 400;
        }

        this._mouseX = e.offsetX;
        this._mouseY = e.offsetY;

        e.event.preventDefault();
    },

where it seems that mouse events are duplicated as MouseEvent and FakeGlobalEvent:

with different offsets: