refactor, simplify;

fix minor bugs
niivue · Dec 9, 2023 · 16188bf · 16188bf
1 parent 34477b1
commit 16188bf
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 38 deletions.
diff --git a/niivue/src/components/App.ts b/niivue/src/components/App.ts
@@ -29,14 +29,9 @@ export interface AppProps {
   nvArray: Signal<Niivue[]>
   selection: Signal<Array<number>>
   selectionMode: Signal<number>
-  nv0: Signal<Niivue>
   hideUI: Signal<number>
-  crosshair: Signal<boolean>
   sliceType: Signal<number>
-  interpolation: Signal<boolean>
   location: Signal<string>
-  radiologicalConvention: Signal<boolean>
-  colorbar: Signal<boolean>
 }
 
 export interface ScalingOpts {
@@ -50,13 +45,8 @@ function useAppState(): AppProps {
     nvArray: useSignal<Niivue[]>([]),
     selection: useSignal<Array<number>>([]),
     selectionMode: useSignal(0),
-    nv0: useSignal<Niivue>({ isLoaded: false }),
     hideUI: useSignal(3), // 0: hide all, 1: show name, 2: hide overlay, 3: show-all
-    crosshair: useSignal(true),
     sliceType: useSignal<number>(SLICE_TYPE.MULTIPLANAR), // all views
-    interpolation: useSignal(true),
     location: useSignal(''),
-    radiologicalConvention: useSignal(false),
-    colorbar: useSignal(false),
   }
 }
diff --git a/niivue/src/components/Container.ts b/niivue/src/components/Container.ts
@@ -63,12 +63,11 @@ export const Container = (props: AppProps) => {
 }
 
 function remove(props: AppProps, i: number) {
-  const { nvArray, nv0, location } = props
+  const { nvArray, location } = props
   return () => {
     nvArray.value.splice(i, 1)
     nvArray.value = [...nvArray.value]
     if (nvArray.value.length == 0) {
-      nv0.value = { isLoaded: false }
       location.value = ''
     }
   }

diff --git a/niivue/src/components/Menu.ts b/niivue/src/components/Menu.ts
@@ -8,7 +8,7 @@ import { Scaling } from './Scaling'
 import { handleOpacity, handleOverlayColormap } from './OverlayOptions'
 
 export const Menu = (props: AppProps) => {
-  const { selection, selectionMode, nvArray, sliceType, crosshair, hideUI, interpolation } = props
+  const { selection, selectionMode, nvArray, sliceType, hideUI } = props
   const isVscode = typeof vscode === 'object'
   const nvArraySelected = computed(() =>
     selectionMode.value > 0 && selection.value.length > 0
@@ -126,7 +126,7 @@ export const Menu = (props: AppProps) => {
 
   const resetZoom = () => {
     nvArray.value.forEach((nv) => {
-      nv.uiData.pan2Dxyzmm = [0, 0, 0, 1]
+      nv.scene.pan2Dxyzmm = [0, 0, 0, 1]
       nv.drawScene()
     })
   }
@@ -184,16 +184,52 @@ export const Menu = (props: AppProps) => {
     overlayMenu.value = true
   }
 
+  const interpolation = useSignal(true)
+  effect(() => {
+    nvArray.value.forEach((nv) => {
+      nv.setInterpolation(!interpolation.value)
+      nv.drawScene()
+    })
+  })
+
+  const crosshair = useSignal(true)
+  effect(() => {
+    nvArray.value.forEach((nv) => {
+      try {
+        nv.setCrosshairWidth(crosshair.value)
+      } catch (e) {
+        console.log(e)
+      }
+      nv.drawScene()
+    })
+  })
+
+  const radiologicalConvention = useSignal(false)
+  effect(() => {
+    nvArray.value.forEach((nv) => {
+      nv.setRadiologicalConvention(radiologicalConvention.value)
+      nv.drawScene()
+    })
+  })
+
+  const colorbar = useSignal(false)
+  effect(() => {
+    nvArray.value.forEach((nv) => {
+      nv.opts.isColorbar = colorbar.value
+      nv.drawScene()
+    })
+  })
+
   return html`
     <div class="flex flex-wrap items-baseline gap-2">
       ${!isVscode && html`<${MenuButton} label="Home" onClick=${homeEvent} />`}
       <${MenuItem} label="Add Image" onClick=${addImagesEvent}>
         <${MenuEntry} label="File(s)" onClick=${addImagesEvent} />
-        <${MenuEntry} label="URL" onClick=${() => console.log('Not implemented yet - url')} />
+        <!-- <${MenuEntry} label="URL" onClick=${() => console.log('Not implemented yet - url')} />
         <${MenuEntry}
           label="DICOM Folder"
           onClick=${() => console.log('Not implemented yet - dicom folder')}
-        />
+        /> -->
         <${MenuEntry} label="Example Image" onClick=${() =>
     openImage('https://niivue.github.io/niivue-demo-images/mni152.nii.gz')} />
       </${MenuItem}>
@@ -234,7 +270,8 @@ export const Menu = (props: AppProps) => {
         <${MenuEntry} label="Remove" onClick=${removeLastVolume} visible=${isOverlay} />
       </${MenuItem}>
       <${MenuItem} label="Header" onClick=${showHeader} visible=${isVolume} >
-        <${MenuEntry} label="Set Header" onClick=${() => console.log('Not implemented yet')} />
+        <!-- <${MenuEntry} label="Set Header" onClick=${() =>
+    console.log('Not implemented yet')} /> -->
         <${MenuEntry} label="Set Headers to 1" onClick=${setVoxelSize1AndOrigin0} />
       </${MenuItem}>
       <${ImageSelect} label="Select" state=${selectionMode} visible=${multiImage}>

diff --git a/niivue/src/components/NiiVueCanvas.ts b/niivue/src/components/NiiVueCanvas.ts
@@ -2,7 +2,7 @@ import { NVImage, NVMesh } from '@niivue/niivue'
 import { html } from 'htm/preact'
 import { useRef, useEffect } from 'preact/hooks'
 import { isImageType } from '../utility'
-import { Signal, effect } from '@preact/signals'
+import { Signal } from '@preact/signals'
 import { AppProps } from './App'
 
 interface NiiVueCanvasProps {
@@ -18,14 +18,9 @@ export const NiiVueCanvas = ({
   intensity,
   width,
   height,
-  nv0,
   sliceType,
-  interpolation,
   location,
   render,
-  crosshair,
-  radiologicalConvention,
-  colorbar,
   nvArray,
 }: AppProps & NiiVueCanvasProps) => {
   const canvasRef = useRef<HTMLCanvasElement>()
@@ -39,27 +34,13 @@ export const NiiVueCanvas = ({
       nv.body = null
       nv.onLocationChange = (data: any) => setIntensityAndLocation(data, intensity, location)
       nv.createOnLocationChange()
-      if (!nv0.value.isLoaded) {
-        nv0.value = nv
-      }
       render.value++ // required to update the names
       nvArray.value = [...nvArray.value] // trigger react signal for changes
     })
   }, [nv.body])
 
   if (nv.isLoaded && nv.volumes.length > 0) {
     nv.setSliceType(sliceType.value)
-    nv.setInterpolation(!interpolation.value)
-    nv.setRadiologicalConvention(radiologicalConvention.value)
-    try {
-      nv.setCrosshairWidth(crosshair.value)
-    } catch (e) {
-      console.log(e) // sometime fails
-    }
-    effect(() => {
-      nv.opts.isColorbar = colorbar.value
-      nv.drawScene()
-    })
   }
 
   useEffect(() => nv.drawScene(), [height, width]) // avoids black images

diff --git a/niivue/src/components/Volume.ts b/niivue/src/components/Volume.ts
@@ -49,7 +49,9 @@ export const Volume = (props: AppProps & VolumeProps) => {
       <${NiiVueCanvas} ...${props} intensity=${intensity} />
       ${hideUI.value > 0 &&
       html`
-        <div class="absolute pointer-events-none text-xl text-outline left-1">${dispName}</div>
+        <div class="absolute pointer-events-none text-xl text-outline left-1 top-0">
+          ${dispName}
+        </div>
         <div class="pointer-events-none absolute bottom-1 left-1">
           <span class="text-outline">${intensity}</span>
         </div>