Доработать граф связей

2026-09-11 00:43:39 +03:00
parent 4991a146d5
commit ea0098d705
3 changed files with 616 additions and 316 deletions
@@ -1,2 +1,2 @@
-client.version=1.12.13
+client.version=1.12.14
 server.version=1.10.4
@@ -222,9 +222,10 @@ function hash01(str) {
 * @param {Function} [opts.onCenterTap] - тап по центральному узлу (node) => void
 * @param {Function} [opts.onNodeTap] - тап по периферийному узлу (node) => void (вызывается ДО центрирования)
 * @param {Function} [opts.onNodeLongPress] - долгое нажатие (node, screenPoint) => void
+ * @param {Function} [opts.onNodeMoveEnd] - ручное перемещение периферийного узла (node, {x,y}) => void
 * @returns {{ destroy: Function, recenter: Function, setModel: Function, getFocusNode: Function }}
 */
-export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeLongPress, onNodeHover, onDiveChange } = {}) {
+export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeLongPress, onNodeMoveEnd, onNodeHover, onDiveChange } = {}) {
  // Слои DOM
  const edgesSvg = document.createElementNS(SVGNS, 'svg');
  edgesSvg.setAttribute('class', 'fg-edges');
@@ -1467,6 +1468,10 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
  let camStartY = 0;
  let moved = false;
  let downNodeEl = null;
+  let downNode = null;
+  let nodeDragActive = false;
+  let nodeDragStartX = 0;
+  let nodeDragStartY = 0;
  let longTimer = 0;
  let longFired = false;
  const activePointers = new Map(); // id → {x, y}: для щипкового зума двумя пальцами
@@ -1595,7 +1600,10 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
    longFired = false;
    downNodeEl = ev.target instanceof Element ? ev.target.closest('.fg-node') : null;
    if (downNodeEl) { downNodeEl.classList.add('is-pressed'); haptic(6); } // тактильный «клик» вдавливания
-    const downNode = nodeFromEvent(ev);
+    downNode = nodeFromEvent(ev);
+    nodeDragActive = false;
+    nodeDragStartX = Number(downNode?.x) || 0;
+    nodeDragStartY = Number(downNode?.y) || 0;
    // касание пальцем по узлу = «наведение» (превью ветки), как ховер мышью; мышь обслуживают over/out
    if (downNode && ev.pointerType !== 'mouse' && typeof onNodeHover === 'function') onNodeHover(downNode, true);
    if (downNode && typeof onNodeLongPress === 'function') {
@@ -1646,13 +1654,29 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
    if (!moved && Math.hypot(dx, dy) > PAN_THRESHOLD) {
      moved = true;
      if (longTimer) { window.clearTimeout(longTimer); longTimer = 0; }
-      if (downNodeEl) downNodeEl.classList.remove('is-pressed'); // это свайп, а не нажатие
+      if (downNodeEl) downNodeEl.classList.remove('is-pressed'); // это drag/pan, а не нажатие
+      // Не центральный аватар перетаскивается сам. Пустой фон или центральный узел продолжают панорамировать карту.
+      nodeDragActive = Boolean(downNode && !downNode.isFocus);
+      if (nodeDragActive && cssBloom) endCssBloom();
      // палец «съехал» с узла — снимаем временный ховер-превью (касанием), если он был
      if (ev.pointerType !== 'mouse' && typeof onNodeHover === 'function') onNodeHover(null, false);
      camTargetX = null; camTargetY = null; // свайп отменяет доводчик камеры (приоритет жеста)
      cancelTween();          // жест прерывает анимацию центрирования
      dragging = true;
    }
+    if (moved && nodeDragActive && downNode) {
+      // dx/dy приходят в экранных пикселях, координаты узла живут в world-space — делим на текущий zoom.
+      const nx = nodeDragStartX + dx / Math.max(0.001, zoom);
+      const ny = nodeDragStartY + dy / Math.max(0.001, zoom);
+      downNode.x = nx; downNode.y = ny;
+      downNode.tx = nx; downNode.ty = ny;
+      downNode.bfx = nx; downNode.bfy = ny;
+      downNode.vx = 0; downNode.vy = 0;
+      downNode.fixedLayout = true;
+      renderNodes();
+      renderEdges();
+      return;
+    }
    if (moved) {
      const newCamX = camStartX + dx;
      const newCamY = camStartY + dy;
@@ -1683,14 +1707,23 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
    try { stage.releasePointerCapture(ev.pointerId); } catch { /* не было захвата — ок */ }
    const wasMoved = moved;
    const wasLong = longFired;
+    const movedNode = nodeDragActive ? downNode : null;
    pointerId = null;
    dragging = false;
+    nodeDragActive = false;
    // касание: убрали палец — снимаем временный ховер-превью (фиксацию ниже делает тап через onNodeTap)
    if (ev.pointerType !== 'mouse' && typeof onNodeHover === 'function') onNodeHover(null, false);

    if (wasMoved || wasLong) {
-      // после pan даём физике чуть устаканиться и уснуть
-      if (wasMoved) wake();
+      if (wasMoved && movedNode) {
+        // Передаём окончательную world-позицию наружу, чтобы ручная правка пережила следующий setModel/history render.
+        if (typeof onNodeMoveEnd === 'function') onNodeMoveEnd(movedNode, { x: movedNode.x, y: movedNode.y });
+        renderEdges();
+      } else if (wasMoved) {
+        // после pan даём физике чуть устаканиться и уснуть
+        wake();
+      }
+      downNode = null;
      return;
    }
    // это был тап
@@ -1706,6 +1739,7 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
    }
    if (tapNode.isFocus) {
      if (typeof onCenterTap === 'function') onCenterTap(tapNode);
+      downNode = null;
      return;
    }
    if (typeof onNodeTap === 'function') {
@@ -1716,6 +1750,7 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
      // нет внешнего обработчика — внутреннее перецентрирование (фолбэк)
      startRecenterTween(tapNode.id);
    }
+    downNode = null;
  }

  function onResize() {