Find element at x,y position in Cytoscape.js

Question

I have graph that allows a drop of external divs onto the canvas to add new objects. Within this drop event I need to determine if the mouse was over an existing node or edge. This is currently being done by manually by looping through nodes and checking renderedPosition, renderedOuterWidth, and renderedOuterHeight.

It doesn't look like edges can be checked the same way but even if they could I would only want to find the edge if the position was close to the line, not the bounding box.

Is it possible to find any element by x,y coordinate, or is it possible to trigger a click event providing pageX and pageY so Cytoscape will run it's own hit testing logic and the selected element can be found after?

Answer 1

It's a two step process:

(1) Determine whether the point is within the rendered bounding box of the element, and if so...

(2) If the element is an edge, do a straight line distance approximation. You can compare distance squares to make this less expensive. If you're using curved bezier edges, you may want to compare to two lines -- where each line intersects a node and half the distance to the control point.

I've also added a ticket to make this usecase a bit easier, but you should do the above for now.