Merge pull request #340 from nvh/align-borderwidth

Fixing alignment of child layer when the parent has a borderWidth

Makefile

@@ -27,6 +27,7 @@ watch: bootstrap
 	$(gulp) watch
 
 dev: bootstrap
+	gulp version
 	open -a "Framer Studio Beta" "extras/DevServer.framer"
 	$(bin)/coffee scripts/devserver.coffee
 

framer/Align.coffee

@@ -1,8 +1,8 @@
 center = (layer, property, offset=0) ->
 	parent = Screen
 	parent = layer.parent if layer.parent
-	return (parent.width / 2) - (layer.width / 2) + offset if property is "x"
-	return (parent.height / 2) - (layer.height / 2) + offset if property is "y"
+	return (parent.width / 2) - (layer.width / 2) - parent.borderWidth + offset if property is "x"
+	return (parent.height / 2) - (layer.height / 2) - parent.borderWidth + offset if property is "y"
 	return 0
 
 left = (layer, property, offset=0) ->
@@ -15,7 +15,7 @@ right = (layer, property, offset=0) ->
 	throw Error "Align.right only works for x" unless property is "x"
 	parent = Screen
 	parent = layer.parent if layer.parent
-	return parent.width - layer.width + offset
+	return parent.width - (2 * parent.borderWidth) - layer.width + offset
 
 top = (layer, property, offset=0) ->
 	throw Error "Align.top only works for y" unless property is "y"
@@ -27,7 +27,7 @@ bottom = (layer, property, offset=0) ->
 	throw Error "Align.bottom only works for y" unless property is "y"
 	parent = Screen
 	parent = layer.parent if layer.parent
-	return parent.height - layer.height + offset
+	return parent.height - (2 * parent.borderWidth) - layer.height + offset
 
 wrapper = (f) ->
 	return (a, b) ->
@@ -39,4 +39,4 @@ exports.Align =
 	left: wrapper(left)
 	right: wrapper(right)
 	top: wrapper(top)
-	bottom: wrapper(bottom)
+	bottom: wrapper(bottom)

test/tests.coffee

@@ -14,6 +14,7 @@ chai.config.showDiff = true
 mocha.setup({ui:"bdd", bail:true, reporter:"dot"})
 mocha.globals(["__import__"])
 
+require "./tests/AlignTest"
 require "./tests/EventEmitterTest"
 require "./tests/UtilsTest"
 require "./tests/BaseClassTest"

test/tests/AlignTest.coffee

@@ -0,0 +1,56 @@
+describe "Align", ->
+	createAlignedLayers = (property,value,properties={}) ->
+		properties.width ?= 500
+		properties.height ?= 300
+		parent = new Layer properties
+		child = createSublayer(parent,property,value)
+		{parent: parent, child: child}
+
+	createSublayer = (layer,property, value) ->
+		layer = new Layer
+			width: 100
+			height: 200
+			superLayer: layer
+		layer[property] = value
+		layer
+
+	describe "center", ->
+		it "should center the layer", ->
+			{child} = createAlignedLayers('x',Align.center)
+			child.x.should.equal 200
+			{child} = createAlignedLayers('y',Align.center)
+			child.y.should.equal 50
+		it "should take borderWidth into account", ->
+			{child} = createAlignedLayers('x',Align.center,{borderWidth:30})
+			child.x.should.equal 170
+			{child} = createAlignedLayers('y',Align.center,{borderWidth:30})
+			child.y.should.equal 20
+
+	describe "left", ->
+		it "should left align the layer", ->
+			{child} = createAlignedLayers('x',Align.left)
+			child.x.should.equal 0
+
+	describe "right", ->
+		it "should right align the layer", ->
+			{child} = createAlignedLayers('x',Align.right)
+			child.x.should.equal 400
+		it "should take borderWidth into account", ->
+			{child} = createAlignedLayers('x',Align.right,{borderWidth:30})
+			child.x.should.equal 340
+
+	describe "top", ->
+		it "should top align the layer", ->
+			{child} = createAlignedLayers('y',Align.top)
+			child.y.should.equal 0
+		it "should take borderWidth into account", ->
+			{child} = createAlignedLayers('y',Align.top,{borderWidth:30})
+			child.y.should.equal 0
+
+	describe "bottom", ->
+		it "should bottom align the layer", ->
+			{child} = createAlignedLayers('y',Align.bottom)
+			child.y.should.equal 100
+		it "should take borderWidth into account", ->
+			{child} = createAlignedLayers('y',Align.bottom,{borderWidth:30})
+			child.y.should.equal 40