Molecule
Extends:
Molecules are the basic building blocks of all UI components. Molecules
extend famous/src/core/RenderNode, so they can be
added to any RenderNode of a famo.us render tree, and by default they will
also accept anything that a normal Famo.us RenderNode can accept via the
add method. Classes that extend from Molecule might override
RenderNode.add in order to accept things like arrays of renderables in
stead of a single renderable.
Molecules encapsulate the basic things you need for a component -- a famous/src/transitions/TransitionableTransform for positioning things in space, and a famous/src/core/EventHandler for capturing user interaction -- exposing a unified API for working with these things. For now, famous/src/core/Modifier is used as the interface for applying transforms and sizing, but this will change in Mixed Mode Famo.us.
All components extend Molecule, but at the same time they can also use any number of Molecules internally to do nice things like create layouts and position multiple things in space.
Constructor Summary
| Public Constructor | ||
| public |
constructor(initialOptions: Object) Creates a new Note: Mixed Mode Famo.us does away with Modifiers, so this API will change slightly, but the change will be in such a way that APIs of higher level classes won't change because of this. |
|
Member Summary
| Public Members | ||
| public |
modifier: * |
|
| public set |
|
|
| public get |
options: * |
|
| public set |
|
|
| public get |
transform: * |
|
| Private Members | ||
| private |
_: {"options": *, "defaultOptions": *} |
|
Method Summary
| Public Methods | ||
| public |
off(): * Unregister an event handler for the specified event. |
|
| public |
on(): * Register an event handler for the specified event. |
|
| public |
pipe(): * Forwards events from this Molecule's famous/src/core/EventHandler to the given
target, which can be another This method is equivalent to famous/src/core/EventHandler.pipe,
acting upon TODO v0.1.0: Let this method accept a |
|
| public |
Sets all options back to their defaults. |
|
| public |
setOptions(newOptions: Object) Compounds |
|
| public |
unpipe(): * Stops events from this Molecule's famous/src/core/EventHandler from being sent to the given target. This method is equivalent to famous/src/core/EventHandler.unpipe,
acting upon TODO v0.1.0: Let this method accept a |
|
Public Constructors
public constructor(initialOptions: Object) source
Creates a new Molecule and applies initialOptions to it's internal
famous/src/core/Modifier. See famous/src/core/Modifier
for details on what options you can pass.
Note: Mixed Mode Famo.us does away with Modifiers, so this API will
change slightly, but the change will be in such a way that APIs of
higher level classes won't change because of this. One of the biggest
changes in Mixed Mode will be that size will be set only on a
per-Surface basis as far as a render tree is concerned. So if you
normally put multiple Surface instances into a Modifier that has a
size, then instead you'll have to explicitly assign a size to each
Surface. This is a good thing, and makes for a cleaner and easier to
use render tree with a separation of concerns from classes that can
handle boundaries and group sizing. Molecule might then be an example
of such a class with it's own size API.
Params:
| Name | Type | Attribute | Description |
| initialOptions | Object | The options to initialize this Molecule's |
Public Members
public modifier: * source
public set options source
Properties:
| Name | Type | Attribute | Description |
| options | Object | The Molecule's options, which get applied to
Note: Anytime |
public get options: * source
public set transform source
Properties:
| Name | Type | Attribute | Description |
| transform | module: famous/src/transitions/TransitionableTransform | The transform of this |
public get transform: * source
Private Members
private _: {"options": *, "defaultOptions": *} source
Public Methods
public off(): * source
Unregister an event handler for the specified event. See famous/src/core/EventHandler.off.
Return:
| * |
public on(): * source
Register an event handler for the specified event. See famous/src/core/EventHandler.on.
Return:
| * |
public pipe(): * source
Forwards events from this Molecule's famous/src/core/EventHandler to the given
target, which can be another EventHandler or Molecule.
This method is equivalent to famous/src/core/EventHandler.pipe,
acting upon this.handler.
TODO v0.1.0: Let this method accept a Molecule, then stop doing pipe(this._.handler) in other places
Return:
| * |
public resetOptions() source
Sets all options back to their defaults.
Note: Anytime this is called, this.modifier is set to a new
famous/src/core/Modifier having the default
options.
public setOptions(newOptions: Object) source
Compounds newOptions into the existing options, similar to extending an
object and overriding only the desired properties. To override all
options with a set of new options, set this.options directly.
An example of setting just a single option without erasing other options:
const myMolecule = new Molecule()
myMolecule.setOptions({
align: [0.2, 0.8]
})
Params:
| Name | Type | Attribute | Description |
| newOptions | Object | An object containing the new options to apply to this |
public unpipe(): * source
Stops events from this Molecule's famous/src/core/EventHandler from being sent to the given target.
This method is equivalent to famous/src/core/EventHandler.unpipe,
acting upon this.handler.
TODO v0.1.0: Let this method accept a Molecule, then stop doing pipe(this.options.handler) in other places
Return:
| * |