@mml-io/mml-web-client 0.0.0-experimental-b4e2011-20250528 → 0.0.0-experimental-f04d840-20250612

package/build/index.js

@@ -5158,6 +5158,7 @@
       this.loadingProgressManager = loadingProgressManager;
       this.showDebugLoading = showDebugLoading;
       this.hasCompleted = false;
+      this.disposed = false;
       this.element = document.createElement("div");
       this.element.addEventListener("click", (event) => {
         event.stopPropagation();
@@ -5254,6 +5255,61 @@
       this.loadingProgressManager.addProgressCallback(this.loadingCallback);
     }
     dispose() {
+      if (this.disposed) {
+        return;
+      }
+      this.disposed = true;
+      this.loadingProgressManager.removeProgressCallback(this.loadingCallback);
+      this.element.remove();
+    }
+  };
+  var LoadingSpinner = class {
+    constructor(loadingProgressManager) {
+      this.loadingProgressManager = loadingProgressManager;
+      this.hasCompleted = false;
+      this.disposed = false;
+      this.element = document.createElement("div");
+      this.progressBarHolder = document.createElement("div");
+      this.progressBarHolder.style.position = "absolute";
+      this.progressBarHolder.style.top = "50%";
+      this.progressBarHolder.style.left = "50%";
+      this.progressBarHolder.style.transform = "translate(-50%, -50%)";
+      this.progressBarHolder.style.width = "60px";
+      this.progressBarHolder.style.height = "60px";
+      this.element.append(this.progressBarHolder);
+      this.progressBar = document.createElement("div");
+      this.progressBar.style.position = "absolute";
+      this.progressBar.style.top = "0";
+      this.progressBar.style.left = "0";
+      this.progressBar.style.width = "100%";
+      this.progressBar.style.height = "100%";
+      this.progressBar.style.border = "6px solid #f3f3f3";
+      this.progressBar.style.borderTop = "6px solid rgba(0, 0, 0, 0)";
+      this.progressBar.style.borderRadius = "50%";
+      this.progressBarHolder.append(this.progressBar);
+      this.progressBar.animate([{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }], {
+        duration: 1e3,
+        iterations: Infinity
+      });
+      this.loadingCallback = () => {
+        const [, completedLoading] = this.loadingProgressManager.toRatio();
+        if (completedLoading) {
+          if (!this.hasCompleted) {
+            this.hasCompleted = true;
+            this.dispose();
+          }
+          this.progressBar.style.display = "none";
+        } else {
+          this.progressBar.style.display = "block";
+        }
+      };
+      this.loadingProgressManager.addProgressCallback(this.loadingCallback);
+    }
+    dispose() {
+      if (this.disposed) {
+        return;
+      }
+      this.disposed = true;
       this.loadingProgressManager.removeProgressCallback(this.loadingCallback);
       this.element.remove();
     }
@@ -8176,17 +8232,33 @@
     }
   };
   var FullScreenMMLScene = class extends MMLScene {
-    constructor(showDebugLoading = true) {
+    constructor(options = {}) {
       super(document.createElement("div"));
+      this.options = options;
       this.element = document.createElement("div");
       this.element.style.width = "100%";
       this.element.style.height = "100%";
       this.element.style.position = "relative";
-      this.showDebugLoading = showDebugLoading;
+      this.showDebugLoading = options.showDebugLoading || true;
+      this.createLoadingProgressBar();
+      this.configureWindowStyling();
+    }
+    createLoadingProgressBar() {
       const loadingProgressManager = this.getLoadingProgressManager();
-      this.loadingProgressBar = new LoadingProgressBar(loadingProgressManager, this.showDebugLoading);
+      const loadingStyle = this.options.loadingStyle || "bar";
+      if (loadingStyle === "spinner") {
+        this.loadingProgressBar = new LoadingSpinner(loadingProgressManager);
+      } else {
+        this.loadingProgressBar = new LoadingProgressBar(
+          loadingProgressManager,
+          this.showDebugLoading
+        );
+      }
       this.element.append(this.loadingProgressBar.element);
-      this.configureWindowStyling();
+    }
+    resetLoadingProgressBar() {
+      this.loadingProgressBar.dispose();
+      this.createLoadingProgressBar();
     }
     configureWindowStyling() {
       document.documentElement.style.width = "100%";
@@ -66504,7 +66576,11 @@ ${DracoWorker.toString()}
         clearColor: new Color(1, 1, 1, 1)
       });
       this.camera.setPosition(0, 5, 10);
-      this.playcanvasApp.root.addChild(this.camera);
+      this.contentRoot = new Entity("contentRoot", this.playcanvasApp);
+      this.contentRoot.addChild(this.camera);
+      if (this.options.autoConnectRoot === void 0 || this.options.autoConnectRoot) {
+        this.playcanvasApp.root.addChild(this.contentRoot);
+      }
       this.setControlsType(this.options.controlsType);
       this.clickTrigger = PlayCanvasClickTrigger.init(this.playcanvasApp, this.element, this.camera);
       this.playcanvasApp.on("update", (delta) => {
@@ -66575,8 +66651,18 @@ ${DracoWorker.toString()}
       }
       this.clickTrigger.dispose();
     }
+    disconnectRoot() {
+      if (this.contentRoot.parent) {
+        this.contentRoot.parent.removeChild(this.contentRoot);
+      }
+    }
+    connectRoot() {
+      if (!this.contentRoot.parent) {
+        this.playcanvasApp.root.addChild(this.contentRoot);
+      }
+    }
     getRootContainer() {
-      return this.playcanvasApp.root;
+      return this.contentRoot;
     }
     getBoundingBoxForElement(element) {
       if (!TransformableElement.isTransformableElement(element)) {
@@ -99344,7 +99430,9 @@ void main() {
       return new Promise((resolve) => {
         this.rootContainer = new Group2();
         this.threeScene = new Scene2();
-        this.threeScene.add(this.rootContainer);
+        if (this.options.autoConnectRoot === void 0 || this.options.autoConnectRoot) {
+          this.threeScene.add(this.rootContainer);
+        }
         this.camera = new PerspectiveCamera(
           75,
           window.innerWidth / window.innerHeight,
@@ -99418,6 +99506,16 @@ void main() {
       renderer.domElement.style.pointerEvents = "none";
       return renderer;
     }
+    disconnectRoot() {
+      if (this.rootContainer.parent) {
+        this.rootContainer.parent.remove(this.rootContainer);
+      }
+    }
+    connectRoot() {
+      if (!this.rootContainer.parent) {
+        this.threeScene.add(this.rootContainer);
+      }
+    }
     start() {
       this.animationFrameRequest = requestAnimationFrame(this.animationFrameCallback);
     }