bindings to size and origin in fa-modifier and fa-surface about famous-angular HOT 5 CLOSED

fa-size and fa-origin should both work on fa-modifier. Only fa-size is supported on a Surface—I don't believe origin is a supported option on a Famo.us Surface, see documentation:

famous/core/Surface.js

 /**
     * A base class for viewable content and event
     *   targets inside a Famo.us application, containing a renderable document
     *   fragment. Like an HTML div, it can accept internal markup,
     *   properties, classes, and handle events.
     *
     * @class Surface
     * @constructor
     *
     * @param {Object} [options] default option overrides
     * @param {Array.Number} [options.size] [width, height] in pixels
     * @param {Array.string} [options.classes] CSS classes to set on inner content
     * @param {Array} [options.properties] string dictionary of HTML attributes to set on target div
     * @param {string} [options.content] inner (HTML) content of surface
     */

fa-size on a fa-modifier might not do quite what you expect — I've found that fa-scale tends to be more useful. I usually add fa-size to surfaces/views only, then deal with scaling on modifiers with fa-scale.

One more thing, if you run into other issues with fa-modifier (there're a couple known issues, like not being able to specify the order of matrix-multiplied transforms) two catch-all options are to 1. nest subsequent fa-modifiers with one transform per modifier, or 2. create a custom Famo.us Transform object in your controller, then pass it to fa-modifier using the fa-transform attribute.

from famous-angular.

The issue is with getting it to respond to changes. For example this snippet from the home page, extended with origin and size:

<input type="range" ng-model="translateX">

<fa-modifier fa-translate="[translateX, 0]" fa-origin="[translateX,40]>
  <fa-surface fa-size="[translateX, 40]" class="square">
  </fa-surface>
</fa-modifier>

doesn't work as I expect.

from famous-angular.

Ah, I see—you are right, this is not yet implemented (currently it will $eval what you pass in only once, meaning only passing function references is supported if you want dynamic behavior.) Just added a high-priority task to our tracker; we should add the ability to do normal data-binding shortly.

In the meantime, you can pass a function reference (which, incidentally, is the highest-performance way to deal with updates; makes Angular only have to dirty-check the reference to the function, not the value that it's returning.) For example:

controller.js

var _size = [20, 50];
$scope.mySizeFunction(){
    return _size;
}
//mutate _size elsewhere

template.html

<fa-modifier fa-size="mySizeFunction">...</fa-modifier>

One other note: famous Surfaces don't support the same functional approach that Modifiers do in setting attributes—you can only set a Surface's size to an array, not to a function returning an array. We could support data-binding to surfaces' fa-size, but it would not be as performant as passing a function directly to fa-size on a modifier (prefer doing the latter, setting the surface's size to [undefined, undefined] and letting it fill its parent modifier.)

So, due to the fact that you're updating the size over time (and thus contrary to what I wrote two comments ago, sorry for the run-around!) the best approach at the moment would be:

1. Use fa-size on an fa-modifier, and pass it the name of a function sitting on your scope that returns your desired size
2. Add a fa-surface with fa-size="[undefined, undefined]" (same as omitting fa-size) to fill the modifier.

Thank you for your persistence in reporting this. Does this approach work for you?

from famous-angular.

Thanks, this way it works. Good to know about the performance benefits, thanks for the thorough answers 👍

from famous-angular.

With 0.0.12 (latest version, just released,) you can now pass normal expressions to a fa-modifier's fa-size (like fa-size="[sizeX(), sizeY()]"), and same for fa-origin. You can also still use the functional approach fa-size="myFunc" and you can pass in a Transitionable fa-size="myTransitionable".)

Further, there's no longer a performance difference between any of these methods (we're using Angular's $parse to handle this more efficiently now instead of running a bunch of scope.$evals on every frame.)

from famous-angular.