ポインタ イベント

{let f1:Frame = {Frame background="beige", width=2cm, height=.5cm}}
{let f2:Frame = {Frame background="beige", width=2cm, height=.5cm}}
{let c:Canvas =
    {Canvas background={url "curl://install/docs/default/images/adria.jpg"},
        width=2cm, height=2cm,
        {on e:PointerMotion do
            {f1.add {format "(%.1f, %.1f)", e.x/1mm, e.y/1mm}, replace?=true}
        }
    }
}
{value
    {c.add x=6mm, y=8mm,
        {Frame width=3mm, height=3mm, opaque-to-events?=true,
            {on e:PointerMotion do {f2.add "left eye", replace?=true}}
        }
    }
    {c.add x=10mm, y=8mm,
        {Frame width=3mm, height=3mm, opaque-to-events?=true,
            {on e:PointerMotion do {f2.add "right eye", replace?=true}}
        }
    }
    {c.add x=8mm, y=10mm,
        {Frame width=3mm, height=3mm, opaque-to-events?=true,
            {on e:PointerMotion do {f2.add "nose", replace?=true}}
        }
    }
    {c.add x=7mm, y=12mm,
        {Frame width=5mm, height=3mm, opaque-to-events?=true,
            {on e:PointerMotion do {f2.add "mouth", replace?=true}}
        }
    }
    {VBox f1, f2, c}
}

{let r:HBox = {HBox spacing=3pt, "Events:"}}
{value r}{br}
{Frame margin=.125in, background="red",
    {Frame margin=.125in,
        background={url "curl://install/docs/default/images/adria.jpg"},
        {Frame width=.6in, height=.6in,
            || opaque-to-events?=true,
            border-width=.125in, border-color="yellow",
            {on e:PointerPress do
                {r.add "Yellow"}
                {e.consume}
            }
        },
        {on e:PointerPress do
            {r.add "Picture"}
            {e.consume}
        }
    },
    {on e:PointerPress do
        {r.add "Red"}
        {e.consume}
    }
}

{value
    let rect:RectangleGraphic =
        {RectangleGraphic width=64pt, height=64pt,
                   || attach an event handler to the RectangleGraphic
                   {on e:PointerMotion at r:RectangleGraphic do
                       let x-value:int = {max 0, {min 255, 4 * e.x/1pt}} asa int
                       let y-value:int = {max 0, {min 255, 4 * (-e.y/1pt)}} asa int
                       || Change fill color of RectangleGraphic
                       set r.fill-color =
                           {Color.from-string
                               {format "#%02x%02x00", x-value, y-value}}
                       || Checks if the Ctrl key is pressed
                       || If so, it consumes the event
                       {if e.ctrl? then {e.consume}}}}
    let frame:Frame =
        {Frame
            border-width=18pt,
            rect,
            || attach an event handler to the Frame
            {on e:PointerMotion at f:Frame do
                let x-value:int = {max 0, {min 255, 4 * e.x/1pt}} asa int
                let y-value:int = {max 0, {min 255, 4 * (-e.y/1pt)}} asa int
                || Change border color of Frame
                set f.border-color =
                    {Color.from-string
                        {format "#00%02x%02x", x-value, y-value}}}}
    frame}

{RectangleGraphic width=1in, height=0.5in,
    {on e:PointerPress at r:RectangleGraphic do
        {if e.button == left-button then
            {if e.click-count == 1 then
                set r.width = 2in
             else
                set r.width = 1in
            }
        }
    }
}

{let frame-inside-status:Visual = {text-part not\ }}
{let frame-leaf-status:Visual = {text-part not\ }}

{let test-frame:Frame =
    {Frame
        border-width=12pt,
        border-color="cyan",
        {RectangleGraphic width=36pt, height=18pt},
        {on PointerEnter do
            {frame-inside-status.clear}
            {frame-inside-status.add ""}
        },
        {on PointerLeave do
            {frame-inside-status.clear}
            {frame-inside-status.add "not "}
        },
        {on PointerLeafEnter do
            {frame-leaf-status.clear}
            {frame-leaf-status.add ""}
        },
        {on PointerLeafLeave do
            {frame-leaf-status.clear}
            {frame-leaf-status.add "not "}
        }
    }
}


{HBox
    spacing=12pt,
    valign="center",
    test-frame,
    {VBox spacing=3pt,
        {text We are {value frame-inside-status}somewhere inside the Frame},
        {text We are {value frame-leaf-status}directly over the Frame}
    }
}

{value
    let rect:RectangleGraphic =
        {RectangleGraphic
            width=64pt,
            height=64pt,
            || The RectangleGraphic color changes as the pointer moves
            || over the RectangleGraphic because PointerMotion fires at rect
            {on e:PointerMotion at r:RectangleGraphic do
                let x-value:int = {max 0, {min 255, 4 * e.x/1pt}} asa int
                let y-value:int = {max 0, {min 255, 4 * (-e.y/1pt)}} asa int
                set r.fill-color =
                    {Color.from-string
                        {format "#%02x%02x00", x-value, y-value}}
                {if e.ctrl? then {e.consume}}
            }
        }
    let frame:Frame =
        {Frame
            border-width=18pt,
            rect,
            || The border color of the Frame changes as the pointer moves
            || over it because PointerMotion fires at frame
            {on e:PointerMotion at f:Frame do
                let x-value:int = {max 0, {min 255, 4 * e.x/1pt}} asa int
                let y-value:int = {max 0, {min 255, 4 * (-e.y/1pt)}} asa int
                set f.border-color =
                    {Color.from-string
                        {format "#00%02x%02x", x-value, y-value}}
            },
            || When user presses mouse button over frame,
            || implicit pointer grabbing begins with frame
            || as the grab object
            {on e:PointerPress at f:Frame do
                {e.continue-implicit-pointer-grab f}
            },
            || When the implicit pointer grab ends,
            || a message pops up, stating so
            {on e:GrabRelease at f:Frame do
                {popup-message {bold The Frame has ungrabbed the pointer!}}
            }
        }
    frame
}

{Frame
    width=1in, height=1in,
    background="green",
    {on pp:PointerPress at f:Frame do
        {pp.continue-implicit-pointer-grab f}
        set f.background="pink"
    },
    {on gr:GrabRelease at f:Frame do
        {set f.background="green"}
    }
}

{value let frame:Frame=
    {Frame
        width=1in, height=1in,
        background="green",
        {on pp:PointerPress at f:Frame do
            {pp.continue-implicit-pointer-grab f}
            set f.background="pink"
        },
        {on ds:DragStarted at f:Frame do
            {{get-gui-manager}.grab-pointer f}
            {Alarm
                delay=3s,
                {proc {}:void
                    {{get-gui-manager}.release-pointer-grab frame}
                }
            }
        },
        {on gr:GrabRelease at f:Frame do
            {set f.background="green"}
        }

    }
    frame
}