Permalink
Browse files

Fixing up ScrollComponent.wrap

We now keep the original layer as the content layer, so you can continue to set click handlers on it and get expected results. Also, more tests.
  • Loading branch information...
Koen Bok
Koen Bok committed Dec 28, 2015
1 parent 57a342d commit b71627c8537b056c40f8162664bf3025a4864da4
Showing with 83 additions and 42 deletions.
  1. +23 −18 framer/Components/ScrollComponent.coffee
  2. +60 −24 test/tests/ScrollComponentTest.coffee
@@ -409,10 +409,27 @@ wrapComponent = (instance, layer, options = {correct:true}) ->
layer.x = layer.y = 0
layer = wrapper
console.log "Corrected the scroll component without sub layers"
for propKey in ["frame", "image", "name"]
scroll[propKey] = layer[propKey]
# console.info "Corrected the scroll component without sub layers"
scroll.frame = layer.frame
scroll.superLayer = layer.superLayer
scroll.index = layer.index
# Copy over the name, if we don't have it try to use the variable
# name from Framer Studio if it was given.
if layer.name and layer.name isnt ""
scroll.name = layer.name
else if layer.__framerInstanceInfo?.name
scroll.name = layer.__framerInstanceInfo.name
# If we have an image set, it makes way more sense to add it to the
# background of the wrapper then the content.
if layer.image
scroll.image = layer.image
layer.image = null
# Set the original layer as the content layer for the scroll
scroll.setContentLayer(layer)
# https://github.com/motif/Company/issues/208
@@ -433,23 +450,11 @@ wrapComponent = (instance, layer, options = {correct:true}) ->
if screenFrame.x < Screen.width
if screenFrame.x + screenFrame.width > Screen.width
scroll.width = Screen.width - screenFrame.x
console.log "Corrected the scroll width to #{scroll.width}"
# console.info "Corrected the scroll width to #{scroll.width}"
if screenFrame.y < Screen.height
if screenFrame.y + screenFrame.height > Screen.height
scroll.height = Screen.height - screenFrame.y
console.log "Corrected the scroll height to #{scroll.height}"
# console.info "Corrected the scroll height to #{scroll.height}"
# Now copy over all the content to the new scroll component
for subLayer in layer.subLayers
subLayerIndex = subLayer.index
subLayer.superLayer = scroll.content
subLayer.index = subLayerIndex
scroll.superLayer = layer.superLayer
scroll.index = layer.index
layer.destroy()
return scroll
@@ -1,35 +1,71 @@
expect = chai.expect
describe "ScrollComponent", ->
it "should apply constructor options", ->
it "should apply constructor options", ->
instance = new ScrollComponent (scrollHorizontal: false)
instance.scrollHorizontal.should.be.false
instance = new ScrollComponent (scrollHorizontal: false)
instance.scrollHorizontal.should.be.false
it "should keep scrollHorizontal value on copy", ->
it "should keep scrollHorizontal value on copy", ->
instance = new ScrollComponent (scrollHorizontal: false)
instance.scrollHorizontal.should.be.false
instance = new ScrollComponent (scrollHorizontal: false)
instance.scrollHorizontal.should.be.false
copy = instance.copy()
copy.scrollHorizontal.should.be.false
copy = instance.copy()
copy.scrollHorizontal.should.be.false
describe "wrap", ->
describe "wrap", ->
it "should forward constructor options", ->
options =
scrollVertical: false
mouseWheelEnabled: true
name: "is a name"
backgroundColor: new Color r:0, g:0, b:0, a:0
color: new Color r:255, g:255, b:255, a:1
shadowColor: new Color r:0, g:0, b:0, a:1
it "should use the wrapped layer as content layer when there are sublayers", ->
# 'wrap' ports the 'name' of the layer onto the ScrollComponent
layer = new Layer name: options.name
layer.name.should.equal(options.name)
layerA = new Layer frame:Screen.frame
layerB = new Layer superLayer:layerA
scroller = ScrollComponent.wrap layer, options
for key in _.keys options
expect(scroller[key]).to.equal(options[key])
scroll = ScrollComponent.wrap(layerA)
scroll.content.should.equal layerA
it "should use the wrapped layer as content if there are no sublayers", ->
layerA = new Layer frame:Screen.frame
scroll = ScrollComponent.wrap(layerA)
scroll.content.subLayers[0].should.equal layerA
it "should copy the name and image", ->
layerA = new Layer frame:Screen.frame, name:"Koen", image:"../static/test.png"
layerB = new Layer superLayer:layerA
scroll = ScrollComponent.wrap(layerA)
scroll.name.should.equal "Koen"
scroll.image.should.equal "../static/test.png"
scroll.content.should.equal layerA
scroll.content.name.should.equal "content"
scroll.content.image.should.equal ""
it "should correct the scroll frame", ->
frame = Screen.frame
frame.width += 100
frame.height += 100
layerA = new Layer frame:frame
scroll = ScrollComponent.wrap(layerA)
scroll.width.should.equal Screen.width
scroll.height.should.equal Screen.height
it "should correct the scroll frame with sublayers", ->
frame = Screen.frame
frame.width += 100
frame.height += 100
layerA = new Layer frame:frame
layerB = new Layer superLayer:layerA
scroll = ScrollComponent.wrap(layerA)
scroll.width.should.equal Screen.width
scroll.height.should.equal Screen.height

0 comments on commit b71627c

Please sign in to comment.