app/src/views/reflowableScrollview.js
/**
     * Intercepts the array of renderables that gets passed in by the user and 
     * creates a new ViewSequence to pass to Scrollview's sequenceFrom method.
     * New viewSequence nodes are composed of new views with positions based on 
     * whether a user decides to include gutters or not.
     * Associated transitionableTransforms are also reset and set to animate to new positions.
     * @private
     * @param {Context} context commit context
     */
Intercepts the array of renderables that gets passed in by the user and
creates a new ViewSequence to pass to Scrollview's sequenceFrom method.
New viewSequence nodes are composed of new views with positions based on
whether a user decides to include gutters or not.
Associated transitionableTransforms are also reset and set to animate to new positions.
@private
@param {Context} context commit context
Intercepts the array of renderables that gets passed in by the user and creates a new ViewSequence to pass to Scrollview ' s sequenceFrom method . New viewSequence nodes are composed of new views with positions based on whether a user decides to include gutters or not . Associated transitionableTransforms are also reset and set to animate to new positions . @private @param { Context } context commit context
function _createNewViewSequence(context) {
        this._originalArray = this._originalArray || this._node._.array;
        var direction = this.options.direction;
        var offsetDirection = (direction === 0 ? 1 : 0);
        var contextSize = context.size;
        var result = [];
        var currentView = new View();
        var accumulate = {};
        accumulate.accumulatedSize = 0;
        accumulate.rowNumber = 0;
        accumulate.rowNumberCounter = 1;
        var maxSequenceItemSize = 0;
        var numSequenceItems = 0;
        var gutterInfo = _calculateGutterInfo.call(null, this._originalArray, direction, contextSize);
        var accumulatedSizeWithGutter;
        var sequenceItem;
        var currentSequenceItemSize;
        var currentSequenceItemMaxSize;
        var translationObject = [];
        var xyCoordinates = [];
        for (var j = 0; j < this._originalArray.length; j += 1) {
            sequenceItem = this._originalArray[j];
            currentSequenceItemSize = sequenceItem.getSize()[offsetDirection];
            currentSequenceItemMaxSize = sequenceItem.getSize()[direction];
            if (accumulate.accumulatedSize + currentSequenceItemSize <= contextSize[offsetDirection]) {
                if (currentSequenceItemMaxSize > maxSequenceItemSize) {
                    maxSequenceItemSize = currentSequenceItemMaxSize;
                }
                accumulatedSizeWithGutter = _gutter.call(this, accumulate, gutterInfo);
                xyCoordinates.push([accumulatedSizeWithGutter]);
                _addToView.call(this, currentView, accumulatedSizeWithGutter, sequenceItem, j);
                accumulate.accumulatedSize += currentSequenceItemSize;
            } else {
                currentView.setOptions({ size: direction === 1 ? [undefined, maxSequenceItemSize] : [maxSequenceItemSize, undefined] });
                result.push(currentView);
                _createXYCoordinates.call(this, xyCoordinates, maxSequenceItemSize, accumulate.rowNumber, translationObject);
                accumulate.rowNumber += 1;
                accumulate.rowNumberCounter = 1;
                accumulate.accumulatedSize = 0;
                maxSequenceItemSize = 0;
                currentView = new View();
                xyCoordinates = [];
                currentSequenceItemMaxSize = sequenceItem.getSize()[direction];
                if (currentSequenceItemMaxSize > maxSequenceItemSize) {
                    maxSequenceItemSize = currentSequenceItemMaxSize;
                }
                xyCoordinates.push([accumulate.accumulatedSize]);
                _addToView.call(this, currentView, accumulate.accumulatedSize, sequenceItem, j);
                accumulate.accumulatedSize += currentSequenceItemSize;
            }
            if (j === this._originalArray.length - 1) {
                currentView.setOptions({ size: direction === 1 ? [undefined, maxSequenceItemSize] : [maxSequenceItemSize, undefined] });
                result.push(currentView);
                _createXYCoordinates.call(this, xyCoordinates, maxSequenceItemSize, accumulate.rowNumber, translationObject);
            }
        }
        this._currentTranslationObject = translationObject;
        setTransitionables.call(this, this._currentTranslationObject, this._previousTranslationObject, this._transitionableArray);
        this.sequenceFrom.call(this, result);
        this._timer = true;
    }
function _createNewViewSequence ( context ) { this . _originalArray = this . _originalArray || this . _node . _ . array ; var direction = this . options . direction ; var offsetDirection = ( direction === 0 ? 1 : 0 ) ; var contextSize = context . size ; var result = [ ] ; var currentView = new View ( ) ; var accumulate = { } ; accumulate . accumulatedSize = 0 ; accumulate . rowNumber = 0 ; accumulate . rowNumberCounter = 1 ; var maxSequenceItemSize = 0 ; var numSequenceItems = 0 ; var gutterInfo = _calculateGutterInfo . call ( null , this . _originalArray , direction , contextSize ) ; var accumulatedSizeWithGutter ; var sequenceItem ; var currentSequenceItemSize ; var currentSequenceItemMaxSize ; var translationObject = [ ] ; var xyCoordinates = [ ] ; for ( var j = 0 ; j < this . _originalArray . length ; j += 1 ) { sequenceItem = this . _originalArray [ j ] ; currentSequenceItemSize = sequenceItem . getSize ( ) [ offsetDirection ] ; currentSequenceItemMaxSize = sequenceItem . getSize ( ) [ direction ] ; if ( accumulate . accumulatedSize + currentSequenceItemSize <= contextSize [ offsetDirection ] ) { if ( currentSequenceItemMaxSize > maxSequenceItemSize ) { maxSequenceItemSize = currentSequenceItemMaxSize ; } accumulatedSizeWithGutter = _gutter . call ( this , accumulate , gutterInfo ) ; xyCoordinates . push ( [ accumulatedSizeWithGutter ] ) ; _addToView . call ( this , currentView , accumulatedSizeWithGutter , sequenceItem , j ) ; accumulate . accumulatedSize += currentSequenceItemSize ; } else { currentView . setOptions ( { size : direction === 1 ? [ undefined , maxSequenceItemSize ] : [ maxSequenceItemSize , undefined ] } ) ; result . push ( currentView ) ; _createXYCoordinates . call ( this , xyCoordinates , maxSequenceItemSize , accumulate . rowNumber , translationObject ) ; accumulate . rowNumber += 1 ; accumulate . rowNumberCounter = 1 ; accumulate . accumulatedSize = 0 ; maxSequenceItemSize = 0 ; currentView = new View ( ) ; xyCoordinates = [ ] ; currentSequenceItemMaxSize = sequenceItem . getSize ( ) [ direction ] ; if ( currentSequenceItemMaxSize > maxSequenceItemSize ) { maxSequenceItemSize = currentSequenceItemMaxSize ; } xyCoordinates . push ( [ accumulate . accumulatedSize ] ) ; _addToView . call ( this , currentView , accumulate . accumulatedSize , sequenceItem , j ) ; accumulate . accumulatedSize += currentSequenceItemSize ; } if ( j === this . _originalArray . length - 1 ) { currentView . setOptions ( { size : direction === 1 ? [ undefined , maxSequenceItemSize ] : [ maxSequenceItemSize , undefined ] } ) ; result . push ( currentView ) ; _createXYCoordinates . call ( this , xyCoordinates , maxSequenceItemSize , accumulate . rowNumber , translationObject ) ; } } this . _currentTranslationObject = translationObject ; setTransitionables . call ( this , this . _currentTranslationObject , this . _previousTranslationObject , this . _transitionableArray ) ; this . sequenceFrom . call ( this , result ) ; this . _timer = true ; }
Intercepts the array of renderables that gets passed in by the user and
 creates a new ViewSequence to pass to Scrollview's sequenceFrom method.
Intercepts the array of renderables that gets passed in by the user and creates a new ViewSequence to pass to Scrollview ' s sequenceFrom method .
// 'this' will be an instance of reflowableScrollview // helper object for calculating offset for each new view  // Check if sum of item sizes is larger than context size // find max view size // first sequenceItem will be on the left / top most edge // collect xyCoordinates of each item // create new views within reflowable where each view corresponds to a row or column // at this point, no more renderables can be added to the currentView without overflowing // add max view size to each xyCoordinates subarray // reset configurations for each new view in the viewSequence // the current sequenceItem is part of the next view: // for the last view in the viewSequence, there may be less items than the other views // transitionableTransform animations are reset, and animated to new positions relative to their previous positions