Optimize the way we build the css for matrix transforms so it can cho…

…ose accelerated rendering paths, and fixes bugs like overflow with round corners.

framer/LayerStyle.coffee

@@ -68,34 +68,54 @@ exports.LayerStyle =

		return css.join(" ")

		# This is how I used to do it before, and it works well in Safari
		
		# "
		# blur(#{filterFormat layer.blur, "px"}) 
		# brightness(#{filterFormat layer.brightness, "%"}) 
		# saturate(#{filterFormat layer.saturate, "%"}) 
		# hue-rotate(#{filterFormat layer.hueRotate, "deg"}) 
		# contrast(#{filterFormat layer.contrast, "%"}) 
		# invert(#{filterFormat layer.invert, "%"}) 
		# grayscale(#{filterFormat layer.grayscale, "%"}) 
		# sepia(#{filterFormat layer.sepia, "%"})
		# "

	webkitTransform: (layer) ->
		# TODO: On Chrome it seems that adding any other transform property
		# together with a blur, it breaks the blur and performance. I'll just
		# wait for the Chrome guys to fix this I guess.
		"
		translate3d(#{layer.x}px,#{layer.y}px,#{layer.z}px) 
		scale(#{layer.scale})
		scale3d(#{layer.scaleX},#{layer.scaleY},#{layer.scaleZ})
		skew(#{layer.skew}deg,#{layer.skew}deg) 
		skewX(#{layer.skewX}deg)  
		skewY(#{layer.skewY}deg) 
		rotateX(#{layer.rotationX}deg) 
		rotateY(#{layer.rotationY}deg) 
		rotateZ(#{layer.rotationZ}deg) 
		"

		css = []

		if layer.z != 0
			css.push "translate3d(#{layer.x}px,#{layer.y}px,#{layer.z}px)"
		else
			css.push "translate(#{layer.x}px,#{layer.y}px)"

		if layer.scale != 1
			css.push "scale(#{layer.scale})"

		if layer.scaleX != 1 or layer.scaleY != 1 or layer.scaleZ != 1
			css.push "scale3d(#{layer.scaleX},#{layer.scaleY},#{layer.scaleZ})"

		if layer.skew
			css.push "skew(#{layer.skew}deg,#{layer.skew}deg)"

		if layer.skewX
			css.push "skewX(#{layer.skewX}deg)"

		if layer.skewY
			css.push "skewY(#{layer.skewY}deg)"

		if layer.rotationX
			css.push "rotateX(#{layer.rotationX}deg)"

		if layer.rotationY
			css.push "rotateY(#{layer.rotationY}deg)"

		if layer.rotationZ
			css.push "rotateZ(#{layer.rotationZ}deg)"


		return css.join(" ")

		# "
		# translate3d(#{layer.x}px,#{layer.y}px,#{layer.z}px) 
		# scale(#{layer.scale})
		# scale3d(#{layer.scaleX},#{layer.scaleY},#{layer.scaleZ})
		# skew(#{layer.skew}deg,#{layer.skew}deg) 
		# skewX(#{layer.skewX}deg)  
		# skewY(#{layer.skewY}deg) 
		# rotateX(#{layer.rotationX}deg) 
		# rotateY(#{layer.rotationY}deg) 
		# rotateZ(#{layer.rotationZ}deg) 
		# "

	webkitTransformOrigin: (layer) ->
		"#{layer.originX * 100}% #{layer.originY * 100}%"

test/tests/LayerTest.coffee

@@ -84,7 +84,7 @@ describe "Layer", ->
			layer.y.should.equal 50
			
			# layer.style.webkitTransform.should.equal "matrix(1, 0, 0, 1, 100, 0)"
			layer.style.webkitTransform.should.equal "translate3d(100px, 50px, 0px) scale(1) scale3d(1, 1, 1) skew(0deg, 0deg) skewX(0deg) skewY(0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg)"
			layer.style.webkitTransform.should.equal "translate(100px, 50px)"
			
		it "should set scale", ->
			
@@ -95,7 +95,7 @@ describe "Layer", ->
			layer.scaleZ = 100

			# layer.style.webkitTransform.should.equal "matrix(1, 0, 0, 1, 100, 50)"
			layer.style.webkitTransform.should.equal "translate3d(0px, 0px, 0px) scale(1) scale3d(100, 100, 100) skew(0deg, 0deg) skewX(0deg) skewY(0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg)"
			layer.style.webkitTransform.should.equal "translate(0px, 0px) scale3d(100, 100, 100)"

		it "should set origin", ->