@heliguy-xyz/splat-viewer 1.0.0-rc.3 → 1.0.0-rc.5

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

@@ -104580,7 +104580,11 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	                : { x: 0, y: 0, z: 0 };
 	            this.emitFlyEvent?.('fly-camera-move', {
 	                position: { x: pos.x, y: pos.y, z: pos.z },
-	                velocity: { x: this._velocity.x, y: this._velocity.y, z: this._velocity.z },
+	                velocity: {
+	                    x: this._velocity.x,
+	                    y: this._velocity.y,
+	                    z: this._velocity.z,
+	                },
 	            });
 	            this._lastMoveEmitTime = now;
 	        }
@@ -104611,7 +104615,8 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	        document.addEventListener('mousemove', this._onMouseMove);
 	        document.addEventListener('pointerlockchange', this._onPointerLockChange);
 	        const canvas = this.app.graphicsDevice.canvas;
-	        this._onClickToLock = this._onClickToLock || (() => this._requestPointerLock());
+	        this._onClickToLock =
+	            this._onClickToLock || (() => this._requestPointerLock());
 	        canvas.addEventListener('mousedown', this._onClickToLock);
 	    };
 	    FlyCamera.prototype.deactivate = function () {
@@ -104661,7 +104666,11 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	        return {
 	            position: { x: pos.x, y: pos.y, z: pos.z },
 	            rotation: { pitch: this._pitch, yaw: this._yaw },
-	            velocity: { x: this._velocity.x, y: this._velocity.y, z: this._velocity.z },
+	            velocity: {
+	                x: this._velocity.x,
+	                y: this._velocity.y,
+	                z: this._velocity.z,
+	            },
 	            isMoving: Math.abs(this._velocity.x) +
 	                Math.abs(this._velocity.y) +
 	                Math.abs(this._velocity.z) >
@@ -104669,17 +104678,47 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	        };
 	    };
 	    FlyCamera.prototype._handleKeyDown = function (e) {
-	        this._pressed.add(e.code);
+	        const keys = [];
+	        if (e.code) {
+	            keys.push(e.code);
+	        }
+	        if (e.key) {
+	            keys.push(e.key);
+	            if (e.key.length === 1) {
+	                // Allow matching against both `KeyW` style codes and plain characters
+	                keys.push(`Key${e.key.toUpperCase()}`);
+	                keys.push(e.key.toUpperCase());
+	                keys.push(e.key.toLowerCase());
+	            }
+	        }
+	        for (const k of keys) {
+	            this._pressed.add(k);
+	        }
 	    };
 	    FlyCamera.prototype._handleKeyUp = function (e) {
-	        this._pressed.delete(e.code);
+	        const keys = [];
+	        if (e.code) {
+	            keys.push(e.code);
+	        }
+	        if (e.key) {
+	            keys.push(e.key);
+	            if (e.key.length === 1) {
+	                keys.push(`Key${e.key.toUpperCase()}`);
+	                keys.push(e.key.toUpperCase());
+	                keys.push(e.key.toLowerCase());
+	            }
+	        }
+	        for (const k of keys) {
+	            this._pressed.delete(k);
+	        }
 	    };
 	    FlyCamera.prototype._handleMouseMove = function (e) {
 	        if (!this._isPointerLocked || !this._isActive)
 	            return;
+	        // Invert horizontal (yaw) rotation: moving mouse right rotates view left, and vice versa
 	        const dx = e.movementX * this.lookSensitivity;
 	        const dy = e.movementY * this.lookSensitivity * (this.invertY ? 1 : -1);
-	        this._yaw = (this._yaw + dx) % 360;
+	        this._yaw = (this._yaw - dx) % 360;
 	        this._pitch = Math.max(-89, Math.min(89, this._pitch + dy));
 	    };
 	    FlyCamera.prototype._handlePointerLockChange = function () {
@@ -104702,15 +104741,19 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	            }
 	        }
 	    };
-	    FlyCamera.prototype._updateVelocity = function (dt) {
+	    FlyCamera.prototype._updateVelocity = function (_dt) {
 	        // Input direction (local space)
 	        const kb = this.keyBindings;
-	        const forward = this._pressed.has(kb.forward) ? 1 : 0;
-	        const backward = this._pressed.has(kb.backward) ? 1 : 0;
-	        const left = this._pressed.has(kb.left) ? 1 : 0;
-	        const right = this._pressed.has(kb.right) ? 1 : 0;
-	        const up = this._pressed.has(kb.up) ? 1 : 0;
-	        const down = this._pressed.has(kb.down) ? 1 : 0;
+	        const isPressed = (binding, fallbacks) => {
+	            const all = [binding, ...fallbacks].filter(Boolean);
+	            return all.some(k => this._pressed.has(k));
+	        };
+	        const forward = isPressed(kb.forward, ['KeyW', 'w', 'W']) ? 1 : 0;
+	        const backward = isPressed(kb.backward, ['KeyS', 's', 'S']) ? 1 : 0;
+	        const left = isPressed(kb.left, ['KeyA', 'a', 'A']) ? 1 : 0;
+	        const right = isPressed(kb.right, ['KeyD', 'd', 'D']) ? 1 : 0;
+	        const up = isPressed(kb.up, ['KeyE', 'e', 'E']) ? 1 : 0;
+	        const down = isPressed(kb.down, ['KeyQ', 'q', 'Q']) ? 1 : 0;
 	        const inputZ = forward - backward;
 	        const inputX = right - left;
 	        const inputY = up - down;
@@ -104718,17 +104761,25 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	        const planarLen = Math.hypot(inputX, inputZ);
 	        const nx = planarLen > 0 ? inputX / planarLen : 0;
 	        const nz = planarLen > 0 ? inputZ / planarLen : 0;
-	        // Effective speed with modifiers
-	        const speed = this._getEffectiveSpeed();
-	        // Compute direction vectors from current yaw/pitch
-	        const yawRad = (this._yaw * Math.PI) / 180;
-	        const pitchRad = (this._pitch * Math.PI) / 180;
-	        // Forward vector (normalized)
-	        const fwd = new Vec3(Math.cos(pitchRad) * Math.sin(yawRad), Math.sin(pitchRad), Math.cos(pitchRad) * Math.cos(yawRad));
-	        // Right vector (perpendicular to yaw on horizontal plane)
-	        const rightVec = new Vec3(Math.sin(yawRad - Math.PI / 2), 0, Math.cos(yawRad - Math.PI / 2));
-	        // Up vector (world up)
-	        const upVec = Vec3.UP.clone();
+	        // Effective speed with modifiers (scaled x2 as requested)
+	        const speed = this._getEffectiveSpeed() * 2;
+	        // Compute direction vectors from the camera entity so movement matches look direction
+	        const entity = this.entity;
+	        const fwd = entity?.forward && entity.forward.clone
+	            ? entity.forward.clone()
+	            : entity?.forward
+	                ? new Vec3(entity.forward.x, entity.forward.y, entity.forward.z)
+	                : new Vec3(0, 0, -1);
+	        const rightVec = entity?.right && entity.right.clone
+	            ? entity.right.clone()
+	            : entity?.right
+	                ? new Vec3(entity.right.x, entity.right.y, entity.right.z)
+	                : new Vec3(1, 0, 0);
+	        const upVec = entity?.up && entity.up.clone
+	            ? entity.up.clone()
+	            : entity?.up
+	                ? new Vec3(entity.up.x, entity.up.y, entity.up.z)
+	                : Vec3.UP.clone();
 	        // Target velocity in world space
 	        const target = new Vec3(0, 0, 0);
 	        target.add(fwd.mulScalar(nz * speed));
@@ -104763,7 +104814,9 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	        }
 	    };
 	    FlyCamera.prototype._applyConstraints = function () {
-	        if (!this.enableCollision && this.minHeight == null && this.maxHeight == null) {
+	        if (!this.enableCollision &&
+	            this.minHeight == null &&
+	            this.maxHeight == null) {
 	            return;
 	        }
 	        const pos = this.entity.getPosition
@@ -140037,7 +140090,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,6 +140886,7 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	        if (!this.app)
 	            return;
 	        const canvas = this.app.graphicsDevice.canvas;
+	        // debug removed
 	        // Ensure canvas and its parent fill available space by default (non-destructive)
 	        if (!canvas.style.display)
 	            canvas.style.display = 'block';
@@ -140846,18 +140900,22 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	                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
@@ -140866,6 +140924,7 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	            const pixelRatio = window.devicePixelRatio || 1;
 	            const width = Math.floor(rect.width * pixelRatio);
 	            const height = Math.floor(rect.height * pixelRatio);
+	            // debug removed
 	            applyResolution(width, height);
 	        };
 	        // Prefer ResizeObserver entry data (devicePixelContentBoxSize when available)
@@ -140876,6 +140935,7 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	            if (dpcb && dpcb.length > 0) {
 	                width = Math.ceil(dpcb[0].inlineSize);
 	                height = Math.ceil(dpcb[0].blockSize);
+	                // debug removed
 	            }
 	            else {
 	                const cbs = entry.contentBoxSize;
@@ -140883,6 +140943,7 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	                    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) {
@@ -140894,6 +140955,7 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	        };
 	        // Initial resolution setup
 	        updateResolution();
+	        // debug removed
 	        // Set up resize observer for automatic resolution updates
 	        if (window.ResizeObserver) {
 	            this._resizeObserver = new ResizeObserver((entries) => {
@@ -140922,16 +140984,53 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	                }
 	            });
 	            // 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
 	            }
 	        }
 	        // 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.
-	        window.addEventListener('resize', updateResolution);
-	        this._resizeHandler = updateResolution;
+	        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();
+	            }
+	        }
 	    }
 	}
 
@@ -140962,6 +141061,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() {
@@ -141309,6 +141409,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
@@ -141365,6 +141481,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();
@@ -141484,7 +141605,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