Building a ChemDraw clone with DDD (Part III): Interacting with Atoms and Bonds

For a chemical draw to be truly functional, drawing isn't enough; the user must be able to interact with every element on the screen. Selecting an atom is intuitive, but how do you select a chemical bond (a line segment) with pixel-perfect precision? In this post, I'll break down the mathematical process and the challenges of implementing this collision engine. Selecting Atoms: The Easy Path Detecting if the cursor is over an atom is the ideal scenario. Since our domain already stores the (x, y) coordinates of each node, the solution is applying Euclidean distance . We calculate the separation between the mouse (P) and each atom (A) with the formula: d=(x2−x1)2+(y2−y1)2d = \sqrt{(x_2 - x_1)^2 + (y_2 - y_1)^2} d = ( x 2 ​ − x 1 ​ ) 2 + ( y 2 ​ − y 1 ​ ) 2 ​ . If the distance is shorter than a defined search radius, the atom is considered a candidate. To ensure precision, if multiple atoms are within range, we always select the one with the minimum distance. class Molecule { // ... priva