paperjs select items and delete on mouse click

Question

I want to create select an item and delete it when its needed.

For example:-

I have a line and a rectangle on a canvas, If the user wants to delete it how can I do it?

I can track the click event but what happens if there is a overlap with other items.

HTML

jquery/paperjs

$(document).ready(function(){

paper.install(window)
paper.setup('myCanvas')
var tool = new Tool();
tool.minDistance = 10

project.currentStyle = {
        strokeColor: 'red',
        fillColor: '#ff0000',
        strokeWidth: 3
    };


 var from = new Point(20, 20);
var to = new Point(80, 80);
var path = new Path.Line(from, to);


var rectangle = new Rectangle(new Point(100, 100), new Point(150, 150));
var path = new Path.Rectangle(rectangle);
path.fillColor = '#e9e9ff';
//path.selected = true;

})

http://jsfiddle.net/nak7zbpw/1/

Answer 1

I'm not quite sure what you're trying to do - the code doesn't handle the click events and I'm not sure what aspects of overlap concern you.

But here's something that might be helpful.

rectangle.onClick = function (e) {
    // do what you need to do, like delete the item
}

If the rectangle doesn't have a fill color then you can't click on the interior of it so you have to do something like:

view.onClick = function (e) {
    if (rectangle.contains(e.point)) {
        // do what you need to do
    }
}

You can also set a color and make the alpha very low so it doesn't show up.

The last item you've drawn is at the top of the layer, so that is what will get the click if multiple items share the same point. How you handle that is up to you. You can use rectangle.hitTest(e.point) if it is not at the top of the layer. Or you can use layer.hitTestAll(e.point) or group.hitTestAll(e.point) if you want to keep all your logic to check hits on items in one place.

I'd probably do something like make the item selected on click and then display a trash can or something. If they click the trash can then delete the selected item. That way they can change what is selected until it's right. But if you want to do it in one step then you just have to decide how to handle it.

Here's a sketch showing some onClick handling.