Setting size: Modifier vs Surface

Question

What is the difference between setting size on a modifier vs setting the size on the surface itself?

It is my understanding that an individual surface is laid out based on the composition of modifiers it has been added to. Do the (state)modifiers only relate to position and not size?

Why doesn't the following code restrict the size of the surface to 50x50 instead of rendering the 100x100 square? (When is it appropriate to set the size on a Modifier?)

var stateModifier = new StateModifier({
  size: [50, 50],
  transform: Transform.translate(50, 100, 0)
});

var surface = new Surface({
  size: [100, 100],
  properties: {
     backgroundColor: '#FA5C4F'
  }
});

mainContext.add(stateModifier).add(surface);

Thanks,

JD

http://famo.us/university/lessons/#/famous-101/positioning/2

score 1 · Accepted Answer · answered Sep 15 '14 at 08:53

Simply put, the surface gets an attitude when you set a size and it will tell a modifier to kiss its ass. The only way to make a surface respect a modifier is by setting the size to [undefined, undefined] (or just undefined), as it will then use the modifier's size.

Essentially, the engine gets the size the modifier provides and sets it as the current size for following components to be rendered with. However, your surface defines a new size, and thus the engine is going to use that size, but only for that surface.

TLDR: to restrict, don't give the surface a size

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');

var mainContext = Engine.createContext();

var stateModifier = new StateModifier({
  size: [100, 100],
  transform: Transform.translate(150, 100, 0)
});

var surface = new Surface({
  properties: {
    backgroundColor: '#FA5C4F'
  }
});

mainContext.add(stateModifier).add(surface);

This would output the exact same in this case, but if you give the modifier any more children, they will also be affected by the size.

Setting size: Modifier vs Surface

1 Answers1