missing native mouse function for canvas

[shen-ui]

p5 thinks of the entire window as the sketch.

p5.mouseDragged = ( ) => { ... }

to inhibit this behavior, the developers of P5 allow you to directly use these functions on the canvas.
link from another issue from p5.js. Copying the suggested codeblock from original answer.
(processing/p5.js#1437)

function setup() {
  var c = createCanvas(100, 100);
  c.mousePressed(doStuff);
}

function doStuff() {
  console.log('clicked on canvas');
}

I noticed this functionally does work on the p5-svelte for mousePressed, mouseReleased, mouseClicked except for mouseDragged.

here's my example block:

p5.setup = () => {
      let canvas = p5.createCanvas(width, height);
      canvas.mousePressed(() => {
        ...
      });
      // Here
      canvas.mouseDragged(() => {
        ...
      });

      canvas.mouseReleased(() => {
        ...
      });

      canvas.mouseClicked(() => {
        ...
      });
    };

I'm not sure if this was intended or if I'm not properly implementing this. If this isn't integrated, I'd like to request this functionality.

[03kkim]

I'm having the same problem currently. I'm unable to call mouseClicked() on a specific element.

[mishazawa]

I'm fixed my case (move event tracked in main loop) by checking mouse buttons state explicitly:

const state = { hover: false, ...

setup() {
  ...
  canvas.mouseOver(() => (state.hover = true));
  canvas.mouseOut(() => (state.hover = false));
}

...
// check here
function isMouseInteraction(btn) {
  return state.hover && renderer.mouseIsPressed && renderer.mouseButton === btn;
}