p5 2.2.1-rc.0 → 2.2.1

package/dist/dom/p5.Element.js

@@ -1,6 +1,6 @@
 import { File } from './p5.File.js';
-import { C as Color } from '../creating_reading-CgHCHxqN.js';
-import { a4 as AUTO } from '../constants-DEJVKr9Z.js';
+import { C as Color } from '../creating_reading-ZXzcZEsb.js';
+import { a4 as AUTO } from '../constants-DQyACdzq.js';
 import '../io/p5.XML.js';
 import 'colorjs.io/fn';
 import '../color/color_spaces/hsb.js';
@@ -29,8 +29,6 @@ class Element {
    * callback functions.
    *
    * @example
-   * <div>
-   * <code>
    * let p;
    *
    * function setup() {
@@ -49,8 +47,6 @@ class Element {
    * function doubleClicked() {
    *   p.remove();
    * }
-   * </code>
-   * </div>
    */
   remove() {
     // stop all audios/videos and detach all devices like microphone/camera etc
@@ -120,8 +116,6 @@ class Element {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup()  {
    *   background(200);
    *
@@ -152,11 +146,8 @@ class Element {
    *
    *   describe('The text "p5*js" written in black at the center of a white rectangle. The rectangle is inside a gray square.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup()  {
    *   background(200);
    *
@@ -182,11 +173,8 @@ class Element {
    *
    *   describe('The text "p5*js" written in black at the center of a white rectangle. The rectangle is inside a gray square.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup()  {
    *   background(200);
    *
@@ -214,8 +202,6 @@ class Element {
    *
    *   describe('The text "p5*js" written in black at the center of a white rectangle. The rectangle is inside a gray square.');
    * }
-   * </code>
-   * </div>
    */
   /**
    * @return {p5.Element}
@@ -248,8 +234,7 @@ class Element {
    * @returns {Node[]} an array of child nodes.
    *
    * @example
-   * <div class='norender'>
-   * <code>
+   * // META:norender
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -265,11 +250,9 @@ class Element {
    *
    *   describe('A gray square with the words "Parent" and "Child" written beneath it.');
    * }
-   * </code>
-   * </div>
    *
-   * <div class='norender'>
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -288,11 +271,9 @@ class Element {
    *
    *   describe('A gray square with the words "Parent" and "Child" written beneath it.');
    * }
-   * </code>
-   * </div>
    *
-   * <div class='norender notest'>
-   * <code>
+   * @example
+   * // META:norender
    * // This example assumes there is a div already on the page
    * // with id "myChildDiv".
    *
@@ -313,8 +294,6 @@ class Element {
    *
    *   describe('A gray square with the words "Parent" and "Child" written beneath it.');
    * }
-   * </code>
-   * </div>
    */
   /**
    * @param  {String|p5.Element} [child] the ID, DOM node, or <a href="#/p5.Element">p5.Element</a>
@@ -354,8 +333,7 @@ class Element {
    * @returns {String} the inner HTML of the element
    *
    * @example
-   * <div class='norender'>
-   * <code>
+   * // META:norender
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -368,11 +346,9 @@ class Element {
    *
    *   describe('A gray square with the word "hi" written beneath it.');
    * }
-   * </code>
-   * </div>
    *
-   * <div class='norender'>
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -387,11 +363,9 @@ class Element {
    *
    *   describe('A gray square with the text "Hello World" written beneath it.');
    * }
-   * </code>
-   * </div>
    *
-   * <div class='norender'>
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -405,8 +379,6 @@ class Element {
    *
    *   describe('A gray square with the word "Hello!" written beneath it.');
    * }
-   * </code>
-   * </div>
    */
   /**
    * @param  {String} [html] the HTML to be placed inside the element
@@ -434,8 +406,6 @@ class Element {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   // Create a canvas element and
    *   // assign it to cnv.
@@ -453,8 +423,6 @@ class Element {
    *
    *   describe('The text "mycanvas" written in black on a gray background.');
    * }
-   * </code>
-   * </div>
    */
   /**
    * @return {String} ID of the element.
@@ -481,8 +449,6 @@ class Element {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   // Create a canvas element and
    *   // assign it to cnv.
@@ -502,8 +468,6 @@ class Element {
    *   describe('The word "small" written in black on a gray canvas.');
    *
    * }
-   * </code>
-   * </div>
    */
   /**
    * @return {String} element's classes, if any.
@@ -526,8 +490,7 @@ class Element {
    * @chainable
    *
    * @example
-   * <div class='norender'>
-   * <code>
+   * // META:norender
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -541,8 +504,6 @@ class Element {
    *
    *   describe('A gray square.');
    * }
-   * </code>
-   * </div>
    */
   addClass(c) {
     if (this.elt.className) {
@@ -562,8 +523,7 @@ class Element {
    * @chainable
    *
    * @example
-   * <div class='norender'>
-   * <code>
+   * // META:norender
    * // In this example, a class is set when the div is created
    * // and removed when mouse is pressed. This could link up
    * // with a CSS style rule to toggle style properties.
@@ -588,8 +548,6 @@ class Element {
    * function mousePressed() {
    *   div.removeClass('myClass');
    * }
-   * </code>
-   * </div>
    */
   removeClass(c) {
     // Note: Removing a class that does not exist does NOT throw an error in classList.remove method
@@ -604,8 +562,7 @@ class Element {
    * @param c {String} name of class to check.
    *
    * @example
-   * <div class='norender'>
-   * <code>
+   * // META:norender
    * let div;
    *
    * function setup() {
@@ -630,8 +587,6 @@ class Element {
    *     div.removeClass('show');
    *   }
    * }
-   * </code>
-   * </div>
    */
   hasClass(c) {
     return this.elt.classList.contains(c);
@@ -644,8 +599,7 @@ class Element {
    * @chainable
    *
    * @example
-   * <div class='norender'>
-   * <code>
+   * // META:norender
    * let div;
    *
    * function setup() {
@@ -666,8 +620,6 @@ class Element {
    * function mousePressed() {
    *   div.toggleClass('show');
    * }
-   * </code>
-   * </div>
    */
   toggleClass(c) {
     // classList also has a toggle() method, but we cannot use that yet as support is unclear.
@@ -694,8 +646,6 @@ class Element {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -711,8 +661,6 @@ class Element {
    *
    *   describe('A gray square and an orange rectangle. The rectangle is at the center of the page.');
    * }
-   * </code>
-   * </div>
    */
   center(align) {
     const style = this.elt.style.display;
@@ -766,8 +714,7 @@ class Element {
    * @returns {Object} object of form `{ x: 0, y: 0 }` containing the element's position.
    *
    * @example
-   * <div>
-   * <code class='norender'>
+   * // META:norender
    * function setup() {
    *   let cnv = createCanvas(100, 100);
    *
@@ -779,11 +726,9 @@ class Element {
    *
    *   describe('A gray square that is 50 pixels to the right and 100 pixels down from the top-left corner of the web page.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code class='norender'>
+   * @example
+   * // META:norender
    * function setup() {
    *   let cnv = createCanvas(100, 100);
    *
@@ -795,8 +740,6 @@ class Element {
    *
    *   describe('A gray square in the top-left corner of the web page.');
    * }
-   * </code>
-   * </div>
    */
   /**
    * @param  {Number} [x] x-position relative to top-left of window (optional)
@@ -834,8 +777,6 @@ class Element {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * let p;
    *
    * function setup() {
@@ -855,8 +796,6 @@ class Element {
    * function doubleClicked() {
    *   p.show();
    * }
-   * </code>
-   * </div>
    */
   show() {
     this.elt.style.display = 'block';
@@ -887,8 +826,6 @@ class Element {
    * function doubleClicked() {
    *   p.hide();
    * }
-   * </code>
-   * </div>
    */
   hide() {
     this.elt.style.display = 'none';
@@ -922,8 +859,6 @@ class Element {
    * @return {Object} width and height of the element in an object.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -939,11 +874,8 @@ class Element {
    *
    *   describe('A gray square with a pink rectangle near its top.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -965,11 +897,8 @@ class Element {
    *
    *   describe('A gray square with a pink rectangle near its top. The text "80 x 40" is written within the rectangle.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let img1;
    * let img2;
    *
@@ -1005,8 +934,6 @@ class Element {
    * function resizeImage() {
    *   img2.size(50, AUTO);
    * }
-   * </code>
-   * </div>
    */
   /**
    * @param  {(Number|AUTO)} [w]   width of the element, either AUTO, or a number.
@@ -1086,8 +1013,6 @@ class Element {
    * @returns {String} value of the property.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1100,11 +1025,8 @@ class Element {
    *
    *   describe('The text p5*js written in pink on a gray background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1120,11 +1042,8 @@ class Element {
    *
    *   describe('The text p5*js written in pink on a gray background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1138,11 +1057,8 @@ class Element {
    *
    *   describe('The text p5*js written in pink on a gray background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1161,8 +1077,6 @@ class Element {
    *
    *   describe('The text "rgb(255, 20, 147)" written in pink on a gray background.');
    * }
-   * </code>
-   * </div>
    */
   /**
    * @param  {String} property
@@ -1289,8 +1203,6 @@ class Element {
    * @return {String} value of the attribute.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1318,8 +1230,6 @@ class Element {
    *
    *   describe('A gray square with the text "hi" written on three separate lines, each placed further to the right.');
    * }
-   * </code>
-   * </div>
    */
   /**
    * @param  {String} attr       attribute to set.
@@ -1360,8 +1270,6 @@ class Element {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * let p;
    *
    * function setup() {
@@ -1382,8 +1290,6 @@ class Element {
    * function doubleClicked() {
    *   p.removeAttribute('align');
    * }
-   * </code>
-   * </div>
    */
   removeAttribute(attr) {
     if (
@@ -1410,8 +1316,6 @@ class Element {
    * @return {String|Number} value of the element.
    *
    * @example
-   * <div>
-   * <code>
    * let input;
    *
    * function setup() {
@@ -1432,11 +1336,8 @@ class Element {
    *   let msg = input.value();
    *   text(msg, 0, 55);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let input;
    *
    * function setup() {
@@ -1462,8 +1363,6 @@ class Element {
    * function doubleClicked() {
    *   input.value('hello');
    * }
-   * </code>
-   * </div>
    */
   /**
    * @param  {String|Number}     value
@@ -1494,8 +1393,6 @@ class Element {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   // Create a canvas element and
    *   // assign it to cnv.
@@ -1516,8 +1413,6 @@ class Element {
    *   let c = random(['red', 'yellow', 'blue', 'green']);
    *   background(c);
    * }
-   * </code>
-   * </div>
    */
   mousePressed(fxn) {
     // Prepend the mouse property setters to the event-listener.
@@ -1547,8 +1442,6 @@ class Element {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   // Create a canvas element and
    *   // assign it to cnv.
@@ -1569,8 +1462,6 @@ class Element {
    *   let c = random(['red', 'yellow', 'blue', 'green']);
    *   background(c);
    * }
-   * </code>
-   * </div>
    */
   doubleClicked(fxn) {
     Element._adjustListener('dblclick', fxn, this);
@@ -1595,8 +1486,6 @@ class Element {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   // Create a canvas element and
    *   // assign it to cnv.
@@ -1617,11 +1506,8 @@ class Element {
    *   let c = random(['red', 'yellow', 'blue', 'green']);
    *   background(c);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   // Create a canvas element and
    *   // assign it to cnv.
@@ -1654,8 +1540,6 @@ class Element {
    *     square(40, 40, 20);
    *   }
    * }
-   * </code>
-   * </div>
    */
   mouseWheel(fxn) {
     Element._adjustListener('wheel', fxn, this);
@@ -1676,8 +1560,6 @@ class Element {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   // Create a canvas element and
    *   // assign it to cnv.
@@ -1698,8 +1580,6 @@ class Element {
    *   let c = random(['red', 'yellow', 'blue', 'green']);
    *   background(c);
    * }
-   * </code>
-   * </div>
    */
   mouseReleased(fxn) {
     Element._adjustListener('pointerup', fxn, this);
@@ -1720,8 +1600,6 @@ class Element {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   // Create a canvas element and
    *   // assign it to cnv.
@@ -1742,8 +1620,6 @@ class Element {
    *   let c = random(['red', 'yellow', 'blue', 'green']);
    *   background(c);
    * }
-   * </code>
-   * </div>
    */
   mouseClicked(fxn) {
     Element._adjustListener('click', fxn, this);
@@ -1761,8 +1637,6 @@ class Element {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   // Create a canvas element and
    *   // assign it to cnv.
@@ -1783,8 +1657,6 @@ class Element {
    *   let c = random(['red', 'yellow', 'blue', 'green']);
    *   background(c);
    * }
-   * </code>
-   * </div>
    */
   mouseMoved(fxn) {
     Element._adjustListener('pointermove', fxn, this);
@@ -1802,8 +1674,6 @@ class Element {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   // Create a canvas element and
    *   // assign it to cnv.
@@ -1824,8 +1694,6 @@ class Element {
    *   let c = random(['red', 'yellow', 'blue', 'green']);
    *   background(c);
    * }
-   * </code>
-   * </div>
    */
   mouseOver(fxn) {
     Element._adjustListener('pointerover', fxn, this);
@@ -1843,8 +1711,6 @@ class Element {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   // Create a canvas element and
    *   // assign it to cnv.
@@ -1865,8 +1731,6 @@ class Element {
    *   let c = random(['red', 'yellow', 'blue', 'green']);
    *   background(c);
    * }
-   * </code>
-   * </div>
    */
   mouseOut(fxn) {
     Element._adjustListener('pointerout', fxn, this);
@@ -1884,8 +1748,6 @@ class Element {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * // Drag a file over the canvas to test.
    *
    * function setup() {
@@ -1906,8 +1768,6 @@ class Element {
    * function helloFile() {
    *   text('hello, file', 50, 50);
    * }
-   * </code>
-   * </div>
    */
   dragOver(fxn) {
     Element._adjustListener('dragover', fxn, this);
@@ -1924,8 +1784,6 @@ class Element {
    *                                `false` disables the function.
    * @chainable
    * @example
-   * <div>
-   * <code>
    * // Drag a file over, then off
    * // the canvas to test.
    *
@@ -1947,8 +1805,6 @@ class Element {
    * function byeFile() {
    *   text('bye, file', 50, 50);
    * }
-   * </code>
-   * </div>
    */
   dragLeave(fxn) {
     Element._adjustListener('dragleave', fxn, this);
@@ -1965,8 +1821,6 @@ class Element {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * let dropdown;
    *
    * function setup() {
@@ -1992,11 +1846,8 @@ class Element {
    *   let c = dropdown.value();
    *   background(c);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let checkbox;
    *
    * function setup() {
@@ -2021,8 +1872,6 @@ class Element {
    *     circle(50, 50, 30);
    *   }
    * }
-   * </code>
-   * </div>
    */
   changed(fxn) {
     Element._adjustListener('change', fxn, this);
@@ -2041,8 +1890,6 @@ class Element {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * let slider;
    *
    * function setup() {
@@ -2065,11 +1912,8 @@ class Element {
    *   let g = slider.value();
    *   background(g);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let input;
    *
    * function setup() {
@@ -2093,8 +1937,6 @@ class Element {
    *   let msg = input.value();
    *   text(msg, 5, 50);
    * }
-   * </code>
-   * </div>
    */
   input(fxn) {
     Element._adjustListener('input', fxn, this);
@@ -2119,8 +1961,6 @@ class Element {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * // Drop an image on the canvas to view
    * // this example.
    * let img;
@@ -2151,11 +1991,8 @@ class Element {
    *   // Draw the image.
    *   image(img, 0, 0, width, height);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Drop an image on the canvas to view
    * // this example.
    * let img;
@@ -2207,8 +2044,6 @@ class Element {
    *   msg.style('color', c);
    *   msg.style('font-size', '12px');
    * }
-   * </code>
-   * </div>
    */
   drop(callback, fxn) {
     // Is the file stuff supported?
@@ -2266,8 +2101,6 @@ class Element {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * let stickyNote;
    * let textInput;
    *
@@ -2319,8 +2152,6 @@ class Element {
    * function handleInput() {
    *   stickyNote.html(textInput.value());
    * }
-   * </code>
-   * </div>
    */
   draggable(elmMove) {
     let isTouch = 'ontouchstart' in window;
@@ -2465,8 +2296,6 @@ function element(p5, fn){
    * @param {p5} [pInst] pointer to p5 instance.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2490,8 +2319,6 @@ function element(p5, fn){
    *   let c = random(['red', 'yellow', 'blue', 'green']);
    *   background(c);
    * }
-   * </code>
-   * </div>
    */
   p5.Element = Element;
 
@@ -2519,8 +2346,6 @@ function element(p5, fn){
    * object's properties and methods can be used directly.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   // Create a canvas element and
    *   // assign it to cnv.
@@ -2534,8 +2359,6 @@ function element(p5, fn){
    *
    *   describe('A gray square with a pink border drawn with dashed lines.');
    * }
-   * </code>
-   * </div>
    *
    * @type {HTMLElement}
    * @property elt