JavaFX proximity detection not working

Question

I have been trying to figure out how to get two nodes to sense when they are close to each other and then snap together but can't make it work correctly. Basically, I have an AnchorPane that I am dropping new Nodes onto. The new nodes are also anchor panes with several other components on them. When I drop the Node I save anchor points along the outer edge. Then, when I drag another Node next to it, the sides will light up indicating the other node is in range.

I am attempting to make a node that is being dragged next to another node snap to that node. I cannot seem to get the coordinates to translate correctly between each other and I am just ending up with random placement and edge detection.

Here is my code where I am saving the anchor points for the nodes:

double kromaDeviceWidth = kromaDevice.getBoundsInParent().getWidth();
double kromaDeviceHeight = kromaDevice.getBoundsInParent().getHeight();
//This x,y represents the top left corner of the node
double kromaDeviceX = kromaDevice.localToParent(0.0, 0.0).getX();
double kromaDeviceY = kromaDevice.localToParent(0.0, 0.0).getY();

kromaDevice.setTopAnchorPoint(new double[]{kromaDeviceX + kromaDeviceWidth / 2, kromaDeviceY});
kromaDevice.setRightAnchorPoint(new double[]{kromaDeviceX + kromaDeviceWidth, kromaDeviceY + kromaDeviceHeight / 2});
kromaDevice.setBottomAnchorPoint(new double[]{kromaDeviceX + kromaDeviceWidth / 2, kromaDeviceY + kromaDeviceHeight});
kromaDevice.setLeftAnchorPoint(new double[]{kromaDeviceX, kromaDeviceY + kromaDeviceHeight / 2});

The code is identical for when I initially drop a new node and when I am dragging the node. Then, I compare the two node's anchor positions to tell if they are within range:

if (Math.abs(bottomAnchorX - topAnchorPointX) <= ANCHOR_DISTANCE && Math.abs(bottomAnchorY - topAnchorY) <= ANCHOR_DISTANCE) {
    ....show correct edge highlight
}

I simplified the above if statement as I am using arrays to store and recall the anchor points.

Here is an image of what I am seeing:

You can see the slight yellow highlight when I drag one node over the other when it is offset. It should detect the other node when it is in the position in the second image. My next issue is trying to get them to snap to the right coordinates.

droppedKromaDevice.setLayoutX(parentKromaDevice.getLayoutX());
droppedKromaDevice.setLayoutY(parentKromaDevice.getLayoutY() - droppedKromaDevice.getBoundsInParent().getHeight());

I tried the above with both getLayoutX() and localToParent(0,0).getX() and they produce the same result. If I place two nodes that are exactly the same size than it actually works but if the are different sizes at all than it places them offset from each other. If I subtract the height from the y it should matter the size.

Please help. I have been trying to get this to work right for 3 days now and have tried everything I can think of.

Update:

I figured out my proximity issue. The layout for the new node was not being set right. I tried doing a Platform.runLater before I saved the anchor points of the new node but that had no impact. I fixed it by setting the anchor points for all of the nodes in the pane when I click on a node to drag it. That saved the anchor points correctly.

This however did not fix my issue of nodes of different sizes not laying out in the pane correctly. Here is a screenshot of two nodes of the same size snapping together correctly and two nodes of different sizes not snapping correctly. This makes no sense as the math should be the same.

Here is the code to set the layout for the dropped node relative to the other node:

droppedKromaDevice.setLayoutX(parentKromaDevice.getLayoutX());
droppedKromaDevice.setLayoutY(parentKromaDevice.getLayoutY() - droppedKromaDevice.getBoundsInParent().getHeight());

Answer 1

I found the solution to my two problems.

First, when I was creating new nodes and dropping them on the panel the bounds were not being evaluated correctly so my anchor points were off. I just changed it so when I click on a node to drag it around I loop through all of the other nodes on the panel and build their anchors instead of when I first drop/create it.

Second, in order to get the snap positioning to work accurately I had to base their layout on the delta between the opposite anchor points and not on the bounds of the node. Basically, I get the current x/y of the node I am dropping and than move it using the delta between the dropped node and the node I need to snap it to. The code below is what I used. 0 represents the x coordinate and 1 represents the y coordinate in the array

droppedKromaDevice.setLayoutX(droppedKromaDevice.getLayoutX() - droppedKromaDevice.getBottomAnchorPoint()[0] + parentKromaDevice.getTopAnchorPoint()[0]);
droppedKromaDevice.setLayoutY(droppedKromaDevice.getLayoutY() - droppedKromaDevice.getBottomAnchorPoint()[1] + parentKromaDevice.getTopAnchorPoint()[1]);