Do famo.us layouts like SequentialLayout participa

Question

When using a SequentialLayout in trying to apply StateModifiers to Surface objects that had been added to a layout, it looks like some unexpected behavior happens:

• When applying transformations via setTransform on a StateModifier, I expect to see the transformation applied from the origin of the Surface in question.
• Instead, the transform is applied from an origin of 0,0 in relation to the parent SequentialLayout

Given the code below, the above behavior seems to make no logical sense (for context, I am working on a sorting algorithms demo, using famo.us):

/* globals define */
define(function(require, exports, module) {
    'use strict';
    // import dependencies
    var Engine = require('famous/core/Engine');
    var Modifier = require('famous/core/Modifier');
    var Transform = require('famous/core/Transform');
    var Surface = require('famous/core/Surface');
    var StateModifier = require('famous/modifiers/StateModifier');
    var SequentialLayout = require('famous/views/SequentialLayout');

    // create the main context
    var mainContext = Engine.createContext();

    // your app here
    var surfaces = [];

    // Sorter
    var Sort = require('sort');

    var arr = [100,25,20,15,30,-20,-10,10,0];
    var min = Math.min.apply(null, arr);

    var base_dims = [ 50, 50 ];

    arr.forEach(function(el) {
      surfaces.push(new Surface({
        content: el,
        size: base_dims.map(function(d) { return d + (el - min); }),
        properties: {
          backgroundColor: 'rgb(240, 238, 233)',
          textAlign: 'center',
          padding: '5px',
          border: '2px solid rgb(210, 208, 203)',
          marginTop: '50px',
          marginLeft: '50px'
        }
      }));
    });

    var sequentialLayout = new SequentialLayout({
        direction: 0,
        itemSpacing:20
    });
    sequentialLayout.sequenceFrom(surfaces);

    mainContext.add(sequentialLayout);

    var swap_modifiers = [
      new StateModifier({}), new StateModifier({})
    ];

    Sort.bubble_sort_iterative(arr, function(first_swap_index, second_swap_index) {
      swap_modifiers[0].setTransform(
        Transform.translate(300, 0, 0),
        { duration : 750, curve: 'linear' }
      );

      swap_modifiers[1].setTransform(
        Transform.translate(300, 0, 0),
        { duration : 750, curve: 'linear' }
      );

      mainContext.add(swap_modifiers[0]).add(surfaces[first_swap_index]);
      mainContext.add(swap_modifiers[1]).add(surfaces[second_swap_index]);
    });
});

Answer 1

A surface has no origin, a (state-)modifier has an origin. Since you don't provide any origin vaue, the default value is set up, which is [0, 0]. See more: http://famo.us/university/lessons/#/famous-101/positioning/8

Answer 2

Think of your SequentialLayout as a Render Node in your tree. Adding surfaces to SequentialLayout is in essence adding individual nodes to that tree branch. SequentialLayout happens to be adding each item at the same level in the tree.

Sort.bubble_sort_iterative(... changes the location of the surfaces by adding them to the mainContext of your application. This is the same level as the sequentialLayout and makes their origin the same origin as the sequentialLayout. Not what you wanted!

Remember: Adding a modifier to a context will make that context the parent node.

Without knowing the specifics of the above code, we know that we can add a View rather than surfaces to the sequentialLayout and could transition the View's modifiers within each of those items without changing their location in the render tree.

A simple code example of views in the sequential layout:

  arr.forEach(function(el) {
    var surfSize = base_dims.map(function(d) { return d + (el - min); });
    console.log(size);
    var view = new View();
    view.mod = new StateModifier({ size: surfSize });
    view.surface = new Surface({
      content: el,
      size: [undefined, undefined],
      properties: {
        backgroundColor: 'rgb(240, 238, 233)',
        textAlign: 'center',
        padding: '5px',
        border: '2px solid rgb(210, 208, 203)',
        marginTop: '50px',
        marginLeft: '50px'
      }
    });

    view.add(view.mod).add(view.surface);
    surfaces.push(view);
  });

Trying to swap out the views from one to the other will give you some unexpected results. It would be better to just swap out the options and content values.