Rename GradientStop#rampPoint to #offset

CHANGELOG.md

@@ -256,7 +256,7 @@ contribute to the code.
   It is replaced by `Project#addLayer()` and `Project#insertLayer()`.
 
 ### Deprecated
-- `#windingRule` on `Item` and `Style` → `#fillRule`.
+- `#windingRule` on `Item` and `Style` → `#fillRule`
 - `Curve#getNormalAt(time, true)` → `#getNormalAtTime(true)`
 - `Curve#divide()` → `#divideAt(offset)` / `#divideAtTime(time)`
 - `Curve#split()` → `#splitAt(offset)` / `#splitAtTime(time)`
@@ -273,6 +273,7 @@ contribute to the code.
 - `Symbol#definition` → `SymbolDefinition#item`
 - `PlacedSymbol#symbol` → `SymbolItem#definition`
 - `Project#symbols` → `#symbolDefinitions`
-- `Matrix#concatenante` → `#append`.
+- `Matrix#concatenate` → `#append`
-- `Matrix#preConcatenate` → `#prepend`.
+- `Matrix#preConcatenate` → `#prepend`
-- `Matrix#chain` → `#appended`.
+- `Matrix#chain` → `#appended`
+- `GradientStop#rampPoint` → `#offset`

src/style/Color.js

@@ -858,9 +858,9 @@ var Color = Base.extend(new function() {
                 var stop = stops[i];
                 // Use the defined offset, and fall back to automatic linear
                 // calculation.
-                // NOTE: that if _rampPoint is 0 for the first entry, the fall
+                // NOTE: that if _offset is 0 for the first entry, the fall-back
-                // back will be so too.
+                // will be so too.
-                canvasGradient.addColorStop(stop._rampPoint || i / (l - 1),
+                canvasGradient.addColorStop(stop._offset || i / (l - 1),
                         stop._color.toCanvasStyle());
             }
             return this._canvasStyle = canvasGradient;

src/style/GradientStop.js

@@ -23,30 +23,31 @@ var GradientStop = Base.extend(/** @lends GradientStop# */{
      * Creates a GradientStop object.
      *
      * @param {Color} [color=new Color(0, 0, 0)] the color of the stop
-     * @param {Number} [rampPoint=null] the position of the stop on the gradient
+     * @param {Number} [offset=null] the position of the stop on the gradient
      * ramp as a value between `0` and `1`; `null` or `undefined` for automatic
      * assignment.
      */
     initialize: function GradientStop(arg0, arg1) {
-        // (color, rampPoint)
+        // (color, offset)
         var color = arg0,
-            rampPoint = arg1;
+            offset = arg1;
         if (typeof arg0 === 'object' && arg1 === undefined) {
             // Make sure the first entry in the array is not a number, in which
             // case the whole array would be a color, and the assignments would
             // already have occurred correctly above.
             if (Array.isArray(arg0) && typeof arg0[0] !== 'number') {
-                // ([color, rampPoint])
+                // ([color, offset])
                 color = arg0[0];
-                rampPoint = arg0[1];
+                offset = arg0[1];
-            } else if ('color' in arg0 || 'rampPoint' in arg0) {
+            } else if ('color' in arg0 || 'offset' in arg0
+                    || 'rampPoint' in arg0) {
                 // (stop)
                 color = arg0.color;
-                rampPoint = arg0.rampPoint;
+                offset = arg0.offset || arg0.rampPoint || 0;
             }
         }
         this.setColor(color);
-        this.setRampPoint(rampPoint);
+        this.setOffset(offset);
     },
 
     // TODO: Do we really need to also clone the color here?
@@ -54,13 +55,13 @@ var GradientStop = Base.extend(/** @lends GradientStop# */{
      * @return {GradientStop} a copy of the gradient-stop
      */
     clone: function() {
-        return new GradientStop(this._color.clone(), this._rampPoint);
+        return new GradientStop(this._color.clone(), this._offset);
     },
 
     _serialize: function(options, dictionary) {
         var color = this._color,
-            rampPoint = this._rampPoint;
+            offset = this._offset;
-        return Base.serialize(rampPoint == null ? [color] : [color, rampPoint],
+        return Base.serialize(offset == null ? [color] : [color, offset],
                 options, true, dictionary);
     },
 
@@ -106,23 +107,31 @@ var GradientStop = Base.extend(/** @lends GradientStop# */{
      * // This function is called each frame of the animation:
      * function onFrame(event) {
      *     var blackStop = gradient.stops[2];
-     *     // Animate the rampPoint between 0.7 and 0.9:
+     *     // Animate the offset between 0.7 and 0.9:
-     *     blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8;
+     *     blackStop.offset = Math.sin(event.time * 5) * 0.1 + 0.8;
      *
-     *     // Animate the rampPoint between 0.2 and 0.4
+     *     // Animate the offset between 0.2 and 0.4
      *     var redStop = gradient.stops[1];
-     *     redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3;
+     *     redStop.offset = Math.sin(event.time * 3) * 0.1 + 0.3;
      * }
      */
-    getRampPoint: function() {
+    getOffset: function() {
-        return this._rampPoint;
+        return this._offset;
     },
 
-    setRampPoint: function(rampPoint) {
+    setOffset: function(offset) {
-        this._rampPoint = rampPoint;
+        this._offset = offset;
         this._changed();
     },
 
+    /**
+     * @private
+     * @bean
+     * @deprecated use {@link #getOffset()} instead.
+     */
+    getRampPoint: '#getOffset',
+    setRampPoint: '#setOffset',
+
     /**
      * The color of the gradient stop.
      *
@@ -154,11 +163,11 @@ var GradientStop = Base.extend(/** @lends GradientStop# */{
      *
      * // This function is called each frame of the animation:
      * function onFrame(event) {
-     *     // Animate the rampPoint between 0.7 and 0.9:
+     *     // Animate the offset between 0.7 and 0.9:
-     *     blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8;
+     *     blackStop.offset = Math.sin(event.time * 5) * 0.1 + 0.8;
      *
-     *     // Animate the rampPoint between 0.2 and 0.4
+     *     // Animate the offset between 0.2 and 0.4
-     *     redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3;
+     *     redStop.offset = Math.sin(event.time * 3) * 0.1 + 0.3;
      * }
      */
     getColor: function() {
@@ -178,7 +187,7 @@ var GradientStop = Base.extend(/** @lends GradientStop# */{
     equals: function(stop) {
         return stop === this || stop && this._class === stop._class
                 && this._color.equals(stop._color)
-                && this._rampPoint == stop._rampPoint
+                && this._offset == stop._offset
                 || false;
     }
 });

src/svg/SvgExport.js

@@ -234,7 +234,7 @@ new function() {
                     stopColor = stop._color,
                     alpha = stopColor.getAlpha();
                 attrs = {
-                    offset: stop._rampPoint || i / (l - 1)
+                    offset: stop._offset || i / (l - 1)
                 };
                 if (stopColor)
                     attrs['stop-color'] = stopColor.toCSS(true);

src/svg/SvgImport.js

@@ -453,10 +453,9 @@ new function() {
 
         offset: function(item, value) {
             // http://www.w3.org/TR/SVG/pservers.html#StopElementOffsetAttribute
-            if (item.setRampPoint) {
+            if (item.setOffset) {
-                var percentage = value.match(/(.*)%$/);
+                var percent = value.match(/(.*)%$/);
-                item.setRampPoint(percentage ? percentage[1] / 100
+                item.setOffset(percent ? percent[1] / 100 : parseFloat(value));
-                        : parseFloat(value));
             }
         },
 

test/tests/Color.js

@@ -224,14 +224,17 @@ test('Color#divide', function() {
 });
 
 test('Gradient', function() {
-    var stop1 = new GradientStop({ rampPoint: 0 });
+    var stop1 = new GradientStop({ offset: 0.5 });
     var stop2 = new GradientStop('red', 0.75);
     var stop3 = new GradientStop(['white', 1]);
+    var stop4 = new GradientStop({ rampPoint: 0.5 }); // deprecated
     var gradient = new Gradient([stop1, stop2, stop3], true);
     equals(function() { return stop1.color; }, new Color(0, 0, 0));
     equals(function() { return stop2.color; }, new Color(1, 0, 0));
     equals(function() { return stop3.color; }, new Color(1, 1, 1));
-    equals(function() { return stop1.rampPoint; }, 0);
+    equals(function() { return stop4.color; }, new Color(0, 0, 0));
-    equals(function() { return stop2.rampPoint; }, 0.75);
+    equals(function() { return stop1.offset; }, 0.5);
-    equals(function() { return stop3.rampPoint; }, 1);
+    equals(function() { return stop2.offset; }, 0.75);
+    equals(function() { return stop3.offset; }, 1);
+    equals(function() { return stop4.offset; }, 0.5);
 });