Demos

# The reference: everything in this file is what Rakugan takes. The app
# is a class, its state is its fields, `view` is a method, and a handler
# is an anonymous sub that closes over the fields.
#
#   rakugan run  demo/counter.pl
#   rakugan gate demo/counter.pl --script "click:+1,input:Momo"
use Rakugan;

class Counter {
    use Rakugan;
    field $count = 0;
    field $name  = "";

    method view {
        column(
            text("count: $count", size => 34),
            row(
                button("+1",    on_click => sub { $count += 1 }),
                button("+10",   on_click => sub { $count += 10 }),
                button("reset", on_click => sub { $count = 0 }),
                spacing => 8,
            ),
            text_field($name, placeholder => "your name",
                       on_change => sub ($s) { $name = $s }),
            text("hello, $name"),
            spacing => 12,
            padding => 16,
        );
    }
}

run(Counter->new, title => "counter");

# Ordinary Perl inside a view: `if`, `unless`, a conditional
# expression, a loop, and a method that answers part of the screen.
# The parts go into a list, and the list is what the container holds.
use Rakugan;

class Control {
    use Rakugan;
    field @items     = ("milk", "eggs", "rice");
    field $picked    = -1;
    field $show_hint = true;
    field $tab       = 0;

    method hint {
        return text("pick one", size => 12, color => "#8a8f98");
    }

    method line :Sig(Str, Int) ($name, $i) {
        return row(
            text($i == $picked ? "▸ $name" : "  $name"),
            button("pick $i", on_click => sub { $picked = $i }),
            spacing => 8,
        );
    }

    method tab_button :Sig(Int) ($n) {
        return button("tab $n", on_click => sub { $tab = $n });
    }

    method view {
        my @cells = (text("control flow", size => 18, bold => true));
        if ($show_hint) {
            push @cells, $self->hint;
        } else {
            push @cells, text("hidden", size => 12);
        }
        for my $i (0 .. $#items) {
            push @cells, $self->line($items[$i], $i);
        }
        push @cells, text("picked $items[$picked]", color => $picked % 2 == 0 ? "accent" : "#f38ba8")
            unless $picked < 0;
        push @cells, row(
            button("hint", on_click => sub { $show_hint = !$show_hint }),
            (map { $self->tab_button($_) } 0 .. 2),
            spacing => 6,
        );
        push @cells, text("tab $tab");
        return column(@cells, spacing => 10, padding => 14);
    }
}

run(Control->new, title => "control");

# A list whose rows are built on demand: the builder is called for the
# rows in view, not for all of them. The row number is the sub's own
# argument, so the line, the marker and that row's button all read it.
use Rakugan;

class Todo {
    use Rakugan;
    field @items = ("milk");
    field $draft = "";
    field $done  = -1;

    method add :Sig(Str) ($t) {
        push @items, $t;
        $draft = "";
    }

    method line :Sig(Int) ($i) {
        my @cells = (text("@{[ $i + 1 ]}. $items[$i]"));
        push @cells, text("done", color => "accent") if $i == $done;
        push @cells, button("done", on_click => sub { $done = $i });
        return row(@cells, spacing => 8);
    }

    method view {
        return column(
            text("todo — @{[ scalar @items ]} items", size => 16),
            text_field($draft, placeholder => "add and press enter",
                       on_change => sub ($t) { $draft = $t },
                       on_submit => sub ($t) { $self->add($t) }),
            list_view(scalar @items, sub ($i) { $self->line($i) },
                      item_height => 26, height => 280),
            button("clear", on_click => sub { @items = () }),
            spacing => 10,
            padding => 14,
        );
    }
}

run(Todo->new, title => "todo");

# A calculator: one accumulator, one pending operation, and a display
# the app builds as a string. The look is a hash of keywords, handed to
# each key.
use Rakugan;

my %KEY     = (grow => 1, size => 20, background => "panel",
               hover_background => "#45475a", active_background => "#585b70");
my %FUN     = (%KEY, background => "#313244", color => "#a6adc8");
my %OP      = (%KEY, background => "#fab387", color => "#1e1e2e",
               hover_background => "#f8c49b", active_background => "#f5e0dc");
my %WIDE    = (%KEY, grow => 2, basis => 8);
my %READOUT = (size => 40, color => "text", align => "right", grow => 1.4);
my %KEYS    = (spacing => 8, grow => 1);

class Calc {
    use Rakugan;
    field $display = "0";
    field $acc     = 0.0;
    field $op      = "";
    field $fresh   = true;
    field $has_dot = false;

    method press :Sig(Str) ($d) {
        if ($fresh) {
            $display = $d;
            $fresh = false;
            $has_dot = false;
        } elsif ($display eq "0") {
            $display = $d;
        } else {
            $display = $display . $d;
        }
    }

    method dot {
        if ($fresh) {
            $display = "0.";
            $fresh = false;
            $has_dot = true;
        } elsif (!$has_dot) {
            $display = $display . ".";
            $has_dot = true;
        }
    }

    method negate {
        my $v = 0 + $display;
        return if $v == 0.0;
        $display = "@{[ 0.0 - $v ]}";
        $fresh = false;
    }

    method percent {
        $display = "@{[ (0 + $display) / 100.0 ]}";
        $fresh = true;
        $has_dot = false;
    }

    method apply :Sig(Str) ($nxt) {
        if ($fresh && $op ne "") {
            $op = $nxt;
            return;
        }
        my $cur = 0 + $display;
        $acc = $cur if $op eq "";
        $acc += $cur if $op eq "+";
        $acc -= $cur if $op eq "-";
        $acc *= $cur if $op eq "×";
        if ($op eq "÷") {
            if ($cur == 0.0) {
                $display = "Error";
                $acc = 0.0;
                $op = "";
                $fresh = true;
                return;
            }
            $acc /= $cur;
        }
        $display = "$acc";
        $op = $nxt;
        $fresh = true;
    }

    method clear {
        $display = "0";
        $acc = 0.0;
        $op = "";
        $fresh = true;
        $has_dot = false;
    }

    method digit :Sig(Str) ($d) {
        return button($d, %KEY, on_click => sub { $self->press($d) });
    }

    method op_key :Sig(Str) ($name) {
        return button($name, %OP, on_click => sub { $self->apply($name) });
    }

    method equals {
        return button("=", %OP, on_click => sub { $self->apply("") });
    }

    method view {
        return column(
            text($display, %READOUT),
            row(
                button("C", %FUN, on_click => sub { $self->clear }),
                button("±", %FUN, on_click => sub { $self->negate }),
                button("%", %FUN, on_click => sub { $self->percent }),
                $self->op_key("÷"),
                %KEYS,
            ),
            row($self->digit("7"), $self->digit("8"), $self->digit("9"), $self->op_key("×"), %KEYS),
            row($self->digit("4"), $self->digit("5"), $self->digit("6"), $self->op_key("-"), %KEYS),
            row($self->digit("1"), $self->digit("2"), $self->digit("3"), $self->op_key("+"), %KEYS),
            row(
                button("0", %WIDE, on_click => sub { $self->press("0") }),
                button(".", %KEY, on_click => sub { $self->dot }),
                $self->equals,
                %KEYS,
            ),
            spacing => 8, padding => 16, grow => 1,
        );
    }
}

run(Calc->new, title => "calc");

# The same calculator as demo/calc.pl, on a grid instead of five
# rows. `col_span =>` is what makes the zero key twice as wide.
use Rakugan;

my %KEY     = (grow => 1, size => 20, background => "panel",
               hover_background => "#45475a", active_background => "#585b70");
my %FUN     = (%KEY, background => "#313244", color => "#a6adc8");
my %OP      = (%KEY, background => "#fab387", color => "#1e1e2e",
               hover_background => "#f8c49b", active_background => "#f5e0dc");
my %WIDE    = (%KEY, grow => 2, basis => 8);
my %READOUT = (size => 40, color => "text", align => "right", grow => 1.4);
my %KEYS    = (spacing => 8, grow => 1);

class CalcGrid {
    use Rakugan;
    field $display = "0";
    field $acc     = 0.0;
    field $op      = "";
    field $fresh   = true;
    field $has_dot = false;

    method press :Sig(Str) ($d) {
        if ($fresh) {
            $display = $d;
            $fresh = false;
            $has_dot = false;
        } elsif ($display eq "0") {
            $display = $d;
        } else {
            $display = $display . $d;
        }
    }

    method dot {
        if ($fresh) {
            $display = "0.";
            $fresh = false;
            $has_dot = true;
        } elsif (!$has_dot) {
            $display = $display . ".";
            $has_dot = true;
        }
    }

    method negate {
        my $v = 0 + $display;
        return if $v == 0.0;
        $display = "@{[ 0.0 - $v ]}";
        $fresh = false;
    }

    method percent {
        $display = "@{[ (0 + $display) / 100.0 ]}";
        $fresh = true;
        $has_dot = false;
    }

    method apply :Sig(Str) ($nxt) {
        if ($fresh && $op ne "") {
            $op = $nxt;
            return;
        }
        my $cur = 0 + $display;
        $acc = $cur if $op eq "";
        $acc += $cur if $op eq "+";
        $acc -= $cur if $op eq "-";
        $acc *= $cur if $op eq "×";
        if ($op eq "÷") {
            if ($cur == 0.0) {
                $display = "Error";
                $acc = 0.0;
                $op = "";
                $fresh = true;
                return;
            }
            $acc /= $cur;
        }
        $display = "$acc";
        $op = $nxt;
        $fresh = true;
    }

    method clear {
        $display = "0";
        $acc = 0.0;
        $op = "";
        $fresh = true;
        $has_dot = false;
    }

    method digit :Sig(Str) ($d) {
        return button($d, %KEY, on_click => sub { $self->press($d) });
    }

    method op_key :Sig(Str) ($name) {
        return button($name, %OP, on_click => sub { $self->apply($name) });
    }

    method equals {
        return button("=", %OP, on_click => sub { $self->apply("") });
    }

    method view {
        return column(
            text($display, %READOUT),
            grid(
                button("C", %FUN, on_click => sub { $self->clear }),
                button("±", %FUN, on_click => sub { $self->negate }),
                button("%", %FUN, on_click => sub { $self->percent }),
                $self->op_key("÷"),
                $self->digit("7"), $self->digit("8"), $self->digit("9"), $self->op_key("×"),
                $self->digit("4"), $self->digit("5"), $self->digit("6"), $self->op_key("-"),
                $self->digit("1"), $self->digit("2"), $self->digit("3"), $self->op_key("+"),
                grid_cell(button("0", %WIDE, on_click => sub { $self->press("0") }), col_span => 2),
                button(".", %KEY, on_click => sub { $self->dot }),
                $self->equals,
                columns => 4, rows => 5, spacing => 8, grow => 5,
            ),
            spacing => 8, padding => 16, grow => 1,
        );
    }
}

run(CalcGrid->new, title => "calcgrid");

# State an app keeps and a field that writes into it. The parts of the
# screen go into a list, and one of them is only there some of the time.
use Rakugan;

class Mixer {
    use Rakugan;
    field $volume = 5;
    field $title  = "untitled";
    field $muted  = false;

    method view {
        my @cells = (
            text("$title — vol $volume", size => 16),
            row(
                button("+1",     on_click => sub { $volume += 1 }),
                button("mute",   on_click => sub { $muted = true }),
                button("unmute", on_click => sub { $muted = false }),
                spacing => 8,
            ),
        );
        push @cells, text("(muted)", size => 12, color => "#8a8f98") if $muted;
        push @cells, text_field($title, placeholder => "title", on_change => sub ($t) { $title = $t });
        return column(@cells, spacing => 10, padding => 14);
    }
}

run(Mixer->new, title => "mixer");

# A hash on the app: reading with a fallback, asking whether a key is
# there, and adding one while the window is open.
use Rakugan;

class Lookup {
    use Rakugan;
    field %prices = (apple => 120, banana => 80);
    field $picked = 0;
    field $label  = "none";

    method pick_apple {
        $picked = $prices{"apple"} // -1;
        $label = exists $prices{"cherry"} ? "cherry known" : "no cherry";
    }

    method add_cherry {
        $prices{"cherry"} = 200;
        $picked = $prices{"cherry"} // -1;
        $label = "cherry known" if exists $prices{"cherry"};
    }

    method view {
        return column(
            text("picked=$picked n=@{[ scalar keys %prices ]} $label"),
            text("apple costs @{[ $prices{'apple'} // -1 ]} right now", size => 12),
            row(
                button("apple",  on_click => sub { $self->pick_apple }),
                button("cherry", on_click => sub { $self->add_cherry }),
                button("miss",   on_click => sub { $picked = $prices{"durian"} // -7 }),
                spacing => 6,
            ),
            spacing => 8,
            padding => 12,
        );
    }
}

run(Lookup->new, title => "lookup");

# A small class of values, carried on the app's own state. A class with
# no `view` is a value: `:param` says what `new` is given, `:reader`
# what can be read back, and the compiled run holds it as a value
# rather than as something two names can share.
use Rakugan;

class Point {
    use Rakugan;
    field $x :param :reader = 0;
    field $y :param :reader = 0;
}

class Points {
    use Rakugan;
    field $sel  = Point->new(x => 3, y => 4);
    field $dist = 0;

    method view {
        return column(
            text("p=(@{[ $sel->x ]}, @{[ $sel->y ]}) d2=$dist"),
            row(
                button("right",   on_click => sub { $sel = Point->new(x => $sel->x + 5, y => $sel->y) }),
                button("swap",    on_click => sub { $sel = Point->new(x => $sel->y, y => $sel->x) }),
                button("measure", on_click => sub { $dist = $sel->x * $sel->x + $sel->y * $sel->y }),
                spacing => 6,
            ),
            spacing => 8,
            padding => 12,
        );
    }
}

run(Points->new, title => "points");

# Values that are one of a few named things, and a value that may be
# nothing at all. Perl writes the first as constants and the second as
# `undef`: a field that starts as nothing says what it may hold, and
# `defined` is the `if` inside which it is read as the value. The
# tracker is a second class with methods of its own, which the app
# holds and calls.
use Rakugan;

class Tracker {
    use Rakugan;
    use constant { HAPPY => "happy", SAD => "sad" };
    field $last  :reader = maybe(Int);
    field $trend :reader = HAPPY;

    method note :Sig(Int) ($v) {
        $last = $v;
        $trend = $trend eq HAPPY ? SAD : HAPPY;
    }

    method wipe {
        $last = undef;
    }
}

class Moods {
    use Rakugan;
    use constant { HAPPY => "happy", SAD => "sad" };
    field $mood    = HAPPY;
    field $sel     = maybe(Int);
    field $note    = "-";
    field $tracker = Tracker->new;

    method flip {
        $mood = $mood eq HAPPY ? SAD : HAPPY;
    }

    method describe {
        if (defined $sel) {
            $note = "chose $sel";
        } else {
            $note = "nothing chosen";
        }
    }

    method mood_line {
        return text("mood: up", size => 18, color => "accent", animate => 120, easing => "out") if $mood eq HAPPY;
        return text("mood: down", size => 18, color => "#f38ba8", animate => 120, easing => "out");
    }

    method view {
        my @cells = ($self->mood_line);
        if (defined $sel) {
            push @cells, text("selection: $sel");
        } else {
            push @cells, text("(no selection)");
        }
        push @cells, text("note: $note");
        if (defined $tracker->last) {
            push @cells, text("tracked: @{[ $tracker->last ]}", size => 12);
        } else {
            push @cells, text("(nothing tracked)", size => 12);
        }
        return column(
            @cells,
            row(
                button("flip",     on_click => sub { $self->flip }),
                button("pick",     on_click => sub { $sel = 7 }),
                button("clear",    on_click => sub { $sel = undef }),
                button("describe", on_click => sub { $self->describe }),
                button("track",    animate => 100, easing => "inOut", on_click => sub { $tracker->note(9) }),
                button("wipe",     on_click => sub { $tracker->wipe }),
                spacing => 6,
            ),
            spacing => 8,
            padding => 12,
        );
    }
}

run(Moods->new, title => "moods");

# Objects that point at one another. A perl object is a reference, and
# two names can hold the same one; the compiled run keeps that. The
# pointer back is weakened, as perl itself asks, so a parent and a
# child do not keep each other alive: cut the owning chain and the
# survivor's pointer back answers nothing, in both runs.
use Rakugan;

class Node {
    use Rakugan;
    field $label  :param :reader = "n";
    field $kid    :reader :writer = maybe(Node);
    field $parent :reader = maybe(Node);

    method hang_under :Sig(Node) ($p) {
        $parent = $p;
        weaken($parent);
    }
}

class Tree {
    use Rakugan;
    field $root = maybe(Node);
    field $keep = maybe(Node);
    field $note = "-";

    method build {
        my $a = Node->new(label => "alpha");
        my $b = Node->new(label => "beta");
        $a->set_kid($b);
        $b->hang_under($a);
        $root = $a;
        $keep = $b;
    }

    method peek {
        if (defined $root) {
            if (defined $root->kid) {
                if (defined $root->kid->parent) {
                    $note = "kid=@{[ $root->kid->label ]} parent=@{[ $root->kid->parent->label ]}";
                } else {
                    $note = "kid=@{[ $root->kid->label ]} parent=gone";
                }
            } else {
                $note = "no kid";
            }
        } elsif (defined $keep) {
            if (defined $keep->parent) {
                $note = "kept @{[ $keep->label ]}, parent=@{[ $keep->parent->label ]}";
            } else {
                $note = "kept @{[ $keep->label ]}, parent=gone";
            }
        } else {
            $note = "no root";
        }
    }

    method view {
        my @cells = (text("note: $note"));
        if (defined $root) {
            push @cells, text("root: @{[ $root->label ]}");
        } else {
            push @cells, text("root: (none)");
        }
        return column(
            @cells,
            row(
                button("build", on_click => sub { $self->build }),
                button("peek",  on_click => sub { $self->peek }),
                button("drop",  on_click => sub { $root = undef }),
                spacing => 6,
            ),
            spacing => 8,
            padding => 12,
        );
    }
}

run(Tree->new, title => "links");

# The controls a person changes: a box, a switch, a track, and the four
# choosers. Each hands its new value to the sub written on it.
use Rakugan;

class Settings {
    use Rakugan;
    field $dark   = false;
    field $wifi   = true;
    field $volume = 5.0;
    field @fruits = ("apple", "banana", "cherry");
    field $fruit  = 0;
    field @sizes  = ("small", "medium", "large");
    field $size   = 1;
    field @tabs   = ("General", "Details", "About");
    field $tab    = 0;
    field $note   = "";

    method panel {
        return text("general panel", size => 12) if $tab == 0;
        return text("details panel", size => 12) if $tab == 1;
        return text("about panel", size => 12);
    }

    method view {
        return column(
            checkbox("Dark mode", checked => $dark,
                     tooltip => "the whole window follows this",
                     on_change => sub ($on) { $dark = $on }),
            switch("Wi-Fi", checked => $wifi, on_change => sub ($on) { $wifi = $on }),
            slider(value => $volume, min => 0, max => 10, step => 1,
                   tooltip => "0 to 10, in whole steps",
                   on_change => sub ($v) { $volume = $v }),
            select(options => \@fruits, selected => $fruit,
                   on_change => sub ($i) { $fruit = $i }),
            radio_group(options => \@sizes, selected => $size,
                        on_change => sub ($i) { $size = $i }),
            tab_bar(labels => \@tabs, active => $tab,
                    on_change => sub ($i) { $tab = $i }),
            $self->panel,
            text_field($note, placeholder => "notes (enter writes a newline)",
                       multiline => true, rows => 3,
                       on_change => sub ($t) { $note = $t }),
            text("dark=$dark  wifi=$wifi  vol=@{[ sprintf('%.1f', $volume) ]}"),
            text("fruit#$fruit  size#$size  tab#$tab"),
            spacing => 10,
            padding => 14,
        );
    }
}

run(Settings->new, title => "forms", width => 460, height => 420);

# The two fields that hold a number rather than text: enter or leaving
# them commits, text that is not a number is dropped and the shown
# value returns to what the app holds.
use Rakugan;

class Order {
    use Rakugan;
    field $qty   = 1;
    field $price = 0.0;

    method reset {
        $qty = 1;
        $price = 0.0;
    }

    method view {
        return column(
            text("Order line", size => 18),
            row(
                text("quantity"),
                int_field($qty, min => 1, max => 99, placeholder => "qty",
                          on_change => sub ($n) { $qty = $n }),
                spacing => 8,
            ),
            row(
                text("unit price"),
                number_field($price, min => 0, max => 1000, step => 0.5,
                             placeholder => "price",
                             on_change => sub ($p) { $price = $p }),
                spacing => 8,
            ),
            text("total  @{[ $qty * $price ]}"),
            button("reset", on_click => sub { $self->reset }),
            spacing => 10,
            padding => 14,
        );
    }
}

run(Order->new, title => "quantities");

# spacer and divider: a filler and a rule. The header row's spacer
# pushes "ping" to the far edge; the footer's does the same for the
# count. divider draws the rules, the second one heavier and colored.
use Rakugan;

class Layout {
    use Rakugan;
    field $pings = 0;

    method view {
        column(
            row(
                text("Layout", size => 18),
                spacer(),
                button("ping", on_click => sub { $pings += 1 }),
            ),
            divider(),
            column(
                text("Section one", size => 14),
                text("spacer() takes the slack a row leaves behind."),
                divider(thickness => 2, color => "accent"),
                text("Section two", size => 14),
                text("divider() draws a rule across its parent."),
                spacing => 6,
            ),
            row(
                spacer(),
                text("pings: $pings"),
            ),
            spacing => 12,
            padding => 16,
        );
    }
}

run(Layout->new, title => "layout");

# A piece of screen with a name is a method that answers an element,
# and one that wraps other elements takes them after its own values.
use Rakugan;

class Cards {
    use Rakugan;
    field $a = 0;
    field $b = 0;

    method card :Sig(Str) ($title, @kids) {
        return column(
            text($title, size => 18),
            @kids,
            spacing => 4, padding => 8,
            border_width => 1, border_color => "accent", border_radius => 8,
        );
    }

    method view {
        return column(
            $self->card("counters",
                row(text("a: $a"),  button("+1",  on_click => sub { $a += 1 }),  spacing => 6),
                row(text("b: $b"),  button("+10", on_click => sub { $b += 10 }), spacing => 6),
            ),
            text("outside the card", size => 12),
            spacing => 10,
            padding => 16,
        );
    }
}

run(Cards->new, title => "cards");