Merge pull request #692 from PaulHax/image-mix-animate

Image mix animate

package.json

@@ -45,7 +45,7 @@
     "itk-mesh-io": "^1.0.0-b.84",
     "itk-viewer-color-maps": "^1.2.0",
     "itk-viewer-icons": "11.13.1",
-    "itk-viewer-transfer-function-editor": "^1.2.2",
+    "itk-viewer-transfer-function-editor": "^1.2.5",
     "itk-wasm": "^1.0.0-b.83",
     "mobx": "^5.15.7",
     "mousetrap": "^1.6.5",

src/Rendering/Images/createImageRenderingActor.js

@@ -334,6 +334,45 @@ const afterCompareMaybeForceUpdate = context => {
   forceUpdate(context)
 }
 
+const applyAnimateImageMix = (
+  { images: { actorContext: actorMap }, itkVtkView, service },
+  { data: { play, name } }
+) => {
+  const actorContext = actorMap.get(name)
+  if (play) {
+    if (!actorContext.imageMixAnimationDirection)
+      actorContext.imageMixAnimationDirection = 1
+
+    itkVtkView.getInteractor().requestAnimation('animateImageMix')
+    actorContext.imageMixAnimation = itkVtkView
+      .getInteractor()
+      .onAnimation(() => {
+        const { imageMix, fixedImageName } = actorContext.compare
+        let newMix = imageMix + 0.02 * actorContext.imageMixAnimationDirection
+        if (newMix > 1) {
+          newMix = 1
+          actorContext.imageMixAnimationDirection *= -1
+        }
+        if (newMix < 0) {
+          newMix = 0
+          actorContext.imageMixAnimationDirection *= -1
+        }
+        service.send({
+          type: 'COMPARE_IMAGES',
+          data: {
+            name,
+            fixedImageName: fixedImageName,
+            options: { imageMix: newMix },
+          },
+        })
+      })
+  } else if (actorContext.imageMixAnimation) {
+    actorContext.imageMixAnimation.unsubscribe()
+    actorContext.imageMixAnimation = null
+    itkVtkView.getInteractor().cancelAnimation('animateImageMix')
+  }
+}
+
 const KNOWN_ERRORS = [
   'Voxel count over max at scale',
   'Image byte count over max at scale',
@@ -489,6 +528,9 @@ const eventResponses = {
   COMPARE_IMAGES: {
     actions: [assignCompare, sendCompareUpdated, afterCompareMaybeForceUpdate],
   },
+  ANIMATE_IMAGE_MIX: {
+    actions: applyAnimateImageMix,
+  },
 }
 
 const CHANGE_BOUNDS_EVENTS = [

src/Rendering/Images/createImagesRenderingMachine.js

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

src/Rendering/createRenderingMachine.js

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

src/UI/reference-ui/package.json

@@ -45,7 +45,7 @@
     "@material/web": "^1.0.0-pre.4",
     "itk-viewer-color-maps": "^1.2.0",
     "itk-viewer-icons": "^11.13.1",
-    "itk-viewer-transfer-function-editor": "^1.2.2",
+    "itk-viewer-transfer-function-editor": "^1.2.5",
     "lit": "^2.4.0",
     "xstate-lit": "^1.3.1"
   }

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

@@ -310,6 +310,10 @@
   padding-right: 6px;
 }
 
+.noFlexBasis {
+  flex-basis: auto;
+}
+
 .layerIcon {
   display: inline-block;
 }

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

@@ -1,4 +1,8 @@
-import { rotateIconDataUri } from 'itk-viewer-icons'
+import {
+  playIconDataUri,
+  pauseIconDataUri,
+  rotateIconDataUri,
+} from 'itk-viewer-icons'
 import style from '../ItkVtkViewer.module.css'
 import { makeHtml } from '../utils'
 
@@ -24,9 +28,16 @@ export const compareUI = context => (send, onReceive) => {
   root.appendChild(checkerboardUi)
 
   const swapButtonId = `${context.id}-swapImageOrder`
+  const playImageMixButtonId = `${context.id}-image-mix-play`
+  const playImageMixImgId = `${context.id}-image-mix-play-img`
   const imageMixRoot = makeHtml(`
     <div style="display: flex; justify-content: space-between;">
       <label class="${style.inputLabel}">Image Mix</label>
+      <input id="${playImageMixButtonId}" type="checkbox" class="${style.toggleInput}">
+        <label itk-vtk-tooltip itk-vtk-tooltip-top-annotations itk-vtk-tooltip-content="animate" class="${style.visibleButton} ${style.noFlexBasis} ${style.toggleButton}" for="${playImageMixButtonId}">
+          <img src="${playIconDataUri}" id="${playImageMixImgId}" alt="animate" />
+        </label>
+      </input>
       <input type="range" min="0" max="1" step=".01" value=".5" 
         class="${style.slider}" />
       <input type="checkbox" id="${swapButtonId}" class="${style.toggleInput}">
@@ -42,7 +53,12 @@ export const compareUI = context => (send, onReceive) => {
     'input'
   )
 
-  const [imageMixSlider, swapOrder] = imageMixRoot.querySelectorAll('input')
+  const [
+    animateImageMix,
+    imageMixSlider,
+    swapOrder,
+  ] = imageMixRoot.querySelectorAll('input')
+  const animateImageImg = imageMixRoot.querySelector(`#${playImageMixImgId}`)
 
   const update = () => {
     const name = context.images.selectedName
@@ -66,6 +82,10 @@ export const compareUI = context => (send, onReceive) => {
     swapOrder.checked = !!compare?.swapImageOrder ?? false
 
     imageMixSlider.value = compare?.imageMix ?? 0.5
+
+    animateImageImg.src = imageContext?.imageMixAnimation
+      ? pauseIconDataUri
+      : playIconDataUri
   }
 
   update()
@@ -97,6 +117,7 @@ export const compareUI = context => (send, onReceive) => {
     const x = parsePattern(event.target.value)
     updateCompare({ pattern: [x, ...yz] })
   })
+
   yPattern.addEventListener('change', event => {
     event.preventDefault()
     event.stopPropagation()
@@ -108,6 +129,7 @@ export const compareUI = context => (send, onReceive) => {
     const y = parsePattern(event.target.value)
     updateCompare({ pattern: [x, y, z] })
   })
+
   zPattern.addEventListener('change', event => {
     event.preventDefault()
     event.stopPropagation()
@@ -119,11 +141,19 @@ export const compareUI = context => (send, onReceive) => {
     const z = parsePattern(event.target.value)
     updateCompare({ pattern: [x, y, z] })
   })
-  swapOrder.addEventListener('change', event => {
+
+  animateImageMix.addEventListener('input', event => {
     event.preventDefault()
     event.stopPropagation()
 
-    updateCompare({ swapImageOrder: event.target.checked })
+    const name = context.images.selectedName
+    context.service.send({
+      type: 'ANIMATE_IMAGE_MIX',
+      data: {
+        name,
+        play: event.target.checked,
+      },
+    })
   })
 
   imageMixSlider.addEventListener('input', event => {
@@ -133,6 +163,13 @@ export const compareUI = context => (send, onReceive) => {
     updateCompare({ imageMix: event.target.value })
   })
 
+  swapOrder.addEventListener('change', event => {
+    event.preventDefault()
+    event.stopPropagation()
+
+    updateCompare({ swapImageOrder: event.target.checked })
+  })
+
   onReceive(event => {
     const { type } = event
     if (type === 'COMPARE_UPDATED') {

src/createViewerMachine.js

@@ -347,6 +347,9 @@ const createViewerMachine = (options, context, eventEmitterCallback) => {
             COMPARE_UPDATED: {
               actions: forwardTo('ui'),
             },
+            ANIMATE_IMAGE_MIX: {
+              actions: forwardTo('rendering'),
+            },
             COMPONENT_VISIBILITIES_UPDATED: {
               actions: forwardTo('ui'),
             },