@cocorof/graphier 1.1.1 → 1.3.0

package/dist/index.d.ts

@@ -102,6 +102,13 @@ export declare interface LayoutConfig {
     velocityDecay?: number;
     /** Convergence threshold — simulation stops when alpha drops below this (default: 0.005) */
     settledThreshold?: number;
+    /**
+     * Spread multiplier — scales charge strength and link distance to control
+     * how far apart nodes spread. 1.0 = default, 2.0 = twice as spread out.
+     * Automatically scaled by node count when set to "auto".
+     * (default: "auto")
+     */
+    spreadFactor?: "auto" | number;
 }
 
 /** Layout settled callback */
@@ -192,6 +199,8 @@ export declare interface NetworkGraph3DRef {
     getCamera(): THREE.PerspectiveCamera | null;
     /** Capture a screenshot as a PNG data URL string (synchronous, matches original) */
     captureScreenshot(): string | null;
+    /** Re-run force layout from current positions (useful after changing spreadFactor) */
+    reheatLayout(): void;
 }
 
 export declare function NodeDetailPanel(props: NodeDetailPanelProps): JSX_2.Element;
@@ -286,6 +295,11 @@ export declare interface StyleConfig {
     maxLabels?: number;
     /** Edge line width multiplier (default: 1.0). Note: WebGL limits linewidth to 1 on most platforms. */
     edgeWidthScale?: number;
+    /**
+     * Fly camera thrust speed multiplier (default: 1.0).
+     * 0.5 = half speed, 2.0 = double speed.
+     */
+    flySpeed?: number;
 }
 
 export declare interface SubgraphOptions {

package/dist/index.js

@@ -16,7 +16,8 @@ const DEFAULT_STYLE = {
   labelThreshold: 0.8,
   showLabels: true,
   maxLabels: 150,
-  edgeWidthScale: 1
+  edgeWidthScale: 1,
+  flySpeed: 1
 };
 const DEFAULT_LAYOUT = {
   type: "force-3d",
@@ -24,7 +25,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("#", "");
@@ -32,8 +34,8 @@ function hexToRgb(hex) {
   return [(n >> 16) / 255, (n >> 8 & 255) / 255, (n & 255) / 255];
 }
 function rgbToHex(r, g, b) {
-  const clamp2 = (v) => Math.round(Math.max(0, Math.min(1, v)) * 255);
-  const hex = clamp2(r) << 16 | clamp2(g) << 8 | clamp2(b);
+  const clamp = (v) => Math.round(Math.max(0, Math.min(1, v)) * 255);
+  const hex = clamp(r) << 16 | clamp(g) << 8 | clamp(b);
   return "#" + hex.toString(16).padStart(6, "0");
 }
 function brighten(hex, factor) {
@@ -170,17 +172,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,
@@ -1943,60 +1954,45 @@ function disposeLabelSystem(state) {
   }
   state.textureCache.clear();
 }
-const ORBIT_ACCEL = 12e-4;
-const ORBIT_MAX_SPEED = 0.06;
-const ORBIT_DAMPING = 0.88;
+const ORBIT_ROTATE_SPEED = 0.02;
 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_THRUST_SPEED = 0.08;
 const FLY_TURN_RATE = 8e-3;
-const FLY_DEAD_ZONE = 2e-4;
 const _offset = new THREE.Vector3();
 const _right = new THREE.Vector3();
 const _q = new THREE.Quaternion();
 const _dir = new THREE.Vector3();
-function clamp(v, min, max) {
-  return v < min ? min : v > max ? max : v;
-}
+const _worldUp = new THREE.Vector3(0, 1, 0);
 function createOrbitUpdate(camera, controls, keys) {
-  const vel = { zoom: 0, azimuth: 0, 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;
+    let zoom = 0;
+    let azimuth = 0;
+    let polar = 0;
+    if (keys["z"] || keys["Z"]) zoom -= ORBIT_ROTATE_SPEED;
+    if (keys["x"] || keys["X"]) zoom += ORBIT_ROTATE_SPEED;
+    if (keys["ArrowLeft"]) azimuth -= ORBIT_ROTATE_SPEED;
+    if (keys["ArrowRight"]) azimuth += ORBIT_ROTATE_SPEED;
+    if (keys["ArrowUp"]) polar -= ORBIT_ROTATE_SPEED;
+    if (keys["ArrowDown"]) polar += ORBIT_ROTATE_SPEED;
+    const hasMotion = zoom !== 0 || azimuth !== 0 || 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 * ORBIT_ZOOM_FACTOR * radius * 0.01;
+    if (zoom !== 0) {
+      radius *= 1 + zoom * ORBIT_ZOOM_FACTOR * radius * 0.01;
       radius = Math.max(controls.minDistance, Math.min(controls.maxDistance, radius));
     }
-    if (vel.azimuth !== 0) {
-      _q.setFromAxisAngle(camera.up, -vel.azimuth);
+    if (azimuth !== 0) {
+      _q.setFromAxisAngle(camera.up, -azimuth);
       _offset.applyQuaternion(_q);
     }
-    if (vel.polar !== 0) {
+    if (polar !== 0) {
       _right.copy(_offset).normalize().cross(camera.up).normalize();
       if (_right.lengthSq() < 1e-3) {
         _right.setFromMatrixColumn(camera.matrixWorld, 0);
       }
-      _q.setFromAxisAngle(_right, vel.polar);
+      _q.setFromAxisAngle(_right, polar);
       _offset.applyQuaternion(_q);
       camera.up.applyQuaternion(_q).normalize();
     }
@@ -2007,48 +2003,47 @@ function createOrbitUpdate(camera, controls, keys) {
     return true;
   };
 }
-function createFlyUpdate(camera, controls, keys) {
-  const vel = { thrust: 0, yaw: 0, pitch: 0 };
+function createFlyUpdate(camera, controls, keys, state) {
   return function update() {
-    if (keys["z"] || keys["Z"]) vel.thrust += FLY_ACCEL;
-    if (keys["x"] || keys["X"]) vel.thrust -= FLY_ACCEL;
-    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, FLY_MAX_THRUST * distScale);
-    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;
+    const speedMul = state.flySpeed;
+    let thrust = 0;
+    let yaw = 0;
+    let pitch = 0;
+    if (keys["z"] || keys["Z"]) thrust += FLY_THRUST_SPEED * speedMul;
+    if (keys["x"] || keys["X"]) thrust -= FLY_THRUST_SPEED * speedMul;
+    if (keys["a"] || keys["A"] || keys["ArrowLeft"]) yaw += FLY_TURN_RATE;
+    if (keys["d"] || keys["D"] || keys["ArrowRight"]) yaw -= FLY_TURN_RATE;
+    if (keys["w"] || keys["W"] || keys["ArrowUp"]) pitch += FLY_TURN_RATE;
+    if (keys["s"] || keys["S"] || keys["ArrowDown"]) pitch -= FLY_TURN_RATE;
+    const hasMotion = thrust !== 0 || yaw !== 0 || pitch !== 0;
     if (!hasMotion) return false;
-    if (vel.yaw !== 0) {
-      _q.setFromAxisAngle(camera.up, vel.yaw);
+    if (yaw !== 0) {
+      const upDot = camera.up.dot(_worldUp);
+      const yawSign = upDot < 0 ? -1 : 1;
+      _q.setFromAxisAngle(_worldUp, yaw * yawSign);
       camera.quaternion.premultiply(_q);
+      camera.up.applyQuaternion(_q).normalize();
     }
-    if (vel.pitch !== 0) {
+    if (pitch !== 0) {
       _right.setFromMatrixColumn(camera.matrixWorld, 0).normalize();
-      _q.setFromAxisAngle(_right, vel.pitch);
+      _q.setFromAxisAngle(_right, pitch);
       camera.quaternion.premultiply(_q);
+      camera.up.applyQuaternion(_q).normalize();
     }
-    if (vel.thrust !== 0) {
+    if (thrust !== 0) {
+      const lookDist = camera.position.distanceTo(controls.target);
+      const distScale = Math.max(0.3, lookDist * 3e-3);
       camera.getWorldDirection(_dir);
-      _dir.multiplyScalar(vel.thrust * distScale * 100);
+      _dir.multiplyScalar(thrust * distScale * 100);
       camera.position.add(_dir);
       controls.target.add(_dir);
     }
     return true;
   };
 }
-function setupKeyboardControls(camera, controls, container, mode = "fly") {
+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;
@@ -2064,13 +2059,16 @@ function setupKeyboardControls(camera, controls, container, mode = "fly") {
   container.addEventListener("keydown", onKeyDown2);
   container.addEventListener("keyup", onKeyUp);
   container.addEventListener("blur", onBlur);
-  const updateFn = mode === "fly" ? createFlyUpdate(camera, controls, keys) : createOrbitUpdate(camera, controls, keys);
+  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: updateFn, cleanup };
+  function setFlySpeed(speed) {
+    state.flySpeed = speed;
+  }
+  return { update: updateFn, cleanup, setFlySpeed };
 }
 function createScene(container, backgroundColor, style, rendererConfig) {
   const scene = new THREE.Scene();
@@ -2108,7 +2106,22 @@ function createScene(container, backgroundColor, style, rendererConfig) {
   const labels = createLabelSystem(style.maxLabels);
   scene.add(labels.group);
   const cameraMode = (rendererConfig == null ? void 0 : rendererConfig.cameraMode) ?? "fly";
-  const keyboard = setupKeyboardControls(camera, controls, container, cameraMode);
+  const keyboard = setupKeyboardControls(camera, controls, container, cameraMode, style.flySpeed ?? 1);
+  controls.enableZoom = false;
+  const _wheelDir = new THREE.Vector3();
+  const onWheel = (e) => {
+    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 moveAmount = delta * 2e-3 * Math.max(dist * 0.1, 1);
+    camera.position.addScaledVector(_wheelDir, moveAmount);
+    controls.target.addScaledVector(_wheelDir, moveAmount);
+  };
+  canvas.addEventListener("wheel", onWheel, { passive: false });
+  const scrollCleanup = () => canvas.removeEventListener("wheel", onWheel);
   return {
     scene,
     camera,
@@ -2119,7 +2132,8 @@ function createScene(container, backgroundColor, style, rendererConfig) {
     labels,
     composer: null,
     bloomPass: null,
-    keyboard
+    keyboard,
+    scrollCleanup
   };
 }
 function initBloom(state, nodeCount, style) {
@@ -2146,9 +2160,21 @@ function initBloom(state, nodeCount, style) {
 }
 function startAnimationLoop(state, onTick) {
   let animFrame;
+  let wasKeyboardActive = false;
+  const _syncDir = new THREE.Vector3();
   function animate() {
     animFrame = requestAnimationFrame(animate);
     const keyboardActive = state.keyboard.update();
+    if (wasKeyboardActive && !keyboardActive) {
+      const dist = state.camera.position.distanceTo(
+        state.controls.target
+      );
+      state.camera.getWorldDirection(_syncDir);
+      state.controls.target.copy(state.camera.position).add(_syncDir.multiplyScalar(dist));
+      state.camera.up.set(0, 1, 0);
+      state.camera.lookAt(state.controls.target);
+    }
+    wasKeyboardActive = keyboardActive;
     if (!keyboardActive) state.controls.update();
     if (state.selectionRing.visible) {
       state.selectionRing.quaternion.copy(state.camera.quaternion);
@@ -2949,6 +2975,7 @@ function NetworkGraph3DInner(props, ref) {
       resizeObserver.disconnect();
       interaction.cleanup();
       state.keyboard.cleanup();
+      state.scrollCleanup();
       state.controls.dispose();
       disposeObject(state.stars);
       disposeObject(state.selectionRing);
@@ -3264,6 +3291,11 @@ function NetworkGraph3DInner(props, ref) {
     }, 30);
     return () => clearInterval(id);
   }, [resolvedStyle.autoOrbit]);
+  useEffect(() => {
+    const s = sceneRef.current;
+    if (!s) return;
+    s.keyboard.setFlySpeed(resolvedStyle.flySpeed);
+  }, [resolvedStyle.flySpeed]);
   useImperativeHandle(ref, () => ({
     cameraPosition(pos, lookAt, duration = 1e3) {
       const s = sceneRef.current;
@@ -3341,6 +3373,16 @@ function NetworkGraph3DInner(props, ref) {
       if (!s) return null;
       s.renderer.render(s.scene, s.camera);
       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__ */ jsx(