@cocorof/graphier 1.4.4 → 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);
@@ -2244,7 +2244,8 @@ function createScene(container, backgroundColor, style, rendererConfig) {
   const flags = {
     is2D: false,
     keyboardMode3D: cameraMode,
-    rotateButton: null
+    rotateButton: null,
+    panSpeedBase: 1
   };
   const _wheelOffset = new THREE.Vector3();
   const onWheel = (e) => {
@@ -2361,6 +2362,8 @@ function applyNavigationMode(state, is2D, nav) {
   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 = 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);
@@ -3206,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,