Check if points of path are overlapping circle

Question

I'm using RaphaelJS to draw paths and circles, and I want to drag and drop a path so that both ends of the line/path are overlapping the circles.

How can I detect, when I drag a line/path is dragged, that both ends are overlapping circles (and, let's say, not the middle of the line)?

Circle:

    this.set = paper.set();
    this.shape = paper.circle(x, y, 10);
    paper.setStart();
    this.radius = 10;
    this.text = paper.text(x, y - 15, this.name);
    this.set[0].hover(
        function() {
            this.g = this.glow({
                color: "#fff",
                width: 20,
                opacity: .5
            });
            this.node.style.cursor = 'pointer';
        },
        function() {
            this.g.remove();
        }
    );

Line:

let connector = paper.path(`M ${startX} ${startY} l 0 25 l 25 50 L ${endX} ${endY}`);

let start = function () {
  this.odx = 0;
  this.ody = 0;
  this.animate({"fill-opacity": 0.2}, 500);
},
move = function (dx, dy) {
  this.translate(dx - this.odx, dy - this.ody);
  this.odx = dx;
  this.ody = dy;
},
drop = function () {
    this.animate({"fill-opacity": 1}, 500);
};

connector.drag(move, start, drop);

Answer 1

In the onend callback, you can retrieve the element with event.target which should be of type path. You can then retrieve the coordinates of the boundaries with path.getPointAtLength(0) and path.getPointAtLength(path.getTotalLength())

If you want to detect if one of the points is inside a circle, the condition is:

const circleX = ...;
const circleY = ...;
const circleRadius = ...;
const pointX = ...;
const pointY = ...;

// Is the distance between the point and the center of the circle inferior to the circle radius?
const isPointInsideCircle = Math.sqrt((circleX - pointX) ** 2 + (circleY - pointY) ** 2) < circleRadius;