112 lines
2.9 KiB
JavaScript
112 lines
2.9 KiB
JavaScript
/* global cornerstone */
|
|
import './ImageThumbnail.styl';
|
|
|
|
import React, { PureComponent } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
import ViewportErrorIndicator from '../../viewer/ViewportErrorIndicator';
|
|
import ViewportLoadingIndicator from '../../viewer/ViewportLoadingIndicator';
|
|
|
|
// TODO: How should we have this component depend on Cornerstone?
|
|
// - Passed in as a prop?
|
|
// - Set as external dependency?
|
|
// - Pass in the entire load and render function as a prop?
|
|
//import cornerstone from 'cornerstone-core';
|
|
|
|
export default class ImageThumbnail extends PureComponent {
|
|
static propTypes = {
|
|
imageSrc: PropTypes.string,
|
|
imageId: PropTypes.string,
|
|
error: PropTypes.bool.isRequired,
|
|
width: PropTypes.number.isRequired,
|
|
height: PropTypes.number.isRequired,
|
|
stackPercentComplete: PropTypes.number.isRequired,
|
|
};
|
|
|
|
static defaultProps = {
|
|
error: false,
|
|
stackPercentComplete: 0,
|
|
width: 217,
|
|
height: 123,
|
|
};
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.canvas = React.createRef();
|
|
this.state = {
|
|
loading: this.shouldRenderToCanvas(),
|
|
};
|
|
}
|
|
|
|
shouldRenderToCanvas() {
|
|
return this.props.imageId && !this.props.imageSrc;
|
|
}
|
|
|
|
componentDidMount() {
|
|
if (this.shouldRenderToCanvas()) {
|
|
cornerstone
|
|
.loadAndCacheImage(this.props.imageId)
|
|
.then(image => {
|
|
cornerstone.renderToCanvas(this.canvas.current, image);
|
|
this.setState({
|
|
loading: false,
|
|
});
|
|
})
|
|
.catch(error => {
|
|
this.setState({
|
|
loading: false,
|
|
error: true,
|
|
});
|
|
throw new Error(error);
|
|
});
|
|
}
|
|
}
|
|
|
|
render() {
|
|
let loadingOrError;
|
|
if (this.props.error) {
|
|
loadingOrError = <ViewportErrorIndicator />;
|
|
} else if (this.state.loading) {
|
|
loadingOrError = <ViewportLoadingIndicator />;
|
|
}
|
|
|
|
const showStackLoadingProgressBar =
|
|
this.props.stackPercentComplete !== undefined;
|
|
|
|
return (
|
|
<div className="ImageThumbnail">
|
|
<div className="image-thumbnail-canvas">
|
|
{this.shouldRenderToCanvas() ? (
|
|
<canvas
|
|
ref={this.canvas}
|
|
width={this.props.width}
|
|
height={this.props.height}
|
|
/>
|
|
) : (
|
|
<img
|
|
className="static-image"
|
|
src={this.props.imageSrc}
|
|
//width={this.props.width}
|
|
height={this.props.height}
|
|
alt={''}
|
|
/>
|
|
)}
|
|
</div>
|
|
{loadingOrError}
|
|
{showStackLoadingProgressBar && (
|
|
<div className="image-thumbnail-progress-bar">
|
|
<div
|
|
className="image-thumbnail-progress-bar-inner"
|
|
style={{ width: `${this.props.stackPercentComplete}%` }}
|
|
/>
|
|
</div>
|
|
)}
|
|
{this.state.loading && (
|
|
<div className="image-thumbnail-loading-indicator"></div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
}
|