6.4 - MouseController

The mouse control has a very simple api:

const mouse = new Mouse(model, view, callback)

where callback is a function that is called each event of the mouse. The callback should manage three events: mousedown, mousedrag, mouseup.

Here is a common mouse usage: grab the nearest turtle and move it while the mouse is dragged, and stops when the moused button is let up.

It works by having a variable, selectedTurtle that is calculated each mousedown. It moves the selectedTurtle during mousedrag. It quits on mouseup.

let selectedTurtle
const mouse = new Mouse(model, view, mouse => {
    const { x, y, action } = mouse
    switch (action) {
        case 'mousedown':
            selectedTurtle = model.turtles.minOneOf(t => t.distanceXY(x, y))

        case 'mousedrag':
            if (selectedTurtle) selectedTurtle.setxy(x, y)

        case 'mousemove':
            selectedLink = model.links.minOneOf(l => l.distanceXY(x, y))

        case 'mouseup':
            selectedTurtle = null

This model shows the Mouse control usage.