The Mouse Area Widget

The mouse_area widget wraps a child and captures mouse events within its bounds. Use it to add click, hover, and movement tracking to any widget.

Interface

type MouseButton = [`Left, `Right, `Middle];

val mouse_area: fn(
  ?#on_press: fn(MouseButton) -> Any,
  ?#on_release: fn(MouseButton) -> Any,
  ?#on_enter: fn(null) -> Any,
  ?#on_exit: fn(null) -> Any,
  ?#on_move: fn({x: f64, y: f64}) -> Any,
  &Widget
) -> Widget

Parameters

• on_press — called when a mouse button is pressed inside the area. Receives a MouseButton variant (`Left, `Right, or `Middle).
• on_release — called when a mouse button is released inside the area. Receives a MouseButton variant.
• on_enter — called when the mouse cursor enters the area
• on_exit — called when the mouse cursor leaves the area
• on_move — called with {x, y} coordinates as the mouse moves within the area

The positional argument is a reference to the child widget.

Examples

use gui;
use gui::text;
use gui::mouse_area;
use gui::container;
use gui::column;
mod icon;

let status = "Move the mouse over the box";
let position = "---";

[&window(
    #icon: &icon::icon,
    #title: &"Mouse Area",
    &column(
        #spacing: &15.0,
        #padding: &`All(30.0),
        #width: &`Fill,
        &[
            text(#size: &24.0, &"Mouse Area Demo"),
            text(&status),
            text(&"Position: [position]"),
            mouse_area(
                #on_press: |btn| status <- btn ~ select btn {
                    `Left => "Left pressed",
                    `Right => "Right pressed",
                    `Middle => "Middle pressed"
                },
                #on_release: |btn| status <- btn ~ select btn {
                    `Left => "Left released",
                    `Right => "Right released",
                    `Middle => "Middle released"
                },
                #on_enter: |e| status <- e ~ "Mouse entered",
                #on_exit: |e| status <- e ~ "Mouse exited",
                #on_move: |pos| position <- pos ~ "[pos.x], [pos.y]",
                &container(
                    #width: &`Fixed(300.0),
                    #height: &`Fixed(200.0),
                    #halign: &`Center,
                    #valign: &`Center,
                    &text(&"Interact here")
                )
            )
        ]
    )
)]

See Also

• Keyboard Area — keyboard event capture
• Button — simpler click handling
• Tooltip — hover-triggered popups