Skip to content

/ Framer

Permalink
Browse files

Merge pull request #564 from koenbok/fix/text-autosizing 

autoSize texts should never softwrap
  • Loading branch information
@onnlucky
onnlucky committed Feb 19, 2018
Verified
This commit was created on GitHub.com and signed with a verified signature using GitHub’s key.
GPG key ID: 4AEE18F83AFDEB23 Learn about signing commits
2 parents aaf80b0 + 5ad526e commit c110c3b54592f04e0542360d7fd43b4518eca931
Unified Split
Showing with 69 additions and 89 deletions.
  1. +23 −7 framer/TextLayer.coffee
  2. +46 −82 test/tests/TextLayerTest.coffee
30 framer/TextLayer.coffee
View file
@@ -93,15 +93,30 @@ class exports.TextLayer extends Layer
super options
@__constructor = true

# Keeps track if the width or height are explicitly set, so we shouldn't update it afterwards
if not options.autoSize? and not options.truncate
# the goal is:
# - autoSize elements should not soft wrap, only hard wrap (based on newlines)
# - fixed (given a box) elements should soft wrap
# - when the height is not fixed, it should be allowed to grow

if options.autoSize
@autoWidth = true
@autoHeight = true
else if options.autoSize isnt false and not options.truncate
# if not explicitly disabled auto sizing, auto size width/height, unless they were explicitly set
if not options.autoWidth?
explicitWidth = options.width? or _.isNumber(options?.size) or options?.size?.width? or options?.frame?.width?
explicitWidth = options.width? or _.isNumber(options.size) or options.size?.width? or options.frame?.width?
@autoWidth = not explicitWidth
if not options.autoHeight?
explicitHeight = options.height? or _.isNumber(options?.size) or options?.size?.height? or options?.frame?.height?
explicitHeight = options.height? or _.isNumber(options.size) or options.size?.height? or options.frame?.height?
@autoHeight = not explicitHeight

# if constraints from design, autoHeight depends on if the element is allowed to grow in height
constraintValues = options.constraintValues
if constraintValues
topAndBottom = _.isNumber(constraintValues.top) and _.isNumber(constraintValues.bottom)
heightFactor = _.isNumber(constraintValues.heightFactor)
@autoHeight = not (heightFactor or topAndBottom)

if not options.styledText?
@font ?= @fontFamily

@@ -267,10 +282,11 @@ class exports.TextLayer extends Layer
if @width < @_elementHTML.clientWidth or @height < @_elementHTML.clientHeight
@clip = true
return unless forceRender or @autoHeight or @autoWidth or @textOverflow isnt null
parentWidth = if @parent? then @parent.width else Screen.width
constrainedWidth = if @autoWidth then parentWidth else @size.width
padding = Utils.rectZero(Utils.parseRect(@padding))
constrainedWidth -= (padding.left + padding.right)
if @autoWidth
constrainedWidth = null
else
constrainedWidth = @size.width - (padding.left + padding.right)
if @autoHeight
constrainedHeight = null
else
128 test/tests/TextLayerTest.coffee
View file
@@ -8,6 +8,24 @@ simpleStyledTextOptions = {blocks: [{inlineStyles: [{startIndex: 0, endIndex: 5,
exampleStyledTextOptions = {blocks: [{inlineStyles: [{startIndex: 0, endIndex: 6, css: {fontSize: "48px", WebkitTextFillColor: "#000000", letterSpacing: "0px", fontWeight: 800, lineHeight: "1.2", tabSize: 4, fontFamily: "'.SFNSText-Heavy', '.SFUIText-Heavy', 'SF UI Text', 'Times New Roman'"}}], text: "Header"}, {inlineStyles: [{startIndex: 0, endIndex: 8, css: {fontSize: "20px", WebkitTextFillColor: "rgb(153, 153, 153)", letterSpacing: "0px", fontWeight: 400, lineHeight: "1.2", tabSize: 4, fontFamily: "'.SFNSText', 'SFUIText-Regular', '.SFUIText', 'SF UI Text', 'Times New Roman'"}}], text: "Subtitle"}, {inlineStyles: [{startIndex: 0, endIndex: 6, css: {fontSize: "16px", WebkitTextFillColor: "rgb(238, 68, 68)", letterSpacing: "0px", fontWeight: 200, lineHeight: "1.2", tabSize: 4, fontFamily: "'.SFNSText-Light', 'SFUIText-Light', '.SFUIText-Light', 'SF UI Text', 'Times New Roman'"}}, {startIndex: 6, endIndex: 16, css: {fontSize: "12px", WebkitTextFillColor: "#000000", letterSpacing: "0px", fontWeight: 400, lineHeight: "1.2", tabSize: 4, fontFamily: "'.SFNSText', 'SFUIText-Regular', '.SFUIText', 'SF UI Text', 'Times New Roman'"}}], text: "Leader Body text"}], alignment: "left"}
differentFonts = {"blocks": [{"inlineStyles": [{"startIndex": 0, "endIndex": 14, "css": {"fontSize": "60px", "WebkitTextFillColor": "#000000", "letterSpacing": "0px", "fontWeight": 400, "lineHeight": "1.2", "tabSize": 4, "fontFamily": "'.SFNSText', 'SFUIText-Regular', '.SFUIText', 'SF UI Text', sans-serif"}}], "text": "This is Roboto"}, {"inlineStyles": [{"startIndex": 0, "endIndex": 0, "css": {"fontSize": "47px", "WebkitTextFillColor": "#000000", "letterSpacing": "0px", "fontWeight": 400, "lineHeight": "1.2", "tabSize": 4, "fontFamily": "'Roboto-Regular', 'Roboto', sans-serif"}}], "text": ""}, {"inlineStyles": [{"startIndex": 0, "endIndex": 14, "css": {"fontSize": "60px", "WebkitTextFillColor": "#000000", "letterSpacing": "0px", "fontWeight": 400, "lineHeight": "1.2", "tabSize": 4, "fontFamily": "'Roboto-Regular', 'Roboto', sans-serif"}}], "text": "This is Roboto"}, {"inlineStyles": [{"startIndex": 0, "endIndex": 27, "css": {"fontSize": "60px", "WebkitTextFillColor": "#000000", "letterSpacing": "0px", "fontWeight": 400, "lineHeight": "1.2", "tabSize": 4, "fontFamily": "'VesperLibre-Regular', 'Vesper Libre', serif"}}], "text": "With a little bit of Vesper"}, {"inlineStyles": [{"startIndex": 0, "endIndex": 0, "css": {"fontSize": "10px", "WebkitTextFillColor": "rgb(255, 0, 0)", "letterSpacing": "0px", "fontWeight": 400, "lineHeight": "1.2", "tabSize": 4, "fontFamily": "'Lato-Regular', 'Lato', serif"}}], "text": ""}, {"inlineStyles": [{"startIndex": 0, "endIndex": 16, "css": {"fontSize": "12px", "WebkitTextFillColor": "#000000", "letterSpacing": "0px", "fontWeight": 400, "lineHeight": "1.2", "tabSize": 4, "fontFamily": "'Alcubierre', serif"}}], "text": "And some Raleway"}]}

styledText =
blocks: [ {
inlineStyles: [
{
'startIndex': 0
'endIndex': 120
'css':
'fontSize': '16px'
'letterSpacing': '0px'
'lineHeight': '1.2'
'tabSize': 4
'fontFamily': 'Courier, Liberation Mono'
'WebkitTextFillColor': 'rgb(0, 0, 0)'
}
]
text: 'this is dummy text this is dummy text this is dummy text this is dummy text this is dummy text this is dummy text this i'
}]

describe "TextLayer.template", ->
it "should work", ->
text = new TextLayer({text: "xxx {hello} xxx"})
@@ -253,13 +271,6 @@ describe "TextLayer", ->
text: shortText
text.size.should.eql width: 312, height: 50

it "should auto size the layer based on the Screen width", ->
text = new TextLayer
fontFamily: "Courier, Liberation Mono"
text: mediumText
text.width.should.be.lessThan Screen.width
text.height.should.equal 250

it "should auto size the layer if the width is set explicitly", ->
text = new TextLayer
fontFamily: "Courier, Liberation Mono"
@@ -316,27 +327,10 @@ describe "TextLayer", ->
text.text = longText
text.height.should.equal 456

it "should auto size the layer based on it's parent", ->
layer = new Layer width: 150
text = new TextLayer
fontFamily: "Courier, Liberation Mono"
text: mediumText
parent: layer
text.width.should.equal 144
text.height.should.equal 600

it "should auto size the layer when its parent is set afterwards", ->
layer = new Layer width: 150
text = new TextLayer
fontFamily: "Courier, Liberation Mono"
text: mediumText
text.parent = layer
text.width.should.equal 144
text.height.should.equal 600

it "should adjust its size on when a new text is set", (done) ->
text = new TextLayer
fontFamily: "Courier, Liberation Mono"
width: 400
text.on "change:height", ->
text.size.should.eql width: 400, height: 3500
done()
@@ -356,29 +350,6 @@ describe "TextLayer", ->
borderWidth: 5
text.size.should.eql width: 312, height: 50

it "should autosize with the right width when inside a parent", ->
text = new TextLayer
fontFamily: "Courier, Liberation Mono"
text: shortText
borderWidth: 5
padding: 3
parent = new Layer
text.parent = parent
text.size.width.should.be.lessThan 100
text.size.height.should.equal 256

it "should ignore the parents border when autosizing", ->
text = new TextLayer
fontFamily: "Courier, Liberation Mono"
text: shortText
borderWidth: 5
padding: 3
parent = new Layer
size: 200
borderWidth: 10
text.parent = parent
text.size.should.eql width: 198, height: 106

it "should work together with Align.center", ->
text = new TextLayer
fontFamily: "Courier, Liberation Mono"
@@ -401,51 +372,44 @@ describe "TextLayer", ->
it "should set clipping to true if the text is bigger than the size", ->
textLayer = new TextLayer
width: 356
styledText:
blocks: [ {
inlineStyles: [
{
'startIndex': 0
'endIndex': 120
'css':
'fontSize': '16px'
'letterSpacing': '0px'
'lineHeight': '1.2'
'tabSize': 4
'fontFamily': 'Courier, Liberation Mono'
'WebkitTextFillColor': 'rgb(0, 0, 0)'
}
]
text: 'this is dummy text this is dummy text this is dummy text this is dummy text this is dummy text this is dummy text this i'
} ]
styledText: styledText
height: 58
autoSize: false
textLayer.clip.should.equal true

it "should set clipping to false if the text is bigger than the size", ->
textLayer = new TextLayer
width: 356
styledText:
blocks: [ {
inlineStyles: [
{
'startIndex': 0
'endIndex': 120
'css':
'fontSize': '16px'
'letterSpacing': '0px'
'lineHeight': '1.2'
'tabSize': 4
'fontFamily': 'Courier, Liberation Mono'
'WebkitTextFillColor': 'rgb(0, 0, 0)'
}
]
text: 'this is dummy text this is dummy text this is dummy text this is dummy text this is dummy text this is dummy text this i'
} ]
styledText: styledText
height: 76
autoSize: false
textLayer.clip.should.equal false

it "autosizing should not soft wrap", ->
text = new TextLayer
styledText: styledText
text.frame.height.should.eql 19

it "fixed sizing should soft wrap and do grow height", ->
text = new TextLayer
styledText: styledText
width: 200
text.frame.height.should.eql 133

it "fixed sizing should soft wrap, but not grow in height if set explicitly", ->
text = new TextLayer
styledText: styledText
width: 200
height: 100
text.size.should.eql {width: 200, height: 100}

it "fixed sizing should soft wrap and do grow height", ->
text = new TextLayer
styledText: styledText
autoSize: false
text.size.should.eql {width: 100, height: 100}


describe "Padding", ->
it "should have no padding initially", ->
text = new TextLayer

0 comments on commit c110c3b

Please sign in to comment.