Null style serialization

source/objects/Box.js

@@ -87,9 +87,9 @@ Box.prototype.serialize = function(recursive)
 	var data = Object2D.prototype.serialize.call(this, recursive);
 
 	data.box = this.box.toArray();
-	data.strokeStyle = this.strokeStyle.serialize();
+	data.strokeStyle = this.strokeStyle !== null ? this.strokeStyle.serialize() : null;
 	data.lineWidth = this.lineWidth;
-	data.fillStyle = this.fillStyle.serialize();
+	data.fillStyle = this.fillStyle !== null ? this.fillStyle.serialize() : null;
 
 	return data;
 };
@@ -99,9 +99,9 @@ Box.prototype.parse = function(data, root)
 	Object2D.prototype.parse.call(this, data, root);
 
 	this.box.fromArray(data.box);
-	this.strokeStyle = Style.parse(data.strokeStyle);
+	this.strokeStyle = data.strokeStyle !== null ? Style.parse(data.strokeStyle) : null;
 	this.lineWidth = data.lineWidth;
-	this.fillStyle = Style.parse(data.fillStyle);
+	this.fillStyle = data.fillStyle !== null ? Style.parse(data.fillStyle) : null;
 };
 
 export {Box};

source/objects/Circle.js

@@ -89,9 +89,9 @@ Circle.prototype.serialize = function(recursive)
 	var data = Object2D.prototype.serialize.call(this, recursive);
 
 	data.radius = this.radius;
-	data.strokeStyle = this.strokeStyle.serialize();
+	data.strokeStyle = this.strokeStyle !== null ? this.strokeStyle.serialize() : null;
 	data.lineWidth = this.lineWidth;
-	data.fillStyle = this.fillStyle.serialize();
+	data.fillStyle = this.fillStyle !== null ? this.fillStyle.serialize() : null;
 
 	return data;
 };
@@ -101,9 +101,9 @@ Circle.prototype.parse = function(data, root)
 	Object2D.prototype.parse.call(this, data, root);
 
 	this.radius = data.radius;
-	this.strokeStyle = Style.parse(data.strokeStyle);
+	this.strokeStyle = data.strokeStyle !== null ? Style.parse(data.strokeStyle) : null;
 	this.lineWidth = data.lineWidth;
-	this.fillStyle = Style.parse(data.fillStyle);
+	this.fillStyle = data.fillStyle !== null ? Style.parse(data.fillStyle) : null;
 };
 
 export {Circle};

source/objects/Line.js

@@ -86,7 +86,7 @@ Line.prototype.serialize = function(recursive)
 	data.from = this.from.toArray();
 	data.to = this.to.toArray();
 	data.dashPattern = this.dashPattern;
-	data.strokeStyle = this.strokeStyle.serialize();
+	data.strokeStyle = this.strokeStyle !== null ? this.strokeStyle.serialize() : null;
 	data.lineWidth = this.lineWidth;
 
 	return data;
@@ -99,7 +99,7 @@ Line.prototype.parse = function(data, root)
 	this.to.fromArray(data.to);
 	this.from.fromArray(data.from);
 	this.dashPattern = data.dashPattern;
-	this.strokeStyle = Style.parse(data.strokeStyle);
+	this.strokeStyle = data.strokeStyle !== null ? Style.parse(data.strokeStyle) : null;
 	this.lineWidth = data.lineWidth;
 };
 

source/objects/Text.js

@@ -97,9 +97,9 @@ Text.prototype.serialize = function(recursive)
 
 	data.text = this.text;
 	data.font = this.font;
-	data.strokeStyle = this.strokeStyle.serialize();
+	data.strokeStyle = this.strokeStyle !== null ? this.strokeStyle.serialize() : null;
 	data.lineWidth = this.lineWidth;
-	data.fillStyle = this.fillStyle.serialize();
+	data.fillStyle = this.fillStyle !== null ? this.fillStyle.serialize() : null;
 	data.textAlign = this.textAlign;
 	data.textBaseline = this.textBaseline;
 
@@ -112,9 +112,9 @@ Text.prototype.parse = function(data, root)
 
 	this.text = data.text;
 	this.font = data.font;
-	this.strokeStyle = Style.parse(data.strokeStyle);
+	this.strokeStyle = data.strokeStyle !== null ? Style.parse(data.strokeStyle) : null;
 	this.lineWidth = data.lineWidth;
-	this.fillStyle = Style.parse(data.fillStyle);
+	this.fillStyle = data.fillStyle !== null ? Style.parse(data.fillStyle) : null;
 	this.textAlign = data.textAlign;
 	this.textBaseline = data.textBaseline;
 };

source/objects/chart/Gauge.js

@@ -75,6 +75,16 @@ function Gauge()
 	 * @type {Style}
 	 */
 	this.baseStyle = new ColorStyle("#e9ecf1");
+
+	/**
+	 * Style of the gauge bar.
+	 *
+	 * @type {Style}
+	 */
+	this.barStyle = new LinearGradientStyle();
+	this.barStyle.addColorStop(0, "#61ff50");
+	this.barStyle.addColorStop(0.5, "#ffbb50");
+	this.barStyle.addColorStop(1, "#ff3269");
 }
 
 Gauge.prototype = Object.create(Object2D.prototype);
@@ -99,17 +109,15 @@ Gauge.prototype.draw = function(context, viewport, canvas)
 	//Back
 	context.lineWidth = this.lineWidth;
 	context.lineCap = "round";
-	context.strokeStyle = this.baseStyle.get();
+	context.strokeStyle = this.baseStyle.get(context);
 	context.beginPath();
 	context.arc(center[0], center[1], this.radius, range[0], range[1]);
 	context.stroke();
 
 	// Fill gradient
 	var gradient = context.createLinearGradient(-this.radius, 0, this.radius, 0);
-	gradient.addColorStop(0, "#61ff50");
-	gradient.addColorStop(0.5, "#ffbb50");
-	gradient.addColorStop(1, "#ff3269");
-	context.strokeStyle = gradient;
+
+	context.strokeStyle = this.barStyle.get(context);
 
 	context.lineWidth = this.lineWidth;
 	context.beginPath();

source/objects/chart/Graph.js

@@ -22,7 +22,7 @@ function Graph()
 	/**
 	 * Color of the box border line.
 	 */
-	this.strokeStyle = "rgb(0, 153, 255)";
+	this.strokeStyle = new ColorStyle("rgb(0, 153, 255)");
 
 	/**
 	 * Line width.
@@ -32,7 +32,7 @@ function Graph()
 	/**
 	 * Background color of the box.
 	 */
-	this.fillStyle = "rgba(0, 153, 255, 0.3)";
+	this.fillStyle = new ColorStyle("rgba(0, 153, 255, 0.3)");
 
 	/**
 	 * Minimum value of the graph.
@@ -73,7 +73,7 @@ Graph.prototype.draw = function(context, viewport, canvas)
 	var height = this.box.max.y - this.box.min.y;
 
 	context.lineWidth = this.lineWidth;
-	context.strokeStyle = this.strokeStyle;
+	context.strokeStyle = this.strokeStyle.get(context);
 	context.beginPath();
 		
 	var step = width / (this.data.length - 1);
@@ -90,7 +90,7 @@ Graph.prototype.draw = function(context, viewport, canvas)
 
 	if(this.fillStyle !== null)
 	{
-		context.fillStyle = this.fillStyle;
+		context.fillStyle = this.fillStyle.get(context);
 
 		context.lineTo(this.box.max.x, this.box.max.y);
 		context.lineTo(this.box.min.x, this.box.max.y);
@@ -103,9 +103,9 @@ Graph.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 !== null ? this.strokeStyle.serialize() : null;
 	data.lineWidth = this.lineWidth;
-	data.fillStyle = this.fillStyle;
+	data.fillStyle = this.fillStyle !== null ? this.fillStyle.serialize() : null;
 	data.min = this.min;
 	data.max = this.max;
 	data.data = this.data;
@@ -118,9 +118,9 @@ Graph.prototype.parse = function(data, root)
 	Object2D.prototype.parse.call(this, data, root);
 
 	this.box.fromArray(data.box);
-	this.strokeStyle = data.strokeStyle;
+	this.strokeStyle = data.strokeStyle !== null ? Style.parse(data.strokeStyle) : null;
 	this.lineWidth = data.lineWidth;
-	this.fillStyle = data.fillStyle;
+	this.fillStyle = data.fillStyle !== null ? Style.parse(data.fillStyle) : null;
 	this.min = data.min;
 	this.max = data.max;
 	this.data = data.data;