CODEWITHSUNDEEP
famo.usfamous-angular
Geoffrey Lalloué
Geoffrey Lalloué

Reputation: 1464

Make famo.us / Angular scrollview with many elements per line

I have a beehive with many tiles and each tile is positioned by modifier as below :

Hexagon tiles

My code looks like this :

<fa-scroll-view     fa-pipe-from="scrollEventHandler"  fa-options="scrollOptions">
    <fa-view    ng-repeat="tile in tiles">
        <fa-modifier    fa-transform="tile.transform">
              <fa-surface   fa-background-color="tile.color"/>
        </fa-modifier>
    </fa-view>
</fa-scroll-view>

and tile.transform return :

this.transform = function() {
            var currentTilePosition = position.get();
            return Transform.translate(currentTilePosition[0], currentTilePosition[1], currentTilePosition[2]);
        }

Positions are correct when it's returned, but if I take a look in debug window, position are modified.

But if i set size in 'fa-modifier' (necessary to scroll), all my tiles are collapsed :

<fa-modifier    fa-transform="tile.transform"
                fa-size="[80, 75]">

My hexagons appear like this :

enter image description here

It looks like it is not possible to have multiple elements on the same line of scrollview and automatically pass the items to the next line.

Does someone already encountered this problem and solved it?

Upvotes: 1

Views: 186

Answers (1)

Geoffrey Lallou&#233;
Geoffrey Lallou&#233;

Reputation: 1464

Famo.us scroller seems to be not optimized to manage multiple items in column and line. Scroll-view is not able to calculate its size, so scrolling is not possible.

But it's possible to force scroll-view size to indicate how to scroll :

<fa-scroll-view     fa-pipe-from="scrollEventHandler"  fa-options="scrollOptions"
                    fa-size="[windowsWidth, windowsHeight]">
    <fa-view    id="globalView" 
                fa-size="[windowsWidth, globalScreenHeight]">
        <fa-view    ng-repeat="tile in tiles">
            <fa-modifier    fa-transform="tile.transform">
                  <fa-surface   fa-background-color="tile.color"/>
            </fa-modifier>
        </fa-view>
    </fa-view>
</fa-scroll-view>

I set Scroll view size which is screen size.

Then i created a global view which contains all object views. And i set scrollable size to this global view.

This works, but we do scroll-view job...

Upvotes: 1

Related Questions