look

tape
import ui from "ui";
import look from "look";
import widgets from "widgets";
import gfx from "gfx";

// A component that paints a button-looking area of its own
component Swatch {
    @tape { ui.drawable(); }
    prop label: string = "";

    fn paint(s: *gfx.Surface, x: i64, y: i64, w: i64, h: i64) {
        let c: *look.Canvas = widgets.on(s, x, y, w, h);   // a canvas over your bounds
        if (c == null) { return; }
        look.button(c, x, y, w, h, label, look.PRIMARY, look.HOVER);
        look.badge(c, x + 4, y + 4, "new", look.BADGE_ACCENT);
    }
}

look is what the widgets paint with: a function per control (button, input, checkbox, radio, toggle, slider, progress, tab, badge, list_item, sidebar_row, table_row, dialog, scrollbar, tooltip, card, …) and the primitives they share (fill_rect, blend_rect, border, label_at, caps_at, icon, blit). Each draws into a look.Canvas: the pixels, the type scale’s text contexts and some scratch memory. widgets.on(surface, x, y, w, h) gives you one over a component’s bounds, with the widgets’ fonts.

States are bits you combine in flags: look.HOVER, ACTIVE, FOCUS, DISABLED, CHECKED, SELECTED. Sizes are constants (look.CONTROL_H is a control’s 30 pixels, SCROLLBAR_W, TITLEBAR_H, …).

The colors are the active theme’s: look.palette() gives them as 0xRRGGBB (ink, surface, soft, accent, danger, …), read again whenever theme.set switches the theme, so whatever you draw with look turns dark with the widgets. The grays are the theme’s ink at an alpha (look.FG, MUTED, BORDER, HAIRLINE, …). The constants look.INK, look.SURFACE, look.ACCENT and the like are the light palette’s values, for when you need a fixed color.

look allocates nothing and draws only into the canvas it is handed.

Last modified: