Here we will cover the layout system in Scenery.
-
The layout system in Scenery is based on the concept of bounds. Each paintable Node (that
@@ -264,7 +264,7 @@
width / height will return the value of the bounds.
- Some Nodes are called layout containers if they will control the position and size of child content. @@ -293,7 +293,95 @@
AlignBox allows positioning a Node within a rectangle, with margins/alignment+ Nodes like FlowBox (HBox/VBox), GridBox, and many sun components + (buttons, AccordionBox, Panel, Slider, Checkbox) are sizable: they can be adjusted to different + preferred sizes/bounds, which are equal to or larger than their minimum sizes. When the preferred + size is set, the Node is responsible for adjusting its own layout so that it takes up that size. +
+ +
+ Sizable nodes will either mix in WidthSizable, HeightSizable, or Sizable
+ (indicating that both width and height can be adjusted). This provides preferred and minimum sizes in BOTH local
+ and parent coordinate frames (e.g. preferredWidth / localPreferredWidth).
+ These separate coordinate frame versions will be kept in sync (and are backed by Properties).
+
+ Typically Nodes will compute their own minimum width/height. The local version of this (e.g. localMinimumWidth)
+ is considered the "primary" one, since Nodes usually do layout in their local coordinate frame. This means that
+ when a Node's transform changes, its minimum sizes will be adjusted to match the equivalent
+ localMinimum sizes.
+
+ Typically layout containers (but also clients, manually) will set the preferred sizes on a Node, thus the
+ parent version will be primary (e.g. when a sizable Node is transformed, its localPreferredWidth will
+ be adjusted to match the preferredWidth after the transformation).
+
+ Some Nodes by default have this "sizability" turned off, and clients can do this manually with
+ widthSizable/heightSizable/sizable:false. Layout containers should not attempt to set preferred sizes
+ when the Node is not considered "sizable".
+
+ For instance, Rectangles mix in Sizable, but are marked as sizable: false by default, so it won't
+ take up space even when a container has a larger preferred size. They can be made resizable with sizable:
+ true:
+
+ NOTE: This is different than the stretch layout option. stretch will potentially change
+ what preferred size it will set to a Node. sizable on a Node will prevent that setting of preferred
+ size.
+
+ The section below will show off many layout options that are typically set on the container (and apply to all
+ children). These can also be set on individual children, and will override the container's default for any options
+ included. These can be mutated after (by setting the entire thing with node.layoutOptions = or with
+ mutateLayoutOptions).
+
+ mutateLayoutOptions is recommended when applying additional adjustments to layoutOptions,
+ so that it won't by accident remove any layout options that were set earlier OR some set by the container. For
+ example, GridBox with rows/columns/autoRows/autoColumns will set some layout options, and using
+ gridBox.layoutOptions = may wipe out the positioning information for the child.
+
It is recommended to view assorted PhET simulations and libraries for examples to see how layout is used in practice. @@ -2206,138 +2294,6 @@
- Nodes like FlowBox (HBox/VBox), GridBox, and many sun components - (buttons, AccordionBox, Panel, Slider, Checkbox) are sizable: they can be adjusted to different - preferred sizes/bounds, which are equal to or larger than their minimum sizes. When the preferred - size is set, the Node is responsible for adjusting its own layout so that it takes up that size. -
- -
- Sizable nodes will either mix in WidthSizable, HeightSizable, or Sizable
- (indicating that both width and height can be adjusted). This provides preferred and minimum sizes in BOTH local
- and parent coordinate frames (e.g. preferredWidth / localPreferredWidth).
- These separate coordinate frame versions will be kept in sync (and are backed by Properties).
-
- Typically Nodes will compute their own minimum width/height. The local version of this (e.g. localMinimumWidth)
- is considered the "primary" one, since Nodes usually do layout in their local coordinate frame. This means that
- when a Node's transform changes, its minimum sizes will be adjusted to match the equivalent
- localMinimum sizes.
-
- Typically layout containers (but also clients, manually) will set the preferred sizes on a Node, thus the
- parent version will be primary (e.g. when a sizable Node is transformed, its localPreferredWidth will
- be adjusted to match the preferredWidth after the transformation).
-
- Some Nodes by default have this "sizability" turned off, and clients can do this manually with
- widthSizable/heightSizable/sizable:false. Layout containers should not attempt to set preferred sizes
- when the Node is not considered "sizable".
-
- For instance, Rectangles mix in Sizable, but are marked as sizable: false by default, so it won't
- take up space even when a container has a larger preferred size. They can be made resizable with sizable:
- true:
-
- NOTE: This is different than the stretch layout option. stretch will potentially change
- what preferred size it will set to a Node. sizable on a Node will prevent that setting of preferred
- size.
-
- Layout options can be set on individual child Nodes of a layout container. These will override the container's
- default for any options included. These can be mutated after (by setting the entire thing with node.layoutOptions
- =or with mutateLayoutOptions).
-
- mutateLayoutOptions is recommended when applying additional adjustments to layoutOptions,
- so that it won't by accident remove any layout options that were set earlier OR some set by the container. For
- example, GridBox with rows/columns/autoRows/autoColumns will set some layout options, and using
- gridBox.layoutOptions = may wipe out the positioning information for the child.
-