dialog improvements

frontend/code/components/componentBase.ts

@@ -7,7 +7,7 @@ import {
     ClickHandlerArguments,
     ClickHandler,
 } from '../eventHandling';
-import { ComponentId, RioScrollBehavior } from '../dataModels';
+import { ComponentId } from '../dataModels';
 import { insertWrapperElement, replaceElement } from '../utils';
 import { devToolsConnector } from '../app';
 import { DialogContainerComponent } from './dialog_container';
@@ -69,7 +69,7 @@ export abstract class ComponentBase {
 
     // Any dialogs attached to this component. When this component disappears,
     // the dialogs go with it.
-    ownedDialogs: DialogContainerComponent[] = [];
+    public ownedDialogs: DialogContainerComponent[] = [];
 
     constructor(id: ComponentId, state: Required<ComponentState>) {
         this.id = id;

frontend/code/components/dialog_container.ts

@@ -1,5 +1,6 @@
 import { recursivelyDeleteComponent } from '../componentManagement';
 import { ComponentId } from '../dataModels';
+import { markEventAsHandled } from '../eventHandling';
 import { callRemoteMethodDiscardResponse } from '../rpc';
 import { commitCss } from '../utils';
 import { ComponentBase, ComponentState } from './componentBase';
@@ -8,8 +9,8 @@ export type DialogContainerState = ComponentState & {
     _type_: 'DialogContainer-builtin';
     content?: ComponentId;
     owning_component_id?: ComponentId;
-    modal?: boolean;
-    user_closable?: boolean;
+    is_modal?: boolean;
+    is_user_closable?: boolean;
 };
 
 export class DialogContainerComponent extends ComponentBase {
@@ -32,8 +33,10 @@ export class DialogContainerComponent extends ComponentBase {
 
         // Listen for outside clicks
         element.addEventListener('click', (event) => {
+            markEventAsHandled(event);
+
             // Is the dialog user-closable?
-            if (!this.state.user_closable) {
+            if (!this.state.is_user_closable) {
                 return;
             }
 
@@ -83,7 +86,7 @@ export class DialogContainerComponent extends ComponentBase {
         this.replaceOnlyChild(latentComponents, deltaState.content);
 
         // Modal
-        if (deltaState.modal) {
+        if (deltaState.is_modal) {
             this.element.style.pointerEvents = 'auto';
             this.element.style.removeProperty('background-color');
         } else {

frontend/code/components/image.ts

@@ -33,9 +33,7 @@ export class ImageComponent extends ComponentBase {
         this.imageElement = document.createElement('img');
         element.appendChild(this.imageElement);
 
-        this.imageElement.onload = () => {
-            this.imageElement.classList.remove('rio-content-loading');
-        };
+        this.imageElement.onload = this._onLoad.bind(this);
         this.imageElement.onerror = this._onError.bind(this);
 
         return element;
@@ -80,6 +78,14 @@ export class ImageComponent extends ComponentBase {
         }
     }
 
+    private _onLoad(): void {
+        this.imageElement.classList.remove('rio-content-loading');
+
+        // 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 _onError(event: string | Event): void {
         this.imageElement.classList.remove('rio-content-loading');