Famous Issue: Undefined size on rotated object fails to account for rotation.

info.txt

/*

In the following code two surfaces are added to a sequentialLayout.
The first surface has size=[undefined,undefined] and is then rotated 
by a StateModifier and then sized by another StateModifier. The 
surface takes the size of this second modifier, but fails to account
for the rotation between the two. Given the 90 degree rotation, this 
effectivly reverses the x and y components of the size. 

The sequentialLayout uses the size from the modifier to space the
surfaces, but the actual size of the surfaces doesn't match. 

To illustrate this please try this code using the two sizes 
in greenM marked "case 1" and "case 2". 

Then try using case 2 and uncomment the code below that adjusts
the size for greenS. This code is just a simplified long-hand version
of the matrix math used to account for the transform. In the general 
case any and all transforms between the size and the undefined size 
would need to be used. I believe that using the transforms provides
a much more usable result.

*/

main.js

/*

In the following code two surfaces are added to a sequentialLayout.
The first surface has size=[undefined,undefined] and is then rotated 
by a StateModifier and then sized by another StateModifier. The 
surface takes the size of this second modifier, but fails to account
for the rotation between the two. Given the 90 degree rotation, this 
effectivly reverses the x and y components of the size. 

The sequentialLayout uses the size from the modifier to space the
surfaces, but the actual size of the surfaces doesn't match. 

To illustrate this please try this code using the two sizes 
in greenM marked "case 1" and "case 2". 

Then try using case 2 and uncomment the code below that adjusts
the size for greenS. This code is just a simplified long-hand version
of the matrix math used to account for the transform. In the general 
case any and all transforms between the size and the undefined size 
would need to be used. I believe that using the transforms provides
a much more usable result.

*/

    var Engine = require('famous/core/Engine');
    var Surface = require('famous/core/Surface');
    var View = require('famous/core/View');
    var SequentialLayout = require('famous/views/SequentialLayout');
    var StateModifier = require('famous/modifiers/StateModifier');
    var Modifier = require('famous/core/Modifier');
    var Transform = require('famous/core/Transform');


    var mainContext = Engine.createContext();
    var seqLayout = new SequentialLayout({
		direction: 0
	});

    var redS = new Surface({
        size: [30, 30],
        properties: {
            backgroundColor: 'red',
        }
    });

    var greenS = new Surface({
        size:[undefined,undefined],
        content:'green',
        properties: {
            backgroundColor: 'green',
        }
    });
    
    var greenMx = new StateModifier({
        origin:[.5,.5],
        transform:Transform.rotateZ(Math.PI/2),
    });
    
    var greenM = new StateModifier({
        size:[50,30] // case 1
        //size:[30,50] // case 2
    });

    var greenV = new View();
    greenV.add(greenM).add(greenMx).add(greenS);

    /*
    // adjustment to correct the greenS size.
    var size4 = [greenM.getSize()[0], greenM.getSize()[1],0,0];
    var fm = greenMx.getTransform();
    var x = size4[0]*fm[0] + size4[1]*fm[1] + size4[2]*fm[2] + size4[3]*fm[3];
    var y = size4[0]*fm[4] + size4[1]*fm[5] + size4[2]*fm[6] + size4[3]*fm[7];
    greenS.setSize([Math.abs(x),Math.abs(y)]);
    */
    
    var dspItems = [greenV,redS];
    seqLayout.sequenceFrom(dspItems);
    mainContext.add(seqLayout);