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

autoSize texts should never softwrap
koenbok · Feb 19, 2018 · c110c3b54592f04e0542360d7fd43b4518eca931 · c110c3b
2 parents aaf80b0 + 5ad526e
commit c110c3b54592f04e0542360d7fd43b4518eca931
Unified Split

Showing with 69 additions and 89 deletions.

+23 −7 framer/TextLayer.coffee

+46 −82 test/tests/TextLayerTest.coffee
diff --git a/framer/TextLayer.coffee b/framer/TextLayer.coffee
@@ -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
diff --git a/test/tests/TextLayerTest.coffee b/test/tests/TextLayerTest.coffee
@@ -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