Introduze style() on Object2d

source/Escher.js

@@ -21,7 +21,14 @@ export {Image} from "./objects/Image.js";
 export {DOM} from "./objects/DOM.js";
 export {Pattern} from "./objects/Pattern.js";
 export {Graph} from "./objects/Graph.js";
+
 export {BezierCurve} from "./objects/BezierCurve.js";
+export {QuadraticCurve} from "./objects/QuadraticCurve.js";
+
+export {Node} from "./objects/node/Node.js";
+export {NodeConnector} from "./objects/node/NodeConnector.js";
+export {NodeInput} from "./objects/node/NodeInput.js";
+export {NodeOutput} from "./objects/node/NodeOutput.js";
 
 export {ViewportControls} from "./controls/ViewportControls.js";
 

source/Object2D.js

@@ -3,11 +3,11 @@ import {Matrix} from "./math/Matrix.js";
 import {UUID} from "./math/UUID.js";
 
 /**
- * Base object class, implements all the object positioning and scalling features.
+ * Base object class, implements all the object positioning and scaling features.
  *
  * Stores all the base properties shared between all objects as the position, transformation properties, children etc.
  *
- * Object2D should be used as a group to store all the other objects drawn.
+ * Object2D object can be used as a group to the other objects drawn.
  *
  * @class
  */
@@ -263,11 +263,9 @@ Object2D.prototype.updateMatrix = function(context)
 };
 
 /**
- * Apply the transform to the rendering context.
+ * Apply the transform to the rendering context, it is assumed that the viewport transform is pre-applied to the context.
  *
- * It is assumed that the viewport transform is pre-applied to the context.
- *
- * Can also be used for pre rendering logic.
+ * This is called before style() and draw(). It can also be used for some pre-rendering logic.
  *
  * @param {CanvasRenderingContext2D} context Canvas 2d drawing context.
  * @param {Viewport} viewport Viewport applied to the canvas.
@@ -278,12 +276,25 @@ Object2D.prototype.transform = function(context, viewport)
 };
 
 /**
- * Draw the object into the canvas.
+ * Style is called right before draw() it should not draw any content into the canvas, all context styling should be applied here (colors, fonts, etc).
+ *
+ * The draw() and style() methods can be  useful for objects that share the same styling attributes but are drawing differently.
  *
- * Has to be implemented by underlying classes.
+ * Should be implemented by underlying classes.
  *
  * @param {CanvasRenderingContext2D} context Canvas 2d drawing context.
- * @param {Viewport} viewport Viewport applied to the 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.style = 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.
+ *
+ * Should be implemented by underlying classes.
+ *
+ * @param {CanvasRenderingContext2D} context Canvas 2d drawing context.
+ * @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){};

source/Viewport.js

@@ -3,7 +3,9 @@ import {Matrix} from "./math/Matrix.js";
 import {UUID} from "./math/UUID.js";
 
 /**
- * Used to indicate how the user views the content inside of the canvas.
+ * Viewport defines the user view into the content being rendered, similar to a camera it defines the size of the content, rotation and position of the content.
+ *
+ * The viewport can be moved, rotated and scaled to navigate the virtual canvas.
  *
  * @class
  * @param {Element} canvas Canvas DOM element where the viewport is being rendered.
@@ -51,9 +53,9 @@ function Viewport(canvas)
 	this.matrixNeedsUpdate = true;
 
 	/**
-	 * Flag to indicate if the viewport should move when scalling.
+	 * Flag to indicate if the viewport should move when scaling.
 	 *
-	 * For some application its easier to focus the target if the viewport moves to the pointer location while scalling.
+	 * For some application its easier to focus the target if the viewport moves to the pointer location while scaling.
 	 */
 	this.moveOnScale = false;
 

source/objects/BezierCurve.js

@@ -7,6 +7,7 @@ import {Line} from "./Line.js";
  * Bezier curve object draw as bezier curve between two points.
  *
  * @class
+ * @extends {Object2D}
  */
 function BezierCurve()
 {