Permalink
Browse files

Merge pull request #518 from koenbok/feature/textlayer-fixes

Feature/textlayer fixes
  • Loading branch information...
nvh committed Jun 14, 2017
2 parents 67e7f9e + 1c6a36a commit 582d861c902dc88bcc7d1b227506cf53bd304755
Showing with 30 additions and 24 deletions.
  1. +8 −5 framer/Layer.coffee
  2. +4 −4 framer/LayerStyle.coffee
  3. +12 −11 framer/TextLayer.coffee
  4. +6 −4 test/tests/TextLayerTest.coffee
View
@@ -244,7 +244,7 @@ class exports.Layer extends BaseClass
@define "visible", layerProperty(@, "visible", "display", true, _.isBoolean)
@define "opacity", layerProperty(@, "opacity", "opacity", 1, _.isNumber)
@define "index", layerProperty(@, "index", "zIndex", 0, _.isNumber, null, {importable: false, exportable: false})
@define "clip", layerProperty(@, "clip", "overflow", false, _.isBoolean)
@define "clip", layerProperty(@, "clip", "overflow", false, _.isBoolean, null, {}, null, "_elementHTML", true)
@define "scrollHorizontal", layerProperty @, "scrollHorizontal", "overflowX", false, _.isBoolean, null, {}, (layer, value) ->
layer.ignoreEvents = false if value is true
@@ -782,6 +782,12 @@ class exports.Layer extends BaseClass
@bringToFront()
@_context.element.appendChild(@_element)
_createHTMLElementIfNeeded: ->
if not @_elementHTML
@_elementHTML = document.createElement "div"
@_element.insertBefore @_elementHTML, @_elementBorder
@define "html",
get: ->
@_elementHTML?.innerHTML or ""
@@ -791,10 +797,7 @@ class exports.Layer extends BaseClass
# Insert some html directly into this layer. We actually create
# a child node to insert it in, so it won't mess with Framers
# layer hierarchy.
if not @_elementHTML
@_elementHTML = document.createElement "div"
@_element.insertBefore @_elementHTML, @_elementBorder
@_createHTMLElementIfNeeded()
@_elementHTML.innerHTML = value
@_updateHTMLScale()
View
@@ -243,16 +243,16 @@ exports.LayerStyle =
return borderWidth
fontSize: (layer) ->
return (layer._properties.fontSize * layer.context.pixelMultiplier) + "px"
return (layer._properties.fontSize) + "px"
letterSpacing: (layer) ->
return (layer._properties.letterSpacing * layer.context.pixelMultiplier) + "px"
return (layer._properties.letterSpacing) + "px"
wordSpacing: (layer) ->
return (layer._properties.wordSpacing * layer.context.pixelMultiplier) + "px"
return (layer._properties.wordSpacing) + "px"
textIndent: (layer) ->
return (layer._properties.textIndent * layer.context.pixelMultiplier) + "px"
return (layer._properties.textIndent) + "px"
textAlign: (layer) ->
value = layer._properties.textAlign
View
@@ -41,7 +41,7 @@ class exports.TextLayer extends Layer
_.defaults options, options.textStyle,
backgroundColor: "transparent"
html: "Hello World"
text: "Hello World"
color: "#888"
fontSize: 40
fontWeight: 400
@@ -105,7 +105,7 @@ class exports.TextLayer extends Layer
@height = newHeight if @height isnt newHeight
@disableExplicitUpdating = false
if @multiLineOverflow
@style["-webkit-line-clamp"] = @maxVisibleLines()
@_elementHTML.style["-webkit-line-clamp"] = @maxVisibleLines()
updateExplicitWidth: (value) =>
return if @disableExplicitUpdating
@@ -119,9 +119,10 @@ class exports.TextLayer extends Layer
Math.ceil(@height / (@fontSize*@lineHeight))
@define "text",
get: -> @_element.textContent
get: -> @_elementHTML?.textContent
set: (value) ->
@_element.textContent = value
@_createHTMLElementIfNeeded()
@_elementHTML.textContent = value
@emit("change:text", value)
@define "padding",
@@ -163,7 +164,7 @@ class exports.TextLayer extends Layer
layer.whiteSpace = null
layer.clip = false
layer.multiLineOverflow = false
)
, "_elementHTML")
@define "whiteSpace", layerProperty(@, "whiteSpace", "whiteSpace", null, _.isString)
@define "direction", layerProperty(@, "direction", "direction", null, _.isString)
@@ -173,13 +174,13 @@ class exports.TextLayer extends Layer
set: (value) ->
@_multiLineOverFlow = value
if @_multiLineOverFlow
@style["-webkit-line-clamp"] = @maxVisibleLines()
@style["-webkit-box-orient"] = "vertical"
@style["display"] = "-webkit-box"
@_elementHTML.style["-webkit-line-clamp"] = @maxVisibleLines()
@_elementHTML.style["-webkit-box-orient"] = "vertical"
@_elementHTML.style["display"] = "-webkit-box"
else
@style["-webkit-line-clamp"] = null
@style["-webkit-box-orient"] = null
@style["display"] = "block"
@_elementHTML.style["-webkit-line-clamp"] = null
@_elementHTML.style["-webkit-box-orient"] = null
@_elementHTML.style["display"] = "block"
@define "font", layerProperty @, "font", null, null, validateFont, null, {}, (layer, value) ->
if _.isObject(value)
@@ -285,17 +285,17 @@ describe "TextLayer", ->
text: longText
textOverflow: "ellipsis"
height: 150
l.style["-webkit-line-clamp"].should.equal '3'
l._elementHTML.style["-webkit-line-clamp"].should.equal '3'
l.height = 400
l.style["-webkit-line-clamp"].should.equal '8'
l._elementHTML.style["-webkit-line-clamp"].should.equal '8'
it "should not set the line-clamp when not using textOverflow", ->
l = new TextLayer
text: longText
height: 150
l.style["-webkit-line-clamp"].should.equal ''
l._elementHTML.style["-webkit-line-clamp"].should.equal ''
l.height = 400
l.style["-webkit-line-clamp"].should.equal ''
l._elementHTML.style["-webkit-line-clamp"].should.equal ''
describe "truncate", ->
it "should set textOverflow to ellipsis", ->
@@ -304,6 +304,8 @@ describe "TextLayer", ->
truncate: true
l.truncate.should.equal true
l.textOverflow.should.equal "ellipsis"
l._elementHTML.style.textOverflow.should.equal "ellipsis"
l.truncate = false
l.truncate.should.equal false
expect(l.textOverflow).to.equal null
expect(l._elementHTML.style.textOverflow).to.equal ''

0 comments on commit 582d861

Please sign in to comment.