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

Feature/scientific notation

framer/LayerStyle.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(" ")
 

test/tests/LayerTest.coffee

@@ -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", ->