Francisco Sant'Anna

A Toy Problem: Drag, Click, or Cancel

@fsantanna

Patrick Dubroy (@dubroy) proposed a toy problem to handle user input:

The goal is to implement a square that you can either drag and drop, or click. The code should distinguish between the two gestures: a click shouldn’t just be treated as a drop with no drag. Finally, when you’re dragging, pressing escape should abort the drag and reset the object back to its original position.

He proposed solutions using three different implementation techniques: Event listeners, Polling, and Process-oriented. For the process-oriented approach he uses his Esterel-inspired Abro.js and argues that it provides “a clear, explicit sequencing between the different states”.

Since he mentions Ceu and since I’m currently working on its upcoming version, I felt motivated to also post a solution to the problem. The solution in Ceu is similar to his, and uses the par-or and watching constructs to safely abort behaviors that did not complete. A small difference worth mentioning is relying on the deterministic scheduling semantics of Ceu to eliminate a state variable (didDrag). Here’s the solution with an accompanying video:

;; outer task with nested tasks to redraw, cancel, drag and drop, and click
spawn {
    ;; rectangle to control
    var rect :Rect = [[0,0],[10,10]]

    ;; task to redraw the rectangle in the current position
    spawn {
        every :Pico.Draw {
            pico-output-draw-rect(rect)
        }
    }

    ;; outer loop restarts after each behavior is detected
    loop {
        ;; 1. detects first click on the rectangle
        val click :XY = await(:Pico.Mouse.Button.Dn | pico.point-vs-rect?(it.pos,rect)) {
            ;; reads as "await mouse button down such that it is inside rect,
            ;;           then copy mouse position out"
            copy(it.pos)
        }
        val orig :Rect = copy(rect)
        println("... clicking ...")

        ;; 2. either cancel, drag/drop, or click
        par-or {
            ;; cancel task: restores the original position on key ESC
            await(:Pico.Key.Dn | it.key==:Key-Escape)
            set rect = copy(orig)
            println("!!! Cancelled !!!")
        } with {
            ;; drag/drop task: must be before click (see below)
            await(:Pico.Mouse.Motion)
            println("> dragging...")
            watching :Pico.Mouse.Button.Up { ;; terminates on mouse up
                ;; tracks mouse motion to move the rectangle
                every :Pico.Mouse.Motion {
                    set rect.pos.x = orig.pos.x + (it.pos.x - click.x)
                    set rect.pos.y = orig.pos.y + (it.pos.y - click.y)
                }
            }
            println("<<< Dragged!")
        } with {
            ;; click task: must be the last
            ;; otherwise conflicts with motion termination
            await(:Pico.Mouse.Button.Up)
            println("<<< Clicked!")
        }
    }
}

pico-loop()

Comment on @fsantanna.