From 6b61de58f0733b40f64ed996933ac89927e922a1 Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Thu, 29 Mar 2012 12:01:21 -0700
Subject: We shouldn't set z to 0 for translate tool snapping because user may
 want to snap in 3d.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/tools/Translate3DToolBase.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/js/tools/Translate3DToolBase.js b/js/tools/Translate3DToolBase.js
index 07b6d04d..005b9749 100755
--- a/js/tools/Translate3DToolBase.js
+++ b/js/tools/Translate3DToolBase.js
@@ -66,10 +66,6 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase,
                     delta[0] = 0;
                     delta[1] = 0;
                 }
-                else
-                {
-                    delta[2] = 0;
-                }
                 this._delta = delta.slice(0);
             }
 
-- 
cgit v1.2.3


From 5b4f6b1618cf571a6bce5a631f976a008e04a64e Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Thu, 29 Mar 2012 15:52:08 -0700
Subject: Updated shapes to always check for its stroke and fill colors and
 materials instead of relying on the shapeModel cache because it can get out
 of sync.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/controllers/elements/shapes-controller.js | 277 +++++++++++++++------------
 js/document/html-document.js                 |  11 +-
 js/lib/drawing/world.js                      |   2 +-
 js/lib/geom/circle.js                        |  15 ++
 js/lib/geom/geom-obj.js                      |  82 ++++----
 js/lib/geom/line.js                          |   8 +
 js/lib/geom/rectangle.js                     |  15 ++
 js/models/color-model.js                     |  56 +++++-
 js/models/shape-model.js                     |   7 -
 js/tools/LineTool.js                         |   7 -
 js/tools/OvalTool.js                         |  13 --
 js/tools/RectTool.js                         |  13 --
 12 files changed, 287 insertions(+), 219 deletions(-)

diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index f0e9458b..45b822e2 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -84,7 +84,6 @@ exports.ShapesController = Montage.create(CanvasController, {
                     if(sm)
                     {
                         el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(sm);
-                        el.elementModel.shapeModel.strokeMaterial = sm;
                         el.elementModel.shapeModel.GLGeomObj.buildBuffers();
                         el.elementModel.shapeModel.GLWorld.render();
                     }
@@ -94,16 +93,15 @@ exports.ShapesController = Montage.create(CanvasController, {
                     if(fm)
                     {
                         el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm);
-                        el.elementModel.shapeModel.fillMaterial = fm;
                         el.elementModel.shapeModel.GLGeomObj.buildBuffers();
                         el.elementModel.shapeModel.GLWorld.render();
                     }
                     break;
                 case "editStrokeMaterial":
-                    NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.strokeMaterial.getName()});
+                    NJevent("showMaterialPopup",{materialId : this.getProperty(el, "strokeMaterial")});
                     break;
                 case "editFillMaterial":
-                    NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.fillMaterial.getName()});
+                    NJevent("showMaterialPopup",{materialId : this.getProperty(el, "fillMaterial")});
                     break;
                 case "animate":
                     if(value)
@@ -134,17 +132,28 @@ exports.ShapesController = Montage.create(CanvasController, {
                 case "trRadius":
                 case "blRadius":
                 case "brRadius":
-                case "border":
-                case "background":
                 case "useWebGl":
                 case "animate":
                     return this.getShapeProperty(el, p);
+                case "border":
+                    return this.getColor(el, false);
+                case "background":
+                    return this.getColor(el, true);
                 case "strokeMaterial":
+                    var sm = el.elementModel.shapeModel.GLGeomObj.getStrokeMaterial();
+                    if(sm)
+                    {
+                        return sm.getName();
+                    }
+                    else
+                    {
+                        return "FlatMaterial";
+                    }
                 case "fillMaterial":
-                    var m = this.getShapeProperty(el, p);
-                    if(m)
+                    var fm = el.elementModel.shapeModel.GLGeomObj.getFillMaterial();
+                    if(fm)
                     {
-                        return this.getShapeProperty(el, p).getName();
+                        return fm.getName();
                     }
                     else
                     {
@@ -255,67 +264,94 @@ exports.ShapesController = Montage.create(CanvasController, {
     // Routines to get/set color properties
     getColor: {
         value: function(el, isFill) {
-            var color,
-                css;
             if(isFill)
             {
-                if(el.elementModel.shapeModel.background)
+                if(el.elementModel.shapeModel.GLGeomObj.getFillColor)
                 {
-                    return el.elementModel.shapeModel.background;
+                    return this.application.ninja.colorController.colorModel.webGlToColor(el.elementModel.shapeModel.GLGeomObj.getFillColor());
                 }
-                color = this.getShapeProperty(el, "fill");
-            }
-            else
-            {
-                if(el.elementModel.shapeModel.border)
+                else
                 {
-                    return el.elementModel.shapeModel.border;
+                    return null;
                 }
-                color = this.getShapeProperty(el, "stroke");
             }
-
-            if(!css) {
-                return null;
+            else
+            {
+                return this.application.ninja.colorController.colorModel.webGlToColor(el.elementModel.shapeModel.GLGeomObj.getStrokeColor());
             }
-
-            css = this.application.ninja.colorController.colorModel.webGlToCss(color);
-            return this.application.ninja.colorController.getColorObjFromCss(css);
         }
     },
 
     _setGradientMaterial: {
         value: function(el, gradientMode, isFill) {
-            var m = "LinearGradientMaterial",
-                fm;
+            var m,
+                gradientM;
+            if(isFill)
+            {
+                m = el.elementModel.shapeModel.GLGeomObj.getFillMaterial();
+            }
+            else
+            {
+                m = el.elementModel.shapeModel.GLGeomObj.getStrokeMaterial();
+            }
+
             if(gradientMode === "radial")
             {
-                m = "RadialGradientMaterial";
+                if( !m || (m.getName() !== "RadialGradientMaterial") )
+                {
+                    gradientM = Object.create(MaterialsModel.getMaterial("RadialGradientMaterial"));
+                }
+            }
+            else
+            {
+                if( !m || (m.getName() !== "LinearGradientMaterial") )
+                {
+                    gradientM = Object.create(MaterialsModel.getMaterial("LinearGradientMaterial"));
+                }
             }
 
-            if(isFill)
+            if(gradientM)
             {
-                if(el.elementModel.shapeModel.fillMaterial.getName() !== m)
+                if(isFill)
                 {
-                    fm = Object.create(MaterialsModel.getMaterial(m));
-                    if(fm)
-                    {
-                        el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm);
-                        el.elementModel.shapeModel.fillMaterial = fm;
-                        el.elementModel.shapeModel.GLGeomObj.buildBuffers();
-                    }
+                    el.elementModel.shapeModel.GLGeomObj.setFillMaterial(gradientM);
                 }
+                else
+                {
+                    el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(gradientM);
+                }
+                el.elementModel.shapeModel.GLGeomObj.buildBuffers();
+            }
+        }
+    },
+
+    _setFlatMaterial: {
+        value: function(el, isFill) {
+            var m,
+                flatM;
+            if(isFill)
+            {
+                m = el.elementModel.shapeModel.GLGeomObj.getFillMaterial();
             }
             else
             {
-                if(el.elementModel.shapeModel.strokeMaterial.getName() !== m)
+                m = el.elementModel.shapeModel.GLGeomObj.getStrokeMaterial();
+            }
+
+            if(!m || ((m.getName() === "LinearGradientMaterial") || m.getName() === "RadialGradientMaterial") )
+            {
+                flatM = Object.create(MaterialsModel.getMaterial("FlatMaterial"));
+                if(flatM)
                 {
-                    fm = Object.create(MaterialsModel.getMaterial(m));
-                    if(fm)
+                    if(isFill)
                     {
-                        el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(fm);
-                        el.elementModel.shapeModel.strokeMaterial = fm;
-                        el.elementModel.shapeModel.GLGeomObj.buildBuffers();
+                        el.elementModel.shapeModel.GLGeomObj.setFillMaterial(flatM);
+                    }
+                    else
+                    {
+                        el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(flatM);
                     }
+                    el.elementModel.shapeModel.GLGeomObj.buildBuffers();
                 }
             }
         }
@@ -324,7 +360,8 @@ exports.ShapesController = Montage.create(CanvasController, {
     setColor: {
         value: function(el, color, isFill) {
             var mode = color.mode,
-                webGl;
+                webGl,
+                m;
             if(isFill)
             {
                 if(mode)
@@ -332,9 +369,6 @@ exports.ShapesController = Montage.create(CanvasController, {
                     switch (mode) {
                         case 'nocolor':
                             el.elementModel.shapeModel.GLGeomObj.setFillColor(null);
-                            this.setShapeProperty(el, "fill", null);
-                            this.setShapeProperty(el, "background", color);
-                            el.elementModel.fill = null;
                             return;
                         case 'gradient':
                             if(el.elementModel.shapeModel.useWebGl)
@@ -343,16 +377,15 @@ exports.ShapesController = Montage.create(CanvasController, {
                             }
                             el.elementModel.shapeModel.GLGeomObj.setFillColor({gradientMode:color.color.gradientMode, color:color.color.stops});
                             el.elementModel.shapeModel.GLWorld.render();
-                            this.setShapeProperty(el, "fill", color.color.css);
-                            this.setShapeProperty(el, "background", color);
-                            el.elementModel.fill = color;
                             break;
                         default:
+                            if(el.elementModel.shapeModel.useWebGl)
+                            {
+                                this._setFlatMaterial(el, isFill);
+                            }
                             webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color);
                             el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl);
-                            this.setShapeProperty(el, "fill", webGl);
-                            this.setShapeProperty(el, "background", color);
-                            el.elementModel.fill = color;
+                            el.elementModel.shapeModel.GLWorld.render();
                     }
                 }
             }
@@ -373,9 +406,6 @@ exports.ShapesController = Montage.create(CanvasController, {
                     switch (mode) {
                         case 'nocolor':
                             el.elementModel.shapeModel.GLGeomObj.setStrokeColor(null);
-                            this.setShapeProperty(el, "stroke", null);
-                            this.setShapeProperty(el, "border", color);
-                            el.elementModel.fill = null;
                             return;
                         case 'gradient':
                             if(el.elementModel.shapeModel.useWebGl)
@@ -384,50 +414,18 @@ exports.ShapesController = Montage.create(CanvasController, {
                             }
                             el.elementModel.shapeModel.GLGeomObj.setStrokeColor({gradientMode:color.color.gradientMode, color:color.color.stops});
                             el.elementModel.shapeModel.GLWorld.render();
-                            this.setShapeProperty(el, "stroke", color.color.css);
-                            this.setShapeProperty(el, "border", color);
-                            el.elementModel.fill = color;
                             break;
                         default:
+                            if(el.elementModel.shapeModel.useWebGl)
+                            {
+                                this._setFlatMaterial(el, isFill);
+                            }
                             webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color);
                             el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl);
-                            this.setShapeProperty(el, "stroke", webGl);
-                            this.setShapeProperty(el, "border", color);
-                            el.elementModel.fill = color;
+                            el.elementModel.shapeModel.GLWorld.render();
                     }
                 }
             }
-
-
-
-
-
-
-//            var webGl = color.webGlColor || color.color.webGlColor;
-//            if(!webGl)
-//            {
-//                webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color);
-//            }
-//            if(isFill)
-//            {
-//                el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl);
-//                this.setShapeProperty(el, "fill", webGl);
-//                this.setShapeProperty(el, "background", color);
-//            }
-//            else
-//            {
-//                el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl);
-//                this.setShapeProperty(el, "stroke", webGl);
-//                this.setShapeProperty(el, "border", color);
-//                if(color.strokeInfo)
-//                {
-//                    var strokeWidth = this.GetValueInPixels(color.strokeInfo.strokeSize,
-//                                                            color.strokeInfo.strokeUnits);
-//                    el.elementModel.shapeModel.GLGeomObj.setStrokeWidth(strokeWidth);
-//                    this.setShapeProperty(el, "strokeSize", color.strokeInfo.strokeSize + " "
-//                                                                + color.strokeInfo.strokeUnits);
-//                }
-//            }
             el.elementModel.shapeModel.GLWorld.render();
         }
     },
@@ -505,9 +503,7 @@ exports.ShapesController = Montage.create(CanvasController, {
             {
                 return;
             }
-            var sm,
-                fm,
-                world,
+            var world,
                 worldData = el.elementModel.shapeModel.GLWorld.exportJSON();
             if(worldData)
             {
@@ -517,21 +513,6 @@ exports.ShapesController = Montage.create(CanvasController, {
                 el.elementModel.shapeModel.useWebGl = true;
                 world.importJSON(worldData);
                 el.elementModel.shapeModel.GLGeomObj = world.getGeomRoot();
-
-                sm = Object.create(MaterialsModel.getMaterial("FlatMaterial"));
-                if(sm)
-                {
-                    el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(sm);
-                    el.elementModel.shapeModel.strokeMaterial = sm;
-                }
-                fm = Object.create(MaterialsModel.getMaterial("FlatMaterial"));
-                // TODO - Use consts after GL code is converted to object literal notation
-//                if( fm && (el.elementModel.shapeModel.GLGeomObj.geomType() !== GLGeomObj.GEOM_TYPE_LINE) )
-                if( fm && (el.elementModel.shapeModel.GLGeomObj.geomType() !== 3) )
-                {
-                    el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm);
-                    el.elementModel.shapeModel.fillMaterial = fm;
-                }
             }
 
         }
@@ -554,14 +535,6 @@ exports.ShapesController = Montage.create(CanvasController, {
                 el.elementModel.shapeModel.useWebGl = false;
                 world.importJSON(worldData);
                 el.elementModel.shapeModel.GLGeomObj = world.getGeomRoot();
-                el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(null);
-                el.elementModel.shapeModel.strokeMaterial = null;
-                // TODO - Use consts after GL code is converted to object literal notation
-                if(el.elementModel.shapeModel.GLGeomObj.geomType() !== 3)
-                {
-                    el.elementModel.shapeModel.GLGeomObj.setFillMaterial(null);
-                    el.elementModel.shapeModel.fillMaterial = null;
-                }
             }
         }
     },
@@ -578,6 +551,70 @@ exports.ShapesController = Montage.create(CanvasController, {
                 var jStr = importStr.substr( index+1 );
                 jObj = JSON.parse( jStr );
                 jObj.webGL = !jObj.webGL;
+
+                if(jObj.children)
+                {
+                    var nKids = jObj.children.length;
+                    for (var i=0;  i<nKids;  i++)
+                    {
+                        var child = jObj.children[i];
+
+                        if(jObj.webGL)
+                        {
+                            // Set Linear/Radial Gradient Material for children geometry if color in canvas 2d has gradient
+                            if(child.strokeColor && child.strokeColor.gradientMode)
+                            {
+                                if(child.strokeColor.gradientMode === "radial")
+                                {
+                                    child.strokeMat = "RadialGradientMaterial";
+                                }
+                                else
+                                {
+                                    child.strokeMat = "LinearGradientMaterial";
+                                }
+                            }
+
+                            if(child.fillColor && child.fillColor.gradientMode)
+                            {
+                                if(child.fillColor.gradientMode === "radial")
+                                {
+                                    child.fillMat = "RadialGradientMaterial";
+                                }
+                                else
+                                {
+                                    child.fillMat = "LinearGradientMaterial";
+                                }
+                            }
+                        }
+//                        else
+//                        {
+//                            // Set flat color for children geometry if color in WebGL has been changed to solid
+//                            if(child.strokeColor && !child.strokeColor.gradientMode)
+//                            {
+//                                if(child.strokeColor.gradientMode === "radial")
+//                                {
+//                                    child.strokeMat = "RadialGradientMaterial";
+//                                }
+//                                else
+//                                {
+//                                    child.strokeMat = "LinearGradientMaterial";
+//                                }
+//                            }
+//
+//                            if(child.fillColor && child.fillColor.gradientMode)
+//                            {
+//                                if(child.fillColor.gradientMode === "radial")
+//                                {
+//                                    child.fillMat = "RadialGradientMaterial";
+//                                }
+//                                else
+//                                {
+//                                    child.fillMat = "LinearGradientMaterial";
+//                                }
+//                            }
+//                        }
+                    }
+                }
             }
 
             return jObj;
diff --git a/js/document/html-document.js b/js/document/html-document.js
index 8f9d2870..6ca9eaa3 100755
--- a/js/document/html-document.js
+++ b/js/document/html-document.js
@@ -307,19 +307,15 @@ exports.HTMLDocument = Montage.create(TextDocument, {
 			{
 				shapeModel.GLGeomObj			= root;
 				shapeModel.strokeSize			= root._strokeWidth;
-				shapeModel.stroke				= root._strokeColor.slice();
-				shapeModel.strokeMaterial		= root._strikeMaterial ? root._strokeMaterial.dup() : null;
+				shapeModel.stroke				= root._strokeColor;
 				shapeModel.strokeStyle			= "solid";
 				//shapeModel.strokeStyleIndex
-				//shapeModel.border
-				//shapeModel.background
 				switch (root.geomType())
 				{
 					case root.GEOM_TYPE_RECTANGLE:
                         elementModel.selection = "Rectangle";
                         elementModel.pi = "RectanglePi";
-                        shapeModel.fill					= root._fillColor.slice();
-                        shapeModel.fillMaterial			= root._fillMaterial ? root._fillMaterial.dup() : null;
+                        shapeModel.fill					= root._fillColor;
 						shapeModel.tlRadius = root._tlRadius;
 						shapeModel.trRadius = root._trRadius;
 						shapeModel.blRadius = root._blRadius;
@@ -329,8 +325,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
 					case root.GEOM_TYPE_CIRCLE:
                         elementModel.selection = "Oval";
                         elementModel.pi = "OvalPi";
-                        shapeModel.fill					= root._fillColor.slice();
-                        shapeModel.fillMaterial			= root._fillMaterial ? root._fillMaterial.dup() : null;
+                        shapeModel.fill					= root._fillColor;
 						shapeModel.innerRadius = root._innerRadius;
 						break;
 
diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js
index fec6a478..1bf8c2e5 100755
--- a/js/lib/drawing/world.js
+++ b/js/lib/drawing/world.js
@@ -930,7 +930,7 @@ World.prototype.importObjectsJSON = function( jObj,  parentGeomObj )
 	// determine if we have children
 	if (jObj.children)
 	{
-		var nKids = ojObjbj.chilodren.length;
+		var nKids = jObj.children.length;
 		for (var i=0;  i<nKids;  i++)
 		{
 			var child = jObj.children[i];
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index d48bf98b..ee3e2abd 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -633,6 +633,21 @@ var Circle = function GLCircle() {
 		this._strokeStyle		= jObj.strokeStyle;
 		var strokeMaterialName	= jObj.strokeMat;
 		var fillMaterialName	= jObj.fillMat;
+
+        var strokeMat = MaterialsModel.getMaterial( strokeMaterialName );
+        if (!strokeMat) {
+            console.log( "object material not found in library: " + strokeMaterialName );
+            strokeMat = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() );
+        }
+        this._strokeMaterial = strokeMat;
+
+        var fillMat = MaterialsModel.getMaterial( fillMaterialName );
+        if (!fillMat) {
+            console.log( "object material not found in library: " + fillMaterialName );
+            fillMat = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() );
+        }
+        this._fillMaterial = fillMat;
+
 		this.importMaterialsJSON( jObj.materials );
 	};
 
diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js
index 3c4e4bbf..df4a018d 100755
--- a/js/lib/geom/geom-obj.js
+++ b/js/lib/geom/geom-obj.js
@@ -141,54 +141,56 @@ var GeomObj = function GLGeomObj() {
 	this.setMaterialColor = function(c, type) {
         var i = 0,
             nMats = 0;
-        if(c.gradientMode) {
-            // Gradient support
-            if (this._materialArray && this._materialTypeArray) {
-                nMats = this._materialArray.length;
-            }
+        if(c) {
+            if(c.gradientMode) {
+                // Gradient support
+                if (this._materialArray && this._materialTypeArray) {
+                    nMats = this._materialArray.length;
+                }
 
-            var stops = [],
-                colors = c.color;
+                var stops = [],
+                    colors = c.color;
 
-            var len = colors.length;
-            // TODO - Current shaders only support 4 color stops
-            if(len > 4) {
-                len = 4;
-            }
+                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 );
+                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 (type === "fill") {
-                this._fillColor = c;
-            } else {
-                this._strokeColor = c;
-            }
-        } else {
-            if (type === "fill") {
-                this._fillColor = c.slice(0);
+                if (type === "fill") {
+                    this._fillColor = c;
+                } else {
+                    this._strokeColor = c;
+                }
             } else {
-                this._strokeColor = c.slice(0);
-            }
+                if (type === "fill") {
+                    this._fillColor = c.slice(0);
+                } else {
+                    this._strokeColor = c.slice(0);
+                }
 
-            if (this._materialArray && this._materialTypeArray) {
-                nMats = this._materialArray.length;
-                if (nMats === this._materialTypeArray.length) {
-                    for (i=0;  i<nMats;  i++) {
-                        if (this._materialTypeArray[i] == type) {
-                            this._materialArray[i].setProperty( "color", c.slice(0) );
+                if (this._materialArray && this._materialTypeArray) {
+                    nMats = this._materialArray.length;
+                    if (nMats === this._materialTypeArray.length) {
+                        for (i=0;  i<nMats;  i++) {
+                            if (this._materialTypeArray[i] == type) {
+                                this._materialArray[i].setProperty( "color", c.slice(0) );
+                            }
                         }
                     }
                 }
diff --git a/js/lib/geom/line.js b/js/lib/geom/line.js
index e839e229..2b2434f5 100755
--- a/js/lib/geom/line.js
+++ b/js/lib/geom/line.js
@@ -137,6 +137,14 @@ var Line = function GLLine( world, xOffset, yOffset, width, height, slope, strok
 		this._strokeStyle		= jObj.strokeStyle;
 		this._strokeColor		= jObj.strokeColor;
 		var strokeMaterialName	= jObj.strokeMat;
+
+        var strokeMat = MaterialsModel.getMaterial( strokeMaterialName );
+        if (!strokeMat) {
+            console.log( "object material not found in library: " + strokeMaterialName );
+            strokeMat = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() );
+        }
+        this._strokeMaterial = strokeMat;
+
 		this.importMaterialsJSON( jObj.materials );
 	};
 
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index e511d5f4..b01aea53 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -290,6 +290,21 @@ var Rectangle = function GLRectangle() {
 		this._strokeStyle		= jObj.strokeStyle;
 		var strokeMaterialName	= jObj.strokeMat;
 		var fillMaterialName	= jObj.fillMat;
+
+        var strokeMat = MaterialsModel.getMaterial( strokeMaterialName );
+        if (!strokeMat) {
+            console.log( "object material not found in library: " + strokeMaterialName );
+            strokeMat = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() );
+        }
+        this._strokeMaterial = strokeMat;
+
+        var fillMat = MaterialsModel.getMaterial( fillMaterialName );
+        if (!fillMat) {
+            console.log( "object material not found in library: " + fillMaterialName );
+            fillMat = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() );
+        }
+        this._fillMaterial = fillMat;
+
 		this.importMaterialsJSON( jObj.materials );
 	};
 
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/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 },
diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js
index a61f8f79..dd5a7c72 100755
--- a/js/tools/LineTool.js
+++ b/js/tools/LineTool.js
@@ -234,13 +234,6 @@ exports.LineTool = Montage.create(ShapeTool, {
                 canvas.elementModel.selection = "Line";
                 canvas.elementModel.pi = "LinePi";
                 canvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units;
-                canvas.elementModel.shapeModel.stroke = strokeColor;
-                if(strokeColor)
-                {
-                    canvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke;
-                }
-
-                canvas.elementModel.shapeModel.strokeMaterial = strokeMaterial;
 
                 canvas.elementModel.shapeModel.strokeStyleIndex = strokeStyleIndex;
                 canvas.elementModel.shapeModel.strokeStyle = strokeStyle;
diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js
index a10e0bb5..0ad74aa4 100755
--- a/js/tools/OvalTool.js
+++ b/js/tools/OvalTool.js
@@ -78,22 +78,9 @@ exports.OvalTool = Montage.create(ShapeTool, {
                 canvas.elementModel.selection = "Oval";
                 canvas.elementModel.pi = "OvalPi";
                 canvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units;
-                canvas.elementModel.shapeModel.stroke = strokeColor;
-                canvas.elementModel.shapeModel.fill = fillColor;
-                if(strokeColor)
-                {
-                    canvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke;
-                }
-                if(fillColor)
-                {
-                    canvas.elementModel.shapeModel.background = this.application.ninja.colorController.colorToolbar.fill;
-                }
 
                 canvas.elementModel.shapeModel.innerRadius = this.options.innerRadius.value  + " " + this.options.innerRadius.units;
 
-                canvas.elementModel.shapeModel.strokeMaterial = strokeMaterial;
-                canvas.elementModel.shapeModel.fillMaterial = fillMaterial;
-
                 canvas.elementModel.shapeModel.strokeStyleIndex = strokeStyleIndex;
                 canvas.elementModel.shapeModel.strokeStyle = strokeStyle;
 
diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js
index 957afea9..c56e4424 100755
--- a/js/tools/RectTool.js
+++ b/js/tools/RectTool.js
@@ -98,25 +98,12 @@ exports.RectTool = Montage.create(ShapeTool, {
                 canvas.elementModel.selection = "Rectangle";
                 canvas.elementModel.pi = "RectanglePi";
                 canvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units;
-                canvas.elementModel.shapeModel.stroke = strokeColor;
-                canvas.elementModel.shapeModel.fill = fillColor;
-                if(strokeColor)
-                {
-                    canvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke;
-                }
-                if(fillColor)
-                {
-                    canvas.elementModel.shapeModel.background = this.application.ninja.colorController.colorToolbar.fill;
-                }
 
                 canvas.elementModel.shapeModel.tlRadius = this.options.TLRadiusControl.value + " " + this.options.TLRadiusControl.units;
                 canvas.elementModel.shapeModel.trRadius = this.options.TRRadiusControl.value + " " + this.options.TRRadiusControl.units;
                 canvas.elementModel.shapeModel.blRadius = this.options.BLRadiusControl.value + " " + this.options.BLRadiusControl.units;
                 canvas.elementModel.shapeModel.brRadius = this.options.BRRadiusControl.value + " " + this.options.BRRadiusControl.units;
 
-                canvas.elementModel.shapeModel.strokeMaterial = strokeMaterial;
-                canvas.elementModel.shapeModel.fillMaterial = fillMaterial;
-
                 canvas.elementModel.shapeModel.strokeStyleIndex = strokeStyleIndex;
                 canvas.elementModel.shapeModel.strokeStyle = strokeStyle;
 
-- 
cgit v1.2.3


From 50125608bba2ebfae24c1e13ec030fe7a7128158 Mon Sep 17 00:00:00 2001
From: hwc487
Date: Thu, 29 Mar 2012 17:13:28 -0700
Subject: merge from main

---
 js/panels/Splitter.js                              |  2 +-
 .../TimelinePanel.reel/css/TimelinePanel.css       |  4 +-
 .../animations-presets.reel/animations-presets.js  | 47 ++++++++++++++++++++-
 js/panels/presets/default-animation-presets.js     |  2 +
 js/panels/presets/default-style-presets.js         | 11 +++--
 js/panels/presets/default-transition-presets.js    |  8 ++++
 .../presets/style-presets.reel/style-presets.js    | 49 +++++++++++++++++++++-
 .../transitions-presets.js                         | 20 ++++++++-
 js/panels/resize-composer.js                       | 34 ++++-----------
 9 files changed, 138 insertions(+), 39 deletions(-)

diff --git a/js/panels/Splitter.js b/js/panels/Splitter.js
index 6791e0d5..e92cb2dd 100755
--- a/js/panels/Splitter.js
+++ b/js/panels/Splitter.js
@@ -55,7 +55,7 @@ exports.Splitter = Montage.create(Component, {
         },
         set: function(value) {
             this._collapsed = value;
-            this.needsDraw = true;
+
             this.application.localStorage.setItem(this.element.getAttribute("data-montage-id"), {"version": this.version, "value": value});
         }
     },
diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
index 067285ae..129b9771 100644
--- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
+++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
@@ -10,12 +10,12 @@
     height: 100%;
 }
 .maintimeline{
+    border-style: double;
     -webkit-box-flex: 1;
     display: -webkit-box;
-    -webkit-box-orient: horizontal;
+    -webkit-box-orient: horizontal
     height : 100%;
     position: relative;
-    margin-top:1px;
 }
 .leftinside{
     height: 100%;
diff --git a/js/panels/presets/animations-presets.reel/animations-presets.js b/js/panels/presets/animations-presets.reel/animations-presets.js
index 6a16da54..ab200212 100644
--- a/js/panels/presets/animations-presets.reel/animations-presets.js
+++ b/js/panels/presets/animations-presets.reel/animations-presets.js
@@ -22,7 +22,52 @@ exports.AnimationsLibrary = Montage.create(Component, {
     },
     handleNodeActivation: {
         value: function(presetData) {
-            this.application.ninja.presetsController.applyPreset(presetData);
+            //debugger;
+            var selection = this.application.ninja.selectedElements,
+                stylesController = this.application.ninja.stylesController,
+                selectorBase = presetData.selectorBase,
+                self = this;
+
+            if(!selection || !selection.length || selection.length === 0) {
+                return false;
+            }
+
+            selectorBase = stylesController.generateClassName(selectorBase);
+
+            presetData.rules.forEach(function(rule) {
+                if(rule.isKeyFrameRule) {
+                    this.application.ninja.stylesController.addRule(
+                        '@-webkit-keyframes ' + presetData.selectorBase,
+                        this.stringifyKeys(rule.keys)
+                    );
+                } else {
+                    this.application.ninja.stylesController.addRule('.' + selectorBase + rule.selectorSuffix, rule.styles);
+                }
+
+            }, this);
+
+            selection.forEach(function(el) {
+                el._element.classList.add(selectorBase);
+            }, this);
+
+        }
+    },
+
+    stringifyKeys : {
+        value: function(keysArray) {
+            var keysString = '';
+
+            keysArray.forEach(function(key) {
+                var styles = '', style;
+
+                for(style in key.styles) {
+                    styles += style + ':' + key.styles[style] + '; ';
+                }
+
+                keysString += key.keyText + ' {' + styles + ' }';
+            });
+
+            return keysString;
         }
     }
 });
diff --git a/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js
index b12a94b2..64f91ea6 100644
--- a/js/panels/presets/default-animation-presets.js
+++ b/js/panels/presets/default-animation-presets.js
@@ -13,6 +13,7 @@ exports.animationPresets = {
                 "text": "Border Morph",
                 "selectorBase" : "border-morph",
                 "rules" : [{
+                    "selectorSuffix" : "",
                     "styles" : {
                         "-webkit-animation": "border-morph 2s infinite"
                     }
@@ -90,6 +91,7 @@ exports.animationPresets = {
                 "text": "Rotater",
                 "selectorBase" : "rotate-with-alpha-keyframes",
                 "rules" : [{
+                    "selectorSuffix" : "",
                     "styles" : {
                         "-webkit-animation-name": "rotate-with-alpha-keyframes",
                         "-webkit-animation-duration": "5s",
diff --git a/js/panels/presets/default-style-presets.js b/js/panels/presets/default-style-presets.js
index 10b24ff4..82bec34f 100644
--- a/js/panels/presets/default-style-presets.js
+++ b/js/panels/presets/default-style-presets.js
@@ -11,9 +11,9 @@ exports.stylePresets = {
         "children": [
             {
                 "text": "Border-Radius",
-                "id": "njBorderRadius",
                 "selectorBase" : "border-radius-preset",
                 "rules" : [{
+                    "selectorSuffix" : "",
                     "styles" : {
                         "border-radius": "100px",
                         "border" : "1px solid #333"
@@ -22,9 +22,9 @@ exports.stylePresets = {
             },
             {
                 "text": "Drop Shadow",
-                "id": "njDropShadow",
                 "selectorBase" : "drop-shadow",
                 "rules" : [{
+                    "selectorSuffix" : "",
                     "styles" : {
                         "box-shadow": "2px 2px 50px rgba(0,0,0,0.5)",
                         "border" : "1px solid #CCC"
@@ -33,10 +33,9 @@ exports.stylePresets = {
             },
             {
                 "text": "Fancy Box",
-                "id": "njFancyBox",
                 "selectorBase" : "fancy-box",
                 "rules" : [{
-                    "selectorSuffix": "",
+                    "selectorSuffix" : "",
                     "styles" : {
                         "box-shadow": "inset 0 0 0 1px #666, inset 0 0 0 2px rgba(225, 225, 225, 0.4), 0 0 20px -10px #333",
                         "border" : "1px solid #FFF",
@@ -51,9 +50,9 @@ exports.stylePresets = {
         "children": [
             {
                 "text": "Italic",
-                "id": "njItalic",
                 "selectorBase" : "italicize",
                 "rules" : [{
+                    "selectorSuffix" : "",
                     "styles" : {
                         "font-style": "italic"
                     }
@@ -61,9 +60,9 @@ exports.stylePresets = {
             },
             {
                 "text": "Text Shadow",
-                "id": "njTextShadow",
                 "selectorBase" : "italicize",
                 "rules" : [{
+                    "selectorSuffix" : "",
                     "styles" : {
                         "text-shadow": "1px 1px 3px #333"
                     }
diff --git a/js/panels/presets/default-transition-presets.js b/js/panels/presets/default-transition-presets.js
index f8968085..15f4882f 100644
--- a/js/panels/presets/default-transition-presets.js
+++ b/js/panels/presets/default-transition-presets.js
@@ -13,6 +13,7 @@ exports.transitionPresets = {
                 "text": "Fade In",
                 "selectorBase" : "fade-in",
                 "rules" : [{
+                    "selectorSuffix": "",
                     "styles" : {
                         "opacity": "0.25",
                         "-webkit-transition": "all 0.4s ease-in"
@@ -28,6 +29,7 @@ exports.transitionPresets = {
                 "text": "Fade Out",
                 "selectorBase" : "fade-out",
                 "rules" : [{
+                    "selectorSuffix": "",
                     "styles" : {
                         "opacity": "1",
                         "-webkit-transition": "all 0.4s ease-in"
@@ -46,6 +48,7 @@ exports.transitionPresets = {
                 "text": "Slide Right",
                 "selectorBase" : "slide-right",
                 "rules" : [{
+                    "selectorSuffix": "",
                     "styles" : {
                         "-webkit-transition": "all 0.4s ease-in"
                     }
@@ -60,6 +63,7 @@ exports.transitionPresets = {
                 "text": "Slide Left",
                 "selectorBase" : "slide-left",
                 "rules" : [{
+                    "selectorSuffix": "",
                     "styles" : {
                         "-webkit-transition": "all 0.4s ease-in"
                     }
@@ -74,6 +78,7 @@ exports.transitionPresets = {
                 "text": "Rotate",
                 "selectorBase" : "rotate",
                 "rules" : [{
+                    "selectorSuffix" : "",
                     "styles" : {
                         "-webkit-transition": "all 0.4s ease-in"
                     }
@@ -87,6 +92,7 @@ exports.transitionPresets = {
                 "text": "Scale Up",
                 "selectorBase" : "scale-up",
                 "rules" : [{
+                    "selectorSuffix" : "",
                     "styles" : {
                         "-webkit-transition": "-webkit-transform 0.4s ease-in"
                     }
@@ -101,6 +107,7 @@ exports.transitionPresets = {
                 "text": "Scale Down",
                 "selectorBase" : "scale-down",
                 "rules" : [{
+                    "selectorSuffix" : "",
                     "styles" : {
                         "-webkit-transition": "-webkit-transform 0.4s ease-in"
                     }
@@ -115,6 +122,7 @@ exports.transitionPresets = {
                 "text": "Remove 3D",
                 "selectorBase" : "remove-3d",
                 "rules" : [{
+                    "selectorSuffix": "",
                     "styles" : {
                         "-webkit-transition": "all 0.4s ease-in"
                     }
diff --git a/js/panels/presets/style-presets.reel/style-presets.js b/js/panels/presets/style-presets.reel/style-presets.js
index 6a28e069..11f41822 100644
--- a/js/panels/presets/style-presets.reel/style-presets.js
+++ b/js/panels/presets/style-presets.reel/style-presets.js
@@ -22,13 +22,60 @@ exports.StylesLibrary = Montage.create(Component, {
     },
     handleNodeActivation: {
         value: function(presetData) {
-            this.application.ninja.presetsController.applyPreset(presetData, true);
+            var selection = this.application.ninja.selectedElements,
+                stylesController = this.application.ninja.stylesController,
+                selectorBase = presetData.selectorBase,
+                self = this, className;
+
+            if(!selection || !selection.length || selection.length === 0) {
+                return false;
+            }
+
+            function setStopRuleSelector(selector) {
+                self.application.ninja
+                    .currentDocument.documentRoot
+                    .elementModel.controller
+                    .changeSelector(self.application.ninja.currentDocument.documentRoot, null, selector);
+            }
+
+            selectorBase = stylesController.generateClassName(selectorBase);
+
+            presetData.rules.forEach(function(rule) {
+                stylesController.addRule('.'+selectorBase + rule.selectorSuffix, rule.styles);
+            }, this);
+
+            selection.forEach(function(el) {
+                el._element.style.webkitTransition = "all 450ms linear";
+
+                el._element.addEventListener("webkitTransitionEnd", function presetTransition(e) {
+                    el._element.style.webkitTransition = '';
+                    setStopRuleSelector("*");
+                    this.removeEventListener("webkitTransitionEnd", presetTransition, true);
+
+                }, true);
+                setStopRuleSelector("transitionStopRule");
+                el._element.classList.add(selectorBase);
+
+                //// Keep track of elements with presets and don't add duplicates
+
+            }, this);
+
+
         }
     },
     handleDragEnd : {
         value: function(sourceObject) {
             console.log(sourceObject);
         }
+    },
+    shouldChangeSelection : {
+        value : function(controller, newSelection, oldSelection) {
+            //
+            //debugger;
+            console.log('1Handle should change selection');
+            return false;
+        }
     }
 
+
 });
diff --git a/js/panels/presets/transitions-presets.reel/transitions-presets.js b/js/panels/presets/transitions-presets.reel/transitions-presets.js
index ace38dbb..f7d84085 100644
--- a/js/panels/presets/transitions-presets.reel/transitions-presets.js
+++ b/js/panels/presets/transitions-presets.reel/transitions-presets.js
@@ -22,7 +22,25 @@ exports.TransitionsLibrary = Montage.create(Component, {
     },
     handleNodeActivation: {
         value: function(presetData) {
-            this.application.ninja.presetsController.applyPreset(presetData);
+            var selection = this.application.ninja.selectedElements,
+                stylesController = this.application.ninja.stylesController,
+                selectorBase = presetData.selectorBase,
+                self = this;
+
+            if(!selection || !selection.length || selection.length === 0) {
+                return false;
+            }
+
+            selectorBase = stylesController.generateClassName(selectorBase);
+
+            presetData.rules.forEach(function(rule) {
+                this.application.ninja.stylesController.addRule('.' + selectorBase + rule.selectorSuffix, rule.styles);
+            }, this);
+
+            selection.forEach(function(el) {
+                el._element.classList.add(selectorBase);
+            }, this);
+
         }
     }
 });
diff --git a/js/panels/resize-composer.js b/js/panels/resize-composer.js
index 0d1774cd..6e5e89f8 100644
--- a/js/panels/resize-composer.js
+++ b/js/panels/resize-composer.js
@@ -9,14 +9,6 @@ var Composer = require("montage/ui/composer/composer").Composer;
 
 exports.ResizeComposer = Montage.create(Composer, {
 
-    xAxis: {
-        value: true
-    },
-
-    yAxis: {
-        value: true
-    },
-
     enabled : {
         enumerable: false,
         value: true
@@ -77,7 +69,6 @@ exports.ResizeComposer = Montage.create(Composer, {
     load: {
         value: function() {
             this.element.addEventListener("mousedown", this, true);
-            this.element.addEventListener("dblclick", this, true);
         }
     },
 
@@ -113,29 +104,18 @@ exports.ResizeComposer = Montage.create(Composer, {
 
     captureMousemove: {
         value: function(e) {
-            if (this.xAxis) {
-                this._deltaX = e.clientX - this._startX;
-            }
-            else {
-                this._deltaX = 0;
-            }
-            if (this.yAxis) {
-                this._deltaY = e.clientY - this._startY;
-            }
-            else {
-                this._deltaY = 0;
-            }
+            this._deltaX = e.clientX - this._startX;
+            this._deltaY = e.clientY - this._startY;
             this._executeEvent("resizeMove");
         }
     },
 
-    captureDblclick: {
-        value:function(e) {
-            this._reset();
-            this._executeEvent("resizeReset");
+    deserializedFromTemplate: {
+        value: function() {
+            if (this.component) {
+                this.component.addComposer(this);
+            }
         }
     }
 
-
-
 });
\ No newline at end of file
-- 
cgit v1.2.3


From eae317815e15a7ffc2dd1bd1e39b208eaa02fd2b Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Fri, 30 Mar 2012 13:53:47 -0700
Subject: Update PI and Color Panel to reflect default LinearGradient and
 RadialGradient materials' colors.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/lib/geom/circle.js |  4 ++--
 js/lib/geom/line.js   |  2 +-
 js/tools/LineTool.js  |  1 +
 js/tools/OvalTool.js  |  2 ++
 js/tools/RectTool.js  |  2 ++
 js/tools/ShapeTool.js | 25 +++++++++++++++++++++++++
 6 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index ee3e2abd..f74d4e57 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -42,8 +42,8 @@ var Circle = function GLCircle() {
         
 			this._strokeWidth = strokeSize;
 			this._innerRadius = innerRadius;
-			if (strokeColor)  this._strokeColor = strokeColor;
-			if (fillColor)  this._fillColor = fillColor;
+			this._strokeColor = strokeColor;
+			this._fillColor = fillColor;
 
 			this._strokeStyle = strokeStyle;
 		}
diff --git a/js/lib/geom/line.js b/js/lib/geom/line.js
index 2b2434f5..f3806fac 100755
--- a/js/lib/geom/line.js
+++ b/js/lib/geom/line.js
@@ -44,7 +44,7 @@ var Line = function GLLine( world, xOffset, yOffset, width, height, slope, strok
 
 		this._slope = slope;
 		this._strokeWidth = strokeSize;
-		if (strokeColor)  this._strokeColor = strokeColor.slice();
+		this._strokeColor = strokeColor;
 
 		this._strokeStyle = strokeStyle;
 		this._scaleX = (world.getViewportWidth())/(world.getViewportHeight());
diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js
index dd5a7c72..499a6b9d 100755
--- a/js/tools/LineTool.js
+++ b/js/tools/LineTool.js
@@ -216,6 +216,7 @@ exports.LineTool = Montage.create(ShapeTool, {
                 {
                     strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM));
                 }
+                strokeColor = this._getMaterialColor(strokeM) || strokeColor;
             }
 
             var world = this.getGLWorld(canvas, this.options.use3D);
diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js
index 0ad74aa4..c09c9bc7 100755
--- a/js/tools/OvalTool.js
+++ b/js/tools/OvalTool.js
@@ -53,12 +53,14 @@ exports.OvalTool = Montage.create(ShapeTool, {
                 {
                     strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM));
                 }
+                strokeColor = this._getMaterialColor(strokeM) || strokeColor;
 
                 var fillM = this.options.fillMaterial;
                 if(fillM)
                 {
                     fillMaterial = Object.create(MaterialsModel.getMaterial(fillM));
                 }
+                fillColor = this._getMaterialColor(fillM) || fillColor;
             }
 
             var world = this.getGLWorld(canvas, this.options.use3D);
diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js
index c56e4424..d69aa933 100755
--- a/js/tools/RectTool.js
+++ b/js/tools/RectTool.js
@@ -72,12 +72,14 @@ exports.RectTool = Montage.create(ShapeTool, {
                 {
                     strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM));
                 }
+                strokeColor = this._getMaterialColor(strokeM) || strokeColor;
 
                 var fillM = this.options.fillMaterial;
                 if(fillM)
                 {
                     fillMaterial = Object.create(MaterialsModel.getMaterial(fillM));
                 }
+                fillColor = this._getMaterialColor(fillM) || fillColor;
             }
 
             var world = this.getGLWorld(canvas, this.options.use3D);
diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js
index d3a36163..1a12401f 100755
--- a/js/tools/ShapeTool.js
+++ b/js/tools/ShapeTool.js
@@ -206,7 +206,32 @@ exports.ShapeTool = Montage.create(DrawingTool, {
         }
     },
 
+    _getMaterialColor: {
+        value: function(m)
+        {
+            var css,
+                colorObj;
+            if(m === "LinearGradientMaterial")
+            {
+                css = "-webkit-gradient(linear, left top, right top, from(rgb(255, 0, 0)), color-stop(0.3, rgb(0, 255, 0)), color-stop(0.6, rgb(0, 0, 255)), to(rgb(0, 255, 255)))";
+            }
+            else if(m === "RadialGradientMaterial")
+            {
+                css = "-webkit-radial-gradient(50% 50%, ellipse cover, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 30%, rgb(0, 0, 255) 60%, rgb(0, 255, 255) 100%)";
+            }
+
+            if(css)
+            {
+                colorObj = this.application.ninja.colorController.getColorObjFromCss(css);
+                if(colorObj)
+                {
+                    return {gradientMode:colorObj.color.gradientMode, color:colorObj.color.stops};
+                }
+            }
 
+            return null;
+        }
+    },
 
 	// We can draw on an existing canvas unless it has only a single shape object
 	_useExistingCanvas: {
-- 
cgit v1.2.3


From c2e9ed5bc4cbef870283784fa2a91f43ff72cade Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Mon, 2 Apr 2012 11:14:46 -0700
Subject: IKNinja-1410 - Inner Radius should be restricted to 99%.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/data/pi/pi-data.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index 7edc90d8..07017f09 100755
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -578,7 +578,7 @@ exports.PiData = Montage.create( Montage, {
                             valueMutator: parseFloat,
                             value : 0,
                             min :   0,
-                            max :   100,
+                            max :   99,
                             unit : "%",
                             acceptableUnits: ["%"]
 
-- 
cgit v1.2.3


From c4e83a61311db75c7a1c307553262e77ecaae662 Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Mon, 2 Apr 2012 13:16:27 -0700
Subject: IKNinna-1409 - Should dirty document when changing shape properties.
 IKNinja-1391 - Shapes need to support no-color.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/controllers/elements/shapes-controller.js | 14 ++++++--------
 js/lib/geom/geom-obj.js                      | 18 ++++++++++++++++++
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index a4d53e50..5d3cf060 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -78,6 +78,7 @@ exports.ShapesController = Montage.create(CanvasController, {
                     this.toggleWebGlMode(el, value);
                     el.elementModel.shapeModel.GLWorld.render();
                     this.application.ninja.selectionController.selectElement(el);
+                    this.application.ninja.documentController.activeDocument.needsSave = true;
                     return;
                 case "strokeMaterial":
                     var sm = Object.create(MaterialsModel.getMaterial(value));
@@ -145,6 +146,7 @@ exports.ShapesController = Montage.create(CanvasController, {
                 default:
                     CanvasController.setProperty(el, p, value);
             }
+            this.application.ninja.documentController.activeDocument.needsSave = true;
         }
     },
 
@@ -422,8 +424,7 @@ exports.ShapesController = Montage.create(CanvasController, {
     setColor: {
         value: function(el, color, isFill) {
             var mode = color.mode,
-                webGl,
-                m;
+                webGl;
             if(isFill)
             {
                 if(mode)
@@ -431,14 +432,13 @@ exports.ShapesController = Montage.create(CanvasController, {
                     switch (mode) {
                         case 'nocolor':
                             el.elementModel.shapeModel.GLGeomObj.setFillColor(null);
-                            return;
+                            break;
                         case 'gradient':
                             if(el.elementModel.shapeModel.useWebGl)
                             {
                                 this._setGradientMaterial(el, color.color.gradientMode, isFill);
                             }
                             el.elementModel.shapeModel.GLGeomObj.setFillColor({gradientMode:color.color.gradientMode, color:color.color.stops});
-                            el.elementModel.shapeModel.GLWorld.render();
                             break;
                         default:
                             if(el.elementModel.shapeModel.useWebGl)
@@ -447,7 +447,6 @@ exports.ShapesController = Montage.create(CanvasController, {
                             }
                             webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color);
                             el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl);
-                            el.elementModel.shapeModel.GLWorld.render();
                     }
                 }
             }
@@ -468,14 +467,13 @@ exports.ShapesController = Montage.create(CanvasController, {
                     switch (mode) {
                         case 'nocolor':
                             el.elementModel.shapeModel.GLGeomObj.setStrokeColor(null);
-                            return;
+                            break;
                         case 'gradient':
                             if(el.elementModel.shapeModel.useWebGl)
                             {
                                 this._setGradientMaterial(el, color.color.gradientMode, isFill);
                             }
                             el.elementModel.shapeModel.GLGeomObj.setStrokeColor({gradientMode:color.color.gradientMode, color:color.color.stops});
-                            el.elementModel.shapeModel.GLWorld.render();
                             break;
                         default:
                             if(el.elementModel.shapeModel.useWebGl)
@@ -484,11 +482,11 @@ exports.ShapesController = Montage.create(CanvasController, {
                             }