Merge pull request #346 from mqg734/MaterialsUI

UI support for preview, edit, duplicate and delete of WebGL Materials.

8 files changed, 182 insertions, 56 deletions

diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js
index fb70d18c..26f33a64 100755
--- a/js/lib/drawing/world.js
+++ b/js/lib/drawing/world.js
@@ -647,6 +647,7 @@ World.prototype.clearTree = function()
 
         if (this._useWebGL)
     {
+        this.stop();
                 var root = this._rootNode;
                 root.children = new Array();
                 RDGE.globals.engine.unregisterCanvas( this._canvas.rdgeid );
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index 39cde514..12781ab8 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -85,14 +85,28 @@ exports.Circle = Object.create(GeomObj, {
             } else {
                 this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup();
             }
-                        if (strokeColor && this._strokeMaterial.hasProperty( "color" ))  this._strokeMaterial.setProperty( "color",  this._strokeColor );
+
+            if(strokeColor) {
+                if(this._strokeMaterial.hasProperty("color")) {
+                    this._strokeMaterial.setProperty( "color",  this._strokeColor );
+                } else if (this._strokeMaterial && (this._strokeMaterial.gradientType === this._strokeColor.gradientMode)) {
+                    this._strokeMaterial.setGradientData(this._strokeColor.color);
+                }
+            }
 
             if(fillMaterial) {
                 this._fillMaterial = fillMaterial.dup();
             } else {
-                this._fillMaterial = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() ).dup();
+                this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup();
+            }
+
+            if(fillColor) {
+                if(this._fillMaterial.hasProperty("color")) {
+                    this._fillMaterial.setProperty( "color",  this._fillColor );
+                } else if (this._fillMaterial && (this._fillMaterial.gradientType === this._fillColor.gradientMode)) {
+                    this._fillMaterial.setGradientData(this._fillColor.color);
+                }
             }
-                        if (fillColor && this._fillMaterial.hasProperty( "color" ))  this._fillMaterial.setProperty( "color",  this._fillColor );
         }
     },
 
diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js
index 4b8e1c69..5373c78a 100755
--- a/js/lib/geom/geom-obj.js
+++ b/js/lib/geom/geom-obj.js
@@ -215,27 +215,10 @@ exports.GeomObj = Object.create(Object.prototype, {
                         nMats = this._materialArray.length;
                     }
 
-                    var stops = [],
-                        colors = c.color;
-
-                    var len = colors.length;
-                    // TODO - Current shaders only support 4 color stops
-                    if (len > 4) {
-                        len = 4;
-                    }
-
-                    for (var n = 0; n < len; n++) {
-                        var position = colors[n].position / 100;
-                        var cs = colors[n].value;
-                        var stop = [cs.r / 255, cs.g / 255, cs.b / 255, cs.a];
-                        stops.push(stop);
-
-                        if (nMats === this._materialTypeArray.length) {
-                            for (i = 0; i < nMats; i++) {
-                                if (this._materialTypeArray[i] == type) {
-                                    this._materialArray[i].setProperty("color" + (n + 1), stop.slice(0));
-                                    this._materialArray[i].setProperty("colorStop" + (n + 1), position);
-                                }
+                    if (nMats === this._materialTypeArray.length) {
+                        for (i = 0; i < nMats; i++) {
+                            if (this._materialTypeArray[i] == type) {
+                                this._materialArray[i].setGradientData(c.color);
                             }
                         }
                     }
diff --git a/js/lib/geom/line.js b/js/lib/geom/line.js
index a44026eb..16c40623 100755
--- a/js/lib/geom/line.js
+++ b/js/lib/geom/line.js
@@ -87,8 +87,17 @@ exports.Line = Object.create(GeomObj, {
             this._materialSpecular = [0.4, 0.4, 0.4,  1.0];
 
             if(strokeMaterial) {
-                this._strokeMaterial = strokeMaterial;
-                                if (strokeColor && this._strokeMaterial.hasProperty( "color" ))  this._strokeMaterial.setProperty( "color",  this._strokeColor );
+                this._strokeMaterial = strokeMaterial.dup();
+            } else {
+                this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup();
+            }
+
+            if(strokeColor) {
+                if(this._strokeMaterial.hasProperty("color")) {
+                    this._strokeMaterial.setProperty( "color",  this._strokeColor );
+                } else if (this._strokeMaterial && (this._strokeMaterial.gradientType === this._strokeColor.gradientMode)) {
+                    this._strokeMaterial.setGradientData(this._strokeColor.color);
+                }
             }
         }
     },
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 0d302d50..6a6ede4d 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -101,15 +101,28 @@ exports.Rectangle = Object.create(GeomObj, {
             } else {
                 this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup();
             }
-                        if (strokeColor && this._strokeMaterial.hasProperty( "color" ))  this._strokeMaterial.setProperty( "color",  this._strokeColor );
 
+            if(strokeColor) {
+                if(this._strokeMaterial.hasProperty("color")) {
+                    this._strokeMaterial.setProperty( "color",  this._strokeColor );
+                } else if (this._strokeMaterial && (this._strokeMaterial.gradientType === this._strokeColor.gradientMode)) {
+                    this._strokeMaterial.setGradientData(this._strokeColor.color);
+                }
+            }
 
             if(fillMaterial) {
                 this._fillMaterial = fillMaterial.dup();
             } else {
                 this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup();
             }
-                        if (fillColor && this._fillMaterial.hasProperty( "color" ))  this._fillMaterial.setProperty( "color",  this._fillColor );
+
+                        if(fillColor) {
+                if(this._fillMaterial.hasProperty("color")) {
+                    this._fillMaterial.setProperty( "color",  this._fillColor );
+                } else if (this._fillMaterial && (this._fillMaterial.gradientType === this._fillColor.gradientMode)) {
+                    this._fillMaterial.setGradientData(this._fillColor.color);
+                }
+            }
         }
     },
 
diff --git a/js/lib/rdge/materials/linear-gradient-material.js b/js/lib/rdge/materials/linear-gradient-material.js
index 981bf9fd..50ef56f0 100755
--- a/js/lib/rdge/materials/linear-gradient-material.js
+++ b/js/lib/rdge/materials/linear-gradient-material.js
@@ -103,6 +103,56 @@ var LinearGradientMaterial = function LinearGradientMaterial() {
         this.setShaderValues();
                 this.update( 0 );
     };
+
+    // Only Linear Gradient and Radial Gradients support gradients;
+    this.gradientType = "linear";
+
+    this.getGradientData = function() {
+        var angle = Math.round(this._angle*180/Math.PI),
+            color,
+            colorStr,
+            css = "-webkit-gradient(linear, " + angle + "deg";
+
+        // TODO - Angle is not supported in -webkit-gradient syntax, so just default to across:
+        css = '-webkit-gradient(linear, left top, right top';
+
+        // TODO - Also, Color Model requires from and to in the gradient string
+        color = this.getProperty('u_color1');
+        colorStr = Math.round(color[0] * 255) + ', ' + Math.round(color[1] * 255) + ', ' + Math.round(color[2] * 255) + ', ' + Math.round(color[3] * 100);
+        css += ', from(rgba(' + colorStr + '))';
+
+        for (var i=2; i < 4; i++) {
+            color = this.getProperty('u_color'+i);
+            colorStr = Math.round(color[0] * 255) + ', ' + Math.round(color[1] * 255) + ', ' + Math.round(color[2] * 255) + ', ' + Math.round(color[3] * 100);
+            css += ', color-stop(' + this.getProperty('u_colorStop'+i) + ', rgba(' + colorStr + '))';
+        }
+
+        color = this.getProperty('u_color4');
+        colorStr = Math.round(color[0] * 255) + ', ' + Math.round(color[1] * 255) + ', ' + Math.round(color[2] * 255) + ', ' + Math.round(color[3] * 100);
+        css += ', to(rgba(' + colorStr + '))';
+
+        css += ')';
+
+        return css;
+    };
+
+    // Only Linear Gradient and Radial Gradient have gradient data.
+    this.setGradientData = function(colors) {
+        var len = colors.length;
+        // TODO - Current shaders only support 4 color stops
+        if (len > 4) {
+            len = 4;
+        }
+
+        for (var n = 0; n < len; n++) {
+            var position = colors[n].position/100;
+            var cs = colors[n].value;
+            var stop = [cs.r/255, cs.g/255, cs.b/255, cs.a];
+
+            this.setProperty("u_color" + (n + 1), stop.slice(0));
+            this.setProperty("u_colorStop" + (n + 1), position);
+        }
+    };
 };
 
 ///////////////////////////////////////////////////////////////////////////////////////
diff --git a/js/lib/rdge/materials/material.js b/js/lib/rdge/materials/material.js
index 34d3aa1f..e1d17aa8 100755
--- a/js/lib/rdge/materials/material.js
+++ b/js/lib/rdge/materials/material.js
@@ -201,6 +201,8 @@ var Material = function GLMaterial( world ) {