Paper.js Mouseup Event Inhibited by Tool

I'm using Paper.js and I need to do something on mouseup on a raster. However the event does not seem to fire when I use the global tool space.

Note this sketch, where clicking and dragging yields a log something like this:

raster mousedown

raster mousedrag

... [more "raster mousedrag"] ...

raster mousedrag

raster mouseup

indicating the raster.on('mouseup' function() {...}); was hit properly, as expected.

However, in this sketch, which contains functionality for displaying the dragged area, the raster.on('mouseup' function() {...}); is not hit properly. Note that the log does not contain "raster mouseup", only "raster mousedown" and "raster mousedrag".

Why in the second instance does mouseup not fire on the raster? How can I adjust the code in the second sketch so that it does fire?

Well, the simple answer is that the problem is that the on('mouseup', ...) handler is never called. The paper code gets the most recent hit, i.e., the red rectangle you're drawing, and checks to see if that responds to the 'mouseup' event. It doesn't. Then it checks the parent chain and the parent of the red rectangle is the layer, so it doesn't pass the .responds test either. Because the raster is at the same level as the red rectangle handlers associated with the raster are never called.

The simplest answer is to install the handlers on the view, not the raster, by using the global tool, e.g.,

function onMouseUp(event) {
    console.log('vup');
}

See the paperjs code (in CanvasView.js):

function callEvent(view, type, event, point, target, lastPoint) {
    var item = target,
        mouseEvent;

    function call(obj) {
        if (obj.responds(type)) {
            if (!mouseEvent) {
                mouseEvent = new MouseEvent(type, event, point, target,
                        lastPoint ? point.subtract(lastPoint) : null);
            }
            if (obj.emit(type, mouseEvent) && mouseEvent.isStopped) {
                event.preventDefault();
                return true;
            }
        }
    }

    while (item) {
        if (call(item))
            return true;
        item = item.getParent();
    }
    if (call(view))
        return true;
    return false;
}