Allow non animatable properties in states

Like scroll, backgroundColor etc. Transition will be instant.
koenbok · Dec 12, 2014 · 3f9411ec36d7e80d2416a173f9c8f044223e459a · 3f9411e
1 parent 6cc6def
commit 3f9411ec36d7e80d2416a173f9c8f044223e459a
Unified Split

Showing with 94 additions and 16 deletions.

+10 −12 extras/CactusFramer/static/app.coffee

+1 −0 framer/Layer.coffee

+22 −4 framer/LayerStates.coffee

+53 −0 test/tests/LayerStatesTest.coffee

+8 −0 test/tests/LayerTest.coffee
diff --git a/extras/CactusFramer/static/app.coffee b/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}
diff --git a/framer/Layer.coffee b/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

diff --git a/framer/LayerStates.coffee b/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

diff --git a/test/tests/LayerStatesTest.coffee b/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}
+
+			
diff --git a/test/tests/LayerTest.coffee b/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