npm - pixi-fusion - Versions diffs - 1.0.0 - Mend

pixi-fusion 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (138) hide show

package/LICENSE +21 -0
package/README.md +115 -0
package/dist/src/assets-manager/AssetsManager.context.d.ts +15 -0
package/dist/src/assets-manager/AssetsManager.context.js +6 -0
package/dist/src/assets-manager/AssetsManager.d.ts +2 -0
package/dist/src/assets-manager/AssetsManager.js +43 -0
package/dist/src/assets-manager/index.d.ts +3 -0
package/dist/src/assets-manager/index.js +3 -0
package/dist/src/assets-manager/useAssetManager.d.ts +1 -0
package/dist/src/assets-manager/useAssetManager.js +5 -0
package/dist/src/camera/Camera.context.d.ts +13 -0
package/dist/src/camera/Camera.context.js +2 -0
package/dist/src/camera/Camera.d.ts +7 -0
package/dist/src/camera/Camera.js +99 -0
package/dist/src/camera/index.d.ts +2 -0
package/dist/src/camera/index.js +2 -0
package/dist/src/game-context/Game.context.d.ts +39 -0
package/dist/src/game-context/Game.context.js +85 -0
package/dist/src/game-context/index.d.ts +1 -0
package/dist/src/game-context/index.js +1 -0
package/dist/src/game-objects/GameObjectPhysicalObjectConfig.d.ts +4 -0
package/dist/src/game-objects/GameObjectPhysicalObjectConfig.js +1 -0
package/dist/src/game-objects/index.d.ts +2 -0
package/dist/src/game-objects/index.js +2 -0
package/dist/src/game-objects/usePhysicalObject.d.ts +7 -0
package/dist/src/game-objects/usePhysicalObject.js +17 -0
package/dist/src/game-objects/usePhysicalObjectFromConfig.d.ts +6 -0
package/dist/src/game-objects/usePhysicalObjectFromConfig.js +13 -0
package/dist/src/game-objects/useWalls.d.ts +11 -0
package/dist/src/game-objects/useWalls.js +59 -0
package/dist/src/hooks/index.d.ts +12 -0
package/dist/src/hooks/index.js +12 -0
package/dist/src/hooks/useAnimatedSprite.d.ts +10 -0
package/dist/src/hooks/useAnimatedSprite.js +41 -0
package/dist/src/hooks/useCamera.d.ts +1 -0
package/dist/src/hooks/useCamera.js +5 -0
package/dist/src/hooks/useCollisionDetection.d.ts +9 -0
package/dist/src/hooks/useCollisionDetection.js +21 -0
package/dist/src/hooks/useGame.d.ts +1 -0
package/dist/src/hooks/useGame.js +5 -0
package/dist/src/hooks/useGlobalEventHandler.d.ts +5 -0
package/dist/src/hooks/useGlobalEventHandler.js +15 -0
package/dist/src/hooks/useLayerContext.d.ts +1 -0
package/dist/src/hooks/useLayerContext.js +5 -0
package/dist/src/hooks/useObject.d.ts +6 -0
package/dist/src/hooks/useObject.js +54 -0
package/dist/src/hooks/useSprite.d.ts +6 -0
package/dist/src/hooks/useSprite.js +21 -0
package/dist/src/hooks/useStage.d.ts +1 -0
package/dist/src/hooks/useStage.js +5 -0
package/dist/src/hooks/useTexture.d.ts +9 -0
package/dist/src/hooks/useTexture.js +14 -0
package/dist/src/hooks/useTickerCallback.d.ts +5 -0
package/dist/src/hooks/useTickerCallback.js +14 -0
package/dist/src/hooks/useTilingSprite.d.ts +6 -0
package/dist/src/hooks/useTilingSprite.js +26 -0
package/dist/src/hooks/useWorld.d.ts +1 -0
package/dist/src/hooks/useWorld.js +5 -0
package/dist/src/index.d.ts +10 -0
package/dist/src/index.js +10 -0
package/dist/src/layer/Layer.context.d.ts +6 -0
package/dist/src/layer/Layer.context.js +2 -0
package/dist/src/layer/Layer.d.ts +6 -0
package/dist/src/layer/Layer.js +34 -0
package/dist/src/layer/index.d.ts +1 -0
package/dist/src/layer/index.js +1 -0
package/dist/src/physics/MatterPhysics.context.d.ts +8 -0
package/dist/src/physics/MatterPhysics.context.js +74 -0
package/dist/src/physics/index.d.ts +4 -0
package/dist/src/physics/index.js +4 -0
package/dist/src/physics/types.d.ts +24 -0
package/dist/src/physics/types.js +1 -0
package/dist/src/physics/useCollisionEventHandler.d.ts +7 -0
package/dist/src/physics/useCollisionEventHandler.js +15 -0
package/dist/src/physics/usePhysicsEngineEventHandler.d.ts +8 -0
package/dist/src/physics/usePhysicsEngineEventHandler.js +15 -0
package/dist/src/physics/usePhysicsTickerCallback.d.ts +7 -0
package/dist/src/physics/usePhysicsTickerCallback.js +15 -0
package/dist/src/stage/Stage.context.d.ts +6 -0
package/dist/src/stage/Stage.context.js +2 -0
package/dist/src/stage/Stage.d.ts +2 -0
package/dist/src/stage/Stage.js +29 -0
package/dist/src/stage/index.d.ts +1 -0
package/dist/src/stage/index.js +1 -0
package/dist/src/types.d.ts +7 -0
package/dist/src/types.js +7 -0
package/dist/src/world/World.context.d.ts +10 -0
package/dist/src/world/World.context.js +2 -0
package/dist/src/world/World.d.ts +11 -0
package/dist/src/world/World.js +66 -0
package/dist/src/world/index.d.ts +2 -0
package/dist/src/world/index.js +2 -0
package/package.json +52 -0
package/src/assets-manager/AssetsManager.context.tsx +23 -0
package/src/assets-manager/AssetsManager.tsx +54 -0
package/src/assets-manager/index.ts +3 -0
package/src/assets-manager/useAssetManager.ts +7 -0
package/src/camera/Camera.context.tsx +17 -0
package/src/camera/Camera.tsx +153 -0
package/src/camera/index.ts +2 -0
package/src/game-context/Game.context.tsx +133 -0
package/src/game-context/index.ts +1 -0
package/src/game-objects/GameObjectPhysicalObjectConfig.ts +18 -0
package/src/game-objects/index.ts +2 -0
package/src/game-objects/usePhysicalObject.ts +24 -0
package/src/game-objects/usePhysicalObjectFromConfig.ts +22 -0
package/src/game-objects/useWalls.ts +93 -0
package/src/hooks/index.ts +12 -0
package/src/hooks/useAnimatedSprite.ts +65 -0
package/src/hooks/useCamera.ts +6 -0
package/src/hooks/useCollisionDetection.ts +35 -0
package/src/hooks/useGame.ts +6 -0
package/src/hooks/useGlobalEventHandler.ts +27 -0
package/src/hooks/useLayerContext.ts +6 -0
package/src/hooks/useObject.ts +81 -0
package/src/hooks/useSprite.ts +33 -0
package/src/hooks/useStage.ts +7 -0
package/src/hooks/useTexture.ts +22 -0
package/src/hooks/useTickerCallback.ts +25 -0
package/src/hooks/useTilingSprite.ts +39 -0
package/src/hooks/useWorld.ts +7 -0
package/src/index.ts +10 -0
package/src/layer/Layer.context.tsx +9 -0
package/src/layer/Layer.tsx +57 -0
package/src/layer/index.ts +1 -0
package/src/physics/MatterPhysics.context.tsx +100 -0
package/src/physics/index.ts +4 -0
package/src/physics/types.ts +27 -0
package/src/physics/useCollisionEventHandler.ts +26 -0
package/src/physics/usePhysicsEngineEventHandler.ts +30 -0
package/src/physics/usePhysicsTickerCallback.ts +25 -0
package/src/stage/Stage.context.tsx +9 -0
package/src/stage/Stage.tsx +50 -0
package/src/stage/index.ts +1 -0
package/src/types.ts +8 -0
package/src/world/World.context.tsx +13 -0
package/src/world/World.tsx +93 -0
package/src/world/index.ts +2 -0

package/src/game-objects/usePhysicalObjectFromConfig.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import { Body } from "matter-js";
+import { useMemo } from "react";
+import { GameObjectPhysicalObjectConfig } from "./GameObjectPhysicalObjectConfig";
+import { usePhysicalObject } from "./usePhysicalObject";
+import { Nullable } from "../types";
+export const usePhysicalObjectFromConfig = <PhysicalObjectType extends Nullable<Body> = Body>({
+    position = { x: 0, y: 0 },
+    ...physicalObjectConfig
+}: GameObjectPhysicalObjectConfig) => {
+    const physicalObject = useMemo(() => {
+        if (physicalObjectConfig) {
+            return Body.create({ position, ...physicalObjectConfig });
+        }
+        return null;
+    }, []) as PhysicalObjectType;
+    usePhysicalObject({ physicalObject });
+    return { physicalObject };
+};

package/src/game-objects/useWalls.ts ADDED Viewed

@@ -0,0 +1,93 @@
+import { useContext, useEffect, useMemo } from "react";
+import { Bodies, Body, Composite } from "matter-js";
+import { MatterPhysicsContext } from "../physics/MatterPhysics.context";
+type WallOptions = {
+    thikness: number;
+};
+type UseWallsOptions = {
+    left?: Partial<WallOptions> | boolean;
+    right?: Partial<WallOptions> | boolean;
+    top?: Partial<WallOptions> | boolean;
+    bottom?: Partial<WallOptions> | boolean;
+};
+const DEFAULT_WALL_CONFIG: WallOptions = {
+    thikness: 10
+};
+export const useWalls = ({ left = true, right = true, top = true, bottom = true }: UseWallsOptions = {}) => {
+    const { config } = useContext(MatterPhysicsContext);
+    const { height, width } = config.world;
+    const center = {
+        x: width / 2,
+        y: height / 2
+    };
+    const { addBody, removeBody } = useContext(MatterPhysicsContext);
+    const body = useMemo(() => {
+        const walls = Composite.create();
+        const parts: Body[] = [];
+        if (left) {
+            const leftWallConfig = Object.assign(DEFAULT_WALL_CONFIG, typeof left === "boolean" ? {} : { ...left });
+            const leftWallPosition = { x: 0, y: center.y };
+            parts.push(
+                Bodies.rectangle(leftWallPosition.x, leftWallPosition.y, leftWallConfig.thikness, height, {
+                    isStatic: true,
+                    label: "left-wall"
+                })
+            );
+        }
+        if (right) {
+            const rightWallConfig = Object.assign(DEFAULT_WALL_CONFIG, typeof right === "boolean" ? {} : { ...right });
+            const rightWallPosition = { x: width, y: center.y };
+            parts.push(
+                Bodies.rectangle(rightWallPosition.x, rightWallPosition.y, rightWallConfig.thikness, height, {
+                    isStatic: true,
+                    label: "right-wall"
+                })
+            );
+        }
+        if (top) {
+            const topWallConfig = Object.assign(DEFAULT_WALL_CONFIG, typeof top === "boolean" ? {} : { ...top });
+            const topWallPosition = { x: center.x, y: 0 };
+            parts.push(
+                Bodies.rectangle(topWallPosition.x, topWallPosition.y, width, topWallConfig.thikness, {
+                    isStatic: true,
+                    label: "top-wall"
+                })
+            );
+        }
+        if (bottom) {
+            const bottomWallConfig = Object.assign(
+                DEFAULT_WALL_CONFIG,
+                typeof bottom === "boolean" ? {} : { ...bottom }
+            );
+            const bottomWallPosition = { x: center.x, y: height };
+            parts.push(
+                Bodies.rectangle(bottomWallPosition.x, bottomWallPosition.y, width, bottomWallConfig.thikness, {
+                    isStatic: true,
+                    label: "bottom-wall"
+                })
+            );
+        }
+        Composite.add(walls, parts);
+        return walls;
+    }, [width, height]);
+    useEffect(() => {
+        addBody(body);
+        return () => {
+            removeBody(body);
+        };
+    }, [body.id]);
+};

package/src/hooks/index.ts ADDED Viewed

@@ -0,0 +1,12 @@
+export * from "./useGlobalEventHandler";
+export * from "./useStage";
+export * from "./useTickerCallback";
+export * from "./useWorld";
+export * from "./useLayerContext";
+export * from "./useSprite";
+export * from "./useAnimatedSprite";
+export * from "./useTexture";
+export * from "./useGame";
+export * from "./useTilingSprite";
+export * from "./useCamera";
+export * from "./useCollisionDetection";

package/src/hooks/useAnimatedSprite.ts ADDED Viewed

@@ -0,0 +1,65 @@
+import { useEffect, useMemo } from "react";
+import { AnimatedSprite, AnimatedSpriteOptions, Spritesheet, SpritesheetData } from "pixi.js";
+import { useTextures } from "./useTexture";
+import { useObject } from "./useObject";
+type UseAnimatedSpriteOptions = Omit<AnimatedSpriteOptions, "textures" | "texture"> & {
+    texture: string;
+    animation: string;
+    spritesheet: SpritesheetData;
+    animationSpeed: number;
+    isPlaying: boolean;
+};
+export const useAnimatedSprite = ({
+    texture,
+    spritesheet: spritesheetJSON,
+    animation,
+    animationSpeed = 1,
+    isPlaying,
+    ...options
+}: UseAnimatedSpriteOptions) => {
+    const textureKeys = useMemo(() => {
+        return [...(texture ? [texture] : [])];
+    }, [texture]);
+    const { textures, isFetched } = useTextures({ keys: textureKeys });
+    const spritesheet = useMemo(() => {
+        if (isFetched) {
+            const sheet = new Spritesheet(textures[0], spritesheetJSON);
+            sheet.parse();
+            return sheet;
+        }
+        return null;
+    }, [spritesheetJSON]);
+    const sprite = useMemo(() => {
+        if (spritesheet?.animations?.[animation]) {
+            return new AnimatedSprite({ textures: spritesheet?.animations?.[animation] });
+        }
+        return null;
+    }, [texture, spritesheetJSON, animation]);
+    useObject({ object: sprite, ...options });
+    useEffect(() => {
+        if (sprite) {
+            sprite.animationSpeed = animationSpeed;
+        }
+    }, [animationSpeed, sprite?.uid]);
+    useEffect(() => {
+        if (sprite) {
+            if (isPlaying) {
+                sprite.play();
+            } else {
+                sprite.stop();
+            }
+        }
+    }, [isPlaying, sprite?.uid]);
+    return sprite;
+};

package/src/hooks/useCamera.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { CameraContext } from "../camera";
+export const useCamera = () => {
+    return useContext(CameraContext);
+};

package/src/hooks/useCollisionDetection.ts ADDED Viewed

@@ -0,0 +1,35 @@
+import { Container } from "pixi.js";
+import { useTickerCallback } from "./useTickerCallback";
+import { useCallback } from "react";
+type UseCollisionDetectionOptions = {
+    objectA?: Container | null;
+    objectB?: Container | null;
+    isEnabled: boolean;
+    onCollide: () => void;
+};
+export const useCollisionDetection = ({ objectA, objectB, onCollide, isEnabled }: UseCollisionDetectionOptions) => {
+    const testForAABB = useCallback(() => {
+        if (!objectA || !objectB) {
+            return;
+        }
+        const bounds1 = objectA.getBounds();
+        const bounds2 = objectB.getBounds();
+        if (
+            bounds1.x < bounds2.x + bounds2.width &&
+            bounds1.x + bounds1.width > bounds2.x &&
+            bounds1.y < bounds2.y + bounds2.height &&
+            bounds1.y + bounds1.height > bounds2.y
+        ) {
+            onCollide();
+        }
+    }, [objectA, objectB, onCollide]);
+    useTickerCallback({
+        isEnabled: isEnabled,
+        callback: testForAABB
+    });
+};

package/src/hooks/useGame.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { GameContext } from "../game-context";
+export const useGame = () => {
+    return useContext(GameContext);
+};

package/src/hooks/useGlobalEventHandler.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+export const useGlobalEventHandler = <K extends keyof DocumentEventMap>({
+    isEnabled = true,
+    event,
+    callback
+}: {
+    isEnabled?: boolean;
+    event: K;
+    callback: (e: DocumentEventMap[K]) => unknown;
+}) => {
+    useEffect(() => {
+        if (!isEnabled) {
+            return () => {};
+        }
+        const internalCallback = (e: DocumentEventMap[K]) => {
+            callback(e);
+        };
+        document.addEventListener(event, internalCallback);
+        return () => {
+            document.removeEventListener(event, internalCallback);
+        };
+    }, [isEnabled, event, callback]);
+};

package/src/hooks/useLayerContext.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { LayerContext } from "../layer/Layer.context";
+export const useLayerContext = () => {
+    return useContext(LayerContext);
+};

package/src/hooks/useObject.ts ADDED Viewed

@@ -0,0 +1,81 @@
+import { Sprite, SpriteOptions, TilingSprite } from "pixi.js";
+import { useLayerContext } from "./useLayerContext";
+import { useEffect } from "react";
+type UseObjectOptions = Omit<SpriteOptions, "texture"> & {
+    object: Sprite | TilingSprite | null;
+};
+export const useObject = ({
+    object,
+    anchor,
+    position,
+    skew,
+    scale,
+    width,
+    angle,
+    alpha,
+    visible = true
+}: UseObjectOptions) => {
+    const { addObject, removeObject } = useLayerContext();
+    useEffect(() => {
+        if (!object) {
+            return;
+        }
+        addObject(object);
+        return () => {
+            removeObject(object);
+        };
+    }, [object?.uid]);
+    useEffect(() => {
+        if (anchor !== undefined && object) {
+            object.anchor = anchor;
+        }
+    }, [anchor, object?.uid]);
+    useEffect(() => {
+        if (angle !== undefined && object) {
+            object.angle = angle;
+        }
+    }, [angle, object?.uid]);
+    useEffect(() => {
+        if (object && position !== undefined) {
+            object.position = position;
+        }
+    }, [position, object?.uid]);
+    useEffect(() => {
+        if (object && skew !== undefined) {
+            object.skew = skew;
+        }
+    }, [skew, object?.uid]);
+    useEffect(() => {
+        if (object && alpha !== undefined) {
+            object.alpha = alpha;
+        }
+    }, [alpha, object?.uid]);
+    useEffect(() => {
+        if (object && scale !== undefined) {
+            object.scale = scale;
+        }
+    }, [scale, object?.uid]);
+    useEffect(() => {
+        if (object) {
+            object.visible = visible;
+        }
+    }, [visible, object?.uid]);
+    useEffect(() => {
+        if (object && width !== undefined) {
+            object.width = width;
+        }
+    }, [width, object?.uid]);
+};

package/src/hooks/useSprite.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import { useMemo } from "react";
+import { Sprite, SpriteOptions } from "pixi.js";
+import { useTextures } from "./useTexture";
+import { useObject } from "./useObject";
+type UseSpriteOptions = Omit<SpriteOptions, "texture"> & {
+    texture: string;
+};
+export const useSprite = ({ texture = "", ...options }: UseSpriteOptions) => {
+    const textureKeys = useMemo(() => {
+        return [...(texture ? [texture] : [])];
+    }, [texture]);
+    const { isFetched } = useTextures({ keys: textureKeys });
+    const sprite = useMemo(() => {
+        if (!isFetched) {
+            return null;
+        }
+        if (texture) {
+            return Sprite.from(texture);
+        }
+        return new Sprite({});
+    }, [texture, frames, isFetched]);
+    useObject({ object: sprite, ...options });
+    return sprite;
+};

package/src/hooks/useStage.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { useContext } from "react";
+import { StageContext } from "../stage/Stage.context";
+export const useStage = () => {
+    return useContext(StageContext);
+};

package/src/hooks/useTexture.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import { useMemo } from "react";
+import { Texture } from "pixi.js";
+import { useAssetManager } from "../assets-manager";
+export const useTextures = ({ keys = [] }: { keys?: string[] }) => {
+    const { getAsset, isFetched, isFetching, isError } = useAssetManager();
+    const textures = useMemo(() => {
+        return isFetched ? keys.map((key) => getAsset(key) as Texture) : [];
+    }, [keys, isFetched, isFetching, isError]);
+    return useMemo(
+        () => ({
+            textures: textures,
+            isFetched,
+            isFetching,
+            isError
+        }),
+        [textures, isFetched, isError, isFetching]
+    );
+};

package/src/hooks/useTickerCallback.ts ADDED Viewed

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+import { TickerCallback } from "pixi.js";
+import { useWorld } from "../hooks";
+export const useTickerCallback = <T = unknown>({
+    isEnabled = true,
+    callback
+}: {
+    isEnabled?: boolean;
+    callback: TickerCallback<T>;
+}) => {
+    const { application, isInitialized } = useWorld();
+    useEffect(() => {
+        if (!isInitialized || !isEnabled) {
+            return;
+        }
+        application.ticker.add(callback);
+        return () => {
+            application.ticker.remove(callback);
+        };
+    }, [isEnabled, application, isInitialized, callback]);
+};

package/src/hooks/useTilingSprite.ts ADDED Viewed

@@ -0,0 +1,39 @@
+import { useEffect, useMemo } from "react";
+import { TilingSpriteOptions, TilingSprite } from "pixi.js";
+import { useTextures } from "./useTexture";
+import { useObject } from "./useObject";
+type UseTilingSpriteOptions = Omit<TilingSpriteOptions, "texture"> & {
+    texture: string;
+};
+export const useTilingSprite = ({ texture = "", tilePosition, ...options }: UseTilingSpriteOptions) => {
+    const textureKeys = useMemo(() => {
+        return [...(texture ? [texture] : [])];
+    }, [texture]);
+    const { isFetched } = useTextures({ keys: textureKeys });
+    const sprite = useMemo(() => {
+        if (!isFetched) {
+            return null;
+        }
+        if (texture) {
+            return TilingSprite.from(texture);
+        }
+        return new TilingSprite({});
+    }, [texture, frames]);
+    useObject({ object: sprite, ...options });
+    useEffect(() => {
+        if (tilePosition && sprite) {
+            sprite.tilePosition = tilePosition;
+        }
+    }, [tilePosition, sprite?.uid]);
+    return sprite;
+};

package/src/hooks/useWorld.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { useContext } from "react";
+import { WorldContext } from "../world/World.context";
+export const useWorld = () => {
+    return useContext(WorldContext);
+};

package/src/index.ts ADDED Viewed

@@ -0,0 +1,10 @@
+export * from "./game-context";
+export * from "./assets-manager";
+export * from "./world";
+export * from "./camera";
+export * from "./layer";
+export * from "./assets-manager";
+export * from "./game-objects";
+export * from "./physics";
+export * from "./types";
+export * from "./hooks";

package/src/layer/Layer.context.tsx ADDED Viewed

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+import { Container } from "pixi.js";
+export type LayerContextValue = {
+    addObject: (body: Container) => void;
+    removeObject: (body: Container) => void;
+};
+export const LayerContext = createContext<LayerContextValue>({} as unknown as LayerContextValue);

package/src/layer/Layer.tsx ADDED Viewed

@@ -0,0 +1,57 @@
+import React, { PropsWithChildren, useCallback, useContext, useEffect, useMemo } from "react";
+import { Container, ContainerOptions } from "pixi.js";
+import { StageContext } from "../stage/Stage.context";
+import { LayerContext, LayerContextValue } from "./Layer.context";
+export type LayerOptions = {
+    options?: Omit<ContainerOptions, "parent">;
+};
+export const Layer: React.FC<PropsWithChildren & LayerOptions> = ({ options, children }) => {
+    const { addObject: addObjectIntoStage, removeObject: removeObjectFromStaeg } = useContext(StageContext);
+    const { addObject: addObjectIntoParent, removeObject: removeObjectFromParent } = useContext(LayerContext);
+    const container = useMemo(() => {
+        return new Container(options);
+    }, [options]);
+    useEffect(() => {
+        if (addObjectIntoParent) {
+            addObjectIntoParent(container);
+            return () => {
+                removeObjectFromParent(container);
+            };
+        }
+        addObjectIntoStage(container);
+        return () => {
+            removeObjectFromStaeg(container);
+        };
+    }, [container?.uid]);
+    const addObject = useCallback(
+        (thing: Container) => {
+            container.addChild(thing);
+        },
+        [container?.uid]
+    );
+    const removeObject = useCallback(
+        (thing: Container) => {
+            container.removeChild(thing);
+        },
+        [container?.uid]
+    );
+    const conextValue = useMemo<LayerContextValue>(
+        () => ({
+            addObject,
+            removeObject
+        }),
+        [container?.uid]
+    );
+    return <LayerContext.Provider value={conextValue}>{children}</LayerContext.Provider>;
+};

package/src/layer/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from "./Layer";

package/src/physics/MatterPhysics.context.tsx ADDED Viewed

@@ -0,0 +1,100 @@
+import React, { PropsWithChildren, createContext, useEffect, useMemo, useRef, useState } from "react";
+import Matter, { Engine, Runner, World } from "matter-js";
+import { MatterPhysicsConfig, MatterPhysics } from "./types";
+export type MatterPhysicsContextProviderOptions = {
+    isRunning?: boolean;
+    config: MatterPhysicsConfig;
+};
+export const MatterPhysicsContext = createContext<MatterPhysics>({
+    config: {
+        world: {
+            width: 480,
+            height: 320
+        }
+    },
+    engine: Engine.create(),
+    runner: Runner.create(),
+    run: () => {},
+    stop: () => {},
+    addBody: () => {},
+    removeBody: () => {}
+});
+export const MatterPhysicsContextProvider: React.FC<PropsWithChildren & MatterPhysicsContextProviderOptions> = ({
+    isRunning = false,
+    children,
+    config = { world: { width: 480, height: 320 } }
+}) => {
+    const isRunningRef = useRef(false);
+    const [localConfig] = useState(config);
+    const world = useMemo(() => {
+        return World.create({
+            bounds: {
+                min: { x: 0, y: 0 },
+                max: { x: config.world.width, y: config.world.height }
+            }
+        });
+    }, [config.world]);
+    const engine = useMemo(() => {
+        return Engine.create({
+            world
+        });
+    }, [world]);
+    const runner = useMemo(() => Runner.create(), []);
+    const addBody = (body: Matter.Body | Matter.Composite) => {
+        if (engine?.world) {
+            World.add(engine?.world, body);
+        }
+    };
+    const removeBody = (body: Matter.Body | Matter.Composite) => {
+        if (engine?.world) {
+            World.remove(engine?.world, body);
+        }
+    };
+    const run = () => {
+        if (!isRunningRef.current) {
+            Runner.run(runner, engine);
+            isRunningRef.current = true;
+        }
+    };
+    const stop = () => {
+        if (isRunningRef.current) {
+            Runner.stop(runner);
+            isRunningRef.current = false;
+        }
+    };
+    const conextValue = useMemo(
+        () => ({
+            config: localConfig,
+            runner,
+            engine,
+            run,
+            stop,
+            addBody,
+            removeBody
+        }),
+        [runner, engine, localConfig]
+    );
+    useEffect(() => {
+        if (isRunning) {
+            run();
+        }
+        return () => {
+            stop();
+        };
+    }, [isRunning]);
+    return <MatterPhysicsContext.Provider value={conextValue}>{children}</MatterPhysicsContext.Provider>;
+};