Permalink
Browse files

Utils.textSize beta addition

Use with care
  • Loading branch information...
koenbok committed Jan 30, 2015
1 parent 3edbb0f commit 2224d2c494051dabd2c0207360d7cd9f7d96a3ab
Showing with 74 additions and 4 deletions.
  1. +9 −4 extras/CactusFramer/static/app.coffee
  2. +49 −0 framer/Utils.coffee
  3. +16 −0 test/tests/UtilsTest.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
@@ -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
@@ -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)

0 comments on commit 2224d2c

Please sign in to comment.