|
| 1 | +import type { GraphLike } from "../types"; |
| 2 | + |
| 3 | +interface ForceableGraph extends GraphLike { |
| 4 | + on(event: string, handler: (e: any) => void): void; |
| 5 | +} |
| 6 | + |
| 7 | +export interface ForceLoopController { |
| 8 | + setEnabled(enabled: boolean): void; |
| 9 | + isEnabled(): boolean; |
| 10 | + destroy(): void; |
| 11 | +} |
| 12 | + |
| 13 | +// 持续力导向控制器 |
| 14 | +// 不依赖 G6 自带 layout tick（首次收敛后就不再跑），而是自写一个轻量 |
| 15 | +// 物理步骤。开关一旦打开，RAF 循环立刻起跑（不必先拖一下）；拖动期间 |
| 16 | +// 被拖节点由 drag-node 钉在鼠标上，其余节点在循环里被斥力 + 连边引力 |
| 17 | +// 推拉；关闭时立即停止。 |
| 18 | +export function attachForceLoop(graph: ForceableGraph): ForceLoopController { |
| 19 | + let enabled = false; |
| 20 | + let raf: number | null = null; |
| 21 | + let pinnedId: string | null = null; |
| 22 | + // 冷启动 ramp-up：当前布局相对我们这套力参数通常不在平衡点， |
| 23 | + // 直接放力会先把节点推远再拉回（欠阻尼弹簧）。让力 / 速度上限 |
| 24 | + // 在前 WARMUP_TOTAL 帧从 0 平滑升到 1，节点就能贴着等势线滑过去。 |
| 25 | + const WARMUP_TOTAL = 36; |
| 26 | + let warmupRemaining = 0; |
| 27 | + const velocities = new Map<string, { vx: number; vy: number }>(); |
| 28 | + |
| 29 | + const radius = (m: any): number => { |
| 30 | + const sizes: Record<string, number> = { |
| 31 | + entity: 80, |
| 32 | + relationship: 50, |
| 33 | + attribute: 50, |
| 34 | + }; |
| 35 | + return sizes[m?.nodeType] || 50; |
| 36 | + }; |
| 37 | + |
| 38 | + const buildAdj = (): Map<string, Set<string>> => { |
| 39 | + const adj = new Map<string, Set<string>>(); |
| 40 | + graph.getEdges().forEach((e) => { |
| 41 | + const m = e.getModel() as any; |
| 42 | + if (!adj.has(m.source)) adj.set(m.source, new Set()); |
| 43 | + if (!adj.has(m.target)) adj.set(m.target, new Set()); |
| 44 | + adj.get(m.source)!.add(m.target); |
| 45 | + adj.get(m.target)!.add(m.source); |
| 46 | + }); |
| 47 | + return adj; |
| 48 | + }; |
| 49 | + |
| 50 | + const step = () => { |
| 51 | + if (!graph || graph.destroyed || !enabled) { |
| 52 | + raf = null; |
| 53 | + return; |
| 54 | + } |
| 55 | + |
| 56 | + const adj = buildAdj(); |
| 57 | + const nodes = graph.getNodes(); |
| 58 | + const pos: Record<string, { x: number; y: number }> = {}; |
| 59 | + const radii: Record<string, number> = {}; |
| 60 | + nodes.forEach((n) => { |
| 61 | + const m = n.getModel() as any; |
| 62 | + pos[m.id] = { x: m.x || 0, y: m.y || 0 }; |
| 63 | + radii[m.id] = radius(m); |
| 64 | + }); |
| 65 | + |
| 66 | + const ids = Object.keys(pos); |
| 67 | + const IDEAL = 130; |
| 68 | + const K_ATTRACT = 0.04; |
| 69 | + const K_REPEL = 9000; |
| 70 | + const DAMPING = 0.78; |
| 71 | + const MAX_V = 16; |
| 72 | + |
| 73 | + // easeOutCubic：第一帧位移≈0，第 WARMUP_TOTAL 帧及之后位移=正常 |
| 74 | + const t = warmupRemaining > 0 ? 1 - warmupRemaining / WARMUP_TOTAL : 1; |
| 75 | + const ramp = 1 - Math.pow(1 - t, 3); |
| 76 | + if (warmupRemaining > 0) warmupRemaining--; |
| 77 | + |
| 78 | + nodes.forEach((n) => { |
| 79 | + const m = n.getModel() as any; |
| 80 | + const id = m.id as string; |
| 81 | + if (id === pinnedId) return; |
| 82 | + const p = pos[id]; |
| 83 | + const r = radii[id]; |
| 84 | + let fx = 0; |
| 85 | + let fy = 0; |
| 86 | + |
| 87 | + // 斥力：所有其它节点 |
| 88 | + for (let i = 0; i < ids.length; i++) { |
| 89 | + const oid = ids[i]; |
| 90 | + if (oid === id) continue; |
| 91 | + const op = pos[oid]; |
| 92 | + const orr = radii[oid]; |
| 93 | + const dx = p.x - op.x; |
| 94 | + const dy = p.y - op.y; |
| 95 | + let d2 = dx * dx + dy * dy; |
| 96 | + if (d2 < 1) d2 = 1; |
| 97 | + const d = Math.sqrt(d2); |
| 98 | + const minD = r + orr + 8; |
| 99 | + const mag = K_REPEL / d2 + (d < minD ? (minD - d) * 0.8 : 0); |
| 100 | + fx += (dx / d) * mag; |
| 101 | + fy += (dy / d) * mag; |
| 102 | + } |
| 103 | + |
| 104 | + // 引力：连边邻居 |
| 105 | + const nb = adj.get(id); |
| 106 | + if (nb) { |
| 107 | + nb.forEach((nid) => { |
| 108 | + const op = pos[nid]; |
| 109 | + if (!op) return; |
| 110 | + const dx = op.x - p.x; |
| 111 | + const dy = op.y - p.y; |
| 112 | + const d = Math.sqrt(dx * dx + dy * dy) || 1; |
| 113 | + const delta = (d - IDEAL) * K_ATTRACT; |
| 114 | + fx += (dx / d) * delta; |
| 115 | + fy += (dy / d) * delta; |
| 116 | + }); |
| 117 | + } |
| 118 | + |
| 119 | + const v = velocities.get(id) || { vx: 0, vy: 0 }; |
| 120 | + // 冷启动阶段把净力按 ramp 缩小：速度积累得慢，等阻尼把过冲压住后 |
| 121 | + // 再放开到完整力度。稳态时 ramp=1，行为不变。 |
| 122 | + v.vx = (v.vx + fx * ramp) * DAMPING; |
| 123 | + v.vy = (v.vy + fy * ramp) * DAMPING; |
| 124 | + const cap = MAX_V * (0.25 + 0.75 * ramp); |
| 125 | + const sp = Math.sqrt(v.vx * v.vx + v.vy * v.vy); |
| 126 | + if (sp > cap) { |
| 127 | + v.vx = (v.vx / sp) * cap; |
| 128 | + v.vy = (v.vy / sp) * cap; |
| 129 | + } |
| 130 | + velocities.set(id, v); |
| 131 | + |
| 132 | + if (Math.abs(v.vx) > 0.05 || Math.abs(v.vy) > 0.05) { |
| 133 | + graph.updateItem(n, { x: p.x + v.vx, y: p.y + v.vy }, false); |
| 134 | + } |
| 135 | + }); |
| 136 | + |
| 137 | + raf = requestAnimationFrame(step); |
| 138 | + }; |
| 139 | + |
| 140 | + graph.on("node:dragstart", (e: any) => { |
| 141 | + if (!enabled || !e.item) return; |
| 142 | + pinnedId = e.item.getID ? e.item.getID() : (e.item.getModel() as any).id; |
| 143 | + velocities.clear(); |
| 144 | + // 拖动应当走完整力度。若开关刚打开还在 warmup 中，立即收尾， |
| 145 | + // 这样用户从开启 → 立即拖动 的过程中也不会感到"卡顿/迟滞"。 |
| 146 | + warmupRemaining = 0; |
| 147 | + }); |
| 148 | + |
| 149 | + graph.on("node:dragend", () => { |
| 150 | + pinnedId = null; |
| 151 | + }); |
| 152 | + |
| 153 | + const stop = () => { |
| 154 | + pinnedId = null; |
| 155 | + warmupRemaining = 0; |
| 156 | + if (raf != null) { |
| 157 | + cancelAnimationFrame(raf); |
| 158 | + raf = null; |
| 159 | + } |
| 160 | + velocities.clear(); |
| 161 | + }; |
| 162 | + |
| 163 | + return { |
| 164 | + setEnabled(en: boolean) { |
| 165 | + if (en === enabled) return; |
| 166 | + enabled = en; |
| 167 | + if (en) { |
| 168 | + velocities.clear(); |
| 169 | + warmupRemaining = WARMUP_TOTAL; |
| 170 | + if (raf == null) raf = requestAnimationFrame(step); |
| 171 | + } else { |
| 172 | + stop(); |
| 173 | + } |
| 174 | + }, |
| 175 | + isEnabled() { |
| 176 | + return enabled; |
| 177 | + }, |
| 178 | + destroy() { |
| 179 | + enabled = false; |
| 180 | + stop(); |
| 181 | + }, |
| 182 | + }; |
| 183 | +} |
0 commit comments