Center horizontally and vertically using StateModifier

[ddresch]

This is more a question and probably a really simple one, but I'm not able to fix it.

template.html

    {{#StateModifier align="[0.5,0.5]" origin="[0,0]"}}
      {{#ContainerSurface size="[true,true]"}}
        {{#each cards}}
          {{>ContainerSurface template="flipper" size=cardDim 
              translate=cardPos 
              class="card" 
              align="[0,0]"
              origin="[0,0]"}}
        {{/each}}
      {{/ContainerSurface}}
    {{/StateModifier}}

fview-lab Demo

https://fview-lab.meteor.com/pads/747AwsdA8CCeG3Wsm

So how is it possible to center the whole grid within mainCtx?

BTW @gadicc thanks a lot for setting up this fview-lab playground it's really a nice way to test out small pieces before adding to the real app, especially for mobile only development a charm.

[gadicc]

Hey @ddresch, sorry for the late reply.

Your lab pad is super cool! I think you're the first person to use it (it's not really public yet but as you saw it's mostly working). And a very cool and smooth example. Mostly :)

Ok so what's going on is that you haven't given the StateModifier any size. It's not like HTML where it will expand to fit it's contents. You can imagine it's children have a "position: absolute" and are taken out of the flow (well, not imagine... that really is what's happening). So it's size in this case is actually [0,0]. So it's aligning to middle, but it's origin is essentially the top left corner because it has no size. The easy fix is just to give it a size, e.g. [315,315] for a 2x2 grid with your itemSize and gutter. Of couse, you're doing more than 4 items, so it's not really clear how it should be center.

Kudos on laying out all the positioning on your own! That's something most people don't get that intuitively. However, there are a lot of prebuilt views which already do this kind of thing very well. My favourite is famous-flex. So here's a pad with your example re-imagined using it. The code could be shorter with all the sizes in the markup, but I tried to adapt it to use your initial values to make it super clear. I hope I succeeded :)

https://fview-lab.meteor.com/pads/N2ejsBxYpS6aPAi3h