Utils.textSize beta addition

Use with care

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

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
 

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)
+