@metacell/geppetto-meta-ui
Version:
React components from geppetto-meta to create neuroscience applications and visualize data.
355 lines • 11.2 kB
JavaScript
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
import React, { useEffect, useRef, useState } from 'react';
import { PropTypes } from 'prop-types';
import BaseDicomViewer from '@metacell/geppetto-meta-ui/dicom-viewer/DicomViewer';
import { faThLarge, faSquare, faExchangeAlt, faExpandAlt, faCompressAlt } from '@fortawesome/free-solid-svg-icons';
var DicomViewer = function DicomViewer(props) {
var _useState = useState(props.fullScreen),
_useState2 = _slicedToArray(_useState, 2),
fullScreen = _useState2[0],
setFullScreen = _useState2[1];
var _useState3 = useState(props.mode),
_useState4 = _slicedToArray(_useState3, 2),
mode = _useState4[0],
setMode = _useState4[1];
var _useState5 = useState(props.orientation),
_useState6 = _slicedToArray(_useState5, 2),
orientation = _useState6[0],
setOrientation = _useState6[1];
useEffect(function () {
setFullScreen(props.fullScreen);
}, [props.fullScreen]);
useEffect(function () {
setMode(props.mode);
}, [props.mode]);
useEffect(function () {
setOrientation(props.orientation);
}, [props.orientation]);
var changeMode = function changeMode() {
if (mode === 'single_view') {
setMode('quad_view');
} else {
setMode('single_view');
}
};
var changeOrientation = function changeOrientation() {
var newOrientation;
switch (orientation) {
case 'coronal':
newOrientation = 'sagittal';
break;
case 'sagittal':
newOrientation = 'axial';
break;
case 'axial':
newOrientation = '3d';
break;
case '3d':
default:
newOrientation = 'coronal';
break;
}
setOrientation(newOrientation);
};
var restore = function restore() {
setFullScreen(false);
};
var goFullScreen = function goFullScreen() {
setFullScreen(true);
};
var goToSingleView = function goToSingleView(event) {
var id = event.target.id;
var orientation = null;
switch (id) {
case '0':
orientation = '3d';
break;
case '1':
orientation = 'sagittal';
break;
case '2':
orientation = 'axial';
break;
case '3':
orientation = 'coronal';
break;
}
if (orientation != null) {
setMode('single_view');
setOrientation(orientation);
}
};
var toggleMode = function toggleMode(event) {
if (mode === 'single_view') {
changeMode();
} else {
goToSingleView(event);
}
};
return /*#__PURE__*/React.createElement(BaseDicomViewer, _extends({}, props, {
orientation: orientation,
mode: mode,
fullScreen: fullScreen,
onCtrlClick: props.onCtrlClick || toggleMode,
toolbarOptions: {
innerDivStyles: {
backgroundColor: 'rgb(0,0,0,0);'
}
},
toolbarButtons: {
single_view: [{
icon: faThLarge,
tooltip: 'Multi View',
action: changeMode
}, {
icon: faExchangeAlt,
tooltip: 'Change Orientation',
action: changeOrientation
}],
quad_view: [{
icon: faSquare,
tooltip: 'Single View',
action: changeMode
}],
fullScreen: [{
icon: faCompressAlt,
tooltip: 'Restore',
action: restore
}],
minimized: [{
icon: faExpandAlt,
tooltip: 'Maximize',
action: goFullScreen
}]
},
loaderOptions: {
showLoader: true,
message: 'Loading for un'
}
}));
};
DicomViewer.defaultProps = {
onLoaded: function onLoaded() {},
mode: 'quad_view',
orientation: '3d',
onClick: 'goToPoint',
onCtrlClick: undefined,
onShiftClick: undefined,
onDoubleClick: undefined,
onRightClick: undefined,
showDownloadButton: false,
toolbarOptions: null,
loaderOptions: {
showLoader: true
}
};
DicomViewer.propTypes = BaseDicomViewer.propTypes;
DicomViewer.propTypes = {
/**
* Component identifier
*/
id: PropTypes.string.isRequired,
/**
* Path/URL to file (f.e. "/path/to/my/file.gz")
*/
data: PropTypes.string.isRequired,
/**
* Initial view mode: 'single_view', 'quad_view' or undefined
* If undefined, the component state is used.
* If a value different from undefined is used, this version overwrite the internal state.
*/
mode: PropTypes.oneOf(['single_view', 'quad_view', undefined]),
/**
* Display the dicom viewer in full screen
*/
fullScreen: PropTypes.bool,
/**
* Initial orientation view: '3d', 'coronal', 'axial' or 'sagittal'
* If undefined, the component state is used.
* If a value different from undefined is used, this version overwrite the internal state.
*/
orientation: PropTypes.oneOf(['3d', 'coronal', 'axial', 'sagittal', undefined]),
/**
* Action to perform on click: 'goToPoint' or custom action, default is 'goToPoint'
*/
onClick: PropTypes.oneOfType([PropTypes.oneOf(['goToPoint']), PropTypes.func]),
/**
* Action to performe on Ctrl click: 'goToPoint' or custom action, default is a "go to single view" action
*/
onCtrlClick: PropTypes.oneOfType([PropTypes.oneOf(['goToPoint']), PropTypes.func]),
/**
* Action to performe on Shift click: 'goToPoint' or custom action, default is undefined
*/
onShiftClick: PropTypes.oneOfType([PropTypes.oneOf(['goToPoint']), PropTypes.func]),
/**
* Action to performe on right click: 'goToPoint' or custom action, default is undefined
*/
onRightClick: PropTypes.oneOfType([PropTypes.oneOf(['goToPoint']), PropTypes.func]),
/**
* Action to performe on double click: 'goToPoint' or custom action, default is undefined
*/
onDoubleClick: PropTypes.oneOfType([PropTypes.oneOf(['goToPoint']), PropTypes.func]),
/**
* Enables segmentation LUT
*/
applySegmentationLUT: PropTypes.bool,
/**
* Bool that defines the showing or not of the download button
*/
showDownloadButton: PropTypes.bool,
/**
* Callback function to be called after load is complete
*/
onLoaded: PropTypes.func,
/**
* Options to customize the toolbar
*/
toolbarOptions: PropTypes.shape({
/**
* Reference to toolbar component
*/
instance: PropTypes.elementType,
/**
* Custom toolbar props
*/
props: PropTypes.shape({}),
/**
* Styles to be applied to the toolbar container
*/
containerStyles: PropTypes.shape({}),
/**
* Styles to be applied to the toolbar
*/
toolBarClassName: PropTypes.shape({}),
/**
* Styles to be applied to the inner div
*/
innerDivStyles: PropTypes.shape({}),
/**
* Styles to be applied to the buttons
*/
buttonStyles: PropTypes.shape({})
}),
/**
* Options to customize the loader
*/
loaderOptions: PropTypes.shape({
/**
* Reference to toolbar component
*/
instance: PropTypes.elementType,
/**
* Custom loader props
*/
props: PropTypes.shape({}),
/**
* Bool to control the use of the loader
*/
showLoader: PropTypes.bool,
/**
* Function to handle the close of the Loader
*/
handleClose: PropTypes.func,
/**
* Array of Custom messages to display
*/
messages: PropTypes.array,
/**
* Number of milliseconds between custom messages
*/
messagesInterval: PropTypes.number,
/**
* Number of the progress value to show in linear determinate (in percentage)
*/
elapsed: PropTypes.number,
/**
* Style to be applied to the Loader background
*/
backgroundStyle: PropTypes.shape({
/**
* Loader's background color. Defaults to rgba(255,142,0,0.1)
*/
backgroundColor: PropTypes.string
})
}),
/**
* Buttons and action to add depending in the view mode/full screen
*/
toolbarButtons: PropTypes.shape({
/**
* Buttons to display if the view is minimized
*/
minimized: PropTypes.arrayOf(PropTypes.shape({
/**
* The button icon
*/
icon: PropTypes.string,
/**
* The tooltip of the button
*/
tooltip: PropTypes.string,
/**
* A callback that will be called when the button is clicked
*/
action: PropTypes.func
})),
/**
* Buttons to display if the view is full screen
*/
fullScreen: PropTypes.arrayOf(PropTypes.shape({
/**
* The button icon
*/
icon: PropTypes.string,
/**
* The tooltip of the button
*/
tooltip: PropTypes.string,
/**
* A callback that will be called when the button is clicked
*/
action: PropTypes.func
})),
/**
* Buttons to display if the view is in single view mode
*/
single_view: PropTypes.arrayOf(PropTypes.shape({
/**
* The button icon
*/
icon: PropTypes.string,
/**
* The tooltip of the button
*/
tooltip: PropTypes.string,
/**
* A callback that will be called when the button is clicked
*/
action: PropTypes.func
})),
/**
* Buttons to display if the view in quad view mode
*/
quad_view: PropTypes.arrayOf(PropTypes.shape({
/**
* The button icon
*/
icon: PropTypes.string,
/**
* The tooltip of the button
*/
tooltip: PropTypes.string,
/**
* A callback that will be called when the button is clicked
*/
action: PropTypes.func
}))
})
};
export default DicomViewer;