'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // ---------------------------------------------------------------------- // CONFIGURATION & CONSTANTS // ---------------------------------------------------------------------- const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const BACKGROUND_COLOR = '#0f172a'; const PRIMARY_COLOR = '#38bdf8'; // Sky blue const ACTIVE_COLOR = '#f59e0b'; // Amber/Orange const VISITED_COLOR = '#10b981'; // Emerald/Green const LINE_COLOR = '#334155'; // Slate // Tree Data Structure (Array representation of a complete binary tree) // Index i: Left = 2i + 1, Right = 2i + 2 const TREE_DEPTH = 4; const INITIAL_NODES = Array.from({ length: 15 }, (_, i) => ({ id: i, value: String.fromCharCode(65 + i), // A, B, C... })); // Layout calculations const getPosition = (index, totalLevels = 4) => { const level = Math.floor(Math.log2(index + 1)); const levelIndex = index - (Math.pow(2, level) - 1); const itemsInLevel = Math.pow(2, level); // Vertical spacing const y = 80 + level * 120; // Horizontal spacing based on level (wider at top, narrower at bottom) const availableWidth = VIEW_WIDTH; const sectionWidth = availableWidth / itemsInLevel; const x = sectionWidth * levelIndex + sectionWidth / 2; return { x, y, level }; }; // ---------------------------------------------------------------------- // COMPONENT // ---------------------------------------------------------------------- export const BinaryTreeTraversalView = () => { // State const [activeNode, setActiveNode] = useState(null); const [visitedNodes, setVisitedNodes] = useState>(new Set()); const [traversalLog, setTraversalLog] = useState([]); const [currentAlgo, setCurrentAlgo] = useState('Initializing...'); const [systemStatus, setSystemStatus] = useState('IDLE'); const isRunningRef = useRef(false); // Helper: Sleep const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); // ---------------------------------------------------------------------- // ALGORITHMS // ---------------------------------------------------------------------- const reset = () => { setActiveNode(null); setVisitedNodes(new Set()); setTraversalLog([]); }; const visit = async (index: number) => { setActiveNode(index); setSystemStatus(`ACCESSING MEMORY: 0x${(1000 + index).toString(16).toUpperCase()}`); await wait(600); setVisitedNodes(prev => new Set(prev).add(index)); setTraversalLog(prev => [...prev, INITIAL_NODES[index].value]); setActiveNode(null); await wait(300); }; // Pre-order: Root -> Left -> Right const preOrder = async (index: number) => { if (index >= INITIAL_NODES.length) return; await visit(index); await preOrder(2 * index + 1); await preOrder(2 * index + 2); }; // In-order: Left -> Root -> Right const inOrder = async (index: number) => { if (index >= INITIAL_NODES.length) return; await inOrder(2 * index + 1); await visit(index); await inOrder(2 * index + 2); }; // Post-order: Left -> Right -> Root const postOrder = async (index: number) => { if (index >= INITIAL_NODES.length) return; await postOrder(2 * index + 1); await postOrder(2 * index + 2); await visit(index); }; // Level-order (BFS) const levelOrder = async () => { const queue = [0]; while (queue.length > 0) { const current = queue.shift(); if (current !== undefined && current < INITIAL_NODES.length) { await visit(current); queue.push(2 * current + 1); queue.push(2 * current + 2); } } }; // ---------------------------------------------------------------------- // MAIN LOOP // ---------------------------------------------------------------------- useEffect(() => { const runSequence = async () => { if (isRunningRef.current) return; isRunningRef.current = true; while (true) { // 1. Pre-order reset(); setCurrentAlgo('前序遍历 (Pre-order Traversal)'); setSystemStatus('STARTING ALGORITHM: DFS_DLR'); await wait(1000); await preOrder(0); await wait(2000); // 2. In-order reset(); setCurrentAlgo('中序遍历 (In-order Traversal)'); setSystemStatus('STARTING ALGORITHM: DFS_LDR'); await wait(1000); await inOrder(0); await wait(2000); // 3. Post-order reset(); setCurrentAlgo('后序遍历 (Post-order Traversal)'); setSystemStatus('STARTING ALGORITHM: DFS_LRD'); await wait(1000); await postOrder(0); await wait(2000); // 4. Level-order reset(); setCurrentAlgo('层序遍历 (Level-order / BFS)'); setSystemStatus('STARTING ALGORITHM: BFS_QUEUE'); await wait(1000); await levelOrder(); await wait(3000); } }; runSequence(); return () => { // Cleanup if unmounted (though loop is infinite, ref helps prevent double execution in strict mode) }; }, []); // ---------------------------------------------------------------------- // RENDERING HELPERS // ---------------------------------------------------------------------- // Calculate lines between nodes const edges = useMemo(() => { const lines = []; for (let i = 0; i < INITIAL_NODES.length; i++) { const leftChild = 2 * i + 1; const rightChild = 2 * i + 2; const currentPos = getPosition(i); if (leftChild < INITIAL_NODES.length) { const childPos = getPosition(leftChild); lines.push({ x1: currentPos.x, y1: currentPos.y, x2: childPos.x, y2: childPos.y, from: i, to: leftChild }); } if (rightChild < INITIAL_NODES.length) { const childPos = getPosition(rightChild); lines.push({ x1: currentPos.x, y1: currentPos.y, x2: childPos.x, y2: childPos.y, from: i, to: rightChild }); } } return lines; }, []); return (

); };