scala - scalafxの異なるコンテナに動的にレイアウトされたノード間に矢印を描く

Question

ScalaFX を使用してツリー ダイアグラムを描画しようとしています - それらの間に矢印があるノード。

レイアウトを簡単にするために、標準の ScalaFX レイアウト コンテナー (HBox や VBox など) を使用して各ブランチをネストしています。

線を描画する良い方法がわかりません。特に、線の始点と終点のプロパティを、それらが接続するノードのプロパティにバインドします。それらが同じコンテナにあれば、簡単です。次のようなことができます

startX <== start.centerX

ただし、それらが異なるコンテナにある場合は機能しません。シーンに関連するコンポーネントを見つける必要があります。

最小限の例が添付されています-実際、Arrowのバインディングを機能するものに置き換えるものを探しています。できれば、きれいな ScalaFX リスナー スタイルのやり方にとどまりたいと思っています。

編集: 現在の動作は、一番上のノードから左方向に水平線を描画することです。座標は、コンテナーのシーン座標に一致するように変換されていません。その方法がわかりません。

package com.moseph.artifacts.visualisation

import scalafx.Includes._
import scalafx.scene.layout._
import scalafx.application.JFXApp
import scalafx.scene.Scene
import scalafx.scene.shape.Circle
import scalafx.scene.shape.Line
import javafx.geometry.Insets

object TestVisualiser extends JFXApp { self =>
  val nodes = new Nodes
  stage = new JFXApp.PrimaryStage {
    title = "Test Visualiser"; width = 500; height = 1000
    scene = new Scene {
      root = new StackPane {
      content = Seq( nodes , new Pane {
       content = Seq( new Arrow( nodes.a.circ, nodes.b.circ ), new Arrow( nodes.a.circ, nodes.b.circ )) 
      } ) 
      }
    }
  }
}

class Nodes extends VBox { nodes =>
  minWidth = 100
  val a = new TNode
  val b = new TNode
  val c = new TNode
  val d = new TNode
  content = Seq( a, new HBox{ content = Seq( b, c, d) } )
}

class TNode extends Pane { node =>
  val circ = new Circle { radius = 10; centerX <== node.width/2; centerY = 5}
  content = circ
  padding = new Insets(50)
}

class Arrow(from:Circle,to:Circle) extends Line {
  startX <== from.centerX + from.translateY + from.layoutY
  startY <== from.centerY + from.translateY + from.layoutY
  endX <== to.centerX + to.translateX + to.layoutX
  endY <== to.centerY + to.translateY + to.layoutY
}