Special states

Two more states can be found in the layer.states object:

• states.previous – The previous state the layer was in
• states.current – The current state the layer is in

Naturally this also means that you cannot use "current" and "previous" as names for your states.

Printing a state reminds us that states are simply a set of properties:

print redSquare.states.bigAndBlue
» {scale:2, backgroundColor:"blue"}

These special states also just contain properties. Try this:

# print the current state’s details
redSquare.onStateSwitchEnd ->
    print this.states.current

The output will be…

» {name:"bigAndBlue", scale:2, backgroundColor:"blue"}

» {name:"rotated", rotation:45}

… and for the "default" state this will be: all properties.

» {name:"default", width:300, height:300, visible:true, opacity:1, clip:false, scrollHorizontal:false, scrollVertical:false, x:226, y:344, z:0, scaleX:1, scaleY:1, scaleZ:1, scale:1, skewX:0, skewY:0, skew:0, originX:0.5, originY:0.5, originZ:0, perspective:0, perspectiveOriginX:0.5, perspectiveOriginY:0.5, rotationX:0, rotationY:0, rotationZ:0, rotation:0, blur:0, brightness:100, saturate:100, hueRotate:0, contrast:100, invert:0, grayscale:0, sepia:0, shadowX:0, shadowY:0, shadowBlur:0, shadowSpread:0, shadowColor:<Color r:123 g:123 b:123 a:0.5>, backgroundColor:<Color "red">, color:<Color "white">, borderColor:<Color r:123 g:123 b:123 a:0.5>, borderWidth:0, force2d:false, flat:false, backfaceVisible:true, borderRadius:0, html:"", image:"", scrollX:0, scrollY:0, mouseWheelSpeedMultiplier:1, velocityThreshold:0.1, constrained:false}

As you can see, one of the properties is name. So to the name of the current state can be found in states.current.name.

# show the current state’s name
redSquare.onStateSwitchEnd ->
    label.html = "current state: " + this.states.current.name