Famo.us View can't contain imagesurface on top of a surface inside a scrollview

Question

define(function(require, exports, module){
var View            = require('src/core/View');
var Surface         = require('src/core/Surface');
var ImageSurface    = require('src/surfaces/ImageSurface');
var EventHandler    = require('src/core/EventHandler');
var StateModifier   = require('src/modifiers/StateModifier');
var RenderNode      = require('src/core/RenderNode');
var Transform       = require('src/core/Transform')

function DetailedList(){
    View.apply(this, arguments);

    _createStrips.call(this);
    _createImage.call(this);
}

DetailedList.prototype = Object.create(View.prototype);
DetailedList.prototype.constructor = DetailedList;
DetailedList.DEFAULT_OPTIONS = {
    height: 80,
    width: undefined,
    image: '',
    content: ''
} 

function _createStrips(){
    var backgroundSurface = new Surface({
        size: [this.options.width, this.options.height],
        properties: {
            backgroundColor: '#fff',
            padding: '10px 15px',
            borderBottom: '1px solid rgba(0,0,0,0.1)',
            marginBottom: '5px'
        },
        content: this.options.content
    });
    var bgMod = new StateModifier({
        transform: Transform.behind
    })
    backgroundSurface.pipe(this._eventOutput);

    var node = new RenderNode(bgMod);
    node.add(backgroundSurface);
    this.add(node);

}

function _createImage(){
    var previewImage = new ImageSurface({
        size: [50, 50],
        content: this.options.image
    });

    var previewMod = new StateModifier({
        origin: [0.5, 0.5],
        align : [0, 0.5]
    });

    previewImage.pipe(this._eventOutput);

    var node = new RenderNode(previewMod);
    node.add(previewImage);
    this.add(node);
}


module.exports = DetailedList;});

This returns a view with a background surface and an image on top of it. I am using this as an item in a list. Without the image surface, it would scroll fine. But when I add the image, only the first item appears. Also, the image is outside the view.

Answer 1

Explaination of issue:

The DetailedList View has no constraints in size and is being sized to the context of the Scrollview . Adding a rootNode to the view and setting it's size will constrain the items to that node's size.

define('DetailedList', function(require, exports, module) {
  var View = require('famous/core/View');
  var Surface = require('famous/core/Surface');
  var ImageSurface = require('famous/surfaces/ImageSurface');
  var EventHandler = require('famous/core/EventHandler');
  var StateModifier = require('famous/modifiers/StateModifier');
  var Modifier = require('famous/core/Modifier');
  var RenderNode = require('famous/core/RenderNode');
  var Transform = require('famous/core/Transform');

  function DetailedList() {
    View.apply(this, arguments);

    this.rootNode = this.add(new Modifier({
      size: [this.options.width, this.options.height]
    }));

    _createStrips.call(this);
    _createImage.call(this);
  }

  DetailedList.prototype = Object.create(View.prototype);
  DetailedList.prototype.constructor = DetailedList;
  DetailedList.DEFAULT_OPTIONS = {
    height: 80,
    width: undefined,
    image: '',
    content: ''
  };

  function _createStrips() {
    var backgroundSurface = new Surface({
      size: [this.options.width, this.options.height - 1],
      properties: {
        backgroundColor: '#fff',
        padding: '10px 65px',
        borderBottom: '1px solid rgba(0,0,0,0.1)'
      },
      content: this.options.content
    });
    var bgMod = new StateModifier({
      transform: Transform.behind
    });
    backgroundSurface.pipe(this._eventOutput);

    var node = new RenderNode(bgMod);
    node.add(backgroundSurface);
    this.rootNode.add(node);

  }

  function _createImage() {
    var previewImage = new ImageSurface({
      size: [50, 50],
      content: this.options.image
    });

    var previewMod = new StateModifier({
      origin: [0, 0.5],
      align: [0, 0.5]
    });

    previewImage.pipe(this._eventOutput);

    var node = new RenderNode(previewMod);
    node.add(previewImage);
    this.rootNode.add(node);
  }


  module.exports = DetailedList;
});

Note:

Using padding and margin needs to be taken into consideration when using on child nodes. The margin area will not fire an event, so best to reconsider using margin.

Example Snippet:

 define('main', function(require, exports, module) { var Engine = require('famous/core/Engine'); var OptionsManager = require('famous/core/OptionsManager'); var Surface = require('famous/core/Surface'); var Modifier = require('famous/core/Modifier'); var RenderNode = require('famous/core/RenderNode'); var Transform = require('famous/core/Transform'); var ScrollView = require('famous/views/Scrollview'); var DetailedList = require('DetailedList'); var mainContext = Engine.createContext(); mainContext.setPerspective(1000); var dl = new DetailedList({ height: 75, content: 'Famo.us Application', image: 'http://code.famo.us/assets/famous_logo.svg' }); var surfaces = []; var scrollview = new ScrollView(); var counter = 0; _getView = function(i) { var cview = new DetailedList({ height: 75, content: 'Custom View - ' + i, image: 'http://code.famo.us/assets/famous_logo.svg' }); cview.pipe(scrollview); return cview; }; for (var i = 0; i < 20; i++) { var view = _getView(i); surfaces.push(view); } scrollview.sequenceFrom(surfaces); mainContext.add(new Modifier({ align: [0, 0], origin: [0, 0] })).add(scrollview); }); require(['main']); define('DetailedList', function(require, exports, module) { var View = require('famous/core/View'); var Surface = require('famous/core/Surface'); var ImageSurface = require('famous/surfaces/ImageSurface'); var EventHandler = require('famous/core/EventHandler'); var StateModifier = require('famous/modifiers/StateModifier'); var Modifier = require('famous/core/Modifier'); var RenderNode = require('famous/core/RenderNode'); var Transform = require('famous/core/Transform'); function DetailedList() { View.apply(this, arguments); this.rootNode = this.add(new Modifier({ size: [this.options.width, this.options.height] })); _createStrips.call(this); _createImage.call(this); } DetailedList.prototype = Object.create(View.prototype); DetailedList.prototype.constructor = DetailedList; DetailedList.DEFAULT_OPTIONS = { height: 80, width: undefined, image: '', content: '' }; function _createStrips() { var backgroundSurface = new Surface({ size: [this.options.width, this.options.height - 1], properties: { backgroundColor: '#fff', padding: '10px 65px', borderBottom: '1px solid rgba(0,0,0,0.1)' }, content: this.options.content }); var bgMod = new StateModifier({ transform: Transform.behind }); backgroundSurface.pipe(this._eventOutput); var node = new RenderNode(bgMod); node.add(backgroundSurface); this.rootNode.add(node); } function _createImage() { var previewImage = new ImageSurface({ size: [50, 50], content: this.options.image }); var previewMod = new StateModifier({ origin: [0, 0.5], align: [0, 0.5] }); previewImage.pipe(this._eventOutput); var node = new RenderNode(previewMod); node.add(previewImage); this.rootNode.add(node); } module.exports = DetailedList; }); 

 <script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script> <script src="http://code.famo.us/lib/requestAnimationFrame.js"></script> <script src="http://code.famo.us/lib/classList.js"></script> <script src="http://code.famo.us/lib/functionPrototypeBind.js"></script> <link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" /> <script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>