Derp

source/objects/Box.js

@@ -1,6 +1,8 @@
 import {Object2D} from "../Object2D.js";
 import {Vector2} from "../math/Vector2.js";
 import {Box2} from "../math/Box2.js";
+import {ColorStyle} from "./style/ColorStyle";
+import {Style} from "./style/Style";
 
 /**
  * Box object draw a rectangular object.
@@ -24,7 +26,7 @@ function Box()
 	 *
 	 * If set null it is ignored.
 	 */
-	this.strokeStyle = "#000000";
+	this.strokeStyle = new ColorStyle("#000000");
 
 	/**
 	 * Line width, only used if a valid strokeStyle is defined.
@@ -36,7 +38,7 @@ function Box()
 	 *
 	 * If set null it is ignored.
 	 */
-	this.fillStyle = "#FFFFFF";
+	this.fillStyle = new ColorStyle("#FFFFFF");
 }
 
 Box.prototype = Object.create(Object2D.prototype);
@@ -46,12 +48,12 @@ Object2D.register(Box, "Box");
 
 Box.prototype.onPointerEnter = function(pointer, viewport)
 {
-	this.fillStyle = "#CCCCCC";
+	this.fillStyle = new ColorStyle("#CCCCCC");
 };
 
 Box.prototype.onPointerLeave = function(pointer, viewport)
 {
-	this.fillStyle = "#FFFFFF";
+	this.fillStyle = new ColorStyle("#FFFFFF");
 };
 
 Box.prototype.isInside = function(point)
@@ -66,14 +68,14 @@ Box.prototype.draw = function(context, viewport, canvas)
 
 	if(this.fillStyle !== null)
 	{	
-		context.fillStyle = this.fillStyle;
+		context.fillStyle = this.fillStyle.get();
 		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.strokeStyle = this.strokeStyle.get();
 		context.strokeRect(this.box.min.x, this.box.min.y, width, height);
 	}
 };
@@ -83,9 +85,9 @@ Box.prototype.serialize = function(recursive)
 	var data = Object2D.prototype.serialize.call(this, recursive);
 
 	data.box = this.box.toArray();
-	data.strokeStyle = this.strokeStyle;
+	data.strokeStyle = this.strokeStyle.serialize();
 	data.lineWidth = this.lineWidth;
-	data.fillStyle = this.fillStyle;
+	data.fillStyle = this.fillStyle.serialize();
 
 	return data;
 };
@@ -95,9 +97,9 @@ Box.prototype.parse = function(data, root)
 	Object2D.prototype.parse.call(this, data, root);
 
 	this.box.fromArray(data.box);
-	this.strokeStyle = data.strokeStyle;
+	this.strokeStyle = Style.parse(data.strokeStyle);
 	this.lineWidth = data.lineWidth;
-	this.fillStyle = data.fillStyle;
+	this.fillStyle = Style.parse(data.fillStyle);
 };
 
 export {Box};

source/objects/style/ColorStyle.js

@@ -17,7 +17,8 @@ function ColorStyle(color)
     this.color = color || "#000000";
 }
 
-ColorStyle.prototype = Object.create(Style);
+ColorStyle.prototype = Object.create(Style.prototype);
+Style.register(ColorStyle, "Color");
 
 ColorStyle.prototype.get = function(context)
 {

source/objects/style/LinearGradientStyle.js

@@ -1,4 +1,5 @@
 import {Style} from "./Style";
+import {ColorStyle} from "./ColorStyle";
 
 /**
  * Linear gradient style, represents a gradient of colors from a point to another interpolating in between.
@@ -15,7 +16,8 @@ function LinearGradientStyle()
     // TODO <ADD CODE HERE>
 }
 
-LinearGradientStyle.prototype = Object.create(Style);
+LinearGradientStyle.prototype = Object.create(Style.prototype);
+Style.register(LinearGradientStyle, "LinearGradient");
 
 /**
  * Add a new color stop defined by an offset and a color to the gradient.
@@ -43,4 +45,9 @@ LinearGradientStyle.prototype.serialize = function ()
     };
 };
 
+LinearGradientStyle.prototype.parse = function (data)
+{
+    // TODO <ADD CODE HERE>
+};
+
 export {LinearGradientStyle};

source/objects/style/PatternStyle.js

@@ -1,4 +1,5 @@
 import {Style} from "./Style";
+import {LinearGradientStyle} from "./LinearGradientStyle";
 
 /**
  * Pattern style represents an opaque object describing a pattern, based on an image, a canvas, or a video.
@@ -7,17 +8,46 @@ import {Style} from "./Style";
  *
  * @class
  * @extends {Style}
+ * @param {CanvasImageSource} source Source element of the pattern.
  */
-function PatternStyle()
+function PatternStyle(source)
 {
+    /**
+     * Source of the pattern style. Can be a image, video or another canvas element
+     *
+     * By default a empty image element is created.
+     *
+     * @type {CanvasImageSource}
+     */
+    this.source = source || document.createElement("img");
 
+    /**
+     * Repetition indicates how the pattern image should be repeated.
+     *
+     * Possible values are "repeat", "repeat-x", "repeat-y" or "no-repeat".
+     *
+     * More information about this attribute here https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createPattern.
+     *
+     * @type {string}
+     */
+    this.repetition = "repeat"
+
+    /**
+     * Transformation matrix applied to the pattern.
+     *
+     * The transformation allows to move, rotate and scale the pattern freely
+     *
+     * @type {Matrix}
+     */
+    this.transform = new Matrix();
 }
 
+PatternStyle.prototype = Object.create(Style.prototype);
+Style.register(PatternStyle, "Pattern");
+
 /**
  * Applies an 2x3 transformation matrix representing a linear transform to the pattern.
  *
- * The transformation allows to move, rotate and scale the pattern freely
- *
  * @param {number[]} transform 2x3 Transformation matrix.
  */
 PatternStyle.prototype.setTransform = function(transform)
@@ -25,9 +55,19 @@ PatternStyle.prototype.setTransform = function(transform)
     // TODO <ADD CODE HERE>
 };
 
+PatternStyle.prototype.get = function(context)
+{
+    return context.createPattern(this.source, this.repetition);
+};
+
 PatternStyle.prototype.serialize = function ()
 {
+    // TODO <ADD CODE HERE>
+};
 
+PatternStyle.prototype.parse = function (data)
+{
+    // TODO <ADD CODE HERE>
 };
 
 export {PatternStyle};

source/objects/style/RadialGradientStyle.js

@@ -1,4 +1,5 @@
 import {Style} from "./Style";
+import {PatternStyle} from "./PatternStyle";
 
 /**
  * Radial gradient interpolates colors from a point all around up to a radius value.
@@ -23,7 +24,8 @@ function RadialGradientStyle()
     // TODO <ADD CODE HERE>
 }
 
-RadialGradientStyle.prototype = Object.create(Style);
+RadialGradientStyle.prototype = Object.create(Style.prototype);
+Style.register(RadialGradientStyle, "RadialGradient");
 
 /**
  * Add a new color stop defined by an offset and a color to the gradient.
@@ -51,4 +53,10 @@ RadialGradientStyle.prototype.serialize = function ()
     };
 };
 
+RadialGradientStyle.prototype.parse = function (data)
+{
+    // TODO <ADD CODE HERE>
+};
+
+
 export {RadialGradientStyle};