88 lines
3.1 KiB
JavaScript
88 lines
3.1 KiB
JavaScript
Template.imageThumbnail.onRendered(() => {
|
|
const instance = Template.instance();
|
|
|
|
// Declare DOM and jQuery objects
|
|
const $parent = instance.$('.imageThumbnail');
|
|
const $loading = $parent.find('.imageThumbnailLoadingIndicator');
|
|
const $loadingError = $parent.find('.imageThumbnailErrorLoadingIndicator');
|
|
const $element = $parent.find('.imageThumbnailCanvas');
|
|
const element = $element.get(0);
|
|
|
|
instance.refreshImage = () => {
|
|
// Disable cornerstone for thumbnail element and remove its canvas
|
|
cornerstone.disable(element);
|
|
|
|
// Enable cornerstone for thumbnail element again creating a new canvas
|
|
cornerstone.enable(element);
|
|
|
|
// Get the image ID
|
|
const stack = instance.data.thumbnail.stack;
|
|
const thumbnailIndex = instance.data.thumbnail.thumbnailIndex;
|
|
const imageInstance = stack.images[0];
|
|
const imageId = getImageId(imageInstance);
|
|
|
|
// Activate the loading state
|
|
$loading.css('display', 'block');
|
|
|
|
// Add the current index on the global thumbnail loading controller
|
|
ThumbnailLoading[thumbnailIndex] = imageId;
|
|
|
|
// Define a handler for success on image load
|
|
const loadSuccess = image => {
|
|
cornerstone.displayImage(element, image);
|
|
delete ThumbnailLoading[thumbnailIndex];
|
|
$loading.css('display', 'none');
|
|
};
|
|
|
|
// Define a handler for error on image load
|
|
const loadError = () => {
|
|
$loading.css('display', 'none');
|
|
$loadingError.css('display', 'block');
|
|
};
|
|
|
|
// Call cornerstone image loader with the defined handlers
|
|
cornerstone.loadAndCacheImage(imageId).then(loadSuccess, loadError);
|
|
};
|
|
|
|
// Run this computation every time the current study is changed
|
|
instance.autorun(() => {
|
|
// Check if there is a reactive var set for current study
|
|
if (instance.data.currentStudy) {
|
|
// Register a dependency from this computation on current study
|
|
instance.data.currentStudy.dep.depend();
|
|
}
|
|
|
|
// Wait for the new data and reresh the image thumbnail
|
|
Tracker.afterFlush(() => {
|
|
instance.refreshImage();
|
|
});
|
|
});
|
|
});
|
|
|
|
Template.imageThumbnail.onDestroyed(() => {
|
|
const instance = Template.instance();
|
|
|
|
// Declare DOM and jQuery objects
|
|
const $parent = instance.$('.imageThumbnail');
|
|
const $element = $parent.find('.imageThumbnailCanvas');
|
|
const element = $element.get(0);
|
|
|
|
cornerstone.disable(element);
|
|
});
|
|
|
|
Template.imageThumbnail.helpers({
|
|
// Executed every time the image loading progress is changed
|
|
percentComplete() {
|
|
const instance = Template.instance();
|
|
const thumbnailIndex = instance.data.thumbnail.thumbnailIndex;
|
|
|
|
// Register a dependency from this computation on Session key
|
|
const percentComplete = Session.get('CornerstoneThumbnailLoadProgress' + thumbnailIndex);
|
|
|
|
// Return the complete percent amount of the image loading
|
|
if (percentComplete && percentComplete !== 100) {
|
|
return percentComplete + '%';
|
|
}
|
|
}
|
|
});
|