Moves canvas initialization logic from a component to the scene. This…

src/components/index.js

@@ -26,7 +26,6 @@ require('./visible');
 require('./vive-controls');
 require('./wasd-controls');
 
-require('./scene/canvas');
 require('./scene/debug');
 require('./scene/embedded');
 require('./scene/inspector');

src/core/scene/a-scene.js

@@ -39,7 +39,6 @@ module.exports.AScene = registerElement('a-scene', {
   prototype: Object.create(AEntity.prototype, {
     defaultComponents: {
       value: {
-        'canvas': '',
         'inspector': '',
         'keyboard-shortcuts': '',
         'screenshot': '',
@@ -68,10 +67,9 @@ module.exports.AScene = registerElement('a-scene', {
         this.isPlaying = false;
         this.originalHTML = this.innerHTML;
         this.renderTarget = null;
-        this.addEventListener('render-target-loaded', function () {
-          this.setupRenderer();
-          this.resize();
-        });
+        setupCanvas(this);
+        this.setupRenderer();
+        this.resize();
         this.addFullScreenStyles();
         initPostMessageAPI(this);
       },
@@ -224,13 +222,14 @@ module.exports.AScene = registerElement('a-scene', {
     enterVR: {
       value: function (fromExternal) {
         var self = this;
+        var effect = this.effect;
 
         // Don't enter VR if already in VR.
         if (this.is('vr-mode')) { return Promise.resolve('Already in VR.'); }
 
         // Enter VR via WebVR API.
         if (!fromExternal && (this.checkHeadsetConnected() || this.isMobile)) {
-          return this.effect.requestPresent().then(enterVRSuccess, enterVRFailure);
+          return effect && effect.requestPresent().then(enterVRSuccess, enterVRFailure) || Promise.reject(new Error('VREffect not initialized'));
         }
 
         // Either entered VR already via WebVR API or VR not supported.
@@ -431,7 +430,9 @@ module.exports.AScene = registerElement('a-scene', {
 
     setupRenderer: {
       value: function () {
-        var renderer = this.renderer = new THREE.WebGLRenderer({
+        var renderer;
+
+        renderer = this.renderer = new THREE.WebGLRenderer({
           canvas: this.canvas,
           antialias: shouldAntiAlias(this),
           alpha: true
@@ -659,4 +660,40 @@ function shouldAntiAlias (sceneEl) {
   // Default not AA for mobile.
   return !sceneEl.isMobile;
 }
+
+function setupCanvas (sceneEl) {
+  var canvasEl;
+
+  canvasEl = document.createElement('canvas');
+  canvasEl.classList.add('a-canvas');
+  // Mark canvas as provided/injected by A-Frame.
+  canvasEl.dataset.aframeCanvas = true;
+  sceneEl.appendChild(canvasEl);
+
+  document.addEventListener('fullscreenchange', onFullScreenChange);
+  document.addEventListener('mozfullscreenchange', onFullScreenChange);
+  document.addEventListener('webkitfullscreenchange', onFullScreenChange);
+
+  // Prevent overscroll on mobile.
+  canvasEl.addEventListener('touchmove', function (event) { event.preventDefault(); });
+
+  // Set canvas on scene.
+  sceneEl.canvas = canvasEl;
+  sceneEl.emit('render-target-loaded', {target: canvasEl});
+  // For unknown reasons a synchronous resize does not work on desktop when
+  // entering/exiting fullscreen.
+  setTimeout(bind(sceneEl.resize, sceneEl), 0);
+
+  function onFullScreenChange () {
+    var fullscreenEl =
+      document.fullscreenElement ||
+      document.mozFullScreenElement ||
+      document.webkitFullscreenElement;
+    // No fullscren element === exit fullscreen
+    if (!fullscreenEl) { sceneEl.exitVR(); }
+    document.activeElement.blur();
+    document.body.focus();
+  }
+}
+
 module.exports.shouldAntiAlias = shouldAntiAlias;  // For testing.

tests/core/scene/a-scene.test.js

@@ -380,12 +380,16 @@ suite('a-scene (without renderer)', function () {
     });
   });
 
-  suite('reload', function () {
+  suite.only('reload', function () {
     test('reload scene innerHTML to original value', function () {
+      var canvasEl;
       var sceneEl = this.el;
       sceneEl.innerHTML = 'NEW';
       sceneEl.reload();
-      assert.equal(sceneEl.innerHTML, '');
+      assert.equal(sceneEl.children.length, 1);
+      canvasEl = sceneEl.querySelector('canvas');
+      assert.equal(canvasEl.getAttribute('class'), 'a-canvas');
+      assert.equal(canvasEl.getAttribute('data-aframe-canvas'), 'true');
     });
 
     test('reloads the scene and pauses', function () {
@@ -605,6 +609,16 @@ suite('scenes', function () {
   });
 });
 
+suite('setupCanvas', function () {
+  test('adds canvas to a-scene element', function () {
+    var el = this.sceneEl = document.createElement('a-scene');
+    el.canvas = undefined;
+    assert.notOk(el.canvas);
+    el.setupCanvas();
+    assert.ok(el.canvas);
+  });
+});
+
 suite('shouldAntiAlias', function () {
   var sceneEl;