Utils.textSize beta addition

Use with care
koenbok · Jan 30, 2015 · 2224d2c494051dabd2c0207360d7cd9f7d96a3ab · 2224d2c
1 parent 3edbb0f
commit 2224d2c494051dabd2c0207360d7cd9f7d96a3ab
Unified Split

Showing with 74 additions and 4 deletions.

+9 −4 extras/CactusFramer/static/app.coffee

+49 −0 framer/Utils.coffee

+16 −0 test/tests/UtilsTest.coffee
diff --git a/extras/CactusFramer/static/app.coffee b/extras/CactusFramer/static/app.coffee
@@ -1,6 +1,11 @@
-Framer.Device = new Framer.DeviceView()
-Framer.Device.setupContext()

-layer = new Layer width:10000, height:10000
+style = 
+	font: "20px/1em Menlo"

-Framer.Device.rotateRight()
+layer = new Layer
+layer.backgroundColor = "rgba(255,0,0,.4)"
+layer.style = style
+layer.html = "Hello Koen Bok"
+
+layer.frame = Utils.textSize(layer.html, style, {width:100})
+print layer.frame
diff --git a/framer/Utils.coffee b/framer/Utils.coffee
@@ -563,6 +563,8 @@ Utils.convertPoint = (input, layerA, layerB) ->
 	
 	return point

+###################################################################
+# Beta additions, use with care

 Utils.globalLayers = (importedLayers) ->
 	
@@ -584,5 +586,52 @@ Utils.globalLayers = (importedLayers) ->
 	window.Framer._globalWarningGiven = true


+_textSizeNode = null
+
+Utils.textSize = (text, style={}, constraints={}) ->
+
+	# This function takes some text, css style and optionally a width and height and 
+	# returns the rendered text size. This can be pretty slow, so use sporadically.
+	# http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript
+
+	shouldCreateNode = !_textSizeNode
+	
+	if shouldCreateNode
+		_textSizeNode = document.createElement("div")
+		_textSizeNode.id = "_textSizeNode"
+	
+	_textSizeNode.innerHTML = text
+	
+	style = _.extend style, 
+		position: "fixed"
+		display: "inline"
+		visibility: "hidden"
+		top: "-10000px"
+		left: "-10000px"
+		
+	delete style.width
+	delete style.height
+	delete style.bottom
+	delete style.right
+		
+	style.width = "#{constraints.width}px" if constraints.width
+	style.height = "#{constraints.height}px" if constraints.height
+
+	_.extend(_textSizeNode.style, style)
+
+	if shouldCreateNode
+		# This is a trick to call this function before the document ready event
+		if not window.document.body
+			document.write(_textSizeNode.outerHTML)
+			_textSizeNode = document.getElementById("_textSizeNode")
+		else
+			window.document.body.appendChild(_textSizeNode)
+
+	rect = _textSizeNode.getBoundingClientRect()
+	
+	frame =
+		width: rect.right - rect.left
+		height: rect.bottom - rect.top
+
 _.extend exports, Utils

diff --git a/test/tests/UtilsTest.coffee b/test/tests/UtilsTest.coffee
@@ -196,6 +196,22 @@ describe "Utils", ->
 			Utils.modulate(0, [1, 2], [100, 0], true).should.equal 100
 			Utils.modulate(0, [1, 2], [100, 0], false).should.equal 200

+	describe "textSize", ->
+
+		# Todo: for some reason these don't work in phantomjs
+
+		text  = "Hello Koen Bok"
+		style = {font:"20px/1em Menlo"}
+
+		it "should return the right size", ->
+			Utils.textSize(text, style).should.eql({width:168, height:20})
+
+		it "should return the right size with width constraint", ->
+			Utils.textSize(text, style, {width:100}).should.eql({width:100, height:40})
+
+		# it "should return the right size with height constraint", ->
+		# 	Utils.textSize(text, style, {height:100}).should.eql(width:168,height:100)
+