Permalink
Browse files

Fixed rendering of empty lines and different fontSizes

  • Loading branch information...
nvh committed Jul 21, 2017
1 parent 72ed711 commit 212874cdab82d24649143debb86b6bfe24a0a52f
Showing with 20 additions and 5 deletions.
  1. +5 −2 framer/StyledText.coffee
  2. +2 −2 framer/TextLayer.coffee
  3. +13 −1 test/tests/TextLayerTest.coffee
View
@@ -33,7 +33,7 @@ getMeasureElement = (constraints={}) ->
class InlineStyle
startIndex: 0
endIndex: 0
css: {}
css: null
text: ""
element: null
@@ -58,7 +58,10 @@ class InlineStyle
span = document.createElement "span"
for prop, value of @css
span.style[prop] = value
span.textContent = @text
if @text is ""
span.innerHTML = "<br/>"
else
span.textContent = @text
return span
setText: (text) ->
View
@@ -73,7 +73,7 @@ class exports.TextLayer extends Layer
padding: 0
if not options.font? and not options.fontFamily?
options.fontFamily = @defaultFont()
@_styledText.addBlock options.text
@_styledText.addBlock options.text, fontSize: "#{options.fontSize}px"
super options
@__constructor = true
@@ -179,7 +179,7 @@ class exports.TextLayer extends Layer
@define "fontStyle", textProperty(@, "fontStyle", "normal", _.isString)
@define "textDecoration", textProperty(@, "textDecoration", null, _.isString)
@define "fontSize", textProperty(@, "fontSize", null, _.isNumber, null, (layer, value) ->
return if value is null
return if value is null or layer.__constructor
style = LayerStyle["fontSize"](layer)
layer._styledText.setStyle("fontSize", style)
)
@@ -6,9 +6,10 @@ mediumText = "What about this text that probably spans just over two lines"
longText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere odio nisi, non elementum ipsum posuere ac. Vestibulum et faucibus ante. Praesent mi eros, scelerisque non venenatis at, tempus ut purus. Morbi volutpat velit lacus, id convallis lacus vulputate id. Nullam eu ex sed purus accumsan finibus sed eget lorem. Maecenas vulputate ante non ipsum luctus cursus. Nam dapibus purus ut lorem laoreet sollicitudin. Sed ullamcorper odio sed risus viverra, in vehicula lectus malesuada. Morbi porttitor, augue vel mollis pulvinar, sem lacus fringilla dui, facilisis venenatis lacus velit vitae velit. Suspendisse dictum elit in quam feugiat, nec ornare neque tempus. Duis eget arcu risus. Sed vitae turpis sit amet sapien pharetra consequat quis a dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla laoreet quis augue ac venenatis. Aenean nec lorem sodales, finibus purus in, ornare elit. Maecenas ut feugiat tellus."
simpleStyledTextOptions = {blocks: [{inlineStyles: [{startIndex: 0, endIndex: 5, css: {fontSize: "16px", WebkitTextFillColor: "#000000", letterSpacing: "0px", fontWeight: 400, lineHeight: "2.5", tabSize: 4, fontFamily: "'Roboto-Regular', 'Roboto', 'Times New Roman'"}}], text: "Color"}]}
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"}]}
describe "TextLayer", ->
describe "TextLayer", ->
describe "defaults", ->
it "should set the correct defaults", ->
text = new TextLayer
@@ -67,6 +68,17 @@ describe "TextLayer", ->
a.styledTextOptions.alignment.should.equal "left"
b.styledTextOptions.alignment.should.equal "center"
it "should render all lines at the correct fontsize", ->
l = new TextLayer
styledText: differentFonts
l._styledText.blocks[1].inlineStyles[0].css.fontSize.should.equal "47px"
l._styledText.blocks[4].inlineStyles[0].css.fontSize.should.equal "10px"
it "should render empty newlines", ->
l = new TextLayer
styledText: differentFonts
l._styledText.blocks.length.should.equal 6
describe "animation", ->
it "should start animating from the textcolor the layer has", (done) ->
text = new TextLayer

0 comments on commit 212874c

Please sign in to comment.