Merge pull request #159 from mqg734/WebGLMaterials

3D tools, eyedropper, fill, ink-bucket, gradients and shape fixes.

3 files changed, 70 insertions, 43 deletions

diff --git a/js/models/color-model.js b/js/models/color-model.js
index 4189fbef..764feeb5 100755
--- a/js/models/color-model.js
+++ b/js/models/color-model.js
@@ -589,18 +589,54 @@ exports.ColorModel = Montage.create(Component, {
         }
     },
     ////////////////////////////////////////////////////////////////////
-    //Returns CSS string given a WebGL color array in [r, g, b, a] format where the values are [0,1]
-    webGlToCss: {
+    //Returns a color object given a WebGL color array/object with gradient stops
+    webGlToColor: {
         enumerable: true,
-        value: function (color) {
-            if(color && (color.length === 4))
-            {
-                return 'rgba(' + color[0]*255 + ', ' + color[1]*255 + ', ' + color[2]*255 + ', ' + color[3] +')';
-            }
-            else
-            {
-                return null;
+        value: function (c) {
+            if(c) {
+                if(c.gradientMode) {
+                    // Gradient
+                    var i = 0,
+                        len,
+                        css,
+                        stops = c.color,
+                        gradient;
+
+                    // Create the CSS string
+                    if (c.gradientMode === 'radial') {
+                        css = '-webkit-radial-gradient(center, ellipse cover';
+                    } else {
+                        css = '-webkit-gradient(linear, left top, right top';
+                    }
+
+                    //Sorting array (must be sorted for radial gradients, at least in Chrome
+                    stops.sort(function(a,b){return a.position - b.position});
+                    //Looping through stops in gradient to create CSS
+
+                    len = stops.length;
+                    for (i=0; i < len; i++) {
+                        //Adding to CSS String
+                        if (c.gradientMode === 'radial' && stops[i].value) {
+                            css += ', '+stops[i].value.css+' '+stops[i].position+'% ';
+                        } else if (stops[i].value){
+                            css += ', color-stop('+stops[i].position+'%,'+stops[i].value.css+')';
+                        }
+                    }
+                    //Closing the CSS strings
+                    css += ')';
+
+                    gradient = {stops: c.color, mode: c.gradientMode, gradientMode: c.gradientMode, css: css};
+                    return {mode: 'gradient', value: gradient, color: gradient};
+                } else if(c.length === 4) {
+                    // CSS
+                    return this.application.ninja.colorController.getColorObjFromCss('rgba(' + c[0]*255 + ', '
+                                                                                             + c[1]*255 + ', '
+                                                                                             + c[2]*255 + ', '
+                                                                                             + c[3] +')');
+                }
             }
+
+            return null;
         }
     }
         ////////////////////////////////////////////////////////////////////
diff --git a/js/models/properties-3d.js b/js/models/properties-3d.js
index 0f82dc48..0a7cf8bb 100755
--- a/js/models/properties-3d.js
+++ b/js/models/properties-3d.js
@@ -5,7 +5,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 </copyright> */
 
 var Montage = require("montage/core/core").Montage,
-    Component = require("montage/ui/component").Component;
+    Component = require("montage/ui/component").Component,
+    NJUtils = require("js/lib/NJUtils").NJUtils;
 
 exports.Properties3D = Montage.create(Component, {
 
@@ -39,16 +40,7 @@ exports.Properties3D = Montage.create(Component, {
     elementPlane :   { value : null, enumerable: true},
 
     init : {
-        value : function(elt) {
-
-            this.m_azimuth = 0.0;
-            this.m_altitude = 0.0;
-
-            this.m_endAzimuth = 0.0;
-            this.m_endAltitude = 0.0;
-
-            this.m_transformCtr = null;
-            this.perspectiveDist = 1400;
+        value : function(elt, isStage) {
 
 //          this.m_upVector = [0,1,0];
 //                      this.m_viewDir  = [0,0,1];
@@ -57,23 +49,29 @@ exports.Properties3D = Montage.create(Component, {
 //          this.m_targetPos = [0,0,0];
 //          this.m_objStartPos = [0,0,0];
 
-//            var mat = this.application.ninja.stage.stageDeps.viewUtils.getMatrixFromElement(elt).slice(0);
-//            var elt3DInfo = MathUtils.decomposeMatrix2(mat);
-//            if(elt3DInfo)
-//            {
-//                this.xAngle = ~~(elt3DInfo.rotation[0] * MathUtils.RAD_TO_DEG);
-//                this.yAngle = ~~(elt3DInfo.rotation[1] * MathUtils.RAD_TO_DEG);
-//                this.zAngle = ~~(elt3DInfo.rotation[2] * MathUtils.RAD_TO_DEG);
-//
-//                this.x3D = ~~(elt3DInfo.translation[0]);
-//                this.y3D = ~~(elt3DInfo.translation[1]);
-//                this.z3D = ~~(elt3DInfo.translation[2]);
-//
-//                this.matrix3d = mat;
-//            }
+            this.matrix3d = this.application.ninja.stylesController.getMatrixFromElement(elt, isStage);
+            this.perspectiveDist = this.application.ninja.stylesController.getPerspectiveDistFromElement(elt, isStage);
 
-            return this;
+            if(this.matrix3d) {
+                var elt3DInfo = MathUtils.decomposeMatrix2(this.matrix3d);
+                if(elt3DInfo) {
+                    this.xAngle = ~~(elt3DInfo.rotation[0] * MathUtils.RAD_TO_DEG);
+                    this.yAngle = ~~(elt3DInfo.rotation[1] * MathUtils.RAD_TO_DEG);
+                    this.zAngle = ~~(elt3DInfo.rotation[2] * MathUtils.RAD_TO_DEG);
 
+                    this.x3D = ~~(elt3DInfo.translation[0]);
+                    this.y3D = ~~(elt3DInfo.translation[1]);
+                    this.z3D = ~~(elt3DInfo.translation[2]);
+                }
+            } else {
+                this.matrix3d = Matrix.I(4);
+            }
+
+            if(this.perspectiveDist == null) {
+                this.perspectiveDist = 1400;
+            }
+
+            return this;
         }
     },
 
diff --git a/js/models/shape-model.js b/js/models/shape-model.js
index ea8c2cfc..ff69ae3c 100755
--- a/js/models/shape-model.js
+++ b/js/models/shape-model.js
@@ -17,15 +17,8 @@ exports.ShapeModel = Montage.create(Component, {
     GLGeomObj:              { value: null },
 
     strokeSize:             { value: null },
-    stroke:                 { value: null },
-    strokeMaterial:         { value: null },
     strokeStyle:            { value: null },
     strokeStyleIndex:       { value: null },
-    border:                 { value: null },    // Store css value for ColorController
-
-    fill:                   { value: null },
-    fillMaterial:           { value: null },
-    background:             { value: null },    // Store css value for ColorController
 
     // Line-specific
     slope:                  { value: null },