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.