@cocorof/graphier 1.4.0 → 1.4.2

package/dist/index.d.ts

@@ -174,6 +174,19 @@ export declare type LinkEventHandler = (link: GraphLink) => void;
 
 export declare const minimal: ThemeConfig;
 
+export declare interface NavigationConfig {
+    /** What left-drag does (default: "rotate" in 3D, "pan" in 2D) */
+    leftButton?: "rotate" | "pan";
+    /** What right-drag does (default: "pan" in 3D, "rotate" in 2D) */
+    rightButton?: "rotate" | "pan";
+    /**
+     * Keyboard scheme — "pan": arrows/WASD pan + z/x zoom; "fly": thrust
+     * flight; "orbit": orbit around target; "off": disabled.
+     * (default: cameraMode in 3D, "pan" in 2D)
+     */
+    keyboard?: "fly" | "orbit" | "pan" | "off";
+}
+
 export declare const neon: ThemeConfig;
 
 export declare const NetworkGraph3D: ForwardRefExoticComponent<NetworkGraph3DProps & RefAttributes<NetworkGraph3DRef>>;
@@ -230,6 +243,12 @@ export declare interface NetworkGraph3DProps {
      * simulation untouched. null/undefined shows all edges.
      */
     linkVisibility?: ((link: GraphLink) => boolean) | null;
+    /**
+     * Allow dragging individual nodes (default: true). Set false on dense
+     * graphs so left-drag always pans/orbits the camera instead of grabbing
+     * whichever node happens to be under the pointer.
+     */
+    enableNodeDrag?: boolean;
     /** Fly the camera to a node on single-click (default: true) */
     clickToFocus?: boolean;
     /** Highlight a node's neighborhood on hover when nothing is selected (default: false) */
@@ -335,6 +354,12 @@ export declare interface RendererConfig {
      * - "orbit": z/x zoom, arrow keys orbit around target
      */
     cameraMode?: "fly" | "orbit";
+    /**
+     * Pointer/keyboard navigation overrides. Defaults depend on layout
+     * dimensionality — 3D: left=rotate, right=pan, keyboard=cameraMode;
+     * 2D: left=pan, right=rotate, keyboard="pan".
+     */
+    navigation?: NavigationConfig;
 }
 
 export declare interface ResolvedTheme {

package/dist/index.js

@@ -2031,6 +2031,45 @@ const _right = new THREE.Vector3();
 const _q = new THREE.Quaternion();
 const _dir = new THREE.Vector3();
 const _worldUp = new THREE.Vector3(0, 1, 0);
+const PAN_SPEED = 0.02;
+const PAN_ZOOM_FACTOR = 0.02;
+function createPanUpdate(camera, controls, keys) {
+  const _panRight = new THREE.Vector3();
+  const _panUp = new THREE.Vector3();
+  const _panOffset = new THREE.Vector3();
+  return function update() {
+    let dx = 0;
+    let dy = 0;
+    if (keys["ArrowLeft"] || keys["a"] || keys["A"]) dx -= 1;
+    if (keys["ArrowRight"] || keys["d"] || keys["D"]) dx += 1;
+    if (keys["ArrowUp"] || keys["w"] || keys["W"]) dy += 1;
+    if (keys["ArrowDown"] || keys["s"] || keys["S"]) dy -= 1;
+    const zoomIn = keys["z"] || keys["Z"] || keys["+"] || keys["="];
+    const zoomOut = keys["x"] || keys["X"] || keys["-"] || keys["_"];
+    if (!dx && !dy && !zoomIn && !zoomOut) return false;
+    const target = controls.target;
+    const dist = camera.position.distanceTo(target);
+    if (dx || dy) {
+      const step = Math.max(dist, 50) * PAN_SPEED;
+      _panRight.setFromMatrixColumn(camera.matrix, 0);
+      _panUp.setFromMatrixColumn(camera.matrix, 1);
+      _panOffset.set(0, 0, 0).addScaledVector(_panRight, dx * step).addScaledVector(_panUp, dy * step);
+      camera.position.add(_panOffset);
+      target.add(_panOffset);
+    }
+    if (zoomIn || zoomOut) {
+      const factor = zoomIn ? -PAN_ZOOM_FACTOR : PAN_ZOOM_FACTOR;
+      _panOffset.copy(camera.position).sub(target);
+      const newLen = Math.max(
+        controls.minDistance,
+        Math.min(controls.maxDistance, _panOffset.length() * (1 + factor))
+      );
+      _panOffset.setLength(newLen);
+      camera.position.copy(target).add(_panOffset);
+    }
+    return true;
+  };
+}
 function createOrbitUpdate(camera, controls, keys) {
   return function update() {
     let zoom = 0;
@@ -2130,8 +2169,13 @@ function setupKeyboardControls(camera, controls, container, mode = "fly", flySpe
   container.addEventListener("keyup", onKeyUp);
   container.addEventListener("blur", onBlur);
   let enabled = true;
-  const innerUpdate = mode === "fly" ? createFlyUpdate(camera, controls, keys, state) : createOrbitUpdate(camera, controls, keys);
-  const updateFn = () => enabled ? innerUpdate() : false;
+  let currentMode = mode;
+  const updaters = {
+    fly: createFlyUpdate(camera, controls, keys, state),
+    orbit: createOrbitUpdate(camera, controls, keys),
+    pan: createPanUpdate(camera, controls, keys)
+  };
+  const updateFn = () => enabled ? updaters[currentMode]() : false;
   function cleanup() {
     container.removeEventListener("keydown", onKeyDown2);
     container.removeEventListener("keyup", onKeyUp);
@@ -2144,7 +2188,11 @@ function setupKeyboardControls(camera, controls, container, mode = "fly", flySpe
     enabled = on;
     if (!on) for (const k of Object.keys(keys)) keys[k] = false;
   }
-  return { update: updateFn, cleanup, setFlySpeed, setEnabled };
+  function setMode(m2) {
+    currentMode = m2;
+    for (const k of Object.keys(keys)) keys[k] = false;
+  }
+  return { update: updateFn, cleanup, setFlySpeed, setEnabled, setMode };
 }
 function createScene(container, backgroundColor, style, rendererConfig) {
   const scene = new THREE.Scene();
@@ -2184,7 +2232,10 @@ function createScene(container, backgroundColor, style, rendererConfig) {
   const cameraMode = (rendererConfig == null ? void 0 : rendererConfig.cameraMode) ?? "fly";
   const keyboard = setupKeyboardControls(camera, controls, container, cameraMode, style.flySpeed ?? 1);
   controls.enableZoom = false;
-  const flags = { is2D: false };
+  const flags = {
+    is2D: false,
+    keyboardMode3D: cameraMode
+  };
   const _wheelDir = new THREE.Vector3();
   const onWheel = (e) => {
     if (flags.is2D) return;
@@ -2215,33 +2266,38 @@ function createScene(container, backgroundColor, style, rendererConfig) {
     flags
   };
 }
-function applyCameraMode2D(state, is2D) {
+const MOUSE_ACTION = {
+  rotate: THREE.MOUSE.ROTATE,
+  pan: THREE.MOUSE.PAN
+};
+function applyNavigationMode(state, is2D, nav) {
   const { controls, camera, keyboard } = state;
   state.flags.is2D = is2D;
-  controls.enableRotate = !is2D;
+  const left = (nav == null ? void 0 : nav.leftButton) ?? (is2D ? "pan" : "rotate");
+  const right = (nav == null ? void 0 : nav.rightButton) ?? (is2D ? "rotate" : "pan");
+  controls.mouseButtons = {
+    LEFT: MOUSE_ACTION[left],
+    MIDDLE: THREE.MOUSE.DOLLY,
+    RIGHT: MOUSE_ACTION[right]
+  };
+  controls.enableRotate = left === "rotate" || right === "rotate";
+  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;
-  keyboard.setEnabled(!is2D);
+  const kb = (nav == null ? void 0 : nav.keyboard) ?? (is2D ? "pan" : state.flags.keyboardMode3D);
+  if (kb === "off") {
+    keyboard.setEnabled(false);
+  } else {
+    keyboard.setEnabled(true);
+    keyboard.setMode(kb);
+  }
   if (is2D) {
-    controls.mouseButtons = {
-      LEFT: THREE.MOUSE.PAN,
-      MIDDLE: THREE.MOUSE.DOLLY,
-      RIGHT: THREE.MOUSE.PAN
-    };
-    controls.touches = { ONE: THREE.TOUCH.PAN, TWO: THREE.TOUCH.DOLLY_PAN };
     const t = controls.target;
     const dist = Math.max(camera.position.distanceTo(t), 50);
     t.z = 0;
     camera.up.set(0, 1, 0);
     camera.position.set(t.x, t.y, dist);
     camera.lookAt(t);
-  } else {
-    controls.mouseButtons = {
-      LEFT: THREE.MOUSE.ROTATE,
-      MIDDLE: THREE.MOUSE.DOLLY,
-      RIGHT: THREE.MOUSE.PAN
-    };
-    controls.touches = { ONE: THREE.TOUCH.ROTATE, TWO: THREE.TOUCH.DOLLY_PAN };
   }
   controls.update();
 }
@@ -2604,11 +2660,12 @@ function setupInteraction(canvas, camera, controls, getNodesMesh, getNodes, call
   const dragPlane = new THREE.Plane();
   const dragIntersect = new THREE.Vector3();
   function onPointerDown2(e) {
+    var _a;
     mouseDownPos = { x: e.clientX, y: e.clientY };
     if (container && document.activeElement !== container) {
       container.focus({ preventScroll: true });
     }
-    if (callbacks.onNodeDrag) {
+    if (callbacks.onNodeDrag && (((_a = options == null ? void 0 : options.getNodeDragEnabled) == null ? void 0 : _a.call(options)) ?? true)) {
       const nodesMesh = getNodesMesh();
       if (nodesMesh) {
         const rect = canvas.getBoundingClientRect();
@@ -2920,6 +2977,7 @@ function NetworkGraph3DInner(props, ref) {
     nodeValueAccessor,
     visibleNodeIds,
     linkVisibility,
+    enableNodeDrag = true,
     clickToFocus = true,
     hoverHighlight = false,
     hoverHighlightHops = 1
@@ -2960,6 +3018,7 @@ function NetworkGraph3DInner(props, ref) {
   const labelFormatterRef = useRef(labelFormatter);
   const highlightSetRef = useRef(null);
   const clickToFocusRef = useRef(clickToFocus);
+  const enableNodeDragRef = useRef(enableNodeDrag);
   const hoverHighlightRef = useRef(hoverHighlight);
   const hoverHighlightHopsRef = useRef(hoverHighlightHops);
   const adjacencyMapRef = useRef(/* @__PURE__ */ new Map());
@@ -2981,6 +3040,7 @@ function NetworkGraph3DInner(props, ref) {
   selectedNodeIdRef.current = selectedNodeId;
   labelFormatterRef.current = labelFormatter;
   clickToFocusRef.current = clickToFocus;
+  enableNodeDragRef.current = enableNodeDrag;
   hoverHighlightRef.current = hoverHighlight;
   hoverHighlightHopsRef.current = hoverHighlightHops;
   const is2D = (layoutProp == null ? void 0 : layoutProp.dimensions) === 2;
@@ -3163,7 +3223,8 @@ function NetworkGraph3DInner(props, ref) {
       },
       {
         getClickToFocus: () => clickToFocusRef.current,
-        getIs2D: () => is2DRef.current
+        getIs2D: () => is2DRef.current,
+        getNodeDragEnabled: () => enableNodeDragRef.current
       }
     );
     return () => {
@@ -3443,10 +3504,11 @@ function NetworkGraph3DInner(props, ref) {
       );
     }
   }, [visibleSet, linkVisibility, mergedData]);
+  const navKey = JSON.stringify((rendererProp == null ? void 0 : rendererProp.navigation) ?? null);
   useEffect(() => {
     const s = sceneRef.current;
-    if (s) applyCameraMode2D(s, is2D);
-  }, [is2D]);
+    if (s) applyNavigationMode(s, is2D, rendererProp == null ? void 0 : rendererProp.navigation);
+  }, [is2D, navKey]);
   useEffect(() => {
     const gObj = graphObjRef.current;
     const sceneState = sceneRef.current;
@@ -3698,11 +3760,12 @@ function NetworkGraph3DInner(props, ref) {
       const s = sceneRef.current;
       if (!s) return null;
       const cam = s.camera;
-      const dist = Math.abs(cam.position.z);
+      const t = s.controls.target;
+      const dist = Math.max(cam.position.distanceTo(t), 1);
       const halfH = Math.tan(cam.fov * Math.PI / 360) * dist;
       return {
-        cx: cam.position.x,
-        cy: cam.position.y,
+        cx: t.x,
+        cy: t.y,
         halfW: halfH * cam.aspect,
         halfH
       };