From 66dfefbb14886a3881ae8b2c4fd5ecd78137c898 Mon Sep 17 00:00:00 2001 From: Bruno Alves de Faria Date: Thu, 30 Mar 2017 10:56:57 -0300 Subject: [PATCH] Re-rendering the thumbnail when external data is changed --- .../imageThumbnail/imageThumbnail.js | 9 ++-- .../thumbnailEntry/thumbnailEntry.js | 50 ++++++++++--------- .../client/lib/helpers/studyThumbnails.js | 6 +-- 3 files changed, 34 insertions(+), 31 deletions(-) diff --git a/Packages/ohif-viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.js b/Packages/ohif-viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.js index d24304458..e8bdb3596 100644 --- a/Packages/ohif-viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.js +++ b/Packages/ohif-viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.js @@ -1,11 +1,7 @@ import { Template } from 'meteor/templating'; import { Tracker } from 'meteor/tracker'; import { Session } from 'meteor/session'; -// OHIF Modules import { OHIF } from 'meteor/ohif:core'; -// Local Modules -import { getImageId } from '../../../lib/getImageId.js'; -import { getWADORSImageId } from '../../../lib/getWADORSImageId.js'; Template.imageThumbnail.onCreated(() => { const instance = Template.instance(); @@ -17,7 +13,7 @@ Template.imageThumbnail.onCreated(() => { let imageIndex = Math.floor(lastIndex / 2); let imageInstance; - if(stack.isMultiFrame) { + if (stack.isMultiFrame) { imageInstance = stack.images[0]; } else { imageInstance = stack.images[imageIndex]; @@ -79,6 +75,9 @@ Template.imageThumbnail.onRendered(() => { instance.data.currentStudy.dep.depend(); } + // Depend on external data and re-run this computation when it changes + Template.currentData(); + // Wait for the new data and refresh the image thumbnail Tracker.afterFlush(() => instance.refreshImage()); }); diff --git a/Packages/ohif-viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.js b/Packages/ohif-viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.js index e0c7d15f6..5bcf936a6 100644 --- a/Packages/ohif-viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.js +++ b/Packages/ohif-viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.js @@ -8,53 +8,56 @@ import { thumbnailDragHandlers } from '../../../lib/thumbnailDragHandlers'; Template.thumbnailEntry.onCreated(() => { const instance = Template.instance(); -// Check if the thumbnails will be draggable or clickable -instance.isDragAndDrop = _.isUndefined(instance.data.viewportIndex); + // Check if the thumbnails will be draggable or clickable + instance.isDragAndDrop = _.isUndefined(instance.data.viewportIndex); }); Template.thumbnailEntry.events({ // Event handlers for drag and drop 'touchstart .thumbnailEntry, mousedown .thumbnailEntry'(event, instance) { const data = instance.data.thumbnail.stack; - instance.isDragAndDrop && thumbnailDragHandlers.thumbnailDragStartHandler(event, data); + if (!instance.isDragAndDrop) return; + thumbnailDragHandlers.thumbnailDragStartHandler(event, data); }, 'touchmove .thumbnailEntry'(event, instance) { - instance.isDragAndDrop && thumbnailDragHandlers.thumbnailDragHandler(event); + if (!instance.isDragAndDrop) return; + thumbnailDragHandlers.thumbnailDragHandler(event); }, 'touchend .thumbnailEntry'(event, instance) { const data = instance.data.thumbnail.stack; - instance.isDragAndDrop && thumbnailDragHandlers.thumbnailDragEndHandler(event, data); + if (!instance.isDragAndDrop) return; + thumbnailDragHandlers.thumbnailDragEndHandler(event, data); }, // Event handlers for click (quick switch) 'click .thumbnailEntry'(event, instance) { - if (!instance.isDragAndDrop) { - // Get the thumbnail stack data - const data = instance.data.thumbnail.stack; + if (instance.isDragAndDrop) return; - // Rerender the viewport using the clicked thumbnail data - OHIF.viewerbase.layoutManager.rerenderViewportWithNewDisplaySet(instance.data.viewportIndex, data); - } + // Get the thumbnail stack data + const data = instance.data.thumbnail.stack; + + // Rerender the viewport using the clicked thumbnail data + OHIF.viewerbase.layoutManager.rerenderViewportWithNewDisplaySet(instance.data.viewportIndex, data); }, // Event handlers for double click 'dblclick .thumbnailEntry'(event, instance) { - if (instance.isDragAndDrop) { - // Get the active viewport index and total number of viewports... - const viewportCount = OHIF.viewerbase.layoutManager.getNumberOfViewports(); - let viewportIndex = Session.get('activeViewport') || 0; - if (viewportIndex >= viewportCount) { - viewportIndex = viewportCount > 0 ? viewportCount - 1 : 0; - } + if (!instance.isDragAndDrop) return; - // Get the thumbnail stack data - const data = instance.data.thumbnail.stack; - - // Rerender the viewport using the clicked thumbnail data - OHIF.viewerbase.layoutManager.rerenderViewportWithNewDisplaySet(viewportIndex, data); + // Get the active viewport index and total number of viewports... + const viewportCount = OHIF.viewerbase.layoutManager.getNumberOfViewports(); + let viewportIndex = Session.get('activeViewport') || 0; + if (viewportIndex >= viewportCount) { + viewportIndex = viewportCount > 0 ? viewportCount - 1 : 0; } + + // Get the thumbnail stack data + const data = instance.data.thumbnail.stack; + + // Rerender the viewport using the clicked thumbnail data + OHIF.viewerbase.layoutManager.rerenderViewportWithNewDisplaySet(viewportIndex, data); } }); @@ -62,6 +65,7 @@ Template.thumbnailEntry.helpers({ draggableClass() { return Template.instance().isDragAndDrop ? 'draggable' : ''; }, + instanceNumber() { const thumbnail = Template.instance().data.thumbnail; if (!thumbnail) { diff --git a/Packages/ohif-viewerbase/client/lib/helpers/studyThumbnails.js b/Packages/ohif-viewerbase/client/lib/helpers/studyThumbnails.js index 09fe37110..ab79fee6a 100644 --- a/Packages/ohif-viewerbase/client/lib/helpers/studyThumbnails.js +++ b/Packages/ohif-viewerbase/client/lib/helpers/studyThumbnails.js @@ -16,10 +16,10 @@ Template.registerHelper('studyThumbnails', study => { const thumbnails = []; // Iterate over the stacks and add one by one with its index - _.each(stacks, (stack, index) => { + _.each(stacks, (stack, thumbnailIndex) => { thumbnails.push({ - thumbnailIndex: index, - stack: stack + thumbnailIndex, + stack }); });