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

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

score 0 · Accepted Answer · answered Oct 10 '14 at 22:26

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);

Basically what Talves is saying is: don't add Surfaces to your grid, add Modifiers (each containing a Surface) to your grid. (: — trusktr, Oct 13 '14 at 04:18
You are not limited to just Surfaces in your array of renderables in this case. Another point is this array of renderables will be converted to a ViewSequence. You could also pass a ViewSequence to the `sequenceFrom` function. — talves, Oct 13 '14 at 04:29
Yeah, you can basically add any scene graph tree to the grid. — trusktr, Oct 13 '14 at 05:20

Duduche · Answer 2 · 2014-11-07T18:50:48.910

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);

You can also access the modifier with GridLayout._modifiers[], but it's better to manage the Transitionables directly. — Duduche, Nov 07 '14 at 21:45

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

2 Answers2