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