p5-svelte icon indicating copy to clipboard operation
p5-svelte copied to clipboard

missing native mouse function for canvas

Open shen-ui opened this issue 1 year ago • 1 comments

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. (https://github.com/processing/p5.js/issues/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.

shen-ui avatar Aug 05 '22 08:08 shen-ui

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

03kkim avatar Feb 18 '23 12:02 03kkim