MouseDragged/MousePressed/MouseReleased etc outside of canvas about react-p5

[Gherciu]

@Hahlh It seems that this is an error from the p5 library not from react-p5 because in this wrapper I did not attach events to the window or document.......all events are handled by p5(
I'll try today to debug it and find a way how to fix it maybe is a problem with the used p5 version.

About the list of events .....yes this list is not full, unfortunately.
But if someone wants to find and add there the remaining events, it will be nice and I will immediately merge and publish a new version.

[Gherciu]

@Hahlh yes everything should be compatible because they didn't introduce breaking changes......
But I'm investigating this behaviour now, maybe I will found the problem.

[Hahlh]

Regarding the attached events not firing:

I resolved this by setting the z-index of the canvas element to 50 and position to relative (to make z-index work) and manually attaching an event listener to the canvas:

const setup = (p5: p5Types, canvasParentRef: Element) => {
      canvasParent = p5.createCanvas(width, height).parent(canvasParentRef)
      canvasParent.elt.addEventListener("mousedown", (event) => {
        console.log("EVENT FIRED----------------------------:", event)
      })
    }

This works now beautifully to also not trigger click events, if there are other DOM elements rendered over the canvas.

[Gherciu]

@Hahlh yes, will be nice if you can find the remaining events and add them to the list in a PR.

About your workaround with mouseclick...I would propose another more let's say React related.

<div onClick={this.onCamvasClick}>
  <Scketch setup={this.setup} draw={this.draw} />
</div>

[Gherciu]

Also in the latest version, I've added the possibility to access the event...and I've documented it.

mouseClicked(_p5, event) {
  console.log(event)
  // event.preventDefault()
  // event.stopPropagation()
  // event.target
}

it can be useful.....maybe the problem is that p5 doesnt call stopPropagation or something else.....but need to test if that's the problem

[Gherciu]

@Hahlh the benefit with props is that these listeners are directly handled by p5 and you have access to the p5 in these methods ....outside of these prop-methods you only have access to the window.p5 which is not the same reference as the p5 in your sketch methods....... I'm using new p5(p => {}) to create a sketch....and only using prop-methods you have access to this p
But I don't know at the moment why it listens to the window but not to canvas.

[Gherciu]

@Hahlh hmm thanks for this investigation.... so thats actually a p5 issue but not react-p5 ...
I think I will document that because everyoane is confused.

[Hahlh]

You are welcome, @Gherciu!

For the moment I think, that attaching events in the setup function and using state for the boolean values like isMousePressed should cover most use cases.

If there are any use cases, that can't be dealt with with the current setup, I am sure we can find ways to solve them 👍

[Gherciu]

@IcyTv did you used parent to render the canvas or not??

[Gherciu]

maybe is a issue related to wrong usage

[Hahlh]

Good day @Gherciu !

I hope you are doing great.

I face a similar issue and have declared the canvas exactly as stated in the docs:

canvas = p5.createCanvas(width, height).parent(canvasParentRef)

return (
      <Sketch
        className="-z-10"
        mouseClicked={drawSticker}
        windowResized={windowResized}
        setup={setup}
        draw={draw}
        preload={preload}
      />
    )

What can I do to debug this issue?
I tried so far to find the specific event in both the Chrome and Firefox devtools, but unfortunately without success.
Which is akward, since the event triggers everywhere on the page and that should mean, that it is attached to html, body or some wrapper element?

How can I identify the specific event in the devtools?

I also tested setting a smaller canvas size to double check that the issue isn't related to canvas size.

Looking at the p5 object, the main canvas doesn't have anything set onclick.
If you would like to and if it is helpful, I can provide the complete p5 object in a pastebin.

Please also tell me, if you would like me to open a separate issue for this.

[Hahlh]

Is it correct, that events always get attached to the global p5 object?

See:

react-p5/src/index.js

Lines 37 to 43 in 82a5086

	p5Events.forEach((event) => {
	if (this.props[event]) {
	p[event] = () => {
	this.props[event](p);
	};
	}
	});

According to this comment by Lauren Lee McCarthy it would be necessary to attach the event to the canvas directly instead of the p5 object.

So far I have had no luck with attaching an event listener to the canvas and the react-p5 wrapper. Those events get added successfully, but simply don't fire.

On a side note:
There is also just a limited set of events being passed through as props:

react-p5/src/index.js

Lines 16 to 36 in 82a5086

	const p5Events = [
	"draw",
	"windowResized",
	"preload",
	"mouseClicked",
	"doubleClicked",
	"mouseMoved",
	"mousePressed",
	"mouseWheel",
	"mouseDragged",
	"mouseReleased",
	"keyPressed",
	"keyReleased",
	"keyTyped",
	"touchStarted",
	"touchMoved",
	"touchEnded",
	"deviceMoved",
	"deviceTurned",
	"deviceShaken",
	];

It seems that all events that p5 allows could be used, if

1. the whole list of available events is used or
2. the props name is passed through and simply assigned to p5 making it the users responsibility to work with the correct prop names. Would that require an additional error check?

[Hahlh]

@Gherciu Thank you for your incredibly fast reply!

P5js 1.3.0 got released 14 days ago. Do you think everything should be compatible?

[Hahlh]

The next question would be, how to best allow users to decide whether they would like to attach an event to the canvas element or to the global p5 object.

Maybe the easiest enhancement for the moment would be, to add the remaining p5 events to the event list (they should remain fairly static over time) and to add to the documentation, that events that get added via the props will be attached to the global p5 object and that users should use the manual method like in the example above, if they would like events to be scoped for the canvas or other elements.

If you would like to, I will later create a PR for the docs.

For the remaining events, I will check how best to include them as some of the functionality like isMousePressed is triggered through booleans and a function if they are true?

[Hahlh]

Also in the latest version, I've added the possibility to access the event...and I've documented it.

mouseClicked(_p5, event) {
  console.log(event)
  // event.preventDefault()
  // event.stopPropagation()
  // event.target
}

it can be useful.....maybe the problem is that p5 doesnt call stopPropagation or something else.....but need to test if that's the problem

Awesome, thank you, Gherciu!
I will check, whether I can make the same behavior work directly through manipulating the event object.

@Hahlh yes, will be nice if you can find the remaining events and add them to the list in a PR.

About your workaround with mouseclick...I would propose another more let's say React related.

<div onClick={this.onCamvasClick}>
  <Scketch setup={this.setup} draw={this.draw} />
</div>

I could imagine the props becoming quite complicated, if the ability to select the target element is added, so I find this approach reasonable 👍 .

Are there any direct benefits to using the props instead of adding the listeners within the component?

How would it be possible to restrict things like isMousePressed to a specific element like the canvas?
Using state and the mousePressed, mouseReleased events?

[Hahlh]

@Hahlh the benefit with props is that these listeners are directly handled by p5 and you have access to the p5 in these methods ....outside of these prop-methods you only have access to the window.p5 which is not the same reference as the p5 in your sketch methods....... I'm using new p5(p => {}) to create a sketch....and only using prop-methods you have access to this p
But I don't know at the moment why it listens to the window but not to canvas.

Here it listens to the window and therefore also events on the canvas work. Because it listens to the whole window the events fire across the whole page, but drawing happens only on the canvas.

Normally the event listener would have to be attached to the canvas itself in order to prevent the events triggering on clicks outside of the canvas, if I am understanding it right:

Therefore, if one doesn't use props, but attaches the events for example in the setup function using the p5 instance, event triggers are successfully limited to the canvas.