Setting clip to true if rendered text falls outside of the current layer

koenbok · Oct 19, 2017 · 91579c4 · 91579c4
1 parent bac4ce9
commit 91579c4
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 0 deletions.
diff --git a/framer/TextLayer.coffee b/framer/TextLayer.coffee
@@ -256,6 +256,10 @@ class exports.TextLayer extends Layer
 		return if @__constructor
 		@_styledText.render()
 		@_updateHTMLScale()
+		if not @autoSize
+			htmlRect = @_elementHTML.getBoundingClientRect()
+			if @width < htmlRect.width or @height < htmlRect.height
+				@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

diff --git a/test/tests/TextLayerTest.coffee b/test/tests/TextLayerTest.coffee
@@ -398,6 +398,72 @@ describe "TextLayer", ->
 			text.text = "Hello there"
 			text.size.should.eql width: 264, height: 50
 
+		it "should set clipping to true if the text is bigger than the size", ->
+			textLayer = new TextLayer
+				width: 283
+				styledText:
+					blocks: [ {
+						inlineStyles: [
+							{
+							'startIndex': 0
+							'endIndex': 19
+							'css':
+								'fontSize': '16px'
+								'letterSpacing': '0px'
+								'lineHeight': '1.2'
+								'tabSize': 4
+								'fontFamily': '".SFNSText", "SFProText-Regular", "SFUIText-Regular", ".SFUIText", sans-serif'
+								'WebkitTextFillColor': 'rgb(0, 0, 0)'
+							}
+							{
+							'startIndex': 19
+							'endIndex': 120
+							'css':
+								'fontSize': '16px'
+								'tabSize': 4
+								'fontFamily': '".SFNSText", "SFProText-Regular", "SFUIText-Regular", ".SFUIText", sans-serif'
+								'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'
+					} ]
+				height: 55
+				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: 283
+				styledText:
+					blocks: [ {
+						inlineStyles: [
+							{
+							'startIndex': 0
+							'endIndex': 19
+							'css':
+								'fontSize': '16px'
+								'letterSpacing': '0px'
+								'lineHeight': '1.2'
+								'tabSize': 4
+								'fontFamily': '".SFNSText", "SFProText-Regular", "SFUIText-Regular", ".SFUIText", sans-serif'
+								'WebkitTextFillColor': 'rgb(0, 0, 0)'
+							}
+							{
+							'startIndex': 19
+							'endIndex': 120
+							'css':
+								'fontSize': '16px'
+								'tabSize': 4
+								'fontFamily': '".SFNSText", "SFProText-Regular", "SFUIText-Regular", ".SFUIText", sans-serif'
+								'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'
+					} ]
+				height: 77
+				autoSize: false
+			textLayer.clip.should.equal false
+
 	describe "Padding", ->
 		it "should have no padding initially", ->
 			text = new TextLayer