@shohojdhara/atomix 0.6.0 → 0.6.2

package/dist/core.d.ts

@@ -473,6 +473,15 @@ interface AtomixGlassProps extends React.HTMLAttributes<HTMLDivElement> {
      * @default false
      */
     disableResponsiveBreakpoints?: boolean;
+    /**
+     * Priority level for rendering and performance scheduling
+     *
+     * Controls the rendering priority of the glass effect, allowing for performance
+     * optimization in complex scenes. Higher priority elements are rendered first.
+     *
+     * @default undefined
+     */
+    priority?: number;
 }
 /**
  * Common component size options

package/dist/core.js

@@ -583,6 +583,10 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
         MIN_BLUR: .1,
         MOUSE_INFLUENCE_DIVISOR: 100,
         EDGE_FADE_PIXELS: 2,
+        // Elasticity physics constants
+        ELASTICITY_TRANSLATION_FACTOR: .1,
+        ELASTICITY_DISTANCE_THRESHOLD: 200,
+        ELASTICITY_COMPRESSION_FACTOR: .3,
         // Note: This default must match the SCSS variable --atomix-radius-md
         // @see src/styles/01-settings/_settings.global.scss
         DEFAULT_CORNER_RADIUS: 16,
@@ -1281,9 +1285,21 @@ class {
                     y: this.lastEvent.clientY
                 }, 
                 // Notify all subscribers
-                this.listeners.forEach((callback => {
+                this.listeners.forEach((listener => {
                     try {
-                        callback(this.position);
+                        // If the listener has an element, calculate distance-based attenuation
+                        if (listener.element) {
+                            const elementRect = listener.element.getBoundingClientRect(), elementCenter = {
+                                x: elementRect.left + elementRect.width / 2,
+                                y: elementRect.top + elementRect.height / 2
+                            }, distance = this.calculateDistance(this.position, elementCenter), maxDistance = listener.maxDistance || 300, attenuation = Math.max(0, 1 - distance / maxDistance), attenuatedRelativePosition = {
+                                x: (this.position.x - elementCenter.x) / elementRect.width * 100 * attenuation,
+                                y: (this.position.y - elementCenter.y) / elementRect.height * 100 * attenuation
+                            };
+                            listener.callback(attenuatedRelativePosition);
+                        } else 
+                        // Send original position for listeners without distance-based attenuation
+                        listener.callback(this.position);
                     } catch (error) {
                         console.error("GlobalMouseTracker: Error in subscriber callback", error);
                     }
@@ -1294,10 +1310,17 @@ class {
     /**
    * Subscribe to mouse position updates
    * @param callback Function to call when mouse position changes
+   * @param element Optional element for distance-based attenuation
+   * @param maxDistance Optional maximum distance for full effect
    * @returns Unsubscribe function
-   */    subscribe(callback) {
+   */    subscribe(callback, element, maxDistance) {
+        const listener = {
+            callback: callback,
+            element: element,
+            maxDistance: maxDistance
+        };
         // Return unsubscribe function
-        return this.listeners.add(callback), 
+        return this.listeners.add(listener), 
         // Start tracking if this is the first subscriber
         1 === this.listeners.size && this.startTracking(), 
         // Immediately notify with current position
@@ -1308,9 +1331,13 @@ class {
     /**
    * Unsubscribe from mouse position updates
    */    unsubscribe(callback) {
-        this.listeners.delete(callback), 
+        // Find and remove the listener with the given callback
+        for (const listener of this.listeners) if (listener.callback === callback) {
+            this.listeners.delete(listener);
+            break;
+        }
         // Stop tracking if no more subscribers
-        0 === this.listeners.size && this.stopTracking();
+                0 === this.listeners.size && this.stopTracking();
     }
     /**
    * Start tracking mouse movement
@@ -1329,6 +1356,12 @@ class {
         null !== this.rafId && (cancelAnimationFrame(this.rafId), this.rafId = null), this.lastEvent = null);
     }
     /**
+   * Calculate distance between two points
+   */    calculateDistance(point1, point2) {
+        const dx = point1.x - point2.x, dy = point1.y - point2.y;
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+    /**
    * Get current mouse position (synchronous)
    */    getPosition() {
         return {
@@ -1613,7 +1646,8 @@ const {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new Weak
  * Composable hook for AtomixGlass component logic
  * Manages all state, calculations, and event handlers
  */
-function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef: wrapperRef, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, elasticity: elasticity = .05, onClick: onClick, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, children: children, blurAmount: blurAmount, saturation: saturation, padding: padding, withLiquidBlur: withLiquidBlur, isFixedOrSticky: isFixedOrSticky = !1, withTimeAnimation: 
+function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef: wrapperRef, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, onClick: onClick, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, children: children, blurAmount: blurAmount, saturation: saturation, padding: padding, withLiquidBlur: withLiquidBlur, isFixedOrSticky: isFixedOrSticky = !1, priority: priority = 1, withTimeAnimation: 
+// Default priority
 // Phase 1: Animation System Props
 withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: animationSpeed = ATOMIX_GLASS.DEFAULTS.ANIMATION_SPEED, withMultiLayerDistortion: withMultiLayerDistortion = ATOMIX_GLASS.DEFAULTS.WITH_MULTI_LAYER_DISTORTION, distortionOctaves: distortionOctaves = ATOMIX_GLASS.DEFAULTS.DISTORTION_OCTAVES, distortionLacunarity: distortionLacunarity = ATOMIX_GLASS.DEFAULTS.DISTORTION_LACUNARITY, distortionGain: distortionGain = ATOMIX_GLASS.DEFAULTS.DISTORTION_GAIN, distortionQuality: distortionQuality = ATOMIX_GLASS.DEFAULTS.DISTORTION_QUALITY}) {
     // State
@@ -2010,7 +2044,8 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
     useEffect((() => {
         if (externalGlobalMousePosition && externalMouseOffset) return;
         if (effectiveWithoutEffects) return;
-        const unsubscribe = globalMouseTracker.subscribe(handleGlobalMousePosition);
+        const unsubscribe = globalMouseTracker.subscribe(handleGlobalMousePosition, glassRef.current || void 0, 300);
+ // 300px max distance for full effect
         // Initial start
                 startLerpLoop();
         const container = mouseContainer?.current || glassRef.current;