Add LR(1) parser support & Move to custom flow setup & System Overhaul

.github/workflows/nextjs.yml

@@ -8,6 +8,9 @@ on:
   # Runs on pushes targeting the default branch
   push:
     branches: ["main"]
+    paths-ignore:
+      - '**/*.md'
+
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:

README.md

@@ -1,114 +1,126 @@
-# FSM Visualizer
+# 🌟 **FSM Visualizer** 🌟
 
-Welcome to **FSM Visualizer**, a versatile tool for creating and visualizing finite state machines (FSMs). Whether you're designing complex parsers or simple state diagrams, this tool is built to enhance your workflow with ease and efficiency.
+Welcome to **FSM Visualizer**, your ultimate tool for crafting and visualizing finite state machines (FSMs). Whether you're designing a simple state diagram or tackling complex workflows, **FSM Visualizer** empowers you with intuitive and efficient tools. 🚀
 
 ---
 
-## 🎯 Features
+## 🎯 **Features at a Glance**
 
-- **No Registration Required**: Get started instantly—no signups or logins needed.
-- **Flexible Customization**: Add detailed text to states and transitions for clarity.
-- **Interactive Design**: Drag and drop states, connect transitions, and edit effortlessly.
-- **Practical for Developers**: Built with ReactFlow, ensuring performance and scalability.
+- **🚪 No Signups Needed**: Start building instantly—no barriers or distractions.
+- **✨ Fully Customizable**: Add detailed labels to states and transitions to bring clarity to your diagrams.
+- **⚡ Interactive Interface**: Create, edit, and connect states seamlessly with drag-and-drop functionality.
+- **🛠 Built from Scratch**: Powered by a custom implementation designed for maximum flexibility and performance.
+- **🔧 Tools Section**: Transform **BNF grammar into FSM** representations in **LR(1) parser form**, making it perfect for advanced grammar analysis and parsing tasks.
 
 ---
 
-## 🚀 Live Demo
+## 🌐 **Live Demo**
 
-Try the tool live here: [Live Tool Link](https://alhassanalbadri.github.io/fsm-visualizer/)
+Explore the magic now: 👉 [**FSM Visualizer Live**](https://alhassanalbadri.github.io/fsm-visualizer/) 🎉
 
 ---
 
-## 🛠 Installation & Setup
+## 🛠 **Getting Started**
 
-Follow these steps to run the project locally:
+Ready to run **FSM Visualizer** locally? Just follow these simple steps:
 
 1. **Clone the Repository**:
-	```bash
-	git clone https://github.com/yourusername/FSM-Visualizer.git
-	cd FSM-Visualizer
-	```
-
+   ```bash
+   git clone https://github.com/alhassanalbadri/fsm-visualizer.git
+   cd FSM-Visualizer
+   ```
 2. **Install Dependencies**:
-	```bash
-	npm install
-	```
+   ```bash
+   npm install
+   ```
+3. **Start the Development Server**:
+   ```bash
+   npm run dev
+   ```
+4. Open your browser and navigate to `http://localhost:3000`. 🎉
+
+---
 
-3. **Run the Development Server**:
-	```bash
-	npm run dev
-	```
+## 📂 **Project Structure**
 
-4. Open your browser and navigate to `http://localhost:3000`.
+Here's an overview of the key components:
+
+- **🎨 Components**:
+  - `CustomNode`: The visual representation of FSM states with editable labels.
+  - `CustomEdge`: Flexible transitions connecting the states.
+  - `FSMHandler`: The core logic for managing states and transitions.
+  - `Sidebar`: The sidebar for adding new states, and accessing our builtin tools.
+- **🔧 State Management**:
+  - Built from scratch to ensure efficient and intuitive interaction.
+  - Handles all nodes, edges, and user interactions dynamically.
 
 ---
 
-## 📂 Project Structure
+## 🤔 **How to Use**
 
-- **Components**:
-  - `CustomNode`: Customizable nodes for FSM states.
-  - `CustomEdge`: Custom edges for transitions between states.
-  - `Sidebar`: UI for adding and managing states and transitions.
-- **State Management**:
-  - Managed using ReactFlow's `useNodesState` and `useEdgesState`.
+1. **🎨 Add States**: Drag and drop new states from the sidebar onto the canvas.
+2. **🔗 Connect Transitions**: Click and drag from one state to another.
+3. **🖊 Edit Labels**: Double-click on states or transitions to update their labels.
+4. **📷 Save Your Work**: Export your FSM as JSON, PNG, or SVG to share or reuse.
+5. **🔧 Tools Section**: Use the **BNF grammar to FSM** tool to visualize LR(1) parser states from your grammar inputs.
 
 ---
 
-## 🤔 How to Use
+## 🗺 **Development Roadmap**
 
-1. **Add States**: Drag and drop new states from the sidebar onto the canvas.
-2. **Connect Transitions**: Drag from one state to another to create transitions.
-3. **Edit Labels**: Click on states or transitions to edit their labels.
-4. **Save Your Work**: Take screenshots or copy the FSM structure for your needs.
+### 🔹 Stage 1: Core Features
+- [x] Custom-built state and edge management
+- [x] JSON import/export functionality
+- [x] PNG/SVG export support
+- [ ] Multiple node types (e.g., start/end states)
 
----
+### 🔹 Stage 2: Grammar Integration
+- [x] **BNF grammar to FSM** in LR(1) parser form
+- [x] Visualization of LR(1) parser states
 
-## 🗺 Development Roadmap
+### 🔹 Stage 3: Styling & Customization
+- [ ] Customizable colors for states and edges
+- [ ] Enhanced edge styles and animations
+- [ ] Customizable end markers for transitions
 
-### Stage 1: Basic Functionality
-- [x] Implement basic pathfinding algorithm for FSMs
-- [x] Add JSON import/export functionality
-- [x] Add PNG/SVG export functionality
-- [x] Implement clearing the canvas
-- [ ] Add support for multiple node types (e.g., start/end states).
+### 🔹 Stage 4: Collaboration
+- [ ] User account creation and authentication
+- [ ] Shared FSM editing and real-time collaboration
+- [ ] Personal dashboards for managing FSMs
 
-### Stage 2: LR(1) Grammar Integration
-- [ ] Implement LR(1) grammar parsing
-- [ ] Visualize LR(1) parser states and transitions
-- [ ] Add support for grammar rule editing
+### 🔹 Stage 5: Advanced Features
+- [ ] Support for diverse FSM types
+- [ ] Undo/redo functionality
+- [ ] Composite nodes for advanced workflows
 
-### Stage 3: Customization & Styling
-- [ ] Allow custom colors for states
-... and more?
+---
 
-### Stage 4: User Accounts and Basic Collaboration
-- [ ] Implement user account creation and authentication
-- [ ] Add basic collaboration features (e.g., sharing FSMs)
-- [ ] Implement user-specific FSM storage
+## ⚠️ **Known Issues**
 
-### Stage 5: Advanced Collaboration & Extensibility
-- [ ] Add support for different FSM types
-- [ ] Implement undo/redo functionality
-... and more!
+### Current Issues
+- **PNG/SVG Export Flicker**: A flicker occurs during canvas rendering (Low priority).
+- **Oversized Node Boxes**: Some nodes initially have unnecessary padding (Low priority).
 
 ---
 
-## 🛡 License
+## 🛡 **License**
 
-This project is licensed under the [MIT License](LICENSE).
+This project is open-source and available under the [MIT License](LICENSE). 📝
 
 ---
 
-## 🤝 Contributing
+## 🤝 **Contributing**
 
-Contributions are welcome! If you have ideas for improvements or find bugs, please open an issue or submit a pull request.
+Let’s make **FSM Visualizer** even better! 💡  
+If you have ideas or find bugs, feel free to open an issue or submit a pull request. Contributions are always welcome! 🙌
 
 ---
 
-## 📫 Feedback & Support
+## 📢 **Feedback & Support**
 
-If you try out **FSM Visualizer**, let me know your thoughts! I'm always open to feedback and suggestions for improvement.
+Tried **FSM Visualizer**? Share your thoughts or suggestions!  
+Your feedback helps us grow and improve. 💬
 
 ---
 
-Happy visualizing! 🎉
+🎉 **Happy Visualizing!** 🎉  

app/globals.css

@@ -78,3 +78,17 @@ body {
 		@apply bg-background text-foreground;
 	}
 }
+
+
+.canvas-background {
+	background-color: #f3f4f6;
+	/* Light gray background */
+	background-image:
+		linear-gradient(to right, #d1d5db 1px, transparent 1px),
+		linear-gradient(to bottom, #d1d5db 1px, transparent 1px);
+	/* Grid size */
+	background-size: 20px 20px;
+	/* Dark gray border */
+	border: 0.5px solid #9ca3af;
+	position: relative;
+}

app/utils/calculatePortPosition.ts

@@ -0,0 +1,24 @@
+// calculatePortPosition.ts
+interface NodePosition {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+  }
+
+  export const calculatePortPosition = (node: NodePosition, isSource: boolean) => {
+	if (isSource) {
+	  // Output port at bottom-center
+	  return {
+		x: node.x + node.width / 2,
+		y: node.y + node.height,
+	  };
+	} else {
+	  // Input port at top-center
+	  return {
+		x: node.x + node.width / 2,
+		y: node.y,
+	  };
+	}
+  };
+

app/utils/useResizeObserver.ts

@@ -0,0 +1,27 @@
+// useResizeObserver.ts
+import { useEffect, RefObject } from "react";
+
+const useResizeObserver = (
+	ref: RefObject<HTMLElement>,
+	callback: (width: number, height: number) => void,
+	options?: ResizeObserverOptions
+) => {
+	useEffect(() => {
+		if (!ref.current) return;
+
+		const observer = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const { width, height } = entry.contentRect;
+				callback(width, height);
+			}
+		});
+
+		observer.observe(ref.current, options);
+
+		return () => {
+			observer.disconnect();
+		};
+	}, [ref, callback, options]);
+};
+
+export default useResizeObserver;