Event handlers in Paper.js

Question

I am new to Paper.js, and I was wondered by the event system, while reading tutorial. Thats how event hanling described in tutorial:

var path;
function onMouseDown(event) {
    // Create a path:
    path = new Path();
    path.strokeColor = 'black';
    // Add the mouse down position:
    path.add(event.point);
}

function onMouseUp(event) {
    // Add the mouse up position:
    path.add(event.point);
}

So, its just functions in global namespace...
Eventually I have a few questions about it, and I didnt found anything on the internet on this:
- How to bind event handler to particular canvas?
- How to bind event handler to particular "object" (raster image, rectangle, etc)?
- How to bind multiple event handlers to something?

Answer 1

I'm new to Paperjs, but here is what I think:

• How to bind event handler to particular canvas?

The scope is automatically associated to a canvas when you specify your canvas to a script:

<script type="text/paperscript" src="js/myScript.js" canvas="myCanvas"></script>

Each instruction of this script will be associated to this canvas.

• How to bind event handler to particular "object" (raster image, rectangle, etc)?

Depending on is type each "object" have is sets of events handlers available. The reference page will give you all the events handlers for each type of objects.

• How to bind multiple event handlers to something?

For example PathItem have a click event and a double click event.

var path = new Path.Circle();

path.onClick = function(event) {
    this.fillColor = 'red';
}

path.onDoubleClick = function(event) {
    this.fillColor = 'green';
}

Answer 2

You can bind multiple event handlers using the attach() method (or its jQuery-style alias, on()). You can remove them with detach() or off(). Here's a modified example from the event handling documentation:

// Create a circle shaped path at the center of the view:
var path = new Path.Circle({
    center: view.center,
    radius: 25,
    fillColor: 'black'
});

var shiftPath = function() {
    this.position += new Point(15,15);
};

// When the mouse enters the item, set its fill color to red:
path.attach('mouseenter', function() {
    this.fillColor = 'red';
});

path.on('mouseenter', shiftPath);

// When the mouse leaves the item, set its fill color to black
// and remove the mover function:
path.on('mouseleave', function() {
    this.fillColor = 'black';
    path.detach('mouseenter', shiftPath);
});

If you want to set an event handler for all instances of a type of object, it's best to create a factory function, as per this answer.