aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorNivesh Rajbhandari2012-03-12 16:19:44 -0700
committerNivesh Rajbhandari2012-03-12 16:19:44 -0700
commit2ac9a855724cc4ccf147ce4130a733a84cc647c3 (patch)
tree0ea2eb5581fad03d93e3b37e7a289bc294af2b90 /js
parent2c6339a9191033c937c2bac3e181c2bc380f4c48 (diff)
downloadninja-2ac9a855724cc4ccf147ce4130a733a84cc647c3.tar.gz
Support import/export of gradient materials. This fixes the eyedropper not being able to sample gradient colors from WebGL shapes.
Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
Diffstat (limited to 'js')
-rwxr-xr-xjs/lib/geom/circle.js34
-rwxr-xr-xjs/lib/geom/geom-obj.js43
-rwxr-xr-xjs/lib/geom/line.js19
-rwxr-xr-xjs/lib/geom/rectangle.js38
4 files changed, 123 insertions, 11 deletions
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index 8f9f54d1..05501ec3 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -606,8 +606,20 @@ var Circle = function GLCircle() {
606 rtnStr += "strokeWidth: " + this._strokeWidth + "\n"; 606 rtnStr += "strokeWidth: " + this._strokeWidth + "\n";
607 rtnStr += "innerRadius: " + this._innerRadius + "\n"; 607 rtnStr += "innerRadius: " + this._innerRadius + "\n";
608 rtnStr += "strokeStyle: " + this._strokeStyle + "\n"; 608 rtnStr += "strokeStyle: " + this._strokeStyle + "\n";
609 rtnStr += "strokeColor: " + String(this._strokeColor) + "\n"; 609
610 rtnStr += "fillColor: " + String(this._fillColor) + "\n"; 610 if(this._strokeColor.gradientMode) {
611 rtnStr += "strokeGradientMode: " + this._strokeColor.gradientMode + "\n";
612 rtnStr += "strokeColor: " + this.gradientToString(this._strokeColor.color) + "\n";
613 } else {
614 rtnStr += "strokeColor: " + String(this._strokeColor) + "\n";
615 }
616
617 if(this._fillColor.gradientMode) {
618 rtnStr += "fillGradientMode: " + this._fillColor.gradientMode + "\n";
619 rtnStr += "fillColor: " + this.gradientToString(this._fillColor.color) + "\n";
620 } else {
621 rtnStr += "fillColor: " + String(this._fillColor) + "\n";
622 }
611 623
612 rtnStr += "strokeMat: "; 624 rtnStr += "strokeMat: ";
613 if (this._strokeMaterial) { 625 if (this._strokeMaterial) {
@@ -640,8 +652,22 @@ var Circle = function GLCircle() {
640 this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr ); 652 this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr );
641 var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr ); 653 var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr );
642 var fillMaterialName = this.getPropertyFromString( "fillMat: ", importStr ); 654 var fillMaterialName = this.getPropertyFromString( "fillMat: ", importStr );
643 this._fillColor = eval( "[" + this.getPropertyFromString( "fillColor: ", importStr ) + "]" ); 655 if(importStr.indexOf("fillGradientMode: ") < 0) {
644 this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" ); 656 this._fillColor = eval( "[" + this.getPropertyFromString( "fillColor: ", importStr ) + "]" );
657 } else {
658 this._fillColor = {};
659 this._fillColor.gradientMode = this.getPropertyFromString( "fillGradientMode: ", importStr );
660 this._fillColor.color = this.stringToGradient(this.getPropertyFromString( "fillColor: ", importStr ));
661 }
662
663 if(importStr.indexOf("strokeGradientMode: ") < 0)
664 {
665 this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" );
666 } else {
667 this._strokeColor = {};
668 this._strokeColor.gradientMode = this.getPropertyFromString( "strokeGradientMode: ", importStr );
669 this._strokeColor.color = this.stringToGradient(this.getPropertyFromString( "strokeColor: ", importStr ));
670 }
645 671
646 var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ); 672 var strokeMat = MaterialsModel.getMaterial( strokeMaterialName );
647 if (!strokeMat) { 673 if (!strokeMat) {
diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js
index 1ea74475..fb1cb246 100755
--- a/js/lib/geom/geom-obj.js
+++ b/js/lib/geom/geom-obj.js
@@ -305,6 +305,49 @@ var GeomObj = function GLGeomObj() {
305 return rtnStr; 305 return rtnStr;
306 }; 306 };
307 307
308 // Gradient stops for rgba(255,0,0,1) at 0%; rgba(0,255,0,1) at 33%; rgba(0,0,255,1) at 100% will return
309 // 255,0,0,1@0;0,255,0,1@33;0,0,255,1@100
310 this.gradientToString = function(colors) {
311 var rtnStr = "";
312 if(colors && colors.length) {
313 var c = colors[0],
314 len = colors.length;
315
316 rtnStr += String(c.value.r + "," + c.value.g + "," + c.value.b + "," + c.value.a + "@" + c.position);
317 for(var i=1; i<len; i++) {
318 c = colors[i];
319 rtnStr += ";" + String(c.value.r + "," + c.value.g + "," + c.value.b + "," + c.value.a + "@" + c.position);
320 }
321 }
322 return rtnStr;
323 };
324
325 // Given a gradientStr "255,0,0,1@0;0,255,0,1@33;0,0,255,1@100" will return:
326 // colors array [{position:0, value:{r:255, g:0, b:0, a:1}},
327 // {position:33, value:{r:0, g:255, b:0, a:1}},
328 // {position:100, value:{r:0, g:0, b:255, a:1}}
329 // ]
330 this.stringToGradient = function(gradientStr) {
331 var rtnArr = [];
332
333 var i,
334 len,
335 stops,
336 stop,
337 c;
338
339 stops = gradientStr.split(";");
340 len = stops.length;
341 for(i=0; i<len; i++)
342 {
343 stop = stops[i].split("@");
344 c = stop[0].split(",");
345 rtnArr.push({ position: Number(stop[1]), value:{r:Number(c[0]), g:Number(c[1]), b:Number(c[2]), a:Number(c[3])} });
346 }
347
348 return rtnArr;
349 };
350
308 /* 351 /*
309 this.export = function() { 352 this.export = function() {
310 var rtnStr; 353 var rtnStr;
diff --git a/js/lib/geom/line.js b/js/lib/geom/line.js
index 51a6fa98..4a935de8 100755
--- a/js/lib/geom/line.js
+++ b/js/lib/geom/line.js
@@ -112,7 +112,14 @@ var Line = function GLLine( world, xOffset, yOffset, width, height, slope, strok
112 rtnStr += "xAdj: " + this._xAdj + "\n"; 112 rtnStr += "xAdj: " + this._xAdj + "\n";
113 rtnStr += "yAdj: " + this._yAdj + "\n"; 113 rtnStr += "yAdj: " + this._yAdj + "\n";
114 rtnStr += "strokeWidth: " + this._strokeWidth + "\n"; 114 rtnStr += "strokeWidth: " + this._strokeWidth + "\n";
115 rtnStr += "strokeColor: " + String(this._strokeColor) + "\n"; 115
116 if(this._strokeColor.gradientMode) {
117 rtnStr += "strokeGradientMode: " + this._strokeColor.gradientMode + "\n";
118 rtnStr += "strokeColor: " + this.gradientToString(this._strokeColor.color) + "\n";
119 } else {
120 rtnStr += "strokeColor: " + String(this._strokeColor) + "\n";
121 }
122
116 rtnStr += "strokeStyle: " + this._strokeStyle + "\n"; 123 rtnStr += "strokeStyle: " + this._strokeStyle + "\n";
117 rtnStr += "slope: " + String(this._slope) + "\n"; 124 rtnStr += "slope: " + String(this._slope) + "\n";
118 125
@@ -145,7 +152,15 @@ var Line = function GLLine( world, xOffset, yOffset, width, height, slope, strok
145 152
146 var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr ); 153 var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr );
147 this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr ); 154 this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr );
148 this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" ); 155
156 if(importStr.indexOf("strokeGradientMode: ") < 0)
157 {
158 this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" );
159 } else {
160 this._strokeColor = {};
161 this._strokeColor.gradientMode = this.getPropertyFromString( "strokeGradientMode: ", importStr );
162 this._strokeColor.color = this.stringToGradient(this.getPropertyFromString( "strokeColor: ", importStr ));
163 }
149 164
150 var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ); 165 var strokeMat = MaterialsModel.getMaterial( strokeMaterialName );
151 if (!strokeMat) { 166 if (!strokeMat) {
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 81201a79..6abaef2f 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -203,8 +203,20 @@ var Rectangle = function GLRectangle() {
203 rtnStr += "width: " + this._width + "\n"; 203 rtnStr += "width: " + this._width + "\n";
204 rtnStr += "height: " + this._height + "\n"; 204 rtnStr += "height: " + this._height + "\n";
205 rtnStr += "strokeWidth: " + this._strokeWidth + "\n"; 205 rtnStr += "strokeWidth: " + this._strokeWidth + "\n";
206 rtnStr += "strokeColor: " + String(this._strokeColor) + "\n"; 206
207 rtnStr += "fillColor: " + String(this._fillColor) + "\n"; 207 if(this._strokeColor.gradientMode) {
208 rtnStr += "strokeGradientMode: " + this._strokeColor.gradientMode + "\n";
209 rtnStr += "strokeColor: " + this.gradientToString(this._strokeColor.color) + "\n";
210 } else {
211 rtnStr += "strokeColor: " + String(this._strokeColor) + "\n";
212 }
213
214 if(this._fillColor.gradientMode) {
215 rtnStr += "fillGradientMode: " + this._fillColor.gradientMode + "\n";
216 rtnStr += "fillColor: " + this.gradientToString(this._fillColor.color) + "\n";
217 } else {
218 rtnStr += "fillColor: " + String(this._fillColor) + "\n";
219 }
208 rtnStr += "tlRadius: " + this._tlRadius + "\n"; 220 rtnStr += "tlRadius: " + this._tlRadius + "\n";
209 rtnStr += "trRadius: " + this._trRadius + "\n"; 221 rtnStr += "trRadius: " + this._trRadius + "\n";
210 rtnStr += "blRadius: " + this._blRadius + "\n"; 222 rtnStr += "blRadius: " + this._blRadius + "\n";
@@ -244,9 +256,25 @@ var Rectangle = function GLRectangle() {
244 var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr ); 256 var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr );
245 var fillMaterialName = this.getPropertyFromString( "fillMat: ", importStr ); 257 var fillMaterialName = this.getPropertyFromString( "fillMat: ", importStr );
246 this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr ); 258 this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr );
247 this._fillColor = eval( "[" + this.getPropertyFromString( "fillColor: ", importStr ) + "]" ); 259
248 this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" ); 260 if(importStr.indexOf("fillGradientMode: ") < 0) {
249 this._tlRadius = Number( this.getPropertyFromString( "tlRadius: ", importStr ) ); 261 this._fillColor = eval( "[" + this.getPropertyFromString( "fillColor: ", importStr ) + "]" );
262 } else {
263 this._fillColor = {};
264 this._fillColor.gradientMode = this.getPropertyFromString( "fillGradientMode: ", importStr );
265 this._fillColor.color = this.stringToGradient(this.getPropertyFromString( "fillColor: ", importStr ));
266 }
267
268 if(importStr.indexOf("strokeGradientMode: ") < 0)
269 {
270 this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" );
271 } else {
272 this._strokeColor = {};
273 this._strokeColor.gradientMode = this.getPropertyFromString( "strokeGradientMode: ", importStr );
274 this._strokeColor.color = this.stringToGradient(this.getPropertyFromString( "strokeColor: ", importStr ));
275 }
276
277 this._tlRadius = Number( this.getPropertyFromString( "tlRadius: ", importStr ) );
250 this._trRadius = Number( this.getPropertyFromString( "trRadius: ", importStr ) ); 278 this._trRadius = Number( this.getPropertyFromString( "trRadius: ", importStr ) );
251 this._blRadius = Number( this.getPropertyFromString( "blRadius: ", importStr ) ); 279 this._blRadius = Number( this.getPropertyFromString( "blRadius: ", importStr ) );
252 this._brRadius = Number( this.getPropertyFromString( "brRadius: ", importStr ) ); 280 this._brRadius = Number( this.getPropertyFromString( "brRadius: ", importStr ) );