From 044d373ddd9c450d06987acc12f74523d298b9d6 Mon Sep 17 00:00:00 2001
From: j1ngzoue <workdrive0306@gmail.com>
Date: Mon, 18 Dec 2023 13:48:49 +0900
Subject: [PATCH] refactor:

---
 example/vite/src/App.tsx   | 10 +++---
 src/useAnimationTexture.ts | 69 +++++++++++++++++++++-----------------
 2 files changed, 43 insertions(+), 36 deletions(-)

diff --git a/example/vite/src/App.tsx b/example/vite/src/App.tsx
index a8167d5..8a490dd 100644
--- a/example/vite/src/App.tsx
+++ b/example/vite/src/App.tsx
@@ -31,7 +31,7 @@ export default function App() {
     <>
       <Suspense fallback={null}>
         <Canvas
-          style={{ position: "absolute", top: 100 }}
+          style={{ position: "absolute", top: 30 }}
           camera={{ position: [-5, 2, 10], fov: 60 }}
           flat={false}
         >
@@ -44,20 +44,20 @@ export default function App() {
           <Suspense fallback={null}>
             <AnimationTexture
               url={framePngUrl}
-              position={new THREE.Vector3(0, 0, 0)}
+              position={new THREE.Vector3(-1, 1, 0)}
             />
             <AnimationTexture
               url={framesPngUrl}
-              position={new THREE.Vector3(1, 0, 0)}
+              position={new THREE.Vector3(0, 1, 0)}
               isPlaying={isPlaying}
             />
             <AnimationTexture
               url={frameGifUrl}
-              position={new THREE.Vector3(0, 1, 0)}
+              position={new THREE.Vector3(-1, 0, 0)}
             />
             <AnimationTexture
               url={framesGifUrl}
-              position={new THREE.Vector3(1, 1, 0)}
+              position={new THREE.Vector3(0, 0, 0)}
             />
           </Suspense>
           <gridHelper
diff --git a/src/useAnimationTexture.ts b/src/useAnimationTexture.ts
index 2c8b911..2544aee 100644
--- a/src/useAnimationTexture.ts
+++ b/src/useAnimationTexture.ts
@@ -4,14 +4,13 @@ import { AnimationTexture } from "./AnimationTexture";
 
 interface UseAnimationTextureArgs {
   url: string;
-  // enabledInterval?: boolean;
   interval?: number;
   loop?: boolean;
   autoplay?: boolean;
 }
 
 const DEFAULT_INTERVAL = 100;
-const DEFAULT_ENABLED_LOOP = true;
+const DEFAULT_LOOP = true;
 const DEFAULT_AUTOPLAY = true;
 
 const framesMap = new Map<
@@ -44,34 +43,6 @@ export const preLoad = (url: UseAnimationTextureArgs["url"]) => {
   load(url);
 };
 
-const drawPatch = (
-  ctx: CanvasRenderingContext2D,
-  image: ImageData,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  frame: any
-) => {
-  const dims = frame.dims;
-  const tempCanvas = document.createElement("canvas");
-  tempCanvas.width = dims.width;
-  tempCanvas.height = dims.height;
-  const tempCtx = tempCanvas.getContext("2d");
-  if (!tempCtx) {
-    return null;
-  }
-  tempCtx.putImageData(image, 0, 0);
-  ctx.drawImage(
-    tempCanvas,
-    0,
-    0,
-    dims.width,
-    dims.height,
-    dims.left,
-    dims.top,
-    dims.width,
-    dims.height
-  );
-};
-
 const initializeWorker = () => {
   if (!worker) {
     worker = new framesWorker();
@@ -108,7 +79,7 @@ const initializeWorker = () => {
 export const useAnimationTexture = ({
   url,
   interval = DEFAULT_INTERVAL,
-  loop = DEFAULT_ENABLED_LOOP,
+  loop = DEFAULT_LOOP,
   autoplay = DEFAULT_AUTOPLAY,
 }: UseAnimationTextureArgs) => {
   const [animationTexture, setAnimationTexture] =
@@ -117,6 +88,42 @@ export const useAnimationTexture = ({
   const isGif = url.endsWith(".gif");
   const needsDisposal = useRef(false);
   const [playing, setPlaying] = useState(autoplay);
+  const tempCanvas = useRef<HTMLCanvasElement | null>(null);
+  const tempCtx = useRef<CanvasRenderingContext2D | null>(null);
+
+  const drawPatch = (
+    ctx: CanvasRenderingContext2D,
+    image: ImageData,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    frame: any
+  ) => {
+    const dims = frame.dims;
+    if (!tempCanvas.current) {
+      tempCanvas.current = document.createElement("canvas");
+    }
+    tempCanvas.current.width = dims.width;
+    tempCanvas.current.height = dims.height;
+    if (tempCtx.current) {
+      tempCtx.current = tempCanvas.current.getContext("2d");
+    }
+
+    if (!tempCtx.current) {
+      return null;
+    }
+    tempCtx.current.putImageData(image, 0, 0);
+    ctx.drawImage(
+      tempCanvas.current,
+      0,
+      0,
+      dims.width,
+      dims.height,
+      dims.left,
+      dims.top,
+      dims.width,
+      dims.height
+    );
+  };
+
   const frameUpdate = useCallback(() => {
     const currentFrames = getFrameses(url);
     if (