9 files changed, 87 insertions, 51 deletions

diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 20225c61..7bb07976 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -159,8 +159,6 @@ exports.ElementController = Montage.create(Component, {
                             el.elementModel.stroke = null;
                             return;
                         case 'gradient':
-                            this.setProperty(el, "border-image", color.color.css);
-                            this.setProperty(el, "border-color", "none");
                             if(color.borderInfo) {
                                 if(color.borderInfo.borderWidth) {
                                     this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits);
@@ -169,9 +167,11 @@ exports.ElementController = Montage.create(Component, {
                                     this.setProperty(el, "border-style", color.borderInfo.borderStyle);
                                 }
                             }
+                            this.setGradientBorder(el, color.color.gradientMode, color.color.css);
                             break;
                         default:
                             this.setProperty(el, "border-image", "none");
+                            this.setProperty(el, "border-image-slice", "");
                             this.setProperty(el, "border-color", color.color.css);
                             if(color.borderInfo) {
                                 if(color.borderInfo.borderWidth) {
@@ -188,6 +188,25 @@ exports.ElementController = Montage.create(Component, {
         }
     },
 
+    setGradientBorder: {
+        value: function(el, gradientMode, css) {
+            if(gradientMode === "radial") {
+                this.setProperty(el, "border-image", css.replace("ellipse", "circle"));
+            } else {
+                this.setProperty(el, "border-image", css);
+            }
+            this.setProperty(el, "border-color", "none");
+            // gradient slice = borderWidth/totalWidth
+            var b = parseInt(this.getProperty(el, "border-left-width", true)),
+                w = parseInt(this.getProperty(el, "width", true)),
+                h = parseInt(this.getProperty(el, "height", true));
+            if(h > w) {
+                w = h;
+            }
+            this.setProperty(el, "border-image-slice", Math.floor(b/(w+b+b) * 100) + "%");
+        }
+    },
+
     getStroke: {
         value: function(el) {
             // TODO - Need to figure out which border side user wants
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 217a536d..f35a6757 100755
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -1261,9 +1261,10 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 }
             }
             if(isNaN(dist)) {
-                dist = null;
+                return "none";
+            } else {
+                return dist;
             }
-            return dist;
         }
     },
 
diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js
index 871b832d..c98ad8bc 100755
--- a/js/helper-classes/3D/draw-utils.js
+++ b/js/helper-classes/3D/draw-utils.js
@@ -126,7 +126,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
             //initialize with current document
             this._eltArray = [];
             this._planesArray = [];
-            this.setDrawingSurfaceElement(stage.canvas);
+            this.setDrawingSurfaceElement(stage.gridCanvas);
             this.setSourceSpaceElement( this.application.ninja.currentDocument.model.documentRoot);
             this.setWorkingPlane( [0,0,1,0] );
 
@@ -276,8 +276,8 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                     stage = this.application.ninja.stage,
                     minLeft = stage.userPaddingLeft,
                     minTop = stage.userPaddingTop,
-                    docLeft = stage.documentOffsetLeft,
-                    docTop = stage.documentOffsetTop,
+                    docLeft = stage.userContentLeft,
+                    docTop = stage.userContentTop,
                     l,
                     t,
                     plane,
@@ -307,7 +307,6 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                 }
 
                 if(!changed) {
-                    stage.layout.draw();
                     this.drawWorkingPlane();
                     this.draw3DCompass();
                 }
@@ -628,11 +627,11 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
         {
                 value: function ()
                 {
+            this.application.ninja.stage.clearGridCanvas();
                         if (!this.isDrawingGrid()) return;
 
                         var saveContext = this.getDrawingSurfaceElement();
-                        //this.setDrawingSurfaceElement(window.stageManager.layoutCanvas);
-                        this.setDrawingSurfaceElement(this.application.ninja.stage.layoutCanvas);
+                        this.setDrawingSurfaceElement(this.application.ninja.stage.gridCanvas);
 
                         // 3 coordinate axes for the plane
                         var zAxis = [this._workingPlane[0], this._workingPlane[1], this._workingPlane[2]];
diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js
index 069c6022..4dcda24a 100755
--- a/js/helper-classes/3D/snap-manager.js
+++ b/js/helper-classes/3D/snap-manager.js
@@ -21,8 +21,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, {
         ///////////////////////////////////////////////////////////////////////
         // Instance variables
         ///////////////////////////////////////////////////////////////////////
-    drawingCanvas: { value: null, writable: true},
-    
+
         // we keep a stack of working planes to facilitate working on other planes temporarily
         _workingPlaneStack : { value: [], writable: true },
 
@@ -2124,7 +2123,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, {
                         if (hitRec)
                         {
                                 var saveContext = drawUtils.getDrawingSurfaceElement();
-                                drawUtils.setDrawingSurfaceElement(this.drawingCanvas);
+                                drawUtils.setDrawingSurfaceElement(this.application.ninja.stage.drawingCanvas);
                                 var context = drawUtils.getDrawingContext();
                                 if (context)
                                 {
diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js
index a3d09404..3c7ae6ff 100755
--- a/js/helper-classes/3D/view-utils.js
+++ b/js/helper-classes/3D/view-utils.js
@@ -195,7 +195,12 @@ exports.ViewUtils = Montage.create(Component, {
 
     getPerspectiveDistFromElement: {
         value: function( elt ) {
-            return ElementsMediator.getPerspectiveDist(elt);
+            var pDist = ElementsMediator.getPerspectiveDist(elt);
+            if(pDist === "none") {
+                return null;
+            } else {
+                return pDist;
+            }
         }
     },
 
@@ -1320,14 +1325,6 @@ exports.ViewUtils = Montage.create(Component, {
             }
     },
 
-        getCurrentDocument:
-        {
-                value: function()
-                {
-                        return snapManagerModule.SnapManager.application.ninja.currentDocument;
-                }
-        },
-
         setStageZoom: {
         value:function( globalPt,  zoomFactor ) {
             var localPt;
diff --git a/js/stage/layout.js b/js/stage/layout.js
index 284968e4..71296405 100755
--- a/js/stage/layout.js
+++ b/js/stage/layout.js
@@ -136,6 +136,10 @@ exports.Layout = Montage.create(Component, {
         value: function() {
             this.clearCanvas();
 
+            // TODO Bind the layoutview mode to the current document
+            // var mode  = this.application.ninja.currentDocument.layoutMode;
+            if(this.layoutView === "layoutOff") return;
+
             var els = this.elementsToDraw.length;
             for(var i = 0, el; i < els; i++){
                 this.drawTagOutline(this.elementsToDraw[i]);
@@ -147,13 +151,13 @@ exports.Layout = Montage.create(Component, {
         value: function(updatePlanes) {
             if(updatePlanes) {