script.js

class GraphVisualizer {
    constructor() {
        this.canvas = document.getElementById('canvas');
        this.ctx = this.canvas.getContext('2d');
        this.vertices = [];
        this.edges = [];
        this.isDragging = false;
        this.dragOffset = { x: 0, y: 0 };
        this.pan = { x: 0, y: 0 };
        this.zoom = 1;
        this.selectedVertex = null;
        
        this.setupCanvas();
        this.setupEventListeners();
    }

    setupCanvas() {
        const container = this.canvas.parentElement;
        const resizeCanvas = () => {
            const rect = container.getBoundingClientRect();
            this.canvas.width = rect.width - 40;
            this.canvas.height = rect.height - 80;
            this.draw();
        };
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();
    }

    setupEventListeners() {
        this.canvas.addEventListener('mousedown', this.handleMouseDown.bind(this));
        this.canvas.addEventListener('mousemove', this.handleMouseMove.bind(this));
        this.canvas.addEventListener('mouseup', this.handleMouseUp.bind(this));
        this.canvas.addEventListener('wheel', this.handleWheel.bind(this));
        this.canvas.addEventListener('click', this.handleClick.bind(this));

        document.getElementById('input-type').addEventListener('change', this.updateFormatHelp.bind(this));
    }

    updateFormatHelp() {
        const inputType = document.getElementById('input-type').value;
        const helpDiv = document.getElementById('format-help');
        
        if (inputType === 'adjacency') {
            helpDiv.innerHTML = `
                <div class="format-title">Adjacency List Format:</div>
                <div>Each line: vertex: neighbor1,neighbor2,...</div>
                <div class="format-example">0: 1,2<br>1: 0,3<br>2: 0,3<br>3: 1,2</div>
            `;
        } else {
            helpDiv.innerHTML = `
                <div class="format-title">Edge List Format:</div>
                <div>Each line: vertex1,vertex2 or vertex1 vertex2</div>
                <div class="format-example">0,1<br>0,2<br>1,3<br>2,3</div>
            `;
        }
    }

    parseInput(input, type, numVertices, isDirected) {
        this.vertices = [];
        this.edges = [];
        
        // Initialize vertices
        for (let i = 0; i < numVertices; i++) {
            this.vertices.push({
                id: i,
                x: Math.random() * (this.canvas.width - 200) + 100,
                y: Math.random() * (this.canvas.height - 200) + 100,
                radius: 25
            });
        }

        const lines = input.trim().split('\n').filter(line => line.trim());
        
        if (type === 'adjacency') {
            lines.forEach(line => {
                const [vertex, neighbors] = line.split(':').map(s => s.trim());
                if (neighbors) {
                    const neighborList = neighbors.split(',').map(n => parseInt(n.trim()));
                    neighborList.forEach(neighbor => {
                        if (!isNaN(neighbor) && neighbor < numVertices) {
                            if (!this.edgeExists(parseInt(vertex), neighbor)) {
                                this.edges.push({
                                    from: parseInt(vertex),
                                    to: neighbor,
                                    directed: isDirected
                                });
                            }
                        }
                    });
                }
            });
        } else if (type === 'edge') {
            lines.forEach(line => {
                const edge = line.split(/[,\s]+/).map(v => parseInt(v.trim()));
                if (edge.length === 2 && !isNaN(edge[0]) && !isNaN(edge[1]) && 
                    edge[0] < numVertices && edge[1] < numVertices) {
                    if (!this.edgeExists(edge[0], edge[1])) {
                        this.edges.push({
                            from: edge[0],
                            to: edge[1],
                            directed: isDirected
                        });
                    }
                }
            });
        }
    }

    edgeExists(from, to) {
        return this.edges.some(edge => 
            (edge.from === from && edge.to === to) ||
            (!edge.directed && edge.from === to && edge.to === from)
        );
    }

    draw() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.ctx.save();
        
        // Apply transformations
        this.ctx.translate(this.pan.x, this.pan.y);
        this.ctx.scale(this.zoom, this.zoom);

        // Draw edges
        this.edges.forEach(edge => this.drawEdge(edge));
        
        // Draw vertices
        this.vertices.forEach(vertex => this.drawVertex(vertex));

        this.ctx.restore();
    }

    drawVertex(vertex) {
        const isSelected = this.selectedVertex === vertex.id;
        
        // Draw vertex circle
        this.ctx.beginPath();
        this.ctx.arc(vertex.x, vertex.y, vertex.radius, 0, 2 * Math.PI);
        this.ctx.fillStyle = isSelected ? '#ff6b6b' : '#667eea';
        this.ctx.fill();
        this.ctx.strokeStyle = isSelected ? '#ff5252' : '#5a67d8';
        this.ctx.lineWidth = 3;
        this.ctx.stroke();

        // Draw vertex label
        this.ctx.fillStyle = 'white';
        this.ctx.font = 'bold 16px Arial';
        this.ctx.textAlign = 'center';
        this.ctx.textBaseline = 'middle';
        this.ctx.fillText(vertex.id.toString(), vertex.x, vertex.y);
    }

    drawEdge(edge) {
        const fromVertex = this.vertices[edge.from];
        const toVertex = this.vertices[edge.to];
        
        if (!fromVertex || !toVertex) return;

        const dx = toVertex.x - fromVertex.x;
        const dy = toVertex.y - fromVertex.y;
        const distance = Math.sqrt(dx * dx + dy * dy);
        
        // Calculate edge endpoints (on circle boundary)
        const fromX = fromVertex.x + (dx / distance) * fromVertex.radius;
        const fromY = fromVertex.y + (dy / distance) * fromVertex.radius;
        const toX = toVertex.x - (dx / distance) * toVertex.radius;
        const toY = toVertex.y - (dy / distance) * toVertex.radius;

        // Draw edge line
        this.ctx.beginPath();
        this.ctx.moveTo(fromX, fromY);
        this.ctx.lineTo(toX, toY);
        this.ctx.strokeStyle = '#666';
        this.ctx.lineWidth = 2;
        this.ctx.stroke();

        // Draw arrow for directed graphs
        if (edge.directed) {
            this.drawArrow(fromX, fromY, toX, toY);
        }

        // Draw edge weight if needed
        const midX = (fromX + toX) / 2;
        const midY = (fromY + toY) / 2;
        
        // Optional: draw edge weight
        // this.ctx.fillStyle = '#333';
        // this.ctx.font = '12px Arial';
        // this.ctx.textAlign = 'center';
        // this.ctx.fillText('1', midX, midY - 10);
    }

    drawArrow(fromX, fromY, toX, toY) {
        const angle = Math.atan2(toY - fromY, toX - fromX);
        const arrowLength = 15;
        const arrowAngle = Math.PI / 6;

        this.ctx.beginPath();
        this.ctx.moveTo(toX, toY);
        this.ctx.lineTo(
            toX - arrowLength * Math.cos(angle - arrowAngle),
            toY - arrowLength * Math.sin(angle - arrowAngle)
        );
        this.ctx.moveTo(toX, toY);
        this.ctx.lineTo(
            toX - arrowLength * Math.cos(angle + arrowAngle),
            toY - arrowLength * Math.sin(angle + arrowAngle)
        );
        this.ctx.strokeStyle = '#666';
        this.ctx.lineWidth = 2;
        this.ctx.stroke();
    }

    handleMouseDown(e) {
        const rect = this.canvas.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        
        this.isDragging = true;
        this.dragOffset = { x: x - this.pan.x, y: y - this.pan.y };
    }

    handleMouseMove(e) {
        if (!this.isDragging) return;
        
        const rect = this.canvas.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        
        this.pan.x = x - this.dragOffset.x;
        this.pan.y = y - this.dragOffset.y;
        this.draw();
    }

    handleMouseUp() {
        this.isDragging = false;
    }

    handleWheel(e) {
        e.preventDefault();
        const zoomFactor = 0.1;
        const rect = this.canvas.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        
        const zoom = e.deltaY > 0 ? -zoomFactor : zoomFactor;
        const newZoom = Math.max(0.1, Math.min(3, this.zoom + zoom));
        
        // Zoom towards mouse position
        this.pan.x -= (x - this.pan.x) * (newZoom / this.zoom - 1);
        this.pan.y -= (y - this.pan.y) * (newZoom / this.zoom - 1);
        this.zoom = newZoom;
        
        this.draw();
    }

    handleClick(e) {
        const rect = this.canvas.getBoundingClientRect();
        const x = (e.clientX - rect.left - this.pan.x) / this.zoom;
        const y = (e.clientY - rect.top - this.pan.y) / this.zoom;
        
        this.selectedVertex = null;
        this.vertices.forEach(vertex => {
            const dx = x - vertex.x;
            const dy = y - vertex.y;
            if (dx * dx + dy * dy <= vertex.radius * vertex.radius) {
                this.selectedVertex = vertex.id;
            }
        });
        
        this.draw();
    }

    generateRandomGraph(numVertices, isDirected) {
        const edges = [];
        const density = 0.3; // 30% chance for each edge
        
        for (let i = 0; i < numVertices; i++) {
            for (let j = isDirected ? 0 : i + 1; j < numVertices; j++) {
                if (i !== j && Math.random() < density) {
                    edges.push(`${i},${j}`);
                }
            }
        }
        
        return edges.join('\n');
    }

    clear() {
        this.vertices = [];
        this.edges = [];
        this.selectedVertex = null;
        this.pan = { x: 0, y: 0 };
        this.zoom = 1;
        this.draw();
    }
}

const visualizer = new GraphVisualizer();

function showError(message) {
    const errorDiv = document.getElementById('error-message');
    errorDiv.innerHTML = `<div class="error">${message}</div>`;
    setTimeout(() => errorDiv.innerHTML = '', 5000);
}

function visualizeGraph() {
    const numVertices = parseInt(document.getElementById('vertices').value);
    const inputType = document.getElementById('input-type').value;
    const graphInput = document.getElementById('graph-input').value;
    const isDirected = document.getElementById('directed').checked;

    if (!numVertices || numVertices < 1) {
        showError('Please enter a valid number of vertices (at least 1)');
        return;
    }

    if (!graphInput.trim()) {
        showError('Please enter graph data');
        return;
    }

    try {
        visualizer.parseInput(graphInput, inputType, numVertices, isDirected);
        visualizer.draw();
        document.getElementById('error-message').innerHTML = '';
    } catch (error) {
        showError('Error parsing graph input. Please check your format and try again.');
    }
}

function generateRandom() {
    const numVertices = parseInt(document.getElementById('vertices').value) || 5;
    const isDirected = document.getElementById('directed').checked;
    const inputType = document.getElementById('input-type').value;
    
    if (inputType === 'edge') {
        const randomGraph = visualizer.generateRandomGraph(numVertices, isDirected);
        document.getElementById('graph-input').value = randomGraph;
    } else {
        // Generate adjacency list format
        const adjacencyList = [];
        for (let i = 0; i < numVertices; i++) {
            const neighbors = [];
            for (let j = 0; j < numVertices; j++) {
                if (i !== j && Math.random() < 0.3) {
                    neighbors.push(j);
                }
            }
            if (neighbors.length > 0) {
                adjacencyList.push(`${i}: ${neighbors.join(',')}`);
            }
        }
        document.getElementById('graph-input').value = adjacencyList.join('\n');
    }
    
    visualizeGraph();
}

function clearCanvas() {
    visualizer.clear();
    document.getElementById('graph-input').value = '';
    document.getElementById('error-message').innerHTML = '';
}

// Initialize with example
visualizeGraph();