🧩 Block Graph ---> [Draggable Block Tree]

A dynamic and interactive block tree where blocks can be added, dragged, and connected with parent-child dashed lines.

---

🖥️ Project Overview

This project demonstrates a draggable block tree UI built in React with Tailwind CSS. Users can:

• Add new blocks dynamically.
• Drag blocks around freely.
• See dashed lines connecting each block to its parent, updating automatically as blocks move.

---

⚡ Features

• 🎯 Random Initial Position: Blocks appear at random positions on page load.
• ➕ Add Child Blocks: Each block has a + button to create child blocks.
• ✋ Drag & Drop: Blocks can be moved around by mouse drag.
• 📏 Dynamic Connecting Lines: Dashed lines connect parent and child blocks and update as blocks move.
• 🧩 Fully Interactive: Supports multiple levels of block hierarchy.

---

🛠️ Tech Stack

Feature	Technology
UI	React.js
Styling	Tailwind CSS
State Management	React useState / useRef

---

🧑‍💻 User Roles

• User: Can interact with blocks, add child blocks, and drag them around.

---

🖼️ Interface Snapshots

---

🚀 Getting Started

1️⃣ Clone the Repository

git clone https://github.com/ei-shadi/Block_Graph.git
cd Block_Graph

2️⃣ Install Dependencies

npm install

3️⃣ Start the Development Server

npm run dev

Open http://localhost:5173 to view it in your browser.

---

🗂️ Project Structure

src/
├─ components/
│  ├─ Block.jsx          # Block component with + button & drag logic
│  ├─ ConnectionLine.jsx # Dashed line between parent and child
├─ utils/
│  └─ randomPosition.js  # Utility for generating random coordinates
├─ App.jsx               # Main component managing state of blocks

---

📌 Notes

• Blocks’ positions are managed using React state and refs.
• Connecting lines update automatically based on parent-child positions.
• Tailwind CSS handles all styling; feel free to customize for your theme.

---

🔗 Live Demo

View Live Demo

---

💻 License

This project is licensed under the Fringecore License.