'How to connect by line draggable item in JavaFX application

I'm trying to write simple graph visualization application. An meet the following obstacle. In case I have two node and one node was dragged to another position, my class is not able to calculate correct coordinate on target node. Each node has a few properties for example text inside node. So in this case node is StackPane with Rectangle Shape abd Text object ibside Rectangle.

The event handler are

private void onMousePressedHandler(MouseEvent event, final ContextMenu topicContextMenu) {
        MouseButton button = event.getButton();
        switch (button) {
            case PRIMARY:
                log.debug("Pressed xProperty = " + this.topicTextString + " " + topicRectangle.getX());
                log.debug("Pressed yProperty = " + this.topicTextString + " " + topicRectangle.getY());
                this.topicPanel.getScene().setCursor(Cursor.MOVE);
                this.dragContext.setX(event.getX());
                this.dragContext.setY(event.getY());
                this.topicRectangle.setX(event.getX());
                this.topicRectangle.setY(event.getY());

                event.consume();
                break;
            case SECONDARY:
                topicContextMenu.show(this.topicPanel, event.getScreenX(), event.getScreenY());
                event.consume();
                break;
            case MIDDLE:
                event.consume();
            default:
                event.consume();
                break;
        }
    }
private void onMouseDraggedHandler(MouseEvent event) {
        if (event.getButton() == MouseButton.PRIMARY) {
            double currentX = event.getX();
            double currentY = event.getY();
            this.topicPanel.setTranslateX(currentX - this.dragContext.getX());
            this.topicPanel.setTranslateY(currentY - this.dragContext.getY());
            this.topicRectangle.setX(currentX);
            this.topicRectangle.setY(currentY);
        } 
        event.consume();
    }
    private void onMouseReleasedHandler(MouseEvent event) {
        if (!event.isPrimaryButtonDown()) {
            this.topicPanel.getScene().setCursor(Cursor.DEFAULT);
        }
        log.debug("Released xProperty = " + this.topicTextString + " " + topicRectangle.getX());
        log.debug("Released yProperty = " + this.topicTextString + " " + topicRectangle.getY());
    }

I tried to calculate start and end of line using something like

 newSourceConnectionPointX = shapeSource.xProperty().doubleValue() + shapeSource.widthProperty().doubleValue();
            newSourceConnectionPointY = shapeSource.yProperty().doubleValue() + (shapeSource.heightProperty().doubleValue() / 2.0);
            newTargetConnectionPointX = shapeTarget.xProperty().doubleValue();
            newTargetConnectionPointY = shapeTarget.yProperty().doubleValue() + (shapeTarget.heightProperty().doubleValue() / 2.0);

If I created new node and immediately create line start and ends line calculated correctly I have the following picture

enter image description here

If node is draggable I have

enter image description here

In this case line ends on bottom of node instead of expected end on the left side of node. I suppose that the problem is in correction coordinate calculation during dragging

I hope on you help.Thanks in advance I use OpenJDK 17.0.2



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source