Altura da visualização de rolagem Famo.us

Question

Estou tentando adicionar uma imagem abaixo de um scrollview usando o famoso sequentialLayout e estou tendo um problema com a altura do scrollview.

É assim que eu crio meu scrollview.

var scrollview = new Scrollview({       
    direction: Utility.Direction.X,
    options: {
        size: [300, 300]
    },        
    paginated: true
});

Quando adiciono superfícies ao scrollview com altura de 250, o contêiner DOM pai do scrollview (grupo famoso) que contém essas superfícies tem largura e altura de 0.

Ao adicionar este scrollview dentro de um sequentialLayout como o primeiro item, o segundo item ou superfície com altura é exibido no topo deste scrollview, pois não tem altura.

Alguma idéia de como consertar isso usando Famo.us?

Answer 1

Você não pode definir o tamanho assim - use um modificador para isso.

Esta será a árvore de renderização

MainContext
   SequentialLayout
      Modifier(size)
          ScrollView
      Modifier(size)
          Image

Fragmento de código:

// Create components
var scrollview = new ScrollView();
var image = new ImageSurface({
    content: 'content/images/famous_symbol_transparent.png'
});

// Create Size Modifiers
var scrollModifier = new StateModifier({ size: [200,200]});
var imageModifier = new StateModifier({ size: [200,200]});

// Wrap the Modifier in a RenderNode, so we can add the surface
// (you can't add surfaces directly to a modifier)
var scrollNode = new RenderNode(scrollModifier)
scrollNode.add(scrollview);

var imageNode = new RenderNode(imageModifier);
imageNode.add(image);

// Create a SequentialLayout
var sequence = new SequentialLayout();
sequence.sequenceFrom([scrollNode,imageNode]);

E aqui está um exemplo de essência (copie e cole o main.js depois de executar o yo famous gerador)