feat: dialogue editor will now highlight the selected node view

Author: AlmasB

fxgl-tools/src/main/kotlin/com/almasb/fxgl/tools/dialogues/DialoguePane.kt

@@ -245,7 +245,7 @@ class DialoguePane(graph: DialogueGraph = DialogueGraph()) : Pane() {
             }
         }
 
-        selectedNodeView.addListener { _, _, newNodeView -> onSelectedNodeViewChanged(newNodeView) }
+        selectedNodeView.addListener { _, oldNodeView, newNodeView -> onSelectedNodeViewChanged(oldNodeView, newNodeView) }
 
         initGraphListeners()
 
@@ -464,8 +464,14 @@ class DialoguePane(graph: DialogueGraph = DialogueGraph()) : Pane() {
         evaluateGraphConnectivity()
     }
 
-    private fun onSelectedNodeViewChanged(newNodeView: NodeView?) {
+    private fun onSelectedNodeViewChanged(oldNodeView: NodeView?, newNodeView: NodeView?) {
+        oldNodeView?.let { view ->
+            view.styleClass -= "dialogue-editor-node-view-selected"
+        }
 
+        newNodeView?.let { view ->
+            view.styleClass += "dialogue-editor-node-view-selected"
+        }
     }
 
     /**

fxgl-tools/src/main/resources/assets/ui/css/dialogue_editor.css

@@ -1,12 +1,16 @@
 .dialogue-editor-node-view {
-    -fx-border-color: azure;
+    -fx-border-color: black;
     -fx-border-width: 2;
     -fx-border-style: solid;
     -fx-border-radius: 5 5 5 5;
     -fx-background-radius: 10 10 10 10;
     -fx-background-color: rgba(0, 0, 0, 0.55);
 }
 
+.dialogue-editor-node-view-selected {
+    -fx-border-color: azure;
+}
+
 .dialogue-editor-node-view .title {
     -fx-border-color: transparent;
     -fx-border-width: 2;