feat(layerboundingbox): generalize label bounding box for all layers

src/Context/LayerActorContext.js

@@ -7,6 +7,9 @@ class LayerActorContext {
 
   // img element icon for the layer or null
   icon = null
+
+  // Boolean indicating whether the dataset bounding box is visible
+  bbox = false
 }
 
 export default LayerActorContext

src/Context/LayersMachineContext.js

@@ -7,9 +7,6 @@ class LayersMachineContext {
 
   // A { name, data } object, queued for creation of the data's actor
   lastAddedData = null
-
-  // Draw bounding boxes around image and label (if loaded)
-  labelBBoxEnabled = false
 }
 
 export default LayersMachineContext

src/Rendering/Images/createImageRenderingActor.js

@@ -532,8 +532,8 @@ const eventResponses = {
   ANIMATE_IMAGE_MIX: {
     actions: applyAnimateImageMix,
   },
-  TOGGLE_LABEL_BBOX: {
-    actions: 'toggleLabelBBox',
+  TOGGLE_LAYER_BBOX: {
+    actions: 'toggleLayerBBox',
   },
 }
 

src/Rendering/Images/createImagesRenderingMachine.js

@@ -148,11 +148,6 @@ function createImagesRenderingMachine(options, context) {
                 to: (c, e) => `imageRenderingActor-${e.data}`,
               }),
             },
-            TOGGLE_LABEL_BBOX: {
-              actions: send((_, e) => e, {
-                to: c => `imageRenderingActor-${c.images.selectedName}`,
-              }),
-            },
             ...makeTransitions(
               [
                 'IMAGE_GRADIENT_OPACITY_CHANGED',
@@ -169,6 +164,7 @@ function createImagesRenderingMachine(options, context) {
                 'WINDOW_LEVEL_TOGGLED',
                 'IMAGE_COLOR_RANGE_RESET',
                 'ANIMATE_IMAGE_MIX',
+                'TOGGLE_LAYER_BBOX',
               ],
               { actions: forwardToNamedActor }
             ),

src/Rendering/VTKJS/Images/applyRenderedImage.js

@@ -393,8 +393,15 @@ function applyRenderedImage(context, { data: { name } }) {
 
   // call after representations are created
   updateCroppingParametersFromImage(context, actorContext.fusedImage)
+  if (actorContext.image) {
+    context.itkVtkView.updateLabelBoundingBox(
+      name,
+      actorContext.image.getWorldBounds(actorContext.loadedScale)
+    )
+  }
   if (actorContext.labelImage) {
     context.itkVtkView.updateLabelBoundingBox(
+      actorContext.labelImageName,
       actorContext.labelImage.getWorldBounds(actorContext.loadedScale)
     )
   }

src/Rendering/VTKJS/Images/imagesRenderingMachineOptions.js

@@ -1,6 +1,6 @@
 import createImageRenderer from './createImageRenderer'
 import toggleLayerVisibility from './toggleLayerVisibility'
-import toggleLabelBBox from './toggleLabelBBox'
+import toggleLayerBBox from './toggleLayerBBox'
 import applyComponentVisibility from './applyComponentVisibility'
 import updateRenderedImage from './updateRenderedImage'
 import updateHistogram from './updateHistogram'
@@ -100,7 +100,7 @@ const imagesRenderingMachineOptions = {
       applySelectedLabel,
       applyCinematicChanged,
 
-      toggleLabelBBox,
+      toggleLayerBBox,
     },
 
     guards: {

src/Rendering/VTKJS/Images/toggleLayerBBox.js

@@ -0,0 +1,9 @@
+function toggleLayerBBox(context, event) {
+  const name = event.data.layerName
+  const actorContext = context.layers.actorContext.get(name)
+  actorContext.bbox = !actorContext.bbox
+  context.itkVtkView.setEnableBBox(name, actorContext.bbox)
+  context.service.send('RENDER')
+}
+
+export default toggleLayerBBox

src/Rendering/VTKJS/vtk/ItkVtkViewProxy.js

@@ -704,15 +704,7 @@ function ItkVtkViewProxy(publicAPI, model) {
   model.axesCircleRadius = 4
   model.axesTextOffset = 14
 
-  model.enableLabelBBox = false
-  model.labelBBoxPolyData = vtkPolyData.newInstance()
-  model.labelBBoxMapper = vtkMapper.newInstance()
-  model.labelBBoxMapper.setInputData(model.labelBBoxPolyData)
-  model.labelBBoxGridActor = vtkActor.newInstance()
-  model.labelBBoxGridActor.setMapper(model.labelBBoxMapper)
-  model.labelBBoxGridActor.getProperty().setColor([1.0, 0.0, 0.0])
-  model.labelBBoxGridActor.setVisibility(false)
-  model.renderer.addActor(model.labelBBoxGridActor)
+  model.layerBBoxes = new Map()
 
   // API ----------------------------------------------------------------------
   publicAPI.updateDataProbeSize = updateDataProbeSize
@@ -958,14 +950,10 @@ function ItkVtkViewProxy(publicAPI, model) {
     }
   }
 
-  publicAPI.setEnableBBox = enable => {
-    if (enable != model.enableLabelBBox) {
-      model.enableLabelBBox = enable
-      model.labelBBoxGridActor.setVisibility(enable)
-      publicAPI.modified()
-      if (!model.renderWindow.getInteractor().isAnimating()) {
-        model.renderWindow.render()
-      }
+  publicAPI.setEnableBBox = (name, enable) => {
+    const data = model.layerBBoxes.get(name)
+    if (data.actor.getVisibility() !== enable) {
+      data.actor.setVisibility(enable)
     }
   }
 
@@ -1082,7 +1070,28 @@ function ItkVtkViewProxy(publicAPI, model) {
     publicAPI.renderLater()
   }
 
-  publicAPI.updateLabelBoundingBox = bounds => {
+  publicAPI.createLayerBoundingBox = name => {
+    const labelBBoxPolyData = vtkPolyData.newInstance()
+    const labelBBoxMapper = vtkMapper.newInstance()
+    labelBBoxMapper.setInputData(labelBBoxPolyData)
+    const labelBBoxGridActor = vtkActor.newInstance()
+    labelBBoxGridActor.setMapper(labelBBoxMapper)
+    labelBBoxGridActor.getProperty().setColor([1.0, 0.0, 0.0])
+    labelBBoxGridActor.setVisibility(false)
+    const data = {
+      polyData: labelBBoxPolyData,
+      actor: labelBBoxGridActor,
+    }
+    model.layerBBoxes.set(name, data)
+    model.renderer.addActor(data.actor)
+  }
+
+  publicAPI.updateLabelBoundingBox = (name, bounds) => {
+    if (!model.layerBBoxes.has(name)) {
+      publicAPI.createLayerBoundingBox(name)
+    }
+
+    const data = model.layerBBoxes.get(name)
     let points = vtkPoints.newInstance()
     for (let i = 0; i < 2; i++) {
       for (let j = 2; j < 4; j++) {
@@ -1091,14 +1100,14 @@ function ItkVtkViewProxy(publicAPI, model) {
         }
       }
     }
-    model.labelBBoxPolyData.setPoints(points)
+    data.polyData.setPoints(points)
 
     let lines = vtkCellArray.newInstance()
     lines.insertNextCell([0, 1, 3, 2, 0])
     lines.insertNextCell([4, 5, 7, 6, 4])
     lines.insertNextCell([0, 4, 6, 2])
     lines.insertNextCell([1, 5, 7, 3])
-    model.labelBBoxPolyData.setLines(lines)
+    data.polyData.setLines(lines)
   }
 }
 

src/Rendering/createRenderingMachine.js

@@ -263,7 +263,7 @@ const createRenderingMachine = (options, context) => {
             IMAGE_COLOR_RANGE_RESET: {
               actions: forwardTo('images'),
             },
-            TOGGLE_LABEL_BBOX: {
+            TOGGLE_LAYER_BBOX: {
               actions: forwardTo('images'),
             },
           },

src/UI/Layers/createLayersUIMachine.js

@@ -30,6 +30,7 @@ function spawnLayerRenderingActor(options) {
           const actorContext =
             layers.actorContext.get(name) ?? new LayerActorContext()
           actorContext.type = 'image'
+          actorContext.bbox = false
           layers.actorContext.set(name, actorContext)
           layers.lastAddedData = { name, data: event.data }
           layers.layerUIActors.set(
@@ -53,6 +54,7 @@ function spawnLayerRenderingActor(options) {
           const actorContext =
             layers.actorContext.get(name) ?? new LayerActorContext()
           actorContext.type = 'labelImage'
+          actorContext.bbox = false
           layers.actorContext.set(name, actorContext)
           layers.lastAddedData = { name, data: event.data }
           layers.layerUIActors.set(

src/UI/reference-ui/src/Layers/createLayerInterface.js

@@ -73,28 +73,30 @@ function createLayerEntry(context, name, layer) {
 
   layer.spinner = spinner
 
-  if (layer.type === 'labelImage') {
-    const labelBBoxButton = document.createElement('div')
-    labelBBoxButton.innerHTML = `<input id="${context.id}-labelBBoxButton" type="checkbox" class="${style.toggleInput}"><label itk-vtk-tooltip itk-vtk-tooltip-left itk-vtk-tooltip-content="Label BBox" class="${style.toggleButton}" for="${context.id}-labelBBoxButton"><img src="${boundingBoxIconDataUri}" alt="bbox"/></label>`
-    const labelBBoxButtonInput = labelBBoxButton.children[0]
-    const labelBBoxLabel = labelBBoxButton.children[1]
-    labelBBoxButton.style.height = '23px'
-    applyContrastSensitiveStyleToElement(
-      context,
-      'invertibleButton',
-      labelBBoxLabel
-    )
-    imageIcons.appendChild(labelBBoxButton)
-    labelBBoxButton.addEventListener('click', event => {
-      event.preventDefault()
-      event.stopPropagation()
-      context.service.send({
-        type: 'TOGGLE_LABEL_BBOX',
-        data: layer.imageActorContext.labelImageName,
-      })
-      labelBBoxButtonInput.checked = context.layers.labelBBoxEnabled
+  const layerBBoxButton = document.createElement('div')
+  layerBBoxButton.innerHTML = `<input id="${context.id}-layerBBoxButton" type="checkbox" class="${style.toggleInput}"><label itk-vtk-tooltip itk-vtk-tooltip-left itk-vtk-tooltip-content="Label BBox" class="${style.toggleButton}" for="${context.id}-layerBBoxButton"><img src="${boundingBoxIconDataUri}" alt="bbox"/></label>`
+  const layerBBoxButtonInput = layerBBoxButton.children[0]
+  const layerBBoxLabel = layerBBoxButton.children[1]
+  layerBBoxButton.style.height = '23px'
+  applyContrastSensitiveStyleToElement(
+    context,
+    'invertibleButton',
+    layerBBoxLabel
+  )
+  imageIcons.appendChild(layerBBoxButton)
+  layerBBoxButton.addEventListener('click', event => {
+    event.preventDefault()
+    event.stopPropagation()
+    context.service.send({
+      type: 'TOGGLE_LAYER_BBOX',
+      data: {
+        name: context.images.selectedName,
+        layerName: name,
+      },
     })
-  }
+    const actorContext = context.layers.actorContext.get(name)
+    layerBBoxButtonInput.checked = actorContext.bbox
+  })
 
   const icon = makeHtml(`<layer-icon class="${style.layerIcon}"></layer-icon>`)
   icon.layer = layer

src/createViewerMachine.js

@@ -359,7 +359,7 @@ const createViewerMachine = (options, context, eventEmitterCallback) => {
             IMAGE_COLOR_RANGE_RESET: {
               actions: [forwardTo('ui'), forwardTo('rendering')],
             },
-            TOGGLE_LABEL_BBOX: {
+            TOGGLE_LAYER_BBOX: {
               actions: [forwardTo('ui'), forwardTo('rendering')],
             },
           },