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.

score 1 · Accepted Answer · answered May 15 '15 at 16:55

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>

i found a problem after using your code. It doesn't scroll. After a few debugging, i found out that bgMod( the state modifier for the background surface, specifically the transform: Transform.behind line) is causing the problem. I've set the perspective but to no avail. Any ideas why this is happening? — Jibo, May 18 '15 at 03:06
When I run the snippet, it scrolls. It is probably something in the app you are plugging it into. If you have a public repo or example, I can take a look at it if you want. Try removing the `behind` and try `Transform.translate(0,0,0.0001)` instead. — talves, May 18 '15 at 05:11

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

1 Answers1

Explaination of issue:

Note:

Example Snippet: