Александр Зимин
885 lines
37 KiB
TypeScript
885 lines
37 KiB
TypeScript
import { Component, Suspense, lazy, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
|
||
import { useNavigate } from '@tanstack/react-router'
|
||
import { useQueries } from '@tanstack/react-query'
|
||
import {
|
||
forceCenter,
|
||
forceCollide,
|
||
forceLink,
|
||
forceManyBody,
|
||
forceSimulation,
|
||
type Simulation,
|
||
type SimulationNodeDatum,
|
||
type SimulationLinkDatum,
|
||
} from 'd3-force'
|
||
import { useDictionaries, dictionaryDependentsQuery, recordsQuery } from '@/api/queries'
|
||
import type { DictionaryDefinition, SchemaDependent } from '@/api/client'
|
||
import { GlobeLoader, LoadingBlock, QueryErrorState } from '@/ui'
|
||
import { cn } from '@/lib/utils'
|
||
|
||
// 3D-режим лениво грузится — three.js (~650kb) и react-force-graph-3d не
|
||
// попадают в default chunk. Vite автоматически создаёт отдельный chunk для
|
||
// dynamic import. Suspense fallback показывается во время загрузки модуля.
|
||
const DictionaryGraph3D = lazy(() => import('./DictionaryGraph3D'))
|
||
|
||
type GraphMode = '2d' | '3d'
|
||
|
||
/**
|
||
* Scoped error boundary для 3D Suspense — three.js'у нужен WebGL, и если
|
||
* браузер его не поддерживает (corp VM, headless без --use-gl=*, hardware
|
||
* accel выключен) — `WebGLRenderer` бросает ошибку в render-цикле. Без
|
||
* этого ErrorBoundary fallback'a ошибка bubble'ит до AppErrorBoundary и
|
||
* вся page становится "Что-то пошло не так". Здесь мы её ловим локально,
|
||
* показываем friendly fallback + предлагаем вернуться в 2D режим.
|
||
*
|
||
* `onError` callback позволяет parent auto-reset'ить mode → '2d', чтобы
|
||
* пользователь не залипал на ошибочном состоянии. Recovery через
|
||
* componentDidUpdate (resetKey changes → state.hasError = false).
|
||
*/
|
||
class Graph3DErrorBoundary extends Component<
|
||
{ children: ReactNode; onError: () => void; resetKey: number; fallback: ReactNode },
|
||
{ hasError: boolean }
|
||
> {
|
||
state = { hasError: false }
|
||
static getDerivedStateFromError() {
|
||
return { hasError: true }
|
||
}
|
||
componentDidCatch() {
|
||
// Auto-notify parent (will switch mode → '2d') чтобы next render не
|
||
// пытался монтировать 3D снова. Defer через setTimeout — синхронный
|
||
// setState из catch ломает React reconciliation.
|
||
setTimeout(() => this.props.onError(), 0)
|
||
}
|
||
componentDidUpdate(prev: { resetKey: number }) {
|
||
if (prev.resetKey !== this.props.resetKey && this.state.hasError) {
|
||
this.setState({ hasError: false })
|
||
}
|
||
}
|
||
render() {
|
||
if (this.state.hasError) return this.props.fallback
|
||
return this.props.children
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Граф связей справочников — d3-force network diagram.
|
||
*
|
||
* Nodes: справочники (color по bundle, size по recordCount).
|
||
* Edges: incoming FK refs (от useDictionaryDependents).
|
||
*
|
||
* Layout: d3-force simulation
|
||
* - forceLink — keeps connected nodes близко
|
||
* - forceManyBody (charge) — отталкивает несоседних узлов
|
||
* - forceCenter — anchored к (w/2, h/2)
|
||
* - forceCollide — prevent overlap node circles
|
||
*
|
||
* Interaction:
|
||
* - Hover node → highlight node + connected edges + neighbors
|
||
* - Click node → navigate /dictionaries/$name
|
||
* - Drag node — temp pin position, click empty space → unpin all
|
||
*
|
||
* Performance: 40+ nodes SVG rendering OK. Above ~200 — switch на canvas.
|
||
*/
|
||
|
||
type GraphNode = SimulationNodeDatum & {
|
||
id: string
|
||
name: string
|
||
displayName: string
|
||
bundle: string
|
||
scope: string
|
||
recordCount: number
|
||
}
|
||
|
||
type GraphLink = SimulationLinkDatum<GraphNode> & {
|
||
sourceField: string
|
||
targetField: string
|
||
}
|
||
|
||
const BUNDLE_COLORS: Record<string, string> = {
|
||
cuod: '#b05a2e', // accent (terracotta)
|
||
geo: '#4f7038', // green
|
||
comms: '#a8762a', // warn
|
||
delivery: '#3a2818', // navy
|
||
default: '#52483d', // ink-2
|
||
}
|
||
|
||
// colorForBundle helper больше не используется — карточки рендерят
|
||
// planet-orbs через radial gradients (defs id=planet-{bundle}), а легенда
|
||
// читает BUNDLE_COLORS напрямую через Object.entries.
|
||
|
||
export function DictionaryGraph() {
|
||
const dictsQuery = useDictionaries()
|
||
const dicts = dictsQuery.data ?? []
|
||
// localStorage persist чтобы preference сохранился между переходами.
|
||
// SSR-safe guard на window — vitest setup использует jsdom где window есть,
|
||
// но defensive чтобы не упасть на SSR в будущем.
|
||
const [mode, setMode] = useState<GraphMode>(() => {
|
||
if (typeof window === 'undefined') return '2d'
|
||
return (localStorage.getItem('graph.mode') as GraphMode) === '3d' ? '3d' : '2d'
|
||
})
|
||
useEffect(() => {
|
||
if (typeof window !== 'undefined') localStorage.setItem('graph.mode', mode)
|
||
}, [mode])
|
||
|
||
// Fetch dependents для всех dicts параллельно (cached между mounts).
|
||
const dependentsResults = useQueries({
|
||
queries: dicts.map((d) => ({
|
||
...dictionaryDependentsQuery(d.name),
|
||
enabled: Boolean(d.name),
|
||
})),
|
||
})
|
||
|
||
const dependentsByDict = useMemo(() => {
|
||
const m = new Map<string, SchemaDependent[]>()
|
||
dicts.forEach((d, i) => {
|
||
m.set(d.name, dependentsResults[i]?.data ?? [])
|
||
})
|
||
return m
|
||
}, [dicts, dependentsResults])
|
||
|
||
// Records counts per dict — backend /dictionaries listing НЕ возвращает
|
||
// recordCount field (см. catalog/dictionaries.index.tsx, тот же подход).
|
||
// Fetch records per dict через useQueries; TanStack Query кэширует между
|
||
// catalog ↔ graph переходами, так что если user уже видел catalog —
|
||
// counts уже в cache, мгновенно. Иначе 37 параллельных queries на mount.
|
||
const recordsResults = useQueries({
|
||
queries: dicts.map((d) => ({
|
||
...recordsQuery(d.name, 'PUBLIC,INTERNAL,RESTRICTED'),
|
||
enabled: Boolean(d.name),
|
||
})),
|
||
})
|
||
|
||
const recordCountByDict = useMemo(() => {
|
||
const m = new Map<string, number>()
|
||
dicts.forEach((d, i) => {
|
||
const records = recordsResults[i]?.data
|
||
if (Array.isArray(records)) m.set(d.name, records.length)
|
||
})
|
||
return m
|
||
}, [dicts, recordsResults])
|
||
|
||
const allDependentsLoading = dependentsResults.some((r) => r.isLoading)
|
||
const allRecordsLoading = recordsResults.some((r) => r.isLoading)
|
||
|
||
if (dictsQuery.isLoading) {
|
||
return <LoadingBlock size="lg" label="Загрузка справочников…" />
|
||
}
|
||
|
||
if (dictsQuery.error) {
|
||
return <QueryErrorState error={dictsQuery.error} onRetry={() => dictsQuery.refetch()} />
|
||
}
|
||
|
||
if (dicts.length === 0) {
|
||
return <div className="text-body text-mute">Справочники не найдены.</div>
|
||
}
|
||
|
||
return (
|
||
<GraphCanvas
|
||
dicts={dicts}
|
||
dependentsByDict={dependentsByDict}
|
||
recordCountByDict={recordCountByDict}
|
||
depsLoading={allDependentsLoading || allRecordsLoading}
|
||
mode={mode}
|
||
onModeChange={setMode}
|
||
/>
|
||
)
|
||
}
|
||
|
||
function GraphCanvas({
|
||
dicts,
|
||
dependentsByDict,
|
||
recordCountByDict,
|
||
depsLoading,
|
||
mode,
|
||
onModeChange,
|
||
}: {
|
||
dicts: DictionaryDefinition[]
|
||
dependentsByDict: Map<string, SchemaDependent[]>
|
||
recordCountByDict: Map<string, number>
|
||
depsLoading: boolean
|
||
mode: GraphMode
|
||
onModeChange: (m: GraphMode) => void
|
||
}) {
|
||
// WebGL-fallback banner — показывается несколько секунд после авто-возврата
|
||
// в 2D из-за ошибки 3D renderer'а (нет WebGL / hardware accel выключено).
|
||
const [webglFallbackNotice, setWebglFallbackNotice] = useState(false)
|
||
const navigate = useNavigate()
|
||
const wrapperRef = useRef<HTMLDivElement>(null)
|
||
const svgRef = useRef<SVGSVGElement>(null)
|
||
const [size, setSize] = useState({ width: 800, height: 600 })
|
||
const [hoveredId, setHoveredId] = useState<string | null>(null)
|
||
// Zoom/pan state — управляется wheel events + mouse drag на empty space.
|
||
// Transform применяется к <g> wrapper'у, эффективно scaling всех children.
|
||
const [view, setView] = useState({ zoom: 1, panX: 0, panY: 0 })
|
||
const panStartRef = useRef<{ x: number; y: number; panX: number; panY: number } | null>(null)
|
||
// Force-rerender tick. Simulation .on('tick') увеличивает это значение,
|
||
// React видит state change → перерисовывает SVG с новыми node.x/y. Не
|
||
// читаем value напрямую, только инкрементируем — eslint complains, поэтому
|
||
// используем void.
|
||
const [, setTick] = useState(0)
|
||
const simulationRef = useRef<Simulation<GraphNode, GraphLink> | null>(null)
|
||
const nodesRef = useRef<GraphNode[]>([])
|
||
const linksRef = useRef<GraphLink[]>([])
|
||
|
||
// Build initial graph data. recordCount приходит из per-dict useRecords
|
||
// (см. parent component DictionaryGraph) — backend /dictionaries listing
|
||
// не отдаёт count, поэтому fetch'аем records и берём .length.
|
||
const { nodes, links } = useMemo(() => {
|
||
const nodes: GraphNode[] = dicts.map((d) => ({
|
||
id: d.name,
|
||
name: d.name,
|
||
displayName: d.displayName ?? d.name,
|
||
bundle: d.bundle,
|
||
scope: d.scope,
|
||
recordCount: recordCountByDict.get(d.name) ?? d.recordCount ?? 0,
|
||
}))
|
||
|
||
const links: GraphLink[] = []
|
||
dicts.forEach((target) => {
|
||
const deps = dependentsByDict.get(target.name) ?? []
|
||
deps.forEach((dep) => {
|
||
// Edge: source dict → target dict (source has FK к target).
|
||
if (nodes.find((n) => n.id === dep.sourceDict)) {
|
||
links.push({
|
||
source: dep.sourceDict,
|
||
target: target.name,
|
||
sourceField: dep.sourceField,
|
||
targetField: dep.targetField,
|
||
})
|
||
}
|
||
})
|
||
})
|
||
|
||
return { nodes, links }
|
||
}, [dicts, dependentsByDict, recordCountByDict])
|
||
|
||
// Responsive sizing.
|
||
useEffect(() => {
|
||
const el = wrapperRef.current
|
||
if (!el) return
|
||
const ro = new ResizeObserver(() => {
|
||
setSize({
|
||
width: el.clientWidth,
|
||
height: Math.max(el.clientHeight, 500),
|
||
})
|
||
})
|
||
ro.observe(el)
|
||
return () => ro.disconnect()
|
||
}, [])
|
||
|
||
// Init simulation when nodes/links change.
|
||
useEffect(() => {
|
||
if (nodes.length === 0) return
|
||
nodesRef.current = nodes.map((n) => ({ ...n }))
|
||
linksRef.current = links.map((l) => ({ ...l }))
|
||
|
||
// Force tuning под card geometry (W=200, H=56).
|
||
// - link distance 180 — расстояние центров двух соединённых cards;
|
||
// с шириной 200 это лёгкое касание краёв (визуально связные).
|
||
// - charge -540 — умеренное repulsion для 200px nodes; orphan nodes
|
||
// рассыпаются вокруг центра, не убегают за viewport.
|
||
// - collide radius 110 — halfW 100 + 10px padding.
|
||
const sim = forceSimulation<GraphNode>(nodesRef.current)
|
||
.force(
|
||
'link',
|
||
forceLink<GraphNode, GraphLink>(linksRef.current)
|
||
.id((d) => d.id)
|
||
.distance(180)
|
||
.strength(0.4),
|
||
)
|
||
.force('charge', forceManyBody().strength(-540))
|
||
.force('center', forceCenter(size.width / 2, size.height / 2))
|
||
.force('collide', forceCollide<GraphNode>().radius(110).strength(0.9))
|
||
.alpha(1)
|
||
.alphaDecay(0.025)
|
||
.on('tick', () => setTick((t) => (t + 1) % 1_000_000))
|
||
|
||
simulationRef.current = sim
|
||
return () => {
|
||
sim.stop()
|
||
}
|
||
}, [nodes, links, size.width, size.height])
|
||
|
||
// Update center force on resize without re-init.
|
||
useEffect(() => {
|
||
const sim = simulationRef.current
|
||
if (!sim) return
|
||
sim.force('center', forceCenter(size.width / 2, size.height / 2))
|
||
sim.alpha(0.3).restart()
|
||
}, [size])
|
||
|
||
const connectedIds = useMemo(() => {
|
||
if (!hoveredId) return new Set<string>()
|
||
const out = new Set<string>([hoveredId])
|
||
linksRef.current.forEach((l) => {
|
||
const s = typeof l.source === 'string' ? l.source : (l.source as GraphNode).id
|
||
const t = typeof l.target === 'string' ? l.target : (l.target as GraphNode).id
|
||
if (s === hoveredId) out.add(t)
|
||
if (t === hoveredId) out.add(s)
|
||
})
|
||
return out
|
||
}, [hoveredId])
|
||
|
||
// Космос — фон graph container'а: глубокий радиальный градиент от deep
|
||
// navy в центре к чёрному по краям + starfield 120 точек поверх. Stars
|
||
// мемоизированы через useMemo чтобы случайные позиции были stable между
|
||
// re-renders'ами (иначе звёзды бы мерцали при каждом tick simulation).
|
||
// Звёзды distribuируются на 2000×2000 виртуальном poле — больше viewport,
|
||
// чтобы pan'инг показывал новые звёзды а не пустоту по краям.
|
||
const starfield = useMemo(() => {
|
||
const pts: Array<{ x: number; y: number; r: number; o: number }> = []
|
||
const seed = 137
|
||
let s = seed
|
||
const rand = () => {
|
||
// Простой LCG — детерминированный без библиотеки seedrandom.
|
||
s = (s * 1103515245 + 12345) & 0x7fffffff
|
||
return s / 0x7fffffff
|
||
}
|
||
for (let i = 0; i < 140; i++) {
|
||
const isLarge = rand() > 0.85
|
||
pts.push({
|
||
x: rand() * 2400 - 200,
|
||
y: rand() * 1800 - 200,
|
||
r: isLarge ? 1.2 + rand() * 0.8 : 0.4 + rand() * 0.6,
|
||
o: 0.3 + rand() * 0.6,
|
||
})
|
||
}
|
||
return pts
|
||
}, [])
|
||
|
||
return (
|
||
<div
|
||
ref={wrapperRef}
|
||
className="relative w-full h-[calc(100vh-220px)] min-h-[500px] rounded-lg border border-line overflow-hidden"
|
||
style={{
|
||
// Космос — radial gradient deep navy → near-black, плюс subtle
|
||
// accent halo в центре (намёк на star/sun без отвлекающего диска).
|
||
background:
|
||
'radial-gradient(ellipse at 40% 35%, #1a1742 0%, #0c0a23 45%, #060512 90%)',
|
||
}}
|
||
>
|
||
{depsLoading && (
|
||
<div className="absolute inset-0 z-10 flex items-center justify-center pointer-events-none">
|
||
<div className="flex flex-col items-center gap-3 bg-[#1c1840]/85 backdrop-blur border border-[#3d3863] rounded-lg px-6 py-5 shadow-2xl">
|
||
<GlobeLoader size={56} />
|
||
<span className="text-mono text-cap uppercase tracking-wider text-[#a09bc8]">
|
||
Считаем планеты и связи…
|
||
</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{/* Controls overlay — top-right. Stack из 2D/3D toggle + zoom (только в 2D).
|
||
* Космос-стиль: dark glass panels с violet-tint border, accent (warm
|
||
* orange) для active state. */}
|
||
<div className="absolute top-2 right-2 z-10 flex flex-col items-end gap-1">
|
||
{/* 2D / 3D mode toggle */}
|
||
<div className="inline-flex items-center rounded-md border border-[#3d3863] bg-[#1c1840]/85 backdrop-blur p-0.5 shadow-lg">
|
||
<button
|
||
type="button"
|
||
onClick={() => onModeChange('2d')}
|
||
aria-pressed={mode === '2d'}
|
||
title="2D режим — SVG force-directed layout"
|
||
className={cn(
|
||
'h-7 px-2.5 inline-flex items-center justify-center text-cap font-mono uppercase tracking-wider rounded-sm transition-colors',
|
||
mode === '2d'
|
||
? 'bg-[#ff9a64] text-[#1c1840]'
|
||
: 'text-[#a09bc8] hover:text-[#f0eaff] hover:bg-[#3d3863]/40',
|
||
)}
|
||
>
|
||
2D
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => onModeChange('3d')}
|
||
aria-pressed={mode === '3d'}
|
||
title="3D режим — WebGL three.js (camera orbit)"
|
||
className={cn(
|
||
'h-7 px-2.5 inline-flex items-center justify-center text-cap font-mono uppercase tracking-wider rounded-sm transition-colors',
|
||
mode === '3d'
|
||
? 'bg-[#ff9a64] text-[#1c1840]'
|
||
: 'text-[#a09bc8] hover:text-[#f0eaff] hover:bg-[#3d3863]/40',
|
||
)}
|
||
>
|
||
3D
|
||
</button>
|
||
</div>
|
||
|
||
{/* Zoom controls — только в 2D, в 3D camera orbit имеет свой wheel-zoom. */}
|
||
{mode === '2d' && (
|
||
<div className="inline-flex items-center gap-1 rounded-md border border-[#3d3863] bg-[#1c1840]/85 backdrop-blur p-0.5 shadow-lg">
|
||
<button
|
||
type="button"
|
||
onClick={() =>
|
||
setView((v) => ({ ...v, zoom: Math.min(4, v.zoom * 1.25) }))
|
||
}
|
||
aria-label="Zoom in"
|
||
title="Zoom in (+)"
|
||
className="size-7 inline-flex items-center justify-center text-[#c5bff0] hover:text-[#f0eaff] hover:bg-[#3d3863]/40 rounded-sm transition-colors"
|
||
>
|
||
+
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() =>
|
||
setView((v) => ({ ...v, zoom: Math.max(0.2, v.zoom / 1.25) }))
|
||
}
|
||
aria-label="Zoom out"
|
||
title="Zoom out (−)"
|
||
className="size-7 inline-flex items-center justify-center text-[#c5bff0] hover:text-[#f0eaff] hover:bg-[#3d3863]/40 rounded-sm transition-colors"
|
||
>
|
||
−
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setView({ zoom: 1, panX: 0, panY: 0 })}
|
||
aria-label="Reset view"
|
||
title="Reset (1:1)"
|
||
className="h-7 px-2 inline-flex items-center justify-center text-cap text-[#a09bc8] hover:text-[#f0eaff] hover:bg-[#3d3863]/40 rounded-sm transition-colors"
|
||
>
|
||
1:1
|
||
</button>
|
||
<span className="px-1 text-mono text-cap text-[#a09bc8] tabular-nums">
|
||
{Math.round(view.zoom * 100)}%
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{mode === '3d' && (
|
||
<Graph3DErrorBoundary
|
||
resetKey={size.width + size.height}
|
||
onError={() => {
|
||
// WebGL undefined / hardware accel off → switch back в 2D.
|
||
// Banner показывается ~5s, потом сам исчезает.
|
||
onModeChange('2d')
|
||
setWebglFallbackNotice(true)
|
||
setTimeout(() => setWebglFallbackNotice(false), 5000)
|
||
}}
|
||
fallback={
|
||
<div className="absolute inset-0 flex items-center justify-center p-6">
|
||
<div className="text-center max-w-md">
|
||
<p className="text-title-md text-[#f0eaff] mb-2">3D-режим недоступен</p>
|
||
<p className="text-cell text-[#a09bc8]">
|
||
Браузер не смог инициализировать WebGL. Возможно отключено
|
||
аппаратное ускорение (chrome://gpu) или используется среда без
|
||
поддержки 3D. Возврат к 2D-режиму…
|
||
</p>
|
||
</div>
|
||
</div>
|
||
}
|
||
>
|
||
<Suspense
|
||
fallback={
|
||
<div className="absolute inset-0 flex items-center justify-center">
|
||
<LoadingBlock size="lg" label="Загрузка 3D-движка…" />
|
||
</div>
|
||
}
|
||
>
|
||
<DictionaryGraph3D
|
||
dicts={dicts}
|
||
dependentsByDict={dependentsByDict}
|
||
recordCountByDict={recordCountByDict}
|
||
width={size.width}
|
||
height={size.height}
|
||
/>
|
||
</Suspense>
|
||
</Graph3DErrorBoundary>
|
||
)}
|
||
|
||
{webglFallbackNotice && (
|
||
<div className="absolute top-3 left-1/2 -translate-x-1/2 z-20 max-w-md bg-[#3d2614]/85 border border-[#ff9a64] text-[#ffd5b0] text-cell rounded-md px-3 py-2 shadow-lg backdrop-blur">
|
||
3D недоступен в этом браузере — переключено на 2D.
|
||
</div>
|
||
)}
|
||
|
||
{mode === '2d' && <svg
|
||
ref={svgRef}
|
||
width={size.width}
|
||
height={size.height}
|
||
viewBox={`0 0 ${size.width} ${size.height}`}
|
||
className="block touch-none"
|
||
style={{ cursor: panStartRef.current ? 'grabbing' : 'grab' }}
|
||
onWheel={(e) => {
|
||
// Zoom toward cursor — scale factor based on wheel delta.
|
||
// Negative deltaY (scroll up) = zoom in.
|
||
e.preventDefault()
|
||
const rect = e.currentTarget.getBoundingClientRect()
|
||
const mx = e.clientX - rect.left
|
||
const my = e.clientY - rect.top
|
||
setView((v) => {
|
||
const factor = e.deltaY < 0 ? 1.1 : 1 / 1.1
|
||
const newZoom = Math.min(4, Math.max(0.2, v.zoom * factor))
|
||
// Anchor zoom вокруг cursor: viewport position под cursor должна
|
||
// остаться той же относительно world coordinates.
|
||
const worldX = (mx - v.panX) / v.zoom
|
||
const worldY = (my - v.panY) / v.zoom
|
||
return {
|
||
zoom: newZoom,
|
||
panX: mx - worldX * newZoom,
|
||
panY: my - worldY * newZoom,
|
||
}
|
||
})
|
||
}}
|
||
onMouseDown={(e) => {
|
||
// Pan только если клик НЕ на ноде. Узлы свои onMouseDown handlers.
|
||
if ((e.target as SVGElement).tagName === 'svg') {
|
||
panStartRef.current = {
|
||
x: e.clientX,
|
||
y: e.clientY,
|
||
panX: view.panX,
|
||
panY: view.panY,
|
||
}
|
||
}
|
||
}}
|
||
onMouseMove={(e) => {
|
||
// Захватываем start snapshot СИНХРОННО — setView updater запускается
|
||
// асинхронно, и к тому моменту panStartRef.current может стать null
|
||
// (mouseup/mouseleave). Раньше `panStartRef.current!.panX + dx`
|
||
// внутри updater'а падал с "Cannot read properties of null (reading
|
||
// 'panX')". Локальная const живёт в closure → стабильна.
|
||
const start = panStartRef.current
|
||
if (!start) return
|
||
const dx = e.clientX - start.x
|
||
const dy = e.clientY - start.y
|
||
setView((v) => ({
|
||
...v,
|
||
panX: start.panX + dx,
|
||
panY: start.panY + dy,
|
||
}))
|
||
}}
|
||
onMouseUp={() => {
|
||
panStartRef.current = null
|
||
}}
|
||
onMouseLeave={() => {
|
||
panStartRef.current = null
|
||
}}
|
||
>
|
||
<defs>
|
||
<marker
|
||
id="arrow"
|
||
viewBox="0 0 10 10"
|
||
refX="20"
|
||
refY="5"
|
||
markerWidth="6"
|
||
markerHeight="6"
|
||
orient="auto"
|
||
>
|
||
<path d="M 0 0 L 10 5 L 0 10 z" fill="#7a76b8" opacity="0.6" />
|
||
</marker>
|
||
<marker
|
||
id="arrow-hi"
|
||
viewBox="0 0 10 10"
|
||
refX="20"
|
||
refY="5"
|
||
markerWidth="7"
|
||
markerHeight="7"
|
||
orient="auto"
|
||
>
|
||
<path d="M 0 0 L 10 5 L 0 10 z" fill="#ff9a64" />
|
||
</marker>
|
||
|
||
{/* Planet glow filter — soft blur halo вокруг планет-орбов.
|
||
* stdDeviation = размер размытия в SVG-юнитах. Layered:
|
||
* blur copy сначала, потом source поверх. */}
|
||
<filter id="planet-glow" x="-50%" y="-50%" width="200%" height="200%">
|
||
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
|
||
<feMerge>
|
||
<feMergeNode in="blur" />
|
||
<feMergeNode in="SourceGraphic" />
|
||
</feMerge>
|
||
</filter>
|
||
|
||
{/* Per-bundle radial gradient — даёт 3D-сферу feel (lit на
|
||
* top-left, shadow на bottom-right). Цвета: lit edge = brighter
|
||
* mix of bundle + white, base = bundle, shadow = darker mix.
|
||
* Gradient'ы определены статически для всех бандлов. */}
|
||
<radialGradient id="planet-cuod" cx="35%" cy="30%" r="70%">
|
||
<stop offset="0%" stopColor="#ffc8a3" />
|
||
<stop offset="40%" stopColor="#d97757" />
|
||
<stop offset="100%" stopColor="#5c2810" />
|
||
</radialGradient>
|
||
<radialGradient id="planet-geo" cx="35%" cy="30%" r="70%">
|
||
<stop offset="0%" stopColor="#a8c47a" />
|
||
<stop offset="40%" stopColor="#5b8044" />
|
||
<stop offset="100%" stopColor="#22341a" />
|
||
</radialGradient>
|
||
<radialGradient id="planet-comms" cx="35%" cy="30%" r="70%">
|
||
<stop offset="0%" stopColor="#e6c97a" />
|
||
<stop offset="40%" stopColor="#b8902f" />
|
||
<stop offset="100%" stopColor="#4a3a10" />
|
||
</radialGradient>
|
||
<radialGradient id="planet-delivery" cx="35%" cy="30%" r="70%">
|
||
<stop offset="0%" stopColor="#8a6e5a" />
|
||
<stop offset="40%" stopColor="#4a3324" />
|
||
<stop offset="100%" stopColor="#1a0e08" />
|
||
</radialGradient>
|
||
<radialGradient id="planet-default" cx="35%" cy="30%" r="70%">
|
||
<stop offset="0%" stopColor="#9d93a6" />
|
||
<stop offset="40%" stopColor="#5e5560" />
|
||
<stop offset="100%" stopColor="#2a242a" />
|
||
</radialGradient>
|
||
|
||
{/* Edge glow — мягкий blur halo вокруг линий связей для космо-вайба.
|
||
* stdDeviation=2 — лёгкое размытие; merge с source чтобы исходная
|
||
* линия оставалась видимой поверх halo. */}
|
||
<filter id="edge-glow" x="-50%" y="-50%" width="200%" height="200%">
|
||
<feGaussianBlur in="SourceGraphic" stdDeviation="1.6" result="blur" />
|
||
<feMerge>
|
||
<feMergeNode in="blur" />
|
||
<feMergeNode in="SourceGraphic" />
|
||
</feMerge>
|
||
</filter>
|
||
|
||
{/* Edge gradient — обычная связь идёт от cool violet к warm
|
||
* stardust, hovered связь — accent throughout. Это даёт
|
||
* direction-сigг'нал даже без arrow markers. */}
|
||
<linearGradient id="edge-stroke" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stopColor="#5b569b" stopOpacity="0.85" />
|
||
<stop offset="100%" stopColor="#a09bc8" stopOpacity="0.55" />
|
||
</linearGradient>
|
||
<linearGradient id="edge-stroke-hi" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stopColor="#ff9a64" stopOpacity="1" />
|
||
<stop offset="100%" stopColor="#ffd5b0" stopOpacity="0.9" />
|
||
</linearGradient>
|
||
</defs>
|
||
|
||
{/* Starfield — рендерится первым (под всем), не пересчитывается
|
||
* при ticks simulation (useMemo seeded LCG для стабильных позиций).
|
||
* Position поверх pan/zoom group? Нет — звёзды должны оставаться
|
||
* "fixed" в космосе относительно world, поэтому рендерим ВНУТРИ
|
||
* zoom group (двигаются вместе с graph nodes). */}
|
||
|
||
{/* Zoom/pan transform — все nodes/edges рендерятся внутри <g>. */}
|
||
<g transform={`translate(${view.panX} ${view.panY}) scale(${view.zoom})`}>
|
||
{/* Starfield — звёзды в space layer, под edges/nodes */}
|
||
<g pointerEvents="none">
|
||
{starfield.map((st, i) => (
|
||
<circle
|
||
key={i}
|
||
cx={st.x}
|
||
cy={st.y}
|
||
r={st.r}
|
||
fill="#e6e6ff"
|
||
opacity={st.o}
|
||
/>
|
||
))}
|
||
</g>
|
||
|
||
{/* Edges (под nodes) — космические "потоки" между планетами.
|
||
* Стиль:
|
||
* - Default: cool violet → mute violet gradient stroke с лёгким
|
||
* glow filter + dashed pattern (orbital track feel).
|
||
* - Highlighted: accent (warm orange) с brighter glow, particles
|
||
* ставим на 2D через stroke-dashoffset CSS animation (см.
|
||
* @keyframes edge-flow в styles.css).
|
||
* - Dimmed (не connected): opacity 0.12, no glow (фокус на
|
||
* выделенной цепи). */}
|
||
{linksRef.current.map((l, i) => {
|
||
const s = l.source as GraphNode
|
||
const t = l.target as GraphNode
|
||
if (!s.x || !s.y || !t.x || !t.y) return null
|
||
const highlighted =
|
||
hoveredId &&
|
||
(s.id === hoveredId || t.id === hoveredId)
|
||
const dimmed = hoveredId && !highlighted
|
||
return (
|
||
<line
|
||
key={i}
|
||
x1={s.x}
|
||
y1={s.y}
|
||
x2={t.x}
|
||
y2={t.y}
|
||
stroke={
|
||
highlighted
|
||
? 'url(#edge-stroke-hi)'
|
||
: dimmed
|
||
? '#3d3863'
|
||
: 'url(#edge-stroke)'
|
||
}
|
||
strokeWidth={highlighted ? 1.8 : 1}
|
||
strokeDasharray={highlighted ? '4 3' : '2 4'}
|
||
opacity={dimmed ? 0.15 : highlighted ? 0.95 : 0.55}
|
||
filter={dimmed ? undefined : 'url(#edge-glow)'}
|
||
markerEnd={highlighted ? 'url(#arrow-hi)' : 'url(#arrow)'}
|
||
className={highlighted ? 'graph-edge-flow' : undefined}
|
||
/>
|
||
)
|
||
})}
|
||
|
||
{/* Nodes — планет-карточки: glowing orb (radial gradient sphere) +
|
||
* dark glass card с title/count/subtitle (HTML inside foreignObject
|
||
* → нативный text-overflow:ellipsis, никаких manual char-caps).
|
||
* Layout: row1 = title (full width with ellipsis), row2 = subtitle
|
||
* слева | record count справа. Раньше title и count были в одном
|
||
* row → длинные имена дрезались за count и за edge карточки. */}
|
||
{nodesRef.current.map((n) => {
|
||
const dim = hoveredId && !connectedIds.has(n.id)
|
||
const focused = hoveredId === n.id
|
||
// Card 200×56 — расширил с 180 чтобы reserve area для самой
|
||
// большой планеты (orbR_max=18) не съедала text content.
|
||
const W = 200
|
||
const H = 56
|
||
const halfW = W / 2
|
||
const halfH = H / 2
|
||
// Planet radius шкалируется по record count: sqrt чтобы 5→14
|
||
// записей давали заметную разницу (не log который сжал бы их в
|
||
// 2-3px diff). Min 7 (0 записей — планета всё ещё видна), max
|
||
// 18 (cap чтобы не разорвать card layout).
|
||
// records=0 → 7px
|
||
// records=5 → 10.1px
|
||
// records=14 → 12.2px
|
||
// records=50 → 16.9px
|
||
// records≥100 → 18px (cap)
|
||
const orbR = Math.min(18, Math.max(7, 7 + Math.sqrt(n.recordCount) * 1.4))
|
||
// Orb center остаётся в фиксированном x для consistent left margin —
|
||
// меняется только радиус (планета "растёт" наружу).
|
||
const orbCx = -halfW + 26
|
||
const bundleKey = n.bundle in BUNDLE_COLORS ? n.bundle : 'default'
|
||
const planetGradId = `planet-${bundleKey}`
|
||
// Content area стартует за reserved orb area (фиксированно для
|
||
// max orb size), чтобы title не дёргался когда счётчики
|
||
// обновляются из useRecords.
|
||
const contentX = orbCx + 18 + 8 // max orbR (18) + padding 8
|
||
const contentW = halfW - contentX - 8
|
||
const recordText = n.recordCount > 0 ? `${n.recordCount} зап` : '—'
|
||
return (
|
||
<g
|
||
key={n.id}
|
||
transform={`translate(${n.x ?? 0},${n.y ?? 0})`}
|
||
className="cursor-pointer"
|
||
opacity={dim ? 0.25 : 1}
|
||
onMouseEnter={() => setHoveredId(n.id)}
|
||
onMouseLeave={() => setHoveredId(null)}
|
||
onClick={() => navigate({ to: '/dictionaries/$name', params: { name: n.name } })}
|
||
>
|
||
{/* Card body — dark glass с violet-ish border, focused → accent border + glow */}
|
||
<rect
|
||
x={-halfW}
|
||
y={-halfH}
|
||
width={W}
|
||
height={H}
|
||
rx={8}
|
||
fill="#1c1840"
|
||
fillOpacity={0.85}
|
||
stroke={focused ? '#ff9a64' : '#3d3863'}
|
||
strokeWidth={focused ? 1.5 : 1}
|
||
className={focused ? 'drop-shadow-[0_0_12px_rgba(255,154,100,0.5)]' : ''}
|
||
/>
|
||
{/* Planet orb с glow filter + radial gradient (lit top-left).
|
||
* Размер orbR пропорционален recordCount (sqrt scale, 7-18px),
|
||
* specular highlight тоже шкалируется чтобы выглядеть как
|
||
* планета а не точка. */}
|
||
<g filter="url(#planet-glow)">
|
||
<circle
|
||
cx={orbCx}
|
||
cy={0}
|
||
r={orbR}
|
||
fill={`url(#${planetGradId})`}
|
||
/>
|
||
<ellipse
|
||
cx={orbCx - orbR * 0.3}
|
||
cy={-orbR * 0.3}
|
||
rx={orbR * 0.22}
|
||
ry={orbR * 0.14}
|
||
fill="#ffffff"
|
||
opacity={0.4}
|
||
/>
|
||
</g>
|
||
{/* foreignObject — HTML inside SVG для нативного truncate.
|
||
* pointerEvents=none чтобы родительский <g> ловил mouse events. */}
|
||
<foreignObject
|
||
x={contentX}
|
||
y={-halfH + 5}
|
||
width={contentW}
|
||
height={H - 10}
|
||
style={{ pointerEvents: 'none' }}
|
||
>
|
||
<div
|
||
style={{
|
||
height: '100%',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
justifyContent: 'space-between',
|
||
overflow: 'hidden',
|
||
fontFamily: 'ui-sans-serif, system-ui, sans-serif',
|
||
}}
|
||
>
|
||
{/* Title — full width, ellipsis на overflow */}
|
||
<div
|
||
style={{
|
||
fontSize: '12px',
|
||
fontWeight: 600,
|
||
color: '#f0eaff',
|
||
whiteSpace: 'nowrap',
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis',
|
||
}}
|
||
title={n.displayName}
|
||
>
|
||
{n.displayName}
|
||
</div>
|
||
{/* Subtitle row: name · bundle (left, ellipsis) | count (right, no shrink) */}
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'baseline',
|
||
justifyContent: 'space-between',
|
||
gap: '6px',
|
||
fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
|
||
}}
|
||
>
|
||
<span
|
||
style={{
|
||
fontSize: '10px',
|
||
color: '#a09bc8',
|
||
whiteSpace: 'nowrap',
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis',
|
||
minWidth: 0,
|
||
flex: 1,
|
||
}}
|
||
title={`${n.name} · ${n.bundle}`}
|
||
>
|
||
{n.name} · {n.bundle}
|
||
</span>
|
||
<span
|
||
style={{
|
||
fontSize: '11px',
|
||
color: n.recordCount > 0 ? '#ff9a64' : '#7a76b8',
|
||
fontWeight: n.recordCount > 0 ? 600 : 400,
|
||
whiteSpace: 'nowrap',
|
||
flexShrink: 0,
|
||
}}
|
||
>
|
||
{recordText}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</foreignObject>
|
||
</g>
|
||
)
|
||
})}
|
||
</g>
|
||
{/* === end zoom/pan transform === */}
|
||
</svg>}
|
||
{/* Legend — space-themed panel с planet-orb swatches */}
|
||
<div className="absolute bottom-3 left-3 flex flex-col gap-1 bg-[#1c1840]/85 backdrop-blur px-3 py-2 rounded-md border border-[#3d3863] text-cell shadow-lg">
|
||
<div className="font-display uppercase tracking-wider text-[#a09bc8] mb-0.5">Bundle</div>
|
||
{Object.entries(BUNDLE_COLORS)
|
||
.filter(([k]) => k !== 'default')
|
||
.map(([bundle, color]) => (
|
||
<div key={bundle} className="flex items-center gap-1.5">
|
||
<span
|
||
className="size-2.5 rounded-full"
|
||
style={{
|
||
background: color,
|
||
boxShadow: `0 0 4px ${color}aa`,
|
||
}}
|
||
/>
|
||
<span className="text-[#c5bff0] font-mono">{bundle}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|