Permalink
Browse files

Merge pull request #553 from koenbok/fix-inferring-text-styles

Fix inferring text styles
  • Loading branch information...
nvh committed Dec 7, 2017
2 parents 58d7faf + 37ec0c2 commit 6e31668dd192b73a972bdf9f401accb310b6ea14
Showing with 264 additions and 0 deletions.
  1. +7 −0 framer/TextLayer.coffee
  2. +257 −0 test/tests/TextLayerTest.coffee
View
@@ -61,6 +61,13 @@ class exports.TextLayer extends Layer
@styledTextOptions = options.styledText
options.color ?= @_styledText.getStyle("color")
options.fontSize ?= parseFloat(@_styledText.getStyle("fontSize"))
options.fontFamily ?= @_styledText.getStyle("fontFamily")
options.letterSpacing ?= parseFloat(@_styledText.getStyle("letterSpacing"))
options.textAlign ?= @_styledText.textAlign
fontWeight = @_styledText.getStyle("fontWeight")
if fontWeight?
options.fontWeight = parseFloat(fontWeight)
lineHeight = @_styledText.getStyle("lineHeight")
if not lineHeight? or lineHeight is "normal"
lineHeight = 1.25
@@ -530,6 +530,263 @@ describe "TextLayer", ->
layerA.style.padding.should.equal "20px"
describe "Fonts", ->
it "should infer fontWeight from design", ->
text = new TextLayer(
'name': 'text'
'backgroundColor': null
'width': 70
'styledText':
'blocks': [ {
'inlineStyles': [ {
'startIndex': 0
'endIndex': 3
'css':
'fontSize': '40px'
'WebkitTextFillColor': 'rgb(0, 0, 0)'
'whiteSpace': 'pre'
'fontWeight': 400
'letterSpacing': '0px'
'tabSize': 4
'fontFamily': '"Roboto-Regular", "Roboto", sans-serif'
'lineHeight': '1.2'
} ]
'text': 'Ben'
} ]
'alignment': 'center'
'height': 48
'constraintValues':
'height': 48
'width': 70
'blending': 'normal'
'autoSize': true)
text.fontWeight.should.equal 400
it "should infer fontFamily from design", ->
text = new TextLayer(
'name': 'text'
'backgroundColor': null
'width': 162
'x': 107
'styledText': 'blocks': [ {
'inlineStyles': [ {
'startIndex': 0
'endIndex': 4
'css':
'fontSize': '80px'
'WebkitTextFillColor': 'rgb(0, 0, 0)'
'whiteSpace': 'pre'
'letterSpacing': '0px'
'lineHeight': '1.2'
'tabSize': 4
'fontFamily': '".SFNSDisplay-Heavy", "SFProDisplay-Heavy", "SFUIDisplay-Heavy", ".SFUIDisplay-Heavy", sans-serif'
} ]
'text': 'Test'
} ]
'height': 96
'constraintValues':
'left': null
'height': 96
'centerAnchorX': 0.5013333333333333
'width': 162
'top': null
'centerAnchorY': 0.50074962518740629
'blending': 'normal'
'autoSize': true
'y': 286)
text.fontFamily.should.equal '".SFNSDisplay-Heavy", "SFProDisplay-Heavy", "SFUIDisplay-Heavy", ".SFUIDisplay-Heavy", sans-serif'
it "should infer letterSpacing from design", ->
text = new TextLayer(
'name': 'text'
'backgroundColor': null
'width': 162
'x': 107
'styledText': 'blocks': [ {
'inlineStyles': [ {
'startIndex': 0
'endIndex': 4
'css':
'fontSize': '80px'
'WebkitTextFillColor': 'rgb(0, 0, 0)'
'whiteSpace': 'pre'
'letterSpacing': '0px'
'lineHeight': '1.2'
'tabSize': 4
'fontFamily': '".SFNSDisplay-Heavy", "SFProDisplay-Heavy", "SFUIDisplay-Heavy", ".SFUIDisplay-Heavy", sans-serif'
} ]
'text': 'Test'
} ]
'height': 96
'constraintValues':
'left': null
'height': 96
'centerAnchorX': 0.5013333333333333
'width': 162
'top': null
'centerAnchorY': 0.50074962518740629
'blending': 'normal'
'autoSize': true
'y': 286)
text.letterSpacing.should.equal 0
it "should infer textAlign from design", ->
text = new TextLayer(
'name': 'text'
'backgroundColor': null
'width': 162
'x': 107
'styledText': 'blocks': [ {
'inlineStyles': [ {
'startIndex': 0
'endIndex': 4
'css':
'fontSize': '80px'
'WebkitTextFillColor': 'rgb(0, 0, 0)'
'whiteSpace': 'pre'
'letterSpacing': '0px'
'lineHeight': '1.2'
'tabSize': 4
'fontFamily': '".SFNSDisplay-Heavy", "SFProDisplay-Heavy", "SFUIDisplay-Heavy", ".SFUIDisplay-Heavy", sans-serif'
} ]
'text': 'Test'
} ]
'height': 96
'constraintValues':
'left': null
'height': 96
'centerAnchorX': 0.5013333333333333
'width': 162
'top': null
'centerAnchorY': 0.50074962518740629
'blending': 'normal'
'autoSize': true
'y': 286)
text.textAlign.should.equal "left"
it "should infer fontWeight from design with custom font", ->
text = new TextLayer(
'name': 'text'
'backgroundColor': null
'width': 70
'styledText':
'blocks': [ {
'inlineStyles': [ {
'startIndex': 0
'endIndex': 3
'css':
'fontSize': '40px'
'WebkitTextFillColor': 'rgb(0, 0, 0)'
'whiteSpace': 'pre'
'fontWeight': 400
'letterSpacing': '0px'
'tabSize': 4
'fontFamily': '"Roboto-Regular", "Roboto", sans-serif'
'lineHeight': '1.2'
} ]
'text': 'Ben'
} ]
'alignment': 'center'
'height': 48
'constraintValues':
'height': 48
'width': 70
'blending': 'normal'
'autoSize': true)
text.fontWeight.should.equal 400
it "should infer fontFamily from design with custom font", ->
text = new TextLayer(
'name': 'text'
'backgroundColor': null
'width': 70
'styledText':
'blocks': [ {
'inlineStyles': [ {
'startIndex': 0
'endIndex': 3
'css':
'fontSize': '40px'
'WebkitTextFillColor': 'rgb(0, 0, 0)'
'whiteSpace': 'pre'
'fontWeight': 400
'letterSpacing': '0px'
'tabSize': 4
'fontFamily': '"Roboto-Regular", "Roboto", sans-serif'
'lineHeight': '1.2'
} ]
'text': 'Ben'
} ]
'alignment': 'center'
'height': 48
'constraintValues':
'height': 48
'width': 70
'blending': 'normal'
'autoSize': true)
text.fontFamily.should.equal '"Roboto-Regular", "Roboto", sans-serif'
it "should infer letterSpacing from design with custom font", ->
text = new TextLayer(
'name': 'text'
'backgroundColor': null
'width': 70
'styledText':
'blocks': [ {
'inlineStyles': [ {
'startIndex': 0
'endIndex': 3
'css':
'fontSize': '40px'
'WebkitTextFillColor': 'rgb(0, 0, 0)'
'whiteSpace': 'pre'
'fontWeight': 400
'letterSpacing': '0px'
'tabSize': 4
'fontFamily': '"Roboto-Regular", "Roboto", sans-serif'
'lineHeight': '1.2'
} ]
'text': 'Ben'
} ]
'alignment': 'center'
'height': 48
'constraintValues':
'height': 48
'width': 70
'blending': 'normal'
'autoSize': true)
text.letterSpacing.should.equal 0
it "should infer textAlign from design with custom font", ->
text = new TextLayer(
'name': 'text'
'backgroundColor': null
'width': 70
'styledText':
'blocks': [ {
'inlineStyles': [ {
'startIndex': 0
'endIndex': 3
'css':
'fontSize': '40px'
'WebkitTextFillColor': 'rgb(0, 0, 0)'
'whiteSpace': 'pre'
'fontWeight': 400
'letterSpacing': '0px'
'tabSize': 4
'fontFamily': '"Roboto-Regular", "Roboto", sans-serif'
'lineHeight': '1.2'
} ]
'text': 'Ben'
} ]
'alignment': 'center'
'height': 48
'constraintValues':
'height': 48
'width': 70
'blending': 'normal'
'autoSize': true)
text.textAlign.should.equal "center"
it "sets the weight if the font property is set", ->
l = new TextLayer
font: {fontFamily: "Raleway", fontWeight: 800}

0 comments on commit 6e31668

Please sign in to comment.