From 58b02a7100348c6679c857851e631d569eddf90e Mon Sep 17 00:00:00 2001 From: Danny McGee Date: Thu, 11 Apr 2024 03:45:45 -0400 Subject: [PATCH] Another attempt to fix high-DPI viewport jank --- studio-web/src/lib/studio.element.ts | 11 ++++++++--- studio/src/viewport.rs | 13 ++++++++----- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/studio-web/src/lib/studio.element.ts b/studio-web/src/lib/studio.element.ts index 2759275..9d8994e 100644 --- a/studio-web/src/lib/studio.element.ts +++ b/studio-web/src/lib/studio.element.ts @@ -1,4 +1,4 @@ -import { inject } from "@storyteller/framework"; +import { inject, on } from "@storyteller/framework"; import * as studio from "@storyteller/studio"; import { type InitOptions, @@ -32,7 +32,7 @@ export class StudioElement extends LitElement { override connectedCallback(): void { super.connectedCallback(); - this.#resizeObserver = new ResizeObserver(this.#onResize.bind(this)); + this.#resizeObserver = new ResizeObserver(this._onResize.bind(this)); this.#resizeObserver.observe(this); if (!this._canvasProvider) @@ -40,6 +40,10 @@ export class StudioElement extends LitElement { if ((this.#canvas = this._canvasProvider.takeCanvas())) this.appendChild(this.#canvas); + + requestAnimationFrame(() => { + this._onResize(); + }); } override disconnectedCallback(): void { @@ -61,7 +65,8 @@ export class StudioElement extends LitElement { super.updated(changes); } - #onResize(): void { + @on("window:scene-state") + _onResize(): void { const { width, height } = this.getBoundingClientRect(); studio.resize(new ViewportSize(width, height)); diff --git a/studio/src/viewport.rs b/studio/src/viewport.rs index ce08242..cae0148 100644 --- a/studio/src/viewport.rs +++ b/studio/src/viewport.rs @@ -71,7 +71,12 @@ pub mod wasm { fn build(&self, app: &mut App) { app.add_event::().add_systems( PreUpdate, - (dispatch_resize_events, sync_window_to_viewport).chain(), + ( + dispatch_resize_events, + apply_deferred, + sync_window_to_viewport, + ) + .chain(), ); } } @@ -88,9 +93,7 @@ pub mod wasm { let ViewportSize { width, height } = event.0; let mut window = window.single_mut(); let scale_factor = window.scale_factor(); - window - .resolution - .set(width * scale_factor, height * scale_factor); + window.resolution.set(width, height); q_camera.single_mut().viewport = Some(Viewport { physical_size: UVec2::new( (width * scale_factor) as u32, @@ -98,7 +101,7 @@ pub mod wasm { ), ..Default::default() }); - info!("Viewport size: ({:.2}, {:.2})", width, height); + info!("Viewport size: ({width:.2}, {height:.2}) [{scale_factor}]"); } }