Gradient style

source/objects/style/GradientStyle.js

@@ -0,0 +1,64 @@
+import {Style} from "./Style";
+
+/**
+ * Gradient style is used to represent any type of gradient based style.
+ *
+ * It handles any gradient based operations and should be used as base for other gradient styles.
+ *
+ * @class
+ * @extends {Style}
+ */
+function GradientStyle()
+{
+    /**
+     * List of colors that compose this gradient ordered.
+     *
+     * You need to add at least one color stop to have a visible gradient.
+     *
+     * @type {GradientColorStop[]}
+     */
+    this.colors = [];
+}
+
+/**
+ * Gradient color stop is used to create the gradients by their color sections.
+ *
+ * The gradients are ordered, each stop has a target color that becomes solid on its offset value triggering the next color stop if there is one.
+ *
+ * @param offset Offset of the color stop between 0 and 1 inclusive.
+ * @param color CSS color value.
+ * @constructor
+ */
+function GradientColorStop(offset, color)
+{
+    /**
+     * Offset of the color stop between 0 and 1 inclusive.
+     *
+     * @type {number}
+     */
+    this.offset = offset;
+
+    /**
+     * CSS color value.
+     *
+     * @type {string}
+     */
+    this.color = color;
+}
+
+GradientStyle.prototype = Object.create(Style.prototype);
+
+/**
+ * Add a new color stop defined by an offset and a color to the gradient.
+ *
+ * If the offset is not between 0 and 1 inclusive, or if color can't be parsed as a CSS color, an error is raised.
+ *
+ * @param {number} offset Offset of the color stop between 0 and 1 inclusive.
+ * @param {string} color CSS color value.
+ */
+GradientStyle.prototype.addColorStop = function(offset, color)
+{
+    this.colors.push(new GradientColorStop(offset, color));
+};
+
+export {GradientStyle, GradientColorStop};

source/objects/style/LinearGradientStyle.js

@@ -1,5 +1,5 @@
 import {Style} from "./Style";
-import {ColorStyle} from "./ColorStyle";
+import {GradientStyle} from "./GradientStyle";
 
 /**
  * Linear gradient style, represents a gradient of colors from a point to another interpolating in between.
@@ -9,29 +9,17 @@ import {ColorStyle} from "./ColorStyle";
  * The get method returns a CanvasGradient https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient when generated.
  *
  * @class
- * @extends {Style}
+ * @extends {GradientStyle}
  */
 function LinearGradientStyle()
 {
+    GradientStyle.call(this);
     // TODO <ADD CODE HERE>
 }
 
-LinearGradientStyle.prototype = Object.create(Style.prototype);
+LinearGradientStyle.prototype = Object.create(GradientStyle.prototype);
 Style.register(LinearGradientStyle, "LinearGradient");
 
-/**
- * Add a new color stop defined by an offset and a color to the gradient.
- *
- * If the offset is not between 0 and 1 inclusive, or if color can't be parsed as a CSS color, an error is raised.
- *
- * @param {number} offset Offset of the color stop between 0 and 1 inclusive.
- * @param {string} color CSS color value.
- */
-LinearGradientStyle.prototype.addColorStop = function(offset, color)
-{
-    // TODO <ADD CODE HERE>
-};
-
 LinearGradientStyle.prototype.get = function(context)
 {
     // TODO <ADD CODE HERE>

source/objects/style/RadialGradientStyle.js

@@ -1,49 +1,55 @@
+import {GradientStyle} from "./GradientStyle";
 import {Style} from "./Style";
-import {PatternStyle} from "./PatternStyle";
 
 /**
- * Radial gradient interpolates colors from a point all around up to a radius value.
+ * Radial gradient interpolates colors from a point to another point around up to a starting and finishing radius value.
  *
- * Outside of the radius the color is solid.
+ * If the start and end point are the same it interpolates around the starting and ending radius forming a circle. Outside of the radius the color is solid.
  *
  * The get method returns a CanvasGradient https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient when generated.
  *
  * @class
- * @extends {Style}
+ * @extends {GradientStyle}
  */
 function RadialGradientStyle()
 {
-    this.start = new Vector2(0, 0);
+    GradientStyle.call(this);
 
-    this.end = new Vector2(20, 20);
+    /**
+     * The coordinates of the starting circle of the gradient.
+     *
+     * @type {Vector2}
+     */
+    this.start = new Vector2(0, 0);
 
-    this.radiusStart = 0;
+    /**
+     * The radius of the starting circle.
+     *
+     * @type {number}
+     */
+    this.startRadius = 10;
 
-    this.radiusEnd = 10;
+    /**
+     * The coordinates of the ending circle of the gradient.
+     *
+     * @type {Vector2}
+     */
+    this.end = new Vector2(0, 0);
 
-    // TODO <ADD CODE HERE>
+    /**
+     * The radius of the ending circle.
+     *
+     * @type {number}
+     */
+    this.endRadius = 50;
 }
 
-RadialGradientStyle.prototype = Object.create(Style.prototype);
+RadialGradientStyle.prototype = Object.create(GradientStyle.prototype);
 Style.register(RadialGradientStyle, "RadialGradient");
 
-/**
- * Add a new color stop defined by an offset and a color to the gradient.
- *
- * If the offset is not between 0 and 1 inclusive, or if color can't be parsed as a CSS color, an error is raised.
- *
- * @param {number} offset Offset of the color stop between 0 and 1 inclusive.
- * @param {string} color CSS color value.
- */
-RadialGradientStyle.prototype.addColorStop = function(offset, color)
-{
-    // TODO <ADD CODE HERE>
-};
-
 RadialGradientStyle.prototype.get = function(context)
 {
-    // TODO <ADD CODE HERE>
-    // return context.createRadialGradient();
+    return context.createRadialGradient(this.start.x, this.start.y, this.startRadius, this.end.x, this.end.y, this.endRadius);
 };
 
 RadialGradientStyle.prototype.serialize = function ()