WebGL needs to have 3d styles to render.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

6 files changed, 8 insertions, 7 deletions

diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index 9b0159d4..689bc421 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -495,6 +495,7 @@ exports.ShapesController = Montage.create(CanvasController, {
                 world = new World(el, true);
                 el.elementModel.shapeModel.GLWorld = world;
                 el.elementModel.shapeModel.useWebGl = true;
+                el.elementModel.controller.setProperty(el, "-webkit-transform-style", "preserve-3d");
                 world.import(worldData, true);
                 el.elementModel.shapeModel.GLGeomObj = world.getGeomRoot();
 
diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js
index 4ce9976a..ac29f2f2 100644
--- a/js/tools/BrushTool.js
+++ b/js/tools/BrushTool.js
@@ -252,7 +252,7 @@ exports.BrushTool = Montage.create(ShapeTool, {
 
                 if (!canvas) {
                 var newCanvas = NJUtils.makeNJElement("canvas", "Brushstroke", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true);
-                    var elementModel = TagTool.makeElement(w, h, planeMat, midPt, newCanvas);
+                    var elementModel = TagTool.makeElement(w, h, planeMat, midPt, newCanvas, this._useWebGL);
                     ElementMediator.addElement(newCanvas, elementModel.data, true);
 
                     // create all the GL stuff
diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js
index a61f8f79..a1cf7eb0 100755
--- a/js/tools/LineTool.js
+++ b/js/tools/LineTool.js
@@ -89,7 +89,7 @@ exports.LineTool = Montage.create(ShapeTool, {
                     }
 
                     canvas = NJUtils.makeNJElement("canvas", "Canvas", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true);
-                    var elementModel = TagTool.makeElement(w, h, drawData.planeMat, drawData.midPt, canvas);
+                    var elementModel = TagTool.makeElement(w, h, drawData.planeMat, drawData.midPt, canvas, this.options.use3D);
 
                     ElementMediator.addElement(canvas, elementModel.data, true);
                     canvas.elementModel.isShape = true;
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js
index 60ef4f92..17756772 100755
--- a/js/tools/PenTool.js
+++ b/js/tools/PenTool.js
@@ -584,7 +584,7 @@ exports.PenTool = Montage.create(ShapeTool, {
             if (!canvas) {
                 var newCanvas = null;
                 newCanvas = NJUtils.makeNJElement("canvas", "Subpath", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true);
-                var elementModel = TagTool.makeElement(parseInt(w), parseInt(h), planeMat, midPt, newCanvas);
+                var elementModel = TagTool.makeElement(parseInt(w), parseInt(h), planeMat, midPt, newCanvas, this._useWebGL);
                 ElementMediator.addElement(newCanvas, elementModel.data, true);
 
                 // create all the GL stuff
diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js
index d3a36163..2124376d 100755
--- a/js/tools/ShapeTool.js
+++ b/js/tools/ShapeTool.js
@@ -6,8 +6,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 
 var Montage = require("montage/core/core").Montage,
     DrawingTool = require("js/tools/drawing-tool").DrawingTool,
-    viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils,
-    drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils,
     NJUtils = require("js/lib/NJUtils").NJUtils,
     ElementMediator = require("js/mediators/element-mediator").ElementMediator,
     ShapesController = require("js/controllers/elements/shapes-controller").ShapesController,
@@ -70,7 +68,7 @@ exports.ShapeTool = Montage.create(DrawingTool, {
                 {
                     canvas = NJUtils.makeNJElement("canvas", "Canvas", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true);
                     var elementModel = TagTool.makeElement(~~drawData.width, ~~drawData.height,
-                                                                        drawData.planeMat, drawData.midPt, canvas);
+                                                                        drawData.planeMat, drawData.midPt, canvas, this.options.use3D);
 
                     ElementMediator.addElement(canvas, elementModel.data, true);
                     canvas.elementModel.isShape = true;
diff --git a/js/tools/TagTool.js b/js/tools/TagTool.js
index 6df49a7b..2b6742e6 100755
--- a/js/tools/TagTool.js
+++ b/js/tools/TagTool.js
@@ -221,7 +221,7 @@ exports.TagTool = Montage.create(DrawingTool, {
     },
 
     makeElement: {
-        value: function(w, h, planeMat, midPt,tag) {
+        value: function(w, h, planeMat, midPt,tag, isWebGl) {
             var left = Math.round(midPt[0] - 0.5 * w);
             var top = Math.round(midPt[1] - 0.5 * h);
 
@@ -234,6 +234,8 @@ exports.TagTool = Montage.create(DrawingTool, {
             if(!MathUtils.isIdentityMatrix(planeMat)) {
                 styles['-webkit-transform-style'] = 'preserve-3d';
                 styles['-webkit-transform'] = DrawingToolBase.getElementMatrix(planeMat, midPt);
+            } else if(isWebGl) {
+                styles['-webkit-transform-style'] = 'preserve-3d';
             }
 
             // TODO - for canvas, set both as style and attribute.