@mml-io/3d-web-client-core 0.0.0-experimental-0d0c89d-20240206 → 0.0.0-experimental-a3e15a8-20240207

package/build/index.js

@@ -2360,18 +2360,15 @@ var RendererStatsFolder = class {
       FPS: "0"
     };
     this.folder = parentFolder.addFolder({ title: "renderStats", expanded });
-    this.performance = this.folder.addFolder({ title: "performance", expanded: true });
-    this.defails = this.folder.addFolder({ title: "pipeline details", expanded: false });
-    this.folder.addBlade({ view: "separator" });
-    this.performance.addBinding(this.statsData, "FPS", { readonly: true });
-    this.performance.addBinding(this.statsData, "deltaTime", { readonly: true });
-    this.performance.addBinding(this.statsData, "rawDeltaTime", { readonly: true });
-    this.defails.addBinding(this.statsData, "triangles", { readonly: true });
-    this.defails.addBinding(this.statsData, "geometries", { readonly: true });
-    this.defails.addBinding(this.statsData, "textures", { readonly: true });
-    this.defails.addBinding(this.statsData, "shaders", { readonly: true });
-    this.defails.addBinding(this.statsData, "postPasses", { readonly: true });
-    this.defails.addBinding(this.statsData, "drawCalls", { readonly: true });
+    this.folder.addBinding(this.statsData, "FPS", { readonly: true });
+    this.folder.addBinding(this.statsData, "deltaTime", { readonly: true });
+    this.folder.addBinding(this.statsData, "rawDeltaTime", { readonly: true });
+    this.folder.addBinding(this.statsData, "triangles", { readonly: true });
+    this.folder.addBinding(this.statsData, "geometries", { readonly: true });
+    this.folder.addBinding(this.statsData, "textures", { readonly: true });
+    this.folder.addBinding(this.statsData, "shaders", { readonly: true });
+    this.folder.addBinding(this.statsData, "postPasses", { readonly: true });
+    this.folder.addBinding(this.statsData, "drawCalls", { readonly: true });
   }
   update(renderer, composer, timeManager) {
     const { geometries, textures } = renderer.info.memory;
@@ -2718,7 +2715,7 @@ var ToneMappingFolder = class {
 // src/tweakpane/tweakPaneStyle.ts
 var tweakPaneStyle = `
 :root {
-  --tp-base-background-color: rgba(0, 0, 0, 0.6);
+  --tp-base-background-color: rgba(12, 12, 12, 0.6);
   --tp-base-shadow-color: hsla(0, 0%, 0%, 0.2);
   --tp-button-background-color: hsla(0, 0%, 80%, 1);
   --tp-button-background-color-active: hsla(0, 0%, 100%, 1);
@@ -2739,6 +2736,9 @@ var tweakPaneStyle = `
   --tp-label-foreground-color: hsla(0, 0%, 100%, 0.6);
   --tp-monitor-background-color: hsla(0, 0%, 0%, 0.3);
   --tp-monitor-foreground-color: hsla(0, 0%, 100%, 0.3);
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 .tp-brkv {
@@ -2748,28 +2748,40 @@ var tweakPaneStyle = `
 }
 
 .tp-dfwv {
+  z-index: 100;
   color: white;
-  backdrop-filter: blur(12px);
-  width: 360px !important;
+  width: 600px !important;
   display: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
+.tp-fldv {
+  margin: 1px 0px 0px 0px !important;
+}
+
+.tp-fldv_b {
+  overflow: visible !important;
+}
+
 .tp-fldv_t {
-  font-size: 11px;
-  background-color: rgba(0, 0, 0, 0.1);
+  font-size: 13px;
+  font-weight: 900;
+  color: #ffffff;
+  background-color: rgba(70, 70, 70, 0.3);
+  border-top: 1px solid rgba(210, 210, 210, 0.1);
+  border-radius: 3px;
 }
 
 .tp-lblv_l {
-  font-size: 11px;
+  font-size: 12px;
   padding-left: 0px !important;
   padding-right: 0px !important;
 }
 
 .tp-lblv_v {
-  width: 180px;
+  width: 150px;
 }
 
 .tp-sldtxtv_t {
@@ -2777,9 +2789,13 @@ var tweakPaneStyle = `
 }
 
 .tp-sglv_i {
-  font-size: 11px;
+  font-size: 12px;
   color: rgba(255, 255, 255, 0.7);
 }
+
+.tp-ckbv_w {
+  border: 1px solid rgba(200, 200, 250, 0.2);
+}
 `;
 
 // src/tweakpane/TweakPane.ts
@@ -2788,9 +2804,13 @@ var TweakPane = class {
     this.renderer = renderer;
     this.scene = scene;
     this.composer = composer;
-    this.gui = new Pane();
     this.saveVisibilityInLocalStorage = true;
     this.guiVisible = false;
+    const appWrapper = document.getElementById("app");
+    const tweakPaneWrapper = document.createElement("div");
+    tweakPaneWrapper.id = "tweakpane-panel";
+    appWrapper.appendChild(tweakPaneWrapper);
+    this.gui = new Pane({ container: tweakPaneWrapper });
     this.gui.registerPlugin(EssentialsPlugin);
     if (this.saveVisibilityInLocalStorage) {
       const localStorageGuiVisible = localStorage.getItem("guiVisible");
@@ -2817,21 +2837,22 @@ var TweakPane = class {
     this.toneMappingFolder.folder.hidden = rendererValues.toneMapping === 5 ? false : true;
     this.export = this.gui.addFolder({ title: "import / export", expanded: false });
     window.addEventListener("keydown", this.processKey.bind(this));
-    this.setupGUIListeners.bind(this)();
     this.setupRenderPane = this.setupRenderPane.bind(this);
-  }
-  processKey(e) {
-    if (e.key === "p")
-      this.toggleGUI();
+    this.setupGUIListeners.bind(this)();
   }
   setupGUIListeners() {
     const gui = this.gui;
     const paneElement = gui.containerElem_;
-    paneElement.style.display = this.guiVisible ? "unset" : "none";
+    paneElement.style.right = this.guiVisible ? "0px" : "-450px";
+    this.gui.element.addEventListener("mouseenter", () => setTweakpaneActive(true));
     this.gui.element.addEventListener("mousedown", () => setTweakpaneActive(true));
     this.gui.element.addEventListener("mouseup", () => setTweakpaneActive(false));
     this.gui.element.addEventListener("mouseleave", () => setTweakpaneActive(false));
   }
+  processKey(e) {
+    if (e.key === "p")
+      this.toggleGUI();
+  }
   setupRenderPane(composer, normalPass, ppssaoEffect, ppssaoPass, n8aopass, toneMappingEffect, toneMappingPass, brightnessContrastSaturation, bloomEffect, gaussGrainEffect, hasLighting, sun, setHDR, setAmbientLight, setFog) {
     this.rendererFolder.setupChangeEvent(
       this.scene,
@@ -2903,10 +2924,10 @@ var TweakPane = class {
     input.click();
   }
   toggleGUI() {
+    this.guiVisible = !this.guiVisible;
     const gui = this.gui;
     const paneElement = gui.containerElem_;
-    paneElement.style.display = this.guiVisible ? "none" : "unset";
-    this.guiVisible = !this.guiVisible;
+    paneElement.style.right = this.guiVisible ? "0px" : "-450px";
     if (this.saveVisibilityInLocalStorage) {
       localStorage.setItem("guiVisible", this.guiVisible === true ? "true" : "false");
     }