Change how all classes are defined to be more exportable

Author: limzykenneth

src/app.js

@@ -6,8 +6,8 @@ import './core/friendly_errors/file_errors';
 import './core/friendly_errors/fes_core';
 import './core/friendly_errors/sketch_reader';
 import './core/p5.Element';
-import './core/p5.Graphics';
-import './core/rendering';
+// import './core/p5.Graphics';
+// import './core/rendering';
 import shape from './shape';
 shape(p5);
 
@@ -29,7 +29,8 @@ import data from './data';
 data(p5);
 
 // DOM
-import './dom/dom';
+import dom from './dom/dom';
+dom(p5, p5.prototype);
 
 // events
 import events from './events';

src/core/main.js

@@ -664,12 +664,16 @@ import environment from './environment';
 import rendering from './rendering';
 import renderer from './p5.Renderer';
 import renderer2D from './p5.Renderer2D';
+import graphics from './p5.Graphics';
+import element from './p5.Element';
 
 p5.registerAddon(transform);
 p5.registerAddon(structure);
 p5.registerAddon(environment);
 p5.registerAddon(rendering);
 p5.registerAddon(renderer);
 p5.registerAddon(renderer2D);
+p5.registerAddon(graphics);
+p5.registerAddon(element);
 
 export default p5;

src/core/p5.Element.js

@@ -4,53 +4,7 @@
  * @for p5.Element
  */
 
-import p5 from './main';
-
-/**
- * A class to describe an
- * <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started" target="_blank">HTML element</a>.
- *
- * Sketches can use many elements. Common elements include the drawing canvas,
- * buttons, sliders, webcam feeds, and so on.
- *
- * All elements share the methods of the `p5.Element` class. They're created
- * with functions such as <a href="#/p5/createCanvas">createCanvas()</a> and
- * <a href="#/p5/createButton">createButton()</a>.
- *
- * @class p5.Element
- * @param {HTMLElement} elt wrapped DOM element.
- * @param {p5} [pInst] pointer to p5 instance.
- *
- * @example
- * <div>
- * <code>
- * function setup() {
- *   createCanvas(100, 100);
- *
- *   background(200);
- *
- *   // Create a button element and
- *   // place it beneath the canvas.
- *   let btn = createButton('change');
- *   btn.position(0, 100);
- *
- *   // Call randomColor() when
- *   // the button is pressed.
- *   btn.mousePressed(randomColor);
- *
- *   describe('A gray square with a button that says "change" beneath it. The square changes color when the user presses the button.');
- * }
- *
- * // Paint the background either
- * // red, yellow, blue, or green.
- * function randomColor() {
- *   let c = random(['red', 'yellow', 'blue', 'green']);
- *   background(c);
- * }
- * </code>
- * </div>
- */
-p5.Element = class {
+class Element {
   constructor(elt, pInst) {
     this.elt = elt;
     this._pInst = this._pixelsState = pInst;
@@ -944,52 +898,101 @@ p5.Element = class {
   }
 };
 
-/**
- * The element's underlying `HTMLElement` object.
- *
- * The
- * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a>
- * object's properties and methods can be used directly.
- *
- * @example
- * <div>
- * <code>
- * function setup() {
- *   // Create a canvas element and
- *   // assign it to cnv.
- *   let cnv = createCanvas(100, 100);
- *
- *   background(200);
- *
- *   // Set the border style for the
- *   // canvas.
- *   cnv.elt.style.border = '5px dashed deeppink';
- *
- *   describe('A gray square with a pink border drawn with dashed lines.');
- * }
- * </code>
- * </div>
- *
- * @property elt
- * @for p5.Element
- * @name elt
- * @readOnly
- */
+function element(p5, fn){
+  /**
+   * A class to describe an
+   * <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started" target="_blank">HTML element</a>.
+   *
+   * Sketches can use many elements. Common elements include the drawing canvas,
+   * buttons, sliders, webcam feeds, and so on.
+   *
+   * All elements share the methods of the `p5.Element` class. They're created
+   * with functions such as <a href="#/p5/createCanvas">createCanvas()</a> and
+   * <a href="#/p5/createButton">createButton()</a>.
+   *
+   * @class p5.Element
+   * @param {HTMLElement} elt wrapped DOM element.
+   * @param {p5} [pInst] pointer to p5 instance.
+   *
+   * @example
+   * <div>
+   * <code>
+   * function setup() {
+   *   createCanvas(100, 100);
+   *
+   *   background(200);
+   *
+   *   // Create a button element and
+   *   // place it beneath the canvas.
+   *   let btn = createButton('change');
+   *   btn.position(0, 100);
+   *
+   *   // Call randomColor() when
+   *   // the button is pressed.
+   *   btn.mousePressed(randomColor);
+   *
+   *   describe('A gray square with a button that says "change" beneath it. The square changes color when the user presses the button.');
+   * }
+   *
+   * // Paint the background either
+   * // red, yellow, blue, or green.
+   * function randomColor() {
+   *   let c = random(['red', 'yellow', 'blue', 'green']);
+   *   background(c);
+   * }
+   * </code>
+   * </div>
+   */
+  p5.Element = Element;
 
-/**
- * A `Number` property that stores the element's width.
- *
- * @type {Number}
- * @property width
- * @for p5.Element
- */
+  /**
+   * The element's underlying `HTMLElement` object.
+   *
+   * The
+   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a>
+   * object's properties and methods can be used directly.
+   *
+   * @example
+   * <div>
+   * <code>
+   * function setup() {
+   *   // Create a canvas element and
+   *   // assign it to cnv.
+   *   let cnv = createCanvas(100, 100);
+   *
+   *   background(200);
+   *
+   *   // Set the border style for the
+   *   // canvas.
+   *   cnv.elt.style.border = '5px dashed deeppink';
+   *
+   *   describe('A gray square with a pink border drawn with dashed lines.');
+   * }
+   * </code>
+   * </div>
+   *
+   * @property elt
+   * @for p5.Element
+   * @name elt
+   * @readOnly
+   */
 
-/**
- * A `Number` property that stores the element's height.
- *
- * @type {Number}
- * @property height
- * @for p5.Element
- */
+  /**
+   * A `Number` property that stores the element's width.
+   *
+   * @type {Number}
+   * @property width
+   * @for p5.Element
+   */
+
+  /**
+   * A `Number` property that stores the element's height.
+   *
+   * @type {Number}
+   * @property height
+   * @for p5.Element
+   */
+}
 
-export default p5.Element;
+export default element;
+export { Element };