fix Image displaying stuff outside of the svg viewbox and corner_radi…

…us not working reliably
naveed1232 · Aug 8, 2024 · ea8e396 · ea8e396
1 parent b3af6db
commit ea8e396
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 4 deletions.
diff --git a/frontend/code/components/image.ts b/frontend/code/components/image.ts
@@ -20,6 +20,7 @@ export class ImageComponent extends ComponentBase {
     state: Required<ImageState>;
 
     private imageElement: HTMLImageElement;
+    private resizeObserver: ResizeObserver;
 
     createElement(): HTMLElement {
         let element = document.createElement('div');
@@ -36,9 +37,16 @@ export class ImageComponent extends ComponentBase {
         this.imageElement.onload = this._onLoad.bind(this);
         this.imageElement.onerror = this._onError.bind(this);
 
+        this.resizeObserver = new ResizeObserver(this._updateSize.bind(this));
+        this.resizeObserver.observe(element);
+
         return element;
     }
 
+    onDestruction(): void {
+        this.resizeObserver.disconnect();
+    }
+
     updateElement(
         deltaState: ImageState,
         latentComponents: Set<ComponentBase>
@@ -64,6 +72,8 @@ export class ImageComponent extends ComponentBase {
         if (deltaState.fill_mode !== undefined) {
             imgElement.style.objectFit =
                 FILL_MODE_TO_OBJECT_FIT[deltaState.fill_mode];
+
+            this._updateSize();
         }
 
         if (deltaState.corner_radius !== undefined) {
@@ -80,10 +90,41 @@ export class ImageComponent extends ComponentBase {
 
     private _onLoad(): void {
         this.imageElement.classList.remove('rio-content-loading');
+        this._updateSize();
+    }
 
-        // Browsers are dumb and render content outside of the SVG viewbox if
-        // the <img> element is too large. So we can't set `width/height: 100%`
-        // as we usually would.
+    private _updateSize(): void {
+        // We need to resize the `<img>` element to the size of the image,
+        // because:
+        // 1. It ensures that `corner_radius` is always visible, even if too
+        //    much space has been allocated
+        // 2. Browsers are dumb and render content outside of the SVG viewbox if
+        //    the <img> element is too large
+        if (this.state.fill_mode === 'fit') {
+            let rect = this.element.getBoundingClientRect();
+            let aspectRatioAvailable = rect.width / rect.height;
+            let aspectRatioImage =
+                this.imageElement.naturalWidth /
+                this.imageElement.naturalHeight;
+
+            let scaleFactor =
+                aspectRatioAvailable > aspectRatioImage
+                    ? rect.height / this.imageElement.naturalHeight
+                    : rect.width / this.imageElement.naturalWidth;
+
+            let imgWidth = Math.round(
+                this.imageElement.naturalWidth * scaleFactor
+            );
+            let imgHeight = Math.round(
+                this.imageElement.naturalHeight * scaleFactor
+            );
+
+            this.imageElement.style.width = `${imgWidth}px`;
+            this.imageElement.style.height = `${imgHeight}px`;
+        } else {
+            this.imageElement.style.width = '100%';
+            this.imageElement.style.height = '100%';
+        }
     }
 
     private _onError(event: string | Event): void {

diff --git a/rio/app_server/fastapi_server.py b/rio/app_server/fastapi_server.py
@@ -137,7 +137,7 @@ def __init__(
             # openapi_url="/openapi.json" if debug_mode else None,
             # docs_url="/docs" if debug_mode else None,
             # redoc_url="/redoc" if debug_mode else None,
-            lifespan=__class__._lifespan,
+            lifespan=__class__._lifespan,  # type: ignore (wtf?)
         )
         AbstractAppServer.__init__(
             self,