@cocorof/graphier 1.4.3 → 1.4.5

package/dist/index.d.ts

@@ -185,6 +185,13 @@ export declare interface NavigationConfig {
      * (default: cameraMode in 3D, "pan" in 2D)
      */
     keyboard?: "fly" | "orbit" | "pan" | "off";
+    /**
+     * Base drag-pan speed multiplier (default: 1 = cursor-accurate at the
+     * orbit-target depth). On top of this, pan automatically accelerates
+     * up to 3x as the camera zooms deep into the graph — otherwise
+     * traversing a large graph while zoomed in takes dozens of drags.
+     */
+    panSpeed?: number;
 }
 
 export declare const neon: ThemeConfig;

package/dist/index.js

@@ -2050,7 +2050,7 @@ function createPanUpdate(camera, controls, keys) {
     const target = controls.target;
     const dist = camera.position.distanceTo(target);
     if (dx || dy) {
-      const step = Math.max(dist, 50) * PAN_SPEED;
+      const step = Math.max(dist, 50) * PAN_SPEED * (controls.panSpeed || 1);
       _panRight.setFromMatrixColumn(camera.matrix, 0);
       _panUp.setFromMatrixColumn(camera.matrix, 1);
       _panOffset.set(0, 0, 0).addScaledVector(_panRight, dx * step).addScaledVector(_panUp, dy * step);
@@ -2229,6 +2229,7 @@ function createScene(container, backgroundColor, style, rendererConfig) {
   controls.zoomSpeed = 1.2;
   controls.minDistance = 10;
   controls.maxDistance = 3e4;
+  controls.screenSpacePanning = true;
   scene.add(new THREE.AmbientLight(16777215, 0.8));
   const stars = createStarField(4e3, 8e3);
   stars.visible = style.starField;
@@ -2242,26 +2243,35 @@ function createScene(container, backgroundColor, style, rendererConfig) {
   controls.enableZoom = false;
   const flags = {
     is2D: false,
-    keyboardMode3D: cameraMode
+    keyboardMode3D: cameraMode,
+    rotateButton: null,
+    panSpeedBase: 1
   };
-  const _wheelDir = new THREE.Vector3();
+  const _wheelOffset = new THREE.Vector3();
   const onWheel = (e) => {
     if (flags.is2D) return;
     e.preventDefault();
     let delta = -e.deltaY;
     if (e.deltaMode === 1) delta *= 40;
     if (e.deltaMode === 2) delta *= 800;
-    camera.getWorldDirection(_wheelDir);
-    const dist = camera.position.distanceTo(controls.target);
+    const target = controls.target;
+    _wheelOffset.copy(camera.position).sub(target);
+    const dist = _wheelOffset.length();
     const moveAmount = delta * 2e-3 * Math.max(dist * 0.1, 1);
-    camera.position.addScaledVector(_wheelDir, moveAmount);
-    controls.target.addScaledVector(_wheelDir, moveAmount);
+    const newDist = Math.min(
+      Math.max(dist - moveAmount, controls.minDistance),
+      controls.maxDistance
+    );
+    _wheelOffset.setLength(newDist);
+    camera.position.copy(target).add(_wheelOffset);
   };
   canvas.addEventListener("wheel", onWheel, { passive: false });
+  const trackballCleanup = setupTrackballRotation(canvas, camera, controls, flags);
   const scrollCleanup = () => {
     canvas.removeEventListener("wheel", onWheel);
     canvas.removeEventListener("dragstart", onDragStart);
     canvas.removeEventListener("selectstart", onSelectStart);
+    trackballCleanup();
   };
   return {
     scene,
@@ -2278,24 +2288,82 @@ function createScene(container, backgroundColor, style, rendererConfig) {
     flags
   };
 }
-const MOUSE_ACTION = {
-  rotate: THREE.MOUSE.ROTATE,
-  pan: THREE.MOUSE.PAN
-};
+const TRACKBALL_SPEED = 4e-3;
+function setupTrackballRotation(canvas, camera, controls, flags) {
+  let rotating = false;
+  let lastX = 0;
+  let lastY = 0;
+  const _offset2 = new THREE.Vector3();
+  const _right2 = new THREE.Vector3();
+  const _upAxis = new THREE.Vector3();
+  const _q2 = new THREE.Quaternion();
+  const _qPitch = new THREE.Quaternion();
+  function onDown(e) {
+    if (flags.rotateButton == null || e.button !== flags.rotateButton) return;
+    rotating = true;
+    lastX = e.clientX;
+    lastY = e.clientY;
+    try {
+      canvas.setPointerCapture(e.pointerId);
+    } catch {
+    }
+  }
+  function onMove(e) {
+    if (!rotating) return;
+    const dx = e.clientX - lastX;
+    const dy = e.clientY - lastY;
+    lastX = e.clientX;
+    lastY = e.clientY;
+    if (!dx && !dy) return;
+    const target = controls.target;
+    _offset2.copy(camera.position).sub(target);
+    _right2.setFromMatrixColumn(camera.matrix, 0);
+    _upAxis.setFromMatrixColumn(camera.matrix, 1);
+    _q2.setFromAxisAngle(_upAxis, -dx * TRACKBALL_SPEED);
+    _qPitch.setFromAxisAngle(_right2, -dy * TRACKBALL_SPEED);
+    _q2.multiply(_qPitch);
+    _offset2.applyQuaternion(_q2);
+    camera.up.applyQuaternion(_q2).normalize();
+    camera.position.copy(target).add(_offset2);
+    camera.lookAt(target);
+  }
+  function onUp(e) {
+    if (!rotating) return;
+    rotating = false;
+    try {
+      canvas.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+  }
+  canvas.addEventListener("pointerdown", onDown);
+  canvas.addEventListener("pointermove", onMove);
+  canvas.addEventListener("pointerup", onUp);
+  canvas.addEventListener("pointercancel", onUp);
+  return () => {
+    canvas.removeEventListener("pointerdown", onDown);
+    canvas.removeEventListener("pointermove", onMove);
+    canvas.removeEventListener("pointerup", onUp);
+    canvas.removeEventListener("pointercancel", onUp);
+  };
+}
 function applyNavigationMode(state, is2D, nav) {
   const { controls, camera, keyboard } = state;
   state.flags.is2D = is2D;
   const left = (nav == null ? void 0 : nav.leftButton) ?? (is2D ? "pan" : "rotate");
   const right = (nav == null ? void 0 : nav.rightButton) ?? (is2D ? "rotate" : "pan");
+  const NONE = -1;
   controls.mouseButtons = {
-    LEFT: MOUSE_ACTION[left],
+    LEFT: left === "pan" ? THREE.MOUSE.PAN : NONE,
     MIDDLE: THREE.MOUSE.DOLLY,
-    RIGHT: MOUSE_ACTION[right]
+    RIGHT: right === "pan" ? THREE.MOUSE.PAN : NONE
   };
-  controls.enableRotate = left === "rotate" || right === "rotate";
+  controls.enableRotate = false;
+  state.flags.rotateButton = left === "rotate" ? 0 : right === "rotate" ? 2 : null;
   controls.touches = left === "pan" ? { ONE: THREE.TOUCH.PAN, TWO: THREE.TOUCH.DOLLY_PAN } : { ONE: THREE.TOUCH.ROTATE, TWO: THREE.TOUCH.DOLLY_PAN };
   controls.enableZoom = is2D;
-  controls.screenSpacePanning = is2D;
+  controls.screenSpacePanning = true;
+  state.flags.panSpeedBase = (nav == null ? void 0 : nav.panSpeed) ?? 1;
+  controls.panSpeed = state.flags.panSpeedBase;
   const kb = (nav == null ? void 0 : nav.keyboard) ?? (is2D ? "pan" : state.flags.keyboardMode3D);
   if (kb === "off") {
     keyboard.setEnabled(false);
@@ -2631,6 +2699,7 @@ function animateCamera(camera, controls, targetPos, targetLookAt, duration) {
 function zoomToFitPositions(camera, controls, positions, duration, padding) {
   const count = positions.length / 3;
   if (count === 0) return;
+  camera.up.set(0, 1, 0);
   let cx = 0, cy = 0, cz = 0;
   for (let i = 0; i < count; i++) {
     cx += positions[i * 3];
@@ -2875,8 +2944,8 @@ function setupInteraction(canvas, camera, controls, getNodesMesh, getNodes, call
     }
   }
   function onContextMenu2(e) {
-    if (!callbacks.onContextMenu) return;
     e.preventDefault();
+    if (!callbacks.onContextMenu) return;
     const nodesMesh = getNodesMesh();
     if (!nodesMesh) return;
     const rect = canvas.getBoundingClientRect();
@@ -3140,7 +3209,29 @@ function NetworkGraph3DInner(props, ref) {
       rendererProp
     );
     sceneRef.current = state;
+    let panBoostAt = 0;
+    let graphRadius = 0;
     const cancelAnim = startAnimationLoop(state, () => {
+      const nowMs = performance.now();
+      if (nowMs - panBoostAt > 400) {
+        panBoostAt = nowMs;
+        const pos = dataRef.current.positions;
+        if (pos) {
+          let maxSq = 0;
+          for (let i = 0; i < pos.length; i += 3) {
+            const sq = pos[i] * pos[i] + pos[i + 1] * pos[i + 1] + pos[i + 2] * pos[i + 2];
+            if (sq > maxSq) maxSq = sq;
+          }
+          graphRadius = Math.sqrt(maxSq);
+        }
+        if (graphRadius > 0) {
+          const dist = state.camera.position.distanceTo(
+            state.controls.target
+          );
+          const boost = Math.min(3, Math.max(1, graphRadius / (3 * dist)));
+          state.controls.panSpeed = state.flags.panSpeedBase * boost;
+        }
+      }
       updateLabels(
         state.labels,
         dataRef.current.nodes,