rio/frontend/code/components/aspectRatioContainer.ts

import { ComponentBase, ComponentState } from './componentBase';
import { ComponentId } from '../dataModels';
import { getNaturalSizeInPixels } from '../utils';

export type AspectRatioContainerState = ComponentState & {
    _type_: 'AspectRatioContainer-builtin';
    content?: ComponentId;
    aspect_ratio: number;
};

export class AspectRatioContainerComponent extends ComponentBase {
    state: Required<AspectRatioContainerState>;

    private innerElement: HTMLElement;
    private childContainer: HTMLElement;

    private parentResizeObserver: ResizeObserver;
    private childResizeObserver: ResizeObserver;

    createElement(): HTMLElement {
        let element = document.createElement('div');
        element.classList.add('rio-aspect-ratio-container');

        // Add a second element to apply the child's size to
        this.innerElement = document.createElement('div');
        element.appendChild(this.innerElement);

        // Add a child container
        this.childContainer = document.createElement('div');
        this.childContainer.classList.add(
            'rio-aspect-ratio-container-child-container'
        );
        this.innerElement.appendChild(this.childContainer);

        // Listen for changes
        this.parentResizeObserver = new ResizeObserver(
            this.onParentResize.bind(this)
        );
        this.parentResizeObserver.observe(element);

        this.childResizeObserver = new ResizeObserver(
            this.onParentResize.bind(this)
        );
        this.childResizeObserver.observe(this.childContainer);

        return element;
    }

    onDestruction(): void {
        super.onDestruction();

        this.parentResizeObserver.disconnect();
        this.childResizeObserver.disconnect();
    }

    updateElement(
        deltaState: AspectRatioContainerState,
        latentComponents: Set<ComponentBase>
    ): void {
        super.updateElement(deltaState, latentComponents);

        if (deltaState.content !== undefined) {
            this.replaceOnlyChild(
                latentComponents,
                deltaState.content,
                this.childContainer
            );
        }

        if (deltaState.aspect_ratio !== undefined) {
            this.childContainer.style.aspectRatio =
                deltaState.aspect_ratio.toString();
        }
    }

    onParentResize(): void {
        // Get the parent's and child's dimensions
        let parentRect = this.element.getBoundingClientRect();
        let parentAspectRatio = parentRect.width / parentRect.height;

        // Update the child's dimensions
        if (parentAspectRatio > this.state.aspect_ratio) {
            this.childContainer.style.width = 'auto';
            this.childContainer.style.height = '100%';

            this.childContainer.style.left = '50%';
            this.childContainer.style.top = '0';
            this.childContainer.style.transform = 'translateX(-50%)';
        } else {
            this.childContainer.style.width = '100%';
            this.childContainer.style.height = 'auto';

            this.childContainer.style.left = '0';
            this.childContainer.style.top = '50%';
            this.childContainer.style.transform = 'translateY(-50%)';
        }
    }

    onChildResize(): void {
        let childElement = this.innerElement.firstElementChild as HTMLElement;
        let childNaturalSize = getNaturalSizeInPixels(childElement);
        this.innerElement.style.minWidth = `${childNaturalSize[0]}px`;
        this.innerElement.style.minHeight = `${childNaturalSize[1]}px`;
    }
}