/// <reference types="react" />
import * as React from 'react';
import { Matrix4x4 } from '../../utils/linalg';
export declare type InputTree = InputNode | InputLeaf;
export interface InputNode {
    title: string;
    children: InputTree[];
}
export declare type InputLeaf = InputLeafImage | InputLeafLossMap;
export interface InputLeafImage {
    title: string;
    image: string;
}
export interface InputLeafLossMap {
    title: string;
    lossMap: {
        function: string;
        imageA: string;
        imageB: string;
    };
}
export interface ImageViewerState {
    activeRow: number;
    selection: string[];
    viewTransform: {
        [tonemapGroup: string]: number;
    };
    exposure: {
        [tonemapGroup: string]: number;
    };
    helpIsOpen: boolean;
    defaultTransformation: Matrix4x4;
    transformationNeedsUpdate: boolean;
    hasFocus: boolean;
}
export interface ImageViewerProps {
    data: InputTree;
    baseUrl: string;
    sortMenu: boolean;
    removeCommonPrefix: boolean;
}
export default class ImageViewer extends React.Component<ImageViewerProps, ImageViewerState> {
    static defaultProps: {
        baseUrl: string;
        sortMenu: boolean;
        removeCommonPrefix: boolean;
    };
    /** A sorted version of props.data, cached for efficiency and recomputed when props change */
    private menuData;
    /** A reference the the imageFrame element, ready once the ImageViewer is loaded */
    private imageFrame;
    /** A reference to the div element of the containing div */
    private mainContainer;
    constructor(props: ImageViewerProps);
    componentDidMount(): void;
    componentDidUpdate(): void;
    componentWillReceiveProps(nextProps: ImageViewerProps): void;
    componentWillUnmount(): void;
    setTransformation(transformation: Matrix4x4): void;
    render(): JSX.Element;
    /**
     * Select the active rows from the navigation data tree, according to the given selection
     *
     * @param tree navigation datastructure
     * @param selection array of the titles of selected items from top to bottom
     */
    private activeRows(tree, selection);
    /**
     * Recursively sort the input data
     *
     * It's a bit smart, for example bathroom-32 will come before bathroom-128,
     * and the word Color always goes first.
     * @param tree to be sored
     */
    private sortMenuRows(tree);
    /**
     * Find the image to be shown based on the current selection
     */
    private currentImage(currentSelection?);
    /**
     * Specification for the current image to load
     */
    private imageSpec(currentSelection?);
    /**
     * Navigate to a particular image
     *
     * @param rows: a list of the rows currently visible
     * @param rowIndex: the index of the row in which to switch tabs
     * @param title: the title of the requested node
     *
     * For rows > rowIndex, we select children matching the current selection titles
     * if they exist. Otherwise, we resort to the default selection (first elements).
     */
    private navigateTo(rows, rowIndex, title);
    /**
     * Make sure that the current selection is valid given the current menuData
     *
     * If a title in the selection does not exist in the respective row, take the default
     * (first) element of the row.
     * @param wishes the desired selection, which might not be valid given the selected menu items
     */
    private validateSelection(wishes, activeRow);
    /**
     * Return the titles of the first items of a sorted tree
     * @param tree a sorted navigation data structure
     */
    private getDefaultSelection(tree);
    private dumpTransformation();
    private keyboardHandler(event);
    private setFocus();
    private unsetFocus();
}