kinetic-slider/dist/esm/hooks/useResizeHandler.js

A WebGL-powered kinetic slider component using PIXI.js

import { useRef, useCallback, useEffect } from 'react';

const isDevelopment = false;
const DEFAULT_DEBOUNCE_TIME = 100;
const useResizeHandler = ({
  sliderRef,
  appRef,
  slidesRef,
  textContainersRef,
  backgroundDisplacementSpriteRef,
  cursorDisplacementSpriteRef,
  resourceManager,
  debounceTime = DEFAULT_DEBOUNCE_TIME
}) => {
  const cancellationRef = useRef({ isCancelled: false });
  const resizeTimerRef = useRef(null);
  const calculateSpriteScale = useCallback((sprite, containerWidth, containerHeight) => {
    try {
      if (!sprite.texture || !sprite.texture.width || !sprite.texture.height) {
        if (isDevelopment) ;
        return false;
      }
      const imageWidth = sprite.texture.width;
      const imageHeight = sprite.texture.height;
      if (!containerWidth || !containerHeight) {
        if (isDevelopment) ;
        return false;
      }
      const imageAspect = imageWidth / imageHeight;
      const containerAspect = containerWidth / containerHeight;
      const scale = imageAspect > containerAspect ? containerHeight / imageHeight : containerWidth / imageWidth;
      sprite.scale.set(scale);
      sprite.baseScale = scale;
      sprite.x = containerWidth / 2;
      sprite.y = containerHeight / 2;
      if (resourceManager) {
        resourceManager.trackDisplayObject(sprite);
      }
      return true;
    } catch (error) {
      return false;
    }
  }, [resourceManager]);
  const centerContainer = useCallback((container, width, height) => {
    try {
      container.x = width / 2;
      container.y = height / 2;
      if (resourceManager) {
        resourceManager.trackDisplayObject(container);
      }
    } catch (error) {
    }
  }, [resourceManager]);
  const handleResize = useCallback(() => {
    cancellationRef.current.isCancelled = false;
    if (!sliderRef.current || !appRef.current) {
      return;
    }
    try {
      const app = appRef.current;
      const containerWidth = sliderRef.current.clientWidth;
      const containerHeight = sliderRef.current.clientHeight;
      if (isDevelopment) ;
      if (resizeTimerRef.current !== null) {
        if (resourceManager) {
          resourceManager.clearTimeout(resizeTimerRef.current);
        } else {
          clearTimeout(resizeTimerRef.current);
        }
        resizeTimerRef.current = null;
      }
      const resizeFn = () => {
        if (cancellationRef.current.isCancelled) return;
        try {
          app.renderer.resize(containerWidth, containerHeight);
          slidesRef.current.forEach((sprite) => {
            calculateSpriteScale(sprite, containerWidth, containerHeight);
          });
          textContainersRef.current.forEach((container) => {
            centerContainer(container, containerWidth, containerHeight);
          });
          if (backgroundDisplacementSpriteRef.current) {
            centerContainer(
              backgroundDisplacementSpriteRef.current,
              containerWidth,
              containerHeight
            );
          }
          if (cursorDisplacementSpriteRef.current) {
            centerContainer(
              cursorDisplacementSpriteRef.current,
              containerWidth,
              containerHeight
            );
          }
          if (isDevelopment) ;
        } catch (error) {
          if (isDevelopment) ;
        }
      };
      if (resourceManager) {
        resizeTimerRef.current = resourceManager.setTimeout(resizeFn, debounceTime);
      } else {
        resizeTimerRef.current = window.setTimeout(resizeFn, debounceTime);
      }
    } catch (error) {
    }
  }, [
    sliderRef,
    appRef,
    slidesRef,
    textContainersRef,
    backgroundDisplacementSpriteRef,
    cursorDisplacementSpriteRef,
    resourceManager,
    debounceTime,
    calculateSpriteScale,
    centerContainer
  ]);
  useEffect(() => {
    if (typeof window === "undefined") return;
    window.addEventListener("resize", handleResize);
    handleResize();
    return () => {
      cancellationRef.current.isCancelled = true;
      window.removeEventListener("resize", handleResize);
      if (resizeTimerRef.current !== null) {
        if (resourceManager) {
          resourceManager.clearTimeout(resizeTimerRef.current);
        } else {
          clearTimeout(resizeTimerRef.current);
        }
        resizeTimerRef.current = null;
      }
    };
  }, [handleResize, resourceManager]);
};

export { useResizeHandler as default };
//# sourceMappingURL=useResizeHandler.js.map