fixes dragging pins on main i/o (#183)

flydelabs · Jan 26, 2025 · 810abb2 · 810abb2
1 parent 90be743
commit 810abb2
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 10 deletions.
diff --git a/flow-editor/src/visual-node-editor/VisualNodeEditor.tsx b/flow-editor/src/visual-node-editor/VisualNodeEditor.tsx
@@ -1135,27 +1135,37 @@ export const VisualNodeEditor: React.FC<VisualNodeEditorProps & { ref?: any }> =
       const onNodeIoMouseDown = React.useCallback<
         NodeIoViewProps["onMouseDown"]
       >((id, type) => {
-        // drag to connect disabled in node io pins as they conflict with the drag to move
-        // whole concept of "Node IO" probably needs to be rethought
+        if (type === "input") {
+          setDraggedConnection({
+            to: externalConnectionNode(id),
+            from: undefined,
+          });
+        } else {
+          setDraggedConnection({
+            from: externalConnectionNode(id),
+            to: undefined,
+          });
+        }
       }, []);
 
       const onNodeIoMouseUp = React.useCallback<NodeIoViewProps["onMouseUp"]>(
         (id, type) => {
           if (draggedConnection) {
-            if (draggedConnection.from && type === "output") {
+            if (draggedConnection.from && type === "input") {
               onConnectionClose(
                 draggedConnection.from,
                 externalConnectionNode(id),
                 "nodeIoPinDrag"
               );
-            } else if (draggedConnection.to && type === "input") {
+            } else if (draggedConnection.to && type === "output") {
               onConnectionClose(
                 externalConnectionNode(id),
                 draggedConnection.to,
                 "nodeIoPinDrag"
               );
             }
           }
+          setDraggedConnection(null);
         },
         [draggedConnection, onConnectionClose]
       );

diff --git a/flow-editor/src/visual-node-editor/node-io-view/NodeIoView.tsx b/flow-editor/src/visual-node-editor/node-io-view/NodeIoView.tsx
@@ -235,14 +235,16 @@ export const NodeIoView: React.FC<NodeIoViewProps> = React.memo(
 
     const _onMouseUp = React.useCallback(
       (e: React.MouseEvent) => {
-        onMouseUp(id, type, e);
+        const reversedType = type === "input" ? "output" : "input";
+        onMouseUp(id, reversedType, e);
       },
       [id, onMouseUp, type]
     );
 
     const _onMouseDown = React.useCallback(
       (e: React.MouseEvent) => {
-        onMouseDown(id, type, e);
+        const reversedType = type === "input" ? "output" : "input";
+        onMouseDown(id, reversedType, e);
       },
       [id, onMouseDown, type]
     );
@@ -266,8 +268,14 @@ export const NodeIoView: React.FC<NodeIoViewProps> = React.memo(
             onToggleBreakpoint={noop}
             onInspect={noop}
             description={description}
-            onMouseUp={(pinId, pinType, e) => _onMouseUp(e)}
-            onMouseDown={(pinId, pinType, e) => _onMouseDown(e)}
+            onMouseUp={(pinId, pinType, e) => {
+              e.stopPropagation();
+              _onMouseUp(e);
+            }}
+            onMouseDown={(pinId, pinType, e) => {
+              e.stopPropagation();
+              _onMouseDown(e);
+            }}
             isMain={true}
           />
         ) : (
@@ -285,8 +293,14 @@ export const NodeIoView: React.FC<NodeIoViewProps> = React.memo(
             onToggleBreakpoint={noop}
             onInspect={noop}
             description={description}
-            onMouseUp={(pinId, pinType, e) => _onMouseUp(e)}
-            onMouseDown={(pinId, pinType, e) => _onMouseDown(e)}
+            onMouseUp={(pinId, pinType, e) => {
+              e.stopPropagation();
+              _onMouseUp(e);
+            }}
+            onMouseDown={(pinId, pinType, e) => {
+              e.stopPropagation();
+              _onMouseDown(e);
+            }}
             onToggleSticky={noop}
             isSticky={false}
             queuedValues={0}