fix(gameObject): move / remove dom nodes when add / remove children

straker · Apr 17, 2024 · e6cdcb2 · e6cdcb2
1 parent a7157fd
commit e6cdcb2
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "test": "karma start --single-run",
     "test:watch": "karma start",
     "test:permutations": "node test/permutations",
-    "test:ts": "tsc test/typings/*.ts",
+    "test:ts": "tsc test/typings/*.ts --noEmit",
     "test:debug": "karma start --debug",
     "eslint": "eslint ./{src,test}/",
     "build": "gulp build",

diff --git a/src/gameObject.js b/src/gameObject.js
@@ -2,7 +2,12 @@ import { getContext } from './core.js';
 import Updatable from './updatable.js';
 import { on } from './events.js';
 import { rotatePoint, clamp } from './helpers.js';
-import { noop, removeFromArray } from './utils.js';
+import {
+  noop,
+  removeFromArray,
+  addToDom,
+  getAllNodes
+} from './utils.js';
 
 /**
  * The base class of most renderable classes. Handles things such as position, rotation, anchor, and the update and render life cycle.
@@ -578,6 +583,11 @@ class GameObject extends Updatable {
       child.parent = this;
       child._pc = child._pc || noop;
       child._pc();
+
+      // dn = dom node
+      if (this._dn) {
+        this._dn.append(...getAllNodes(child));
+      }
     });
   }
 
@@ -593,6 +603,12 @@ class GameObject extends Updatable {
       if (removeFromArray(this.children, child)) {
         child.parent = null;
         child._pc();
+
+        if (this._dn) {
+          getAllNodes(child).map(node => {
+            addToDom(node, this.context.canvas);
+          });
+        }
       }
     });
   }

diff --git a/src/scene.js b/src/scene.js
@@ -5,30 +5,11 @@ import {
   srOnlyStyle,
   focusParams,
   addToDom,
-  removeFromArray
+  removeFromArray,
+  getAllNodes
 } from './utils.js';
 import { collides } from './helpers.js';
 
-/**
- * Recursively get all objects HTML nodes.
- * @param {Object} object - Root object.
- *
- * @returns {Object[]} All nested HTML nodes.
- */
-function getAllNodes(object) {
-  let nodes = [];
-
-  if (object._dn) {
-    nodes.push(object._dn);
-  } else if (object.children) {
-    object.children.map(child => {
-      nodes = nodes.concat(getAllNodes(child));
-    });
-  }
-
-  return nodes;
-}
-
 /**
  * A scene object for organizing a group of objects that will update and render together.
  *

diff --git a/src/utils.js b/src/utils.js
@@ -42,3 +42,23 @@ export function removeFromArray(array, item) {
     return true;
   }
 }
+
+/**
+ * Recursively get all objects HTML nodes.
+ * @param {Object} object - Root object.
+ *
+ * @returns {Object[]} All nested HTML nodes.
+ */
+export function getAllNodes(object) {
+  let nodes = [];
+
+  if (object._dn) {
+    nodes.push(object._dn);
+  } else if (object.children) {
+    object.children.map(child => {
+      nodes = nodes.concat(getAllNodes(child));
+    });
+  }
+
+  return nodes;
+}
diff --git a/test/unit/gameObject.spec.js b/test/unit/gameObject.spec.js
@@ -751,6 +751,40 @@ describe(
             expect(child.world.x).to.equal(40);
             expect(child.world.y).to.equal(60);
           });
+
+          it('should move dom nodes', () => {
+            let child = GameObject({
+              x: 10,
+              y: 20,
+              _dn: document.createElement('button')
+            });
+            gameObject._dn = document.createElement('div');
+            document.body.appendChild(gameObject._dn);
+            gameObject.addChild(child);
+
+            expect(child._dn.parentNode).to.equal(gameObject._dn);
+          });
+
+          it('should move nested dom nodes', () => {
+            let child = GameObject({
+              x: 10,
+              y: 20
+            });
+            let grandchild = GameObject({
+              x: 10,
+              y: 20,
+              _dn: document.createElement('button')
+            });
+            child.addChild(grandchild);
+
+            gameObject._dn = document.createElement('div');
+            document.body.appendChild(gameObject._dn);
+            gameObject.addChild(child);
+
+            expect(grandchild._dn.parentNode).to.equal(
+              gameObject._dn
+            );
+          });
         } else {
           it('should not have addChild', () => {
             expect(gameObject.addChild).to.not.exist;
@@ -830,6 +864,43 @@ describe(
             expect(child.world.x).to.equal(10);
             expect(child.world.y).to.equal(20);
           });
+
+          it('should remove dom nodes', () => {
+            let child = GameObject({
+              x: 10,
+              y: 20,
+              _dn: document.createElement('button')
+            });
+            gameObject._dn = document.createElement('div');
+            document.body.appendChild(gameObject._dn);
+            gameObject.addChild(child);
+            gameObject.removeChild(child);
+
+            expect(child._dn.parentNode).to.not.equal(gameObject._dn);
+          });
+
+          it('should remove nested dom nodes', () => {
+            let child = GameObject({
+              x: 10,
+              y: 20
+            });
+            let grandchild = GameObject({
+              x: 10,
+              y: 20,
+              _dn: document.createElement('button')
+            });
+            child.addChild(grandchild);
+            gameObject.removeChild(child);
+
+            gameObject._dn = document.createElement('div');
+            document.body.appendChild(gameObject._dn);
+            gameObject.addChild(child);
+            gameObject.removeChild(child);
+
+            expect(grandchild._dn.parentNode).to.not.equal(
+              gameObject._dn
+            );
+          });
         } else {
           it('should not have removeChild', () => {
             expect(gameObject.removeChild).to.not.exist;