Is it possible to set Surface sizes based on percentages in Famo.us?

Question

Famo.us Surfaces have a single way to set the size of a surface. They have a "size" property that takes an array of 2 numbers which correspond directly to pixel values. This is not overly useful when dealing with mobile devices given the large number of different screen sizes. This will require the user to do math on the size of the parent container rather than Famo.us doing the math behind the scenes.

If one of the values is not given, it will use 100% available of that dimension, but there is no way that I can see to specify 50% or 33%.

var firstSurface = new Surface({
  size: [100, 400],
  content: 'hello world',
  properties: {
    color: 'white',
    textAlign: 'center',
    backgroundColor: '#FA5C4F',
    width: "200px"
  }
});

The "width" property doesn't do anything whether or not the 0th array element is removed, even though it's claimed that you can use CSS properties in camelCase. I assumed this would be the proper way to use %'s, but it is not.

Answer 1

No, this is not possible. You need to calculate, but this is not hard:

var sizeModifier = new Modifier();
sizeModifier.sizeFrom(function(){
    var size = mainContext.getSize();
    return [0.5 * size[0],0.5 * size[1]];
});

The engine emits a resize event from the main context where you can hook up your modifier.

Using the sizeFrom function, you can dynamically set the size.

You need to use a Modifier because setting the size on a Surface does not affect the DOM, only the size used for internal calculations. (This can be used for spacing, see the layout guide)

Assuming you want a percentage of the viewport, I used the mainContext, which is [100%,100%]. Of course, you can call getSize on any parent surface.