CARTO

{[["map", "MAP"], ["screens", `SCREENS · ${stats.screens}`], ["report", "REPORT"]].map(([k, l]) => (

setTab(k)}>{l}

))}

); } function AppGlyph({ app, s = 20 }) { return (

{app.icon.fg || ""}

); } /* ----------------------------- graph canvas ----------------------------- */ const NODE_W = 58; const NODE_H = Math.round(NODE_W * 2.04); const MIN_Z = 0.25, MAX_Z = 5; // 缩放区间：上限调高，可放得更大 /* 空间方位最近节点：从 fromId 出发，沿 dir 方向锥形范围内挑最近的可见节点 */ function nearestInDir(visNodes, fromId, dir) { const cur = visNodes.find(n => n.id === fromId); if (!cur) return null; const cx = cur.x + NODE_W / 2, cy = cur.y + NODE_H / 2; let best = null, bestScore = Infinity; for (const n of visNodes) { if (n.id === fromId) continue; const dx = (n.x + NODE_W / 2) - cx, dy = (n.y + NODE_H / 2) - cy; let along, perp; if (dir === "right") { along = dx; perp = Math.abs(dy); } else if (dir === "left") { along = -dx; perp = Math.abs(dy); } else if (dir === "down") { along = dy; perp = Math.abs(dx); } else { along = -dy; perp = Math.abs(dx); } // up if (along <= 1) continue; // 必须确实在该方向 if (perp > along * 1.6) continue; // 限制在约 ±58° 锥角内 const score = along + perp * 2; // 越正对、越近越优先 if (score < bestScore) { bestScore = score; best = n.id; } } return best; } function GraphCanvas({ nodes, edges, visible, selected, onSelect, tw, grow, controls = true, fitSignal, dimUnselected, onResetJourney }) { const wrapRef = useRef(null); const [view, setView] = useState({ x: 0, y: 0, z: 0.72 }); const [anim, setAnim] = useState(false); // true 时 transform 走 CSS 过渡（选中/复位），拖拽缩放时为 false const animRef = useRef(null); const dragRef = useRef(null); const movedRef = useRef(false); const prevSelRef = useRef(null); const nodeMap = useMemo(() => Object.fromEntries(nodes.map(n => [n.id, n])), [nodes]); const startAnim = useCallback(() => { setAnim(true); if (animRef.current) clearTimeout(animRef.current); animRef.current = setTimeout(() => setAnim(false), 480); }, []); const stopAnim = useCallback(() => { if (animRef.current) { clearTimeout(animRef.current); animRef.current = null; } setAnim(false); }, []); const boundsOf = useCallback((ns) => { const xs = ns.map(n => n.x), ys = ns.map(n => n.y); const minX = Math.min(...xs) - 60, minY = Math.min(...ys) - 60; const maxX = Math.max(...xs) + NODE_W + 60, maxY = Math.max(...ys) + NODE_H + 60; return { minX, minY, maxX, maxY, w: maxX - minX, h: maxY - minY }; }, []); // 全图边界（SVG 画布定位用，永远覆盖所有节点） const bounds = useMemo(() => boundsOf(nodes), [nodes, boundsOf]); // 可见边界：选了某条路径时只框住该路径的节点，否则等于全图 —— 取景以此为准 const visBounds = useMemo(() => { const set = visible ? (visible instanceof Set ? visible : new Set(visible)) : null; const vn = set ? nodes.filter(n => set.has(n.id)) : nodes; return vn.length ? boundsOf(vn) : bounds; }, [visible, nodes, bounds, boundsOf]); const fit = useCallback((b = visBounds) => { const el = wrapRef.current; if (!el) return; const vw = el.clientWidth, vh = el.clientHeight; const z = Math.min(vw / b.w, vh / b.h) * 0.92; setView({ z, x: (vw - b.w * z) / 2 - b.minX * z, y: (vh - b.h * z) / 2 - b.minY * z }); }, [visBounds]); useEffect(() => { fit(); /* eslint-disable-next-line */ }, [fitSignal]); useEffect(() => { const t = setTimeout(fit, 60); return () => clearTimeout(t); }, []); // 点击左侧路径 → 以「能完整框住该路径的最大预览形态」居中（类似点击节点居中）。 // 切回「全部」也平滑复位到全预览。首帧 prevVisRef===visible，不抢占挂载时的初始 fit。 const prevVisRef = useRef(visible); useEffect(() => { if (prevVisRef.current === visible) return; prevVisRef.current = visible; startAnim(); fit(visBounds); // eslint-disable-next-line }, [visible, visBounds]); // 选中 → 动画聚焦进节点；从选中态退回 → 动画复位到全预览（fit）。两者都走过渡，不硬切。 useEffect(() => { const el = wrapRef.current; if (!el) return; if (selected && nodeMap[selected]) { const n = nodeMap[selected]; const cx = n.x + NODE_W / 2, cy = n.y + NODE_H / 2; startAnim(); setView(v => { const vw = el.clientWidth, vh = el.clientHeight; const z = Math.min(MAX_Z, Math.max(v.z, 1.15)); // 聚焦时适度放大，形成「形态切换」的层次感 const sx = vw * 0.42 - cx * z, sy = vh * 0.5 - cy * z; return { z, x: sx, y: sy }; }); } else if (prevSelRef.current) { startAnim(); // 退出选中：平滑回到全预览 fit(); } prevSelRef.current = selected; // eslint-disable-next-line }, [selected]); // 键盘导航：ESC 回全预览；方向键按空间方位在节点间切换（未选中时方向键先选根节点）。 useEffect(() => { const DIRS = { ArrowUp: "up", ArrowDown: "down", ArrowLeft: "left", ArrowRight: "right" }; const onKey = (e) => { const t = e.target; if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return; // ESC 逐级退出：先取消选中节点；若无选中但已选路径，则清空路径回全预览。 if (e.key === "Escape") { if (selected) { e.preventDefault(); onSelect && onSelect(null); } else if (visible && onResetJourney) { e.preventDefault(); onResetJourney(); } return; } const dir = DIRS[e.key]; if (!dir || !onSelect) return; const idset = visible ? (visible instanceof Set ? visible : new Set(visible)) : null; const vis = nodes.filter(n => !idset || idset.has(n.id)); if (!vis.length) return; e.preventDefault(); if (!selected || !nodeMap[selected]) { onSelect(vis[0].id); return; } const next = nearestInDir(vis, selected, dir); if (next) onSelect(next); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [selected, onSelect, nodes, visible, nodeMap, onResetJourney]); // wheel 用原生非被动监听：React 的 onWheel 在 root 上是 passive 的，preventDefault 无效， // 会导致触控板捏合/Ctrl+滚轮触发整页缩放。这里 passive:false 才能真正拦下。 useEffect(() => { const el = wrapRef.current; if (!el) return; const handler = (e) => { e.preventDefault(); stopAnim(); const r = el.getBoundingClientRect(); const mx = e.clientX - r.left, my = e.clientY - r.top; setView(v => { const nz = Math.min(MAX_Z, Math.max(MIN_Z, v.z * (e.deltaY < 0 ? 1.08 : 0.926))); const k = nz / v.z; return { z: nz, x: mx - (mx - v.x) * k, y: my - (my - v.y) * k }; }); }; el.addEventListener("wheel", handler, { passive: false }); return () => el.removeEventListener("wheel", handler); }, [stopAnim]); const onDown = (e) => { stopAnim(); dragRef.current = { px: e.clientX, py: e.clientY, x: view.x, y: view.y }; movedRef.current = false; }; const onMove = (e) => { if (!dragRef.current) return; const dx = e.clientX - dragRef.current.px, dy = e.clientY - dragRef.current.py; if (Math.abs(dx) + Math.abs(dy) > 4) movedRef.current = true; setView(v => ({ ...v, x: dragRef.current.x + dx, y: dragRef.current.y + dy })); }; const onUp = () => { dragRef.current = null; }; const zoomBy = (f) => { startAnim(); setView(v => { const el = wrapRef.current; const cx = el.clientWidth / 2, cy = el.clientHeight / 2; const nz = Math.min(MAX_Z, Math.max(MIN_Z, v.z * f)); const k = nz / v.z; return { z: nz, x: cx - (cx - v.x) * k, y: cy - (cy - v.y) * k }; }); }; const animFit = () => { startAnim(); fit(); }; const idset = visible ? (visible instanceof Set ? visible : new Set(visible)) : null; const isVis = (id) => !idset || idset.has(id); const showLabels = !tw || tw.labels !== false; const edgeStyle = (tw && tw.edge) || "elbow"; const path = (a, b) => { const x1 = a.x + NODE_W / 2, y1 = a.y + NODE_H, x2 = b.x + NODE_W / 2, y2 = b.y; if (edgeStyle === "curve") { const my = (y1 + y2) / 2; return `M${x1},${y1} C${x1},${my} ${x2},${my} ${x2},${y2}`; } if (edgeStyle === "straight") return `M${x1},${y1} L${x2},${y2}`; // elbow with rounded corners const my = (y1 + y2) / 2, rr = 8, dir = x2 > x1 ? 1 : -1; if (Math.abs(x2 - x1) < 2) return `M${x1},${y1} L${x2},${y2}`; return `M${x1},${y1} L${x1},${my - rr} Q${x1},${my} ${x1 + dir * rr},${my} L${x2 - dir * rr},${my} Q${x2},${my} ${x2},${my + rr} L${x2},${y2}`; }; const selNode = selected && nodeMap[selected]; const connected = useMemo(() => { const s = new Set(); if (!selected) return s; edges.forEach(([a, b]) => { if (a === selected) s.add(b); if (b === selected) s.add(a); }); return s; }, [selected, edges]); return (

{nodes.map(n => { if (!isVis(n.id)) return null; const isSel = n.id === selected; const faded = selected && dimUnselected && !isSel && !connected.has(n.id); return (

{ e.stopPropagation(); if (!movedRef.current) onSelect && onSelect(n.id); }} style={{ position: "absolute", left: n.x, top: n.y, cursor: "pointer" }}> {showLabels &&

{n.name}

}

); })}

{controls && (

{[["plus", () => zoomBy(1.2)], ["minus", () => zoomBy(0.83)], ["expand", animFit]].map(([ic, fn], i) => (

))}

)}

); } /* ----------------------------- journey rail ----------------------------- */ function JourneyCard({ j, active, onClick }) { return (

{ if (!active) e.currentTarget.style.background = "rgba(255,255,255,.02)"; }} onMouseLeave={e => { if (!active) e.currentTarget.style.background = "transparent"; }}>

{j.cat} {j.n} 屏

{j.title}

{j.desc}

{Array.from({ length: j.n }).map((_, i) => )}

); } function JourneyRail({ journeys, stats, activeJourney, onPick }) { return (

USER JOURNEYS

已发现 {journeys.length} 条用户路径
{stats && (
{[["屏数", stats.screens], ["路径", stats.paths], ["元素", stats.elements]].map(([k, v], i) => (

{v}

{k}

))}
)}

{journeys.map(j => onPick(j.id)} />)}

); } window.MapShared = { Icon, BrandMark, TopBar, AppGlyph, GraphCanvas, JourneyRail, NODE_W, NODE_H }; Object.assign(window, { Icon, BrandMark, TopBar, AppGlyph, GraphCanvas, JourneyRail, Breadcrumb });