Serialization

examples/node.html

@@ -16,6 +16,9 @@
 		<div style="position:absolute; width:60px; height:50px; top:100px; left:10px; text-align:center; z-index:10; cursor: pointer;" onclick="window.addOperatorBlock('*');">x</div>
 		<div style="position:absolute; width:60px; height:50px; top:150px; left:10px; text-align:center; z-index:10; cursor: pointer;" onclick="window.addOperatorBlock('/');">/</div>
 		<div style="position:absolute; width:60px; height:50px; top:200px; left:10px; text-align:center; z-index:10; cursor: pointer;" onclick="window.addInputBlock();">Num</div>
+
+		<div style="position:absolute; width:60px; height:50px; bottom:50px; left:10px; text-align:center; z-index:10; cursor: pointer;" onclick="window.addInputBlock();">Load</div>
+		<div style="position:absolute; width:60px; height:50px; bottom:0px; left:10px; text-align:center; z-index:10; cursor: pointer;" onclick="window.addInputBlock();">Save</div>
 	</div>
 
 	<!-- Code -->
@@ -45,7 +48,6 @@
 			graph.addNode(new OperationNode(symbol));
 		};
 
-
 		window.addInputBlock = function(symbol)
 		{
 			graph.addNode(new NumberInputNode());
@@ -59,9 +61,11 @@
 
 				this.operation = operation;
 
+				this.box.set(new Escher.Vector2(-50, -40), new Escher.Vector2(50, 40));
+
 				this.text = new Escher.Text();
 				this.text.text = operation;
-				this.text.font = "30px Arial";
+				this.text.font = "25px Arial";
 				this.text.layer = 2;
 				this.add(this.text);
 			}
@@ -85,6 +89,8 @@
 			{
 				super();
 
+				this.box.set(new Escher.Vector2(-50, -30), new Escher.Vector2(50, 30));
+
 				this.div = new Escher.DOM(canvas.parentElement, "input");
 				this.div.size.set(70, 20);
 				this.div.origin.set(35, 10);
@@ -92,6 +98,10 @@
 				this.div.element.type = "number";
 				this.div.element.style.fontFamily = "Arial";
 				this.div.element.style.textAlign = "center";
+				this.div.element.style.border = "1px";
+				this.div.element.style.borderStyle = "solid";
+				this.div.element.style.borderColor = "#000000";
+				this.div.element.style.padding = "0px";
 				this.add(this.div);
 			}
 
@@ -111,7 +121,7 @@
 			{
 				super();
 
-				this.box.set(new Escher.Vector2(-80, -30), new Escher.Vector2(80, 30));
+				this.box.set(new Escher.Vector2(-100, -20), new Escher.Vector2(100, 20));
 
 				this.text = new Escher.Text();
 				this.text.text = "";
@@ -129,9 +139,15 @@
 			{
 				super.onUpdate();
 
-				var value = this.r.getValue();
-
-				this.text.text = value + " = " + eval(value);
+				try
+				{
+					var value = this.r.getValue();
+					this.text.text = value + " = " + eval(value);
+				}
+				catch(e)
+				{
+					this.text.text = "NaN";
+				}
 			}
 		}
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "escher.js",
-	"version": "0.1.7",
+	"version": "0.1.8",
 	"description": "escher.js is a web library for building interactive diagrams and graphs.",
 	"main": "build/escher.min.js",
 	"repository": {

source/Object2D.js

@@ -201,6 +201,8 @@ function Object2D()
 	this.beingDragged = false;
 }
 
+Object2D.prototype.constructor = Object2D;
+
 /**
  * Check if a point in world coordinates intersects this object or its children and get a list of the objects intersected.
  *
@@ -550,8 +552,4 @@ Object2D.prototype.onButtonDown = null;
  */
 Object2D.prototype.onButtonUp = null;
 
-/**
- * Function used to serialize the data
- */
-
 export {Object2D};

source/Serialization.ts → source/Serialization.js

@@ -22,7 +22,7 @@ function Serialization(){}
  */
 Serialization.serialize = function(object)
 {
-
+	// TODO <ADD CODE HERE>
 };
 
 /**
@@ -34,7 +34,7 @@ Serialization.serialize = function(object)
  */
 Serialization.parse = function(data)
 {
-
+	// TODO <ADD CODE HERE>
 };
 
 export {Serialization};

source/objects/BezierCurve.js

@@ -29,6 +29,7 @@ function BezierCurve()
 }
 
 BezierCurve.prototype = Object.create(Line.prototype);
+BezierCurve.prototype.constructor = BezierCurve;
 
 /**
  * Create a bezier curve helper, to edit the bezier curve anchor points.

source/objects/Box.js

@@ -1,6 +1,7 @@
 import {Object2D} from "../Object2D.js";
 import {Vector2} from "../math/Vector2.js";
 import {Box2} from "../math/Box2.js";
+import {BezierCurve} from "./BezierCurve";
 
 /**
  * Box object draw a rectangular object.
@@ -40,6 +41,7 @@ function Box()
 }
 
 Box.prototype = Object.create(Object2D.prototype);
+Box.prototype.constructor = Box;
 
 Box.prototype.onPointerEnter = function(pointer, viewport)
 {

source/objects/Circle.js

@@ -1,4 +1,5 @@
 import {Object2D} from "../Object2D.js";
+import {Box} from "./Box";
 
 /**
  * Circle object draw a circular object, into the canvas.
@@ -38,6 +39,7 @@ function Circle()
 }
 
 Circle.prototype = Object.create(Object2D.prototype);
+Circle.prototype.constructor = Circle;
 
 Circle.prototype.isInside = function(point)
 {

source/objects/DOM.js

@@ -1,5 +1,6 @@
 import {Object2D} from "../Object2D.js";
 import {Vector2} from "../math/Vector2.js";
+import {Circle} from "./Circle";
 
 /**
  * A DOM object transformed using CSS3D to be included in the scene.
@@ -47,6 +48,7 @@ function DOM(parentDOM, type)
 }
 
 DOM.prototype = Object.create(Object2D.prototype);
+DOM.prototype.constructor = DOM;
 
 /**
  * DOM object implements onAdd() method to automatically attach the DOM object to the DOM tree.

source/objects/Graph.js

@@ -1,6 +1,7 @@
 import {Object2D} from "../Object2D.js";
 import {Vector2} from "../math/Vector2.js";
 import {Box2} from "../math/Box2.js";
+import {DOM} from "./DOM";
 
 /**
  * Graph object is used to draw simple graph data into the canvas.
@@ -53,6 +54,7 @@ function Graph()
 }
 
 Graph.prototype = Object.create(Object2D.prototype);
+Graph.prototype.constructor = Graph;
 
 Graph.prototype.isInside = function(point)
 {

source/objects/Image.js

@@ -1,5 +1,6 @@
 import {Object2D} from "../Object2D.js";
 import {Box2} from "../math/Box2.js";
+import {Graph} from "./Graph";
 
 /**
  * Image object is used to draw an image from URL.
@@ -29,6 +30,7 @@ function Image(src)
 }
 
 Image.prototype = Object.create(Object2D.prototype);
+Image.prototype.constructor = Image;
 
 /**
  * Set the image of the object.

source/objects/Line.js

@@ -1,5 +1,6 @@
 import {Object2D} from "../Object2D.js";
 import {Vector2} from "../math/Vector2.js";
+import {Image} from "./Image";
 
 /**
  * Line object draw a line from one point to another without any kind of interpolation.
@@ -48,6 +49,7 @@ function Line()
 }
 
 Line.prototype = Object.create(Object2D.prototype);
+Line.prototype.constructor = Line;
 
 Line.prototype.style = function(context, viewport, canvas)
 {

source/objects/MultiLineText.js

@@ -1,4 +1,5 @@
 import {Text} from "./Text.js";
+import {Line} from "./Line";
 
 /**
  * Multiple line text drawing directly into the canvas.
@@ -32,6 +33,7 @@ function MultiLineText()
 }
 
 MultiLineText.prototype = Object.create(Text.prototype);
+MultiLineText.prototype.constructor = MultiLineText;
 
 MultiLineText.prototype.draw = function(context, viewport, canvas)
 {

source/objects/Pattern.js

@@ -1,5 +1,6 @@
 import {Object2D} from "../Object2D.js";
 import {Box2} from "../math/Box2.js";
+import {MultiLineText} from "./MultiLineText";
 
 /**
  * Pattern object draw a image repeated as a pattern.
@@ -36,6 +37,7 @@ function Pattern(src)
 }
 
 Pattern.prototype = Object.create(Object2D.prototype);
+Pattern.prototype.constructor = Pattern;
 
 /**
  * Set the image of the object.

source/objects/QuadraticCurve.js

@@ -2,6 +2,7 @@ import {Object2D} from "../Object2D.js";
 import {Vector2} from "../math/Vector2.js";
 import {Circle} from "./Circle.js";
 import {Line} from "./Line.js";
+import {Pattern} from "./Pattern";
 
 /**
  * Bezier curve object draw as bezier curve between two points.
@@ -24,6 +25,7 @@ function QuadraticCurve()
 }
 
 QuadraticCurve.prototype = Object.create(Line.prototype);
+QuadraticCurve.prototype.constructor = QuadraticCurve;
 
 /**
  * Create a quadratic curve helper, to edit the curve control point.

source/objects/RoundedBox.js

@@ -1,4 +1,5 @@
 import {Box} from "./Box";
+import {QuadraticCurve} from "./QuadraticCurve";
 
 /**
  * Rounded box object draw a rectangular object with rounded corners.
@@ -19,6 +20,7 @@ function RoundedBox()
 }
 
 RoundedBox.prototype = Object.create(Box.prototype);
+RoundedBox.prototype.constructor = RoundedBox;
 
 /**
  * Draw a rounded rectangle into the canvas context using path to draw the rounded rectangle.

source/objects/Text.js

@@ -1,4 +1,5 @@
 import {Object2D} from "../Object2D.js";
+import {RoundedBox} from "./RoundedBox";
 
 /**
  * Text element, used to draw single line text into the canvas.
@@ -67,6 +68,7 @@ function Text()
 }
 
 Text.prototype = Object.create(Object2D.prototype);
+Text.prototype.constructor = Text;
 
 Text.prototype.draw = function(context, viewport, canvas)
 {

source/objects/mask/BoxMask.js

@@ -1,6 +1,7 @@
 import {Mask} from "./Mask.js";
 import {Vector2} from "../../math/Vector2.js";
 import {Box2} from "../../math/Box2.js";
+import {Text} from "../Text";
 
 /**
  * Box mask can be used to clear a box mask region.
@@ -16,16 +17,21 @@ function BoxMask()
 
 	/**
 	 * Box object containing the size of the object.
+	 *
+	 * @type {Box2}
 	 */
 	this.box = new Box2(new Vector2(-50, -35), new Vector2(50, 35));
 
 	/**
 	 * If inverted the mask considers the outside of the box instead of the inside.
+	 *
+	 * @type {boolean}
 	 */
 	this.invert = false;
 }
 
 BoxMask.prototype = Object.create(Mask.prototype);
+BoxMask.prototype.constructor = BoxMask;
 
 BoxMask.prototype.isInside = function(point)
 {

source/objects/mask/Mask.js

@@ -1,4 +1,5 @@
 import {Object2D} from "../../Object2D.js";
+import {BoxMask} from "./BoxMask";
 
 /**
  * A mask can be used to set the drawing region.
@@ -18,7 +19,7 @@ function Mask()
 }
 
 Mask.prototype = Object.create(Object2D.prototype);
-
+Mask.prototype.constructor = Mask;
 Mask.prototype.isMask = true;
 
 /**

source/objects/node/Node.js

@@ -1,5 +1,6 @@
 import {NodeSocket} from "./NodeSocket";
 import {RoundedBox} from "../RoundedBox";
+import {Mask} from "../mask/Mask";
 
 /**
  * Node objects can be connected between them to create graphs.
@@ -33,6 +34,7 @@ function Node()
 }
 
 Node.prototype = Object.create(RoundedBox.prototype);
+Node.prototype.constructor = Node;
 
 /**
  * This method should be used for the node to register their socket inputs/outputs.

source/objects/node/NodeGraph.js

@@ -1,4 +1,5 @@
 import {Object2D} from "../../Object2D";
+import {Node} from "./Node";
 
 /**
  * Node graph object should be used as a container for node elements.
@@ -16,6 +17,7 @@ function NodeGraph()
 }
 
 NodeGraph.prototype = Object.create(Object2D.prototype);
+NodeGraph.prototype.constructor = NodeGraph;
 
 /**
  * Create and add a new node of specific node type to the graph.

source/objects/node/NodeSocket.js

@@ -2,6 +2,7 @@ import {Circle} from "../Circle";
 import {Node} from "./Node";
 import {NodeConnector} from "./NodeConnector";
 import {Text} from "../Text";
+import {NodeGraph} from "./NodeGraph";
 
 /**
  * Represents a node hook point. Is attached to the node element and represented visually.
@@ -88,6 +89,9 @@ function NodeSocket(node, direction, type, name)
 	this.add(this.text);
 }
 
+NodeSocket.prototype = Object.create(Circle.prototype);
+NodeSocket.prototype.constructor = NodeSocket;
+
 /**
  * Input hook can only be connected to an output.
  *
@@ -106,8 +110,6 @@ NodeSocket.INPUT = 1;
  */
 NodeSocket.OUTPUT = 2;
 
-NodeSocket.prototype = Object.create(Circle.prototype);
-
 /**
  * Get value stored or calculated in node socket, it should be the calculated from node logic, node inputs, user input, etc.
  *