Permalink
Browse files

Merge pull request #376 from nvh/feature/scientific-notation

Feature/scientific notation
  • Loading branch information...
nvh committed Jul 15, 2016
2 parents 1141772 + 0c9c09d commit 57147275ecb9732fb33e217b7f7d87afbdb9472c
Showing with 79 additions and 23 deletions.
  1. +25 −21 framer/LayerStyle.coffee
  2. +54 −2 test/tests/LayerTest.coffee
@@ -2,6 +2,12 @@ filterFormat = (value, unit) ->
"#{Utils.round value, 2}#{unit}"
# "#{value}#{unit}"
roundToZero = (num) ->
if (-1e-6 < num && num < 1e-6)
return 0
return num
# TODO: Ideally these should be read out from the layer defined properties
_WebkitProperties = [
["blur", "blur", 0, "px"],
@@ -24,6 +30,7 @@ _Force2DProperties =
"rotationX": 0
"rotationY": 0
exports.LayerStyle =
width: (layer) ->
@@ -91,33 +98,30 @@ exports.LayerStyle =
return css.join(" ")
webkitTransform: (layer) ->
# We have a special rendering path for layers that prefer 2d rendering.
# This definitely decreases performance, but is handy in complex drawing
# scenarios with rounded corners and shadows where gpu drawing gets weird
# results.
if layer._prefer2d or layer._properties.force2d
return exports.LayerStyle.webkitTransformForce2d(layer)
"
translate3d(
#{layer._properties.x}px,
#{layer._properties.y}px,
#{layer._properties.z}px)
#{roundToZero(layer._properties.x)}px,
#{roundToZero(layer._properties.y)}px,
#{roundToZero(layer._properties.z)}px)
scale3d(
#{layer._properties.scaleX * layer._properties.scale},
#{layer._properties.scaleY * layer._properties.scale},
#{layer._properties.scaleZ})
skew(#{layer._properties.skew}deg,#{layer._properties.skew}deg)
skewX(#{layer._properties.skewX}deg)
skewY(#{layer._properties.skewY}deg)
translateZ(#{layer._properties.originZ}px)
rotateX(#{layer._properties.rotationX}deg)
rotateY(#{layer._properties.rotationY}deg)
rotateZ(#{layer._properties.rotationZ}deg)
translateZ(#{-layer._properties.originZ}px)
#{roundToZero(layer._properties.scaleX * layer._properties.scale)},
#{roundToZero(layer._properties.scaleY * layer._properties.scale)},
#{roundToZero(layer._properties.scaleZ)})
skew(#{roundToZero(layer._properties.skew)}deg,#{roundToZero(layer._properties.skew)}deg)
skewX(#{roundToZero(layer._properties.skewX)}deg)
skewY(#{roundToZero(layer._properties.skewY)}deg)
translateZ(#{roundToZero(layer._properties.originZ)}px)
rotateX(#{roundToZero(layer._properties.rotationX)}deg)
rotateY(#{roundToZero(layer._properties.rotationY)}deg)
rotateZ(#{roundToZero(layer._properties.rotationZ)}deg)
translateZ(#{roundToZero(-layer._properties.originZ)}px)
"
webkitTransformForce2d: (layer) ->
@@ -131,10 +135,10 @@ exports.LayerStyle =
if layer._properties[p] isnt v
console.warn "Layer property '#{p}'' will be ignored with force2d enabled"
css.push "translate(#{layer._properties.x}px,#{layer._properties.y}px)"
css.push "scale(#{layer._properties.scale})"
css.push "skew(#{layer._properties.skew}deg,#{layer._properties.skew}deg)"
css.push "rotate(#{layer._properties.rotationZ}deg)"
css.push "translate(#{roundToZero(layer._properties.x)}px,#{roundToZero(layer._properties.y)}px)"
css.push "scale(#{roundToZero(layer._properties.scale)})"
css.push "skew(#{roundToZero(layer._properties.skew)}deg,#{roundToZero(layer._properties.skew)}deg)"
css.push "rotate(#{roundToZero(layer._properties.rotationZ)}deg)"
return css.join(" ")
@@ -73,14 +73,66 @@ describe "Layer", ->
layer.width.should.equal 200
layer.style.width.should.equal "200px"
it "should set width not to scientific notation", ->
it "should set x not to scientific notation", ->
n = 0.000000000000002
n.toString().should.equal("2e-15")
layer = new Layer
layer.x = n
layer.style.webkitTransform.should.equal "translate3d(0px, 0px, 0px) scale3d(1, 1, 1) skew(0deg, 0deg) skewX(0deg) skewY(0deg) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px)"
layer.y = 100
layer.style.webkitTransform.should.equal "translate3d(0px, 100px, 0px) scale3d(1, 1, 1) skew(0deg, 0deg) skewX(0deg) skewY(0deg) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px)"
it "should set x, y and z to really small values", ->
layer = new Layer
layer.x = 10
layer.y = 10
layer.z = 10
layer.x = 1e-5
layer.y = 1e-6
layer.z = 1e-7
layer.x.should.equal 1e-5
layer.y.should.equal 1e-6
layer.z.should.equal 1e-7
# layer.style.webkitTransform.should.equal "matrix(1, 0, 0, 1, 100, 0)"
layer.style.webkitTransform.should.equal "translate3d(0.00001px, 0.000001px, 0px) scale3d(1, 1, 1) skew(0deg, 0deg) skewX(0deg) skewY(0deg) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px)"
it "should handle scientific notation in scaleX,Y and Z", ->
layer = new Layer
layer.scaleX = 2
layer.scaleY = 2
layer.scaleZ = 3
layer.scaleX = 1e-7
layer.scaleY = 1e-8
layer.scaleZ = 1e-9
layer.scale = 1e-10
layer.scaleX.should.equal 1e-7
layer.scaleY.should.equal 1e-8
layer.scaleZ.should.equal 1e-9
layer.scale.should.equal 1e-10
# layer.style.webkitTransform.should.equal "matrix(1, 0, 0, 1, 100, 0)"
layer.style.webkitTransform.should.equal "translate3d(0px, 0px, 0px) scale3d(0, 0, 0) skew(0deg, 0deg) skewX(0deg) skewY(0deg) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px)"
it "should handle scientific notation in skew", ->
layer = new Layer
layer.skew = 2
layer.skewX = 2
layer.skewY = 3
layer.skew = 1e-5
layer.skewX = 1e-6
layer.skewY = 1e-7
layer.skew.should.equal 1e-5
layer.skewX.should.equal 1e-6
layer.skewY.should.equal 1e-7
# layer.style.webkitTransform.should.equal "matrix(1, 0, 0, 1, 100, 0)"
layer.style.webkitTransform.should.equal "translate3d(0px, 0px, 0px) scale3d(1, 1, 1) skew(0.00001deg, 0.00001deg) skewX(0.000001deg) skewY(0deg) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px)"
it "should set x and y", ->

0 comments on commit 5714727

Please sign in to comment.