Adjusting line's width and height when changing stroke size.

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

3 files changed, 50 insertions, 2 deletions

diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index a6859361..236e9caa 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -13,7 +13,7 @@ var Montage = 			require("montage/core/core").Montage,
 exports.ShapesController = Montage.create(CanvasController, {
 
     setProperty: {
-        value: function(el, p, value) {
+        value: function(el, p, value, eventType, source) {
             var val = parseInt(value),
                 canvas,
                 m,
@@ -22,6 +22,53 @@ exports.ShapesController = Montage.create(CanvasController, {
                 case "strokeSize":
                     // TODO - For now, just handling px units.
                     this.setShapeProperty(el, "strokeSize", value);
+                    // Changing stroke size should grow/shrink the shape from the center.
+                    var delta = ~~(val - el.elementModel.shapeModel.GLGeomObj.getStrokeWidth()),
+                        l = this.application.ninja.elementMediator.getProperty(el, "left", parseInt),
+                        t = this.application.ninja.elementMediator.getProperty(el, "top", parseInt),
+                        w = this.application.ninja.elementMediator.getProperty(el, "width", parseInt),
+                        h = this.application.ninja.elementMediator.getProperty(el, "height", parseInt);
+
+                    if(el.elementModel.selection === "Line")
+                    {
+                        var slope = el.elementModel.shapeModel.slope;
+                        // set the dimensions
+                        if(slope === "horizontal")
+                        {
+                            h = Math.max(val, 1);
+                        }
+                        else if(slope === "vertical")
+                        {
+                            w = Math.max(val, 1);
+                        }
+                        else
+                        {
+                            var oldXAdj = el.elementModel.shapeModel.GLGeomObj.getXAdj();
+                            var oldYAdj = el.elementModel.shapeModel.GLGeomObj.getYAdj();
+                            var theta = Math.atan(el.elementModel.shapeModel.slope);
+                            var xAdj = Math.abs((val/2)*Math.sin(theta));
+                            var yAdj = Math.abs((val/2)*Math.cos(theta));
+                            var dX = ~~(xAdj*2 - oldXAdj*2);
+                            var dY = ~~(yAdj*2 - oldYAdj*2);
+
+                            if(delta > 0)
+                            {
+                                l -= dX*2;
+                                t -= dY*2;
+                                w += dX*2;
+                                h += dY*2;
+                            }
+
+                            el.elementModel.shapeModel.GLGeomObj.setXAdj(xAdj);
+                            el.elementModel.shapeModel.GLGeomObj.setYAdj(yAdj);
+
+                        }
+                    }
+                    this.application.ninja.elementMediator.setProperties([el],
+                                                    { "left": [l + "px"],
+                                                      "top": [t + "px"],
+                                                      "width": [w + "px"],
+                                                      "height": [h + "px"] }, eventType, source );
                     el.elementModel.shapeModel.GLGeomObj.setStrokeWidth(val);
                     el.elementModel.shapeModel.GLGeomObj.buildBuffers();
                     el.elementModel.shapeModel.GLWorld.render();
diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js
index 3eeab9c4..3182d5ec 100755
--- a/js/mediators/element-mediator.js
+++ b/js/mediators/element-mediator.js
@@ -319,7 +319,7 @@ exports.ElementMediator = Montage.create(NJComponent, {
 
             for(var i=0, item; item = els[i]; i++) {
                 el = item._element || item;
-                el.elementModel.controller["setProperty"](el, p, value[i]);
+                el.elementModel.controller["setProperty"](el, p, value[i], eventType, source);
             }
 
             NJevent("element" + eventType, {type : "setProperty", source: source, data: {"els": els, "prop": p, "value": value}, redraw: null});
diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js
index 9b22c629..a43d4fb6 100755
--- a/js/tools/LineTool.js
+++ b/js/tools/LineTool.js
@@ -241,6 +241,7 @@ exports.LineTool = Montage.create(ShapeTool, {
 
                 canvas.elementModel.shapeModel.GLGeomObj = line;
                 canvas.elementModel.shapeModel.useWebGl = this.options.use3D;
+                canvas.elementModel.shapeModel.slope = slope;
             }
             else
             {