pixi-fusion 2.0.1 → 2.2.0

package/src/stage/Stage.tsx

@@ -1,26 +1,20 @@
 import React, { PropsWithChildren, useCallback, useEffect, useMemo, useState } from "react";
 import { Container } from "pixi.js";
-import { StageContext, StageContextValue } from "./Stage.context";
 import { useWorld } from "../hooks";
 import { Layer } from "../layer";
+import { StageContext, StageContextValue } from "./Stage.context";
 
 export const Stage: React.FC<PropsWithChildren> = ({ children }) => {
     const { application } = useWorld();
     const [things, setThings] = useState<Container[]>([]);
 
-    const addObject = useCallback(
-        (thing: Container) => {
-            setThings((oldThings) => [...oldThings, thing]);
-        },
-        [things]
-    );
+    const addObject = useCallback((thing: Container) => {
+        setThings((oldThings) => [...oldThings, thing]);
+    }, []);
 
-    const removeObject = useCallback(
-        (thing: Container) => {
-            setThings((oldThings) => oldThings.filter(({ uid }) => uid === thing.uid));
-        },
-        [application]
-    );
+    const removeObject = useCallback((thing: Container) => {
+        setThings((oldThings) => oldThings.filter(({ uid }) => uid === thing.uid));
+    }, []);
 
     const conextValue = useMemo<StageContextValue>(
         () => ({

package/src/world/World.tsx

@@ -1,8 +1,8 @@
-import React, { PropsWithChildren, createRef, useEffect, useMemo, useState } from "react";
+import React, { PropsWithChildren, createRef, useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react";
 import { Application, EventMode } from "pixi.js";
-import { WorldContextValue, WorldContext } from "./World.context";
 import { Stage } from "../stage";
 import { AssetsManager } from "../assets-manager";
+import { WorldContextValue, WorldContext } from "./World.context";
 
 type WorldProps = {
     eventMode?: EventMode;
@@ -17,17 +17,38 @@ export const World: React.FC<PropsWithChildren & WorldProps> = ({ children, even
 
     const [applicationRef, setApplicationRef] = useState<Application | null>(null);
 
-    const worldSize = useMemo(() => {
-        if (size) {
-            return { ...size };
-        }
+    const [canvasSize, setCanvasSize] = useState<null | { width: number; height: number }>(null);
 
+    const onCanvasRef = useCallback(
+        (ref: HTMLDivElement) => {
+            const application = new Application();
+            application.init({ eventMode }).then(() => {
+                canvasRef.current = ref;
+                application.resizeTo = canvasRef.current;
+                application.resize();
+                setApplicationRef(application);
+            });
+        },
+        [canvasRef, eventMode]
+    );
+
+    useLayoutEffect(() => {
         if (canvasRef?.current) {
             const { width, height } = canvasRef.current.getBoundingClientRect();
-            return {
+            setCanvasSize({
                 width,
                 height
-            };
+            });
+        }
+    }, [canvasRef]);
+
+    const worldSize = useMemo(() => {
+        if (size) {
+            return { ...size };
+        }
+
+        if (canvasSize) {
+            return canvasSize;
         }
 
         if (!applicationRef) {
@@ -38,26 +59,10 @@ export const World: React.FC<PropsWithChildren & WorldProps> = ({ children, even
         }
 
         return {
-            width: applicationRef.screen.width,
-            height: applicationRef.screen.height
+            width: applicationRef?.screen.width,
+            height: applicationRef?.screen.height
         };
-    }, [size, canvasRef.current, applicationRef]);
-
-    useEffect(() => {
-        if (!applicationRef) {
-            const application = new Application();
-            application.init().then(() => {
-                setApplicationRef(application);
-            });
-        }
-    }, []);
-
-    useEffect(() => {
-        if (applicationRef && canvasRef.current) {
-            applicationRef.resizeTo = canvasRef.current;
-            applicationRef.resize();
-        }
-    }, [canvasRef.current, applicationRef]);
+    }, [size, canvasSize, applicationRef]);
 
     const conextValue = useMemo<WorldContextValue>(
         () => ({
@@ -71,26 +76,21 @@ export const World: React.FC<PropsWithChildren & WorldProps> = ({ children, even
         if (!applicationRef) {
             return;
         }
-        canvasRef.current?.appendChild(applicationRef.canvas);
+        const canvas = canvasRef.current;
+        canvas?.appendChild(applicationRef.canvas);
 
         return () => {
             if (applicationRef) {
-                canvasRef.current?.removeChild(applicationRef.canvas);
+                canvas?.removeChild(applicationRef.canvas);
             }
         };
-    }, [canvasRef.current, applicationRef]);
-
-    useEffect(() => {
-        if (applicationRef) {
-            applicationRef.stage.eventMode = eventMode;
-        }
-    }, [eventMode, applicationRef]);
+    }, [canvasRef, applicationRef]);
 
     return (
         <WorldContext.Provider value={conextValue}>
             <AssetsManager>
                 <Stage>{children}</Stage>
-                <div style={{ width: "100%", height: "100%" }} ref={canvasRef} />
+                <div style={{ width: "100%", height: "100%" }} ref={onCanvasRef} />
             </AssetsManager>
         </WorldContext.Provider>
     );