mod: Component and SceneModule .add .remove

src/components/__tests__/components.spec.js

@@ -52,8 +52,6 @@ app.start();
   category.forEach(component => {
     test(component, () => {
       const element = new WHS[component]();
-      expect.assertions(1);
-
       app.add(element).then(() => {
         expect(app.children).toContain(element);
       });

src/core/Component.js

@@ -1,7 +1,7 @@
 import {extend, transformData} from '../utils/index';
 import {ModuleSystem} from './ModuleSystem';
 import {ModuleManager} from './ModuleManager';
-import {ManagerError} from './errors';
+import {ManagerError, CompositionError} from './errors';
 
 /**
  * @class Component
@@ -146,41 +146,45 @@ class Component extends ModuleSystem {
    * @return {Promise} Resolved when action is done.
    * @memberof module:core.Component
    */
-  add(object) {
-    object.parent = this;
-
-    return new Promise((resolve, reject) => {
-      this.defer(() => {
-        object.defer(() => {
-          const {native} = object;
-          if (!native) reject();
+  async add(object) {
+    if (object.parent) await object.parent.remove(object);
 
-          const addPromise = this.applyBridge({onAdd: object}).onAdd;
+    await this.wait();
+    await object.wait();
 
-          const resolver = () => {
-            this.native.add(native);
-            this.children.push(object);
+    if (!object.native) {
+      throw new CompositionError(
+        'Component',
+        'there is no object.native',
+        this
+      );
+    }
 
-            resolve(object);
-          };
+    object.parent = this;
+    await this.applyBridge({onAdd: object}).onAdd;
+    this.native.add(object.native);
+    this.children.push(object);
 
-          if (addPromise instanceof Promise) addPromise.then(resolver);
-          else resolver();
-        });
-      });
-    });
+    return object;
   }
 
   /**
    * @method remove
    * @instance
    * @description Remove a child `Component`.
    * @param {Component} object - Component that should be a **child** of this Component.
+   * @return {Promise} Resolved when action is done.
    * @memberof module:core.Component
    */
-  remove(object) {
+  async remove(object) {
+    if (object.parent !== this) return;
+
+    await this.wait();
+    await object.wait();
+
     object.parent = null;
     this.native.remove(object.native);
+    this.children.splice(this.children.indexOf(object), 1);
   }
 
   /**

src/core/__tests__/Component.spec.js

@@ -55,3 +55,17 @@ test('.applyModule()', () => {
 test('.applyBridge()', () => {
   expect(component.applyBridge({hello: 'world'}).hello).toBe('world');
 });
+
+test('.add() & .remove()', async () => {
+  const box = new WHS.Box();
+  const group = new WHS.Group();
+  expect(group.children.length).toBe(0);
+  await group.add(box);
+  expect(group.children.length).toBe(1);
+  await group.add(box);
+  expect(group.children.length).toBe(1);
+  await group.remove(box);
+  expect(group.children.length).toBe(0);
+  await group.remove(box);
+  expect(group.children.length).toBe(0);
+});

src/modules/__tests__/modules.spec.js

@@ -1,7 +1,11 @@
 import '../../polyfill';
 import * as WHS from '../../index';
+import {
+  Scene,
+} from 'three';
 import {FogModule} from '../app/FogModule';
 import gl from 'gl';
+import { Box } from '../../index';
 
 const app = new WHS.App();
 const modules = {};
@@ -16,6 +20,43 @@ test('SceneModule', () => {
   modules.scene = new WHS.SceneModule();
 });
 
+test('SceneModule .add() & .remove()', async () => {
+  const a = new WHS.App([
+    new WHS.SceneModule(),
+  ]);
+  const b = new WHS.Box();
+  const g = new WHS.Group();
+
+  expect(a.children.length).toBe(0);
+  await a.add(g);
+  expect(a.children.length).toBe(1);
+  await a.add(g);
+  expect(a.children.length).toBe(1);
+  await a.add(b);
+  expect(a.children.length).toBe(2);
+  await g.add(b);
+  expect(a.children.length).toBe(1);
+  expect(g.children.length).toBe(1);
+  await a.remove(g);
+  expect(a.children.length).toBe(0);
+});
+
+test('SceneModule .setScene() & .getScene()', async () => {
+  const a = new WHS.App([
+    new WHS.SceneModule(),
+  ]);
+  const b = new WHS.Box();
+  expect(a.children.length).toBe(0);
+  await a.add(b);
+  expect(a.children.length).toBe(1);
+  const oldS = a.getScene();
+  const s = new Scene();
+  a.setScene(s);
+  expect(a.children.length).toBe(0);
+  a.setScene(oldS);
+  expect(a.children.length).toBe(1);
+})
+
 test('DefineModule', () => {
   modules.camera = new WHS.DefineModule('camera', new WHS.PerspectiveCamera());
 });

src/modules/app/SceneModule.js

@@ -1,7 +1,9 @@
 import {
-  Scene
+  Scene,
 } from 'three';
 
+const SYMBOL_CHILDREN_FOR_SCENE = Symbol('SYMBOL_CHILDREN_FOR_SCENE')
+
 /**
  * @class SceneModule
  * @category modules/app
@@ -18,40 +20,51 @@ export class SceneModule {
   }
 
   integrate(self) {
-    this.children = [];
-
-    this.add = function (object) {
-      object.parent = this;
-
-      return new Promise((resolve, reject) => {
-        object.defer(() => {
-          const {native} = object;
-          if (!native) reject();
-
-          const addPromise = this.applyBridge({onAdd: object}).onAdd;
-
-          const resolver = () => {
-            self.scene.add(native);
-            this.children.push(object);
-
-            resolve(object);
-          };
-
-          if (addPromise instanceof Promise)
-            addPromise.then(resolver);
-          else resolver();
-        });
-      });
-    };
-
-    this.remove = function (object) {
-      object.parent = null;
-      self.scene.remove(object.native);
-    };
-
-    this.setScene = function (scene) {
-      self.scene = scene;
-      this.manager.set('scene', scene);
-    };
+    Object.assign(
+      this,
+      {
+        async add(object) {
+          if (object.parent) await object.parent.remove(object);
+
+          await object.wait();
+
+          if (!object.native) {
+            throw new CompositionError(
+              'SceneModule',
+              'there is no object.native',
+              this
+            );
+          }
+
+          object.parent = this;
+          await this.applyBridge({onAdd: object}).onAdd;
+          self.scene.add(object.native);
+          this.children.push(object);
+
+          return object;
+        },
+        async remove(object) {
+          if (object.parent !== this) return;
+
+          await object.wait();
+
+          object.parent = null;
+          self.scene.remove(object.native);
+          this.children.splice(this.children.indexOf(object), 1);
+        },
+        _setScene(scene) {
+          this.children = scene[SYMBOL_CHILDREN_FOR_SCENE] = scene[SYMBOL_CHILDREN_FOR_SCENE] || []
+          self.scene = scene;
+        },
+        setScene(scene) {
+          this._setScene(scene);
+          this.manager.set('scene', scene);
+        },
+        getScene() {
+          return self.scene;
+        },
+      },
+    );
+    if (self.scene) this._setScene(self.scene);
   }
 }