java - JavaFX - ドラッグ可能なノードを線で接続

Question

ユーザーがモジュールを追加できるJavaFxでエディターを構築しています。各モジュールには、JavaFX サークルである多数の入力があり、ドラッグ アンド ドロップで移動できます。円の間には、(ある円の中心から別の円の中心への) 線があります。

私もこの質問を見ましたが、問題は、私の円が線が描かれているノードの子ではないということです.

したがって、次のコードがあります（境界線の描画に ControlsFX を使用しています）：

public class EditorTest extends Application
{

    private Pane editorPane;

    @Override
    public void start(Stage primaryStage) throws Exception 
    {
        VBox root = new VBox();
        MenuBar menuBar = new MenuBar();
        menuBar.getMenus().add(new Menu("Test"));
        editorPane = new Pane();

        root.getChildren().add(menuBar);
        root.getChildren().add(editorPane);

        editorPane.setPrefSize(1000, 700);

        initBindings();

        Scene scene = new Scene(root);

        editorPane.requestFocus();

        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private void initBindings()
    {
        editorPane.setOnMouseClicked((event) -> 
        {
            if (event.getButton() == MouseButton.SECONDARY)
            {
                Module moduleInput = new Module();
                Node inputGui = moduleInput.getGui();
                inputGui.setLayoutX(event.getX());
                inputGui.setLayoutY(event.getY());

                Module moduleOutput = new Module();
                Node outputGui = moduleOutput.getGui();
                outputGui.setLayoutX(event.getX() + 200);
                outputGui.setLayoutY(event.getY());

                Wire line = new Wire();
                line.setInput(moduleInput.getPort());
                line.setOutput(moduleOutput.getPort());

                editorPane.getChildren().add(inputGui);
                editorPane.getChildren().add(outputGui);
                editorPane.getChildren().add(line);
            }
        });
    }


    public static void main(String[] args)
    {
        launch(args);
    }

}

これは行のクラスです:

public class Wire extends Line
{

private Port input;
private Port output;

public Wire()
{
    super();
    setStroke(Color.GREEN);
    setStrokeWidth(3);
}

public void setInput(Port input)
{
    this.input = input;
    input.connectWire(this);
    update();
}

public void setOutput(Port output)
{
    this.output = output;
    output.connectWire(this);
    update();
}

public void update()
{
    if (input != null)
    {
        Point2D centerInput = input.localToScene(input.getCenterX(), input.getCenterY());
        System.out.println(centerInput);
        setStartX(centerInput.getX());
        setStartY(centerInput.getY());
    }

    if (output != null)
    {
        Point2D centerOutput = output.localToScene(output.getCenterX(), output.getCenterY());
        setEndX(centerOutput.getX());
        setEndY(centerOutput.getY());
    }
}

}

これは入力用です：

public class Port extends Circle
{

    private Wire connLine;

    public Port()
    {
        super(10, Color.ALICEBLUE);
        setStroke(Color.BLACK);
    }

    public void connectWire(Wire connLine)
    {
        this.connLine = connLine;
    }

    public void update()
    {
        if (connLine != null)
            connLine.update();
    }
}

これはモジュールです:

public class Module extends Pane
{
    private double oldX;
    private double oldY;

    private Port circle;

    public Module()
    {
        HBox root = new HBox(5);
        root.setAlignment(Pos.CENTER);
        circle = new Port();
        root.getChildren().add(circle);

        getChildren().add(root);
    }

    public Node getGui()
    {
        Node returnPane = Borders.wrap(this).lineBorder().title("Test").buildAll();

        returnPane.setOnMousePressed((event) ->
        {
            if (event.getButton() == MouseButton.PRIMARY)
            {
                oldX = returnPane.getLayoutX() - event.getSceneX();
                oldY = returnPane.getLayoutY() - event.getSceneY();
            }
        });

        returnPane.setOnMouseDragged((event) -> 
        {
            if (event.getButton() == MouseButton.PRIMARY)
            {
                double newX = event.getSceneX() + oldX;
                if (newX > 0 && newX < returnPane.getScene().getWidth()) 
                {
                    returnPane.setLayoutX(newX);
                }  
                double newY = event.getSceneY() + oldY;
                if (newY > 0 && newY < returnPane.getScene().getHeight()) 
                {
                    returnPane.setLayoutY(newY);
                }  
            }
        });

        returnPane.layoutXProperty().addListener((obs, newValue, oldValue) -> 
        {
            circle.update();
        });

        returnPane.layoutYProperty().addListener((obs, newValue, oldValue) -> 
        {
            circle.update();
        });

        return returnPane;
    }

    public Port getPort()
    {
        return circle;
    }
}

したがって、ローカル座標から親座標への変換updateのため、メソッドのどこかに問題があると思いますが、ローカルからシーンへの変換では、他のノードのために機能しません。また、モジュール gui の座標空間では正しいはずなので、Wireなぜ で動作しないのかわかりません...localToParent

私が理解できないもう1つの点は、最初にノードを移動する前に、線が常に間違った位置にある理由です。

その周りに を追加するScrollPaneと、さらに大きな問題が発生するため、スクロールした分だけ行がずれます。

では、座標を適切に変換して、線をポートの中心に接続するにはどうすればよいScrollPaneですか?