React Flowchart Builder

Build a visual flowchart creation tool using React and TypeScript. This application will allow users to add different types of flowchart nodes, connect them with arrows, and arrange them on a canvas. This is a fundamental building block for many diagramming and workflow management tools.

Problem Description

Your task is to implement a React component that acts as a basic flowchart builder. Users should be able to:

1. Add Nodes: Add different types of flowchart elements (e.g., Start, Process, Decision, End) to the canvas.
2. Select and Move Nodes: Select individual nodes and drag them around the canvas to reposition them.
3. Connect Nodes: Draw directed connections (arrows) between nodes. A connection should originate from an output point of one node and point to an input point of another.
4. Delete Nodes and Connections: Remove selected nodes and their associated connections, or delete individual connections.
5. Visual Representation: Nodes should have distinct visual styles based on their type, and connections should be clearly represented by arrows.

Key Requirements:

• Component-Based Architecture: Utilize React's component model for a modular and maintainable structure.
• TypeScript: Implement the solution using TypeScript for strong typing and improved developer experience.
• State Management: Manage the state of nodes, their positions, and connections effectively.
• User Interaction: Handle mouse events for dragging, connecting, and deleting.

Expected Behavior:

• Clicking a "Add Node" button (or similar UI element) should place a new node at a default location on the canvas.
• Clicking and dragging a node should update its position on the canvas.
• Users should be able to initiate a connection by clicking on an output point of a node and releasing on an input point of another.
• Deleting a node should also remove all connections originating from or pointing to that node.
• Deleting a connection should only remove that specific arrow.

Edge Cases to Consider:

• What happens if a user tries to connect a node to itself?
• How should overlapping nodes or connections be handled visually?
• What is the behavior when the canvas is very small or very large?

Examples

Example 1: Basic Node Creation and Movement

• Input:
  • User clicks "Add Start Node" button. A "Start" node appears at (100, 100).
  • User drags the "Start" node to (200, 150).
• Output: The canvas displays a "Start" node at coordinates (200, 150).

Example 2: Connecting Two Nodes

• Input:
  • Canvas has a "Start" node at (100, 100) and a "Process" node at (300, 100).
  • User clicks on an output point of the "Start" node and drags to an input point of the "Process" node.
• Output: A directed arrow from the "Start" node to the "Process" node is displayed on the canvas.

Example 3: Deleting a Node with Connections

• Input:
  • Canvas has a "Start" node at (100, 100) connected to a "Process" node at (300, 100).
  • The "Process" node is also connected to an "End" node at (500, 100).
  • User selects the "Process" node and clicks a "Delete" button.
• Output: The "Process" node is removed. The connection from "Start" to "Process" and the connection from "Process" to "End" are also removed.

Constraints

• The canvas area will be a fixed size (e.g., 800x600 pixels).
• Nodes will have predefined input and output connection points (e.g., top, bottom, left, right).
• The solution should be implemented using functional components with hooks.
• Performance should be considered for a moderate number of nodes (up to 50-100).

Notes

• Consider using a library like react-beautiful-dnd for drag-and-drop functionality, or implement it manually.
• For drawing connections, SVG elements are a good choice.
• Think about how you will represent the state of your nodes and connections. An array of node objects and an array of connection objects would be a good starting point.
• The visual styling of nodes and connections can be kept simple for this challenge, focusing on functionality.