only set location of the first selected volume

niivue/src/components/NiiVueCanvas.ts

@@ -8,19 +8,16 @@ import { ExtendedNiivue } from '../events'
 
 interface NiiVueCanvasProps {
   nv: ExtendedNiivue
-  intensity: Signal<string>
   width: number
   height: number
   render: Signal<number>
 }
 
 export const NiiVueCanvas = ({
   nv,
-  intensity,
   width,
   height,
   sliceType,
-  location,
   render,
   nvArray,
 }: AppProps & NiiVueCanvasProps) => {
@@ -35,7 +32,6 @@ export const NiiVueCanvas = ({
     loadVolume(nv, nv.body).then(async () => {
       nv.isLoaded = true
       nv.body = null
-      nv.onLocationChange = (data: any) => setIntensityAndLocation(data, intensity, location)
       nv.createOnLocationChange()
       render.value++ // required to update the names
       nvArray.value = [...nvArray.value] // trigger react signal for changes
@@ -117,19 +113,3 @@ async function loadVolume(nv: ExtendedNiivue, item: any) {
     nv.loadMeshes(meshList)
   }
 }
-
-function setIntensityAndLocation(data: any, intensity: Signal<string>, location: Signal<string>) {
-  const parts = data.string.split('=')
-  if (parts.length === 2) {
-    intensity.value = parts.pop()
-  }
-  location.value = `${arrayToString(data.mm)} mm | Grid: ${arrayToString(data.vox, 0)}`
-}
-
-function arrayToString(array: number[], precision = 2) {
-  let str = ''
-  for (const val of array) {
-    str += val.toFixed(precision) + ' x '
-  }
-  return str.slice(0, -3)
-}

niivue/src/components/Volume.ts

@@ -1,6 +1,7 @@
 import { html } from 'htm/preact'
+import { useEffect } from 'preact/hooks'
 import { NiiVueCanvas } from './NiiVueCanvas'
-import { computed, useSignal } from '@preact/signals'
+import { computed, useSignal, Signal } from '@preact/signals'
 import { AppProps, SelectionMode } from './App'
 import { ExtendedNiivue } from '../events'
 
@@ -14,11 +15,16 @@ export interface VolumeProps {
 }
 
 export const Volume = (props: AppProps & VolumeProps) => {
-  const { name, volumeIndex, hideUI, selection, selectionMode, nv } = props
+  const { name, volumeIndex, hideUI, selection, selectionMode, nv, location } = props
   const intensity = useSignal('')
   const dispName = name.length > 20 ? `...${name.slice(-20)}` : name
   const selected = computed(() => selection.value.includes(volumeIndex))
 
+  useEffect(() => {
+    nv.onLocationChange = (data: any) =>
+      setIntensityAndLocation(data, intensity, location, volumeIndex == selection.value[0])
+  }, [selection.value])
+
   // it would maybe need a invisible box over the volume to prevent the click event, stopPropagation and preventDefault don't work
   const selectClick = () => {
     if (selectionMode.value == SelectionMode.SINGLE) {
@@ -49,7 +55,7 @@ export const Volume = (props: AppProps & VolumeProps) => {
       class="relative ${selectionMode.value && selected.value ? 'outline outline-blue-500' : ''}"
       onClick=${selectClick}
     >
-      <${NiiVueCanvas} ...${props} intensity=${intensity} />
+      <${NiiVueCanvas} ...${props} />
       ${hideUI.value > 0 &&
       html`
         <div class="absolute pointer-events-none text-xl text-outline left-1 top-0">
@@ -90,3 +96,26 @@ export const Volume = (props: AppProps & VolumeProps) => {
     </div>
   `
 }
+
+function setIntensityAndLocation(
+  data: any,
+  intensity: Signal<string>,
+  location: Signal<string>,
+  setLocation: Boolean,
+) {
+  const parts = data.string.split('=')
+  if (parts.length === 2) {
+    intensity.value = parts.pop()
+  }
+  if (setLocation) {
+    location.value = `${arrayToString(data.mm)} mm | Grid: ${arrayToString(data.vox, 0)}`
+  }
+}
+
+function arrayToString(array: number[], precision = 2) {
+  let str = ''
+  for (const val of array) {
+    str += val.toFixed(precision) + ' x '
+  }
+  return str.slice(0, -3)
+}