Purrx

Rows and columns: laying out a tree

Write the recursive arrange() at the core of the layout engine: walk the SlideML tree, split each container's space between its children, and emit a render plan.

14 min+35 XPHands-on

innerBox and splitSpace handle one container. A slide is a of containers inside containers. The trick is that laying out a container is the same job at every level, so one function can call itself for each child.

<row gap="12"> → across

a
b
c

<column gap="12"> → down

a
b
c
The same arrange() handles both: a row walks its cursor along x and gives every child the full height; a column walks along y and gives every child the full width.

arrange(node, box, context)

"Put this node inside this box." For a container, that's five steps:

  1. If it has a fill, add a rect element covering the box, first, so its children are drawn on top.
  2. Take the padding off: innerBox(box, padding).
  3. Ask each child how much space it wants along the main direction: sizeOf(child, horizontal), already written.
  4. Share the inner width (row) or height (everything else) with splitSpace, including the gap.
  5. Walk a cursor across the space. Give each child its box, call arrange on it, and move the cursor past it and the gap.

A <text> is a leaf: arrangeText (also written) just adds a text element filling its box. Unknown tags are reported as problems rather than crashing, because the model will occasionally invent one.

Under the hood — What does context hold, and why pass it down?

context is one object shared by the whole layout: context.elements collects everything to draw, in order, and context.problems collects anything that went wrong. Passing one object down is simpler than every call returning lists that the caller then has to merge.

When your checks pass, open the Slides tab: that slide was positioned entirely by your code.

Key takeaways

  • arrange() handles one node: draw its fill, take off padding, split the space, then arrange each child.
  • A row walks a cursor along x; every other container walks along y.
  • Recursion means one short function lays out any depth of nesting.

Sign in to run the exercise

Reading is free. Writing code here needs an account so we have somewhere to keep your Gemini key and the +35 XP you are about to earn.

Continue with Google