jeri
Version:
JavaScript Extended-Range Image viewer
113 lines (112 loc) • 3.75 kB
TypeScript
/// <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();
}