Label

Example of a basic label.

const offsetX = 24;
const offsetY = -32;
const underline = 64;

const n = {
  x: 300,
  y: 160,
  shapes: label.blueprint.shapes({ offsetX, offsetY, underline }, theme.label.active),
  texts: [{
    x: offsetX + underline / 2,
    y: offsetY - 12,
    content: "hello, world",
    opts: {
      textAlign: "center",
    }
  }]
};

graph.updateQueue(0, [[n]]);

Example of a label triggered by hovering text.

const offsetX = 24;
const offsetY = -32;
const underline = 64;

const hint = {
  x: 300,
  y: 160,
  shapes: label.blueprint.shapes({ offsetX, offsetY, underline }, theme.label.active),
  texts: [{
    x: offsetX + underline / 2,
    y: offsetY - 12,
    content: "hello, world",
    opts: {
      textAlign: "center",
    }
  }],
  hidden: true,
};

const text = {
  x: 300,
  y: 180,
  contain: rectContain(80, 40),
  texts: [{
    content: "Hover me!",
    opts: {
      width: 80,
      height: 40,
      textAlign: "center",
    },
  }],
  onMouseenter(render) {
    hint.hidden = false;
    render();
  },
  onMouseleave(render) {
    hint.hidden = true;
    render();
  }
};

graph.updateQueue(0, [[hint, text]]);

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.