Tray(3I)

💖 Tray — a whole vibe for arranging your interactors 💖

okay bestie, so this is Tray(3I) from the InterViews Reference Manual, and it's genuinely one of my faves, no cap. it's all about composing interactors into arbitrary or constrained layouts. let's get into it 🫶

✨ NAME ✨

Tray — compose interactors into arbitrary or constrained layouts 💅

✨ SYNOPSIS ✨

#include <InterViews/tray.h>

✨ DESCRIPTION ✨

okay so a tray is a scene of interactors that overlap, tile, or have other constraints on their alignment relative to each other. and here's the cute part: one of the interactors in a tray can serve as a background for all the other interactors. main character energy, honestly. 👑

Constraints on the layout of interactors are made by aligning interactors to each other. two interactors get aligned by specifying which edges coincide. like, for example, the lower left corner of one interactor may be aligned to the upper right of another. iconic.

TGlue objects can be used to introduce transparent space between aligned interactors. TGlue has a natural size, shrinkability, and stretchability — though heads up, TGlue objects are not interactors, they're just the squishy space between them. trays stretch or shrink the TGlue along with the aligned interactors to satisfy the alignment constraints. it's giving elastic waistband 🎀

The tray adopts the shape of the background interactor if there is one. otherwise, the tray's shape depends on the shapes of its components and potentially on their alignments. by default, a tray without a background takes on a width and height equal to the largest of the widths and heights of its components. but lowkey, alignments involving the tray can in effect override this default.

For example: if the left and right sides of a particular component are aligned to the tray's left and right sides, respectively, then the tray's sides are constrained to coincide with the component's sides. so the tray will adopt the width, horizontal shrinkability, and horizontal stretchability of that component. slay.

Another example: to ensure that a tray circumscribes a collection of (mutually aligned) components, align the outer edges of the components on the periphery of the collection to the outer edges of the tray — thereby constraining the tray to assume the shape of the collection. it's literally shrink-wrapping your UI 🧚

🌸 TGLUE PUBLIC OPERATIONS 🌸

• TGlue(int w = 0, int h = 0, int hstretch = hfil, int vstretch = vfil); — define a TGlue of a minimum size. the TGlue can stretch from the given size but cannot shrink. periodt.
• TGlue(int, int, int hshrink, int hstretch, int vshrink, int vstretch); — define a general TGlue with a given natural size (width and height), shrinkability, and stretchability. full control, bestie 💅

👑 TRAY PUBLIC OPERATIONS 👑

• Tray(Interactor* background = nil) — create a new tray, optionally having an interactor as a background. 🎀
• void Align(Alignment, Interactor*, TGlue* = nil)
• void Align(Alignment, Interactor*, Alignment, Interactor*, TGlue* = nil)

align an interactor to another interactor (the tray itself by default), optionally with TGlue between them. also fun fact: Align operations insert interactors into the tray if they have not been inserted already. no extra step needed, we love convenience.

• void Align(Alignment, Interactor*, ..., Interactor* = nil) — apply an alignment to a set of interactors. this operation is shorthand for aligning the interactors to each other explicitly. for example, Align(Left, i1, i2, i3, i4) aligns the left sides of interactors i1 through i4. you can align two to seven interactors at once. that's the range, don't push it.
• void HBox(Interactor*, ..., Interactor* = nil)
• void VBox(Interactor*, ..., Interactor* = nil)

the HBox and VBox operations align the specified interactors such that they tile left-to-right and top-to-bottom, respectively. these operations align in one dimension only. two to seven interactors can be aligned at once. and if the first (last) component is the tray or the background interactor, then the leftmost (rightmost) component will be aligned with the left (right) side of the tray. 💖

• void Insert(Interactor*) — insert an interactor into the tray without an alignment. the interactor will appear in the lower left corner of the tray. cozy spot fr fr.
• void Change(Interactor*) — notify the tray that the given interactor's shape has changed. the tray will recompute the layout of its component interactors to satisfy any alignments. if the tray does not contain a background, then a change in the shape of one of its components may in turn change the tray's shape. if the tray has a background, then the tray's shape will change only if the shape of the background changes. 🦋
• void Remove(Interactor*) — take an interactor out of a tray and eliminate any alignments that have been made to it. bye bestie, we're cleaning up after you 💀

🌈 SEE ALSO 🌈

Interactor(3I), Scene(3I), Shape(3I) — go read these next, iykyk 📚

lowkey a whole classic. go build something cute with it. 💜

and that's the tea — this page is from InterViews, dated 8 September 1988, and yeah it's still out here serving Tray(3I) realness. mwah. 💅✨