Skip to content
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.