From a005e5b35948a60239a665b59948505834fbdfe1 Mon Sep 17 00:00:00 2001 From: Erik Ziegler Date: Wed, 9 Dec 2015 14:24:40 +0100 Subject: [PATCH] Updates to fix dialogs for non-target lesions. --- OHIFViewer/client/components/viewer/viewer.js | 11 --- .../client/compatibility/nonTargetTool.js | 23 +++--- .../nonTargetLesionDialog.html | 71 ++++++++++++------- .../nonTargetLesionDialog.js | 64 ++++++++++++++--- .../nonTargetLesionDialog.styl | 7 +- .../imageViewerViewport.js | 63 +--------------- .../viewer/playClipButton/playClipButton.js | 20 ++++++ .../viewerbase/lib/displayReferenceLines.js | 30 ++++++++ .../viewerbase/lib/enablePrefetchOnElement.js | 23 ++++++ Packages/viewerbase/package.js | 8 +++ 10 files changed, 194 insertions(+), 126 deletions(-) create mode 100644 Packages/viewerbase/lib/displayReferenceLines.js create mode 100644 Packages/viewerbase/lib/enablePrefetchOnElement.js diff --git a/OHIFViewer/client/components/viewer/viewer.js b/OHIFViewer/client/components/viewer/viewer.js index a560a42f3..2e779d45e 100644 --- a/OHIFViewer/client/components/viewer/viewer.js +++ b/OHIFViewer/client/components/viewer/viewer.js @@ -42,17 +42,6 @@ Template.viewer.onCreated(function() { toolStateManager.clear(element); cornerstone.updateImage(element); }, - playClip: function(element) { - var viewportIndex = $('.imageViewerViewport').index(element); - var isPlaying = OHIF.viewer.isPlaying[viewportIndex] || false; - if (isPlaying === true) { - cornerstoneTools.stopClip(element); - } else { - cornerstoneTools.playClip(element); - } - OHIF.viewer.isPlaying[viewportIndex] = !OHIF.viewer.isPlaying[viewportIndex]; - Session.set('UpdateCINE', Random.id()); - }, previousPresentationGroup: function() { WindowManager.previousPresentationGroup(); }, diff --git a/Packages/lesiontracker/client/compatibility/nonTargetTool.js b/Packages/lesiontracker/client/compatibility/nonTargetTool.js index 26f3414e2..466671314 100644 --- a/Packages/lesiontracker/client/compatibility/nonTargetTool.js +++ b/Packages/lesiontracker/client/compatibility/nonTargetTool.js @@ -6,8 +6,8 @@ var configuration = { setLesionNumberCallback: setLesionNumberCallback, - getNonTargetLesionLocationCallback: getNonTargetLesionLocationCallback, - changeNonTargetLesionLocationCallback: changeNonTargetLesionLocationCallback, + getLesionLocationCallback: getLesionLocationCallback, + changeLesionLocationCallback: changeLesionLocationCallback, drawHandles: false, drawHandlesOnHover: true, arrowFirst: true @@ -21,11 +21,11 @@ } // Define a callback to get your text annotation // This could be used, e.g. to open a modal - function getNonTargetLesionLocationCallback(measurementData, eventData, doneCallback) { + function getLesionLocationCallback(measurementData, eventData, doneCallback) { doneCallback(prompt('Enter your lesion location:')); } - function changeNonTargetLesionLocationCallback(measurementData, eventData, doneCallback) { + function changeLesionLocationCallback(measurementData, eventData, doneCallback) { doneCallback(prompt('Change your lesion location:')); } @@ -71,7 +71,7 @@ // delete the measurement cornerstoneTools.removeToolState(mouseEventData.element, toolType, measurementData); }else{ - config.getNonTargetLesionLocationCallback(measurementData, mouseEventData, doneCallback); + config.getLesionLocationCallback(measurementData, mouseEventData, doneCallback); } @@ -268,7 +268,7 @@ cornerstoneTools.removeToolState(element, toolType, measurementData); } - config.getNonTargetLesionLocationCallback(measurementData, touchEventData, doneCallback); + config.getLesionLocationCallback(measurementData, touchEventData, doneCallback); $(element).on('CornerstoneToolsTouchDrag', cornerstoneTools.nonTargetTouch.touchMoveHandle); @@ -282,11 +282,10 @@ var element = eventData.element; var data; - function doneChangingTextCallback(data, updatedText, deleteTool) { + function doneCallback(data, deleteTool) { if (deleteTool === true) { cornerstoneTools.removeToolState(element, toolType, data); - } else { - data.text = updatedText; + cornerstone.updateImage(element); } data.active = false; @@ -313,7 +312,7 @@ data.active = true; cornerstone.updateImage(element); // Allow relabelling via a callback - config.changeTextCallback(data, doneChangingTextCallback); + config.changeLesionLocationCallback(data, eventData, doneCallback); e.stopImmediatePropagation(); return false; @@ -328,8 +327,8 @@ createNewMeasurement: createNewMeasurement, onImageRendered: onImageRendered, pointNearTool: pointNearTool, - toolType: toolType - //mouseDoubleClickCallback: doubleClickCallback + toolType: toolType, + mouseDoubleClickCallback: doubleClickCallback }); cornerstoneTools.nonTarget.setConfiguration(configuration); diff --git a/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.html b/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.html index 44575ec7b..10da2e45c 100644 --- a/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.html +++ b/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.html @@ -1,40 +1,61 @@ \ No newline at end of file diff --git a/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.js b/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.js index deafa1b60..d977e43d4 100644 --- a/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.js +++ b/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.js @@ -36,7 +36,7 @@ function setLesionNumberCallback(measurementData, eventData, doneCallback) { // This event determines whether or not to show the Non-Target lesion dialog // If there already exists a lesion with this specific lesion number, // related to the chosen location. -function getNonTargetLesionLocationCallback(measurementData, eventData) { +function getLesionLocationCallback(measurementData, eventData) { Template.nonTargetLesionDialog.measurementData = measurementData; // Get the non-target lesion location dialog @@ -49,11 +49,6 @@ function getNonTargetLesionLocationCallback(measurementData, eventData) { // Make sure the context menu is closed when the user clicks away $(".removableBackdrop").one('mousedown touchstart', function() { closeHandler(dialog); - - if (doneCallback && typeof doneCallback === 'function') { - var deleteTool = true; - doneCallback(measurementData, deleteTool); - } }); // Find the select option box @@ -112,14 +107,63 @@ function getNonTargetLesionLocationCallback(measurementData, eventData) { dialog.css(dialogProperty); } -function changeNonTargetLesionLocationCallback(measurementData, eventData, doneCallback) { - doneCallback(prompt('Change your lesion location:')); +function changeLesionLocationCallback(measurementData, eventData, doneCallback) { + Template.nonTargetLesionDialog.measurementData = measurementData; + Template.nonTargetLesionDialog.doneCallback = doneCallback; + + // Get the non-target lesion location dialog + var dialog = $("#nonTargetLesionRelabelDialog"); + Template.nonTargetLesionDialog.dialog = dialog; + + // Show the backdrop + UI.render(Template.removableBackdrop, document.body); + + // Make sure the context menu is closed when the user clicks away + $(".removableBackdrop").one('mousedown touchstart', function() { + closeHandler(dialog); + + if (doneCallback && typeof doneCallback === 'function') { + var deleteTool = true; + doneCallback(measurementData, deleteTool); + } + }); + + // Find the select option box + var selectorLocation = dialog.find("select#selectNonTargetLesionLocation"); + var selectorResponse = dialog.find("select#selectNonTargetLesionLocationResponse"); + + log.info(measurementData); + selectorLocation.find("option:first").prop("selected", "selected"); + selectorResponse.find("option:first").prop("selected", "selected"); + + // Allow location selection + selectorLocation.removeAttr("disabled"); + + // Show the nonTargetLesion dialog above + var dialogProperty = { + top: eventData.currentPoints.page.y, + left: eventData.currentPoints.page.x, + display: 'block' + }; + + // Device is touch device or not + // If device is touch device, set position center of screen vertically and horizontally + if (isTouchDevice()) { + // add dialogMobile class to provide a black,transparent background + dialog.addClass("dialogMobile"); + dialogProperty.top = 0; + dialogProperty.left = 0; + dialogProperty.right = 0; + dialogProperty.bottom = 0; + } + + dialog.css(dialogProperty); } var config = { setLesionNumberCallback: setLesionNumberCallback, - getNonTargetLesionLocationCallback: getNonTargetLesionLocationCallback, - changeNonTargetLesionLocationCallback: changeNonTargetLesionLocationCallback + getLesionLocationCallback: getLesionLocationCallback, + changeLesionLocationCallback: changeLesionLocationCallback }; cornerstoneTools.nonTarget.setConfiguration(config); diff --git a/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.styl b/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.styl index 8ad3005af..87f325f98 100644 --- a/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.styl +++ b/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.styl @@ -1,4 +1,4 @@ -#nonTargetLesionLocationDialog +#nonTargetLesionLocationDialog, #nonTargetLesionRelabelDialog display: none position: absolute top: 0 @@ -25,11 +25,6 @@ .dialogContent, .lesionLocation, .locationResponse margin-bottom: 20px - .elementContainer - width: 100% - margin: 0 auto - float: none - .locationOK text-align: center \ No newline at end of file diff --git a/Packages/viewerbase/components/viewer/imageViewerViewport/imageViewerViewport.js b/Packages/viewerbase/components/viewer/imageViewerViewport/imageViewerViewport.js index ff49ea170..79473065b 100644 --- a/Packages/viewerbase/components/viewer/imageViewerViewport/imageViewerViewport.js +++ b/Packages/viewerbase/components/viewer/imageViewerViewport/imageViewerViewport.js @@ -1,59 +1,3 @@ -/** - * This function enables stack prefetching for a specified element (viewport) - * It first disables any prefetching currently occurring on any other viewports. - * - * @param element {node} DOM Node representing the viewport element - */ -function enablePrefetchOnElement(element) { - log.info("imageViewerViewport enablePrefetchOnElement"); - - // Loop through all viewports and disable stackPrefetch - $('.imageViewerViewport').each(function() { - if (!$(this).find('canvas').length) { - return; - } - cornerstoneTools.stackPrefetch.disable(this); - }); - - // Make sure there is a stack to fetch - var stack = cornerstoneTools.getToolState(element, 'stack'); - if (stack && stack.data.length && stack.data[0].imageIds.length > 1) { - cornerstoneTools.stackPrefetch.enable(element); - } -} - -/** - * This function disables reference lines for a specific viewport element. - * It also enables reference lines for all other viewports with the - * class .imageViewerViewport. - * - * @param element {node} DOM Node representing the viewport element - */ -function displayReferenceLines(element) { - log.info("imageViewerViewport displayReferenceLines"); - - // Disable reference lines for the current element - cornerstoneTools.referenceLines.tool.disable(element); - - // Loop through all other viewport elements and enable reference lines - $('.imageViewerViewport').not(element).each(function(index, element) { - var imageId; - try { - var enabledElement = cornerstone.getEnabledElement(element); - imageId = enabledElement.image.imageId; - } catch(error) { - return; - } - - if (!imageId || !$(this).find('canvas').length) { - return; - } - - cornerstoneTools.referenceLines.tool.enable(element, OHIF.viewer.updateImageSynchronizer); - }); -} - - var allCornerstoneEvents = 'CornerstoneToolsMouseDown CornerstoneToolsMouseDownActivate ' + 'CornerstoneToolsMouseClick CornerstoneToolsMouseDrag CornerstoneToolsMouseUp ' + 'CornerstoneToolsMouseWheel CornerstoneToolsTap CornerstoneToolsTouchPress ' + @@ -590,12 +534,7 @@ Template.imageViewerViewport.events({ // Add the 'active' class to the parent container to highlight the active viewport $('#imageViewerViewports .viewportContainer').removeClass('active'); - $(e.currentTarget).parents('.viewportContainer').addClass('active'); - // Finally, enable stack prefetching and hide the reference lines from - // the newly activated viewport - var element = e.currentTarget; - enablePrefetchOnElement(element); - displayReferenceLines(element); + setActiveViewport(e.currentTarget); } }); \ No newline at end of file diff --git a/Packages/viewerbase/components/viewer/playClipButton/playClipButton.js b/Packages/viewerbase/components/viewer/playClipButton/playClipButton.js index ec35a6d47..ff931bca1 100644 --- a/Packages/viewerbase/components/viewer/playClipButton/playClipButton.js +++ b/Packages/viewerbase/components/viewer/playClipButton/playClipButton.js @@ -1,7 +1,27 @@ +toggleCinePlay = function(element) { + var viewportIndex = $('.imageViewerViewport').index(element); + var isPlaying = OHIF.viewer.isPlaying[viewportIndex] || false; + if (isPlaying === true) { + cornerstoneTools.stopClip(element); + } else { + cornerstoneTools.playClip(element); + } + OHIF.viewer.isPlaying[viewportIndex] = !OHIF.viewer.isPlaying[viewportIndex]; + Session.set('UpdateCINE', Random.id()); +}; + Template.playClipButton.helpers({ 'isPlaying': function() { Session.get('UpdateCINE'); var activeViewport = Session.get('activeViewport'); return !!OHIF.viewer.isPlaying[activeViewport]; } +}); + +Template.playClipButton.events({ + 'click #playClip': function() { + var activeViewport = Session.get('activeViewport'); + var element = $('.imageViewerViewport').get(activeViewport); + toggleCinePlay(element); + } }); \ No newline at end of file diff --git a/Packages/viewerbase/lib/displayReferenceLines.js b/Packages/viewerbase/lib/displayReferenceLines.js new file mode 100644 index 000000000..cd853791d --- /dev/null +++ b/Packages/viewerbase/lib/displayReferenceLines.js @@ -0,0 +1,30 @@ +/** + * This function disables reference lines for a specific viewport element. + * It also enables reference lines for all other viewports with the + * class .imageViewerViewport. + * + * @param element {node} DOM Node representing the viewport element + */ +displayReferenceLines = function(element) { + log.info("imageViewerViewport displayReferenceLines"); + + // Disable reference lines for the current element + cornerstoneTools.referenceLines.tool.disable(element); + + // Loop through all other viewport elements and enable reference lines + $('.imageViewerViewport').not(element).each(function(index, element) { + var imageId; + try { + var enabledElement = cornerstone.getEnabledElement(element); + imageId = enabledElement.image.imageId; + } catch(error) { + return; + } + + if (!imageId || !$(this).find('canvas').length) { + return; + } + + cornerstoneTools.referenceLines.tool.enable(element, OHIF.viewer.updateImageSynchronizer); + }); +}; \ No newline at end of file diff --git a/Packages/viewerbase/lib/enablePrefetchOnElement.js b/Packages/viewerbase/lib/enablePrefetchOnElement.js new file mode 100644 index 000000000..2e0f172d8 --- /dev/null +++ b/Packages/viewerbase/lib/enablePrefetchOnElement.js @@ -0,0 +1,23 @@ +/** + * This function enables stack prefetching for a specified element (viewport) + * It first disables any prefetching currently occurring on any other viewports. + * + * @param element {node} DOM Node representing the viewport element + */ +enablePrefetchOnElement = function(element) { + log.info("imageViewerViewport enablePrefetchOnElement"); + + // Loop through all viewports and disable stackPrefetch + $('.imageViewerViewport').each(function() { + if (!$(this).find('canvas').length) { + return; + } + cornerstoneTools.stackPrefetch.disable(this); + }); + + // Make sure there is a stack to fetch + var stack = cornerstoneTools.getToolState(element, 'stack'); + if (stack && stack.data.length && stack.data[0].imageIds.length > 1) { + cornerstoneTools.stackPrefetch.enable(element); + } +}; \ No newline at end of file diff --git a/Packages/viewerbase/package.js b/Packages/viewerbase/package.js index 0cbb3e346..6c4f2fe4d 100644 --- a/Packages/viewerbase/package.js +++ b/Packages/viewerbase/package.js @@ -107,8 +107,16 @@ Package.onUse(function (api) { api.addFiles('lib/sortStudy.js', 'client'); api.addFiles('lib/toolManager.js', 'client'); api.addFiles('lib/windowManager.js', 'client'); + api.addFiles('lib/enablePrefetchOnElement.js', 'client'); + api.addFiles('lib/displayReferenceLines.js', 'client'); + api.addFiles('lib/setActiveViewport.js', 'client'); + //api.addFiles('lib/switchToImageByIndex.js', 'client'); + //api.addFiles('lib/switchToImageRelative.js', 'client'); //api.export('accountsConfig', 'client'); + api.export('enablePrefetchOnElement', 'client'); + api.export('displayReferenceLines', 'client'); + api.export('setActiveViewport', 'client'); api.export('createStacks', 'client'); api.export('encodeQueryData', ['client', 'server']); api.export('getImageId', 'client');