Why doesn't setting the size of a Node using Size Component in Famous Engine work?

Question

Here's the code that should size my node to be 500x500px:

'use strict';

var famous = require('famous');
var DOMElement = famous.domRenderables.DOMElement;
var Size = famous.core.Size;
var FamousEngine = famous.core.FamousEngine;
var Node = famous.core.Node;

// Create scene.
var scene = FamousEngine.createScene();

// Create a Node in the scene.
var boxNode = scene.addChild();

// Add DOMElement component to the Node.  Make it gray.
var boxElement = new DOMElement(boxNode);
boxElement.setProperty('background-color', 'lightgray');

// Add a Size component to the Node.
var boxSize = new Size(boxNode);

// Set the size of the Node using Size methods.
boxSize.setSizeMode('absolute', 'absolute')
    .setAbsolute(500, 500);

FamousEngine.init();

When this executes, boxSize.absoluteSize = [ 500, 500, 0] which is good. But boxNode._components[1].absoluteSize remains [0,0,0] -- which is probably why the box never gets the size I'm attempting to set it to (_components[1] references the Size component of the Node).

If I utilize the size methods on boxNode, things size correctly. According to the Famous Docs, it looks like I should be able to set it on either the Node or the Size component attached to the Node.

It's bugging me :P

Answer 1

Let's look at Sizing in Famous Guides
As you stated, a Node can be sized using it's size methods. The node can also process sizing using a component that manages the sizing methods of the node during onUpdate.

What's Wrong?

The example is trying to use the internal Size class. This is the internal component used by Node to process the size of the node and has already been applied to the Node class.

var Size = famous.core.Size;

Correct Component to use for managing Size

Use the components Size class to manage the size of your Node.

var Size = famous.components.Size;

var DOMElement = famous.domRenderables.DOMElement;
var Size = famous.components.Size;
var FamousEngine = famous.core.FamousEngine;
var Node = famous.core.Node;

// Create scene.
var scene = FamousEngine.createScene();

// Create a Node in the scene.
var boxNode = scene.addChild();

// Add DOMElement component to the Node.  Make it gray.
var boxElement = new DOMElement(boxNode);
boxElement.setProperty('background-color', 'lightgray');

// Add a Size component to the Node.
var boxSize = new Size(boxNode);

// Set the size of the Node using Size methods on the component.
boxSize.setMode('absolute', 'absolute', 'absolute')
    .setAbsolute(200, 200, 0);

FamousEngine.init();

var DOMElement = famous.domRenderables.DOMElement;
var Size = famous.components.Size;
var FamousEngine = famous.core.FamousEngine;
var Node = famous.core.Node;

// Create scene.
var scene = FamousEngine.createScene();

// Create a Node in the scene.
var boxNode = scene.addChild();

// Add DOMElement component to the Node.  Make it gray.
var boxElement = new DOMElement(boxNode);
boxElement.setProperty('background-color', 'lightgray');

// Add a Size component to the Node.
var boxSize = new Size(boxNode);

// Set the size of the Node using Size methods on the component.
boxSize.setMode('absolute', 'absolute', 'absolute')
    .setAbsolute(200, 200, 0);

FamousEngine.init();

html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
              
            }
            body {
                position: absolute;
                -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
                -webkit-font-smoothing: antialiased;
                -webkit-tap-highlight-color: transparent;
                background-color: white;
                -webkit-perspective: 0;
                perspective: none;
                overflow: hidden;
            }

<script src="http://code.famo.us/famous/0.6.2/famous.min.js"></script>