Layout - Edges

Every toodle node has a bounds property that describes the bounding box of the node in world space.

You can use this alongside the positional setters to position nodes relative to each other.

import { Toodle } from "@blooper.gg/toodle";

const canvas = document.querySelector("canvas")!;
const toodle = await Toodle.attach(canvas, {
  filter: "nearest",
  limits: { textureArrayLayers: 5 },
});

await toodle.assets.registerBundle("items", {
  textures: {
    apple: new URL("https://toodle.gg/img/ItemApple.png"),
    banana: new URL("https://toodle.gg/img/ItemBanana.png"),
    lemon: new URL("https://toodle.gg/img/ItemLemon.png"),
    cherry: new URL("https://toodle.gg/img/ItemCherry.png"),
  },
});

await toodle.assets.loadBundle("items");

const container = toodle.Node({ scale: 2 });
const banana = container.add(toodle.Quad("banana")).setBounds({
  left: -toodle.resolution.width / 2,
  top: toodle.resolution.height / 2,
});
const apple = container.add(toodle.Quad("apple")).setBounds({
  left: banana.bounds.right + 10,
  y: banana.bounds.y,
});
const lemon = container.add(toodle.Quad("lemon")).setBounds({
  top: apple.bounds.bottom - 10,
  x: apple.bounds.x,
});
const cherry = container.add(toodle.Quad("cherry")).setBounds({
  right: lemon.bounds.left - 10,
  y: lemon.bounds.y,
});

toodle.startFrame();
toodle.draw(container);
toodle.endFrame();

WARNING

This will not work as expected:

const container = toodle.Node({scale: 2})
const banana = container.add(
  // notice we are calling setBounds before adding to the parent
  toodle.Quad("banana").setBounds({
    left: 0,
    top: 0,
  })
);

The reason for this is that the left and top setters are applied in the toodle.Quad constructor, before the parent is set. Instead you will need to do this:

// here we call setBounds _after_ adding to the parent
const banana = container.add(toodle.Quad("banana")).setBounds({
  left: 0,
  top: 0,
})

When using node.add with a newly constructed node and adding it to a parent in the same line, you will get unexpected results.