search

processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
http://p5js.org/
GNU Lesser General Public License v2.1
21.7k stars 3.34k forks source link

Search For Canvases Under User-Supplied DOM Node #3530

Open twavv opened 5 years ago

twavv commented 5 years ago

This is causing some issues in a project where we use IFrames and share some libraries between them (explicitly, https://github.com/JuliaGizmos/WebIO.jl/issues/225 is where I lay out the issues we're facing).

Essentially, I'd like to change this line https://github.com/processing/p5.js/blob/edb41cf513efafd3734221a3b8cdc266f90d6bb3/src/core/main.js#L342 to be something more like

    var dom = this._userNode || document;
    var canvases = dom.getElementsByTagName('canvas');

I can open up a PR if you'd accept it but I wanted to hear back first.

meiamsome commented 5 years ago

I think there's definitely some merit to such a change - although there are plenty of instances where we're using document elsewhere in the library that might also need similar checking?

This seems helpful in a general case too because it would prevent us walking over all canvases on the page that don't belong to us and hiding them all. (Use case of multiple p5 sketches, or just being included alongside other canvas elements)

In particular, perhaps after this part of the code: https://github.com/processing/p5.js/blob/edb41cf513efafd3734221a3b8cdc266f90d6bb3/src/core/main.js#L235-L240

I think we could add

    this._userNode = this._userNode || document;

and then use this._userNode more often throughout the code-base.

Spongman commented 5 years ago

could we use the p5.prototype._elements array for this?