fix: refactor size observer for immediate resizing (#543)

Summary:
This PR fixes a glitch where the canvas would look stretched for a moment when
resizing the viewport. The PixelSizeObserver relied on the animation loop
calling getAndResetChanged() for resizing which introduced a one frame delay.
I added a callback instead of waiting for the next animation frame to mitigate it.

Author: shlomnissan

packages/core/src/idetik.ts

@@ -112,7 +112,13 @@ export class Idetik {
         sizeDependents.push(viewport.element);
       }
     }
-    this.sizeObserver_ = new PixelSizeObserver(sizeDependents);
+    this.sizeObserver_ = new PixelSizeObserver(sizeDependents, () => {
+      this.renderer_.updateSize();
+      for (const viewport of this.viewports_) {
+        viewport.updateSize();
+        this.renderer_.render(viewport);
+      }
+    });
   }
 
   public get renderedObjects() {
@@ -156,11 +162,6 @@ export class Idetik {
   private animate(timestamp?: DOMHighResTimeStamp) {
     if (this.stats_) this.stats_.begin();
 
-    // Must resize before render b/c changing canvas coordinate space clears it.
-    if (this.sizeObserver_.getAndResetChanged()) {
-      this.updateSize();
-    }
-
     for (const viewport of this.viewports_) {
       this.renderer_.render(viewport);
     }
@@ -190,11 +191,4 @@ export class Idetik {
       this.lastAnimationId_ = undefined;
     }
   }
-
-  private updateSize() {
-    this.renderer_.updateSize();
-    for (const viewport of this.viewports_) {
-      viewport.updateSize();
-    }
-  }
 }

packages/core/src/utilities/pixel_size_observer.ts

@@ -7,10 +7,11 @@ export class PixelSizeObserver {
   private resizeObserver_?: ResizeObserver;
   private mediaQuery_?: MediaQueryList;
   private onMediaQueryChange_?: () => void;
-  private changed_ = false;
+  private onChange_: () => void;
 
-  constructor(elements: ReadonlyArray<HTMLElement> = []) {
+  constructor(elements: ReadonlyArray<HTMLElement> = [], onChange: () => void) {
     this.elements_ = elements;
+    this.onChange_ = onChange;
   }
 
   public connect() {
@@ -21,8 +22,9 @@ export class PixelSizeObserver {
       );
       return;
     }
+
     this.resizeObserver_ = new ResizeObserver(() => {
-      this.changed_ = true;
+      this.onChange_();
     });
 
     for (const element of this.elements_) {
@@ -32,12 +34,6 @@ export class PixelSizeObserver {
     this.startDevicePixelRatioObserver();
   }
 
-  public getAndResetChanged() {
-    const wasChanged = this.changed_;
-    this.changed_ = false;
-    return wasChanged;
-  }
-
   private startDevicePixelRatioObserver() {
     // this media query needs to be updated after a change is detected, so we use a one-time
     // event listener that re-registers itself with the new value
@@ -46,7 +42,7 @@ export class PixelSizeObserver {
       `(resolution: ${window.devicePixelRatio}dppx)`
     );
     this.onMediaQueryChange_ = () => {
-      this.changed_ = true;
+      this.onChange_();
       this.startDevicePixelRatioObserver();
     };
     this.mediaQuery_.addEventListener("change", this.onMediaQueryChange_, {