"paste" event listener not working for a P5.Graphic?

p5.js Coding Questions
1

Hello :slight_smile:

I would like to add a “paste” event listener to a p5.Graphic, how can I do that ?

I’ve tried like this:

g = createGraphics(100, 100);
g.elt.addEventListener("paste", pasteEvent => console.log("paste"));

But the event is not firing when I try to paste something inside g. I have other event listeners for g, such as drop, mouseover etc, all working, it’s just this paste event that doesn’t work, I don’t understand why. If I remove “g.elt.” or replace with “g.elt.parentElement” then the event works but on the entire window, I would like to be able to paste only inside g.

I also tried to add

g.attribute("contenteditable","true");

or

g.attribute("type", "input");

Without luck.

My actual workaround is to set a variable “mouseInside” to true in g’s mouseover event , set it to false in g’s mouseout event, and then in the window’s paste event I check if this variable is true, it works…

Is there a better solution ?

2

How did you get any eventListener to work on your createGraphics()?

I tried … but no luck.

function setup() {
  const cnv = createCanvas(400, 400);
  // cnv.elt.addEventListener('click', e=> { console.log(e) });
  
  const g = createGraphics(width,height);
  g.elt.addEventListener('click', e=> { console.log(e) });
  
  g.rectMode(CENTER);
  g.rect(width*0.5,height*0.5,100,100);
  image(g,0,0);
}
3

You need to call show() 1st: reference | p5.js

2 Likes
4

Thanks @GoToLoop

@Yom … this is returning what I pasted.

function setup() {
  createCanvas(400, 400);

  const g = createGraphics(100, 100);
  g.show();
  g.attribute('contenteditable', 'true');
  g.elt.addEventListener('paste', e => {
    console.log(e.clipboardData.getData('text'))
  });
  g.position(100, 100);
  g.rect(0, 0, 100, 100);
}