@cocorof/graphier 0.1.0 → 1.2.0

package/dist/index.cjs

@@ -34,7 +34,8 @@ const DEFAULT_STYLE = {
   labelThreshold: 0.8,
   showLabels: true,
   maxLabels: 150,
-  edgeWidthScale: 1
+  edgeWidthScale: 1,
+  flySpeed: 1
 };
 const DEFAULT_LAYOUT = {
   type: "force-3d",
@@ -42,7 +43,8 @@ const DEFAULT_LAYOUT = {
   linkDistance: "auto",
   alphaDecay: "auto",
   velocityDecay: 0.4,
-  settledThreshold: 5e-3
+  settledThreshold: 5e-3,
+  spreadFactor: "auto"
 };
 function hexToRgb(hex) {
   const c2 = hex.replace("#", "");
@@ -188,17 +190,26 @@ function resolveTheme(theme) {
   }
   return { nodeColor, nodeColorBright, linkColor, backgroundColor };
 }
+function autoSpreadFactor(n) {
+  if (n <= 500) return 1;
+  if (n <= 2e3) return 1 + (n - 500) / 1500 * 0.3;
+  if (n <= 1e4) return 1.3 + (n - 2e3) / 8e3 * 0.5;
+  return Math.min(2.5, 1.8 + (n - 1e4) / 4e4 * 0.7);
+}
 function resolveLayoutParams(nodeCount, config) {
   const n = nodeCount;
-  const charge = (config == null ? void 0 : config.charge) !== "auto" && (config == null ? void 0 : config.charge) != null ? config.charge : n > 5e4 ? -80 : n > 1e4 ? -120 : -200;
-  const distanceMax = n > 5e4 ? 1500 : n > 1e4 ? 2e3 : 3e3;
+  const spread = (config == null ? void 0 : config.spreadFactor) !== "auto" && (config == null ? void 0 : config.spreadFactor) != null ? config.spreadFactor : autoSpreadFactor(n);
+  const baseCharge = (config == null ? void 0 : config.charge) !== "auto" && (config == null ? void 0 : config.charge) != null ? config.charge : n > 5e4 ? -80 : n > 1e4 ? -120 : -200;
+  const charge = baseCharge * spread;
+  const distanceMax = (n > 5e4 ? 1500 : n > 1e4 ? 2e3 : 3e3) * spread;
   const theta = n > 2e4 ? 1.5 : n > 5e3 ? 1.2 : 0.9;
-  const linkDistance = (config == null ? void 0 : config.linkDistance) !== "auto" && (config == null ? void 0 : config.linkDistance) != null ? config.linkDistance : n > 5e4 ? 120 : n > 1e4 ? 180 : 250;
+  const baseLinkDistance = (config == null ? void 0 : config.linkDistance) !== "auto" && (config == null ? void 0 : config.linkDistance) != null ? config.linkDistance : n > 5e4 ? 120 : n > 1e4 ? 180 : 250;
+  const linkDistance = baseLinkDistance * spread;
   const alphaDecay = (config == null ? void 0 : config.alphaDecay) !== "auto" && (config == null ? void 0 : config.alphaDecay) != null ? config.alphaDecay : n > 5e4 ? 0.04 : n > 1e4 ? 0.03 : 0.02;
   const velocityDecay = (config == null ? void 0 : config.velocityDecay) ?? 0.4;
   const settledThreshold = (config == null ? void 0 : config.settledThreshold) ?? 5e-3;
   const postEvery = n > 5e4 ? 5 : n > 1e4 ? 3 : 2;
-  const initialRadius2 = 500 + Math.min(n, 1e4) * 0.1;
+  const initialRadius2 = (500 + Math.min(n, 1e4) * 0.1) * spread;
   return {
     charge,
     distanceMax,
@@ -1721,27 +1732,31 @@ function applyNodeHighlight(nodesMesh, nodes, selectedNodeId, highlightSet, them
     } else if (node.id === selectedNodeId) {
       tmpColor.set(brightColor);
       brightTmp.setRGB(1, 1, 1);
-      tmpColor.lerp(brightTmp, 0.5);
+      tmpColor.lerp(brightTmp, 0.65);
+      tmpColor.multiplyScalar(1.4);
+      tmpColor.r = Math.min(tmpColor.r, 2);
+      tmpColor.g = Math.min(tmpColor.g, 2);
+      tmpColor.b = Math.min(tmpColor.b, 2);
     } else if (highlightSet.has(node.id)) {
       const hop = highlightSet.get(node.id);
       if (hop === 1) {
-        tmpColor.set(brightColor);
+        tmpColor.set(brightColor).multiplyScalar(1.2);
       } else if (hop === 2) {
         tmpColor.set(baseColor);
         brightTmp.set(brightColor);
-        tmpColor.lerp(brightTmp, 0.4);
+        tmpColor.lerp(brightTmp, 0.5);
       } else {
-        tmpColor.set(baseColor).multiplyScalar(0.7);
+        tmpColor.set(baseColor).multiplyScalar(0.6);
       }
     } else {
-      tmpColor.set(baseColor).multiplyScalar(0.12);
+      tmpColor.set(baseColor).multiplyScalar(0.04);
     }
     nodesMesh.setColorAt(i, tmpColor);
   }
   if (nodesMesh.instanceColor) nodesMesh.instanceColor.needsUpdate = true;
   const mat = nodesMesh.material;
   if ((_a = mat.uniforms) == null ? void 0 : _a.uGlowIntensity) {
-    mat.uniforms.uGlowIntensity.value = highlightSet ? 1.15 : 1;
+    mat.uniforms.uGlowIntensity.value = highlightSet ? 1.5 : 1;
   }
 }
 function applyEdgeHighlight(edgesMesh, links, edgeNodeIndices, edgeLinkIndices, highlightSet, edgeOpacity, nodeCount, theme) {
@@ -1769,7 +1784,7 @@ function applyEdgeHighlight(edgesMesh, links, edgeNodeIndices, edgeLinkIndices,
         tmpColor.multiplyScalar(1.2);
       }
     } else {
-      tmpColor.setRGB(0.03, 0.03, 0.06);
+      tmpColor.setRGB(0.01, 0.01, 0.02);
     }
     colorArr[i * 6 + 0] = tmpColor.r;
     colorArr[i * 6 + 1] = tmpColor.g;
@@ -1856,6 +1871,9 @@ function createLabelSystem(maxLabels) {
 }
 function defaultLabelText$1(node) {
   const label = node.label ?? node.id ?? "";
+  if (node.type === "repo" && label.includes("/")) {
+    return label.split("/").pop();
+  }
   return label.length > 30 ? label.substring(0, 27) + "…" : label;
 }
 function getOrCreateTexture(cache, nodeId, text, color) {
@@ -1894,7 +1912,7 @@ function getOrCreateTexture(cache, nodeId, text, color) {
   }
   return entry;
 }
-function updateLabels(state, nodes, positions, scales, camera, theme, showLabels, labelScale, labelThreshold, maxLabels, labelFormatter) {
+function updateLabels(state, nodes, positions, scales, camera, theme, showLabels, labelScale, labelThreshold, maxLabels, labelFormatter, highlightSet) {
   if (!positions || nodes.length === 0 || !showLabels) {
     for (const sp of state.sprites) sp.visible = false;
     return;
@@ -1908,6 +1926,7 @@ function updateLabels(state, nodes, positions, scales, camera, theme, showLabels
   const maxDistSq = maxDist * maxDist;
   const candidates = [];
   for (let i = 0; i < nc; i++) {
+    if (highlightSet && !highlightSet.has(nodes[i].id)) continue;
     const dx = positions[i * 3] - camPos.x;
     const dy = positions[i * 3 + 1] - camPos.y;
     const dz = positions[i * 3 + 2] - camPos.z;
@@ -1953,58 +1972,49 @@ function disposeLabelSystem(state) {
   }
   state.textureCache.clear();
 }
-const ACCEL = 12e-4;
-const MAX_SPEED = 0.06;
-const DAMPING = 0.88;
-const ZOOM_FACTOR = 0.015;
-const DEAD_ZONE = 1e-4;
+const ORBIT_ACCEL = 12e-4;
+const ORBIT_MAX_SPEED = 0.06;
+const ORBIT_DAMPING = 0.88;
+const ORBIT_ZOOM_FACTOR = 0.015;
+const ORBIT_DEAD_ZONE = 1e-4;
+const FLY_ACCEL = 6e-3;
+const FLY_FRICTION = 0.92;
+const FLY_MAX_THRUST = 0.18;
+const FLY_TURN_RATE = 8e-3;
+const FLY_DEAD_ZONE = 2e-4;
 const _offset = new THREE__namespace.Vector3();
 const _right = new THREE__namespace.Vector3();
 const _q = new THREE__namespace.Quaternion();
-function setupKeyboardControls(camera, controls, container) {
-  const keys = {};
+const _dir = new THREE__namespace.Vector3();
+const _worldUp = new THREE__namespace.Vector3(0, 1, 0);
+function clamp(v, min, max) {
+  return v < min ? min : v > max ? max : v;
+}
+function createOrbitUpdate(camera, controls, keys) {
   const vel = { zoom: 0, azimuth: 0, polar: 0 };
-  function onKeyDown2(e) {
-    var _a;
-    const tag = (_a = e.target) == null ? void 0 : _a.tagName;
-    if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
-    keys[e.key] = true;
-  }
-  function onKeyUp(e) {
-    keys[e.key] = false;
-  }
-  function onBlur() {
-    for (const k of Object.keys(keys)) keys[k] = false;
-    vel.zoom = 0;
-    vel.azimuth = 0;
-    vel.polar = 0;
-  }
-  container.addEventListener("keydown", onKeyDown2);
-  container.addEventListener("keyup", onKeyUp);
-  container.addEventListener("blur", onBlur);
-  function update() {
-    if (keys["z"] || keys["Z"]) vel.zoom -= ACCEL;
-    if (keys["x"] || keys["X"]) vel.zoom += ACCEL;
-    if (keys["ArrowLeft"]) vel.azimuth -= ACCEL;
-    if (keys["ArrowRight"]) vel.azimuth += ACCEL;
-    if (keys["ArrowUp"]) vel.polar -= ACCEL;
-    if (keys["ArrowDown"]) vel.polar += ACCEL;
-    vel.zoom = clamp(vel.zoom, -MAX_SPEED, MAX_SPEED);
-    vel.azimuth = clamp(vel.azimuth, -MAX_SPEED, MAX_SPEED);
-    vel.polar = clamp(vel.polar, -MAX_SPEED, MAX_SPEED);
-    vel.zoom *= DAMPING;
-    vel.azimuth *= DAMPING;
-    vel.polar *= DAMPING;
-    if (Math.abs(vel.zoom) < DEAD_ZONE) vel.zoom = 0;
-    if (Math.abs(vel.azimuth) < DEAD_ZONE) vel.azimuth = 0;
-    if (Math.abs(vel.polar) < DEAD_ZONE) vel.polar = 0;
+  return function update() {
+    if (keys["z"] || keys["Z"]) vel.zoom -= ORBIT_ACCEL;
+    if (keys["x"] || keys["X"]) vel.zoom += ORBIT_ACCEL;
+    if (keys["ArrowLeft"]) vel.azimuth -= ORBIT_ACCEL;
+    if (keys["ArrowRight"]) vel.azimuth += ORBIT_ACCEL;
+    if (keys["ArrowUp"]) vel.polar -= ORBIT_ACCEL;
+    if (keys["ArrowDown"]) vel.polar += ORBIT_ACCEL;
+    vel.zoom = clamp(vel.zoom, -ORBIT_MAX_SPEED, ORBIT_MAX_SPEED);
+    vel.azimuth = clamp(vel.azimuth, -ORBIT_MAX_SPEED, ORBIT_MAX_SPEED);
+    vel.polar = clamp(vel.polar, -ORBIT_MAX_SPEED, ORBIT_MAX_SPEED);
+    vel.zoom *= ORBIT_DAMPING;
+    vel.azimuth *= ORBIT_DAMPING;
+    vel.polar *= ORBIT_DAMPING;
+    if (Math.abs(vel.zoom) < ORBIT_DEAD_ZONE) vel.zoom = 0;
+    if (Math.abs(vel.azimuth) < ORBIT_DEAD_ZONE) vel.azimuth = 0;
+    if (Math.abs(vel.polar) < ORBIT_DEAD_ZONE) vel.polar = 0;
     const hasMotion = vel.zoom !== 0 || vel.azimuth !== 0 || vel.polar !== 0;
     if (!hasMotion) return false;
     const target = controls.target;
     _offset.copy(camera.position).sub(target);
     let radius = _offset.length();
     if (vel.zoom !== 0) {
-      radius *= 1 + vel.zoom * ZOOM_FACTOR * radius * 0.01;
+      radius *= 1 + vel.zoom * ORBIT_ZOOM_FACTOR * radius * 0.01;
       radius = Math.max(controls.minDistance, Math.min(controls.maxDistance, radius));
     }
     if (vel.azimuth !== 0) {
@@ -2025,16 +2035,81 @@ function setupKeyboardControls(camera, controls, container) {
     camera.lookAt(target);
     controls.target.copy(target);
     return true;
+  };
+}
+function createFlyUpdate(camera, controls, keys, state) {
+  const vel = { thrust: 0, yaw: 0, pitch: 0 };
+  return function update() {
+    const speedMul = state.flySpeed;
+    if (keys["z"] || keys["Z"]) vel.thrust += FLY_ACCEL * speedMul;
+    if (keys["x"] || keys["X"]) vel.thrust -= FLY_ACCEL * speedMul;
+    if (keys["a"] || keys["A"] || keys["ArrowLeft"]) vel.yaw += FLY_TURN_RATE;
+    if (keys["d"] || keys["D"] || keys["ArrowRight"]) vel.yaw -= FLY_TURN_RATE;
+    if (keys["w"] || keys["W"] || keys["ArrowUp"]) vel.pitch += FLY_TURN_RATE;
+    if (keys["s"] || keys["S"] || keys["ArrowDown"]) vel.pitch -= FLY_TURN_RATE;
+    const lookDist = camera.position.distanceTo(controls.target);
+    const distScale = Math.max(0.3, lookDist * 3e-3);
+    vel.thrust = clamp(vel.thrust, -FLY_MAX_THRUST * distScale * speedMul, FLY_MAX_THRUST * distScale * speedMul);
+    vel.yaw = clamp(vel.yaw, -FLY_TURN_RATE * 2, FLY_TURN_RATE * 2);
+    vel.pitch = clamp(vel.pitch, -FLY_TURN_RATE * 2, FLY_TURN_RATE * 2);
+    vel.thrust *= FLY_FRICTION;
+    vel.yaw *= FLY_FRICTION;
+    vel.pitch *= FLY_FRICTION;
+    if (Math.abs(vel.thrust) < FLY_DEAD_ZONE) vel.thrust = 0;
+    if (Math.abs(vel.yaw) < FLY_DEAD_ZONE) vel.yaw = 0;
+    if (Math.abs(vel.pitch) < FLY_DEAD_ZONE) vel.pitch = 0;
+    const hasMotion = vel.thrust !== 0 || vel.yaw !== 0 || vel.pitch !== 0;
+    if (!hasMotion) return false;
+    if (vel.yaw !== 0) {
+      const upDot = camera.up.dot(_worldUp);
+      const yawSign = upDot < 0 ? -1 : 1;
+      _q.setFromAxisAngle(_worldUp, vel.yaw * yawSign);
+      camera.quaternion.premultiply(_q);
+      camera.up.applyQuaternion(_q).normalize();
+    }
+    if (vel.pitch !== 0) {
+      _right.setFromMatrixColumn(camera.matrixWorld, 0).normalize();
+      _q.setFromAxisAngle(_right, vel.pitch);
+      camera.quaternion.premultiply(_q);
+      camera.up.applyQuaternion(_q).normalize();
+    }
+    if (vel.thrust !== 0) {
+      camera.getWorldDirection(_dir);
+      _dir.multiplyScalar(vel.thrust * distScale * 100);
+      camera.position.add(_dir);
+      controls.target.add(_dir);
+    }
+    return true;
+  };
+}
+function setupKeyboardControls(camera, controls, container, mode = "fly", flySpeed = 1) {
+  const keys = {};
+  const state = { flySpeed };
+  function onKeyDown2(e) {
+    var _a;
+    const tag = (_a = e.target) == null ? void 0 : _a.tagName;
+    if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+    keys[e.key] = true;
   }
+  function onKeyUp(e) {
+    keys[e.key] = false;
+  }
+  function onBlur() {
+    for (const k of Object.keys(keys)) keys[k] = false;
+  }
+  container.addEventListener("keydown", onKeyDown2);
+  container.addEventListener("keyup", onKeyUp);
+  container.addEventListener("blur", onBlur);
+  const updateFn = mode === "fly" ? createFlyUpdate(camera, controls, keys, state) : createOrbitUpdate(camera, controls, keys);
   function cleanup() {
     container.removeEventListener("keydown", onKeyDown2);
     container.removeEventListener("keyup", onKeyUp);
     container.removeEventListener("blur", onBlur);
   }
-  return { update, cleanup };
-}
-function clamp(v, min, max) {
-  return v < min ? min : v > max ? max : v;
+  function setFlySpeed(speed) {
+    state.flySpeed = speed;
+  }
+  return { update: updateFn, cleanup, setFlySpeed };
 }
 function createScene(container, backgroundColor, style, rendererConfig) {
   const scene = new THREE__namespace.Scene();
@@ -2071,7 +2146,8 @@ function createScene(container, backgroundColor, style, rendererConfig) {
   scene.add(selectionRing);
   const labels = createLabelSystem(style.maxLabels);
   scene.add(labels.group);
-  const keyboard = setupKeyboardControls(camera, controls, container);
+  const cameraMode = (rendererConfig == null ? void 0 : rendererConfig.cameraMode) ?? "fly";
+  const keyboard = setupKeyboardControls(camera, controls, container, cameraMode, style.flySpeed ?? 1);
   return {
     scene,
     camera,
@@ -2410,21 +2486,136 @@ function zoomToFitPositions(camera, controls, positions, duration, padding) {
     duration
   );
 }
-function setupInteraction(canvas, camera, controls, getNodesMesh, getNodes, callbacks, container) {
+const EDGE_HIT_THRESHOLD = 5;
+function setupInteraction(canvas, camera, controls, getNodesMesh, getNodes, callbacks, container, getEdgeData) {
   const raycaster = new THREE__namespace.Raycaster();
   const mouse = new THREE__namespace.Vector2();
   let mouseDownPos = null;
   let lastClickTime = 0;
   let lastClickNodeId = null;
   let singleClickTimer = null;
+  let dragNode = null;
+  let isDragging = false;
+  const dragPlane = new THREE__namespace.Plane();
+  const dragIntersect = new THREE__namespace.Vector3();
   function onPointerDown2(e) {
     mouseDownPos = { x: e.clientX, y: e.clientY };
     if (container && document.activeElement !== container) {
       container.focus({ preventScroll: true });
     }
+    if (callbacks.onNodeDrag) {
+      const nodesMesh = getNodesMesh();
+      if (nodesMesh) {
+        const rect = canvas.getBoundingClientRect();
+        mouse.x = (e.clientX - rect.left) / rect.width * 2 - 1;
+        mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
+        raycaster.setFromCamera(mouse, camera);
+        const hits = raycaster.intersectObject(nodesMesh);
+        if (hits.length > 0 && hits[0].instanceId != null) {
+          const nodes = getNodes();
+          dragNode = nodes[hits[0].instanceId] ?? null;
+          hits[0].instanceId;
+        }
+      }
+    }
+  }
+  function onPointerMove2(e) {
+    var _a, _b, _c;
+    if (dragNode && mouseDownPos && callbacks.onNodeDrag) {
+      const dx = Math.abs(e.clientX - mouseDownPos.x);
+      const dy = Math.abs(e.clientY - mouseDownPos.y);
+      if (dx + dy > 5) {
+        isDragging = true;
+        controls.enabled = false;
+        const rect2 = canvas.getBoundingClientRect();
+        mouse.x = (e.clientX - rect2.left) / rect2.width * 2 - 1;
+        mouse.y = -((e.clientY - rect2.top) / rect2.height) * 2 + 1;
+        const nodePos = new THREE__namespace.Vector3(
+          dragNode.x ?? 0,
+          dragNode.y ?? 0,
+          dragNode.z ?? 0
+        );
+        dragPlane.setFromNormalAndCoplanarPoint(
+          camera.getWorldDirection(new THREE__namespace.Vector3()).negate(),
+          nodePos
+        );
+        raycaster.setFromCamera(mouse, camera);
+        if (raycaster.ray.intersectPlane(dragPlane, dragIntersect)) {
+          callbacks.onNodeDrag(dragNode, {
+            x: dragIntersect.x,
+            y: dragIntersect.y,
+            z: dragIntersect.z
+          });
+        }
+        return;
+      }
+    }
+    if (!callbacks.onNodeHover && !callbacks.onLinkHover) return;
+    const nodesMesh = getNodesMesh();
+    if (!nodesMesh) return;
+    const rect = canvas.getBoundingClientRect();
+    mouse.x = (e.clientX - rect.left) / rect.width * 2 - 1;
+    mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
+    raycaster.setFromCamera(mouse, camera);
+    const hits = raycaster.intersectObject(nodesMesh);
+    if (hits.length > 0 && hits[0].instanceId != null) {
+      const nodes = getNodes();
+      const node = nodes[hits[0].instanceId];
+      if (node && node.id !== lastHoveredId) {
+        lastHoveredId = node.id;
+        lastHoveredLinkIdx = -1;
+        canvas.style.cursor = "pointer";
+        (_a = callbacks.onNodeHover) == null ? void 0 : _a.call(callbacks, node);
+        (_b = callbacks.onLinkHover) == null ? void 0 : _b.call(callbacks, null);
+      }
+    } else {
+      if (lastHoveredId !== null) {
+        lastHoveredId = null;
+        canvas.style.cursor = "default";
+        (_c = callbacks.onNodeHover) == null ? void 0 : _c.call(callbacks, null);
+      }
+      if (callbacks.onLinkHover && getEdgeData) {
+        const edgeData = getEdgeData();
+        if (edgeData == null ? void 0 : edgeData.positions) {
+          const hitLink = findNearestEdge(
+            e.clientX,
+            e.clientY,
+            rect,
+            camera,
+            edgeData
+          );
+          if (hitLink) {
+            if (lastHoveredLinkIdx !== hitLink.index) {
+              lastHoveredLinkIdx = hitLink.index;
+              canvas.style.cursor = "pointer";
+              callbacks.onLinkHover(hitLink.link);
+            }
+          } else if (lastHoveredLinkIdx !== -1) {
+            lastHoveredLinkIdx = -1;
+            canvas.style.cursor = "default";
+            callbacks.onLinkHover(null);
+          }
+        }
+      }
+    }
   }
   function onPointerUp2(e) {
     var _a;
+    if (isDragging && dragNode && callbacks.onNodeDragEnd) {
+      callbacks.onNodeDragEnd(dragNode, {
+        x: dragNode.x ?? 0,
+        y: dragNode.y ?? 0,
+        z: dragNode.z ?? 0
+      });
+    }
+    if (isDragging) {
+      isDragging = false;
+      dragNode = null;
+      controls.enabled = true;
+      mouseDownPos = null;
+      return;
+    }
+    dragNode = null;
     if (!mouseDownPos) return;
     const dx = Math.abs(e.clientX - mouseDownPos.x);
     const dy = Math.abs(e.clientY - mouseDownPos.y);
@@ -2472,6 +2663,22 @@ function setupInteraction(canvas, camera, controls, getNodesMesh, getNodes, call
         callbacks.onNodeClick(node);
       }, 250);
     } else {
+      if (callbacks.onLinkClick && getEdgeData) {
+        const edgeData = getEdgeData();
+        if (edgeData == null ? void 0 : edgeData.positions) {
+          const hitLink = findNearestEdge(
+            e.clientX,
+            e.clientY,
+            rect,
+            camera,
+            edgeData
+          );
+          if (hitLink) {
+            callbacks.onLinkClick(hitLink.link);
+            return;
+          }
+        }
+      }
       if (singleClickTimer) clearTimeout(singleClickTimer);
       singleClickTimer = null;
       lastClickTime = 0;
@@ -2479,13 +2686,9 @@ function setupInteraction(canvas, camera, controls, getNodesMesh, getNodes, call
       callbacks.onNodeClick(null);
     }
   }
-  const keyTarget = container ?? window;
-  function onKeyDown2(e) {
-    if (e.key === "Escape") callbacks.onNodeClick(null);
-  }
-  let lastHoveredId = null;
-  function onPointerMove2(e) {
-    if (!callbacks.onNodeHover) return;
+  function onContextMenu2(e) {
+    if (!callbacks.onContextMenu) return;
+    e.preventDefault();
     const nodesMesh = getNodesMesh();
     if (!nodesMesh) return;
     const rect = canvas.getBoundingClientRect();
@@ -2496,20 +2699,21 @@ function setupInteraction(canvas, camera, controls, getNodesMesh, getNodes, call
     if (hits.length > 0 && hits[0].instanceId != null) {
       const nodes = getNodes();
       const node = nodes[hits[0].instanceId];
-      if (node && node.id !== lastHoveredId) {
-        lastHoveredId = node.id;
-        canvas.style.cursor = "pointer";
-        callbacks.onNodeHover(node);
+      if (node) {
+        callbacks.onContextMenu(node, { x: e.clientX, y: e.clientY });
       }
-    } else if (lastHoveredId !== null) {
-      lastHoveredId = null;
-      canvas.style.cursor = "default";
-      callbacks.onNodeHover(null);
     }
   }
+  const keyTarget = container ?? window;
+  function onKeyDown2(e) {
+    if (e.key === "Escape") callbacks.onNodeClick(null);
+  }
+  let lastHoveredId = null;
+  let lastHoveredLinkIdx = -1;
   canvas.addEventListener("pointerdown", onPointerDown2);
   canvas.addEventListener("pointerup", onPointerUp2);
   canvas.addEventListener("pointermove", onPointerMove2);
+  canvas.addEventListener("contextmenu", onContextMenu2);
   keyTarget.addEventListener("keydown", onKeyDown2);
   return {
     cleanup: () => {
@@ -2517,10 +2721,48 @@ function setupInteraction(canvas, camera, controls, getNodesMesh, getNodes, call
       canvas.removeEventListener("pointerdown", onPointerDown2);
       canvas.removeEventListener("pointerup", onPointerUp2);
       canvas.removeEventListener("pointermove", onPointerMove2);
+      canvas.removeEventListener("contextmenu", onContextMenu2);
       keyTarget.removeEventListener("keydown", onKeyDown2);
     }
   };
 }
+function findNearestEdge(clientX, clientY, rect, camera, edgeData) {
+  const { links, edgeNodeIndices, edgeLinkIndices, positions } = edgeData;
+  const screenX = clientX - rect.left;
+  const screenY = clientY - rect.top;
+  const w = rect.width;
+  const h = rect.height;
+  let bestDist = EDGE_HIT_THRESHOLD;
+  let bestIdx = -1;
+  const tmpVec = new THREE__namespace.Vector3();
+  for (let i = 0; i < edgeNodeIndices.length; i++) {
+    const [si, ti] = edgeNodeIndices[i];
+    tmpVec.set(positions[si * 3], positions[si * 3 + 1], positions[si * 3 + 2]);
+    tmpVec.project(camera);
+    const sx1 = (tmpVec.x * 0.5 + 0.5) * w;
+    const sy1 = (-tmpVec.y * 0.5 + 0.5) * h;
+    tmpVec.set(positions[ti * 3], positions[ti * 3 + 1], positions[ti * 3 + 2]);
+    tmpVec.project(camera);
+    const sx2 = (tmpVec.x * 0.5 + 0.5) * w;
+    const sy2 = (-tmpVec.y * 0.5 + 0.5) * h;
+    const dist = pointToSegmentDist(screenX, screenY, sx1, sy1, sx2, sy2);
+    if (dist < bestDist) {
+      bestDist = dist;
+      bestIdx = i;
+    }
+  }
+  if (bestIdx === -1) return null;
+  return { link: links[edgeLinkIndices[bestIdx]], index: bestIdx };
+}
+function pointToSegmentDist(px, py, ax, ay, bx, by) {
+  const dx = bx - ax;
+  const dy = by - ay;
+  const lenSq = dx * dx + dy * dy;
+  if (lenSq < 1e-4) return Math.hypot(px - ax, py - ay);
+  let t = ((px - ax) * dx + (py - ay) * dy) / lenSq;
+  t = Math.max(0, Math.min(1, t));
+  return Math.hypot(px - (ax + t * dx), py - (ay + t * dy));
+}
 function disposeObject(obj) {
   if (!obj) return;
   const mesh = obj;
@@ -2542,6 +2784,13 @@ function NetworkGraph3DInner(props, ref) {
     onNodeClick,
     onNodeDoubleClick,
     onNodeHover,
+    onContextMenu: onContextMenu2,
+    onLinkClick,
+    onLinkHover,
+    onNodeDrag,
+    onNodeDragEnd,
+    onLayoutSettled,
+    onLayoutTick,
     selectedNodeId = null,
     highlightHops = 3,
     theme: themeProp,
@@ -2574,13 +2823,28 @@ function NetworkGraph3DInner(props, ref) {
   const onNodeClickRef = react.useRef(onNodeClick);
   const onNodeDoubleClickRef = react.useRef(onNodeDoubleClick);
   const onNodeHoverRef = react.useRef(onNodeHover);
+  const onContextMenuRef = react.useRef(onContextMenu2);
+  const onLinkClickRef = react.useRef(onLinkClick);
+  const onLinkHoverRef = react.useRef(onLinkHover);
+  const onNodeDragRef = react.useRef(onNodeDrag);
+  const onNodeDragEndRef = react.useRef(onNodeDragEnd);
+  const onLayoutSettledRef = react.useRef(onLayoutSettled);
+  const onLayoutTickRef = react.useRef(onLayoutTick);
   const styleRef = react.useRef(resolvedStyle);
   const themeRef = react.useRef(resolvedTheme);
   const selectedNodeIdRef = react.useRef(selectedNodeId);
   const labelFormatterRef = react.useRef(labelFormatter);
+  const highlightSetRef = react.useRef(null);
   onNodeClickRef.current = onNodeClick;
   onNodeDoubleClickRef.current = onNodeDoubleClick;
   onNodeHoverRef.current = onNodeHover;
+  onContextMenuRef.current = onContextMenu2;
+  onLinkClickRef.current = onLinkClick;
+  onLinkHoverRef.current = onLinkHover;
+  onNodeDragRef.current = onNodeDrag;
+  onNodeDragEndRef.current = onNodeDragEnd;
+  onLayoutSettledRef.current = onLayoutSettled;
+  onLayoutTickRef.current = onLayoutTick;
   styleRef.current = resolvedStyle;
   themeRef.current = resolvedTheme;
   selectedNodeIdRef.current = selectedNodeId;
@@ -2646,7 +2910,8 @@ function NetworkGraph3DInner(props, ref) {
         styleRef.current.labelScale,
         styleRef.current.labelThreshold,
         styleRef.current.maxLabels,
-        labelFormatterRef.current
+        labelFormatterRef.current,
+        highlightSetRef.current
       );
     });
     const resizeObserver = setupResize(container, state);
@@ -2671,9 +2936,52 @@ function NetworkGraph3DInner(props, ref) {
         onNodeHover: (node) => {
           var _a;
           return (_a = onNodeHoverRef.current) == null ? void 0 : _a.call(onNodeHoverRef, node);
+        },
+        onContextMenu: (node, pos) => {
+          var _a;
+          return (_a = onContextMenuRef.current) == null ? void 0 : _a.call(onContextMenuRef, node, pos);
+        },
+        onLinkClick: (link) => {
+          var _a;
+          return (_a = onLinkClickRef.current) == null ? void 0 : _a.call(onLinkClickRef, link);
+        },
+        onLinkHover: (link) => {
+          var _a;
+          return (_a = onLinkHoverRef.current) == null ? void 0 : _a.call(onLinkHoverRef, link);
+        },
+        onNodeDrag: (node, pos) => {
+          var _a;
+          (_a = onNodeDragRef.current) == null ? void 0 : _a.call(onNodeDragRef, node, pos);
+          const d = dataRef.current;
+          const idx = d.nodeIdToIndex.get(node.id);
+          if (idx !== void 0 && d.positions) {
+            d.positions[idx * 3] = pos.x;
+            d.positions[idx * 3 + 1] = pos.y;
+            d.positions[idx * 3 + 2] = pos.z;
+            node.x = pos.x;
+            node.y = pos.y;
+            node.z = pos.z;
+            const gObj = graphObjRef.current;
+            if (gObj && d.scales) {
+              updateNodePositions(gObj.nodesMesh, d.positions, d.scales, d.nodes.length);
+            }
+          }
+        },
+        onNodeDragEnd: (node, pos) => {
+          var _a;
+          return (_a = onNodeDragEndRef.current) == null ? void 0 : _a.call(onNodeDragEndRef, node, pos);
         }
       },
-      container
+      container,
+      () => {
+        const d = dataRef.current;
+        return {
+          links: d.links,
+          edgeNodeIndices: d.edgeNodeIndices,
+          edgeLinkIndices: d.edgeLinkIndices,
+          positions: d.positions
+        };
+      }
     );
     return () => {
       cancelAnim();
@@ -2813,6 +3121,7 @@ function NetworkGraph3DInner(props, ref) {
       console.error("Graphier: Layout worker error:", err);
     };
     worker.onmessage = (e) => {
+      var _a, _b;
       const msg = e.data;
       if (msg.type === "positions") {
         const positions = new Float32Array(msg.positions);
@@ -2840,9 +3149,11 @@ function NetworkGraph3DInner(props, ref) {
             );
           }
         }
+        (_a = onLayoutTickRef.current) == null ? void 0 : _a.call(onLayoutTickRef, msg.alpha);
       }
       if (msg.type === "settled") {
         dataRef.current.settled = true;
+        (_b = onLayoutSettledRef.current) == null ? void 0 : _b.call(onLayoutSettledRef);
       }
     };
     const layoutParams = resolveLayoutParams(nc, layoutProp);
@@ -2887,6 +3198,7 @@ function NetworkGraph3DInner(props, ref) {
     const d = dataRef.current;
     const theme = themeRef.current;
     const style = styleRef.current;
+    highlightSetRef.current = highlightSet;
     applyNodeHighlight(
       gObj.nodesMesh,
       d.nodes,
@@ -2904,6 +3216,18 @@ function NetworkGraph3DInner(props, ref) {
       d.nodes.length,
       theme
     );
+    if (sceneState.bloomPass) {
+      const style2 = styleRef.current;
+      if (highlightSet) {
+        sceneState.bloomPass.strength = style2.bloomStrength * 1.8;
+        sceneState.bloomPass.radius = style2.bloomRadius * 1.4;
+        sceneState.bloomPass.threshold = 0.25;
+      } else {
+        sceneState.bloomPass.strength = style2.bloomStrength;
+        sceneState.bloomPass.radius = style2.bloomRadius;
+        sceneState.bloomPass.threshold = style2.bloomThreshold;
+      }
+    }
     const selectedNode = selectedNodeId ? d.nodes.find((n) => n.id === selectedNodeId) : null;
     updateSelectionRing(
       sceneState.selectionRing,
@@ -2979,6 +3303,11 @@ function NetworkGraph3DInner(props, ref) {
     }, 30);
     return () => clearInterval(id);
   }, [resolvedStyle.autoOrbit]);
+  react.useEffect(() => {
+    const s = sceneRef.current;
+    if (!s) return;
+    s.keyboard.setFlySpeed(resolvedStyle.flySpeed);
+  }, [resolvedStyle.flySpeed]);
   react.useImperativeHandle(ref, () => ({
     cameraPosition(pos, lookAt, duration = 1e3) {
       const s = sceneRef.current;
@@ -3051,13 +3380,21 @@ function NetworkGraph3DInner(props, ref) {
       var _a;
       return ((_a = sceneRef.current) == null ? void 0 : _a.camera) ?? null;
     },
-    async screenshot() {
+    captureScreenshot() {
       const s = sceneRef.current;
       if (!s) return null;
       s.renderer.render(s.scene, s.camera);
-      return new Promise((resolve) => {
-        s.renderer.domElement.toBlob(resolve, "image/png");
-      });
+      return s.renderer.domElement.toDataURL("image/png");
+    },
+    reheatLayout() {
+      const gObj = graphObjRef.current;
+      if (gObj == null ? void 0 : gObj.worker) {
+        gObj.worker.postMessage({ type: "stop" });
+        gObj.worker.terminate();
+        gObj.worker = null;
+      }
+      dataRef.current.settled = false;
+      setAppendedData((prev) => prev ? { ...prev } : { nodes: [], links: [] });
     }
   }));
   return /* @__PURE__ */ jsxRuntime.jsx(