assign elements a stacking layer

ptcrealitylab · Apr 24, 2023 · a3c875c · a3c875c
1 parent c3afc38
commit a3c875c
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
-Original file line number
+Diff line change
@@ Expand Up / @@ -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';
             }
         }
@@ Expand Down @@