Is it possible to chain align and origin modifiers in famo.us?

Question

I'm modifying align and origin values to animate views in and out of the screen. However, I also need to use align and origin to position a surface in one of the views. When this surface sets the align and origin values it seems to not take into account the setting of align and origin set on the parent view. Anyone know how to structure the render tree to have align and origin values take parent view settings into account?

Lets say view has align [1, 0] and origin [0,0] (pushed out of screen to the right) in this view there's a surface with align [0.5, 0.5] and origin [0.5, 0.5] (centered in view). This shows the surface in the center of the screen whilst I would like to have it in the center of the parent view.

Answer 1

You CAN chain modifiers, but remember Modifiers are a one to one relationship with their Render Nodes. You cannot accomplish your objective with using the same Modifier for two different renderables.

In your case you would be building a render tree and chaining your Render Nodes to each other. A root RenderNode (View) can be used to transition your chained Render Nodes off the screen.

Click Here for a working Example

Let's Explain

The root node will be your entry node for the main view.

  var rootView = new View();
  var rootMod = new Modifier({
    size: [undefined, undefined],
    origin: [0, 0],
    align: [1, 0]
  });

Create an off screen View Node and a splash View Node to be chained.

  var offView = new View();
  var offMod = new Modifier({
    size: [undefined, undefined],
    origin: [0, 0],
    align: [0, 0]
  });
  var off = new Surface({
    size: [undefined, undefined],
    properties: {
      backgroundColor: 'rgba(0,0,0,0.25)'
    }
  });

  var splashView = new View();
  var splash = new Surface({
    size: [200, 200],
    properties: {
      backgroundColor: 'rgba(255,0,0,0.25)'
    }
  });
  var splashMod = new Modifier({
    origin: [0.5, 0.5],
    align: [0.5, 0.5]
  });

Now add them to their respective Render Nodes.

• Then add the off screen view node to the root node:

  rootView.add(offView);

• Add the splash View to the off screen View

  offView.add(splashView);

Now you are ready to add Renderables with their Modifiers to each Render Node respectively.

  offView.add(offMod).add(off);
  splashView.add(splashMod).add(splash);

  mainContext.add(rootMod).add(rootView);
  mainContext.add(root);