Allow non animatable properties in states

Like scroll, backgroundColor etc. Transition will be instant.

extras/CactusFramer/static/app.coffee

@@ -1,15 +1,13 @@
-Framer.Device = new Framer.DeviceView()
-Framer.Device.setupContext()
+layer = new Layer
+layer.states.add
+	stateA: {backgroundColor:"red", x:500}
 
-Framer.Device.deviceType = "desktop-browser-1440"
+# layer.scroll.should.equal false
+# layer.x.should.equal 0
 
-f = false
-l = new Layer
+layer.states.on Events.StateDidSwitch, ->
+	print "done", layer.backgroundColor
 
-l.on Events.Click, ->
-	if f is true
-		Framer.Device.deviceType = "desktop-browser-1440"
-		f = false
-	else
-		Framer.Device.deviceType = "fullscreen"
-		f = true
+
+
+layer.states.switch "stateA", {curve:"ease-in-out", time:1}

framer/Layer.coffee

@@ -121,6 +121,7 @@ class exports.Layer extends BaseClass
 		layer.ignoreEvents = false if value is true
 
 	@define "scroll",
+		exportable: true
 		get: -> @scrollHorizontal is true or @scrollVertical is true
 		set: (value) -> @scrollHorizontal = @scrollVertical = value
 

framer/LayerStates.coffee

@@ -63,12 +63,12 @@ class exports.LayerStates extends BaseClass
 		# if stateName is @_currentState
 		# 	return
 
-		if not @_states.hasOwnProperty stateName
+		if not @_states.hasOwnProperty(stateName)
 			throw Error "No such state: '#{stateName}'"
 
-		@emit Events.StateWillSwitch, @_currentState, stateName, @
+		@emit(Events.StateWillSwitch, @_currentState, stateName, @)
 
-		@_previousStates.push @_currentState
+		@_previousStates.push(@_currentState)
 		@_currentState = stateName
 
 		properties = {}
@@ -89,6 +89,16 @@ class exports.LayerStates extends BaseClass
 			# Set the new value 
 			properties[propertyName] = value
 
+		# If we are only transitioning to non-animatable (numeric) properties
+		# we fallback to an instant switch
+		animatablePropertyKeys = []
+
+		for k, v of properties
+			animatablePropertyKeys.push(k) if _.isNumber(v)
+
+		if animatablePropertyKeys.length == 0
+			instant = true
+
 		if instant is true
 			# We want to switch immediately without animation
 			@layer.properties = properties
@@ -102,9 +112,15 @@ class exports.LayerStates extends BaseClass
 			@_animation?.stop()
 			@_animation = @layer.animate animationOptions
 			@_animation.on "stop", => 
+
+				# Set all the values for keys that we couldn't animate
+				for k, v of properties
+					@layer[k] = v if not _.isNumber(v)
+
 				@emit Events.StateDidSwitch, _.last(@_previousStates), stateName, @
 
 
+
 	switchInstant: (stateName) ->
 		@switch stateName, null, true
 
@@ -117,11 +133,13 @@ class exports.LayerStates extends BaseClass
 
 	animatingKeys: ->
 
+		# Get a list of all the propeties controlled by states
+
 		keys = []
 
 		for stateName, state of @_states
 			continue if stateName is "default"
-			keys = _.union keys, _.keys state
+			keys = _.union(keys, _.keys(state))
 
 		keys
 

test/tests/LayerStatesTest.coffee

@@ -69,3 +69,56 @@ describe "LayerStates", ->
 			layer.states.switchInstant "stateB"
 			layer.states.current.should.equal "stateB"
 			layer.y.should.equal 123
+
+
+	describe "Properties", ->
+
+		it "should set scroll property", ->
+
+			layer = new Layer
+			layer.states.add
+				stateA: {scroll:true}
+				stateB: {scroll:false}
+
+			layer.states.switchInstant "stateA"
+			layer.scroll.should.equal true
+
+			layer.states.switchInstant "stateB"
+			layer.scroll.should.equal false
+
+			layer.states.switchInstant "stateA"
+			layer.scroll.should.equal true
+
+		it "should set non numeric properties with animation", (done) ->
+
+			layer = new Layer
+			layer.states.add
+				stateA: {scroll:true, backgroundColor:"red"}
+
+			layer.scroll.should.equal false
+
+			layer.states.on Events.StateDidSwitch, ->
+				layer.scroll.should.equal true
+				layer.backgroundColor.should.equal "red"
+				done()
+
+			layer.states.switch "stateA"
+
+		it "should set non and numeric properties with animation", (done) ->
+
+			layer = new Layer
+			layer.states.add
+				stateA: {x:200, backgroundColor:"red"}
+
+			# layer.scroll.should.equal false
+			layer.x.should.equal 0
+
+			layer.states.on Events.StateDidSwitch, ->
+				# layer.scroll.should.equal true
+				layer.x.should.equal 200
+				layer.backgroundColor.should.equal = "red"
+				done()
+
+			layer.states.switch "stateA", {curve:"linear", time:0.1}
+
+

test/tests/LayerTest.coffee

@@ -228,6 +228,14 @@ describe "Layer", ->
 			layer.scroll.should.equal false
 			layer.style["overflow"].should.equal "hidden"
 
+		it "should set scroll from properties", ->
+
+			layer = new Layer
+			layer.properties = {scroll:false}
+			layer.scroll.should.equal false
+			layer.properties = {scroll:true}
+			layer.scroll.should.equal true
+
 		it "should set scrollHorizontal", ->
 
 			layer = new Layer