feat(windowlevelreset): add an option to reset the window width/level…

… values

src/Rendering/Images/createImagesRenderingMachine.js

@@ -162,6 +162,7 @@ function createImagesRenderingMachine(options, context) {
                 'LABEL_IMAGE_LABEL_NAMES_CHANGED',
                 'COMPARE_IMAGES',
                 'WINDOW_LEVEL_TOGGLED',
+                'IMAGE_COLOR_RANGE_RESET',
               ],
               { actions: forwardToNamedActor }
             ),

src/Rendering/createRenderingMachine.js

@@ -257,6 +257,9 @@ const createRenderingMachine = (options, context) => {
             WINDOW_LEVEL_TOGGLED: {
               actions: forwardTo('images'),
             },
+            IMAGE_COLOR_RANGE_RESET: {
+              actions: forwardTo('images'),
+            },
           },
         },
       },

src/UI/Images/createImagesUIMachine.js

@@ -377,6 +377,9 @@ function createImagesUIMachine(options, context) {
                 forwardTo('transferFunctionManipulators'),
               ],
             },
+            IMAGE_COLOR_RANGE_RESET: {
+              actions: ['applyWindowLevelReset'],
+            },
           },
         },
       },

src/UI/createUIMachine.js

@@ -185,6 +185,9 @@ function createUIMachine(options, context) {
             WINDOW_LEVEL_TOGGLED: {
               actions: forwardTo('images'),
             },
+            IMAGE_COLOR_RANGE_RESET: {
+              actions: forwardTo('images'),
+            },
             START_DATA_UPDATE: { actions: forwardTo('layers') },
             FINISH_DATA_UPDATE: { actions: forwardTo('layers') },
             POST_RENDER: { actions: forwardTo('layers') },

src/UI/reference-ui/src/Images/applyWindowingReset.js

@@ -0,0 +1,25 @@
+function applyWindowLevelReset(context, { data }) {
+  const actorContext = context.images.actorContext.get(data.name)
+  const component = actorContext.selectedComponent
+  const bounds = actorContext.colorRangeBounds.get(component)
+
+  const wMax = bounds[1] - bounds[0]
+  const lMin = bounds[0]
+  const level = wMax / 2 + lMin
+  const width = wMax
+
+  const newRange = () => {
+    return [level - width / 2, level + width / 2]
+  }
+
+  context.service.send({
+    type: 'IMAGE_COLOR_RANGE_CHANGED',
+    data: {
+      name: data.name,
+      component,
+      range: newRange(),
+    },
+  })
+}
+
+export default applyWindowLevelReset

src/UI/reference-ui/src/Images/createColorRangeInput.js

@@ -2,6 +2,7 @@ import style from '../ItkVtkViewer.module.css'
 
 import createInterpolationButton from './createInterpolationButton'
 import createColorMapIconSelector from '../createColorMapIconSelector'
+import createWindowLevelReset from './createWindowLevelReset'
 
 function createColorRangeInput(context, imageUIGroup) {
   const viewerDOMId = context.id
@@ -88,6 +89,8 @@ function createColorRangeInput(context, imageUIGroup) {
   })
   context.images.colorMapSelector = colorMapSelector
 
+  createWindowLevelReset(context, colorRangeInputRow)
+
   imageUIGroup.appendChild(colorRangeInputRow)
 }
 

src/UI/reference-ui/src/Images/createWindowLevelReset.js

@@ -0,0 +1,36 @@
+import style from '../ItkVtkViewer.module.css'
+import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
+
+import { resetImageIconDataUri } from 'itk-viewer-icons'
+
+function createWindowLevelReset(context, uiContainer) {
+  const windowLevelResetButton = document.createElement('div')
+  windowLevelResetButton.innerHTML = `
+    <div itk-vtk-tooltip itk-vtk-tooltip-left itk-vtk-tooltip-content="Reset range to ROI" class="${style.windowLevelButton}">
+      <img src="${resetImageIconDataUri}" alt="gradient opacity"/>
+    </div>
+  `
+  const windowLevelResetButtonInput = windowLevelResetButton.children[0]
+  const windowLevelResetButtonLabel = windowLevelResetButton.children[1]
+  applyContrastSensitiveStyleToElement(
+    context,
+    'invertibleButton',
+    windowLevelResetButtonLabel
+  )
+  context.images.windowLevelResetButtonLabel = windowLevelResetButtonLabel
+  context.images.windowLevelResetButtonInput = windowLevelResetButtonInput
+
+  windowLevelResetButton.addEventListener('click', event => {
+    event.preventDefault()
+    event.stopPropagation()
+    context.service.send({
+      type: 'IMAGE_COLOR_RANGE_RESET',
+      data: {
+        name: context.images.selectedName,
+      },
+    })
+  })
+  uiContainer.appendChild(windowLevelResetButton)
+}
+
+export default createWindowLevelReset

src/UI/reference-ui/src/Images/imagesUIMachineOptions.js

@@ -24,6 +24,7 @@ import scaleSelector from './scaleSelector'
 import { applyPiecewiseFunctionPointsToEditor } from './createTransferFunctionWidget'
 import { applyCinematicChanged } from './cinematic'
 import toggleWindowLevel from './toggleWindowLevel'
+import applyWindowLevelReset from './applyWindowingReset'
 
 const imagesUIMachineOptions = {
   actions: {
@@ -43,6 +44,7 @@ const imagesUIMachineOptions = {
     applyPiecewiseFunctionGaussians,
     applyPiecewiseFunctionPointsToEditor,
     toggleWindowLevel,
+    applyWindowLevelReset,
 
     toggleShadow,
     applyGradientOpacity,

src/UI/reference-ui/src/ItkVtkViewer.module.css

@@ -154,7 +154,7 @@
   transition-duration: 0.3s;
   transition-timing-function: ease-in-out;
   transition-delay: 0.8s;
-  z-index: 1;
+  z-index: 3000;
 }
 
 [itk-vtk-tooltip]:hover::before {

src/UI/reference-ui/src/createColorMapIconSelector.js

@@ -5,7 +5,7 @@ function createColorMapIconSelector(colorMapSelectorDiv) {
   const rows = 20
   const cols = 4
   const iconSelectParameters = {
-    selectedIconWidth: 160,
+    selectedIconWidth: 140,
     selectedIconHeight: 22,
     selectedBoxPadding: 1,
     iconsWidth: 80,
@@ -19,7 +19,7 @@ function createColorMapIconSelector(colorMapSelectorDiv) {
     colorMapSelectorDiv,
     iconSelectParameters
   )
-  colorMapSelectorDiv.style.width = '174px'
+  colorMapSelectorDiv.style.width = '154px'
   // put above lower down label map color selector
   colorMapSelectorDiv.style.zIndex = '2001'
 

src/createViewerMachine.js

@@ -353,6 +353,9 @@ const createViewerMachine = (options, context, eventEmitterCallback) => {
             WINDOW_LEVEL_TOGGLED: {
               actions: [forwardTo('ui'), forwardTo('rendering')],
             },
+            IMAGE_COLOR_RANGE_RESET: {
+              actions: [forwardTo('ui'), forwardTo('rendering')],
+            },
           },
         },
       },