Description Edit

The EditableLabel widget is a label which, when clicked, turns into a text field and allows its value to be edited. That way, it doesn't take as much space when viewing its text, but allows the flexibility of editing the value it contains.

Code Edit

class EditableLabel extends CompositeNode {
    attribute x: Number;
    attribute y: Number;
    attribute text: String;
    attribute editing: Boolean;

    operation toggle();

attribute EditableLabel.editing = false;

function EditableLabel.composeNode() = Group {
    content: bind if editing then View {
        transform: bind translate(x, y)
        content: TextField {
            value: bind text
            action: operation() { toggle(); }
    } else Text {
        x: bind x y: bind y
        content: bind text
        onMousePressed: operation(e:CanvasMouseEvent) { toggle(); }

operation EditableLabel.toggle() {
    editing = not editing;

Ad blocker interference detected!

Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.