7 files changed, 25 insertions, 203 deletions

diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js
index ded56ecc..5c334b92 100644
--- a/js/tools/BrushTool.js
+++ b/js/tools/BrushTool.js
@@ -374,13 +374,11 @@ exports.BrushTool = Montage.create(ShapeTool, {
                 return;
             }
 
-            var left = Math.round(midPt[0] - 0.5 * w);
-            var top = Math.round(midPt[1] - 0.5 * h);
-
             if (!canvas) {
-                var newCanvas = NJUtils.makeNJElement("canvas", "Brushstroke", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true);
-                var elementModel = TagTool.makeElement(w, h, planeMat, midPt, newCanvas, true);
-                ElementMediator.addElements(newCanvas, elementModel.data, false);
+                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);
 
                 // create all the GL stuff
                 var world = this.getGLWorld(newCanvas, this._useWebGL);
diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js
index 346975b2..6678e498 100755
--- a/js/tools/EyedropperTool.js
+++ b/js/tools/EyedropperTool.js
@@ -375,7 +375,8 @@ exports.EyedropperTool = Montage.create(toolBase, {
                     var worldData = elt.elementModel.shapeModel.GLWorld.exportJSON();
                     if(worldData)
                     {
-                        this._webGlDataCanvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", {"data-RDGE-id": njModule.NJUtils.generateRandom()}, true);
+                        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/LineTool.js b/js/tools/LineTool.js
index 3e9167fd..5941b464 100755
--- a/js/tools/LineTool.js
+++ b/js/tools/LineTool.js
@@ -77,10 +77,11 @@ exports.LineTool = Montage.create(ShapeTool, {
                             h += ~~(yAdj*2);
                         }
 
-                        canvas = NJUtils.makeNJElement("canvas", "Canvas", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true);
-                        var elementModel = TagTool.makeElement(w, h, drawData.planeMat, drawData.midPt, canvas, true);
-                        canvas.elementModel.isShape = true;
-                        this.application.ninja.elementMediator.addElements(canvas, elementModel.data);
+                        canvas = document.application.njUtils.make("canvas", {"data-RDGE-id": NJUtils.generateRandom()}, this.application.ninja.currentDocument);
+                        document.application.njUtils.createModelWithShape(canvas, "Line");
+
+                        var styles = document.application.njUtils.stylesFromDraw(canvas, w, h, drawData);
+                        this.application.ninja.elementMediator.addElements(canvas, styles);
                     } else {
                         canvas = this._targetedElement;
                         canvas.elementModel.controller = ShapesController;
@@ -241,7 +242,7 @@ exports.LineTool = Montage.create(ShapeTool, {
             canvas.elementModel.shapeModel.shapeCount++;
             if(canvas.elementModel.shapeModel.shapeCount === 1)
             {
-                canvas.elementModel.selection = "Line";
+//                canvas.elementModel.selection = "Line";
                 canvas.elementModel.pi = "LinePi";
                 canvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units;
 
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js
index 8ecc9f79..16990ca7 100755
--- a/js/tools/PenTool.js
+++ b/js/tools/PenTool.js
@@ -557,17 +557,16 @@ exports.PenTool = Montage.create(ShapeTool, {
                 return;
             }
 
-            w= Math.round(w);
+            w = Math.round(w);
             h = Math.round(h);
             var left = Math.round(midPt[0] - 0.5 * w);
             var top = Math.round(midPt[1] - 0.5 * h);
 
             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, true);
-                //note that we set the notify event to false because we send the event separately at end of this code block
-                ElementMediator.addElements(newCanvas, elementModel.data, false);
+                var newCanvas = document.application.njUtils.make("canvas", {"data-RDGE-id": NJUtils.generateRandom()}, this.application.ninja.currentDocument);
+                document.application.njUtils.createModelWithShape(newCanvas, "Subpath");
+                var styles = document.application.njUtils.stylesFromDraw(newCanvas, parseInt(w), parseInt(h), {midPt: midPt, planeMat: planeMat});
+                this.application.ninja.elementMediator.addElements(newCanvas, styles, false);
 
                 // create all the GL stuff
                 var world = this.getGLWorld(newCanvas, this._useWebGL);//this.options.use3D);//this.CreateGLWorld(planeMat, midPt, newCanvas, this._useWebGL);//fillMaterial, strokeMaterial);
diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js
index d2337000..0562dbc2 100755
--- a/js/tools/ShapeTool.js
+++ b/js/tools/ShapeTool.js
@@ -53,23 +53,17 @@ exports.ShapeTool = Montage.create(DrawingTool, {
         }
     },
 
-        HandleLeftButtonUp:
-    {
-        value: function (event)
-        {
-            var drawData;
-
-            drawData = this.getDrawingData();
+        HandleLeftButtonUp: {
+        value: function (event) {
+            var canvas, drawData = this.getDrawingData();
 
             if(drawData) {
-                var canvas;
                 if(!this._useExistingCanvas()) {
-                    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, true);
+                    canvas = document.application.njUtils.make("canvas", {"data-RDGE-id": NJUtils.generateRandom()}, this.application.ninja.currentDocument);
+                    document.application.njUtils.createModelWithShape(canvas);
 
-                    canvas.elementModel.isShape = true;
-                                        this.application.ninja.elementMediator.addElements(canvas, elementModel.data);
+                    var styles = document.application.njUtils.stylesFromDraw(canvas, ~~drawData.width, ~~drawData.height, drawData);
+                    this.application.ninja.elementMediator.addElements(canvas, styles);
                 } else {
                     canvas = this._targetedElement;
                     if (!canvas.getAttribute( "data-RDGE-id" ))
@@ -193,26 +187,6 @@ exports.ShapeTool = Montage.create(DrawingTool, {
         }
     },
 
-    createCanvas: {
-        value: function (left, top, w, h)
-        {
-            //var tmpDiv = document.createElement("canvas");
-            var tmpDiv = NJUtils.makeNJElement("canvas", "Canvas", "block");
-            var rules = {
-                            'position': 'absolute',
-                            'top' : top + 'px',
-                            'left' : left + 'px',
-                            '-webkit-transform-style' : 'preserve-3d',
-                            '-webkit-transform' : 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
-                        };
-
-            tmpDiv.width = w;
-            tmpDiv.height = h;
-
-            return {el: tmpDiv, rules: rules};
-        }
-    },
-
         // We can draw on an existing canvas unless it has only a single shape object
         _useExistingCanvas: {
                 value: function()
diff --git a/js/tools/TagTool.js b/js/tools/TagTool.js
index 6c999df9..5e9c792b 100755
--- a/js/tools/TagTool.js
+++ b/js/tools/TagTool.js
@@ -89,139 +89,12 @@ exports.TagTool = Montage.create(DrawingTool, {
             // Create the model
             document.application.njUtils.createModel(element);
 
-
             // Create the styles
-            styles = this.makeStylesFromDraw(drawData);
-            if(element.nodeName === "CANVAS") {
-                element.width = parseInt(styles.width);
-                element.height = parseInt(styles.height);
-                delete styles['width'];
-                delete styles['height'];
-            }
+            styles = document.application.njUtils.stylesFromDraw(element, ~~drawData.width, ~~drawData.height, drawData);
 
             // Add the element and styles
             this.application.ninja.elementMediator.addElements(element, styles);
         }
-    },
-
-    makeStylesFromDraw: {
-        value: function(drawData) {
-            var styles = {};
-
-            styles['position'] = "absolute";
-            styles['left'] = (Math.round(drawData.midPt[0] - 0.5 * ~~drawData.width)) - this.application.ninja.currentSelectedContainer.offsetLeft + 'px';
-            styles['top'] = (Math.round(drawData.midPt[1] - 0.5 * ~~drawData.height)) - this.application.ninja.currentSelectedContainer.offsetTop + 'px';
-            styles['width'] = ~~drawData.width + 'px';
-            styles['height'] = ~~drawData.height + 'px';
-
-            if(!MathUtils.isIdentityMatrix(drawData.planeMat)) {
-                styles['-webkit-transform-style'] = 'preserve-3d';
-                styles['-webkit-transform'] = DrawingToolBase.getElementMatrix(drawData.planeMat, drawData.midPt);
-            }
-
-            return styles;
-        }
-    },
-
-    makeTag: {
-        value: function() {
-            var selectedTag, newTag;
-
-            selectedTag = this.options.selectedElement;
-
-            if(selectedTag === "div") {
-                newTag = NJUtils.makeNJElement("div", "div", "block");
-            } else if(selectedTag === "image") {
-                newTag = NJUtils.makeNJElement("image", "image", "image");
-            } else if(selectedTag === "video") {
-                newTag = NJUtils.makeNJElement("video", "video", "video", {
-                        innerHTML: "Your browser does not support the VIDEO element."
-                });
-            } else if(selectedTag === "canvas") {
-                newTag = NJUtils.makeNJElement("canvas", "canvas", "canvas");
-            } else if(selectedTag === "custom") {
-                newTag = NJUtils.makeNJElement(this.options.customName.value, this.options.customName.value, "block");