If & else handles can connect to items in invalid ways.

Desired Behavior:

Allow if or else outputs to connect to multiple blocks.
Prevent connections where both if and else outputs connect to the same block.
Prevent cycles in the graph to avoid infinite loops.

Proposed Solution:

Implement connection validation logic to prevent invalid configurations:

Use isValidConnection on Handles:

Update the SourceHandle component to include an isValidConnection function that checks for invalid connections. This function should:
- Check if the target node is already connected to the other output (if or else) of the same logic block.
- Prevent the connection if it would result in both if and else outputs connecting to the same node.
- Check for potential cycles that could create infinite loops.
Pre-calculate Invalid Connections:

Perform validation during the connection attempt (onConnect event) rather than during dragging to avoid performance issues with animation frames.
Update Connectable State:

Dynamically set the connectable prop on the Handle components based on the validation results to prevent users from creating invalid connections.

Action Items:

Modify the SourceHandle component to include the isValidConnection prop with the validation function.
Implement the validation logic in the isValidConnection function.
Ensure that the validation checks are efficient to prevent any performance degradation.

Example Code Snippet:

// SourceHandle.ts
import React from "react";
import { Handle, Position } from "reactflow";
import { useSelector } from "react-redux";

const SourceHandle = ({ isVisible, nodeId, handleId }) => {
  const edges = useSelector((state) => state.reactFlow.edges);

  const isValidConnection = (connection) => {
    // Prevent connecting both 'if' and 'else' to the same target
    const existingConnections = edges.filter(
      (edge) =>
        edge.source === nodeId &&
        edge.target === connection.target &&
        edge.sourceHandle !== connection.sourceHandle
    );
    return existingConnections.length === 0;
  };

  return (
    <Handle
      type="source"
      position={Position.Right}
      id={handleId} // e.g., 'if' or 'else'
      isValidConnection={isValidConnection}
      style={{ visibility: isVisible ? "visible" : "hidden" }}
    />
  );
};

export default SourceHandle;

Notes:

Ensure that each handle (if and else) has a unique id to differentiate them.
The isValidConnection function accesses the current edges from the Redux store to check for existing connections.
Consider implementing cycle detection if necessary to prevent infinite loops.

softflow24 / data-river

If & else handles can connect to items in invalid ways. #132

⚠️ Search for existing issues first ⚠️

Which Operating System are you using?

Which version of data-river are you using?

Describe your issue.

Paste Error from Terminal/Console