Add shadow animating

framer/Layer.coffee

@@ -26,7 +26,7 @@ layerProperty = (name, cssProperty, fallback, validator, set) ->
 		# if not validator
 		# 	console.log "Missing validator for Layer.#{name}", validator
 
-		if validator(value) is false
+		if validator?(value) is false
 			throw Error "value '#{value}' of type #{typeof value} is not valid for a Layer.#{name} property"
 
 		@_setPropertyValue name, value
@@ -150,9 +150,19 @@ class exports.Layer extends BaseClass
 	@define "grayscale", layerProperty "grayscale", "webkitFilter", 0, _.isNumber
 	@define "sepia", layerProperty "sepia", "webkitFilter", 0, _.isNumber
 
+	# Shadow properties
+	@define "shadowX", layerProperty "shadowX", "boxShadow", 0, _.isNumber
+	@define "shadowY", layerProperty "shadowY", "boxShadow", 0, _.isNumber
+	@define "shadowBlur", layerProperty "shadowBlur", "boxShadow", 0, _.isNumber
+	@define "shadowSpread", layerProperty "shadowSpread", "boxShadow", 0, _.isNumber
+	@define "shadowColor", layerProperty "shadowColor", "boxShadow", ""
+
 	# Mapped style properties
 
 	@define "backgroundColor", layerStyleProperty "backgroundColor"
+	@define "color", layerStyleProperty "color"
+
+	# Border properties
 	@define "borderRadius", layerStyleProperty "borderRadius"
 	@define "borderColor", layerStyleProperty "borderColor"
 	@define "borderWidth", layerStyleProperty "borderWidth"

framer/LayerStyle.coffee

@@ -106,8 +106,15 @@ exports.LayerStyle =
 	pointerEvents: (layer) ->
 		if layer.ignoreEvents
 			return "none"
-		"auto"
+		else
+			return "auto"
+
+	boxShadow: (layer) ->
 
+		if not layer.shadowColor
+			return ""
+
+		return "#{layer.shadowX}px #{layer.shadowY}px #{layer.shadowBlur}px #{layer.shadowSpread}px #{layer.shadowColor}"
 
 	# css: ->
 	# 	css = {}

test/tests/LayerTest.coffee

@@ -252,6 +252,39 @@ describe "Layer", ->
 			layer.contrast.should.equal 50
 			layer.style.webkitFilter.should.equal "blur(10px) contrast(50%)"
 
+	describe "Shadow Properties", ->
+
+		it "should set nothing on defaults", ->
+
+			layer = new Layer
+			layer.style.boxShadow.should.equal ""
+
+		it "should set the shadow", ->
+
+			layer = new Layer
+
+			layer.shadowX = 10
+			layer.shadowY = 10
+			layer.shadowBlur = 10
+			layer.shadowSpread = 10
+
+			layer.shadowX.should.equal 10
+			layer.shadowY.should.equal 10
+			layer.shadowBlur.should.equal 10
+			layer.shadowSpread.should.equal 10
+
+			layer.style.boxShadow.should.equal ""
+
+			# Only after we set a color a shadow should be drawn
+			layer.shadowColor = "red"
+			layer.shadowColor.should.equal "red"
+
+			layer.style.boxShadow.should.equal "red 10px 10px 10px 10px"
+
+			# Only after we set a color a shadow should be drawn
+			layer.shadowColor = null
+			layer.style.boxShadow.should.equal ""
+
 	describe "Events", ->
 
 		it "should set pointer events", ->