| 1 | import React from 'react'; // eslint-disable-line import/no-unresolved
|
| 2 | import VivViewer from './VivViewer';
|
| 3 | import { DetailView, OverviewView } from '../views';
|
| 4 |
|
| 5 | /**
|
| 6 | * This component provides a component for an overview-detail VivViewer of an image (i.e picture-in-picture).
|
| 7 | * @param {Object} props
|
| 8 | * @param {Array} props.sliderValues List of [begin, end] values to control each channel's ramp function.
|
| 9 | * @param {Array} props.colorValues List of [r, g, b] values for each channel.
|
| 10 | * @param {Array} props.channelIsOn List of boolean values for each channel for whether or not it is visible.
|
| 11 | * @param {string} props.colormap String indicating a colormap (default: ''). The full list of options is here: https://github.com/glslify/glsl-colormap#glsl-colormap
|
| 12 | * @param {Object} props.loader Loader to be used for fetching data. It must have the properies `dtype`, `numLevels`, and `tileSize` and implement `getTile` and `getRaster`.
|
| 13 | * @param {Array} props.loaderSelection Selection to be used for fetching data.
|
| 14 | * @param {Object} props.overview Allows you to pass settings into the OverviewView: { scale, margin, position, minimumWidth, maximumWidth,
|
| 15 | * boundingBoxColor, boundingBoxOutlineWidth, viewportOutlineColor, viewportOutlineWidth}.
|
| 16 | * @param {Boolean} props.overviewOn Whether or not to show the OverviewView.
|
| 17 | * @param {Object} props.hoverHooks Object including the allowable hooks - right now only accepting a function with key handleValue like { handleValue: (valueArray) => {} }
|
| 18 | * @param {boolean} props.isLensOn Whether or not to use the lens.
|
| 19 | * @param {number} props.lensSelection Numeric index of the channel to be focused on by the lens.
|
| 20 | * @param {number} props.lensRadius Pixel radius of the lens (default: 100).
|
| 21 | * @param {number} props.lensBorderColor RGB color of the border of the lens (default [255, 255, 255]).
|
| 22 | * @param {number} props.lensBorderRadius Percentage of the radius of the lens for a border (default 0.02).
|
| 23 | */
|
| 24 |
|
| 25 | const PictureInPictureViewer = props => {
|
| 26 | const {
|
| 27 | loader,
|
| 28 | sliderValues,
|
| 29 | colorValues,
|
| 30 | channelIsOn,
|
| 31 | initialViewState,
|
| 32 | colormap,
|
| 33 | overview,
|
| 34 | overviewOn,
|
| 35 | loaderSelection,
|
| 36 | hoverHooks,
|
| 37 | isLensOn = false,
|
| 38 | lensSelection,
|
| 39 | lensRadius = 100,
|
| 40 | lensBorderColor = [255, 255, 255],
|
| 41 | lensBorderRadius = 0.02
|
| 42 | } = props;
|
| 43 | const detailViewState = { ...initialViewState, id: 'detail' };
|
| 44 | const detailView = new DetailView({ initialViewState: detailViewState });
|
| 45 | const layerConfig = {
|
| 46 | loader,
|
| 47 | sliderValues,
|
| 48 | colorValues,
|
| 49 | channelIsOn,
|
| 50 | loaderSelection,
|
| 51 | colormap,
|
| 52 | isLensOn,
|
| 53 | lensSelection,
|
| 54 | lensRadius,
|
| 55 | lensBorderColor,
|
| 56 | lensBorderRadius
|
| 57 | };
|
| 58 | const views = [detailView];
|
| 59 | const layerProps = [layerConfig];
|
| 60 | if (overviewOn && loader) {
|
| 61 | const overviewViewState = { ...initialViewState, id: 'overview' };
|
| 62 | const overviewView = new OverviewView({
|
| 63 | initialViewState: overviewViewState,
|
| 64 | loader,
|
| 65 | detailHeight: initialViewState.height,
|
| 66 | detailWidth: initialViewState.width,
|
| 67 | ...overview
|
| 68 | });
|
| 69 | views.push(overviewView);
|
| 70 | layerProps.push(layerConfig);
|
| 71 | }
|
| 72 | if (!loader) return null;
|
| 73 | return (
|
| 74 | <VivViewer layerProps={layerProps} views={views} hoverHooks={hoverHooks} />
|
| 75 | );
|
| 76 | };
|
| 77 |
|
| 78 | export default PictureInPictureViewer;
|