From df0389e6a191ebbff4e4b5d6625007873c0737bd Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 4 Apr 2012 10:21:20 -0700 Subject: Adjusting line's width and height when changing stroke size. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 49 +++++++++++++++++++++++++++- js/mediators/element-mediator.js | 2 +- js/tools/LineTool.js | 1 + 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 { -- cgit v1.2.3