Merge pull request #727 from PaulHax/download-volume

Download volume

package.json

@@ -31,7 +31,7 @@
   "types": "./src/index.d.ts",
   "dependencies": {
     "@kitware/vtk.js": "^26.9.15",
-    "@material/web": "^1.0.0-pre.4",
+    "@material/web": "^1.0.1",
     "@thewtex/iconselect.js": "^2.1.2",
     "@xstate/inspect": "^0.4.1",
     "axios": "^1.6.0",
@@ -44,7 +44,6 @@
     "itk-image-io": "^1.0.0-b.84",
     "itk-mesh-io": "^1.0.0-b.84",
     "itk-viewer-color-maps": "^1.2.0",
-    "itk-viewer-icons": "11.14.0",
     "itk-viewer-transfer-function-editor": "^1.2.5",
     "itk-wasm": "^1.0.0-b.83",
     "mobx": "^5.15.7",
@@ -98,7 +97,7 @@
     "postcss-loader": "^4.1.0",
     "prettier": "^1.19.1",
     "process": "^0.11.10",
-    "puppeteer": "^2.1.1",
+    "puppeteer": "^5.0.0",
     "raw-loader": "^4.0.2",
     "readable-stream": "^3.6.0",
     "request": "^2.88.2",
@@ -114,7 +113,7 @@
     "tap-spec": "^5.0.0",
     "tape": "^5.2.0",
     "tape-catch": "^1.0.6",
-    "typescript": "^4.6.3",
+    "typescript": "^5.3.3",
     "webpack": "^5.65.0",
     "webpack-cli": "^4.8.0",
     "webpack-dev-server": "^4.7.4",

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',

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)
+        }
+      )
+    },
   },
 }
 

src/Rendering/createRenderingMachine.js

@@ -266,6 +266,9 @@ const createRenderingMachine = (options, context) => {
             TOGGLE_LAYER_BBOX: {
               actions: forwardTo('images'),
             },
+            DOWNLOAD_IMAGE: {
+              actions: forwardTo('images'),
+            },
           },
         },
       },

src/UI/reference-ui/package.json

@@ -37,14 +37,14 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svgo": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.8.4"
+    "typescript": "^5.3.3"
   },
   "dependencies": {
     "@babel/runtime": "^7.17.6",
+    "@itk-viewer/icons": "^11.14.1",
     "@lit-labs/context": "^0.2.0",
-    "@material/web": "^1.0.0-pre.4",
+    "@material/web": "1.0.1",
     "itk-viewer-color-maps": "^1.2.0",
-    "itk-viewer-icons": "^11.14.0",
     "itk-viewer-transfer-function-editor": "^1.2.5",
     "lit": "^2.4.0",
     "xstate-lit": "^1.3.1"

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

@@ -1,5 +1,5 @@
 import style from '../ItkVtkViewer.module.css'
-import { volumeScatteringIconDataUri } from 'itk-viewer-icons'
+import { volumeScatteringIconDataUri } from '@itk-viewer/icons'
 
 const sliderMap = new Map()
 

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

@@ -1,7 +1,7 @@
 import style from '../ItkVtkViewer.module.css'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 
-import { blendModeIconDataUri } from 'itk-viewer-icons'
+import { blendModeIconDataUri } from '@itk-viewer/icons'
 
 function createBlendModeSelector(context, uiContainer) {
   const blendModeEntry = document.createElement('div')

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

@@ -3,7 +3,7 @@ import macro from '@kitware/vtk.js/macro'
 import style from '../ItkVtkViewer.module.css'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 
-import { gradientIconDataUri } from 'itk-viewer-icons'
+import { gradientIconDataUri } from '@itk-viewer/icons'
 
 function createGradientOpacitySlider(context, uiContainer) {
   const sliderEntry = document.createElement('div')

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

@@ -1,6 +1,6 @@
 import style from '../ItkVtkViewer.module.css'
 
-import { interpolationIconDataUri } from 'itk-viewer-icons'
+import { interpolationIconDataUri } from '@itk-viewer/icons'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 import toggleInterpolation from './toggleInterpolation'