@wandelbots/wandelbots-js-react-components 2.26.0-pr.feature-update-to-react-19.361.23b1e20 → 2.26.0-pr.feature-update-to-react-19.361.c3fd41e

package/dist/components/utils/interpolation.d.ts

@@ -1,48 +1,34 @@
 /**
- * Smooth value interpolation utility for animating between values
- * even with rapid updates. Uses THREE.MathUtils.lerp for optimized interpolation.
+ * Smooth value interpolation utility using spring physics with tension and friction.
+ * Designed for React Three Fiber applications with smooth, natural animations.
  *
- * Follows React Three Fiber best practices:
- * - Uses frame deltas for refresh-rate independence
- * - Avoids object creation in animation loops
- * - Direct mutation for performance
+ * Features:
+ * - Spring physics with configurable tension and friction
+ * - Frame-rate independent using delta timing
+ * - Handles irregular frame timing and rapid target updates
  * - Manual update() calls for useFrame integration (no automatic RAF loop)
- *
- * Note: When using with useFrame(), call update(delta) manually.
- * For standalone usage, call startAutoInterpolation() to begin automatic updates.
+ * - Direct mutation for performance
  *
  * @example
  * ```tsx
- * // Basic usage with spring-like animation (similar to react-spring)
+ * // Basic spring animation
  * const interpolator = new ValueInterpolator([0, 0, 0], {
- *   alpha: 0.1, // Interpolation alpha (0-1, frame-rate independent)
- *   easing: 'spring', // Spring-like animation with slight overshoot
+ *   tension: 120, // Higher = faster, stiffer spring (default: 120)
+ *   friction: 20, // Higher = more damping, less oscillation (default: 20)
  *   onChange: (values) => {
- *     // Update your objects with interpolated values
  *     robot.joints.forEach((joint, i) => {
  *       joint.rotation.y = values[i]
  *     })
  *   }
  * })
  *
- * // Different easing options:
- * // 'linear' - smooth linear interpolation
- * // 'spring' - spring-like with overshoot (similar to react-spring)
- * // 'easeOut' - smooth deceleration
- * // 'easeInOut' - smooth acceleration and deceleration
- *
- * // Set new target values
  * interpolator.setTarget([1.5, -0.8, 2.1])
  *
- * // React hook usage with useFrame
+ * // React Three Fiber usage
  * function MyComponent() {
- *   const [interpolator] = useInterpolation([0, 0, 0], {
- *     alpha: 0.1,
- *     easing: 'spring'
- *   })
+ *   const [interpolator] = useInterpolation([0, 0, 0])
  *
  *   useFrame((state, delta) => {
- *     // Frame-rate independent updates
  *     interpolator.update(delta)
  *   })
  *
@@ -54,14 +40,13 @@
  * }
  * ```
  */
-export type EasingFunction = "linear" | "spring" | "easeOut" | "easeInOut";
 export interface InterpolationOptions {
-    /** Interpolation alpha factor (0-1, frame-rate independent) */
-    alpha?: number;
-    /** Minimum threshold to consider interpolation complete */
+    /** Spring tension (higher = faster, stiffer spring) - default: 120 */
+    tension?: number;
+    /** Spring friction (higher = more damping, less oscillation) - default: 20 */
+    friction?: number;
+    /** Minimum threshold to consider interpolation complete - default: 0.001 */
     threshold?: number;
-    /** Easing function to use for interpolation */
-    easing?: EasingFunction;
     /** Callback when values change during interpolation */
     onChange?: (values: number[]) => void;
     /** Callback when interpolation reaches target values */
@@ -70,16 +55,20 @@ export interface InterpolationOptions {
 export declare class ValueInterpolator {
     private currentValues;
     private targetValues;
+    private previousTargetValues;
+    private targetUpdateTime;
     private animationId;
     private options;
+    private velocities;
     constructor(initialValues?: number[], options?: InterpolationOptions);
     /**
-     * Update interpolation (call this in useFrame for frame-rate independence)
+     * Update interpolation using spring physics (call this in useFrame for frame-rate independence)
      * @param delta - Frame delta time for smooth animation
      */
     update(delta?: number): boolean;
     /**
      * Set new target values to interpolate towards
+     * Handles irregular target updates smoothly by considering update frequency
      */
     setTarget(newValues: number[]): void;
     /**
@@ -114,24 +103,22 @@ export declare class ValueInterpolator {
      * Destroy the interpolator and clean up resources
      */
     destroy(): void;
-    /**
-     * Apply easing function to the interpolation with frame-rate independence
-     */
-    private applyEasing;
     private startInterpolation;
     private animate;
 }
 /**
  * React hook for using the ValueInterpolator with useFrame
  *
- * This hook creates a ValueInterpolator that's designed for manual updates
- * via useFrame(). It will not start automatic interpolation - you must
- * call interpolator.update(delta) in your useFrame callback.
+ * This hook creates a ValueInterpolator that uses spring physics for smooth,
+ * natural animations. Call interpolator.update(delta) in your useFrame callback.
  *
  * @example
  * ```tsx
  * function AnimatedMesh() {
- *   const [interpolator] = useInterpolation([0, 0, 0], { alpha: 0.1 })
+ *   const [interpolator] = useInterpolation([0, 0, 0], {
+ *     tension: 120, // Higher = faster spring
+ *     friction: 20  // Higher = more damping
+ *   })
  *   const meshRef = useRef()
  *
  *   useFrame((state, delta) => {

package/dist/components/utils/interpolation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interpolation.d.ts","sourceRoot":"","sources":["../../../src/components/utils/interpolation.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AAEH,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAA;AAE1E,MAAM,WAAW,oBAAoB;IACnC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACrC,wDAAwD;IACxD,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACxC;AAED,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,aAAa,CAAe;IACpC,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,WAAW,CAAsB;IACzC,OAAO,CAAC,OAAO,CAAgC;gBAG7C,aAAa,GAAE,MAAM,EAAO,EAC5B,OAAO,GAAE,oBAAyB;IAepC;;;OAGG;IACH,MAAM,CAAC,KAAK,GAAE,MAAe,GAAG,OAAO;IAsCvC;;OAEG;IACH,SAAS,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI;IAepC;;OAEG;IACH,gBAAgB,IAAI,MAAM,EAAE;IAI5B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAI/B;;OAEG;IACH,eAAe,IAAI,OAAO;IAI1B;;OAEG;IACH,IAAI,IAAI,IAAI;IAOZ;;OAEG;IACH,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI;IAOpC;;OAEG;IACH,aAAa,CAAC,UAAU,EAAE,OAAO,CAAC,oBAAoB,CAAC,GAAG,IAAI;IAI9D;;OAEG;IACH,sBAAsB,IAAI,IAAI;IAI9B;;OAEG;IACH,OAAO,IAAI,IAAI;IAIf;;OAEG;IACH,OAAO,CAAC,WAAW;IAqCnB,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,OAAO,CA+Bd;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,gBAAgB,CAC9B,aAAa,GAAE,MAAM,EAAO,EAC5B,OAAO,GAAE,oBAAyB,GACjC,CAAC,iBAAiB,CAAC,CAqBrB"}
+{"version":3,"file":"interpolation.d.ts","sourceRoot":"","sources":["../../../src/components/utils/interpolation.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAEH,MAAM,WAAW,oBAAoB;IACnC,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACrC,wDAAwD;IACxD,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACxC;AAED,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,aAAa,CAAe;IACpC,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,oBAAoB,CAAe;IAC3C,OAAO,CAAC,gBAAgB,CAAY;IACpC,OAAO,CAAC,WAAW,CAAsB;IACzC,OAAO,CAAC,OAAO,CAAgC;IAG/C,OAAO,CAAC,UAAU,CAAe;gBAG/B,aAAa,GAAE,MAAM,EAAO,EAC5B,OAAO,GAAE,oBAAyB;IAkBpC;;;OAGG;IACH,MAAM,CAAC,KAAK,GAAE,MAAe,GAAG,OAAO;IAuDvC;;;OAGG;IACH,SAAS,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI;IA6CpC;;OAEG;IACH,gBAAgB,IAAI,MAAM,EAAE;IAI5B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAI/B;;OAEG;IACH,eAAe,IAAI,OAAO;IAI1B;;OAEG;IACH,IAAI,IAAI,IAAI;IAOZ;;OAEG;IACH,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI;IAUpC;;OAEG;IACH,aAAa,CAAC,UAAU,EAAE,OAAO,CAAC,oBAAoB,CAAC,GAAG,IAAI;IAI9D;;OAEG;IACH,sBAAsB,IAAI,IAAI;IAI9B;;OAEG;IACH,OAAO,IAAI,IAAI;IAIf,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,OAAO,CASd;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,gBAAgB,CAC9B,aAAa,GAAE,MAAM,EAAO,EAC5B,OAAO,GAAE,oBAAyB,GACjC,CAAC,iBAAiB,CAAC,CAqBrB"}