visjs
Graph movement don't stop after mouseup event, esm version throws error
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();
};
...
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 https://github.com/visjs/vis-util/pull/1417
Not sure if this is the best fix/workaround.
I had a look at the code raising the error, noticed a couple of (void 0) functions, and guessed they were intended to be document.removeEventListener. Fixed by setting the _onMouseUp method in the prototype of Graph3d:
function mouse_up(event) {
this.frame.style.cursor = "auto";
this.leftButtonDown = false;
document.removeEventListener("mousemove", this.onmousemove);
document.removeEventListener("mouseup", this.onmousemove);
if (event) {
event.preventDefault();
}
}
Graph3d.prototype._onMouseUp = mouse_up;
:tada: This issue has been resolved in version 6.0.8 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
