JavaScript/WebGL take periodically mouse coordinates from one click event until the second one

Question

I have a program that simulates a cloth (made by spring and vertices) in WebGL. What the program must do is to permit the user to click on a point in the cloth, dragging it following the mouse and if the user clicks again, release it. I need to check which click event is the one that starts the dragging and which one terminates it, then I used a global variable "clicked", set it to false at the beginning and swapped everytime the event click is triggered. Now for the dragging I need periodically to take the coordinates of the mouse, then I though using a "mousemove" event was the best solution: if the "clicked" is set to true, this means that we are in the "dragging phase", then the mousemove event must be called and continue to work until the next click event. The problem is that I don't know how to use the mousemove in connection to the click event: if I put the mousemove event outside the click event, we never enter in that, and if I put the mousemove event inside the click event, also if the "clicked" variable change from true to false, the mousemove event is always called. The skeleton of the code is the following one:

var clicked = false;


function exec() {

        let web_gl = document.getElementById("webgl-canvas").getContext('webgl2');
        web_gl.canvas.addEventListener('click', (e) => {
            clicked = !clicked;
            console.log(clicked);
            if (clicked == true) {
                web_gl.canvas.addEventListener('mousemove', (e) => {
                    //do something for dragging
                });
            };
        });
}

function main() {
    exec();
};

Here also if the console prints both false and true in the correct way, we enter always in the if condition, it seems the condition sees "clicked" always true. The other option was this one:

var clicked = false;


function exec() {

        let web_gl = document.getElementById("webgl-canvas").getContext('webgl2');
        web_gl.canvas.addEventListener('click', (e) => {
            clicked = !clicked;
            console.log(clicked);
        });
        if (clicked == true) {
            web_gl.canvas.addEventListener('click', (e) => {
                \\do something for dragging
            });
        }
}

function main() {
    exec();
};

In this case we never enter in the event, and I don't understand why. Does someone have an hint about this problem, or a better idea to handle what I need to implement?

Answer 1

Adressing your second snippet: your code is executed asynchronously, the event handlers are not executed until the event is emitted, hence clicked will still be in its initial state (false) when the condition to add the mousemove handler is evaluated, thus is will not be added and hence never be executed.

What you want to do is to add both event handlers and check within the mousemove event handler if clicked is true.

Btw. the logic you're about to implement means that a user has to click(mouse down and up) to activate the dragging and click again to disengage, rather than what's common UI practice: click(mousedown) and hold to drag things.

Answer 2

I found the solution. I used the click event in the main() function that is called only once, set a flag such that it is negated when a click is detected (passing from false to true and vice-versa). Inside the click event, if the flag is true, this is the first click, I add the mousemove event, picking the coordinates.