feat(sandbox): remove use of @arancini/systems

.changeset/cool-rocks-pump.md

@@ -2,4 +2,4 @@
 "@p2-es/sandbox": patch
 ---
 
-chore: update arancini to v6
+chore: update arancini to v6, stop using @arancini/systems

apps/p2-es-demos/src/concave.html

@@ -11,7 +11,7 @@
         <div id="app" style="width: 100%; height: 100vh;"></div>
 
         <script type="module">
-            import { Sandbox, Tools } from '@p2-es/sandbox'
+            import { Sandbox, Tool } from '@p2-es/sandbox'
             import * as p2 from 'p2-es'
 
             new Sandbox(
@@ -73,7 +73,7 @@
                         world,
                         // Enable shape drawing
                         tools: {
-                            default: Tools.POLYGON,
+                            default: Tool.POLYGON,
                         },
                     }
                 },

packages/p2-es-sandbox/src/controls.tsx

@@ -1,8 +1,8 @@
 import { Leva, button, useControls } from 'leva'
 import { ButtonInput } from 'leva/plugin'
 import React, { useEffect } from 'react'
-import { SandboxSettings, Tool, Tools, useSingletonQuery } from './ecs'
-import { SandboxSettingsStore } from './state/sandbox-settings'
+import { SandboxSettings, SandboxSettingsStore, usePhysicsWorldStore } from './state'
+import { Tool } from './tools'
 import { levaTheme } from './ui'
 
 type ButtonGroupControlsProps = {
@@ -48,7 +48,7 @@ export type ControlsProps = {
 }
 
 export const Controls = ({ scene, scenes, setScene, tool, setTool, settings, setSettings, reset }: ControlsProps) => {
-    const physicsWorld = useSingletonQuery('physicsWorld')
+    const { world: physics } = usePhysicsWorldStore()
 
     useButtonGroupControls('Scene', {
         options: scenes.map((s, idx) => ({
@@ -62,10 +62,10 @@ export const Controls = ({ scene, scenes, setScene, tool, setTool, settings, set
 
     useButtonGroupControls('Tool', {
         options: [
-            { name: 'Pick/Pan [q]', value: Tools.PICK_PAN },
-            { name: 'Polygon [d]', value: Tools.POLYGON },
-            { name: 'Circle [a]', value: Tools.CIRCLE },
-            { name: 'Rectangle [f]', value: Tools.RECTANGLE },
+            { name: 'Pick/Pan [q]', value: Tool.PICK_PAN },
+            { name: 'Polygon [d]', value: Tool.POLYGON },
+            { name: 'Circle [a]', value: Tool.CIRCLE },
+            { name: 'Rectangle [f]', value: Tool.RECTANGLE },
         ],
         current: tool,
         onChange: (value) => setTool(value as Tool),
@@ -104,12 +104,12 @@ export const Controls = ({ scene, scenes, setScene, tool, setTool, settings, set
     }, [settings.paused, settings.physicsStepsPerSecond, settings.maxSubSteps])
 
     const manualStep = () => {
-        if (!physicsWorld) return
+        if (!physics) return
 
         setSettings({ paused: true })
 
         const timeStep = 1 / settings.physicsStepsPerSecond
-        physicsWorld.step(timeStep, timeStep)
+        physics.step(timeStep, timeStep)
     }
 
     useControls(
@@ -122,7 +122,7 @@ export const Controls = ({ scene, scenes, setScene, tool, setTool, settings, set
                 reset()
             }),
         },
-        [physicsWorld, settings, reset]
+        [physics, settings, reset]
     )
 
     const [, setRendering] = useControls('Rendering', () => ({
@@ -187,19 +187,19 @@ export const Controls = ({ scene, scenes, setScene, tool, setTool, settings, set
             const key = event.key.toLowerCase()
 
             if (key === 'q') {
-                return setTool(Tools.PICK_PAN)
+                return setTool(Tool.PICK_PAN)
             }
 
             if (key === 'd') {
-                return setTool(Tools.POLYGON)
+                return setTool(Tool.POLYGON)
             }
 
             if (key === 'a') {
-                return setTool(Tools.CIRCLE)
+                return setTool(Tool.CIRCLE)
             }
 
             if (key === 'f') {
-                return setTool(Tools.RECTANGLE)
+                return setTool(Tool.RECTANGLE)
             }
 
             if (key === 'p' || key === ' ') {
@@ -236,7 +236,7 @@ export const Controls = ({ scene, scenes, setScene, tool, setTool, settings, set
         return () => {
             window.removeEventListener('keydown', handler)
         }
-    }, [physicsWorld, settings, reset])
+    }, [physics, settings, reset])
 
     return <Leva fill flat theme={levaTheme} titleBar={false} />
 }

packages/p2-es-sandbox/src/ecs/entity.ts

@@ -1,23 +1,5 @@
 import * as p2 from 'p2-es'
-import { Graphics } from 'pixi.js'
-
-export type Sprite = {
-    graphics: Graphics
-    drawnSleeping: boolean | null
-    drawnLineColor: number | null
-    drawnFillColor: number | null
-    dirty: boolean
-}
-
-export const createSprite = () => {
-    return {
-        graphics: new Graphics(),
-        drawnSleeping: null,
-        drawnLineColor: null,
-        drawnFillColor: null,
-        dirty: false,
-    }
-}
+import { Sprite } from '../pixi/sprite'
 
 export type Entity = {
     physicsBody?: p2.Body

packages/p2-es-sandbox/src/ecs/index.ts

@@ -1,6 +1,3 @@
 export * from './entity'
-export * from './context'
-export * from './pointer-system'
-export * from './renderer-systems'
-export * from './tool-systems'
 export * from './utils'
+export * from './world'

packages/p2-es-sandbox/src/ecs/utils.ts

@@ -1,16 +1,9 @@
+import { QueryFn } from 'arancini'
 import { useMemo } from 'react'
-import { useECS } from './context'
-import { Entity } from './entity'
+import { react, world } from './world'
 
-export const useSingletonQuery = <C extends keyof Entity>(component: C) => {
-    const {
-        world,
-        react: { useQuery },
-    } = useECS()
+export const useQuery = <Q extends QueryFn<any, any>>(queryFn: Q) => {
+    const query = useMemo(() => world.query(queryFn), [world])
 
-    const singletonComponentQuery = useMemo(() => world.query((e) => e.has(component)), [world])
-
-    const query = useQuery(singletonComponentQuery)
-
-    return useMemo(() => query.first?.[component] ?? null, [query.version])
+    return react.useQuery(query)
 }

packages/p2-es-sandbox/src/ecs/world.ts

@@ -0,0 +1,6 @@
+import { World } from 'arancini'
+import { createReactAPI } from 'arancini/react'
+import { Entity } from './entity'
+
+export const world = new World<Entity>()
+export const react = createReactAPI(world)

packages/p2-es-sandbox/src/index.tsx

@@ -1,22 +1,11 @@
-import { World } from 'arancini'
-import { createReactAPI } from 'arancini/react'
-import { Executor } from 'arancini/systems'
 import React from 'react'
 import * as ReactDOM from 'react-dom/client'
 import { ThemeProvider } from 'styled-components'
-import {
-    Entity,
-    PhysicsAABBRendererSystem,
-    PhysicsBodyRendererSystem,
-    PhysicsContactRendererSystem,
-    PhysicsSpringRendererSystem,
-} from './ecs'
-import { PhysicsSystem } from './ecs/physics-system'
+import { world } from './ecs'
 import { createPixiApp } from './pixi'
 import { Sandbox as SandboxComponent } from './sandbox'
 import { SandboxConfig, SandboxContext, SandboxFunction, Scenes } from './sandbox-api'
-import { useECS } from './state/ecs'
-import { usePixiStore } from './state/pixi'
+import { usePixiStore } from './state'
 import { styledComponentsTheme } from './ui'
 
 const CONSOLE_MESSAGE = `
@@ -39,7 +28,7 @@ body.addShape(new p2.Circle({
 world.addBody(body);
 `
 
-export { Tools, type Tool } from './ecs'
+export { Tool } from './tools'
 export type { SandboxConfig, SandboxContext, SandboxFunction, Scenes }
 
 export type SandboxProps = {
@@ -64,22 +53,11 @@ export class Sandbox {
 
     mount(domElement: HTMLElement): this {
         if (!this.root) {
-            const world = new World<Entity>()
-            const executor = new Executor(world)
-            const react = createReactAPI(world)
-            useECS.setState({ world, executor, react })
+            world.clear()
 
             const { destroy: destroyPixi, ...pixi } = createPixiApp()
             usePixiStore.setState(pixi)
 
-            executor.add(PhysicsSystem)
-            executor.add(PhysicsSpringRendererSystem)
-            executor.add(PhysicsContactRendererSystem)
-            executor.add(PhysicsBodyRendererSystem)
-            executor.add(PhysicsAABBRendererSystem)
-
-            executor.init()
-
             this.cleanup = () => {
                 destroyPixi()
             }
@@ -106,6 +84,8 @@ export class Sandbox {
 
     unmount(): void {
         if (this.root) {
+            world.clear()
+
             this.cleanup?.()
             this.cleanup = undefined