Связи (pixel-web): этап 2 паутины — hover-превью + collision + zoom + камера-доводчик + синхро-пульс

Доработка режима «Интерактивная паутина» (только лаборатория, deep-режим «Вселенная»):

Взаимодействие (по запросу): наведение ≠ клик.
- Hover-превью: навёл мышь/палец на узел — его ветка ВРЕМЕННО выплывает; убрал — втягивается.
  (pointerover/out для мыши, pointerdown/up для пальца → onNodeHover → graph.setHover; флаг hovered).
- Фиксация кликом: тап/клик → graph.toggleExpand ставит pinned — ветка остаётся раскрытой и
  после ухода курсора; повторный тап снимает фиксацию. Эффект = pinned || hovered (expandTargetOf).

Этап 2 «Мегамасштаб»:
- Collision-расталкивание: раскрытая ветка усиливает отталкивание соседей 1-го уровня
  пропорционально expandP (EXPAND_REPULSION=2.4) — кластеры разъезжаются, не накладываясь.
- Свободный зум: колесо мыши (onWheel) + щипок двумя пальцами (activePointers/pinching),
  zoom 0.55–2.6 «к точке»; мир — CSS-scale, линии (SVG) пересчитываются в экранных координатах × zoom.
- Камера-доводчик: при фиксации ветки, если её веер упирается в край, камера мягко дотягивается
  (glideCameraTo → camTargetX/Y, lerp CAM_GLIDE_K в tick); любой жест отменяет доводчик.
- Синхро-пульс: сияющие/трековые «световоды» дышат толщиной/размытием 3.6с в такт ободку узла.

Реальный путь /network-view не затронут: deep-код под tier≥2/hasDeep, hover-колбэк даёт только
лаборатория. Ветка экспериментальная (отдельно от pixel-08.06/PR). Бамп client.version → 1.2.144.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Pixel
2026-06-09 22:34:26 +03:00
co-authored by Claude Opus 4.8
parent 04d9d588e8
commit 72dc83daff
5 changed files with 233 additions and 33 deletions
+18
View File
@@ -68,12 +68,30 @@
stroke-width: 4;
stroke-linecap: round;
filter: blur(2px); /* мягкое объёмное свечение вокруг нити */
/* синхро-пульс: нить «дышит» толщиной/размытием в том же ритме (3.6с), что и ободок сияющего узла —
в покое SVG не перерисовывается, поэтому все нити стартуют синхронно и пульсируют вместе. */
animation: fg-edge-pulse 3.6s ease-in-out infinite;
}
.fg-edge-core {
fill: none;
stroke: #e0f7fc; /* ультра-светлый голубой — чёткий контур луча */
stroke-width: 1.5;
stroke-linecap: round;
animation: fg-edge-core-pulse 3.6s ease-in-out infinite;
}
/* пульс «световода» в такт дыханию сияющего ободка (та же длительность 3.6с) */
@keyframes fg-edge-pulse {
0%, 100% { stroke-width: 3.4; filter: blur(1.6px); }
50% { stroke-width: 5.2; filter: blur(2.8px); }
}
@keyframes fg-edge-core-pulse {
0%, 100% { stroke-width: 1.3; }
50% { stroke-width: 1.9; }
}
@media (prefers-reduced-motion: reduce) {
.fg-edge-glow, .fg-edge-core { animation: none; }
}
.fg-node {