Merge pull request #177 from mqg734/WebGLMaterials

Fixed some rectangle radius bugs in canvas 2d mode.  Also changed canvas 2d gradients to match what the browser renders for a div's background.

4 files changed, 27 insertions, 20 deletions

diff --git a/js/io/system/ninjalibrary.json b/js/io/system/ninjalibrary.json
index 285444b5..e236f2e0 100644
--- a/js/io/system/ninjalibrary.json
+++ b/js/io/system/ninjalibrary.json
@@ -1,6 +1,6 @@
 {
         "libraries": [
                 {"name": "Montage", "path": "/node_modules/descriptor.json", "version": "0.7.0.0"},
-                {"name": "RDGE", "path": "/assets/descriptor.json", "version": "0.5.4.0"}
+                {"name": "RDGE", "path": "/assets/descriptor.json", "version": "0.5.5.0"}
         ]
 }
\ No newline at end of file
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index 1073c2db..218dcfa6 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -457,9 +457,9 @@ var Circle = function GLCircle() {
                 if(this._fillColor.gradientMode) {
                     if(this._fillColor.gradientMode === "radial") {
                         gradient = ctx.createRadialGradient(xCtr, yCtr, 0,
-                                                            xCtr, yCtr, Math.max(yScale, xScale));
+                                                            xCtr, yCtr, Math.max(this._width, this._height)/2);
                     } else {
-                        gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2);
+                        gradient = ctx.createLinearGradient(lineWidth/2, this._height/2, this._width-lineWidth, this._height/2);
                     }
                     colors = this._fillColor.color;
 
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 91b1d426..fcd1c1bd 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -356,7 +356,9 @@ var Rectangle = function GLRectangle() {
                 // various declarations
                 var pt,  rad,  ctr,  startPt, bPts;
                 var width  = Math.round(this.getWidth()),
-                        height = Math.round(this.getHeight());
+                        height = Math.round(this.getHeight()),
+            hw = 0.5*width,
+            hh = 0.5*height;
 
                 pt = [inset, inset];    // top left corner
 
@@ -364,6 +366,12 @@ var Rectangle = function GLRectangle() {
                 var trRad = this._trRadius;
                 var blRad = this._blRadius;
                 var brRad = this._brRadius;
+        // limit the radii to half the rectangle dimension
+        var minDimen = hw < hh ? hw : hh;
+        if (tlRad > minDimen)  tlRad = minDimen;
+        if (blRad > minDimen)  blRad = minDimen;
+        if (brRad > minDimen)  brRad = minDimen;
+        if (trRad > minDimen)  trRad = minDimen;
 
                 if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) {
                         ctx.rect(pt[0], pt[1], width - 2*inset, height - 2*inset);
@@ -452,13 +460,13 @@ var Rectangle = function GLRectangle() {
                 // render the fill
                 ctx.beginPath();
                 if (this._fillColor) {
-            inset = Math.ceil( lw ) + 0.5;
+            inset = Math.ceil( lw ) - 0.5;
 
             if(this._fillColor.gradientMode) {
                 if(this._fillColor.gradientMode === "radial") {
-                    gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2)-inset);
+                    gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w, h)/2);
                 } else {
-                    gradient = ctx.createLinearGradient(inset, h/2, w-2*inset, h/2);
+                    gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2);
                 }
                 colors = this._fillColor.color;
 
@@ -486,11 +494,11 @@ var Rectangle = function GLRectangle() {
                 // render the stroke
                 ctx.beginPath();
                 if (this._strokeColor) {
-            inset = Math.ceil( 0.5*lw ) + 0.5;
+            inset = Math.ceil( 0.5*lw ) - 0.5;
 
             if(this._strokeColor.gradientMode) {
                 if(this._strokeColor.gradientMode === "radial") {
-                    gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h/2, w/2)-inset, w/2, h/2, Math.max(h/2, w/2));
+                    gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2);
                 } else {
                     gradient = ctx.createLinearGradient(0, h/2, w, h/2);
                 }
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js
index bbccf45d..bd10f7a5 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.js
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -214,10 +214,9 @@ exports.MaterialsPopup = Montage.create(Component, {
                 enumerable: true,
                 value: function(materialID)
                 {
-            // Note that setting Array.length = 0 will empty arrays,
-            // which is fine if you use getMaterialData to get a new array, but not for the
-            // dummyData arrays.
-            this._materialsData.length = 0;
+            //TODO - Hack to force repetition to draw. Setting .length = 0 did not work.
+            this.materialsData = [];
+
             this._materialName = materialID;
             if(
                                         (materialID ===  "UberMaterial")                                ||
@@ -231,16 +230,14 @@ exports.MaterialsPopup = Montage.create(Component, {
                                 if (material)
                                 {
                                         this._material = material;
-                                        var matData = this.getMaterialData( material );
-                                        this.materialsData = matData;
+                    this.materialsData = this.getMaterialData( material );
                                 }
             }
             else
             {
-                this.materialsData = this._dummyData1.slice(0);
+                this.materialsData = this[materialID];
             }
-            
-           this.needsDraw = true;
+            this.needsDraw = true;
                 }
         },
 
@@ -445,7 +442,8 @@ exports.MaterialsPopup = Montage.create(Component, {
                 }
         },
 
-    _dummyData1: {
+    // _dummyData1
+    CheckerBoard: {
         value: [
             {
                 "label":         "Texture1",
@@ -588,7 +586,8 @@ exports.MaterialsPopup = Montage.create(Component, {
         ]
     },
 
-    _dummyData2: {
+    // _dummyData2
+    ShinyMetal: {
         value: [
                     {
                         "label":         "Diffuse",