Read the full documentation here
Copy the .coffee files in the modules
folder of your framer project. Include the focusManager module in your framer project:
{focusManager} = require ‘focusManager’
The focus manager maintains and tracks focus around the screen. The focusmanager
object accepts certain properties. Read the full documentation to know more about each of these properties in detail.
focusManager = new focusManager
leftStickDpad: boolean
controller: "PS4" / "XB1"
defaultOnState: object
defaultOffstate: object
defaultSelectionBorder: boolean
defaultSelectionBorderWidth: integer
defaultSelectionBorderColor: color
A layer is required to be made selectable in order for it to accept focus.
selectableLayer.isSelectable = true
To specify the default focus layer or to manually focus a layer.
focusManager.selectedItem = selectableLayer
The module will automatically try and find the nearest layer to move the focus to whe na button is pressed. You can override this by specifying targets manually
selectableLayer.up = anotherLayer
selectableLayer.down = anotherLayer
selectableLayer.left = anotherLayer
selectableLayer.right = anotherLayer
You can override the properties of the focusManager object for individual selectable layers
selectableLayer.selectionBorder = false
selectableLayer.selectionBorderWidth = 5
selectableLayer.selectionBorderColor = "rgba(255,255,255,0.5)"
selectableLayer.states.on =
scale: 1.1
selectableLayer.states.off =
scale: 1
An event is generated for the currently selected layer when a button is pressed. The event generated for each of the buttons shown in the event map below
These events are generated on the layer everytime a button is pressed
selectableLayer.on "up", ->
print "up button pressed"
selectableLayer.on "cross", ->
print "cross button pressed"
This is a common event generated on the selectable layer for all button presses. The button name is passed as an argument to the event handler
selectableLayer.on "buttonPress", (button) ->
print button, " was pressed on ", this.name
Blur & focus events are generated on a layer wheneber the layer loses or gains focus
selectableLayer.on "focus", ->
print this.name," is selected"
selectableLayer.on "blur", ->
print this.name," is deselected"
This event is generated on the focusManager object everytime the selection changes, the layer name is passed as an argument to the event handler
focusManager.on "change:selection", (layer) ->
print "selection changed to ", layer.name
Every time an event is generated on a selectable layer, it is also propagated to each of its parent layers. This continues all the way until the window.document level. The selected layer is passed as an argument to the event handler
flowComponent.on "circle", (selectedLayer) ->
print "circle event generated on ", selectedLayer.name