From b87eafd821d93701ebca631c7b7083865e369c2b Mon Sep 17 00:00:00 2001
From: Falko Schindler <falko@zauberzeug.com>
Date: Fri, 30 Aug 2024 21:37:36 +0200
Subject: [PATCH] improve initial scene resize

---
 nicegui/elements/scene.js      | 5 ++++-
 nicegui/elements/scene.py      | 1 +
 nicegui/elements/scene_view.js | 7 ++++++-
 nicegui/elements/scene_view.py | 2 ++
 nicegui/static/nicegui.css     | 4 ++++
 5 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/nicegui/elements/scene.js b/nicegui/elements/scene.js
index c1228caa7..eae8c0caa 100644
--- a/nicegui/elements/scene.js
+++ b/nicegui/elements/scene.js
@@ -52,7 +52,7 @@ function texture_material(texture) {
 
 export default {
   template: `
-    <div style="position:relative">
+    <div style="position:relative" data-initializing>
       <canvas style="position:relative"></canvas>
       <div style="position:absolute;pointer-events:none;top:0"></div>
       <div style="position:absolute;pointer-events:none;top:0"></div>
@@ -213,6 +213,7 @@ export default {
 
   beforeDestroy() {
     window.removeEventListener("resize", this.resize);
+    window.removeEventListener("DOMContentLoaded", this.resize);
   },
 
   methods: {
@@ -463,6 +464,8 @@ export default {
       this.camera.updateProjectionMatrix();
     },
     init_objects(data) {
+      this.resize();
+      this.$el.removeAttribute("data-initializing");
       this.is_initialized = true;
       for (const [
         type,
diff --git a/nicegui/elements/scene.py b/nicegui/elements/scene.py
index e1e227884..b7b2a7019 100644
--- a/nicegui/elements/scene.py
+++ b/nicegui/elements/scene.py
@@ -117,6 +117,7 @@ def __init__(self,
         self.on('dragstart', self._handle_drag)
         self.on('dragend', self._handle_drag)
         self._props['drag_constraints'] = drag_constraints
+        self._classes.append('nicegui-scene')
 
     def on_click(self, callback: Callable[..., Any]) -> Self:
         """Add a callback to be invoked when a 3D object is clicked."""
diff --git a/nicegui/elements/scene_view.js b/nicegui/elements/scene_view.js
index 32df65d15..b2865c929 100644
--- a/nicegui/elements/scene_view.js
+++ b/nicegui/elements/scene_view.js
@@ -3,7 +3,7 @@ import "tween";
 
 export default {
   template: `
-    <div style="position:relative">
+    <div style="position:relative" data-initializing>
       <canvas style="position:relative"></canvas>
     </div>`,
 
@@ -96,9 +96,14 @@ export default {
 
   beforeDestroy() {
     window.removeEventListener("resize", this.resize);
+    window.removeEventListener("DOMContentLoaded", this.resize);
   },
 
   methods: {
+    init() {
+      this.resize();
+      this.$el.removeAttribute("data-initializing");
+    },
     move_camera(x, y, z, look_at_x, look_at_y, look_at_z, up_x, up_y, up_z, duration) {
       if (this.camera_tween) this.camera_tween.stop();
       this.camera_tween = new TWEEN.Tween([
diff --git a/nicegui/elements/scene_view.py b/nicegui/elements/scene_view.py
index 30bf1b2f9..247fc4ca5 100644
--- a/nicegui/elements/scene_view.py
+++ b/nicegui/elements/scene_view.py
@@ -46,6 +46,7 @@ def __init__(self,
         self._click_handlers = [on_click] if on_click else []
         self.on('init', self._handle_init)
         self.on('click3d', self._handle_click)
+        self._classes.append('nicegui-scene-view')
 
     def on_click(self, callback: Callable[..., Any]) -> Self:
         """Add a callback to be invoked when a 3D object is clicked."""
@@ -55,6 +56,7 @@ def on_click(self, callback: Callable[..., Any]) -> Self:
     def _handle_init(self, e: GenericEventArguments) -> None:
         with self.client.individual_target(e.args['socket_id']):
             self.move_camera(duration=0)
+            self.run_method('init')
 
     async def initialized(self) -> None:
         """Wait until the scene is initialized."""
diff --git a/nicegui/static/nicegui.css b/nicegui/static/nicegui.css
index 9888123e7..4f197b386 100644
--- a/nicegui/static/nicegui.css
+++ b/nicegui/static/nicegui.css
@@ -255,6 +255,10 @@ h6.q-timeline__title {
   height: 10em;
   background-color: AliceBlue;
 }
+.nicegui-scene[data-initializing],
+.nicegui-scene-view[data-initializing] {
+  visibility: hidden;
+}
 
 /* CodeMirror */
 .nicegui-codemirror .cm-editor.cm-focused {