Quadratic curve

build/escher.js

@@ -5,7 +5,7 @@
 }(this, (function (exports) { 'use strict';
 
 	/**
-	 * EventManager is used to manager DOM events creationg and destruction in a single function call.
+	 * EventManager is used to manager DOM events creating and destruction in a single function call.
 	 *
 	 * It is used by objects to make it easier to add and remove events from global DOM objects.
 	 *
@@ -70,7 +70,7 @@
 		}
 	};
 
-	/** 
+	/**
 	 * Class representing a 2D vector. A 2D vector is an ordered pair of numbers (labeled x and y), which can be used to represent points in space, directions, etc.
 	 *
 	 * @class
@@ -217,7 +217,7 @@
 	/**
 	 * Multiply a scalar value by booth vector components.
 	 *
-	 * @param {number} s
+	 * @param {number} scalar
 	 */
 	Vector2.prototype.multiplyScalar = function(scalar)
 	{
@@ -1216,7 +1216,6 @@
 		this.justReleased = false;
 	}
 
-
 	Key.DOWN = -1;
 	Key.UP = 1;
 	Key.RESET = 0;
@@ -1275,13 +1274,13 @@
 	};
 
 	/**
-	 * Pointer object is used to colled input from the user, works for booth mouse or touch screens.
+	 * Pointer object is used to called input from the user, works for booth mouse or touch screens.
 	 *
-	 * It is responsible for syncronizing user input with the render of the graphics.
+	 * It is responsible for synchronizing user input with the render of the graphics.
 	 * 
 	 * @class
-	 * @param {DOM} domElement DOM element to craete the pointer events.
-	 * @param {DOM} canvas Canvas DOM element where the content is being drawn.
+	 * @param {Element} domElement DOM element to create the pointer events.
+	 * @param {Element} canvas Canvas DOM element where the content is being drawn.
 	 */
 	function Pointer(domElement, canvas)
 	{
@@ -1676,7 +1675,7 @@
 	 * Used to indicate how the user views the content inside of the canvas.
 	 *
 	 * @class
-	 * @param {DOM} canvas Canvas DOM element where the viewport is being rendered.
+	 * @param {Element} canvas Canvas DOM element where the viewport is being rendered.
 	 */
 	function Viewport(canvas)
 	{
@@ -1769,7 +1768,7 @@
 	 * The position of the object is used a central point, this method does not consider "box" attributes or other strucures in the object.
 	 *
 	 * @param {Object2D} object Object to be centered on the viewport.
-	 * @param {DOM} canvas Canvas element where the image is drawn.
+	 * @param {Element} canvas Canvas element where the image is drawn.
 	 */
 	Viewport.prototype.centerObject = function(object, canvas)
 	{
@@ -1904,12 +1903,10 @@
 	};
 
 	/**
-	 * The renderer is resposible for drawing the structure into the canvas element.
-	 *
-	 * Its also resposible for managing the canvas state.
+	 * The renderer is responsible for drawing the objects structure into the canvas element and manage its rendering state.
 	 *
 	 * @class
-	 * @param {DOM} canvas Canvas to render the content.
+	 * @param {Element} canvas Canvas to render the content.
 	 * @param {Object} options Renderer canvas options.
 	 */
 	function Renderer(canvas, options)
@@ -1950,14 +1947,13 @@
 	 *
 	 * The render loop cannot be destroyed, and it automatically creates a viewport controls object.
 	 *
-	 * @param {Object2D} group Group to be rendererd.
+	 * @param {Object2D} group Group to be rendered.
 	 * @param {Viewport} viewport Viewport into the objects.
 	 * @param {Function} onUpdate Function called before rendering the frame.
 	 */
 	Renderer.prototype.createRenderLoop = function(group, viewport, onUpdate)
 	{
 		var self = this;
-		
 		var controls = new ViewportControls(viewport);
 
 		function loop()
@@ -2469,7 +2465,7 @@
 	 *
 	 * Masks are treated as objects their shape is used to filter other objects shape.
 	 *
-	 * Multiple mask objects can be active simulatenously, they have to be attached to the object mask list to filter the render region.
+	 * Multiple mask objects can be active simultaneously, they have to be attached to the object mask list to filter the render region.
 	 *
 	 * A mask objects is draw using the context.clip() method.
 	 *
@@ -2488,7 +2484,7 @@
 	/**
 	 * Clip the canvas context, to ensure that next objects being drawn are cliped to the path stored here.
 	 *
-	 * @param {CanvasContext} context Canvas 2d drawing context.
+	 * @param {CanvasRenderingContext2D} context Canvas 2d drawing context.
 	 * @param {Viewport} viewport Viewport applied to the canvas.
 	 * @param {DOM} canvas DOM canvas element where the content is being drawn.
 	 */
@@ -2497,7 +2493,7 @@
 	/**
 	 * Box mask can be used to clear a box mask region.
 	 *
-	 * It will limit the drwaing region to this box.
+	 * It will limit the drawing region to this box.
 	 *
 	 * @class
 	 * @extends {Mask}
@@ -2547,21 +2543,21 @@
 	};
 
 	/**
-	 * Circle object draw a circular object, into the canvas.
+	 * Box object draw a rectangular object.
 	 *
-	 * Can be used as a base to implement other circular objects, already implements the circle collision for pointer events.
+	 * Can be used as a base to implement other box objects, already implements collision for pointer events.
 	 *
 	 * @class
 	 * @extends {Object2D}
 	 */
-	function Circle()
+	function Box()
 	{
 		Object2D.call(this);
 
 		/**
-		 * Radius of the circle.
+		 * Box object containing the size of the object.
 		 */
-		this.radius = 10.0;
+		this.box = new Box2(new Vector2(-50, -35), new Vector2(50, 35));
 
 		/**
 		 * Style of the object border line.
@@ -2576,173 +2572,65 @@
 		this.lineWidth = 1;
 
 		/**
-		 * Background color of the circle.
+		 * Background color of the box.
 		 *
 		 * If set null it is ignored.
 		 */
 		this.fillStyle = "#FFFFFF";
 	}
 
-	Circle.prototype = Object.create(Object2D.prototype);
+	Box.prototype = Object.create(Object2D.prototype);
 
-	Circle.prototype.isInside = function(point)
+	Box.prototype.onPointerEnter = function(pointer, viewport)
 	{
-		return point.length() <= this.radius;
+		this.fillStyle = "#CCCCCC";
 	};
 
-	Circle.prototype.onPointerEnter = function(pointer, viewport)
+	Box.prototype.onPointerLeave = function(pointer, viewport)
 	{
-		this.fillStyle = "#CCCCCC";
+		this.fillStyle = "#FFFFFF";
 	};
 
-	Circle.prototype.onPointerLeave = function(pointer, viewport)
+	Box.prototype.isInside = function(point)
 	{
-		this.fillStyle = "#FFFFFF";
+		return this.box.containsPoint(point);
 	};
 
-	Circle.prototype.draw = function(context, viewport, canvas)
+	Box.prototype.draw = function(context, viewport, canvas)
 	{
-		context.beginPath();
-		context.arc(0, 0, this.radius, 0, 2 * Math.PI);
-		
+		var width = this.box.max.x - this.box.min.x;
+		var height = this.box.max.y - this.box.min.y;
+
 		if(this.fillStyle !== null)
 		{	
 			context.fillStyle = this.fillStyle;
-			context.fill();
+			context.fillRect(this.box.min.x, this.box.min.y, width, height);
 		}
 
 		if(this.strokeStyle !== null)
 		{
 			context.lineWidth = this.lineWidth;
 			context.strokeStyle = this.strokeStyle;
-			context.stroke();
+			context.strokeRect(this.box.min.x, this.box.min.y, width, height);
 		}
 	};
 
 	/**
-	 * Class contains helper functions to create editing object tools.
-	 *
-	 * @class
-	 */
-	function Helpers(){}
-
-	/**
-	 * Create a rotation tool helper.
-	 *
-	 * When the object is dragged is changes the parent object rotation.
-	 *
-	 * @static
-	 */
-	Helpers.rotateTool = function(object)
-	{
-		var tool = new Circle();
-		tool.radius = 4;
-		tool.layer = object.layer + 1;
-		tool.onPointerDrag = function(pointer, viewport, delta)
-		{
-			object.rotation += delta.x * 1e-3;
-		};
-		object.add(tool);
-	};
-
-	/**
-	 * Create a box resize helper and attach it to an object to change the size of the object box.
-	 *
-	 * Each helper is positioned on one corner of the box, and the value of the corner is copied to the boxes as they are dragged.
-	 *
-	 * This method required to object to have a box property.
-	 *
-	 * @static
-	 */
-	Helpers.boxResizeTool = function(object)
-	{
-		if(object.box === undefined)
-		{
-			console.warn("escher.js: Helpers.boxResizeTool(), object box property missing.");
-			return;
-		}
-
-		function updateHelpers()
-		{
-			topRight.position.copy(object.box.min);
-			bottomLeft.position.copy(object.box.max);
-			topLeft.position.set(object.box.max.x, object.box.min.y);
-			bottomRight.position.set(object.box.min.x, object.box.max.y);
-		}
-
-		var topRight = new Circle();
-		topRight.radius = 4;
-		topRight.layer = object.layer + 1;
-		topRight.draggable = true;
-		topRight.onPointerDrag = function(pointer, viewport, delta)
-		{
-			Object2D.prototype.onPointerDrag.call(this, pointer, viewport, delta);
-
-			object.box.min.copy(topRight.position);
-			updateHelpers();
-		};
-		object.add(topRight);
-
-		var topLeft = new Circle();
-		topLeft.radius = 4;
-		topLeft.layer = object.layer + 1;
-		topLeft.draggable = true;
-		topLeft.onPointerDrag = function(pointer, viewport, delta)
-		{
-			Object2D.prototype.onPointerDrag.call(this, pointer, viewport, delta);
-
-			object.box.max.x = topLeft.position.x;
-			object.box.min.y = topLeft.position.y;
-			updateHelpers();
-		};
-		object.add(topLeft);
-
-		var bottomLeft = new Circle();
-		bottomLeft.radius = 4;
-		bottomLeft.layer = object.layer + 1;
-		bottomLeft.draggable = true;
-		bottomLeft.onPointerDrag = function(pointer, viewport, delta)
-		{
-			Object2D.prototype.onPointerDrag.call(this, pointer, viewport, delta);
-
-			object.box.max.copy(bottomLeft.position);
-			updateHelpers();
-		};
-		object.add(bottomLeft);
-
-		var bottomRight = new Circle();
-		bottomRight.radius = 4;
-		bottomRight.layer = object.layer + 1;
-		bottomRight.draggable = true;
-		bottomRight.onPointerDrag = function(pointer, viewport, delta)
-		{
-			Object2D.prototype.onPointerDrag.call(this, pointer, viewport, delta);
-
-			object.box.min.x = bottomRight.position.x;
-			object.box.max.y = bottomRight.position.y;
-			updateHelpers();
-		};
-		object.add(bottomRight);
-
-		updateHelpers();
-	};
-
-	/**
-	 * Box object draw a rectangular object.
+	 * Circle object draw a circular object, into the canvas.
 	 *
-	 * Can be used as a base to implement other box objects, already implements collision for pointer events.
+	 * Can be used as a base to implement other circular objects, already implements the circle collision for pointer events.
 	 *
 	 * @class
 	 * @extends {Object2D}
 	 */
-	function Box()
+	function Circle()
 	{
 		Object2D.call(this);
 
 		/**
-		 * Box object containing the size of the object.
+		 * Radius of the circle.
 		 */
-		this.box = new Box2(new Vector2(-50, -35), new Vector2(50, 35));
+		this.radius = 10.0;
 
 		/**
 		 * Style of the object border line.
@@ -2757,46 +2645,46 @@
 		this.lineWidth = 1;
 
 		/**
-		 * Background color of the box.
+		 * Background color of the circle.
 		 *
 		 * If set null it is ignored.
 		 */
 		this.fillStyle = "#FFFFFF";
 	}
 
-	Box.prototype = Object.create(Object2D.prototype);
+	Circle.prototype = Object.create(Object2D.prototype);
 
-	Box.prototype.onPointerEnter = function(pointer, viewport)
+	Circle.prototype.isInside = function(point)
 	{
-		this.fillStyle = "#CCCCCC";
+		return point.length() <= this.radius;
 	};
 
-	Box.prototype.onPointerLeave = function(pointer, viewport)
+	Circle.prototype.onPointerEnter = function(pointer, viewport)
 	{
-		this.fillStyle = "#FFFFFF";
+		this.fillStyle = "#CCCCCC";
 	};
 
-	Box.prototype.isInside = function(point)
+	Circle.prototype.onPointerLeave = function(pointer, viewport)
 	{
-		return this.box.containsPoint(point);
+		this.fillStyle = "#FFFFFF";
 	};
 
-	Box.prototype.draw = function(context, viewport, canvas)
+	Circle.prototype.draw = function(context, viewport, canvas)
 	{
-		var width = this.box.max.x - this.box.min.x;
-		var height = this.box.max.y - this.box.min.y;
-
+		context.beginPath();
+		context.arc(0, 0, this.radius, 0, 2 * Math.PI);
+		
 		if(this.fillStyle !== null)
 		{	
 			context.fillStyle = this.fillStyle;
-			context.fillRect(this.box.min.x, this.box.min.y, width, height);
+			context.fill();
 		}
 
 		if(this.strokeStyle !== null)
 		{
 			context.lineWidth = this.lineWidth;
 			context.strokeStyle = this.strokeStyle;
-			context.strokeRect(this.box.min.x, this.box.min.y, width, height);
+			context.stroke();
 		}
 	};
 
@@ -2827,9 +2715,9 @@
 		/**
 		 * Dash line pattern to be used, if empty draws a solid line.
 		 *
-		 * Dash parttern is defined as the size of dashes as pairs of space with no line and with line.
+		 * Dash pattern is defined as the size of dashes as pairs of space with no line and with line.
 		 *
-		 * E.g if the daspattern is [1, 2] we get 1 point with line, 2 without line repeat infinitelly.
+		 * E.g if the dash pattern is [1, 2] we get 1 point with line, 2 without line repeat infinitelly.
 		 */
 		this.dashPattern = [5, 5];
 
@@ -2928,7 +2816,7 @@
 	 * Image object is used to draw an image from URL.
 	 *
 	 * @class
-	 * @param {string} [src] Source URL of the image.
+	 * @param {string} src Source URL of the image.
 	 * @extends {Object2D}
 	 */
 	function Image(src)
@@ -2988,13 +2876,13 @@
 	/**
 	 * A DOM object transformed using CSS3D to ver included in the graph.
 	 *
-	 * DOM objects always stay on top of everything else, mouse events are not supported for these.
+	 * DOM objects always stay on top of everything else, mouse events are not supported for these objects.
 	 *
-	 * Use the normal DOM events for interaction.
+	 * Use the DOM events for interaction with these types of objects.
 	 *
 	 * @class
-	 * @param parentDOM Parent DOM element that contains the drawing canvas.
-	 * @param type Type of the DOM element (e.g. "div", "p", ...)
+	 * @param {Element} parentDOM Parent DOM element that contains the drawing canvas.
+	 * @param {string} type Type of the DOM element (e.g. "div", "p", ...)
 	 * @extends {Object2D}
 	 */
 	function DOM(parentDOM, type)
@@ -3063,10 +2951,11 @@
 	/**
 	 * Pattern object draw a image repeated as a pattern.
 	 *
-	 * Its similar to the Image class but the image can be repeat infinitly.
+	 * Its similar to the Image class but the image can be repeat infinitely.
 	 *
 	 * @class
 	 * @extends {Object2D}
+	 * @param {string} src Source image URL.
 	 */
 	function Pattern(src)
 	{
@@ -3225,7 +3114,7 @@
 	};
 
 	/**
-	 * BezierCurve object draw as bezier curve between two points.
+	 * Bezier curve object draw as bezier curve between two points.
 	 *
 	 * @class
 	 */
@@ -3331,6 +3220,114 @@
 		context.stroke();
 	};
 
+	/**
+	 * Class contains helper functions to create editing object tools.
+	 *
+	 * @class
+	 */
+	function Helpers(){}
+
+	/**
+	 * Create a rotation tool helper.
+	 *
+	 * When the object is dragged is changes the parent object rotation.
+	 *
+	 * @static
+	 */
+	Helpers.rotateTool = function(object)
+	{
+		var tool = new Circle();
+		tool.radius = 4;
+		tool.layer = object.layer + 1;
+		tool.onPointerDrag = function(pointer, viewport, delta)
+		{
+			object.rotation += delta.x * 1e-3;
+		};
+		object.add(tool);
+	};
+
+	/**
+	 * Create a box resize helper and attach it to an object to change the size of the object box.
+	 *
+	 * Each helper is positioned on one corner of the box, and the value of the corner is copied to the boxes as they are dragged.
+	 *
+	 * This method required to object to have a box property.
+	 *
+	 * @static
+	 */
+	Helpers.boxResizeTool = function(object)
+	{
+		if(object.box === undefined)
+		{
+			console.warn("escher.js: Helpers.boxResizeTool(), object box property missing.");
+			return;
+		}
+
+		function updateHelpers()
+		{
+			topRight.position.copy(object.box.min);
+			bottomLeft.position.copy(object.box.max);
+			topLeft.position.set(object.box.max.x, object.box.min.y);
+			bottomRight.position.set(object.box.min.x, object.box.max.y);
+		}
+
+		var topRight = new Circle();
+		topRight.radius = 4;
+		topRight.layer = object.layer + 1;
+		topRight.draggable = true;
+		topRight.onPointerDrag = function(pointer, viewport, delta)
+		{
+			Object2D.prototype.onPointerDrag.call(this, pointer, viewport, delta);
+
+			object.box.min.copy(topRight.position);
+			updateHelpers();
+		};
+		object.add(topRight);
+
+		var topLeft = new Circle();
+		topLeft.radius = 4;
+		topLeft.layer = object.layer + 1;
+		topLeft.draggable = true;
+		topLeft.onPointerDrag = function(pointer, viewport, delta)
+		{
+			Object2D.prototype.onPointerDrag.call(this, pointer, viewport, delta);
+
+			object.box.max.x = topLeft.position.x;
+			object.box.min.y = topLeft.position.y;
+			updateHelpers();
+		};
+		object.add(topLeft);
+
+		var bottomLeft = new Circle();
+		bottomLeft.radius = 4;
+		bottomLeft.layer = object.layer + 1;
+		bottomLeft.draggable = true;
+		bottomLeft.onPointerDrag = function(pointer, viewport, delta)
+		{
+			Object2D.prototype.onPointerDrag.call(this, pointer, viewport, delta);
+
+			object.box.max.copy(bottomLeft.position);
+			updateHelpers();
+		};
+		object.add(bottomLeft);
+
+		var bottomRight = new Circle();
+		bottomRight.radius = 4;
+		bottomRight.layer = object.layer + 1;
+		bottomRight.draggable = true;
+		bottomRight.onPointerDrag = function(pointer, viewport, delta)
+		{
+			Object2D.prototype.onPointerDrag.call(this, pointer, viewport, delta);
+
+			object.box.min.x = bottomRight.position.x;
+			object.box.max.y = bottomRight.position.y;
+			updateHelpers();
+		};
+		object.add(bottomRight);
+
+		updateHelpers();
+	};
+
 	exports.BezierCurve = BezierCurve;
 	exports.Box = Box;
 	exports.Box2 = Box2;

examples/node.html

@@ -49,7 +49,7 @@
 			group.add(box);
 			
 			// DOM
-			var div = new Escher.DOM(division);
+			var div = new Escher.DOM(canvas.parentElement);
 			div.size.set(100, 50);
 			div.origin.set(50, 25);
 			box.add(div);
@@ -61,55 +61,26 @@
 			div.element.appendChild(text);
 		};
 
-		//
-		window.addConstantBlock = function(value, type)
-		{
 
-		};
 
-		/**
-		 * Represents a feed of data.
-		 *
-		 * Usually represented as a connection (from output to input).
-		 */
-		function DataBlock(value)
-		{
-			this.value = value;
-			this.type = DataBlock.NUMBER;
 
-			this.from = null;
-			this.to = null;
-		}
-
-		DataBlock.NUMBER = 0;
-
-		/**
-		 * Represents a code logic block.
-		 */
-		function CodeBlock()
+		function NodeInput()
 		{
-			Escher.Object2D.call(this);
-
 			this.inputs = [];
-			this.output = [];
+			this.outputs = [];
 		}
 
-		CodeBlock.prototype = Object.create(Escher.Object2D.prototype);
 
-		/**
-		 * Take inputs read them and write to the outputs the value.
-		 */
-		CodeBlock.prototype.process = function(){};
 
 		// Group to store other objects
 		var group = new Escher.Object2D();
 
 		// Line (connection)
-		var line = new Escher.BezierCurve();
+		//var line = new Escher.BezierCurve();
 		//line.from = box.position;
 		//line.to = circle.position;
-		line.layer = -1;
-		group.add(line);
+		//line.layer = -1;
+		//group.add(line);
 
 		// Viewport
 		var viewport = new Escher.Viewport(canvas);

source/Escher.js

@@ -1,5 +1,3 @@
-"use strict";
-
 export {EventManager} from "./EventManager.js";
 export {Object2D} from "./Object2D.js";
 export {Renderer} from "./Renderer.js";

source/Object2D.js

@@ -1,5 +1,3 @@
-"use strict";
-
 import {Vector2} from "./math/Vector2.js";
 import {Matrix} from "./math/Matrix.js";
 import {UUID} from "./math/UUID.js";
@@ -245,7 +243,7 @@ Object2D.prototype.isInside = function(point)
 /**
  * Update the transformation matrix of the object.
  *
- * @param {CanvasContext} context
+ * @param {CanvasRenderingContext2D} context
  */
 Object2D.prototype.updateMatrix = function(context)
 {
@@ -271,7 +269,7 @@ Object2D.prototype.updateMatrix = function(context)
  *
  * Can also be used for pre rendering logic.
  *
- * @param {CanvasContext} context Canvas 2d drawing context.
+ * @param {CanvasRenderingContext2D} context Canvas 2d drawing context.
  * @param {Viewport} viewport Viewport applied to the canvas.
  */
 Object2D.prototype.transform = function(context, viewport)
@@ -284,7 +282,7 @@ Object2D.prototype.transform = function(context, viewport)
  *
  * Has to be implemented by underlying classes.
  *
- * @param {CanvasContext} context Canvas 2d drawing context.
+ * @param {CanvasRenderingContext2D} context Canvas 2d drawing context.
  * @param {Viewport} viewport Viewport applied to the canvas.
  * @param {DOM} canvas DOM canvas element where the content is being drawn.
  */

source/Renderer.js

@@ -5,7 +5,7 @@ import {ViewportControls} from "./controls/ViewportControls.js";
  * The renderer is responsible for drawing the objects structure into the canvas element and manage its rendering state.
  *
  * @class
- * @param {DOM} canvas Canvas to render the content.
+ * @param {Element} canvas Canvas to render the content.
  * @param {Object} options Renderer canvas options.
  */
 function Renderer(canvas, options)
@@ -53,7 +53,6 @@ function Renderer(canvas, options)
 Renderer.prototype.createRenderLoop = function(group, viewport, onUpdate)
 {
 	var self = this;
-	
 	var controls = new ViewportControls(viewport);
 
 	function loop()

source/Viewport.js

@@ -1,15 +1,12 @@
-"use strict";
-
 import {Vector2} from "./math/Vector2.js";
 import {Matrix} from "./math/Matrix.js";
 import {UUID} from "./math/UUID.js";
-import {Pointer} from "./input/Pointer.js";
 
 /**
  * Used to indicate how the user views the content inside of the canvas.
  *
  * @class
- * @param {DOM} canvas Canvas DOM element where the viewport is being rendered.
+ * @param {Element} canvas Canvas DOM element where the viewport is being rendered.
  */
 function Viewport(canvas)
 {
@@ -102,7 +99,7 @@ Viewport.prototype.updateMatrix = function()
  * The position of the object is used a central point, this method does not consider "box" attributes or other strucures in the object.
  *
  * @param {Object2D} object Object to be centered on the viewport.
- * @param {DOM} canvas Canvas element where the image is drawn.
+ * @param {Element} canvas Canvas element where the image is drawn.
  */
 Viewport.prototype.centerObject = function(object, canvas)
 {

source/controls/ViewportControls.js

@@ -1,5 +1,3 @@
-"use strict";
-
 import {Viewport} from "../Viewport.js";
 import {Pointer} from "../input/Pointer.js";
 import {Vector2} from "../math/Vector2.js";
@@ -125,4 +123,4 @@ ViewportControls.prototype.update = function(pointer)
 	}
 };
 
-export {ViewportControls};
+export {ViewportControls};

source/input/Key.js

@@ -1,5 +1,3 @@
-"use strict";
-
 /**
  * Key is used by Keyboard, Pointer, etc, to represent a key state.
  *
@@ -23,7 +21,6 @@ function Key()
 	this.justReleased = false;
 }
 
-
 Key.DOWN = -1;
 Key.UP = 1;
 Key.RESET = 0;

source/input/Pointer.js

@@ -1,17 +1,15 @@
-"use strict";
-
 import {EventManager} from "../EventManager.js";
 import {Vector2} from "../math/Vector2.js";
 import {Key} from "./Key.js";
 
 /**
- * Pointer object is used to colled input from the user, works for booth mouse or touch screens.
+ * Pointer object is used to called input from the user, works for booth mouse or touch screens.
  *
- * It is responsible for syncronizing user input with the render of the graphics.
+ * It is responsible for synchronizing user input with the render of the graphics.
  * 
  * @class
- * @param {DOM} domElement DOM element to craete the pointer events.
- * @param {DOM} canvas Canvas DOM element where the content is being drawn.
+ * @param {Element} domElement DOM element to create the pointer events.
+ * @param {Element} canvas Canvas DOM element where the content is being drawn.
  */
 function Pointer(domElement, canvas)
 {
@@ -403,4 +401,4 @@ Pointer.dispose = function()
 };
 
 
-export {Pointer};
+export {Pointer};

source/math/Box2.js

@@ -1,5 +1,3 @@
-"use strict";
-
 import {Vector2} from "./Vector2.js";
 
 /**

source/math/Matrix.js

@@ -1,5 +1,3 @@
-"use strict";
-
 import {Vector2} from "./Vector2.js";
 
 /**

source/math/UUID.js

@@ -1,5 +1,3 @@
-"use strict";
-
 /**
  * Class to implement UUID generation methods.
  *
@@ -39,4 +37,4 @@ UUID.generate = (function ()
 	};
 })();
 
-export {UUID};
+export {UUID};

source/math/Vector2.js

@@ -1,7 +1,4 @@
-"use strict";
-
-
-/** 
+/**
  * Class representing a 2D vector. A 2D vector is an ordered pair of numbers (labeled x and y), which can be used to represent points in space, directions, etc.
  *
  * @class
@@ -148,7 +145,7 @@ Vector2.prototype.multiply = function(v)
 /**
  * Multiply a scalar value by booth vector components.
  *
- * @param {number} s
+ * @param {number} scalar
  */
 Vector2.prototype.multiplyScalar = function(scalar)
 {

source/objects/Box.js

@@ -1,8 +1,6 @@
 import {Object2D} from "../Object2D.js";
 import {Vector2} from "../math/Vector2.js";
 import {Box2} from "../math/Box2.js";
-import {Helpers} from "../utils/Helpers.js";
-import {Circle} from "./Circle.js";
 
 /**
  * Box object draw a rectangular object.

source/objects/Circle.js

@@ -1,5 +1,4 @@
 import {Object2D} from "../Object2D.js";
-import {Vector2} from "../math/Vector2.js";
 
 /**
  * Circle object draw a circular object, into the canvas.

source/objects/DOM.js

@@ -4,13 +4,13 @@ import {Vector2} from "../math/Vector2.js";
 /**
  * A DOM object transformed using CSS3D to ver included in the graph.
  *
- * DOM objects always stay on top of everything else, mouse events are not supported for these.
+ * DOM objects always stay on top of everything else, mouse events are not supported for these objects.
  *
- * Use the normal DOM events for interaction.
+ * Use the DOM events for interaction with these types of objects.
  *
  * @class
- * @param parentDOM Parent DOM element that contains the drawing canvas.
- * @param type Type of the DOM element (e.g. "div", "p", ...)
+ * @param {Element} parentDOM Parent DOM element that contains the drawing canvas.
+ * @param {string} type Type of the DOM element (e.g. "div", "p", ...)
  * @extends {Object2D}
  */
 function DOM(parentDOM, type)

source/objects/Graph.js

@@ -1,8 +1,6 @@
 import {Object2D} from "../Object2D.js";
 import {Vector2} from "../math/Vector2.js";
 import {Box2} from "../math/Box2.js";
-import {Helpers} from "../utils/Helpers.js";
-import {Circle} from "./Circle.js";
 
 /**
  * Graph object is used to draw simple graph data into the canvas.

source/objects/Image.js

@@ -1,12 +1,11 @@
 import {Object2D} from "../Object2D.js";
 import {Box2} from "../math/Box2.js";
-import {Vector2} from "../math/Vector2.js";
 
 /**
  * Image object is used to draw an image from URL.
  *
  * @class
- * @param {string} [src] Source URL of the image.
+ * @param {string} src Source URL of the image.
  * @extends {Object2D}
  */
 function Image(src)

source/objects/Line.js

@@ -2,7 +2,9 @@ import {Object2D} from "../Object2D.js";
 import {Vector2} from "../math/Vector2.js";
 
 /**
- * Line object draw a line from one point to another.
+ * Line object draw a line from one point to another without any kind of interpolation.
+ *
+ * For drawing lines with interpolation check {BezierCurve}
  *
  * @class
  * @extends {Object2D}

source/objects/Pattern.js

@@ -1,16 +1,14 @@
 import {Object2D} from "../Object2D.js";
-import {Vector2} from "../math/Vector2.js";
 import {Box2} from "../math/Box2.js";
-import {Helpers} from "../utils/Helpers.js";
-import {Circle} from "./Circle.js";
 
 /**
  * Pattern object draw a image repeated as a pattern.
  *
- * Its similar to the Image class but the image can be repeat infinitly.
+ * Its similar to the Image class but the image can be repeat infinitely.
  *
  * @class
  * @extends {Object2D}
+ * @param {string} src Source image URL.
  */
 function Pattern(src)
 {

source/objects/QuadraticCurve.js

@@ -0,0 +1,98 @@
+import {Object2D} from "../Object2D.js";
+import {Vector2} from "../math/Vector2.js";
+import {Circle} from "./Circle.js";
+import {Line} from "./Line.js";
+
+/**
+ * Bezier curve object draw as bezier curve between two points.
+ *
+ * @class
+ * @extends {Object2D}
+ */
+function QuadraticCurve()
+{
+	Object2D.call(this);
+
+	/**
+	 * Initial point of the curve.
+	 *
+	 * Can be equal to the position object of another object. (Making it automatically follow that object.)
+	 */
+	this.from = new Vector2();
+
+	/**
+	 * Control point of the quadratic curve used to control the curvature of the line between the from and to point.
+	 */
+	this.controlPoint = new Vector2();
+
+	/**
+	 * Final point of the curve.
+	 *
+	 * Can be equal to the position object of another object. (Making it automatically follow that object.)
+	 */
+	this.to = new Vector2();
+
+	/**
+	 * Dash line pattern to be used, if empty draws a solid line.
+	 *
+	 * Dash pattern is defined as the size of dashes as pairs of space with no line and with line.
+	 *
+	 * E.g if the pattern is [1, 2] we get 1 point with line, 2 without line repeat infinitely.
+	 */
+	this.dashPattern = [5, 5];
+
+	/**
+	 * Style of the object line.
+	 */
+	this.strokeStyle = "#000000";
+
+	/**
+	 * Line width of the line.
+	 */
+	this.lineWidth = 1;
+}
+
+QuadraticCurve.prototype = Object.create(Object2D.prototype);
+
+/**
+ * Create a quadratic curve helper, to edit the curve control point.
+ *
+ * @static
+ */
+QuadraticCurve.curveHelper = function(object)
+{
+	var fromLine = new Line();
+	fromLine.from = object.from;
+	fromLine.to = object.controlPoint;
+	object.parent.add(fromLine);
+
+	var controlPoint = new Circle();
+	controlPoint.radius = 3;
+	controlPoint.layer = object.layer + 1;
+	controlPoint.draggable = true;
+	controlPoint.onPointerDrag = function(pointer, viewport, delta)
+	{
+		Object2D.prototype.onPointerDrag.call(this, pointer, viewport, delta);
+		object.controlPoint.copy(controlPoint.position);
+	};
+	object.parent.add(controlPoint);
+
+	var toLine = new Line();
+	toLine.from = object.to;
+	toLine.to = object.controlPoint;
+	object.parent.add(toLine);
+};
+
+QuadraticCurve.prototype.draw = function(context, viewport, canvas)
+{
+	context.lineWidth = this.lineWidth;
+	context.strokeStyle = this.strokeStyle;
+	context.setLineDash(this.dashPattern);
+	
+	context.beginPath();
+	context.moveTo(this.from.x, this.from.y);
+	context.quadraticCurveTo(this.controlPoint.x, this.controlPoint.y, this.to.x, this.to.y);
+	context.stroke();
+};
+
+export {QuadraticCurve};

source/objects/mask/Mask.js

@@ -1,6 +1,4 @@
 import {Object2D} from "../../Object2D.js";
-import {Vector2} from "../../math/Vector2.js";
-import {Box2} from "../../math/Box2.js";
 
 /**
  * A mask can be used to set the drawing region.

source/objects/node/Node.js

@@ -0,0 +1,22 @@
+import {Box} from "../Box";
+
+/**
+ * Node objects can be connected between them to create graphs.
+ *
+ * Each node contains inputs, outputs and a set of attributes containing their state. Inputs can be connected to outputs of other nodes, and vice-versa.
+ *
+ * This class implements node basic functionality, the logic to connected node and define inputs/outputs of the nodes.
+ *
+ * @class Node
+ */
+function Node()
+{
+	Box.call(this);
+
+	this.inputs = [];
+	this.outputs = [];
+}
+
+Node.prototype = Object.create(Box.prototype);
+
+export {Node};

source/objects/node/NodeConnector.js

@@ -0,0 +1,19 @@
+import {BezierCurve} from "../BezierCurve";
+
+/**
+ * Node connector is used to connect a output of a node to a input of another node.
+ *
+ * Some nodes inputs/outputs might support just one or multiple connections.
+ *
+ * @class NodeConnector
+ */
+function NodeConnector()
+{
+	BezierCurve.call(this);
+
+	// TODO <ADD CODE HERE>
+}
+
+NodeConnector.prototype = Object.create(BezierCurve.prototype);
+
+export {NodeConnector};

source/objects/node/NodeInput.js

@@ -0,0 +1,16 @@
+import {Circle} from "../Circle";
+
+/**
+ * TODO
+ *
+ * @class NodeInput
+ */
+function NodeInput()
+{
+	Circle.call(this);
+
+}
+
+NodeInput.prototype = Object.create(Circle.prototype);
+
+export {NodeInput};

source/objects/node/NodeOutput.js

@@ -0,0 +1,16 @@
+import {Circle} from "../Circle";
+
+/**
+ * TODO
+ *
+ * @class NodeInput
+ */
+function NodeOutput()
+{
+	Circle.call(this);
+
+}
+
+NodeOutput.prototype = Object.create(Circle.prototype);
+
+export {NodeOutput};

source/utils/Helpers.js

@@ -1,5 +1,3 @@
-"use strict";
-
 import {Circle} from "../objects/Circle.js";
 import {Object2D} from "../Object2D.js";
 
@@ -111,4 +109,4 @@ Helpers.boxResizeTool = function(object)
 	updateHelpers();
 };
 
-export {Helpers};
+export {Helpers};