Merge branch 'refs/heads/TimelineUberjd' into TimelineUber

Conflicts:
	js/controllers/elements/element-controller.js
	js/document/_toDelete/html-document.js
	js/panels/Timeline/Layer.reel/Layer.js

Signed-off-by: Kruti Shah <kruti.shah@motorola.com>

14 files changed, 601 insertions, 247 deletions

diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js
index 0be378fd..5d983a93 100644
--- a/js/tools/BrushTool.js
+++ b/js/tools/BrushTool.js
@@ -39,7 +39,7 @@ exports.BrushTool = Montage.create(ShapeTool, {
     //view options
     _brushStrokeCanvas: {value: null, writable: true},
     _brushStrokePlaneMat: {value: null, writable: true},
-    _draggingPlane: {value: null, writable: true},
+    dragPlane: {value: null, writable: true},
 
     //the current brush stroke
     _selectedBrushStroke: {value: null, writable: true},
@@ -67,7 +67,7 @@ exports.BrushTool = Montage.create(ShapeTool, {
 
             var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y));
             var unsnappedpos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false));
-            this._draggingPlane = snapManager.getDragPlane();
+            this.dragPlane = snapManager.getDragPlane();
 
             snapManager.enableElementSnap(elemSnap);
             snapManager.enableGridSnap(gridSnap);
@@ -100,7 +100,7 @@ exports.BrushTool = Montage.create(ShapeTool, {
             }
             var tmpPoint = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y));
             var hitRec = snapManager.snap(tmpPoint.x, tmpPoint.y, false);
-            this._draggingPlane = snapManager.getDragPlane();
+            this.dragPlane = snapManager.getDragPlane();
             if (this._selectedSubpathCanvas){
                 snapManager.popWorkingPlane();
             }
@@ -138,7 +138,7 @@ exports.BrushTool = Montage.create(ShapeTool, {
                  } else {
                      colorArray = [1,1,1,0];
                  }
-                 this._selectedBrushStroke.setStrokeColor(colorArray);
+                 this._selectedBrushStroke.setFillColor(colorArray);
 
                  //add this point to the brush stroke in case the user does a mouse up before doing a mouse move
                  var currMousePos = hitRec.calculateStageWorldPoint();
@@ -225,9 +225,11 @@ exports.BrushTool = Montage.create(ShapeTool, {
             this._hasDraw = false;
 
             //finish giving enough info. to the brush stroke
-            this._selectedBrushStroke.setPlaneMatrix(this._brushStrokePlaneMat);
-            this._selectedBrushStroke.setPlaneMatrixInverse(glmat4.inverse(this._brushStrokePlaneMat,[]));
-            this._selectedBrushStroke.setDragPlane(this._draggingPlane);
+            if (this._selectedBrushStroke){
+                this._selectedBrushStroke.setPlaneMatrix(this._brushStrokePlaneMat);
+                this._selectedBrushStroke.setPlaneMatrixInverse(glmat4.inverse(this._brushStrokePlaneMat,[]));
+                this._selectedBrushStroke.setDragPlane(this.dragPlane);
+            }
 
             //display the previously drawn stroke in a separate canvas
             this.RenderCurrentBrushStroke();
@@ -376,7 +378,6 @@ exports.BrushTool = Montage.create(ShapeTool, {
 
             if (!canvas) {
                 var newCanvas = document.application.njUtils.make("canvas", {"data-RDGE-id": NJUtils.generateRandom()}, this.application.ninja.currentDocument);
-                document.application.njUtils.createModelWithShape(newCanvas, "Brushstroke");
                 var styles = document.application.njUtils.stylesFromDraw(newCanvas, w, h, {midPt: midPt, planeMat: planeMat});
                 this.application.ninja.elementMediator.addElements(newCanvas, styles, false);
 
diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js
index 6678e498..6a56004d 100755
--- a/js/tools/EyedropperTool.js
+++ b/js/tools/EyedropperTool.js
@@ -376,7 +376,6 @@ exports.EyedropperTool = Montage.create(toolBase, {
                     if(worldData)
                     {
                         this._webGlDataCanvas = njModule.NJUtils.make("canvas", {"data-RDGE-id": njModule.NJUtils.generateRandom()}, this.application.ninja.currentDocument);
-                        njModule.NJUtils.createModelWithShape(this._webGlDataCanvas, "Canvas");
                         this._applyElementStyles(elt, this._webGlDataCanvas, ["display", "position", "width", "height",
                                                                     "-webkit-transform", "-webkit-transform-style"]);
                         this._webGlDataCanvas.style.left = eltCoords[0] + "px";
diff --git a/js/tools/FillTool.js b/js/tools/FillTool.js
index 66dd9305..e08ec1da 100755
--- a/js/tools/FillTool.js
+++ b/js/tools/FillTool.js
@@ -70,25 +70,32 @@ exports.FillTool = Montage.create(ModifierToolBase, {
     // Called by modifier tool base's HandleLeftButtonDown after updating selection (if needed)
     startDraw: {
         value: function(event) {
+            this.drawData = null;
             this.isDrawing = true;
 
             if(this._canColor && this.application.ninja.selectedElements.length) {
+                var fillInfo = {},
+                    color;
+                if(this.options.useFillColor.checked) {
+                    fillInfo.colorInfo = {};
+                    color = this.options.fill;
+                    if(color && color.color)
+                    {
+                        fillInfo.colorInfo.mode = color.colorMode;
+                        fillInfo.colorInfo.color = color.color;
+                    } else {
+                        fillInfo.colorInfo.mode = "nocolor";
+                        fillInfo.colorInfo.color = null;
+                    }
+                }
 
-                var color = this.options.fill,
-                    colorInfo;
-                if(color && color.color)
-                {
-                    colorInfo = { mode:color.colorMode,
-                                       color:color.color
-                                    };
+                if(this.options.useWebGL.checked) {
+                    fillInfo.webGLInfo = {};
+                    fillInfo.webGLInfo.material = this.options.fillMaterial.value;
                 }
-                else
-                {
-                    colorInfo = { mode:"nocolor",
-                                       color:color.color
-                                    };
+                if(fillInfo.colorInfo || fillInfo.webGLInfo) {
+                    ElementsMediator.setFill(this.application.ninja.selectedElements, fillInfo, "Change", "fillTool");
                 }
-                ElementsMediator.setColor(this.application.ninja.selectedElements, colorInfo, true, "Change", "fillTool");
             }
         }
     }
diff --git a/js/tools/InkBottleTool.js b/js/tools/InkBottleTool.js
index 2c03d133..c5640b10 100755
--- a/js/tools/InkBottleTool.js
+++ b/js/tools/InkBottleTool.js
@@ -65,43 +65,51 @@ exports.InkBottleTool = Montage.create(ModifierToolBase, {
     // Called by modifier tool base's HandleLeftButtonDown after updating selection (if needed)
     startDraw: {
         value: function(event) {
+            this.drawData = null;
             this.isDrawing = true;
 
             if(this._canColor && this.application.ninja.selectedElements.length)
             {
-                var color = this.options.stroke,
-                    colorInfo;
-                if(color && color.color)
-                {
-                    colorInfo = { mode:color.colorMode,
-                                   color:color.color
-                                };
-                }
-                else
-                {
-                    colorInfo = { mode:"nocolor",
-                                   color:color.color
-                                };
+                var strokeInfo = {},
+                    color;
+                if(this.options.useStrokeColor.checked) {
+                    strokeInfo.colorInfo = {};
+                    color = this.options.stroke;
+                    if(color && color.color)
+                    {
+                        strokeInfo.colorInfo.mode = color.colorMode;
+                        strokeInfo.colorInfo.color = color.color;
+                    } else {
+                        strokeInfo.colorInfo.mode = "nocolor";
+                        strokeInfo.colorInfo.color = null;
+                    }
                 }
 
                 if(this.options.useBorderWidth.checked || this.options.useBorderStyle.checked) {
-                    colorInfo.borderInfo = {};
+                    strokeInfo.borderInfo = {};
                     if(this.options.useBorderWidth.checked) {
-                        colorInfo.borderInfo.borderWidth = this.options._borderWidth.value;
-                        colorInfo.borderInfo.borderUnits = this.options._borderWidth.units;
+                        strokeInfo.borderInfo.borderWidth = this.options.borderWidth.value;
+                        strokeInfo.borderInfo.borderUnits = this.options.borderWidth.units;
                     }
                     if(this.options.useBorderStyle.checked) {
-                        colorInfo.borderInfo.borderStyle = this.options._borderStyle.value;
+                        strokeInfo.borderInfo.borderStyle = this.options.borderStyle.value;
                     }
                 }
 
                 if(this.options.useStrokeSize.checked) {
-                    colorInfo.strokeInfo = {};
+                    strokeInfo.shapeInfo = {};