Merge 3f7e409 into efd97c9

straker · Dec 29, 2022 · e782943 · e782943
2 parents efd97c9 + 3f7e409
commit e782943
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 26 deletions.
diff --git a/src/scene.js b/src/scene.js
@@ -1,6 +1,6 @@
 import { getContext } from './core.js';
 import GameObject from './gameObject.js';
-import { on } from './events.js';
+import { on, off } from './events.js';
 import { srOnlyStyle, addToDom, removeFromArray } from './utils.js';
 import { collides } from './helpers.js';
 
@@ -147,6 +147,15 @@ class Scene {
       ...props
     });
 
+    // create an accessible DOM node for screen readers
+    // (do this first so we can move DOM nodes in add())
+    // dn = dom node
+    let section = (this._dn = document.createElement('section'));
+    section.tabIndex = -1;
+    section.style = srOnlyStyle;
+    section.id = id;
+    section.setAttribute('aria-label', name);
+
     this.add(objects);
 
     /**
@@ -162,20 +171,10 @@ class Scene {
       render: this._rf.bind(this)
     });
 
-    let init = () => {
+    // i = init
+    this._i = () => {
+      this.context ??= getContext();
       let canvas = this.context.canvas;
-
-      // create an accessible DOM node for screen readers
-      // (do this first so we can move DOM nodes in add())
-      // dn = dom node
-      let section = (this._dn = document.createElement('section'));
-      section.tabIndex = -1;
-      section.style = srOnlyStyle;
-      section.id = id;
-      section.setAttribute('aria-label', name);
-
-      addToDom(section, canvas);
-
       let { width, height } = canvas;
       let x = width / 2;
       let y = height / 2;
@@ -187,18 +186,17 @@ class Scene {
         centerX: x,
         centerY: y,
       });
+
+      if (!this._dn.isConnected) {
+        addToDom(this._dn, canvas);
+      }
     }
 
     if (this.context) {
-      init();
+      this._i();
     }
 
-    on('init', () => {
-      this.context ??= getContext();
-      if (!this._dn) {
-        init();
-      }
-    });
+    on('init', this._i);
   }
 
   set objects(value) {
@@ -287,7 +285,8 @@ class Scene {
    * @function destroy
    */
   destroy() {
-    this._dn?.remove();
+    off('init', this._i);
+    this._dn.remove();
     this._o.map(object => object.destroy && object.destroy());
   }
 

diff --git a/test/unit/scene.spec.js b/test/unit/scene.spec.js
@@ -1,5 +1,6 @@
 import Scene, { SceneClass } from '../../src/scene.js';
 import { _reset, init, getContext, getCanvas } from '../../src/core.js';
+import { emit } from '../../src/events.js';
 import { noop, srOnlyStyle } from '../../src/utils.js';
 import { collides } from '../../src/helpers.js';
 
@@ -130,20 +131,33 @@ describe('scene', () => {
       expect(scene.camera.anchor).to.deep.equal({ x: 0.5, y: 0.5 });
     });
 
-    it('should not set dom node or camera if context is not set', () => {
+    it('should create a dom node', () => {
       _reset();
 
+      scene.destroy();
       scene = Scene({
         id: 'myId'
       });
 
-      expect(scene._dn).to.not.exist;
+      expect(scene._dn).to.exist;
+    });
+
+    it('should not add dom node to body and not set camera if context is not set', () => {
+      _reset();
+
+      scene.destroy();
+      scene = Scene({
+        id: 'myId'
+      });
+
+      expect(scene._dn.isConnected).to.be.false;
       expect(scene.camera.centerX).to.not.exist;
     });
 
     it('should set context if kontra.init is called after created', () => {
       _reset();
 
+      scene.destroy();
       scene = Scene({
         id: 'myId'
       });
@@ -162,6 +176,7 @@ describe('scene', () => {
 
       _reset();
 
+      scene.destroy();
       scene = Scene({
         id: 'myId',
         context
@@ -174,9 +189,10 @@ describe('scene', () => {
       expect(scene.context).to.equal(context);
     });
 
-    it('should set dom node and camera if kontra.init is called after created', () => {
+    it('should add dom node to body and set camera if kontra.init is called after created', () => {
       _reset();
 
+      scene.destroy();
       scene = Scene({
         id: 'myId'
       });
@@ -185,7 +201,7 @@ describe('scene', () => {
       canvas.width = canvas.height = 600;
       init(canvas);
 
-      expect(scene._dn).to.exist;
+      expect(scene._dn.isConnected).to.be.true;
       expect(scene.camera.centerX).to.exist;
     });
   });
@@ -462,6 +478,14 @@ describe('scene', () => {
 
       expect(object.destroy.called).to.be.true;
     });
+
+    it('should not re-add DOM node on init', () => {
+      let section = scene._dn;
+      scene.destroy();
+      emit('init');
+
+      expect(section.isConnected).to.be.false;
+    });
   });
 
   // --------------------------------------------------