@heliguy-xyz/splat-viewer 1.0.0-rc.2 → 1.0.0-rc.4

package/dist/web-component/splat-viewer.js

@@ -140037,7 +140037,7 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	                                this.focus(result.entity);
 	                                setTimeout(() => {
 	                                    const info = this.debugInfo();
-	                                    console.log(info);
+	                                    // no-op
 	                                    if (!info.boundsRadius) {
 	                                        this.focus(result.entity);
 	                                    }
@@ -140833,44 +140833,150 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	        if (!this.app)
 	            return;
 	        const canvas = this.app.graphicsDevice.canvas;
-	        // Set the canvas resolution to match the display size with device pixel ratio
+	        // debug removed
+	        // Ensure canvas and its parent fill available space by default (non-destructive)
+	        if (!canvas.style.display)
+	            canvas.style.display = 'block';
+	        if (!canvas.style.width)
+	            canvas.style.width = '100%';
+	        if (!canvas.style.height)
+	            canvas.style.height = '100%';
+	        if (canvas.parentElement) {
+	            const ps = canvas.parentElement.style;
+	            if (!ps.width)
+	                ps.width = '100%';
+	            if (!ps.height)
+	                ps.height = '100%';
+	            // debug removed
+	        }
+	        // Helper: apply resolution and notify dependents
+	        const applyResolution = (width, height) => {
+	            if (canvas.width === width && canvas.height === height)
+	                return;
+	            // track previous size if needed in future
+	            canvas.width = width;
+	            canvas.height = height;
+	            this.app.resizeCanvas(width, height);
+	            // debug removed
+	            if (this._orbit &&
+	                this._orbit.navigationCube &&
+	                typeof this._orbit.navigationCube.onCanvasResize === 'function') {
+	                this._orbit.navigationCube.onCanvasResize();
+	                // debug removed
+	            }
+	        };
+	        // Fallback: compute from CSS box * devicePixelRatio
 	        const updateResolution = () => {
 	            const rect = canvas.getBoundingClientRect();
 	            const pixelRatio = window.devicePixelRatio || 1;
-	            // Set canvas internal resolution to match display size * pixel ratio
 	            const width = Math.floor(rect.width * pixelRatio);
 	            const height = Math.floor(rect.height * pixelRatio);
-	            if (canvas.width !== width || canvas.height !== height) {
-	                canvas.width = width;
-	                canvas.height = height;
-	                // Update PlayCanvas app resolution
-	                this.app.resizeCanvas(width, height);
-	                // Notify navigation cube about canvas resize
-	                if (this._orbit &&
-	                    this._orbit.navigationCube &&
-	                    typeof this._orbit.navigationCube.onCanvasResize ===
-	                        'function') {
-	                    this._orbit.navigationCube.onCanvasResize();
+	            // debug removed
+	            applyResolution(width, height);
+	        };
+	        // Prefer ResizeObserver entry data (devicePixelContentBoxSize when available)
+	        const updateFromEntry = (entry) => {
+	            let width = null;
+	            let height = null;
+	            const dpcb = entry.devicePixelContentBoxSize;
+	            if (dpcb && dpcb.length > 0) {
+	                width = Math.ceil(dpcb[0].inlineSize);
+	                height = Math.ceil(dpcb[0].blockSize);
+	                // debug removed
+	            }
+	            else {
+	                const cbs = entry.contentBoxSize;
+	                if (cbs && cbs.length > 0) {
+	                    const pixelRatio = window.devicePixelRatio || 1;
+	                    width = Math.ceil(cbs[0].inlineSize * pixelRatio);
+	                    height = Math.ceil(cbs[0].blockSize * pixelRatio);
+	                    // debug removed
 	                }
 	            }
+	            if (width !== null && height !== null) {
+	                applyResolution(width, height);
+	            }
+	            else {
+	                updateResolution();
+	            }
 	        };
 	        // Initial resolution setup
 	        updateResolution();
+	        // debug removed
 	        // Set up resize observer for automatic resolution updates
 	        if (window.ResizeObserver) {
-	            this._resizeObserver = new ResizeObserver(() => {
-	                updateResolution();
+	            this._resizeObserver = new ResizeObserver((entries) => {
+	                if (!entries || entries.length === 0) {
+	                    updateResolution();
+	                    return;
+	                }
+	                const canvasEntry = entries.find(e => e.target === canvas);
+	                if (canvasEntry) {
+	                    updateFromEntry(canvasEntry);
+	                }
+	                else {
+	                    // Fall back to the first entry if canvas wasn't explicitly included
+	                    if (entries.length > 0) {
+	                        const firstEntry = entries[0];
+	                        if (firstEntry) {
+	                            updateFromEntry(firstEntry);
+	                        }
+	                        else {
+	                            updateResolution();
+	                        }
+	                    }
+	                    else {
+	                        updateResolution();
+	                    }
+	                }
 	            });
 	            // Observe both the canvas and its parent container for resize events
-	            this._resizeObserver.observe(canvas);
+	            try {
+	                // Prefer device-pixel-content-box for pixel-perfect canvas sizing
+	                ;
+	                this._resizeObserver.observe(canvas, {
+	                    box: 'device-pixel-content-box',
+	                });
+	            }
+	            catch {
+	                this._resizeObserver.observe(canvas);
+	            }
+	            // debug removed
 	            if (canvas.parentElement) {
 	                this._resizeObserver.observe(canvas.parentElement);
+	                // debug removed
 	            }
 	        }
-	        else {
-	            // Fallback for browsers without ResizeObserver
-	            window.addEventListener('resize', updateResolution);
-	            this._resizeHandler = updateResolution;
+	        // Additionally listen to window resize to handle viewport changes
+	        // (e.g., when resizing dev tools). This mirrors superSplat behavior
+	        // and ensures the canvas always matches the available space.
+	        const onWindowResize = () => {
+	            updateResolution();
+	        };
+	        window.addEventListener('resize', onWindowResize);
+	        this._resizeHandler = onWindowResize;
+	    }
+	    /**
+	     * Force recalculation of canvas resolution based on current DOM size.
+	     * Useful when container layout changes are not captured by the observer.
+	     */
+	    updateCanvasResolution() {
+	        if (!this.app)
+	            return;
+	        const canvas = this.app.graphicsDevice.canvas;
+	        const rect = canvas.getBoundingClientRect();
+	        const pixelRatio = window.devicePixelRatio || 1;
+	        const width = Math.floor(rect.width * pixelRatio);
+	        const height = Math.floor(rect.height * pixelRatio);
+	        if (canvas.width !== width || canvas.height !== height) {
+	            canvas.width = width;
+	            canvas.height = height;
+	            this.app.resizeCanvas(width, height);
+	            if (this._orbit &&
+	                this._orbit.navigationCube &&
+	                typeof this._orbit.navigationCube.onCanvasResize === 'function') {
+	                this._orbit.navigationCube.onCanvasResize();
+	            }
 	        }
 	    }
 	}
@@ -140902,6 +141008,7 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	        this._config = { ...DEFAULT_CONFIG };
 	        this._isInitialized = false;
 	        this._isDestroyed = false;
+	        this._hostResizeObserver = null;
 	    }
 	    // Observed attributes that trigger attributeChangedCallback
 	    static get observedAttributes() {
@@ -141249,6 +141356,22 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	            this._canvas.setAttribute('role', 'img');
 	            this._canvas.setAttribute('aria-label', '3D Splat Viewer');
 	            this.appendChild(this._canvas);
+	            // Observe host element for size changes and force canvas resolution update
+	            try {
+	                if (window.ResizeObserver) {
+	                    this._hostResizeObserver = new ResizeObserver(() => {
+	                        // Force resolution update in core to sync canvas with host/container
+	                        try {
+	                            this._core?.updateCanvasResolution();
+	                        }
+	                        catch { }
+	                    });
+	                    this._hostResizeObserver.observe(this);
+	                    if (this.parentElement)
+	                        this._hostResizeObserver.observe(this.parentElement);
+	                }
+	            }
+	            catch { }
 	            // Update configuration from attributes
 	            this._updateConfigFromAttributes();
 	            // Initialize the core viewer
@@ -141305,6 +141428,11 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	            return;
 	        }
 	        try {
+	            // Disconnect host resize observer
+	            if (this._hostResizeObserver) {
+	                this._hostResizeObserver.disconnect();
+	                this._hostResizeObserver = null;
+	            }
 	            // Clean up core
 	            if (this._core) {
 	                this._core.destroy();
@@ -141424,7 +141552,6 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	            return;
 	        }
 	        // Stats handling will be implemented when we add stats functionality
-	        console.log('Stats change requested:', this.enableStats);
 	    }
 	    /**
 	     * Set up event listeners for the core viewer