famo.us animate state of Surfaces in a GridLayout with a StateModifier - famo.us

Question

How can I attach a StateModifier to a Surface that resides in a GridLayout?
My Code looks something like this:
//...
var grid = new Gridlayout({dimensions: [2,1]});
var surfaces = [];
grid.sequenceFrom(surfaces);
var surface01 = new Surface({content: 'Surface 01'});
var surface02 = new Surface({content: 'Surface 02'});
surfaces.push(surface01,surface02);
this._node.add(grid);
//...
Since the surfaces are not added to the render tree explicitly like:
this._node.add(modifier).add(surface)
I don't know how I can attach Modifiers to the surfaces?! Am I missing something? Any help is much appreciated

Answer 1

You will need to add a view as your sequence from items. The example code below uses a RenderNode as the view item and adds the StateModifier and Surface
Example jsBin Code [v0.3.0 of Famo.us]
var mainContext = Engine.createContext();
var surfaces = [];
var grid = new GridLayout({
dimensions: [2, 1]
});
var counter = 0;
_getView = function(name) {
var rnode = new RenderNode();
var state = new StateModifier({
size: [undefined, 500]
});
var surface = new Surface({
content:name,
properties: {
backgroundColor: "hsl(" + (counter * 360 / 8) + ", 100%, 50%)",
lineHeight: '500px',
textAlign: 'center',
cursor: 'pointer'
}
});
rnode.add(state).add(surface);
counter += 1;
return rnode;
};
surfaces.push(_getView('Surface 1'));
surfaces.push(_getView('Surface 2'));
grid.sequenceFrom(surfaces);
mainContext.add(grid);

Answer 2

If I'm not missing anything you want to modify the state of your surface inside the gridLayout, by clicking on one of them??
The gridLayout has an array of state that you can access by typing gridlayout._states['index of your surface']
var mainContext = Engine.createContext();
var surfaces = [];
var GridLayout = new GridLayout({
dimensions: [4,10]
});
for (var i = 0; i<40; i++){
var surface = new Surface({
content: 'surface' + i,
size: [200, 200]
});
surface.index = i;
surfaces.push(surface);
});
GridLayout.sequenceFrom(surfaces);
//now if you want to modify the state of the surface with index 2
GridLayout._states[2].set(Transform.rotateX(Math.PI/2)); // your surface will rotate by 90° on X axis
mainContext.add(GridLayout);