Merge pull request #504 from ThomasJClark/highlight-sockets

When dragging, visually disable sockets that can't be dragged onto

Author: JLLeitschuh

ui/src/main/java/edu/wpi/grip/ui/pipeline/SocketHandleView.java

@@ -10,7 +10,9 @@
 import edu.wpi.grip.core.events.ConnectionRemovedEvent;
 import edu.wpi.grip.core.events.SocketConnectedChangedEvent;
 import javafx.beans.property.BooleanProperty;
+import javafx.beans.property.ObjectProperty;
 import javafx.beans.property.SimpleBooleanProperty;
+import javafx.beans.property.SimpleObjectProperty;
 import javafx.css.PseudoClass;
 import javafx.scene.control.Button;
 import javafx.scene.control.Tooltip;
@@ -19,7 +21,6 @@
 import javafx.scene.input.TransferMode;
 
 import java.util.Collections;
-import java.util.Optional;
 import java.util.Set;
 import java.util.stream.Collectors;
 
@@ -30,6 +31,7 @@
  */
 public class SocketHandleView extends Button {
 
+    private static final PseudoClass DISABLED_PSEUDO_CLASS = PseudoClass.getPseudoClass("disabled");
     private static final PseudoClass CONNECTING_PSEUDO_CLASS = PseudoClass.getPseudoClass("connecting");
     private static final PseudoClass CONNECTED_PSEUDO_CLASS = PseudoClass.getPseudoClass("connected");
 
@@ -41,8 +43,8 @@ public class SocketHandleView extends Button {
      * connection to be made.
      */
     @Singleton
-    protected static final class SocketHandleDraggingSocketService {
-        private Optional<Socket> draggingSocket = Optional.empty();
+    protected static final class DragService {
+        private final ObjectProperty<Socket> socket = new SimpleObjectProperty<>(this, "socket");
     }
 
     final private BooleanProperty connectingProperty = new SimpleBooleanProperty(this, "connecting", false);
@@ -56,7 +58,7 @@ public interface Factory {
     SocketHandleView(EventBus eventBus,
                      Pipeline pipeline,
                      Connection.Factory<Object> connectionFactory,
-                     SocketHandleDraggingSocketService draggingSocketService,
+                     DragService dragService,
                      @Assisted Socket socket) {
         this.eventBus = eventBus;
         this.socket = socket;
@@ -92,20 +94,27 @@ public interface Factory {
             mouseEvent.consume();
 
             this.connectingProperty.set(true);
-            draggingSocketService.draggingSocket = Optional.of(this.socket);
+            dragService.socket.setValue(this.socket);
         });
 
         // Remove the "connecting" property (which changes the appearance of the handle) when the user moves the cursor
         // out of the socket handle or completes the drag.  If the user moves the cursor away, it only disables the
         // connecting property if it's not the socket that the user started dragging from, since that one is supposed
         // to be dragged away.
-        this.setOnDragExited(dragEvent ->
-                draggingSocketService.draggingSocket.ifPresent(other -> this.connectingProperty.set(this.socket == other)));
-        this.setOnDragDone(dragEvent -> this.connectingProperty.set(false));
+        this.setOnDragExited(dragEvent -> {
+            Socket<?> other = dragService.socket.getValue();
+            if (other != null) this.connectingProperty.set(this.socket == other);
+        });
+
+        this.setOnDragDone(dragEvent -> {
+            this.connectingProperty.set(false);
+            dragService.socket.setValue(null);
+        });
 
         // When the user drops the connection onto another socket, add a new connection.
         this.setOnDragDropped(dragEvent -> {
-            draggingSocketService.draggingSocket.ifPresent(other -> {
+            Socket<?> other = dragService.socket.getValue();
+            if (other != null) {
                 InputSocket inputSocket;
                 OutputSocket outputSocket;
 
@@ -127,17 +136,23 @@ public interface Factory {
                 }
                 final Connection connection = connectionFactory.create(outputSocket, inputSocket);
                 eventBus.post(new ConnectionAddedEvent(connection));
-            });
+            }
         });
 
         // Accept a drag event if it's possible to connect the two sockets
         this.setOnDragOver(dragEvent -> {
-            draggingSocketService.draggingSocket.ifPresent(other -> {
-                if (pipeline.canConnect(this.socket, other)) {
-                    dragEvent.acceptTransferModes(TransferMode.ANY);
-                    this.connectingProperty.set(true);
-                }
-            });
+            Socket<?> other = dragService.socket.getValue();
+            if (other != null && pipeline.canConnect(this.socket, other)) {
+                dragEvent.acceptTransferModes(TransferMode.ANY);
+                this.connectingProperty.set(true);
+            }
+        });
+
+        // While dragging, disable any socket that we can't drag onto, providing visual feedback to the user about
+        // what can be connected.
+        dragService.socket.addListener(observable -> {
+            Socket<?> other = dragService.socket.getValue();
+            pseudoClassStateChanged(DISABLED_PSEUDO_CLASS, other != null && !pipeline.canConnect(socket, other));
         });
     }
 

ui/src/test/java/edu/wpi/grip/ui/pipeline/OutputSocketControllerTest.java

@@ -34,7 +34,7 @@ public void start(Stage stage) {
         initiallyPreviewedOutputSocket = new InitiallyPreviewedOutputSocket("Initially previewed");
 
         final SocketHandleView.Factory socketHandleFactory
-                = socket -> new SocketHandleView(new EventBus(), null, null, new SocketHandleView.SocketHandleDraggingSocketService(), socket);
+                = socket -> new SocketHandleView(new EventBus(), null, null, new SocketHandleView.DragService(), socket);
         defaultOutputSocketController =
                 new OutputSocketController(socketHandleFactory, outputSocket);
         initiallyPreviewedOutputSocketController =