@cocorof/graphier 1.4.1 → 1.4.3

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>>;
@@ -341,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

@@ -2213,6 +2213,14 @@ function createScene(container, backgroundColor, style, rendererConfig) {
   renderer.toneMappingExposure = 1.2;
   const canvas = renderer.domElement;
   canvas.style.setProperty("display", "block", "important");
+  canvas.draggable = false;
+  canvas.style.userSelect = "none";
+  canvas.style.setProperty("-webkit-user-drag", "none");
+  canvas.style.touchAction = "none";
+  const onDragStart = (e) => e.preventDefault();
+  canvas.addEventListener("dragstart", onDragStart);
+  const onSelectStart = (e) => e.preventDefault();
+  canvas.addEventListener("selectstart", onSelectStart);
   container.appendChild(canvas);
   const controls = new OrbitControls(camera, canvas);
   controls.enableDamping = true;
@@ -2250,7 +2258,11 @@ function createScene(container, backgroundColor, style, rendererConfig) {
     controls.target.addScaledVector(_wheelDir, moveAmount);
   };
   canvas.addEventListener("wheel", onWheel, { passive: false });
-  const scrollCleanup = () => canvas.removeEventListener("wheel", onWheel);
+  const scrollCleanup = () => {
+    canvas.removeEventListener("wheel", onWheel);
+    canvas.removeEventListener("dragstart", onDragStart);
+    canvas.removeEventListener("selectstart", onSelectStart);
+  };
   return {
     scene,
     camera,
@@ -2266,34 +2278,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 = true;
+  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(true);
-  keyboard.setMode(is2D ? "pan" : state.flags.keyboardMode3D);
+  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.ROTATE
-    };
-    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();
 }
@@ -3500,10 +3516,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;
@@ -3755,11 +3772,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
       };
@@ -3780,7 +3798,14 @@ function NetworkGraph3DInner(props, ref) {
     {
       ref: containerRef,
       tabIndex: -1,
-      style: { width: "100%", height: "100%", outline: "none" }
+      style: {
+        width: "100%",
+        height: "100%",
+        outline: "none",
+        userSelect: "none",
+        WebkitUserSelect: "none"
+      },
+      onDragStart: (e) => e.preventDefault()
     }
   );
 }