fix #60 (#62)

tulipjs · Jun 24, 2024 · 26140e3 · 26140e3
1 parent 4b31f1b
commit 26140e3
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 52 deletions.
diff --git a/examples/example/src/app.component.ts b/examples/example/src/app.component.ts
@@ -38,9 +38,8 @@ export const appComponent: AsyncComponent<unknown, Mutable> = async () => {
     },
     alpha: 0.25,
   });
-  $world.add($plane);
 
-  for (let i = 0; i < 400; i++) {
+  for (let i = 0; i < 300; i++) {
     const _fly = flyComponent({
       label: `ball`,
       props: {
@@ -59,7 +58,7 @@ export const appComponent: AsyncComponent<unknown, Mutable> = async () => {
   const $player = await playerComponent();
   $player.setPosition({ x: 500, y: 1000 });
 
-  $world.add($player);
+  $world.add($player, $plane);
   $container.add($world);
 
   return $container.getComponent(appComponent);

diff --git a/examples/example/src/fly.component.ts b/examples/example/src/fly.component.ts
@@ -49,7 +49,6 @@ export const flyComponent: Component<Props, Mutable> = (props) => {
       y: position,
     },
   });
-  container.add(circle2);
 
   const circle3 = circle({
     props: {
@@ -63,7 +62,8 @@ export const flyComponent: Component<Props, Mutable> = (props) => {
       y: -position,
     },
   });
-  container.add(circle3);
+
+  container.add(circle2, circle3);
 
   return container.getComponent(flyComponent);
 };
diff --git a/src/components/core/container.component.ts b/src/components/core/container.component.ts
@@ -44,20 +44,24 @@ export const container: Component<ContainerProps, ContainerMutable, false> = (
     for (const childComponent of childList) childComponent.$destroy();
   };
 
-  const add = (displayObjectMutable: DisplayObjectMutable<any>) => {
-    displayObjectMutable.getFather = () => mutable;
-
-    container.addChild(displayObjectMutable.getDisplayObject());
-    childList.push(displayObjectMutable);
-    global.$addComponent(displayObjectMutable);
+  const add = (...displayObjectsMutables: DisplayObjectMutable<any>[]) => {
+    displayObjectsMutables.forEach((displayObjectMutable) => {
+      displayObjectMutable.getFather = () => mutable;
+
+      container.addChild(displayObjectMutable.getDisplayObject());
+      childList.push(displayObjectMutable);
+      global.$addComponent(displayObjectMutable);
+    });
   };
 
-  const remove = (displayObjectMutable: DisplayObjectMutable<any>) => {
-    displayObjectMutable.getFather = null;
+  const remove = (...displayObjectsMutables: DisplayObjectMutable<any>[]) => {
+    displayObjectsMutables.forEach((displayObjectMutable) => {
+      displayObjectMutable.getFather = null;
 
-    container.removeChild(displayObjectMutable.getDisplayObject());
-    childList = childList.filter((child) => child !== displayObjectMutable);
-    global.$removeComponent(displayObjectMutable);
+      container.removeChild(displayObjectMutable.getDisplayObject());
+      childList = childList.filter((child) => child !== displayObjectMutable);
+      global.$removeComponent(displayObjectMutable);
+    });
   };
 
   const setBody = (body: BodyMutable) => {

diff --git a/src/components/core/world.component.ts b/src/components/core/world.component.ts
@@ -34,43 +34,47 @@ export const world: Component<WorldProps, WorldMutable, false> = (
       : undefined,
   });
 
-  const add = (displayObject: DisplayObjectMutable<DisplayObject>) => {
-    const body = displayObject.getBody();
-
-    displayObjectList.push(displayObject);
-
-    if (!body) {
-      console.warn(
-        `No body available on display object '${displayObject.getLabel()}'`,
-      );
-    } else {
-      const _body = body.$getBody();
-
-      //add contact materials
-      for (const displayObject of displayObjectList) {
-        const displayObjectBody = displayObject.getBody();
-        if (!displayObjectBody) continue;
-
-        $world.addContactMaterial(body.$getContactBody(displayObjectBody));
+  const add = (...displayObjects: DisplayObjectMutable<DisplayObject>[]) => {
+    displayObjects.forEach((displayObject) => {
+      const body = displayObject.getBody();
+
+      displayObjectList.push(displayObject);
+
+      if (!body) {
+        console.warn(
+          `No body available on display object '${displayObject.getLabel()}'`,
+        );
+      } else {
+        const _body = body.$getBody();
+
+        //add contact materials
+        for (const displayObject of displayObjectList) {
+          const displayObjectBody = displayObject.getBody();
+          if (!displayObjectBody) continue;
+
+          $world.addContactMaterial(body.$getContactBody(displayObjectBody));
+        }
+        $world.addBody(_body);
+
+        // _world.addContactMaterial(
+        //   new p2.ContactMaterial(material, material, { restitution: 1 }),
+        // );
       }
-      $world.addBody(_body);
-
-      // _world.addContactMaterial(
-      //   new p2.ContactMaterial(material, material, { restitution: 1 }),
-      // );
-    }
 
-    addContainer(displayObject);
+      addContainer(displayObject);
+    });
   };
 
-  const remove = (displayObject: DisplayObjectMutable<DisplayObject>) => {
-    displayObjectList = displayObjectList.filter(
-      (_, index) => displayObjectList.indexOf(displayObject) !== index,
-    );
-    const body = displayObject.getBody();
-    if (body) $world.removeBody(body.$getBody());
+  const remove = (...displayObjects: DisplayObjectMutable<DisplayObject>[]) => {
+    displayObjects.forEach((displayObject) => {
+      displayObjectList = displayObjectList.filter(
+        (_, index) => displayObjectList.indexOf(displayObject) !== index,
+      );
+      const body = displayObject.getBody();
+      if (body) $world.removeBody(body.$getBody());
 
-    removeContainer(displayObject);
+      removeContainer(displayObject);
+    });
   };
 
   const setPhysicsEnabled = (enabled: boolean) => {

diff --git a/src/types/components/container.types.ts b/src/types/components/container.types.ts
@@ -7,6 +7,6 @@ import { Container } from "../pixi.types";
 export type ContainerProps = {} & DisplayObjectProps;
 
 export type ContainerMutable = {
-  add: (displayObjectMutable: DisplayObjectMutable<any>) => void;
-  remove: (displayObjectMutable: DisplayObjectMutable<any>) => void;
+  add: (...displayObjectsMutables: DisplayObjectMutable<any>[]) => void;
+  remove: (...displayObjectsMutables: DisplayObjectMutable<any>[]) => void;
 } & DisplayObjectMutable<Container>;
diff --git a/src/types/components/world.types.ts b/src/types/components/world.types.ts
@@ -15,7 +15,7 @@ export type WorldProps = {
 } & ContainerProps;
 
 export type WorldMutable = {
-  add: (displayObject: ComponentMutable) => void;
-  remove: (displayObject: ComponentMutable) => void;
+  add: (...displayObject: ComponentMutable[]) => void;
+  remove: (...displayObject: ComponentMutable[]) => void;
   setPhysicsEnabled: (enabled: boolean) => void;
 } & ContainerMutable;