```javascript import React, { useState, useEffect, useMemo, useRef, useCallback, useLayoutEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import * as Lucide from 'lucide-react'; import * as d3 from 'd3'; // ----------------------------------------------------------------------------- // Constants & Data: The Life of Li Bai // ----------------------------------------------------------------------------- const LIBAI_PATH = [ { name: "Jiangyou (Sichuan)", year: 701, type: "birth", poem: "Raising my head, I look at the bright moon.", desc: "Born in Central Asia/Sichuan. A prodigy who read widely and practiced swordsmanship in his youth.", coords: [104.73, 31.78] }, { name: "Chengdu", year: 720, type: "youth", poem: "The road to Shu is harder than climbing to heaven.", desc: "Visited Chengdu and Mt. Emei. Displayed his genius and wild spirit to local officials.", coords: [104.06, 30.67] }, { name: "Three Gorges", year: 724, type: "departure", poem: "The monkeys on both banks cry without ceasing.", desc: "Sailed down the Yangtze River, leaving his homeland to wander the world.", coords: [109.50, 31.00] }, { name: "Anlu (Hubei)", year: 727, type: "marriage", poem: "Peach blossoms flow away with the water.", desc: "Married into a noble family. Lived in seclusion at White Cloud Mountain seeking patronage.", coords: [113.68, 31.25] }, { name: "Chang'an (Xi'an)", year: 742, type: "peak", poem: "The cloud remembers her robe, the flower her face.", desc: "Summoned by Emperor Xuanzong to the Hanlin Academy. Known as the 'Banished Immortal'.", coords: [108.93, 34.34] }, { name: "Luoyang", year: 744, type: "friendship", poem: "We share a love for the mountains and rivers.", desc: "Met Du Fu. The meeting of China's two greatest poets, a monumental event in literary history.", coords: [112.45, 34.62] }, { name: "Jinling (Nanjing)", year: 747, type: "wander", poem: "In the Phoenix Tower, the phoenix plays vividly.", desc: "Traveled Jiangnan. He loved Jinling and wrote many poems about its history.", coords: [118.79, 32.06] }, { name: "Lushan/Jiujiang", year: 755, type: "crisis", poem: "Flying down three thousand feet.", desc: "An Lushan Rebellion. Joined Prince Yong's staff, unaware it would be considered treason.", coords: [115.99, 29.70] }, { name: "White Emperor City", year: 759, type: "pardon", poem: "Leaving Baidi in the morning amidst colored clouds.", desc: "Exiled to Yelang. Received an imperial pardon before reaching his destination.", coords: [109.53, 31.04], speedMod: 0.8 }, { name: "Dangtu (Anhui)", year: 762, type: "death", poem: "Drinking alone under the moon.", desc: "Legend says he drowned trying to embrace the moon's reflection. A life of romance and freedom.", coords: [118.48, 31.57], speedMod: 0.6 } ]; // Configuration const BASE_SPEED = 140; const HOLD_DURATION = 3500; const WIDTH = 1200; const HEIGHT = 700; const BG_COLOR = "#ffffff"; const CHINA_GEOJSON_URL = "https://gist.githubusercontent.com/zhulinpinyu/8e18d57b3b18fb74e776/raw/efbb74cfea53decb1fe7d6bf279fd351c28c4810/china_simplify.json"; // ----------------------------------------------------------------------------- // Component // ----------------------------------------------------------------------------- export default function LiBaiLifeJourney() { // 1. Data State const [geoData, setGeoData] = useState(null); // 2. Animation State (Visual triggers) const [activeNodeIndex, setActiveNodeIndex] = useState(-1); const [currentLength, setCurrentLength] = useState(0); const [isPlaying, setIsPlaying] = useState(false); const [isFinished, setIsFinished] = useState(false); // 3. Viewport State (Pan/Zoom) const [viewBox, setViewBox] = useState({ x: 0, y: 0, w: WIDTH, h: HEIGHT, k: 1 }); // 4. Refs for Loop Logic (No re-renders) const requestRef = useRef(); const lastTimeRef = useRef(0); const pathRef = useRef(null); // State machine in ref to avoid dependency cycles const stateRef = useRef({ phase: 'idle', // idle, moving, holding, finished currentLen: 0, targetLen: 0, nodeIndex: 0, holdStartTime: 0, totalPathLength: 0, nodeLengths: [], speedModifiers: [], isDragging: false, lastPointer: { x: 0, y: 0 } }); // --------------------------------------------------------------------------- // Data Loading // --------------------------------------------------------------------------- useEffect(() => { let isMounted = true; fetch(CHINA_GEOJSON_URL) .then(res => res.json()) .then(data => { if (isMounted) setGeoData(data); }) .catch(err => console.error("Map Load Error:", err)); return () => { isMounted = false; }; }, []); // --------------------------------------------------------------------------- // D3 Projection & Path Generation // --------------------------------------------------------------------------- const { pathGenerator, projectedPath, pathSvgString } = useMemo(() => { if (!geoData) return {}; // Center map on China roughly const proj = d3.geoMercator() .center([108, 34]) .scale(1800) .translate([WIDTH / 2, HEIGHT / 2]); const pathGen = d3.geoPath().projection(proj); const projectedPoints = LIBAI_PATH.map(p => { const [x, y] = proj(p.coords); return { ...p, x, y }; }); const lineGenerator = d3.line() .x(d => d.x) .y(d => d.y) .curve(d3.curveCatmullRom.alpha(0.5)); const pathString = lineGenerator(projectedPoints); return { pathGenerator: pathGen, projectedPath: projectedPoints, pathSvgString: pathString }; }, [geoData]); // --------------------------------------------------------------------------- // Initialize Animation Path Data // --------------------------------------------------------------------------- useLayoutEffect(() => { if (pathRef.current && projectedPath && projectedPath.length > 0) { const pathEl = pathRef.current; const totalLen = pathEl.getTotalLength(); // Calculate length at each node const precision = 2000; const lengths = []; const pathPoints = []; // Sample path for precision for (let i = 0; i <= precision; i++) { const l = (i / precision) * totalLen; const p = pathEl.getPointAtLength(l); pathPoints.push({ l, x: p.x, y: p.y }); } // Find closest point on path for each city projectedPath.forEach((node, i) => { if (i === 0) { lengths.push(0); return; } let minDist = Infinity; let bestLen = 0; // Search optimization: start from previous node const startIdx = lengths[i-1] ? Math.floor((lengths[i-1] / totalLen) * precision) : 0; for (let j = startIdx; j < pathPoints.length; j++) { const pp = pathPoints[j]; const dist = Math.sqrt((pp.x - node.x)**2 + (pp.y - node.y)**2); if (dist < minDist) { minDist = dist; bestLen = pp.l; } // Break if we are moving away significantly if (minDist < 10 && dist > 50) break; } lengths.push(bestLen); }); stateRef.current.totalPathLength = totalLen; stateRef.current.nodeLengths = lengths; stateRef.current.speedModifiers = projectedPath.map(p => p.speedMod || 1.0); // Auto-start logic if (stateRef.current.phase === 'idle') { stateRef.current.phase = 'holding'; stateRef.current.holdStartTime = performance.now(); setActiveNodeIndex(0); setIsPlaying(true); requestRef.current = requestAnimationFrame(animate); } } }, [projectedPath, pathSvgString]); // --------------------------------------------------------------------------- // Main Animation Loop // --------------------------------------------------------------------------- const animate = useCallback((time) => { if (!lastTimeRef.current) lastTimeRef.current = time; const deltaTime = time - lastTimeRef.current; lastTimeRef.current = time; const state = stateRef.current; if (state.phase === 'moving') { const speedMod = state.speedModifiers[state.nodeIndex] || 1.0; // Dynamic speed adjustment based on zoom could be added here const currentSpeed = BASE_SPEED * speedMod; const dist = (currentSpeed * deltaTime) / 1000; state.currentLen += dist; // Check if reached target if (state.currentLen >= state.targetLen) { state.currentLen = state.targetLen; state.phase = 'holding'; state.holdStartTime = time; setActiveNodeIndex(state.nodeIndex); setCurrentLength(state.currentLen); // Trigger render update } else { // Optimize: throttle setStates if needed, but for smooth 60fps lines we usually need per-frame setCurrentLength(state.currentLen); } } else if (state.phase === 'holding') { if (time - state.holdStartTime > HOLD_DURATION) { const nextIndex = state.nodeIndex + 1; if (nextIndex < state.nodeLengths.length) { state.nodeIndex = nextIndex; state.targetLen = state.nodeLengths[nextIndex]; state.phase = 'moving'; } else { state.phase = 'finished'; setIsFinished(true); setIsPlaying(false); } } } if (state.phase !== 'finished') { requestRef.current = requestAnimationFrame(animate); } }, []); // --------------------------------------------------------------------------- // Controls // --------------------------------------------------------------------------- const togglePlay = () => { if (isFinished) { // Reset stateRef.current.currentLen = 0; stateRef.current.nodeIndex = 0; stateRef.current.targetLen = 0; stateRef.current.phase = 'holding'; stateRef.current.holdStartTime = performance.now(); setActiveNodeIndex(0); setCurrentLength(0); setIsFinished(false); setIsPlaying(true); lastTimeRef.current = 0; requestRef.current = requestAnimationFrame(animate); } else { if (isPlaying) { setIsPlaying(false); if (requestRef.current) cancelAnimationFrame(requestRef.current); } else { setIsPlaying(true); lastTimeRef.current = 0; requestRef.current = requestAnimationFrame(animate); } } }; useEffect(() => { return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // --------------------------------------------------------------------------- // Drag / Pan Interaction // --------------------------------------------------------------------------- const handlePointerDown = useCallback((e) => { e.currentTarget.setPointerCapture(e.pointerId); stateRef.current.isDragging = true; stateRef.current.lastPointer = { x: e.clientX, y: e.clientY }; }, []); const handlePointerMove = useCallback((e) => { if (!stateRef.current.isDragging) return; const dx = e.clientX - stateRef.current.lastPointer.x; const dy = e.clientY - stateRef.current.lastPointer.y; stateRef.current.lastPointer = { x: e.clientX, y: e.clientY }; setViewBox(prev => ({ ...prev, x: prev.x - dx * prev.k, // Scale movement by zoom level y: prev.y - dy * prev.k })); }, []); const handlePointerUp = useCallback((e) => { stateRef.current.isDragging = false; e.currentTarget.releasePointerCapture(e.pointerId); }, []); const handleWheel = useCallback((e) => { // Optional simple zoom centered on view e.preventDefault(); const zoomSensitivity = 0.001; const delta = e.deltaY * zoomSensitivity; setViewBox(prev => { const newK = Math.max(0.2, Math.min(2, prev.k + delta)); // Adjust w/h based on k (this is a simplified zoom, ideally zooms to cursor) // For stability, we just scale the viewbox dimensions const newW = WIDTH * newK; const newH = HEIGHT * newK; // Center adjustment const dW = newW - prev.w; const dH = newH - prev.h; return { x: prev.x - dW / 2, y: prev.y - dH / 2, w: newW, h: newH, k: newK }; }); }, []); // --------------------------------------------------------------------------- // Rendering Helpers // --------------------------------------------------------------------------- const headPos = useMemo(() => { if (!pathRef.current || currentLength < 0) return projectedPath?.[0] || {x:0, y:0}; try { const p = pathRef.current.getPointAtLength(Math.max(0, currentLength)); return { x: p.x, y: p.y }; } catch(e) { return {x:0, y:0}; } }, [currentLength, projectedPath]); // Loading Screen if (!geoData) { return (

TRACING HISTORY...

); } return (

{/* --- Styles --- */} {/* --- SVG Map Layer --- */} {/* --- UI Overlays (Absolute Positioned) --- */} {/* Title */}

Li Bai

Trajectory of a Poet

{/* Info Card */} {activeNodeIndex >= 0 && LIBAI_PATH[activeNodeIndex] && ( {/* Header: Year & Type */}

{LIBAI_PATH[activeNodeIndex].year}

{getIcon(LIBAI_PATH[activeNodeIndex].type)} {LIBAI_PATH[activeNodeIndex].type}

{/* Content */}

{LIBAI_PATH[activeNodeIndex].name}

{LIBAI_PATH[activeNodeIndex].desc}

{/* Poem Box */}

"{LIBAI_PATH[activeNodeIndex].poem}"

{/* Progress Bar */}

)} {/* Play Controls */}

{/* Legend */}

Key Event

Travel

); } // ----------------------------------------------------------------------------- // Icon Helper // ----------------------------------------------------------------------------- function getIcon(type) { const size = 14; switch (type) { case 'birth': return ; case 'youth': return ; case 'departure': return ; case 'marriage': return ; case 'peak': return ; case 'friendship': return ; case 'wander': return ; case 'crisis': return ; case 'pardon': return ; case 'death': return ; default: return ; } } ```