Graph movement don't stop after mouseup event, esm version throws error

[sergiolindau]

Graph movement don't stop after mouseup event

When you click and hold on a graph the movement starts, but does not stop when you release the mouse button. In the esm version (dist/esm.js), when you release the mouse button, the error appears:

Uncaught TypeError: undefined is not a function
     at Graph3d$1._onMouseUp (Graph3d.js:2163:3)
     at HTMLDocument.onmouseup (Graph3d.js:2080:8)

To Reproduce

To test I use the example in

https://visjs.github.io/vis-graph3d/examples/graph3d/01_basics.html

with some modifications to wrap inside an import:

function (id): void {
        import('https://cdn.jsdelivr.net/npm/vis-graph3d@latest/dist/esm.js').then(async (module) => {
            const vis = await module.default;
            function custom(x, y) {
                return Math.sin(x / 50) * Math.cos(y / 50) * 50 + 50;
            }
            // Create and populate a data table.
            let data = new vis.DataSet();
            // create some nice looking data with sin/cos
            var counter = 0;
            var steps = 50; // number of datapoints will be steps*steps
            var axisMax = 314;
            var axisStep = axisMax / steps;
            for (var x = 0; x < axisMax; x += axisStep) {
                for (var y = 0; y < axisMax; y += axisStep) {
                    var value = custom(x, y);
                    data.add({ id: counter++, x: x, y: y, z: value, style: value });
                }
            }

            // specify options
            var options = {
                width: "600px",
                height: "600px",
                style: "surface",
                showPerspective: true,
                showGrid: true,
                showShadow: false,
                keepAspectRatio: true,
                verticalRatio: 0.5,
            };

            // Instantiate our graph object.
            const container = document.getElementById(id);
            let graph3d = new vis.Graph3d(container, data, options);
        })
    }

Expected behavior
I expect that when I release the mouse button the graph movement will stop.

Analysis
When I release the mouse button, the event throws an Error as related. It means that undefined is being used as function. At line 21486 of 'dist/esm.js' we found the problem:

Graph3d$1.prototype._onMouseUp = function (event) {
  this.frame.style.cursor = "auto";
  this.leftButtonDown = false;

  // remove event listeners here
  undefined(document, "mousemove", this.onmousemove);
  undefined(document, "mouseup", this.onmouseup);
  preventDefault(event);
};

To bypass this bug until it is solved we set Graph3d._onMouseUp after instantiation:

...
            let graph3d = new vis.Graph3d(container, data, options);
            graph3d._onMouseUp = function (event: Event) {
                this.frame.style.cursor = "auto";
                this.leftButtonDown = false;
                // remove event listeners here
                document.removeEventListener("mousemove", this.onmousemove);
                document.removeEventListener("mouseup", this.onmouseup);
                event.preventDefault();
            };
...

[robaho]

Yes, this is a critical bug. The reason is because the dependency on vis-util is incorrect - allowing any minor version ^5.0.1 but vis-util removed the add/removeEventListener methods in version 5.0.6.

See visjs/vis-util#1417