feat(imagesRenderingMachineOptions): add downloadImage action

Kitware · Dec 12, 2023 · e4c18b9 · e4c18b9
1 parent 0644851
commit e4c18b9
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 24 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Rendering/Images/createImagesRenderingMachine.js b/src/Rendering/Images/createImagesRenderingMachine.js
@@ -148,6 +148,9 @@ function createImagesRenderingMachine(options, context) {
                 to: (c, e) => `imageRenderingActor-${e.data}`,
               }),
             },
+            DOWNLOAD_IMAGE: {
+              actions: ['downloadImage'],
+            },
             ...makeTransitions(
               [
                 'IMAGE_GRADIENT_OPACITY_CHANGED',

diff --git a/src/Rendering/VTKJS/Images/imagesRenderingMachineOptions.js b/src/Rendering/VTKJS/Images/imagesRenderingMachineOptions.js
@@ -1,3 +1,5 @@
+import { convertVtkToItkImage } from 'vtk.js/Sources/Common/DataModel/ITKHelper'
+import { writeImageArrayBuffer, copyImage } from 'itk-wasm'
 import createImageRenderer from './createImageRenderer'
 import toggleLayerVisibility from './toggleLayerVisibility'
 import toggleLayerBBox from './toggleLayerBBox'
@@ -64,6 +66,23 @@ const isTargetScaleLoaded = context => {
   return loadedScale === targetScale
 }
 
+function downloadArray(content, filename = 'download') {
+  const url = URL.createObjectURL(new Blob([content]))
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+  document.body.appendChild(a)
+  function clickHandler() {
+    setTimeout(() => {
+      URL.revokeObjectURL(url)
+      a.removeEventListener('click', clickHandler)
+    }, 200)
+  }
+  a.addEventListener('click', clickHandler, false)
+  a.click()
+  return a
+}
+
 const imagesRenderingMachineOptions = {
   imageRenderingActor: {
     services: {
@@ -117,6 +136,21 @@ const imagesRenderingMachineOptions = {
 
   actions: {
     selectImageLayer,
+    downloadImage: (context, event) => {
+      const { name, format } = event.data
+      const fileName = `${name}.${format}`
+      const actorContext = context.images.actorContext.get(name)
+      const fusedImage = actorContext.fusedImage
+      if (!fusedImage) {
+        console.warn('No image to download')
+      }
+      const itkImage = copyImage(convertVtkToItkImage(fusedImage, true))
+      writeImageArrayBuffer(null, itkImage, fileName).then(
+        ({ arrayBuffer }) => {
+          downloadArray(arrayBuffer, fileName)
+        }
+      )
+    },
   },
 }
 

diff --git a/src/Rendering/createRenderingMachine.js b/src/Rendering/createRenderingMachine.js
@@ -266,6 +266,9 @@ const createRenderingMachine = (options, context) => {
             TOGGLE_LAYER_BBOX: {
               actions: forwardTo('images'),
             },
+            DOWNLOAD_IMAGE: {
+              actions: forwardTo('images'),
+            },
           },
         },
       },

diff --git a/src/UI/reference-ui/dist/referenceUIMachineOptions.js b/src/UI/reference-ui/dist/referenceUIMachineOptions.js
@@ -10895,11 +10895,12 @@ function createLayerEntry(context, name, layer) {
       )
       .concat(
         extensions
-          .map(function(extension) {
+          .map(function(extension, i) {
             return '<label>\n                <md-radio name="format" value="'
+              .concat(extension, '" ')
               .concat(
-                extension,
-                '" touch-target="wrapper"></md-radio>\n                <span aria-hidden="true">'
+                i === 0 ? 'checked' : '',
+                ' touch-target="wrapper"></md-radio>\n                <span aria-hidden="true">'
               )
               .concat(extension, '</span>\n              </label>')
           })

diff --git a/src/UI/reference-ui/src/Layers/createLayerInterface.js b/src/UI/reference-ui/src/Layers/createLayerInterface.js
@@ -109,9 +109,11 @@ function createLayerEntry(context, name, layer) {
       <form id="save-form" slot="content" method="dialog">
         ${extensions
           .map(
-            extension =>
+            (extension, i) =>
               `<label>
-                <md-radio name="format" value="${extension}" touch-target="wrapper"></md-radio>
+                <md-radio name="format" value="${extension}" ${
+                i === 0 ? 'checked' : ''
+              } touch-target="wrapper"></md-radio>
                 <span aria-hidden="true">${extension}</span>
               </label>`
           )

diff --git a/src/createViewer.js b/src/createViewer.js
@@ -183,9 +183,6 @@ const createViewer = async (
             break
           case 'TAKE_SCREENSHOT':
             break
-          case 'SAVE_ROI':
-            eventEmitter.emit('saveRoi', event.data)
-            break
           default:
             throw new Error(`Unexpected event type: ${event.type}`)
         }

diff --git a/src/createViewerMachine.js b/src/createViewerMachine.js
@@ -363,10 +363,7 @@ const createViewerMachine = (options, context, eventEmitterCallback) => {
               actions: [forwardTo('ui'), forwardTo('rendering')],
             },
             DOWNLOAD_IMAGE: {
-              actions: ['downloadImage'],
-            },
-            SAVE_ROI: {
-              actions: [forwardTo('eventEmitter')],
+              actions: [forwardTo('rendering')],
             },
           },
         },

diff --git a/src/viewerMachineOptions.js b/src/viewerMachineOptions.js
@@ -8,17 +8,6 @@ const ViewerMachineOptions = {
   actions: {
     createRenderingViewContainers,
     styleRenderingViewContainers,
-    downloadImage: (context, event) => {
-      const { croppingPlanes } = context.main
-      context.service.send({
-        type: 'SAVE_ROI',
-        data: {
-          name: event.data.name,
-          layerName: event.data.layerName,
-          croppingPlanes,
-        },
-      })
-    },
   },
 
   ui: referenceUIMachineOptions,