@aiready/components 0.14.2 → 0.14.4

package/dist/hooks/useForceSimulation.d.ts

@@ -1,2 +1,2 @@
-export { u as useDrag, b as useForceSimulation } from '../useForceSimulation-BNhxX4gH.js';
 import 'd3';
+export { c as UseForceSimulationReturnExt, u as useDrag, b as useForceSimulation } from '../useForceSimulation-CjLhYevG.js';

package/dist/hooks/useForceSimulation.js

@@ -1,6 +1,8 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 import * as d3 from 'd3';
 
+// src/hooks/useForceSimulation.ts
+
 // src/hooks/simulation-helpers.ts
 function stabilizeNodes(nodes) {
   nodes.forEach((n) => {
@@ -10,6 +12,16 @@ function stabilizeNodes(nodes) {
     if (typeof n.y === "number") n.y = Number(n.y.toFixed(3));
   });
 }
+function seedCircularPositions(nodes, width, height) {
+  const radius = Math.min(width, height) * 0.45;
+  nodes.forEach((n, i) => {
+    const angle = i * 2 * Math.PI / nodes.length;
+    n.x = width / 2 + radius * Math.cos(angle);
+    n.y = height / 2 + radius * Math.sin(angle);
+    n.vx = (Math.random() - 0.5) * 2;
+    n.vy = (Math.random() - 0.5) * 2;
+  });
+}
 function seedRandomPositions(nodes, width, height) {
   nodes.forEach((n) => {
     n.x = Math.random() * width;
@@ -18,27 +30,68 @@ function seedRandomPositions(nodes, width, height) {
     n.vy = (Math.random() - 0.5) * 10;
   });
 }
+function safelyStopSimulation(simulation, nodes, options = {}) {
+  try {
+    if (options.stabilize) {
+      stabilizeNodes(nodes);
+    }
+    simulation.stop();
+  } catch (error) {
+    console.warn("AIReady: Failed to stop simulation safely:", error);
+  }
+}
+
+// src/hooks/simulation-constants.ts
+var SIMULATION_DEFAULTS = {
+  CHARGE_STRENGTH: -300,
+  LINK_DISTANCE: 100,
+  LINK_STRENGTH: 1,
+  COLLISION_STRENGTH: 1,
+  COLLISION_RADIUS: 10,
+  CENTER_STRENGTH: 0.1,
+  ALPHA_DECAY: 0.0228,
+  VELOCITY_DECAY: 0.4,
+  ALPHA_TARGET: 0,
+  WARM_ALPHA: 0.3,
+  ALPHA_MIN: 0.01,
+  TICK_THROTTLE_MS: 33,
+  // ~30 fps
+  MAX_SIMULATION_TIME_MS: 3e3,
+  STABILIZE_ON_STOP: true
+};
+var FORCE_NAMES = {
+  LINK: "link",
+  CHARGE: "charge",
+  CENTER: "center",
+  COLLISION: "collision",
+  X: "x",
+  Y: "y"
+};
+var EVENT_NAMES = {
+  TICK: "tick",
+  END: "end"
+};
+
+// src/hooks/useForceSimulation.ts
 function useForceSimulation(initialNodes, initialLinks, options) {
   const {
-    chargeStrength = -300,
-    linkDistance = 100,
-    linkStrength = 1,
-    collisionStrength = 1,
-    collisionRadius = 10,
-    centerStrength = 0.1,
+    chargeStrength = SIMULATION_DEFAULTS.CHARGE_STRENGTH,
+    linkDistance = SIMULATION_DEFAULTS.LINK_DISTANCE,
+    linkStrength = SIMULATION_DEFAULTS.LINK_STRENGTH,
+    collisionStrength = SIMULATION_DEFAULTS.COLLISION_STRENGTH,
+    collisionRadius = SIMULATION_DEFAULTS.COLLISION_RADIUS,
+    centerStrength = SIMULATION_DEFAULTS.CENTER_STRENGTH,
     width,
     height,
-    alphaDecay = 0.0228,
-    velocityDecay = 0.4,
-    alphaTarget = 0,
-    warmAlpha = 0.3,
-    alphaMin = 0.01,
+    alphaDecay = SIMULATION_DEFAULTS.ALPHA_DECAY,
+    velocityDecay = SIMULATION_DEFAULTS.VELOCITY_DECAY,
+    alphaTarget = SIMULATION_DEFAULTS.ALPHA_TARGET,
+    warmAlpha = SIMULATION_DEFAULTS.WARM_ALPHA,
+    alphaMin = SIMULATION_DEFAULTS.ALPHA_MIN,
     onTick,
-    // Optional throttle in milliseconds for tick updates (reduce React re-renders)
-    // Lower values = smoother but more CPU; default ~30ms (~33fps)
-    stabilizeOnStop = true,
-    tickThrottleMs = 33,
-    maxSimulationTimeMs = 3e3
+    stabilizeOnStop = SIMULATION_DEFAULTS.STABILIZE_ON_STOP,
+    tickThrottleMs = SIMULATION_DEFAULTS.TICK_THROTTLE_MS,
+    maxSimulationTimeMs = SIMULATION_DEFAULTS.MAX_SIMULATION_TIME_MS
   } = options;
   const [nodes, setNodes] = useState(initialNodes);
   const [links, setLinks] = useState(initialLinks);
@@ -46,8 +99,13 @@ function useForceSimulation(initialNodes, initialLinks, options) {
   const [alpha, setAlpha] = useState(1);
   const simulationRef = useRef(null);
   const stopTimeoutRef = useRef(null);
+  const forcesEnabledRef = useRef(true);
+  const originalForcesRef = useRef({
+    charge: chargeStrength,
+    link: linkStrength
+  });
   const nodesKey = initialNodes.map((n) => n.id).join("|");
-  const linksKey = (initialLinks || []).map((l) => {
+  const linksKey = initialLinks.map((l) => {
     const sourceId = typeof l.source === "string" ? l.source : l.source?.id;
     const targetId = typeof l.target === "string" ? l.target : l.target?.id;
     const linkType = l.type || "";
@@ -57,179 +115,24 @@ function useForceSimulation(initialNodes, initialLinks, options) {
     const nodesCopy = initialNodes.map((node) => ({ ...node }));
     const linksCopy = initialLinks.map((link) => ({ ...link }));
     try {
-      nodesCopy.forEach((n, i) => {
-        const angle = i * 2 * Math.PI / nodesCopy.length;
-        const radius = Math.min(width, height) * 0.45;
-        n.x = width / 2 + radius * Math.cos(angle);
-        n.y = height / 2 + radius * Math.sin(angle);
-        n.vx = (Math.random() - 0.5) * 2;
-        n.vy = (Math.random() - 0.5) * 2;
-      });
-    } catch (e) {
-      console.warn("Failed to seed node positions, falling back to random:", e);
+      seedCircularPositions(nodesCopy, width, height);
+    } catch (error) {
+      console.warn(
+        "AIReady: Position seeding failed, using random fallback:",
+        error
+      );
       seedRandomPositions(nodesCopy, width, height);
     }
     const simulation = d3.forceSimulation(
       nodesCopy
     );
-    try {
-      const linkForce = d3.forceLink(
-        linksCopy
-      );
-      linkForce.id((d) => d.id).distance((d) => {
-        const link = d;
-        return link && link.distance != null ? link.distance : linkDistance;
-      }).strength(linkStrength);
-      simulation.force(
-        "link",
-        linkForce
-      );
-    } catch (e) {
-      console.warn("Failed to configure link force, using fallback:", e);
-      try {
-        simulation.force(
-          "link",
-          d3.forceLink(
-            linksCopy
-          )
-        );
-      } catch (fallbackError) {
-        console.warn("Fallback link force also failed:", fallbackError);
-      }
-    }
-    try {
-      simulation.force(
-        "charge",
-        d3.forceManyBody().strength(chargeStrength)
-      );
-      simulation.force(
-        "center",
-        d3.forceCenter(width / 2, height / 2).strength(centerStrength)
-      );
-      const collide = d3.forceCollide().radius((d) => {
-        const node = d;
-        const nodeSize = node && node.size ? node.size : 10;
-        return nodeSize + collisionRadius;
-      }).strength(collisionStrength);
-      simulation.force("collision", collide);
-      simulation.force(
-        "x",
-        d3.forceX(width / 2).strength(Math.max(0.02, centerStrength * 0.5))
-      );
-      simulation.force(
-        "y",
-        d3.forceY(height / 2).strength(Math.max(0.02, centerStrength * 0.5))
-      );
-      simulation.alphaDecay(alphaDecay);
-      simulation.velocityDecay(velocityDecay);
-      simulation.alphaMin(alphaMin);
-      try {
-        simulation.alphaTarget(alphaTarget);
-      } catch (e) {
-        console.warn("Failed to set alpha target:", e);
-      }
-      try {
-        simulation.alpha(warmAlpha);
-      } catch (e) {
-        console.warn("Failed to set initial alpha:", e);
-      }
-    } catch (e) {
-      console.warn("Failed to configure simulation forces:", e);
-    }
+    applySimulationForces(simulation, linksCopy);
+    configureSimulationParameters(simulation);
     simulationRef.current = simulation;
-    if (stopTimeoutRef.current != null) {
-      try {
-        globalThis.clearTimeout(stopTimeoutRef.current);
-      } catch (e) {
-        console.warn("Failed to clear simulation timeout:", e);
-      }
-      stopTimeoutRef.current = null;
-    }
-    if (maxSimulationTimeMs && maxSimulationTimeMs > 0) {
-      stopTimeoutRef.current = globalThis.setTimeout(() => {
-        try {
-          if (stabilizeOnStop) {
-            stabilizeNodes(nodesCopy);
-          }
-          simulation.alpha(0);
-          simulation.stop();
-        } catch (e) {
-          console.warn("Failed to stop simulation:", e);
-        }
-        setIsRunning(false);
-        setNodes([...nodesCopy]);
-        setLinks([...linksCopy]);
-      }, maxSimulationTimeMs);
-    }
-    let rafId = null;
-    let lastUpdate = 0;
-    const tickHandler = () => {
-      try {
-        if (typeof onTick === "function")
-          onTick(nodesCopy, linksCopy, simulation);
-      } catch (e) {
-        console.warn("Tick callback error:", e);
-      }
-      try {
-        if (simulation.alpha() <= alphaMin) {
-          try {
-            if (stabilizeOnStop) {
-              stabilizeNodes(nodesCopy);
-            }
-            simulation.stop();
-          } catch (e) {
-            console.warn("Failed to stop simulation:", e);
-          }
-          setAlpha(simulation.alpha());
-          setIsRunning(false);
-          setNodes([...nodesCopy]);
-          setLinks([...linksCopy]);
-          return;
-        }
-      } catch (e) {
-        console.warn("Error checking simulation alpha:", e);
-      }
-      const now = Date.now();
-      const shouldUpdate = now - lastUpdate >= tickThrottleMs;
-      if (rafId == null && shouldUpdate) {
-        rafId = (globalThis.requestAnimationFrame || ((cb) => setTimeout(cb, 16)))(() => {
-          rafId = null;
-          lastUpdate = Date.now();
-          setNodes([...nodesCopy]);
-          setLinks([...linksCopy]);
-          setAlpha(simulation.alpha());
-          setIsRunning(simulation.alpha() > simulation.alphaMin());
-        });
-      }
-    };
-    simulation.on("tick", tickHandler);
-    simulation.on("end", () => {
-      setIsRunning(false);
-    });
-    return () => {
-      try {
-        simulation.on("tick", null);
-      } catch (e) {
-        console.warn("Failed to clear simulation tick handler:", e);
-      }
-      if (stopTimeoutRef.current != null) {
-        try {
-          globalThis.clearTimeout(stopTimeoutRef.current);
-        } catch (e) {
-          console.warn("Failed to clear timeout on cleanup:", e);
-        }
-        stopTimeoutRef.current = null;
-      }
-      if (rafId != null) {
-        try {
-          (globalThis.cancelAnimationFrame || ((id) => clearTimeout(id)))(rafId);
-        } catch (e) {
-          console.warn("Failed to cancel animation frame:", e);
-        }
-        rafId = null;
-      }
-      simulation.stop();
-    };
+    const rafState = { rafId: null, lastUpdate: 0 };
+    setupTickHandler(simulation, nodesCopy, linksCopy, rafState);
+    setupStopTimer(simulation, nodesCopy, linksCopy);
+    return () => cleanupSimulation(simulation, rafState);
   }, [
     nodesKey,
     linksKey,
@@ -249,98 +152,173 @@ function useForceSimulation(initialNodes, initialLinks, options) {
     tickThrottleMs,
     maxSimulationTimeMs
   ]);
-  const restart = () => {
-    if (simulationRef.current) {
-      try {
-        simulationRef.current.alphaTarget(warmAlpha).restart();
-      } catch {
-        simulationRef.current.restart();
-      }
-      setIsRunning(true);
-      if (stopTimeoutRef.current != null) {
+  const applySimulationForces = (simulation, linksCopy) => {
+    try {
+      const linkForce = d3.forceLink(linksCopy).id((d) => d.id).distance((d) => d.distance ?? linkDistance).strength(linkStrength);
+      simulation.force(FORCE_NAMES.LINK, linkForce).force(FORCE_NAMES.CHARGE, d3.forceManyBody().strength(chargeStrength)).force(
+        FORCE_NAMES.CENTER,
+        d3.forceCenter(width / 2, height / 2).strength(centerStrength)
+      ).force(
+        FORCE_NAMES.COLLISION,
+        d3.forceCollide().radius((d) => (d.size ?? 10) + collisionRadius).strength(collisionStrength)
+      ).force(
+        FORCE_NAMES.X,
+        d3.forceX(width / 2).strength(Math.max(0.02, centerStrength * 0.5))
+      ).force(
+        FORCE_NAMES.Y,
+        d3.forceY(height / 2).strength(Math.max(0.02, centerStrength * 0.5))
+      );
+    } catch (error) {
+      console.warn("AIReady: Failed to configure simulation forces:", error);
+    }
+  };
+  const configureSimulationParameters = (simulation) => {
+    simulation.alphaDecay(alphaDecay).velocityDecay(velocityDecay).alphaMin(alphaMin).alphaTarget(alphaTarget).alpha(warmAlpha);
+  };
+  const setupStopTimer = (simulation, nodesCopy, linksCopy) => {
+    if (stopTimeoutRef.current) {
+      clearTimeout(stopTimeoutRef.current);
+    }
+    if (maxSimulationTimeMs > 0) {
+      stopTimeoutRef.current = setTimeout(() => {
+        safelyStopSimulation(simulation, nodesCopy, {
+          stabilize: stabilizeOnStop
+        });
+        updateStateAfterStop(nodesCopy, linksCopy, 0);
+      }, maxSimulationTimeMs);
+    }
+  };
+  const updateStateAfterStop = (nodesCopy, linksCopy, currentAlpha) => {
+    setIsRunning(false);
+    setAlpha(currentAlpha);
+    setNodes([...nodesCopy]);
+    setLinks([...linksCopy]);
+  };
+  const setupTickHandler = (simulation, nodesCopy, linksCopy, rafState) => {
+    const handleTick = () => {
+      if (onTick) {
         try {
-          globalThis.clearTimeout(stopTimeoutRef.current);
-        } catch (e) {
-          console.warn("Failed to clear simulation timeout:", e);
+          onTick(nodesCopy, linksCopy, simulation);
+        } catch (error) {
+          console.warn("AIReady: Simulation onTick callback failed:", error);
         }
-        stopTimeoutRef.current = null;
       }
-      if (maxSimulationTimeMs && maxSimulationTimeMs > 0) {
-        stopTimeoutRef.current = globalThis.setTimeout(() => {
-          try {
-            simulationRef.current?.alpha(0);
-            simulationRef.current?.stop();
-          } catch (e) {
-            console.warn("Failed to stop simulation:", e);
-          }
-          setIsRunning(false);
-        }, maxSimulationTimeMs);
+      const currentAlpha = simulation.alpha();
+      if (currentAlpha <= alphaMin) {
+        safelyStopSimulation(simulation, nodesCopy, {
+          stabilize: stabilizeOnStop
+        });
+        updateStateAfterStop(nodesCopy, linksCopy, currentAlpha);
+        return;
       }
-    }
+      syncStateOnTick(nodesCopy, linksCopy, currentAlpha, rafState);
+    };
+    simulation.on(EVENT_NAMES.TICK, handleTick);
+    simulation.on(EVENT_NAMES.END, () => setIsRunning(false));
   };
-  const stop = () => {
-    if (simulationRef.current) {
-      simulationRef.current.stop();
-      setIsRunning(false);
+  const syncStateOnTick = (nodesCopy, linksCopy, currentAlpha, rafState) => {
+    const now = Date.now();
+    if (rafState.rafId === null && now - rafState.lastUpdate >= tickThrottleMs) {
+      rafState.rafId = requestAnimationFrame(() => {
+        rafState.rafId = null;
+        rafState.lastUpdate = Date.now();
+        setNodes([...nodesCopy]);
+        setLinks([...linksCopy]);
+        setAlpha(currentAlpha);
+        setIsRunning(currentAlpha > alphaMin);
+      });
     }
   };
-  const originalForcesRef = useRef({
-    charge: chargeStrength,
-    link: linkStrength,
-    collision: collisionStrength
-  });
-  const forcesEnabledRef = useRef(true);
-  const setForcesEnabled = (enabled) => {
+  const cleanupSimulation = (simulation, rafState) => {
+    simulation.on(EVENT_NAMES.TICK, null);
+    if (stopTimeoutRef.current) clearTimeout(stopTimeoutRef.current);
+    if (rafState.rafId !== null) cancelAnimationFrame(rafState.rafId);
+    simulation.stop();
+  };
+  const restartSimulation = useCallback(() => {
     const sim = simulationRef.current;
     if (!sim) return;
-    if (forcesEnabledRef.current === enabled) return;
-    forcesEnabledRef.current = enabled;
     try {
-      const charge = sim.force(
-        "charge"
-      );
-      if (charge && typeof charge.strength === "function") {
-        charge.strength(enabled ? originalForcesRef.current.charge : 0);
-      }
-      const link = sim.force("link");
-      if (link && typeof link.strength === "function") {
-        link.strength(enabled ? originalForcesRef.current.link : 0);
+      sim.alphaTarget(warmAlpha).restart();
+      setIsRunning(true);
+      if (stopTimeoutRef.current) clearTimeout(stopTimeoutRef.current);
+      if (maxSimulationTimeMs > 0) {
+        stopTimeoutRef.current = setTimeout(() => {
+          sim.alpha(0);
+          sim.stop();
+          setIsRunning(false);
+        }, maxSimulationTimeMs);
       }
-    } catch (e) {
-      console.warn("Failed to toggle simulation forces:", e);
+    } catch (error) {
+      console.warn("AIReady: Failed to restart simulation:", error);
     }
-  };
+  }, [warmAlpha, maxSimulationTimeMs]);
+  const stopSimulation = useCallback(() => {
+    if (simulationRef.current) {
+      simulationRef.current.stop();
+      setIsRunning(false);
+    }
+  }, []);
+  const setForcesEnabled = useCallback(
+    (enabled) => {
+      const sim = simulationRef.current;
+      if (!sim || forcesEnabledRef.current === enabled) return;
+      forcesEnabledRef.current = enabled;
+      try {
+        const charge = sim.force(
+          FORCE_NAMES.CHARGE
+        );
+        if (charge) {
+          charge.strength(enabled ? originalForcesRef.current.charge : 0);
+        }
+        const link = sim.force(FORCE_NAMES.LINK);
+        if (link) {
+          link.strength(enabled ? originalForcesRef.current.link : 0);
+        }
+        sim.alpha(warmAlpha).restart();
+      } catch (error) {
+        console.warn("AIReady: Failed to toggle simulation forces:", error);
+      }
+    },
+    [warmAlpha]
+  );
   return {
     nodes,
     links,
-    restart,
-    stop,
+    restart: restartSimulation,
+    stop: stopSimulation,
     isRunning,
     alpha,
     setForcesEnabled
   };
 }
 function useDrag(simulation) {
-  const dragStarted = (event, node) => {
-    if (!simulation) return;
-    if (!event.active) simulation.alphaTarget(0.3).restart();
-    node.fx = node.x;
-    node.fy = node.y;
-  };
-  const dragged = (event, node) => {
+  const handleDragStart = useCallback(
+    (event, node) => {
+      if (!simulation) return;
+      if (!event.active) simulation.alphaTarget(0.3).restart();
+      node.fx = node.x;
+      node.fy = node.y;
+    },
+    [simulation]
+  );
+  const handleDragged = useCallback((event, node) => {
     node.fx = event.x;
     node.fy = event.y;
-  };
-  const dragEnded = (event, node) => {
-    if (!simulation) return;
-    if (!event.active) simulation.alphaTarget(0);
-    node.fx = null;
-    node.fy = null;
-  };
+  }, []);
+  const handleDragEnd = useCallback(
+    (event, node) => {
+      if (!simulation) return;
+      if (!event.active) simulation.alphaTarget(0);
+      node.fx = null;
+      node.fy = null;
+    },
+    [simulation]
+  );
   return {
-    onDragStart: dragStarted,
-    onDrag: dragged,
-    onDragEnd: dragEnded
+    onDragStart: handleDragStart,
+    onDrag: handleDragged,
+    onDragEnd: handleDragEnd
   };
 }