@babylonjs-toolkit/next 9.34.1 → 9.34.10

package/lib/scenemanager.js

@@ -143,7 +143,7 @@ import { UnityScrollBar } from './unityscrollbar';
 import { UnityDropdownMenu } from './unitydropdownmenu';
 import { RectAreaLight } from '@babylonjs/core/Lights/rectAreaLight';
 export class SceneManager {
-    static get Version() { return "9.34.1 - R1"; }
+    static get Version() { return "9.34.10 - R1"; }
     static get Copyright() { return "All rights reserved (c) 2024 Mackey Kinard"; }
     static IsPrecompilingShaders() {
         return SceneManager.PrecompileShaders !== false;
@@ -338,6 +338,11 @@ export class SceneManager {
             await assetsManager.loadAsync();
     }
     static ShowLoadingScreen(engine, hideLoadingUIWithEngine = true, defaultLoadingUIMarginTop = "150px") {
+        const pageCover = (LoadingScreenStages != null) ? LoadingScreenStages.FindPageCover() : null;
+        if (pageCover != null) {
+            LoadingScreenStages.AttachScreen(pageCover, defaultLoadingUIMarginTop);
+            return;
+        }
         if (engine.loadingScreen != null) {
             SceneManager._HideLoadingScreen = engine.loadingScreen.hideLoadingUI.bind(engine.loadingScreen);
             if (hideLoadingUIWithEngine === false)
@@ -348,9 +353,20 @@ export class SceneManager {
             if (anyLoadingScreen._loadingTextDiv != null && anyLoadingScreen._loadingTextDiv.style != null) {
                 anyLoadingScreen._loadingTextDiv.style.marginTop = defaultLoadingUIMarginTop;
             }
+            if (LoadingScreenStages != null)
+                LoadingScreenStages.Attach(anyLoadingScreen, defaultLoadingUIMarginTop);
         }
     }
     static HideLoadingScreen(engine, fade = true) {
+        if (LoadingScreenStages != null) {
+            const unrevealed = LoadingScreenStages.SceneToReveal(engine);
+            if (unrevealed != null) {
+                SceneManager._FadeLoadingScreen = fade;
+                SceneManager.HideSplashScreen(unrevealed);
+                return;
+            }
+            LoadingScreenStages.Detach();
+        }
         if (engine.loadingScreen != null) {
             if (fade === false) {
                 const anyLoadingScreen = engine.loadingScreen;
@@ -470,9 +486,11 @@ export class SceneManager {
         });
     }
     static RevealSplashScreen(scene) {
+        const fade = SceneManager._FadeLoadingScreen;
+        SceneManager._FadeLoadingScreen = true;
         if (scene != null && !scene.isDisposed) {
             try {
-                SceneManager.HideLoadingScreen(scene.getEngine());
+                SceneManager.HideLoadingScreen(scene.getEngine(), fade);
             }
             catch (e) {
                 console.warn(e);
@@ -490,6 +508,16 @@ export class SceneManager {
                 console.warn(e);
             }
         }
+        else if (LoadingScreenStages != null && LoadingScreenStages.IsShowing()) {
+            const engine = (scene != null) ? scene.getEngine() : EngineStore.LastCreatedEngine;
+            try {
+                if (engine != null)
+                    SceneManager.HideLoadingScreen(engine, fade);
+            }
+            catch (e) {
+                console.warn(e);
+            }
+        }
         if (typeof document === "undefined")
             return;
         try {
@@ -630,7 +658,7 @@ export class SceneManager {
         if (splash == null)
             splash = document.getElementById("xbabylonjsLoadingDiv");
         if (splash == null)
-            return false;
+            return (LoadingScreenStages != null && LoadingScreenStages.IsShowing());
         const style = window.getComputedStyle(splash);
         return style.display !== "none" && style.visibility !== "hidden" && splash.style.opacity !== "0";
     }
@@ -5511,6 +5539,7 @@ SceneManager.AllLayerMask = 0xFFFFFFFF;
 SceneManager.DefaultLayerMask = 0x0FFFFFFF;
 SceneManager.HiddenLayerMask = 0x10000000;
 SceneManager._HideLoadingScreen = null;
+SceneManager._FadeLoadingScreen = true;
 SceneManager.CVTOOLS_NAME = "CVTOOLS_unity_metadata";
 SceneManager.CVTOOLS_MESH = "CVTOOLS_babylon_mesh";
 SceneManager.CVTOOLS_HAND = "CVTOOLS_left_handed";
@@ -16290,6 +16319,167 @@ LoadingProgress.Clock = () => ((typeof performance !== "undefined") ? performanc
 LoadingProgress.Jobs = new Map();
 LoadingProgress.PostStates = new Map();
 LoadingProgress.DisposeHooks = new Set();
+export class LoadingScreenStages {
+    static Attach(loadingScreen, marginTop) {
+        if (typeof document === "undefined" || loadingScreen == null)
+            return;
+        const screens = loadingScreen._loadingDivToRenderingCanvasMap;
+        if (screens == null || typeof screens.forEach !== "function")
+            return;
+        const covers = [];
+        screens.forEach((_canvas, screen) => { covers.push(screen); });
+        LoadingScreenStages.Begin(covers, marginTop);
+    }
+    static FindPageCover() {
+        if (typeof document === "undefined" || document.getElementById("xbabylonjsSplashScreen") != null)
+            return null;
+        return document.getElementById("xbabylonjsLoadingDiv");
+    }
+    static AttachScreen(screen, marginTop) {
+        if (typeof document === "undefined" || screen == null)
+            return;
+        LoadingScreenStages.Begin([screen], marginTop);
+    }
+    static Begin(covers, marginTop) {
+        LoadingScreenStages.Detach(true);
+        if (covers.length === 0)
+            return;
+        covers.forEach((screen) => {
+            screen.style.opacity = "0.995";
+            screen.style.willChange = "opacity";
+            LoadingScreenStages.Views.push(LoadingScreenStages.CreateView(screen, marginTop));
+        });
+        LoadingScreenStages.BarState = -1;
+        LoadingScreenStages.BarProgress = null;
+        LoadingScreenStages.PreviousHostDefers = SceneManager.HostDefersSceneStatus;
+        SceneManager.HostDefersSceneStatus = true;
+        LoadingScreenStages.Observer = SceneManager.OnLoaderStatusObservable.add(LoadingScreenStages.OnLoaderStatus);
+    }
+    static IsShowing() {
+        return LoadingScreenStages.Views.some((view) => view.screen.isConnected !== false && view.screen.style.opacity !== "0");
+    }
+    static SceneToReveal(engine) {
+        if (SceneShaderWarmup == null || LoadingScreenStages.IsShowing() !== true)
+            return null;
+        const scene = (engine.scenes != null && engine.scenes.length > 0) ? engine.scenes[engine.scenes.length - 1] : null;
+        if (scene == null || scene.isDisposed || SceneShaderWarmup.IsSceneRevealed(scene))
+            return null;
+        return scene;
+    }
+    static FadeScreen(screen) {
+        if (screen == null)
+            return;
+        const onFadeEnd = (event) => {
+            if (event.target !== screen || event.propertyName !== "opacity")
+                return;
+            screen.removeEventListener("transitionend", onFadeEnd);
+            screen.remove();
+        };
+        screen.addEventListener("transitionend", onFadeEnd);
+        screen.style.opacity = "0";
+        LoadingScreenStages.Detach();
+    }
+    static GetBarState() {
+        return LoadingScreenStages.BarState;
+    }
+    static ShowStatus(status, details, progress, state) {
+        const barProgress = LoadingScreenStages.NextBarProgress(progress, state);
+        LoadingScreenStages.Views.forEach((view) => {
+            if (status != null && status !== "")
+                view.status.textContent = LoadingScreenStages.ToSentenceCase(status);
+            if (details != null)
+                view.details.textContent = LoadingScreenStages.ToSentenceCase(details);
+            if (barProgress != null) {
+                if (view.slide != null) {
+                    view.slide.cancel();
+                    view.slide = null;
+                }
+                view.fill.style.opacity = "";
+                view.fill.style.width = Math.round(barProgress * 100) + "%";
+                view.stage.setAttribute("aria-valuenow", "" + Math.round(barProgress * 100));
+            }
+        });
+    }
+    static Detach(removeStages = false) {
+        if (LoadingScreenStages.Observer != null) {
+            SceneManager.OnLoaderStatusObservable.remove(LoadingScreenStages.Observer);
+            LoadingScreenStages.Observer = null;
+            SceneManager.HostDefersSceneStatus = LoadingScreenStages.PreviousHostDefers;
+        }
+        LoadingScreenStages.Views.forEach((view) => {
+            if (view.slide != null)
+                view.slide.cancel();
+            if (removeStages === true) {
+                view.stage.remove();
+                view.details.remove();
+            }
+        });
+        LoadingScreenStages.Views = [];
+    }
+    static CreateView(screen, marginTop) {
+        const details = document.createElement("div");
+        details.style.cssText = "position:absolute;right:18px;bottom:12px;font-family:Arial;font-size:12px;color:white;text-align:right;z-index:2;opacity:0.9;letter-spacing:0.3px";
+        const stage = document.createElement("div");
+        stage.setAttribute("role", "progressbar");
+        stage.setAttribute("aria-valuemin", "0");
+        stage.setAttribute("aria-valuemax", "100");
+        stage.style.cssText = "position:absolute;left:50%;top:50%;transform:translateX(-50%);width:min(320px, calc(100% - 32px));font-family:Arial;font-size:14px;color:white;text-align:center;z-index:1";
+        stage.style.marginTop = marginTop;
+        const status = document.createElement("div");
+        status.style.cssText = "min-height:18px;margin-bottom:10px;letter-spacing:0.3px";
+        status.textContent = LoadingScreenStages.START_TEXT;
+        const track = document.createElement("div");
+        track.style.cssText = "position:relative;width:100%;height:4px;overflow:hidden;border-radius:2px;background-color:rgba(255, 255, 255, 0.15)";
+        const fill = document.createElement("div");
+        fill.style.cssText = "width:30%;height:100%;border-radius:2px;transition:width 0.25s ease-out";
+        fill.style.backgroundColor = LoadingScreenStages.BAR_COLOR;
+        track.appendChild(fill);
+        stage.appendChild(status);
+        stage.appendChild(track);
+        screen.appendChild(details);
+        screen.appendChild(stage);
+        return { screen: screen, stage: stage, status: status, details: details, fill: fill, slide: LoadingScreenStages.StartSlide(fill) };
+    }
+    static StartSlide(fill) {
+        const reduced = (typeof window.matchMedia === "function") && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        if (reduced || typeof fill.animate !== "function") {
+            fill.style.width = "100%";
+            fill.style.opacity = "0.4";
+            return null;
+        }
+        return fill.animate([{ transform: "translateX(-100%)" }, { transform: "translateX(340%)" }], { duration: LoadingScreenStages.SLIDE_DURATION_MS, iterations: Infinity, easing: "ease-in-out" });
+    }
+    static OnLoaderStatus(update) {
+        if (LoadingScreenStages.IsShowing() !== true) {
+            LoadingScreenStages.Detach();
+            return;
+        }
+        LoadingScreenStages.ShowStatus(update.status, update.details, update.progress, update.state);
+    }
+    static NextBarProgress(progress, state) {
+        if (typeof progress !== "number" || !isFinite(progress))
+            return null;
+        const value = Math.max(0, Math.min(1, progress));
+        const restart = (state !== LoadingScreenStages.BarState || !(state >= 0));
+        LoadingScreenStages.BarState = state;
+        LoadingScreenStages.BarProgress = (restart || LoadingScreenStages.BarProgress == null) ? value : Math.max(LoadingScreenStages.BarProgress, value);
+        return LoadingScreenStages.BarProgress;
+    }
+    static ToSentenceCase(text) {
+        if (text === "" || text !== text.toUpperCase())
+            return text;
+        const lower = text.toLowerCase();
+        return lower.charAt(0).toUpperCase() + lower.slice(1);
+    }
+}
+LoadingScreenStages.START_TEXT = "Loading Scene ...";
+LoadingScreenStages.BAR_COLOR = "#E0684B";
+LoadingScreenStages.SLIDE_DURATION_MS = 1200;
+LoadingScreenStages.Views = [];
+LoadingScreenStages.Observer = null;
+LoadingScreenStages.PreviousHostDefers = false;
+LoadingScreenStages.BarState = -1;
+LoadingScreenStages.BarProgress = null;
 export class MaterialSamplerBudget {
     static InstallForScene(scene) {
         if (scene == null)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@babylonjs-toolkit/next",
-    "version": "9.34.1",
+    "version": "9.34.10",
     "description": "Babylon Toolkit Runtime Library (ES6)",
     "author": "MackeyK24 <mackeyk24@gmail.com>",
     "main": "lib/index.js",