Permalink
Browse files

Refactored padding into a real layer property

  • Loading branch information...
nvh committed Jul 17, 2017
1 parent 962b105 commit bac9d609441d8a06176fee2aa97e290130bc1bff
Showing with 50 additions and 33 deletions.
  1. +5 −1 framer/LayerStyle.coffee
  2. +22 −19 framer/TextLayer.coffee
  3. +23 −13 test/tests/TextLayerTest.coffee
View
@@ -198,7 +198,7 @@ exports.LayerStyle =
backgroundColor: (layer) ->
return layer._properties.backgroundColor
fill: (layer) ->
return layer._properties.fill
@@ -278,3 +278,7 @@ exports.LayerStyle =
when "right-to-left" then return "rtl"
when "left-to-right" then return "ltr"
else return value
padding: (layer) ->
padding = Utils.rectZero(Utils.parseRect(layer.padding))
return "#{padding.top * layer.context.pixelMultiplier}px #{padding.right * layer.context.pixelMultiplier}px #{padding.bottom * layer.context.pixelMultiplier}px #{padding.left * layer.context.pixelMultiplier}px"
View
@@ -11,6 +11,22 @@ fontFamilyFromObject = (font) ->
textProperty = (obj, name, fallback, validator, transformer, set) ->
layerProperty(obj, name, name, fallback, validator, transformer, {}, set, "_elementHTML")
asPadding = (value) ->
return value if _.isNumber(value)
return 0 if not _.isObject(value)
result = {}
isValidObject = false
if value.horizontal?
value.left ?= value.horizontal
value.right ?= value.horizontal
if value.vertical?
value.top ?= value.vertical
value.bottom ?= value.vertical
for key in ["left", "right", "bottom", "top"]
isValidObject ||= _.has(value, key)
result[key] = value[key] ? 0
return if not isValidObject then 0 else result
class exports.TextLayer extends Layer
@_textProperties = [
"text"
@@ -215,33 +231,20 @@ class exports.TextLayer extends Layer
@renderText()
@emit("change:text", value)
@define "padding",
get: ->
if @_padding? then _.clone(@_padding) else Utils.rectZero()
set: (padding) ->
if _.isObject(padding)
padding.left ?= padding.horizontal
padding.right ?= padding.horizontal
padding.top ?= padding.vertical
padding.bottom ?= padding.vertical
@_padding = Utils.rectZero(Utils.parseRect(padding))
# Top, Right, Bottom, Left
@style.padding =
"#{@_padding.top * @context.pixelMultiplier}px #{@_padding.right * @context.pixelMultiplier}px #{@_padding.bottom * @context.pixelMultiplier}px #{@_padding.left * @context.pixelMultiplier}px"
@define "padding", layerProperty(@, "padding", "padding", 0, null, asPadding)
renderText: =>
return if @__constructor
@_styledText.render()
@_updateHTMLScale()
parentWidth = if @parent? then @parent.width else Screen.width
constrainedWidth = if @autoWidth then parentWidth else @size.width
constrainedWidth -= (@padding.left + @padding.right)
padding = Utils.rectZero(Utils.parseRect(@padding))
constrainedWidth -= (padding.left + padding.right)
if @autoHeight
constrainedHeight = null
else
constrainedHeight = @size.height - (@padding.top + @padding.bottom)
constrainedHeight = @size.height - (padding.top + padding.bottom)
constraints =
width: constrainedWidth
height: constrainedHeight
@@ -250,9 +253,9 @@ class exports.TextLayer extends Layer
calculatedSize = @_styledText.measure constraints
@disableAutosizeUpdating = true
if calculatedSize.width?
@width = calculatedSize.width + @padding.left + @padding.right
@width = calculatedSize.width + padding.left + padding.right
if calculatedSize.height?
@height = calculatedSize.height + @padding.top + @padding.bottom
@height = calculatedSize.height + padding.top + padding.bottom
@disableAutosizeUpdating = false
defaultFont: ->
@@ -17,7 +17,7 @@ describe "TextLayer", ->
text._elementHTML.outerHTML.should.equal '<div style="zoom: 1; overflow: hidden; color: rgb(136, 136, 136); font-family: -apple-system, BlinkMacSystemFont, \'SF UI Text\', \'Helvetica Neue\'; font-weight: 400; font-style: normal; font-size: 40px; line-height: 1.25; text-transform: none; outline: none; white-space: pre-wrap; word-wrap: break-word; text-align: left;"><div style="font-size: 1px;"><span style="font-size: 40px;">Hello World</span></div></div>'
text.color.isEqual("#888").should.equal true
text.backgroundColor.isEqual("transparent").should.equal true
text.padding.should.eql Utils.rectZero()
text.padding.should.eql 0
text.fontSize.should.equal 40
text.fontWeight.should.equal 400
text.lineHeight.should.equal 1.25
@@ -76,6 +76,25 @@ describe "TextLayer", ->
#
text.animate
color: "red"
it "should animate padding", (done) ->
text = new TextLayer
styledText: simpleStyledTextOptions
text.padding = 10
text.onAnimationStart ->
text.padding.should.equal 10
done()
text.onAnimationEnd ->
text.padding.should.equal 20
done()
#
text.animate
padding: 20
describe "Auto-sizing", ->
it "should auto size the layer the size of the text", ->
@@ -233,20 +252,14 @@ describe "TextLayer", ->
it "should have no padding initially", ->
text = new TextLayer
text.style.padding.should.equal "0px"
text.padding.top.should.equal 0
text.padding.bottom.should.equal 0
text.padding.left.should.equal 0
text.padding.right.should.equal 0
text.padding.should.equal 0
it "should all padding when given a numeric value", ->
text = new TextLayer
padding: 10
text.style.padding.should.equal "10px"
text.padding.top.should.equal 10
text.padding.bottom.should.equal 10
text.padding.left.should.equal 10
text.padding.right.should.equal 10
text.padding.should.equal 10
it "should set horizontal padding", ->
text = new TextLayer
@@ -307,10 +320,7 @@ describe "TextLayer", ->
it "should have a default padding when setting styledText", ->
text = new TextLayer
styledText: {}
text.padding.top.should.equal 0
text.padding.bottom.should.equal 0
text.padding.left.should.equal 0
text.padding.right.should.equal 0
text.padding.should.equal 0
it "should take the devicePixelRatio into account", ->
device = new DeviceComponent()

0 comments on commit bac9d60

Please sign in to comment.