Migrate FloatingLayout to common code?

[samreid]

I've used FloatingLayout to move the controls to the edge of the screen when it resizes. In #171 and #235 @arouinfar and @samreid concluded that it works nicely. It would be good to have other designers such as @ariel-phet take a look. If we decide this is generally desirable, the functionality should be (a) reviewed/discussed with developers such as @pixelzoom @jonathanolson @jbphet @jessegreenberg or @aaronsamuel137 and moved to a common library. @ariel-phet can you take a look?

[ariel-phet]

@samreid yes, I think we should definitely migrate to common code. This feature request has come up in multiple sims, and I am sure it will come up again to maximize play area (CCK:B is an obvious next example where I foresee this request).

[ariel-phet]

@samreid perhaps make a dev meeting topic when @pixelzoom and @jessegreenberg returns?

[samreid]

We decided to move this to common code, @jonathanolson and @samreid will look into it.

[samreid]

@jonathanolson suggests something like:

Layout.layoutNodes(new BoxLayout(),[controlPanel,button,...]);

BoxLayout can keep track of state, like the height of other things that were added.

We could also try to use this to do the layout of the entire sim. Could also make this deal with relayout of the sim when string lengths change (if we want to support this in rosetta in the future).

@jonathanolson says it would be good to develop this without requiring to use scenery nodes--just different things with bounds, and it would work for model objects as well as view objects.

[samreid]

I recommend sticking with what we have here in Bending Light for now and once phetsims/dot#44 is solved, we can port this or other sims to use its new paradigm. Closing.

[pixelzoom]

Might AnchoredLayout be a better name for this? Since it's anchored to the edge of screen...

[samreid]

Might AnchoredLayout be a better name for this? Since it's anchored to the edge of screen...

While the recommendation for dot seems much more general, the version in bending light could be renamed to "Anchored". I'll reopen to work on that renaming.

[samreid]

Before changing the name from Floating to Anchored, I wanted to verify that @pixelzoom was aware of the floating nature of the rule. If the controls get too far from the play area, they float a certain distance away. Perhaps you might say they are "anchored" a certain flexible distance away? Not sure what is best here.

[pixelzoom]

@samreid wrote above:

If the controls get too far from the play area, they float a certain distance away.

I don't understand this statement. Can you provide a screenshot to help me understand? Running with 'dev' query parameter, and looking at the "Intro" screen, I see the 2 control panels anchored to the right edge (minus a margin) of the browser window. As I resize the browser window, the panels remain so anchored.

[samreid]

Did you resize it to be this extreme of an aspect ratio?

[pixelzoom]

No I didn't. And I doubt than anyone will :)

[samreid]

Perhaps only on the iPhone 5:

Should we rename or close?

[pixelzoom]

The name FloatingLayout still seems vague to me. Perhaps you should get other opinions.

[samreid]

@aaronsamuel137 @jonathanolson @jbphet @jessegreenberg any preferences here?

[jonathanolson]

No strong preferences. "anchored" makes me think it wouldn't be constrained by extreme aspect ratios, and "floating" seems overloaded with CSS float layouts.

[samreid]

SomewhatConstrainedEdgeLayout.js

[samreid]

Perhaps @jessegreenberg can help decide a good name here while he is participating in the code review for issue #268

[jessegreenberg]

To be honest, my vote is for FloatingLayout. My perspective of the feature is that it 'floats' the panels and reset button away from the center of the screen view when the layout bounds change. I would not have considered the panels 'anchored' to the bounds unless I thought about the code. Indeed, the position of the view objects 'float' relative to other view elements in the screen view.

If 'float' is overloaded with the CSS term, perhaps DriftingLayout or HoverLayout?

FloatingLayout is still my favorite.

[samreid]

Based on the above remarks let's stick with FloatingLayout for the BendingLight implementation. Note that the generalized version in phetsims/dot#44 will probably have a much better name!