feat: dialogue editor will now highlight the selected node view

AlmasB · AlmasB · commit 4cc230028b64 · 2023-12-02T14:55:37.000Z
diff --git a/fxgl-tools/src/main/kotlin/com/almasb/fxgl/tools/dialogues/DialoguePane.kt b/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"
+        }
     }
 
     /**
diff --git a/fxgl-tools/src/main/resources/assets/ui/css/dialogue_editor.css b/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;

Original file line number	Diff line number	Diff line change
`@@ -245,7 +245,7 @@ class DialoguePane(graph: DialogueGraph = DialogueGraph()) : Pane() {`
`245`	`245`	`}`
`246`	`246`	`}`
`247`	`247`
`248`		`- selectedNodeView.addListener { _, _, newNodeView -> onSelectedNodeViewChanged(newNodeView) }`
	`248`	`+ selectedNodeView.addListener { _, oldNodeView, newNodeView -> onSelectedNodeViewChanged(oldNodeView, newNodeView) }`
`249`	`249`
`250`	`250`	`initGraphListeners()`
`251`	`251`
`@@ -464,8 +464,14 @@ class DialoguePane(graph: DialogueGraph = DialogueGraph()) : Pane() {`
`464`	`464`	`evaluateGraphConnectivity()`
`465`	`465`	`}`
`466`	`466`
`467`		`- private fun onSelectedNodeViewChanged(newNodeView: NodeView?) {`
	`467`	`+ private fun onSelectedNodeViewChanged(oldNodeView: NodeView?, newNodeView: NodeView?) {`
	`468`	`+ oldNodeView?.let { view ->`
	`469`	`+ view.styleClass -= "dialogue-editor-node-view-selected"`
	`470`	`+ }`
`468`	`471`
	`472`	`+ newNodeView?.let { view ->`
	`473`	`+ view.styleClass += "dialogue-editor-node-view-selected"`
	`474`	`+ }`
`469`	`475`	`}`
`470`	`476`
`471`	`477`	`/**`