@cocorof/graphier 1.1.1 → 1.2.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("#", "");
@@ -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,
@@ -1957,6 +1968,7 @@ const _offset = new THREE.Vector3();
 const _right = new THREE.Vector3();
 const _q = new THREE.Quaternion();
 const _dir = new THREE.Vector3();
+const _worldUp = new THREE.Vector3(0, 1, 0);
 function clamp(v, min, max) {
   return v < min ? min : v > max ? max : v;
 }
@@ -2007,18 +2019,19 @@ function createOrbitUpdate(camera, controls, keys) {
     return true;
   };
 }
-function createFlyUpdate(camera, controls, keys) {
+function createFlyUpdate(camera, controls, keys, state) {
   const vel = { thrust: 0, yaw: 0, pitch: 0 };
   return function update() {
-    if (keys["z"] || keys["Z"]) vel.thrust += FLY_ACCEL;
-    if (keys["x"] || keys["X"]) vel.thrust -= FLY_ACCEL;
+    const speedMul = state.flySpeed;
+    if (keys["z"] || keys["Z"]) vel.thrust += FLY_ACCEL * speedMul;
+    if (keys["x"] || keys["X"]) vel.thrust -= FLY_ACCEL * speedMul;
     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.thrust = clamp(vel.thrust, -FLY_MAX_THRUST * distScale * speedMul, FLY_MAX_THRUST * distScale * speedMul);
     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;
@@ -2030,13 +2043,17 @@ function createFlyUpdate(camera, controls, keys) {
     const hasMotion = vel.thrust !== 0 || vel.yaw !== 0 || vel.pitch !== 0;
     if (!hasMotion) return false;
     if (vel.yaw !== 0) {
-      _q.setFromAxisAngle(camera.up, vel.yaw);
+      const upDot = camera.up.dot(_worldUp);
+      const yawSign = upDot < 0 ? -1 : 1;
+      _q.setFromAxisAngle(_worldUp, vel.yaw * yawSign);
       camera.quaternion.premultiply(_q);
+      camera.up.applyQuaternion(_q).normalize();
     }
     if (vel.pitch !== 0) {
       _right.setFromMatrixColumn(camera.matrixWorld, 0).normalize();
       _q.setFromAxisAngle(_right, vel.pitch);
       camera.quaternion.premultiply(_q);
+      camera.up.applyQuaternion(_q).normalize();
     }
     if (vel.thrust !== 0) {
       camera.getWorldDirection(_dir);
@@ -2047,8 +2064,9 @@ function createFlyUpdate(camera, controls, keys) {
     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 +2082,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 +2129,7 @@ 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);
   return {
     scene,
     camera,
@@ -3264,6 +3285,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 +3367,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(