Skip to content

Commit 9cdc4b9

Browse files
lehnilehni
committed
Switch back to only one Gradient constructor for both linear and radial Gradients.
1 parent 9343701 commit 9cdc4b9

12 files changed

Lines changed: 41 additions & 65 deletions

File tree

‎examples/JSON/Gradients.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<script type="text/javascript" src="../../dist/paper.js"></script>
88
<script type="text/paperscript" canvas="canvas1">
99
var path = new Path.Circle(view.center, view.bounds.height * 0.4);
10-
var gradient = new RadialGradient('yellow', 'red', 'black');
10+
var gradient = new Gradient(['yellow', 'red', 'black'], true);
1111
var from = path.position;
1212
var to = path.bounds.rightCenter;
1313
var gradientColor = new GradientColor(gradient, from, to);

‎examples/Paperjs.org/BouncingBalls.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
saturation: 1,
2323
brightness: 1
2424
};
25-
var gradient = new RadialGradient(color, 'black');
25+
var gradient = new Gradient([color, 'black'], true);
2626

2727
var radius = this.radius = 50 * Math.random() + 30;
2828
this.item = new CompoundPath({

‎examples/Paperjs.org/RadialRainbows.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
}
2323

2424
var path = new Path.Rectangle(view.bounds);
25-
var gradient = new RadialGradient(colors);
25+
var gradient = new Gradient(colors, true);
2626
var radius = Math.max(view.size.width, view.size.height) * 0.75;
2727
path.fillColor = new GradientColor(gradient, point, point + [radius, 0]);
2828
var gradientColor = path.fillColor;

‎examples/SVG Export/Gradients.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
<link rel="stylesheet" href="../css/style.css">
77
<script type="text/javascript" src="../../dist/paper.js"></script>
88
<script type="text/paperscript" canvas="canvas">
9-
var radial = new RadialGradient(new Color(1, 1, 0, 0), 'red', 'black');
10-
var linear = new LinearGradient(new Color(1, 1, 0, 0), 'red', 'black');
9+
var radial = new Gradient([new Color(1, 1, 0, 0), 'red', 'black'], true);
10+
var linear = new Gradient([new Color(1, 1, 0, 0), 'red', 'black'], false);
1111

1212
var radius = view.bounds.width * 0.4,
1313
from = new Point(view.center.x),

‎examples/Scripts/HslColor.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
var color = { hue: hue, saturation: saturation, lightness: lightness };
3939
colors.push(color);
4040
}
41-
var gradient = new RadialGradient(colors);
41+
var gradient = new Gradient(colors, true);
4242
var from = center;
4343
var to = center + vector;
4444
var gradientColor = new GradientColor(gradient, from, to);

‎src/color/Gradient.js‎

Lines changed: 16 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,15 @@
1616
* @class The Gradient object.
1717
*/
1818
var Gradient = this.Gradient = Base.extend(/** @lends Gradient# */{
19+
_class: 'Gradient',
1920

20-
initialize: function(stops, _type) {
21-
// Keep supporting the old way of creating gradients for the time being.
22-
if (this.constructor === Gradient)
23-
return new (_type === 'radial' ? RadialGradient : LinearGradient)(
24-
stops);
21+
initialize: function(stops, radial) {
2522
// Define this Gradient's unique id.
2623
this._id = ++Base._uid;
27-
this.setStops((arguments.length > 1 ? arguments : stops)
28-
|| ['white', 'black']);
24+
this.setStops(stops || ['white', 'black']);
25+
// Support old version of string type argument and new radial boolean.
26+
this.setRadial(typeof radial === 'string' && radial === 'radial'
27+
|| radial || false);
2928
},
3029

3130
_serialize: function(options, dictionary) {
@@ -63,7 +62,7 @@ var Gradient = this.Gradient = Base.extend(/** @lends Gradient# */{
6362
var index = this._owners ? this._owners.indexOf(color) : -1;
6463
if (index != -1) {
6564
this._owners.splice(index, 1);
66-
if (this._owners.length == 0)
65+
if (this._owners.length === 0)
6766
delete this._owners;
6867
}
6968
},
@@ -109,6 +108,15 @@ var Gradient = this.Gradient = Base.extend(/** @lends Gradient# */{
109108
this._changed();
110109
},
111110

111+
getRadial: function() {
112+
return this._radial;
113+
},
114+
115+
setRadial: function(radial) {
116+
this._radial = radial;
117+
this._changed();
118+
},
119+
112120
/**
113121
* Checks whether the gradient is equal to the supplied gradient.
114122
*
@@ -127,35 +135,3 @@ var Gradient = this.Gradient = Base.extend(/** @lends Gradient# */{
127135
return false;
128136
}
129137
});
130-
131-
/**
132-
* @name LinearGradient
133-
*
134-
* @class The LinearGradient object.
135-
*/
136-
var LinearGradient = this.LinearGradient = Gradient.extend(/** @lends LinearGradient# */{
137-
_type: 'LinearGradient'
138-
139-
/**
140-
* Creates a linear gradient object
141-
*
142-
* @name LinearGradient#initialize
143-
* @param {GradientStop[]} stops
144-
*/
145-
});
146-
147-
/**
148-
* @name RadialGradient
149-
*
150-
* @class The RadialGradient object.
151-
*/
152-
var RadialGradient = this.RadialGradient = Gradient.extend(/** @lends RadialGradient# */{
153-
_type: 'RadialGradient'
154-
155-
/**
156-
* Creates a radial gradient object
157-
*
158-
* @name RadialGradient#initialize
159-
* @param {GradientStop[]} stops
160-
*/
161-
});

‎src/color/GradientColor.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
4141
*
4242
* // Create the gradient, passing it an array of colors to be converted
4343
* // to evenly distributed color stops:
44-
* var gradient = new LinearGradient('yellow', 'red', 'blue');
44+
* var gradient = new Gradient(['yellow', 'red', 'blue']);
4545
*
4646
* // Have the gradient color run between the topLeft and
4747
* // bottomRight points we defined earlier:
@@ -66,7 +66,7 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
6666
* var stops = [['yellow', 0], ['red', 0.15], ['red', 0.3], ['black', 0.9]];
6767
*
6868
* // Create a radial gradient using the color stops array:
69-
* var gradient = new RadialGradient(stops);
69+
* var gradient = new Gradient(stops, true);
7070
*
7171
* // We will use the center point of the circle shaped path as
7272
* // the origin point for our gradient color
@@ -87,7 +87,7 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
8787
this._id = ++Base._uid;
8888
// Try object literal constructor first
8989
if (!this._set(gradient)) {
90-
this.setGradient(gradient || new LinearGradient());
90+
this.setGradient(gradient || new Gradient());
9191
this.setOrigin(origin);
9292
this.setDestination(destination);
9393
if (hilite)
@@ -139,7 +139,7 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
139139
* // Create a rectangle shaped path with the same dimensions as
140140
* // that of the view and fill it with a gradient color:
141141
* var path = new Path.Rectangle(view.bounds);
142-
* var gradient = new LinearGradient('yellow', 'red', 'blue');
142+
* var gradient = new Gradient(['yellow', 'red', 'blue']);
143143
*
144144
* // Have the gradient color run from the top left point of the view,
145145
* // to the bottom right point of the view:
@@ -185,7 +185,7 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
185185
* radius: view.bounds.height * 0.4
186186
* });
187187
*
188-
* var gradient = new RadialGradient('yellow', 'red', 'black');
188+
* var gradient = new Gradient(['yellow', 'red', 'black'], true);
189189
* var from = view.center;
190190
* var to = view.bounds.bottomRight;
191191
* var gradientColor = new GradientColor(gradient, from, to);
@@ -223,7 +223,7 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
223223
* radius: view.bounds.height * 0.4
224224
* });
225225
*
226-
* var gradient = new RadialGradient('yellow', 'red', 'black');
226+
* var gradient = new Gradient(['yellow', 'red', 'black'], true);
227227
* var from = path.position;
228228
* var to = path.bounds.rightCenter;
229229
* var gradientColor = new GradientColor(gradient, from, to);
@@ -255,13 +255,13 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
255255
toCanvasStyle: function(ctx) {
256256
var gradient,
257257
stops = this._gradient._stops;
258-
if (this._gradient._type === 'LinearGradient') {
259-
gradient = ctx.createLinearGradient(this._origin.x, this._origin.y,
260-
this._destination.x, this._destination.y);
261-
} else {
258+
if (this._gradient._radial) {
262259
var origin = this._hilite || this._origin;
263260
gradient = ctx.createRadialGradient(origin.x, origin.y,
264261
0, this._origin.x, this._origin.y, this._radius);
262+
} else {
263+
gradient = ctx.createLinearGradient(this._origin.x, this._origin.y,
264+
this._destination.x, this._destination.y);
265265
}
266266
for (var i = 0, l = stops.length; i < l; i++) {
267267
var stop = stops[i];

‎src/color/GradientStop.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ var GradientStop = this.GradientStop = Base.extend(/** @lends GradientStop# */{
8989
*
9090
* // Prepare the gradient color and apply it to the path:
9191
* var colors = [['yellow', 0.05], ['red', 0.2], ['black', 1]];
92-
* var gradient = new RadialGradient(colors);
92+
* var gradient = new Gradient(colors, true);
9393
* var from = path.position;
9494
* var to = path.bounds.rightCenter;
9595
* var gradientColor = new GradientColor(gradient, from, to);
@@ -135,7 +135,7 @@ var GradientStop = this.GradientStop = Base.extend(/** @lends GradientStop# */{
135135
* });
136136
*
137137
* // Create a radial gradient that mixes red and black evenly:
138-
* var gradient = new RadialGradient('red', 'black');
138+
* var gradient = new Gradient(['red', 'black'], true);
139139
*
140140
* // Fill the path with a gradient color that runs from its center,
141141
* // to the right center of its bounding rectangle:

‎src/svg/SvgExport.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -342,13 +342,13 @@ new function() {
342342
var gradientNode = getDefinition(color);
343343
if (!gradientNode) {
344344
var gradient = color.gradient,
345-
type = gradient._type,
345+
radial = gradient._radial,
346346
matrix = item._gradientMatrix,
347347
origin = color._origin.transform(matrix),
348348
destination = color._destination.transform(matrix),
349349
highlight = color._hilite && color._hilite.transform(matrix),
350350
attrs;
351-
if (type == 'RadialGradient') {
351+
if (radial) {
352352
attrs = {
353353
cx: origin.x,
354354
cy: origin.y,
@@ -367,8 +367,8 @@ new function() {
367367
};
368368
}
369369
attrs.gradientUnits = 'userSpaceOnUse';
370-
gradientNode = createElement(type[0].toLowerCase() + type.slice(1),
371-
attrs);
370+
gradientNode = createElement(
371+
(radial ? 'radial' : 'linear') + 'Gradient', attrs);
372372
var stops = gradient._stops;
373373
for (var i = 0, l = stops.length; i < l; i++) {
374374
var stop = stops[i],

‎src/svg/SvgImport.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ new function() {
143143
stops.push(applyAttributes(new GradientStop(), child));
144144
}
145145
var isRadial = type === 'radialGradient',
146-
gradient = new (isRadial ? RadialGradient : LinearGradient)(stops),
146+
gradient = new Gradient(stops, isRadial),
147147
origin, destination, highlight;
148148
if (isRadial) {
149149
origin = getPoint(node, 'cx', 'cy');

0 commit comments

Comments
 (0)