improve initial scene resize

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,

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."""

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([

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."""

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 {