DOM object

README.md

@@ -15,7 +15,8 @@
 ### Getting started
 
 - There are a couple of example in the example folder, they can be used as base for your project.
-  - [Diagram](https://tentone.github.io/escher.js/examples/diagram)
+  - [Playground](https://tentone.github.io/escher.js/examples/playground)
+  - [Physics](https://tentone.github.io/escher.js/examples/physics)
   - [PDF & TIFF (External libraries)](https://tentone.github.io/escher.js/examples/pdftiff)
   - [Masks](https://tentone.github.io/escher.js/examples/mask)
   - [Snake Game](https://tentone.github.io/escher.js/examples/snake)

build/escher.js

@@ -3194,11 +3194,11 @@
 	};
 
 	/**
-	 * A DOM object transformed using CSS3D to ver included in the graph.
+	 * A DOM object transformed using CSS3D to be included in the scene.
 	 *
-	 * DOM objects always stay on top of everything else, mouse events are not supported for these objects.
+	 * DOM objects always stay on top of everything else, it is not possible to layer these object with regular canvas objects.
 	 *
-	 * Use the DOM events for interaction with these types of objects.
+	 * By default mouse events are not supported for these objects (it does not implement pointer collision checking). Use the DOM events for interaction with these types of objects.
 	 *
 	 * @class
 	 * @param {Element} parentDOM Parent DOM element that contains the drawing canvas.
@@ -3211,15 +3211,19 @@
 
 		/**
 		 * Parent element that contains this DOM div.
+		 *
+		 * @type {Element}
 		 */
 		this.parentDOM = parentDOM;
 
 		/**
 		 * DOM element contained by this object.
 		 *
-		 * Bye default it has the pointerEvents style set to none.
+		 * By default it has the pointerEvents style set to none. In order to use any DOM event with this object first you have to set the element.style.pointerEvents to "auto".
+		 *
+		 * @type {Element}
 		 */
-		this.element = document.createElement("div");
+		this.element = document.createElement(type || "div");
 		this.element.style.transformStyle = "preserve-3d";
 		this.element.style.position = "absolute";
 		this.element.style.top = "0px";
@@ -3236,11 +3240,17 @@
 
 	DOM.prototype = Object.create(Object2D.prototype);
 
+	/**
+	 * DOM object implements onAdd() method to automatically attach the DOM object to the DOM tree.
+	 */
 	DOM.prototype.onAdd = function()
 	{
 		this.parentDOM.appendChild(this.element);
 	};
 
+	/**
+	 * DOM object implements onAdd() method to automatically remove the DOM object to the DOM tree.
+	 */
 	DOM.prototype.onRemove = function()
 	{
 		this.parentDOM.removeChild(this.element);

examples/node.html

@@ -81,16 +81,14 @@
 			{
 				super();
 
-				this.div = new Escher.DOM(canvas.parentElement);
-				this.div.size.set(100, 50);
-				this.div.origin.set(50, 25);
+				this.div = new Escher.DOM(canvas.parentElement, "input");
+				this.div.size.set(70, 20);
+				this.div.origin.set(35, 10);
+				this.div.element.style.pointerEvents = "auto";
+				this.div.element.type = "number";
+				this.div.element.style.fontFamily = "Arial";
+				this.div.element.style.textAlign = "center";
 				this.add(this.div);
-
-				this.input = document.createElement("input");
-				this.input.type = "number";
-				this.input.style.fontFamily = "Arial";
-				this.input.style.textAlign = "center";
-				this.div.element.appendChild(this.input);
 			}
 
 			registerSockets()

source/objects/DOM.js

@@ -2,11 +2,11 @@ import {Object2D} from "../Object2D.js";
 import {Vector2} from "../math/Vector2.js";
 
 /**
- * A DOM object transformed using CSS3D to ver included in the graph.
+ * A DOM object transformed using CSS3D to be included in the scene.
  *
- * DOM objects always stay on top of everything else, mouse events are not supported for these objects.
+ * DOM objects always stay on top of everything else, it is not possible to layer these object with regular canvas objects.
  *
- * Use the DOM events for interaction with these types of objects.
+ * By default mouse events are not supported for these objects (it does not implement pointer collision checking). Use the DOM events for interaction with these types of objects.
  *
  * @class
  * @param {Element} parentDOM Parent DOM element that contains the drawing canvas.
@@ -19,15 +19,19 @@ function DOM(parentDOM, type)
 
 	/**
 	 * Parent element that contains this DOM div.
+	 *
+	 * @type {Element}
 	 */
 	this.parentDOM = parentDOM;
 
 	/**
 	 * DOM element contained by this object.
 	 *
-	 * Bye default it has the pointerEvents style set to none.
+	 * By default it has the pointerEvents style set to none. In order to use any DOM event with this object first you have to set the element.style.pointerEvents to "auto".
+	 *
+	 * @type {Element}
 	 */
-	this.element = document.createElement("div");
+	this.element = document.createElement(type || "div");
 	this.element.style.transformStyle = "preserve-3d";
 	this.element.style.position = "absolute";
 	this.element.style.top = "0px";
@@ -44,11 +48,17 @@ function DOM(parentDOM, type)
 
 DOM.prototype = Object.create(Object2D.prototype);
 
+/**
+ * DOM object implements onAdd() method to automatically attach the DOM object to the DOM tree.
+ */
 DOM.prototype.onAdd = function()
 {
 	this.parentDOM.appendChild(this.element);
 };
 
+/**
+ * DOM object implements onAdd() method to automatically remove the DOM object to the DOM tree.
+ */
 DOM.prototype.onRemove = function()
 {
 	this.parentDOM.removeChild(this.element);

source/objects/node/NodeSocket.js

@@ -157,6 +157,8 @@ NodeSocket.prototype.isCompatible = function(socket)
 	return this.direction !== socket.direction && this.type === socket.type;
 };
 
+NodeSocket
+
 NodeSocket.prototype.destroy = function()
 {
 	Circle.prototype.destroy.call(this);