@react-three/drei 9.116.2 → 9.117.0

package/core/useSpriteLoader.js

@@ -4,18 +4,14 @@ import { useThree, useLoader } from '@react-three/fiber';
 import * as React from 'react';
 import { useState } from 'react';
 
+/* eslint react-hooks/exhaustive-deps: 1 */
 // utils
-const getFirstItem = param => {
-  if (Array.isArray(param)) {
-    return param[0];
-  } else if (typeof param === 'object' && param !== null) {
-    const keys = Object.keys(param);
-    return param[keys[0]][0];
+const getFirstFrame = (frames, frameName) => {
+  if (Array.isArray(frames)) {
+    return frames[0];
   } else {
-    return {
-      w: 0,
-      h: 0
-    };
+    const k = frameName !== null && frameName !== void 0 ? frameName : Object.keys(frames)[0];
+    return frames[k][0];
   }
 };
 const checkIfFrameIsEmpty = frameData => {
@@ -26,166 +22,42 @@ const checkIfFrameIsEmpty = frameData => {
   }
   return true;
 };
-const calculateAspectRatio = (width, height, factor, v) => {
-  const adaptedHeight = height * (v.aspect > width / height ? v.width / width : v.height / height);
-  const adaptedWidth = width * (v.aspect > width / height ? v.width / width : v.height / height);
-  const scaleX = adaptedWidth * factor;
-  const scaleY = adaptedHeight * factor;
-  const currentMaxScale = 1;
-  // Calculate the maximum scale based on the aspect ratio and max scale limit
-  let finalMaxScaleW = Math.min(currentMaxScale, scaleX);
-  let finalMaxScaleH = Math.min(currentMaxScale, scaleY);
-
-  // Ensure that scaleX and scaleY do not exceed the max scale while maintaining aspect ratio
-  if (scaleX > currentMaxScale) {
-    finalMaxScaleW = currentMaxScale;
-    finalMaxScaleH = scaleY / scaleX * currentMaxScale;
-  }
-  return new THREE.Vector3(finalMaxScaleW, finalMaxScaleH, 1);
-};
-function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad, canvasRenderingContext2DSettings) {
-  const v = useThree(state => state.viewport);
+function useSpriteLoader(/** The URL of the sprite sheet. */
+input, /** The JSON data of the sprite sheet. */
+json, /** The names of the animations in the sprite sheet. */
+animationNames, /** The number of frames in the sprite sheet. */
+numberOfFrames, /** A callback that is called when the sprite sheet is loaded. */
+onLoad, /** The settings to use when creating the 2D context. */
+canvasRenderingContext2DSettings) {
+  const viewportRef = React.useRef(useThree(state => state.viewport));
   const spriteDataRef = React.useRef(null);
   const totalFrames = React.useRef(0);
   const aspectFactor = 0.1;
+  const inputRef = React.useRef(input);
+  const jsonRef = React.useRef(json);
+  const animationFramesRef = React.useRef(animationNames);
   const [spriteData, setSpriteData] = useState(null);
   const [spriteTexture, setSpriteTexture] = React.useState(new THREE.Texture());
-  const textureLoader = new THREE.TextureLoader();
+  const textureLoader = React.useMemo(() => new THREE.TextureLoader(), []);
   const [spriteObj, setSpriteObj] = useState(null);
-  React.useLayoutEffect(() => {
-    if (json && input) {
-      loadJsonAndTextureAndExecuteCallback(json, input, parseSpriteData);
-    } else if (input) {
-      // only load the texture, this is an image sprite only
-      loadStandaloneSprite();
-    }
-    return () => {
-      if (input) {
-        useLoader.clear(TextureLoader, input);
-      }
-    };
-  }, []);
-  function loadJsonAndTexture(textureUrl, jsonUrl) {
-    if (jsonUrl && textureUrl) {
-      loadJsonAndTextureAndExecuteCallback(jsonUrl, textureUrl, parseSpriteData);
-    } else {
-      loadStandaloneSprite(textureUrl);
-    }
-  }
-  function loadStandaloneSprite(textureUrl) {
-    if (!textureUrl && !input) {
-      throw new Error('Either textureUrl or input must be provided');
-    }
-    const validUrl = textureUrl !== null && textureUrl !== void 0 ? textureUrl : input;
-    if (!validUrl) {
-      throw new Error('A valid texture URL must be provided');
-    }
-    new Promise(resolve => {
-      textureLoader.load(validUrl, resolve);
-    }).then(texture => {
-      parseSpriteData(null, texture);
-    });
-  }
-
-  /**
-   *
-   */
-  function loadJsonAndTextureAndExecuteCallback(jsonUrl, textureUrl, callback) {
-    const jsonPromise = fetch(jsonUrl).then(response => response.json());
-    const texturePromise = new Promise(resolve => {
-      textureLoader.load(textureUrl, resolve);
-    });
-    Promise.all([jsonPromise, texturePromise]).then(response => {
-      callback(response[0], response[1]);
-    });
-  }
-  const parseSpriteData = (json, _spriteTexture) => {
-    let aspect = new THREE.Vector3(1, 1, 1);
-    // sprite only case
-    if (json === null) {
-      if (_spriteTexture && numberOfFrames) {
-        //get size from texture
-        const width = _spriteTexture.image.width;
-        const height = _spriteTexture.image.height;
-        totalFrames.current = numberOfFrames;
-        const {
-          rows,
-          columns,
-          frameWidth,
-          frameHeight,
-          emptyFrames
-        } = getRowsAndColumns(_spriteTexture, numberOfFrames);
-        spriteDataRef.current = {
-          frames: [],
-          meta: {
-            version: '1.0',
-            size: {
-              w: width,
-              h: height
-            },
-            rows,
-            columns,
-            frameWidth,
-            frameHeight,
-            scale: '1'
-          }
-        };
-        for (let row = 0; row < rows; row++) {
-          for (let col = 0; col < columns; col++) {
-            const isExcluded = (emptyFrames !== null && emptyFrames !== void 0 ? emptyFrames : []).some(coord => coord.row === row && coord.col === col);
-            if (isExcluded) {
-              continue;
-            }
-            spriteDataRef.current.frames.push({
-              frame: {
-                x: col * frameWidth,
-                y: row * frameHeight,
-                w: frameWidth,
-                h: frameHeight
-              },
-              rotated: false,
-              trimmed: false,
-              spriteSourceSize: {
-                x: 0,
-                y: 0,
-                w: frameWidth,
-                h: frameHeight
-              },
-              sourceSize: {
-                w: frameWidth,
-                h: frameHeight
-              }
-            });
-          }
-        }
-        aspect = calculateAspectRatio(frameWidth, frameHeight, aspectFactor, v);
-      }
+  const calculateAspectRatio = React.useCallback((width, height, factor) => {
+    const adaptedHeight = height * (viewportRef.current.aspect > width / height ? viewportRef.current.width / width : viewportRef.current.height / height);
+    const adaptedWidth = width * (viewportRef.current.aspect > width / height ? viewportRef.current.width / width : viewportRef.current.height / height);
+    const scaleX = adaptedWidth * factor;
+    const scaleY = adaptedHeight * factor;
+    const currentMaxScale = 1;
+    // Calculate the maximum scale based on the aspect ratio and max scale limit
+    let finalMaxScaleW = Math.min(currentMaxScale, scaleX);
+    let finalMaxScaleH = Math.min(currentMaxScale, scaleY);
 
-      //scale ratio for stadalone sprite
-      spriteDataRef.current.frames = calculateScaleRatio(spriteDataRef.current.frames);
-    } else if (_spriteTexture) {
-      spriteDataRef.current = json;
-      spriteDataRef.current.frames = parseFrames();
-      totalFrames.current = Array.isArray(json.frames) ? json.frames.length : Object.keys(json.frames).length;
-      const {
-        w,
-        h
-      } = getFirstItem(json.frames).sourceSize;
-      aspect = calculateAspectRatio(w, h, aspectFactor, v);
+    // Ensure that scaleX and scaleY do not exceed the max scale while maintaining aspect ratio
+    if (scaleX > currentMaxScale) {
+      finalMaxScaleW = currentMaxScale;
+      finalMaxScaleH = scaleY / scaleX * currentMaxScale;
     }
-    setSpriteData(spriteDataRef.current);
-    // @ts-ignore
-    if ('encoding' in _spriteTexture) _spriteTexture.encoding = 3001; // sRGBEncoding
-    // @ts-ignore
-    else _spriteTexture.colorSpace = THREE.SRGBColorSpace;
-    setSpriteTexture(_spriteTexture);
-    setSpriteObj({
-      spriteTexture: _spriteTexture,
-      spriteData: spriteDataRef.current,
-      aspect: aspect
-    });
-  };
-  const getRowsAndColumns = (texture, totalFrames) => {
+    return new THREE.Vector3(finalMaxScaleW, finalMaxScaleH, 1);
+  }, []);
+  const getRowsAndColumns = React.useCallback((texture, totalFrames) => {
     if (texture.image) {
       const canvas = document.createElement('canvas');
       const ctx = canvas.getContext('2d', canvasRenderingContext2DSettings);
@@ -240,125 +112,285 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad, ca
         emptyFrames: []
       };
     }
-  };
+  }, [canvasRenderingContext2DSettings]);
+
+  // calculate scale ratio for the frames
+  const calculateScaleRatio = React.useCallback(frames => {
+    // Helper function to calculate scale ratio for an array of frames
+    const processFrameArray = frameArray => {
+      // Find the largest frame
+      let largestFrame = null;
+      for (const frame of frameArray) {
+        const {
+          w,
+          h
+        } = frame.frame;
+        const area = w * h;
+        if (!largestFrame || area > largestFrame.area) {
+          largestFrame = {
+            w,
+            h,
+            area
+          };
+        }
+      }
+
+      // Set scaleRatio property on each frame
+      const frameArr = frameArray.map(frame => {
+        const {
+          w,
+          h
+        } = frame.frame;
+        const area = w * h;
+        const scaleRatio = largestFrame ? area === largestFrame.area ? 1 : Math.sqrt(area / largestFrame.area) : 1;
+        return {
+          ...frame,
+          scaleRatio
+        };
+      });
+      return frameArr;
+    };
+
+    // Handle both array and record cases
+    if (Array.isArray(frames)) {
+      return processFrameArray(frames);
+    } else {
+      const result = {};
+      for (const key in frames) {
+        result[key] = processFrameArray(frames[key]);
+      }
+      return result;
+    }
+  }, []);
 
   // for frame based JSON Hash sprite data
-  const parseFrames = () => {
+  const parseFrames = React.useCallback(() => {
     const sprites = {};
     const data = spriteDataRef.current;
-    const delimiters = animationNames;
-    if (delimiters && Array.isArray(data['frames'])) {
-      for (let i = 0; i < delimiters.length; i++) {
-        // we convert each named animation group into an array
-        sprites[delimiters[i]] = [];
-        for (const value of data['frames']) {
-          const frameData = value['frame'];
-          const x = frameData['x'];
-          const y = frameData['y'];
-          const width = frameData['w'];
-          const height = frameData['h'];
-          const sourceWidth = value['sourceSize']['w'];
-          const sourceHeight = value['sourceSize']['h'];
-          if (typeof value['filename'] === 'string' && value['filename'].toLowerCase().indexOf(delimiters[i].toLowerCase()) !== -1) {
-            sprites[delimiters[i]].push({
-              x: x,
-              y: y,
-              w: width,
-              h: height,
-              frame: frameData,
-              sourceSize: {
-                w: sourceWidth,
-                h: sourceHeight
-              }
-            });
+    const delimiters = animationFramesRef.current;
+    if (data) {
+      if (delimiters && Array.isArray(data['frames'])) {
+        for (let i = 0; i < delimiters.length; i++) {
+          // we convert each named animation group into an array
+          sprites[delimiters[i]] = [];
+          for (const value of data['frames']) {
+            const frameData = value['frame'];
+            const sourceWidth = value['sourceSize']['w'];
+            const sourceHeight = value['sourceSize']['h'];
+            if (typeof value['filename'] === 'string' && value['filename'].toLowerCase().indexOf(delimiters[i].toLowerCase()) !== -1) {
+              sprites[delimiters[i]].push({
+                ...value,
+                frame: frameData,
+                sourceSize: {
+                  w: sourceWidth,
+                  h: sourceHeight
+                }
+              });
+            }
           }
         }
+        for (const frame in sprites) {
+          const scaleRatioData = calculateScaleRatio(sprites[frame]);
+          if (Array.isArray(scaleRatioData)) {
+            sprites[frame] = scaleRatioData;
+          }
+        }
+        return sprites;
+      } else if (delimiters && typeof data['frames'] === 'object') {
+        for (let i = 0; i < delimiters.length; i++) {
+          // we convert each named animation group into an array
+          sprites[delimiters[i]] = [];
+          for (const innerKey in data['frames']) {
+            const value = data['frames'][innerKey];
+            const frameData = value['frame'];
+            const sourceWidth = value['sourceSize']['w'];
+            const sourceHeight = value['sourceSize']['h'];
+            if (typeof innerKey === 'string' && innerKey.toLowerCase().indexOf(delimiters[i].toLowerCase()) !== -1) {
+              sprites[delimiters[i]].push({
+                ...value,
+                frame: frameData,
+                sourceSize: {
+                  w: sourceWidth,
+                  h: sourceHeight
+                }
+              });
+            }
+          }
+        }
+        for (const frame in sprites) {
+          const scaleRatioData = calculateScaleRatio(sprites[frame]);
+          if (Array.isArray(scaleRatioData)) {
+            sprites[frame] = scaleRatioData;
+          }
+        }
+        return sprites;
+      } else {
+        let spritesArr = [];
+        if (data != null && data.frames) {
+          if (Array.isArray(data.frames)) {
+            spritesArr = data.frames.map(frame => ({
+              ...frame,
+              x: frame.frame.x,
+              y: frame.frame.y,
+              w: frame.frame.w,
+              h: frame.frame.h
+            }));
+          } else {
+            spritesArr = Object.values(data.frames).flat().map(frame => ({
+              ...frame,
+              x: frame.frame.x,
+              y: frame.frame.y,
+              w: frame.frame.w,
+              h: frame.frame.h
+            }));
+          }
+        }
+        return calculateScaleRatio(spritesArr);
       }
-      for (const frame in sprites) {
-        sprites[frame].frame = calculateScaleRatio(sprites[frame]);
-      }
-      return sprites;
-    } else if (delimiters && typeof data['frames'] === 'object') {
-      for (let i = 0; i < delimiters.length; i++) {
-        // we convert each named animation group into an array
-        sprites[delimiters[i]] = [];
-        for (const innerKey in data['frames']) {
-          const value = data['frames'][innerKey];
-          const frameData = value['frame'];
-          const x = frameData['x'];
-          const y = frameData['y'];
-          const width = frameData['w'];
-          const height = frameData['h'];
-          const sourceWidth = value['sourceSize']['w'];
-          const sourceHeight = value['sourceSize']['h'];
-          if (typeof innerKey === 'string' && innerKey.toLowerCase().indexOf(delimiters[i].toLowerCase()) !== -1) {
-            sprites[delimiters[i]].push({
-              x: x,
-              y: y,
+    }
+    return [];
+  }, [calculateScaleRatio, spriteDataRef]);
+  const parseSpriteData = React.useCallback((json, _spriteTexture) => {
+    let aspect = new THREE.Vector3(1, 1, 1);
+    // sprite only case
+    if (json === null) {
+      if (_spriteTexture && numberOfFrames) {
+        //get size from texture
+        const width = _spriteTexture.image.width;
+        const height = _spriteTexture.image.height;
+        totalFrames.current = numberOfFrames;
+        const {
+          rows,
+          columns,
+          frameWidth,
+          frameHeight,
+          emptyFrames
+        } = getRowsAndColumns(_spriteTexture, numberOfFrames);
+        const nonJsonFrames = {
+          frames: [],
+          meta: {
+            version: '1.0',
+            size: {
               w: width,
-              h: height,
-              frame: frameData,
-              sourceSize: {
-                w: sourceWidth,
-                h: sourceHeight
-              }
-            });
+              h: height
+            },
+            rows,
+            columns,
+            frameWidth,
+            frameHeight,
+            scale: '1'
+          }
+        };
+        for (let row = 0; row < rows; row++) {
+          for (let col = 0; col < columns; col++) {
+            const isExcluded = (emptyFrames !== null && emptyFrames !== void 0 ? emptyFrames : []).some(coord => coord.row === row && coord.col === col);
+            if (isExcluded) {
+              continue;
+            }
+            if (Array.isArray(nonJsonFrames.frames)) {
+              nonJsonFrames.frames.push({
+                frame: {
+                  x: col * frameWidth,
+                  y: row * frameHeight,
+                  w: frameWidth,
+                  h: frameHeight
+                },
+                scaleRatio: 1,
+                rotated: false,
+                trimmed: false,
+                spriteSourceSize: {
+                  x: 0,
+                  y: 0,
+                  w: frameWidth,
+                  h: frameHeight
+                },
+                sourceSize: {
+                  w: frameWidth,
+                  h: frameHeight
+                }
+              });
+            }
           }
         }
+        aspect = calculateAspectRatio(frameWidth, frameHeight, aspectFactor);
+        spriteDataRef.current = nonJsonFrames;
       }
-      for (const frame in sprites) {
-        sprites[frame].frame = calculateScaleRatio(sprites[frame]);
-      }
-      return sprites;
-    } else {
-      // we need to convert it into an array
-      let spritesArr = [];
-      for (const key in data.frames) {
-        spritesArr.push(data.frames[key]);
-      }
-      spritesArr = calculateScaleRatio(spritesArr);
-      return spritesArr;
-    }
-  };
 
-  // calculate scale ratio for the frames
-  const calculateScaleRatio = frames => {
-    // Find the largest frame
-    let largestFrame = null;
-    for (const frame of frames) {
+      //scale ratio for standalone sprite
+      if (spriteDataRef.current && spriteDataRef.current.frames) {
+        spriteDataRef.current.frames = calculateScaleRatio(spriteDataRef.current.frames);
+      }
+    } else if (_spriteTexture) {
+      spriteDataRef.current = json;
+      spriteDataRef.current.frames = parseFrames();
+      totalFrames.current = Array.isArray(json.frames) ? json.frames.length : Object.keys(json.frames).length;
       const {
         w,
         h
-      } = frame.frame;
-      const area = w * h;
-      if (!largestFrame || area > largestFrame.area) {
-        largestFrame = {
-          ...frame.frame,
-          area
-        };
-      }
+      } = getFirstFrame(json.frames).sourceSize;
+      aspect = calculateAspectRatio(w, h, aspectFactor);
+    }
+    setSpriteData(spriteDataRef.current);
+    if ('encoding' in _spriteTexture) {
+      _spriteTexture.encoding = 3001; // sRGBEncoding
+    } else if ('colorSpace' in _spriteTexture) {
+      //@ts-ignore
+      _spriteTexture.colorSpace = THREE.SRGBColorSpace;
     }
+    setSpriteTexture(_spriteTexture);
+    setSpriteObj({
+      spriteTexture: _spriteTexture,
+      spriteData: spriteDataRef.current,
+      aspect: aspect
+    });
+  }, [getRowsAndColumns, numberOfFrames, parseFrames, calculateAspectRatio, calculateScaleRatio]);
 
-    // Set scaleRatio property on each frame
-    for (const frame of frames) {
-      var _largestFrame;
-      const {
-        w,
-        h
-      } = frame.frame;
-      const area = w * h;
-      if (area === ((_largestFrame = largestFrame) == null ? void 0 : _largestFrame.area)) {
-        frame.scaleRatio = 1;
-      } else {
-        var _largestFrame2;
-        frame.scaleRatio = Math.sqrt(area / ((_largestFrame2 = largestFrame) == null ? void 0 : _largestFrame2.area));
-      }
+  /**
+   *
+   */
+  const loadJsonAndTextureAndExecuteCallback = React.useCallback((jsonUrl, textureUrl, callback) => {
+    const jsonPromise = fetch(jsonUrl).then(response => response.json());
+    const texturePromise = new Promise(resolve => {
+      textureLoader.load(textureUrl, resolve);
+    });
+    Promise.all([jsonPromise, texturePromise]).then(response => {
+      callback(response[0], response[1]);
+    });
+  }, [textureLoader]);
+  const loadStandaloneSprite = React.useCallback(textureUrl => {
+    if (!textureUrl && !inputRef.current) {
+      throw new Error('Either textureUrl or input must be provided');
     }
-    return frames;
-  };
+    const validUrl = textureUrl !== null && textureUrl !== void 0 ? textureUrl : inputRef.current;
+    if (!validUrl) {
+      throw new Error('A valid texture URL must be provided');
+    }
+    textureLoader.load(validUrl, texture => parseSpriteData(null, texture));
+  }, [textureLoader, parseSpriteData]);
+  const loadJsonAndTexture = React.useCallback((textureUrl, jsonUrl) => {
+    if (jsonUrl && textureUrl) {
+      loadJsonAndTextureAndExecuteCallback(jsonUrl, textureUrl, parseSpriteData);
+    } else {
+      loadStandaloneSprite(textureUrl);
+    }
+  }, [loadJsonAndTextureAndExecuteCallback, loadStandaloneSprite, parseSpriteData]);
+  React.useLayoutEffect(() => {
+    if (jsonRef.current && inputRef.current) {
+      loadJsonAndTextureAndExecuteCallback(jsonRef.current, inputRef.current, parseSpriteData);
+    } else if (inputRef.current) {
+      // only load the texture, this is an image sprite only
+      loadStandaloneSprite();
+    }
+    const _inputRef = inputRef.current;
+    return () => {
+      if (_inputRef) {
+        useLoader.clear(TextureLoader, _inputRef);
+      }
+    };
+  }, [loadJsonAndTextureAndExecuteCallback, loadStandaloneSprite, parseSpriteData]);
   React.useLayoutEffect(() => {
-    onLoad == null || onLoad(spriteTexture, spriteData);
-  }, [spriteTexture, spriteData]);
+    onLoad == null || onLoad(spriteTexture, spriteData !== null && spriteData !== void 0 ? spriteData : null);
+  }, [spriteTexture, spriteData, onLoad]);
   return {
     spriteObj,
     loadJsonAndTexture
@@ -367,4 +399,4 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad, ca
 useSpriteLoader.preload = url => useLoader.preload(TextureLoader, url);
 useSpriteLoader.clear = input => useLoader.clear(TextureLoader, input);
 
-export { calculateAspectRatio, checkIfFrameIsEmpty, getFirstItem, useSpriteLoader };
+export { checkIfFrameIsEmpty, getFirstFrame, useSpriteLoader };