feat: highlight valid/invalid connection between nodes (#3266)

Change the inputs background to green/red to hint compatible connections, in adition to the `not-allowed` mouse cursor for incompatible connections
FlowiseAI · Sep 26, 2024 · d2d3f3d · d2d3f3d
1 parent 4381656
commit d2d3f3d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/packages/ui/src/views/canvas/index.css b/packages/ui/src/views/canvas/index.css
@@ -35,3 +35,13 @@
     flex-grow: 1;
     height: 100%;
 }
+
+.chatflow-canvas .react-flow__handle-connecting {
+  cursor: not-allowed;
+  background: #db4e4e !important;
+}
+
+.chatflow-canvas .react-flow__handle-valid {
+  cursor: crosshair;
+  background: #5dba62 !important;
+}
diff --git a/packages/ui/src/views/canvas/index.jsx b/packages/ui/src/views/canvas/index.jsx
@@ -554,6 +554,7 @@ const Canvas = () => {
                                 fitView
                                 deleteKeyCode={canvas.canvasDialogShow ? null : ['Delete']}
                                 minZoom={0.1}
+                                className='chatflow-canvas'
                             >
                                 <Controls
                                     style={{