Multi line text

source/EventManager.js

@@ -20,7 +20,7 @@ function EventManager()
 /**
  * Add new event to the manager.
  *
- * @param {DOM} target Event target element.
+ * @param {Element} target Event target element.
  * @param {String} event Event name.
  * @param {Function} callback Callback function.
  */

source/Object2D.js

@@ -286,7 +286,7 @@ Object2D.prototype.transform = function(context, viewport)
  * @param {Viewport} viewport Viewport used to view the canvas content.
  * @param {DOM} canvas DOM canvas element where the content is being drawn.
  */
-Object2D.prototype.style = function(context, viewport, canvas){};
+Object2D.prototype.style = null; // function(context, viewport, canvas){};
 
 /**
  * Draw the object into the canvas, this is called transform() and style(), should be where the content is actually drawn into the canvas.
@@ -297,7 +297,7 @@ Object2D.prototype.style = function(context, viewport, canvas){};
  * @param {Viewport} viewport Viewport used to view the canvas content.
  * @param {DOM} canvas DOM canvas element where the content is being drawn.
  */
-Object2D.prototype.draw = function(context, viewport, canvas){};
+Object2D.prototype.draw = null; // function(context, viewport, canvas){};
 
 /**
  * Callback method while the object is being dragged across the screen.

source/Renderer.js

@@ -36,7 +36,9 @@ function Renderer(canvas, options)
 	this.pointer = new Pointer(window, canvas);
 
 	/**
-	 * Indicates if the canvas should be automatically cleared on each new frame.
+	 * Indicates if the canvas should be automatically cleared before new frame is drawn.
+	 *
+	 * If set to false the user should clear the frame before drawing.
 	 */
 	this.autoClear = true;
 }
@@ -281,8 +283,18 @@ Renderer.prototype.update = function(object, viewport)
 
 		// Apply the object transform to the canvas context
 		objects[i].transform(this.context, viewport, this.canvas);
-		objects[i].style(this.context, viewport, this.canvas);
-		objects[i].draw(this.context, viewport, this.canvas);
+
+		// Style the canvas context
+		if(objects[i].style !== null)
+		{
+			objects[i].style(this.context, viewport, this.canvas);
+		}
+
+		// Draw content into the canvas.
+		if(objects[i].draw !== null)
+		{
+			objects[i].draw(this.context, viewport, this.canvas);
+		}
 
 		if(objects[i].restoreContextState)
 		{

source/objects/BezierCurve.js

@@ -7,57 +7,25 @@ import {Line} from "./Line.js";
  * Bezier curve object draw as bezier curve between two points.
  *
  * @class
- * @extends {Object2D}
+ * @extends {Line}
  */
 function BezierCurve()
 {
-	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();
+	Line.call(this);
 
 	/**
 	 * Intial position control point, indicates the tangent of the bezier curve on the first point.
 	 */
 	this.fromCp = 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();
 
 	/**
 	 * Final position control point, indicates the tangent of the bezier curve on the last point.
 	 */
 	this.toCp = new Vector2();
-
-	/**
-	 * 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.
-	 *
-	 * E.g if the daspattern is [1, 2] we get 1 point with line, 2 without line repeat infinitelly.
-	 */
-	this.dashPattern = [5, 5];
-
-	/**
-	 * Style of the object line.
-	 */
-	this.strokeStyle = "#000000";
-
-	/**
-	 * Line width of the line.
-	 */
-	this.lineWidth = 1;
 }
 
-BezierCurve.prototype = Object.create(Object2D.prototype);
+BezierCurve.prototype = Object.create(Line.prototype);
 
 /**
  * Create a bezier curve helper, to edit the bezier curve anchor points.
@@ -104,10 +72,6 @@ BezierCurve.curveHelper = function(object)
 
 BezierCurve.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.bezierCurveTo(this.fromCp.x, this.fromCp.y, this.toCp.x, this.toCp.y, this.to.x, this.to.y);

source/objects/Line.js

@@ -16,14 +16,14 @@ function Line()
 	/**
 	 * Initial point of the line.
 	 *
-	 * Can be equal to the position object of another object. (Making it automatically follow that object.)
+	 * Can be equal to the position object of another object. Making it automatically follow that object.
 	 */
 	this.from = new Vector2();
 
 	/**
 	 * Final point of the line.
 	 *
-	 * Can be equal to the position object of another object. (Making it automatically follow that object.)
+	 * Can be equal to the position object of another object. Making it automatically follow that object.
 	 */
 	this.to = new Vector2();
 
@@ -49,12 +49,15 @@ function Line()
 
 Line.prototype = Object.create(Object2D.prototype);
 
-Line.prototype.draw = function(context, viewport, canvas)
+Line.prototype.style = function(context, viewport, canvas)
 {
 	context.lineWidth = this.lineWidth;
 	context.strokeStyle = this.strokeStyle;
 	context.setLineDash(this.dashPattern);
-	
+};
+
+Line.prototype.draw = function(context, viewport, canvas)
+{
 	context.beginPath();
 	context.moveTo(this.from.x, this.from.y);
 	context.lineTo(this.to.x, this.to.y);

source/objects/MultiLineText.js

@@ -0,0 +1,103 @@
+import {Text} from "../Text.js";
+
+/**
+ * Multiple line text drawing directly into the canvas.
+ *
+ * Has support for basic text indent and alignment.
+ *
+ * @class
+ * @extends {Text}
+ */
+function MultiLineText()
+{
+	Text.call(this);
+
+	/**
+	 * Text baseline defines the vertical position of the text relative to the imaginary line Y position.
+	 *
+	 * @type {string}
+	 */
+	this.textBaseline = "middle";
+
+	/**
+	 * Maximum width of the text content. After text reaches the max width a line break is placed.
+	 *
+	 * @type {number}
+	 */
+	this.maxWidth = 100;
+
+	/**
+	 * Height of each line of text, can be smaller or larger than the actual font size.
+	 *
+	 * Can be set to null to be ignored.
+	 *
+	 * @type {number}
+	 */
+	this.lineHeight = 100;
+}
+
+MultiLineText.prototype = Object.create(Text.prototype);
+
+MultiLineText.prototype.draw = function(context, viewport, canvas)
+{
+	context.font = this.font;
+	context.textAlign = this.textAlign;
+	context.textBaseline = this.textBaseline;
+	context.font = font;
+
+	var lineHeight = this.lineHeight || Number.parseFloat(font);
+	var lines = text.split("\n");
+	var offsetY = 0;
+
+	// Iterate trough all lines (breakpoints)
+	for(var i = 0; i < lines.length; i++)
+	{
+		var line = lines[i];
+		var size = context.measureText(line);
+		var sublines = [];
+
+		// Split into multiple sub-lines
+		if(size.width > this.maxWidth)
+		{
+			while(line.length > 0)
+			{
+				var subline = "";
+				var subsize = context.measureText(subline + line[0]);
+
+				while(subsize.width < this.maxWidth && line.length > 0)
+				{
+					subline += line[0];
+					line = line.substr(1);
+					subsize = context.measureText(subline + line[0]);
+				}
+
+				sublines.push(subline);
+			}
+
+		}
+		// Fits into a single line
+		else
+		{
+			sublines = [line];
+		}
+
+		for(var j = 0; j < sublines.length; j++)
+		{
+			if(this.fillStyle !== null)
+			{
+				context.fillStyle = this.fillStyle;
+				context.fillText(sublines[j], x, y + offsetY);
+			}
+
+			if(this.strokeStyle !== null)
+			{
+				context.strokeStyle = this.strokeStyle;
+				context.strokeText(sublines[j], x, y + offsetY);
+			}
+
+			offsetY += lineHeight;
+		}
+	}
+};
+
+export {MultiLineText};

source/objects/QuadraticCurve.js

@@ -11,14 +11,7 @@ import {Line} from "./Line.js";
  */
 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();
+	Line.call(this);
 
 	/**
 	 * Control point of the quadratic curve used to control the curvature of the line between the from and to point.
@@ -26,35 +19,9 @@ function QuadraticCurve()
 	 * The curve is interpolated in the direction of the control point it defined the path of the curve.
 	 */
 	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);
+QuadraticCurve.prototype = Object.create(Line.prototype);
 
 /**
  * Create a quadratic curve helper, to edit the curve control point.
@@ -91,10 +58,6 @@ QuadraticCurve.curveHelper = function(object)
 
 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);

source/objects/node/Node.js

@@ -14,7 +14,9 @@ function Node()
 	Box.call(this);
 
 	this.inputs = [];
+
 	this.outputs = [];
+
 }
 
 Node.prototype = Object.create(Box.prototype);