From c004aee40fec112a63459b025792d3a23850d0e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elo=C3=ADzio=20Salgado?= Date: Fri, 11 Nov 2016 14:26:13 -0200 Subject: [PATCH] LT-301: Addeing Stack Scroll, Reset, Rotate, Flip H, Flip V, Invert, Magnify, Elliptical ROI, Clear and Toggle CINE dialog buttons to More Tools panel --- .../toolbarSection/toolbarSection.js | 71 +++++++++++++++++++ .../client/components/viewer/viewer.html | 1 + .../client/components/viewer/viewer.js | 10 ++- Packages/ohif-viewerbase/assets/icons.svg | 40 +++++++++++ .../viewer/cineDialog/cineDialog.html | 2 +- .../viewer/cineDialog/cineDialog.styl | 2 + .../imageViewerViewport.js | 3 +- Packages/ohif-viewerbase/lib/toolManager.js | 16 ++++- .../ohif-viewerbase/lib/viewportFunctions.js | 38 ++++++++++ Packages/ohif-viewerbase/package.js | 2 + 10 files changed, 179 insertions(+), 6 deletions(-) diff --git a/LesionTracker/client/components/toolbarSection/toolbarSection.js b/LesionTracker/client/components/toolbarSection/toolbarSection.js index 0c068211f..7f30dc892 100644 --- a/LesionTracker/client/components/toolbarSection/toolbarSection.js +++ b/LesionTracker/client/components/toolbarSection/toolbarSection.js @@ -114,6 +114,77 @@ Template.toolbarSection.helpers({ const isToolDisabled = !Template.instance().data.timepointApi.currentTimepointId; const buttonData = []; + buttonData.push({ + id: 'stackScroll', + title: 'Stack Scroll', + classes: 'imageViewerTool toolbarSectionButton', + svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-stack-scroll' + }); + + buttonData.push({ + id: 'resetViewport', + title: 'Reset', + classes: 'imageViewerCommand toolbarSectionButton', + svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-reset' + }); + + buttonData.push({ + id: 'rotate', + title: 'Rotate', + classes: 'imageViewerTool toolbarSectionButton', + svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-rotate' + }); + + buttonData.push({ + id: 'flipH', + title: 'Flip H', + classes: 'imageViewerCommand toolbarSectionButton', + svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-flip-horizontal' + }); + + buttonData.push({ + id: 'flipV', + title: 'Flip V', + classes: 'imageViewerCommand toolbarSectionButton', + svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-flip-vertical' + }); + + buttonData.push({ + id: 'invert', + title: 'Invert', + classes: 'imageViewerCommand toolbarSectionButton', + svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-invert' + }); + + buttonData.push({ + id: 'magnify', + title: 'Magnify', + classes: 'imageViewerTool toolbarSectionButton', + svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-magnify' + }); + + buttonData.push({ + id: 'ellipticalRoi', + title: 'Ellipse', + classes: 'imageViewerTool toolbarSectionButton', + svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-elliptical-roi' + }); + + buttonData.push({ + id: 'toggleCineDialog', + title: 'CINE', + classes: 'imageViewerCommand toolbarSectionButton', + svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-cineplay-toggle', + disableFunction: hasMultipleFrames + }); + + buttonData.push({ + id: 'clearTools', + title: 'Clear', + classes: 'imageViewerCommand toolbarSectionButton', + svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-clear' + }); + // TODO: Get real icons for CR / UN / EX /* Disabling these for now, since they aren't hooked up in the Lesion Tracker yet buttonData.push({ diff --git a/LesionTracker/client/components/viewer/viewer.html b/LesionTracker/client/components/viewer/viewer.html index 40770ef79..574fc0b80 100644 --- a/LesionTracker/client/components/viewer/viewer.html +++ b/LesionTracker/client/components/viewer/viewer.html @@ -6,6 +6,7 @@ {{>nonTargetMeasurementDialog (clone this)}} {{>nonTargetResponseDialog (clone this)}} {{>measurementTableHUD (clone this)}} + {{>cineDialog}}
{{>toolbarSection (clone this)}} diff --git a/LesionTracker/client/components/viewer/viewer.js b/LesionTracker/client/components/viewer/viewer.js index e3d4e408f..418b34450 100644 --- a/LesionTracker/client/components/viewer/viewer.js +++ b/LesionTracker/client/components/viewer/viewer.js @@ -20,7 +20,6 @@ Template.viewer.onCreated(() => { OHIF.viewer.functionList = $.extend(OHIF.viewer.functionList, { toggleLesionTrackerTools: OHIF.lesiontracker.toggleLesionTrackerTools, - clearTools: clearTools, bidirectional: () => { // Used for hotkeys toolManager.setActiveTool('bidirectional'); @@ -28,7 +27,14 @@ Template.viewer.onCreated(() => { nonTarget: () => { // Used for hotkeys toolManager.setActiveTool('nonTarget'); - } + }, + // Viewport functions + toggleCineDialog, + clearTools, + resetViewport, + invert, + flipV, + flipH }); if (ViewerData[contentId].loadedSeriesData) { diff --git a/Packages/ohif-viewerbase/assets/icons.svg b/Packages/ohif-viewerbase/assets/icons.svg index ef658ff2a..373a62ade 100644 --- a/Packages/ohif-viewerbase/assets/icons.svg +++ b/Packages/ohif-viewerbase/assets/icons.svg @@ -131,6 +131,46 @@ + + Invert + + + + Stack Scroll + + + + Elliptical ROI + + + + Magnify + + + + Reset + + + + Rotate + + + + Cineplay Toggle + + + + Vertical + + + + Horizontal + + + + Clear + + Trial Information diff --git a/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.html b/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.html index b17785958..0575f501f 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.html +++ b/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.html @@ -19,7 +19,7 @@ {{#button class='btn' action='cinePrevious' title='Previous image' disabled=(buttonDisabled)}} <i class="fa fa-step-backward"></i> {{/button}} - {{#button class='btn' action='cineToggle' title='Play / Stop' class=(valueIf isPlaying 'active' '') disabled=(buttonDisabled)}} + {{#button class='btn' action='cineToggle' title='Play / Stop' class=(concat 'btn ' (valueIf isPlaying 'active' '')) disabled=(buttonDisabled)}} {{#if isPlaying}} <i class="fa fa-fw fa-stop"></i> {{else}} diff --git a/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.styl b/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.styl index 72c6fa927..7b82894ea 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.styl +++ b/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.styl @@ -31,6 +31,8 @@ &[disabled] &:hover color: inherit + &:active + theme('color', '$textSecondaryColor') .cine-navigation, .cine-controls, .cine-options cursor: default diff --git a/Packages/ohif-viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js b/Packages/ohif-viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js index c179f28ea..68217db35 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js +++ b/Packages/ohif-viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js @@ -226,7 +226,8 @@ function loadDisplaySetIntoViewport(data, templateData) { let fps; if (multiframeMetadata && multiframeMetadata.averageFrameRate > 0) { fps = multiframeMetadata.averageFrameRate; - } else { + } + else { fps = OHIF.viewer.cine.framesPerSecond; } diff --git a/Packages/ohif-viewerbase/lib/toolManager.js b/Packages/ohif-viewerbase/lib/toolManager.js index 58680b553..38280ad2e 100644 --- a/Packages/ohif-viewerbase/lib/toolManager.js +++ b/Packages/ohif-viewerbase/lib/toolManager.js @@ -18,8 +18,8 @@ var initialized = false; function configureTools() { // Get Cornerstone Tools - const { panMultiTouch, textStyle, toolStyle, toolColors, - length, bidirectional, arrowAnnotate, zoom } = cornerstoneTools; + const { panMultiTouch, textStyle, toolStyle, toolColors, length, + bidirectional, arrowAnnotate, zoom, ellipticalRoi } = cornerstoneTools; // Set the configuration for the multitouch pan tool const multiTouchPanConfig = { @@ -52,6 +52,7 @@ function configureTools() { // Get some tools config to not override them const lengthConfig = length.getConfiguration(); const bidirectionalConfig = bidirectional.getConfiguration(); + const ellipticalRoiConfig = ellipticalRoi.getConfiguration(); // Add shadow to length tool length.setConfiguration({ @@ -65,6 +66,12 @@ function configureTools() { ...shadowConfig }); + // Add shadow to length tool + ellipticalRoi.setConfiguration({ + ...ellipticalRoiConfig, + ...shadowConfig + }); + // Set the configuration values for the text annotation (Arrow) tool const annotateConfig = { getTextCallback: getAnnotationTextCallback, @@ -132,6 +139,11 @@ toolManager = { touch: cornerstoneTools.arrowAnnotateTouch }); + toolManager.addTool('rotate', { + mouse: cornerstoneTools.rotate, + touch: cornerstoneTools.rotateTouchDrag + }); + if (OHIF.viewer.defaultTool) { activeTool = OHIF.viewer.defaultTool; } diff --git a/Packages/ohif-viewerbase/lib/viewportFunctions.js b/Packages/ohif-viewerbase/lib/viewportFunctions.js index 5d8b431bd..961f11b6b 100644 --- a/Packages/ohif-viewerbase/lib/viewportFunctions.js +++ b/Packages/ohif-viewerbase/lib/viewportFunctions.js @@ -198,6 +198,44 @@ hasMultipleFrames = () => { return true; } + if(clipState) { + // Return true if the clip is playing + return !_.isUndefined(clipState.intervalId); + } + + return false; +}; + +// Check if a study has multiple frames +hasMultipleFrames = () => { + // Its called everytime active viewport and/or layout change + Session.get('activeViewport'); + Session.get('LayoutManagerUpdated'); + + const activeViewport = getActiveViewportElement(); + + // No active viewport yet: disable button + if(!activeViewport) { + return true; + } + + // Get images in the stack + const stackToolData = cornerstoneTools.getToolState(activeViewport, 'stack'); + + // No images in the stack, so disable button + if (!stackToolData || !stackToolData.data || !stackToolData.data.length) { + return true; + } + + // Get number of images in the stack + const stackData = stackToolData.data[0]; + const nImages = stackData.imageIds && stackData.imageIds.length ? stackData.imageIds.length : 1; + + // Stack has just one image, so disable button + if(nImages === 1) { + return true; + } + return false; }; diff --git a/Packages/ohif-viewerbase/package.js b/Packages/ohif-viewerbase/package.js index 4ed2cac02..080dbdc07 100644 --- a/Packages/ohif-viewerbase/package.js +++ b/Packages/ohif-viewerbase/package.js @@ -232,4 +232,6 @@ Package.onUse(function(api) { api.export('clearTools', 'client'); api.export('resetViewport', 'client'); api.export('invert', 'client'); + api.export('flipV', 'client'); + api.export('flipH', 'client'); });