Permalink
Browse files

Merge pull request #340 from nvh/align-borderwidth

Fixing alignment of child layer when the parent has a borderWidth
  • Loading branch information...
nvh committed Apr 12, 2016
2 parents 7aefc85 + 1faf5be commit 04ee1641f1c1e8e1c3382aeb98df51b6f50609dc
Showing with 63 additions and 5 deletions.
  1. +1 −0 Makefile
  2. +5 −5 framer/Align.coffee
  3. +1 −0 test/tests.coffee
  4. +56 −0 test/tests/AlignTest.coffee
@@ -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
@@ -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)
@@ -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"
@@ -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

0 comments on commit 04ee164

Please sign in to comment.