Joint JS - Detect Border Click / Resize Joint Js Elements

Question

Is there any way to detect the click on the borders of element, I want to write resize function to the element eg, Rectangle, i.e. when the border of the Rectangle is clicked call resize function, for the same I'm unable to trace the click on border of rectangle, can anyone pls help.

Thanks in Advance!

Mayuri

Answer 1

Detecting a click on the border is not possible in SVG, the target of the event is the whole element. However, you could detect that by knowing the stroke-width of the rectangle and the x, y coordinates of the click. You know the position of the rectangle and so this should be enough to decide whether it was the border that was clicked or not.

paper.on('cell:pointerdown', function(cellView, evt, x, y) {
    var bbox = cellView.getBBox();
    var strokeWidth = cellView.model.attr('rect/stroke-width') || 1;
    console.log(isBorderClicked(bbox, x, y, strokeWidth))
});

where the isBorderClicked() function detects whether it was the border that was clicked based on the above mentioned arguments.