diff --git a/content_scripts/TimelineController.js b/content_scripts/TimelineController.js index 84aa879a..87f6c277 100644 --- a/content_scripts/TimelineController.js +++ b/content_scripts/TimelineController.js @@ -24,6 +24,7 @@ createNameSpace('realityEditor.videoPlayback'); // set up the View and subscribe to events from the view (buttons pressed, scrollbars moved, etc) this.view = new realityEditor.videoPlayback.TimelineView(document.body); + realityEditor.gui.stackingOrder.addToLayer(this.view.timelineContainer, realityEditor.gui.LAYERS.GUI_BUTTONS); this.setupUserInteractions(); } /** diff --git a/content_scripts/VirtualCamera.js b/content_scripts/VirtualCamera.js index 6c0e86c9..4a75529a 100644 --- a/content_scripts/VirtualCamera.js +++ b/content_scripts/VirtualCamera.js @@ -120,6 +120,7 @@ import * as THREE from '../../thirdPartyCode/three/three.module.js'; normalModeControls2.innerHTML = 'MMB/RMB+Alt - pan, scroll wheel - zoom'; this.normalModePrompt.appendChild(normalModeControls2); document.body.appendChild(this.normalModePrompt); + realityEditor.gui.stackingOrder.addToLayer(this.normalModePrompt, realityEditor.gui.LAYERS.GUI_MODALS); setTimeout(() => {this.normalModePrompt.style.opacity = 0}, 3000); // add fly mode prompt this.flyModePrompt = document.createElement('div'); @@ -137,6 +138,7 @@ import * as THREE from '../../thirdPartyCode/three/three.module.js'; flyModeControls2.innerHTML = 'W/A/S/D - move, SHIFT - speed up'; this.flyModePrompt.appendChild(flyModeControls2); document.body.appendChild(this.flyModePrompt); + realityEditor.gui.stackingOrder.addToLayer(this.flyModePrompt, realityEditor.gui.LAYERS.GUI_MODALS); } switchMode() { if (this.isFlying) { diff --git a/content_scripts/desktopAdapter.js b/content_scripts/desktopAdapter.js index 21612671..8ae5a8f8 100644 --- a/content_scripts/desktopAdapter.js +++ b/content_scripts/desktopAdapter.js @@ -729,7 +729,7 @@ window.DEBUG_DISABLE_DROPDOWNS = false; }; zoneDropdown = new realityEditor.gui.dropdown.Dropdown('zoneDropdown', textStates, {left: '30px', top: '30px'}, document.body, true, onZoneSelectionChanged, onZoneExpandedChanged); - + realityEditor.gui.stackingOrder.addToLayer(zoneDropdown.dom, realityEditor.gui.LAYERS.GUI_BUTTONS); // not used anymore? zoneDropdown.dom.style.display = 'none'; } } diff --git a/content_scripts/desktopCamera.js b/content_scripts/desktopCamera.js index 69b083e0..27c7c64d 100644 --- a/content_scripts/desktopCamera.js +++ b/content_scripts/desktopCamera.js @@ -184,10 +184,12 @@ createNameSpace('realityEditor.device.desktopCamera'); interactionCursor = document.createElement('img'); interactionCursor.id = 'interactionCursor'; document.body.appendChild(interactionCursor); + realityEditor.gui.stackingOrder.addToLayer(interactionCursor, realityEditor.gui.LAYERS.GUI_POINTER); staticInteractionCursor = document.createElement('img'); staticInteractionCursor.id = 'staticInteractionCursor'; document.body.appendChild(staticInteractionCursor); + realityEditor.gui.stackingOrder.addToLayer(staticInteractionCursor, realityEditor.gui.LAYERS.GUI_POINTER); document.addEventListener('pointermove', function(e) { pointerPosition.x = e.clientX; @@ -385,6 +387,7 @@ createNameSpace('realityEditor.device.desktopCamera'); }; objectDropdown = new realityEditor.gui.dropdown.Dropdown('objectDropdown', textStates, {width: '400px', left: '310px', top: '30px'}, document.body, true, onObjectSelectionChanged, onObjectExpandedChanged); + realityEditor.gui.stackingOrder.addToLayer(objectDropdown.dom, realityEditor.gui.LAYERS.GUI_BUTTONS); // not used anymore? objectDropdown.addSelectable('origin', 'World Origin'); diff --git a/content_scripts/desktopRenderer.js b/content_scripts/desktopRenderer.js index 9de983d0..415bf0f3 100644 --- a/content_scripts/desktopRenderer.js +++ b/content_scripts/desktopRenderer.js @@ -268,6 +268,7 @@ import { UNIFORMS, MAX_VIEW_FRUSTUMS } from '../../src/gui/ViewFrustum.js'; // add the Reality Zone background behind everything else document.body.insertBefore(backgroundCanvas, document.body.childNodes[0]); + realityEditor.gui.stackingOrder.addToLayer(backgroundCanvas, realityEditor.gui.LAYERS.BACKGROUND); realityEditor.gui.getMenuBar().addCallbackToItem(realityEditor.gui.ITEM.ModelVisibility, (value) => { if (!gltf) { return; } diff --git a/content_scripts/desktopStats.js b/content_scripts/desktopStats.js index 2b0040f3..268761d5 100644 --- a/content_scripts/desktopStats.js +++ b/content_scripts/desktopStats.js @@ -44,6 +44,7 @@ createNameSpace('realityEditor.device.desktopStats'); stats.dom.position = 'absolute'; stats.dom.style.top = realityEditor.device.environment.variables.screenTopOffset + 'px'; document.body.appendChild(stats.dom); + realityEditor.gui.stackingOrder.addToLayer(stats.dom, realityEditor.gui.LAYERS.GUI_BUTTONS); stats.dom.style.left = (window.innerWidth - stats.dom.getBoundingClientRect().width) + 'px'; imagesPerSecondElement = document.createElement('div'); diff --git a/content_scripts/setupMenuBar.js b/content_scripts/setupMenuBar.js index a9e80ab0..ff8420a2 100644 --- a/content_scripts/setupMenuBar.js +++ b/content_scripts/setupMenuBar.js @@ -162,6 +162,7 @@ createNameSpace('realityEditor.gui'); menuBar.addItemToMenu(MENU.Help, showDeveloper); document.body.appendChild(menuBar.domElement); + realityEditor.gui.stackingOrder.addToLayer(menuBar.domElement, realityEditor.gui.LAYERS.GUI_MENUS); // not used anymore? // Offset certain UI elements that align to the top of the screen, such as the envelope X button realityEditor.device.environment.variables.screenTopOffset = menuBar.domElement.getBoundingClientRect().height;