P5.js: p5.Element.mouseDragged not a function

[limzykenneth]

I'm trying to attach mouseDragged event on a p5.Element, specifically an instance mode canvas. The reason I want to attach it to the element and not just use the global function or p5.Element.mouseMoved is because I have multiple canvases and I don't want event from one to leak over to the other, I will be dragging on the second canvas as well but I don't want the first canvas to fire its mouseDragged function.

First of all, is this actually a non-issue and I'm missing something obvious?

Second, I saw #752 asking about this but not much reason given why mouseDragged is not in p5.Element, so would it be possible at all to implement?

P.S. I thought I might mention this has nothing to do with the latest bug with mouseDragged in 0.5.10

[lmccart]

hmm I vaguely recall there being some reason there's no mouseDragged method for p5.Element but it's hard to remember what it was. I'm open to adding this though, if possible.

[limzykenneth]

I guess it is just chaining mousePressed and mouseReleased. There are several cases to consider: releasing the mouse outside the canvas; pressing outside then dragging in the canvas; pressing and releasing outside the canvas but still dragging in it. Not sure about the possibility of implementing them.

I have a project that may require this but at the moment I just used some hack to get around it. Currently still working on said project and couldn't work on this, it would be great if someone can have a closer look at this. 😜

[lmccart]

thinking about it more... as I recall, the main problem was that you can't necessarily detect crossing into or out of an element while mouse is down. this confusion might cause the function to feel more broken than correct. that is, if you expect it to only fire when mouse is dragged over an element, then it would feel broken to not fire when you start outside and drag in, or you start inside and drag out. thoughts?

[limzykenneth]

@lmccart I'm hacking something together for my project with p5.element version of mousePressed, mouseMoved and mouseReleased, for the most part it works as I expected, mouse dragging is only handle when the mouse is pressed in said element; mouse moving (while pressed) will stop updating if the cursor went outside the element but will resume correctly when moving back which I think is reasonable behaviour.

The larger problem lies with releasing outside the element. The element, as you pointed out indirectly, will not know the mouse is released outside the element, as such I need to have a global mouse release listener to clean up the whole thing. The whole process will need to keep a state variable which simply keep track of whether it is in the "drag" state (mouse pressed in the element and not released anywhere yet).

I'm personally not bothered by pressing outside and dragging in not being detected as I think that doesn't say elt.mouseDragged to me.

[stalgiag]

@limzykenneth do you have any ideas about how we could design an instance mode version of mouseDragged taking into account the problems with releasing outside of the element? Thought you might have some insight based on your experience with workarounds.

[limzykenneth]

For my implementation, I initiated the mouseDragged state with elt.mousePressed then update with elt.mouseMoved checking for the mouseDragged state, these parts should be relatively straight forward to implement. For the release part, we essentially want to end the mouseDragged state, so we can change it at elt.mouseReleased then also bind a global mouseReleased event that either end the state or delegate to elt.mouseReleased. See the pseudo code below for an idea:

var mouseIsDragged = false;

elt.mousePressed = function(){
  mouseIsDragged = true;

  // The global event might need to be cleaned up after released to avoid memory leaks
  global.mouseReleased = function(){
    mouseIsDragged = false;
  }
}

elt.mouseMoved = function(){
  if(mouseIsDragged){
    Run the user defined function and update mouseX/mouseY etc...
  }
}

elt.mouseReleased = function(){
  mouseIsDragged = false;
}

[stalgiag]

@limzykenneth I started working on this the way that you indicated but then if I am not mistaken elt.mousePressed fires for all the instances regardless of mouse location. Am I missing something? With that in mind is there a reason that we would chain it together like you said instead of just making a global listener for dragging like this:

p5.Element.prototype.mouseDragged = function(fxn) {
  attachListener('ondrag', fxn, this);
  return this;
};

[limzykenneth]

In my example, elt means p5.Element which means only the selected element should receive a mousePressed event, it should not start if the mouse is pressed outside the element even if it moved into the element later. Imagine two canvases, one 2D and one 3D; the 2D one has simple click and drag drawing on it and the 3D one has click and drag rotation on a model; while rotating the 3D model I don't want to worry about accidentally drawing on the 2D canvas. If that made sense.

I think the ondrag event is part of the Drag and Drop API, whether it would do what we want it to, I'm not familiar with it enough to say, you can make the decision.

[ankur54]

Hi. It seems that the issue has been resolved. Wouldn't it be better to close the issue too? Sorry if it sounds stupid.

[rt1301]

Is this issue still open?

[limzykenneth]

It's been too long since I last looked at this issue and I'm no longer sure if it still applies anymore. If the function is still something that is missing and desired, a new issue can be filed with the newly required accessibility requirement for new features. Closing this for now.