How to center a text in a view/Surface

[ghost]

Hi there,

First of all thank you for this cool integration of famo.us into meteor. I have read that everything is done in the free time of the developers.

I was looking at some topics at SO regarding the above functionality (center text horiz./vert. in Surface/Modifier/View whatever). They are all famo.us only, not with Meteor, famous-views.

So this answer seems right to me: http://stackoverflow.com/questions/23319496/how-can-we-get-the-size-of-a-surface-within-famo-us

But in famous-views I somhow cannot access the above mentioned _currTarget Object:

Template.hello.rendered = function() {
  var fview = FView.byId('test');
  console.log("wef: " + fview._currTarget.offsetWidth + fview._currTarget.offsetHeight);
}

HTML-file:

...
    {{#StateModifier size="[400,200]"}}
        {{#Surface class="red-bg"}} {{/Surface}}
        {{#Surface id="test" size="[true,true]" align="[0.5,0.5]"}}
            Sample text
        {{/Surface}}
    {{/StateModifier}}
...

returns

"Exception from Tracker afterFlush function: fview._currTarget is undefined

So where is the error or should I use different approach for centering a text?

[gadicc]

Hey @der-ede, sorry for the late reply... slowly catching up on my backlog. Hope the new community effort will help with this kind of lag.

You have two questions here:

1. You were very close to center the text, you were just missing origin="[0.5,0.5]" too. So the full line would be{{#Surface id="test" size="[true,true]" origin="[0.5,0.5]" align="[0.5,0.5]"}}`.

   We're working on getting more guides available for famous-views specifically. Part of it is our own version of Famous University. See for example this pad https://fview-lab.meteor.com/pads/KpCGFEtBmACS6YP6b on Position Elements, which may help.

2. Regarding _currTarget... so fview is a meteorFamousView object, not the surface itself. You can get a link to the surface with fview.surface (see e.g. the fview section in the API). It looks like that private property was renamed to, so I guess the full thing would be fview.surface._currentTarget.offsetHeight.

   However, there's really no reason to go to all that effort. fview.getSize() does the job just fine. That's really just a shortcut to call getSize() on fview.node / fview.surface / fview.view etc... you don't really need to know what all these things are I guess. They're mentioned in the API though, and with some famous background it all makes sense.

Good luck!

[gadicc]

Also cross referencing #223 - Center horizontally and vertically using StateModifier.