runs in vscode;

fix typescript and compile errors; adjust border
niivue · Dec 9, 2023 · 0a832a2 · 0a832a2
1 parent a94590f
commit 0a832a2
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 85 deletions.
diff --git a/niivue/index.html b/niivue/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" type="text/css" href="/src/index.css" />
   </head>
 
-  <body class="bg-gray-900 text-white">
+  <body class="text-white p-0">
     <div id="app" class="w-screen h-screen"></div>
     <script>
       if (typeof acquireVsCodeApi === 'function') {

diff --git a/niivue/package.json b/niivue/package.json
@@ -9,7 +9,8 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "test": "vitest",
-    "test:ui": "vitest --ui"
+    "test:ui": "vitest --ui",
+    "watch": "vite build --watch"
   },
   "dependencies": {
     "@niivue/niivue": "0.38.7",

diff --git a/niivue/src/components/HomeScreen.ts b/niivue/src/components/HomeScreen.ts
@@ -1,5 +1,4 @@
 import { html } from 'htm/preact'
-import { OpenFromWeb } from './OpenFromWeb'
 
 export const HomeScreen = () => html`
   <h2 class="text-3xl font-bold text-gray-200 p-2">Bookmarklet</h2>

diff --git a/niivue/src/components/Menu.ts b/niivue/src/components/Menu.ts
@@ -1,22 +1,20 @@
 import { html } from 'htm/preact'
 import { AppProps } from './App'
-import { computed, effect, useSignal } from '@preact/signals'
+import { Signal, computed, effect, useSignal } from '@preact/signals'
 import { useRef } from 'preact/hooks'
 import { addImagesEvent, addOverlayEvent } from '../events'
 import { SLICE_TYPE } from '@niivue/niivue'
 import { Scaling } from './Scaling'
 import { handleOpacity, handleOverlayColormap } from './OverlayOptions'
 
 export const Menu = (props: AppProps) => {
-  const { selection, selectionMode, nvArray, nv0, sliceType, crosshair, hideUI, interpolation } =
-    props
+  const { selection, selectionMode, nvArray, sliceType, crosshair, hideUI, interpolation } = props
   const nvArraySelected = computed(() =>
     selectionMode.value > 0 && selection.value.length > 0
       ? nvArray.value.filter((_, i) => selection.value.includes(i))
       : nvArray.value,
   )
   const multiImage = computed(() => nvArray.value.length > 1)
-  const nvFirstSelected = computed(() => nvArraySelected.value[0])
 
   effect(() => {
     if (selection.value.length == 0 && nvArray.value.length > 0) {
@@ -61,15 +59,15 @@ export const Menu = (props: AppProps) => {
 
   const isOverlay = computed(() => nvArraySelected.value[0]?.volumes?.length > 1)
 
-  const overlayButtonOnClick = () => {
-    const nv = nvArraySelected.value[0]
-    if (!nv || nv.volumes.length == 0) {
-      return
-    }
-    // if no overlay, add one
-    // if overlay, show overlay menu
-    // overlay menu includes color, min, max, opacity, hide
-  }
+  // const overlayButtonOnClick = () => {
+  //   const nv = nvArraySelected.value[0]
+  //   if (!nv || nv.volumes.length == 0) {
+  //     return
+  //   }
+  //   // if no overlay, add one
+  //   // if overlay, show overlay menu
+  //   // overlay menu includes color, min, max, opacity, hide
+  // }
 
   const addOverlay = () => {
     // if image
@@ -238,7 +236,9 @@ export const Menu = (props: AppProps) => {
         <${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} />
+      <${ImageSelect} label="Select" state=${selectionMode} visible=${multiImage}>
+        <${MenuEntry} label="Select All" onClick=${selectAll} />
+      </${ImageSelect}>
     </div>
     ${isVolume.value && html`<p class="pl-2">${getMetadataString(nvArraySelected.value[0])}</p>`}
     <${ScalingBox}
@@ -256,12 +256,12 @@ export const Menu = (props: AppProps) => {
   `
 }
 
-const ScalingBox = (props) => {
+const ScalingBox = (props: any) => {
   const { nvArraySelected, selectedOverlayNumber, overlayMenu, visible } = props
   if (visible && !visible.value) return html``
 
   const setScaling = (val: ScalingOpts) => {
-    nvArraySelected.value.forEach((nv) => {
+    nvArraySelected.value.forEach((nv: Niivue) => {
       nv.volumes[0].cal_min = val.min
       nv.volumes[0].cal_max = val.max
       nv.updateGLVolume()
@@ -273,9 +273,9 @@ const ScalingBox = (props) => {
       ? ['symmetric', ...nvArraySelected.value[0].colormaps()]
       : ['ge_color', 'hsv', 'symmetric', 'warm'],
   )
-  const handleColormap = (e) => {
+  const handleColormap = (e: any) => {
     const colormap = e.target.value
-    nvArraySelected.value.forEach((nv) => {
+    nvArraySelected.value.forEach((nv: Niivue) => {
       handleOverlayColormap(nv, selectedOverlayNumber.value, colormap)
     })
   }
@@ -284,9 +284,9 @@ const ScalingBox = (props) => {
     () => nvArraySelected.value[0]?.volumes?.[selectedOverlayNumber.value],
   )
 
-  const changeOpacity = (e) => {
+  const changeOpacity = (e: any) => {
     const opacity = e.target.value
-    nvArraySelected.value.forEach((nv) => {
+    nvArraySelected.value.forEach((nv: Niivue) => {
       handleOpacity(nv, selectedOverlayNumber.value, opacity)
     })
   }
@@ -333,7 +333,7 @@ export interface ScalingOpts {
   max: number
 }
 
-export const MenuButton = ({ label, onClick }) => {
+export const MenuButton = ({ label, onClick }: { label: string; onClick: Function }) => {
   return html`
     <div class="relative">
       <button class="hover:bg-gray-700 px-2 rounded-md h-6 align-middle" onClick=${onClick}>
@@ -343,11 +343,30 @@ export const MenuButton = ({ label, onClick }) => {
   `
 }
 
+// It seems that one child is given directly while multiple children are given as an array
+function setChildren(children: any, isOpen: Signal<boolean>) {
+  if (children) {
+    if (Array.isArray(children)) {
+      children.forEach((child, _) => {
+        if (child?.props) {
+          child.props.isOpen = isOpen
+        }
+      })
+    } else {
+      if (children?.props) {
+        children.props.isOpen = isOpen
+      }
+    }
+  }
+}
+
 // maybe selection menu with arrow and option to keep selection?
 // select single and multiple options
-export const ImageSelect = ({ label, state, children, visible }) => {
+export const ImageSelect = ({ label, state, children, visible }: any) => {
   if (visible && !visible.value) return html``
   const isOpen = useSignal(false)
+  setChildren(children, isOpen)
+
   return html`
     <div class="relative group">
       <button
@@ -368,16 +387,10 @@ export const ImageSelect = ({ label, state, children, visible }) => {
   `
 }
 
-export const MenuItem = ({ label, onClick, children, visible }) => {
+export const MenuItem = ({ label, onClick, children, visible }: any) => {
   if (visible && !visible.value) return html``
   const isOpen = useSignal(false)
-  if (children) {
-    children.forEach((child, _) => {
-      if (child?.props) {
-        child.props.isOpen = isOpen
-      }
-    })
-  }
+  setChildren(children, isOpen)
 
   return html`
     <div class="relative group">
@@ -401,7 +414,7 @@ export const MenuItem = ({ label, onClick, children, visible }) => {
   `
 }
 
-export const MenuEntry = ({ label, onClick, isOpen, visible }) => {
+export const MenuEntry = ({ label, onClick, isOpen, visible }: any) => {
   if (visible && !visible.value) return html``
   return html`
     <button
@@ -416,7 +429,7 @@ export const MenuEntry = ({ label, onClick, isOpen, visible }) => {
   `
 }
 
-export const MenuItemSelect = ({ menuEntries }) => {
+export const MenuItemSelect = ({ menuEntries }: any) => {
   const isOpen = useSignal(false)
   const selectedElement = useSignal(0)
 
@@ -438,7 +451,7 @@ export const MenuItemSelect = ({ menuEntries }) => {
         ${isOpen.value &&
         html`
           ${menuEntries.map(
-            (item, index) => html`
+            (item: any, index: number) => html`
               <button
                 class="w-full px-2 py-1 text-left bg-gray-900 hover:bg-gray-700"
                 onClick=${() => {

diff --git a/niivue/src/components/OverlayOptions.ts b/niivue/src/components/OverlayOptions.ts
@@ -1,50 +1,13 @@
-import { html } from 'htm/preact'
-import { Scaling } from './Scaling'
-
-export const OverlayOptions = ({ nv }: { nv: Niivue }) => {
-  if (!isVolumeOverlay(nv) && !isMeshOverlay(nv)) {
-    return html``
-  }
-
-  const overlay = getOverlay(nv)
-  const colormaps = getColormaps(nv)
-
-  return html`
-    <div class="relative group">
-      <${Scaling} setScaling=${handleOverlayScaling(nv)} init=${overlay} />
-      <select onchange=${handleOverlayColormap(nv)} value=${overlay.colormap}>
-        ${colormaps.map((c) => html`<option value=${c}>${c}</option>`)}
-      </select>
-      <input
-        type="number"
-        value=${overlay.opacity}
-        onchange=${handleOpacity(nv)}
-        min="0"
-        max="1"
-        step="0.1"
-      />
-    </div>
-  `
-}
-
 export function getColormaps(nv: Niivue) {
   if (isVolumeOverlay(nv)) {
     return ['symmetric', ...nv.colormaps()]
   }
   return ['ge_color', 'hsv', 'symmetric', 'warm']
 }
 
-function getOverlay(nv: Niivue) {
-  const layers = isVolumeOverlay(nv) ? nv.volumes : nv.meshes[0].layers
-  return layers[layers.length - 1]
-}
-
 function isVolumeOverlay(nv: Niivue) {
   return nv.volumes.length > 0
 }
-function isMeshOverlay(nv: Niivue) {
-  return nv.meshes.length > 0 && nv.meshes[0].layers.length > 0
-}
 
 export function handleOpacity(nv: Niivue, layerNumber: number, opacity: number) {
   if (isVolumeOverlay(nv)) {

diff --git a/niivue/src/components/Scaling.ts b/niivue/src/components/Scaling.ts
@@ -31,7 +31,7 @@ export const Scaling = ({ setScaling, init }: ScalingProps) => {
       <label class="items-baseline h-6 px-2">
         <span>Min </span>
         <input
-          class="border-2 border-gray-600 rounded-md bg-gray-700 h-6"
+          class="border-2 border-gray-600 rounded-md bg-gray-700 h-6 w-20"
           type="number"
           ref=${minRef}
           onchange=${update}
@@ -40,7 +40,7 @@ export const Scaling = ({ setScaling, init }: ScalingProps) => {
       <label class="items-baseline h-6 px-2">
         <span>Max </span>
         <input
-          class="border-2 border-gray-600 rounded-md bg-gray-700 h-6"
+          class="border-2 border-gray-600 rounded-md bg-gray-700 h-6 w-20"
           type="number"
           ref=${maxRef}
           onchange=${update}

diff --git a/niivue/src/index.css b/niivue/src/index.css
@@ -9,16 +9,6 @@
   1px 1px 0 #000;
 }
 
-.orange-yellow-gradient {
-  background: linear-gradient(to right,
-      rgb(255 0 0 / 60%),
-      rgb(255 166 0 / 60%));
-}
-
-input[type='number'] {
-  width: 5em;
-}
-
 a:link {
   color: #5599dd;
 }
diff --git a/package.json b/package.json
@@ -142,6 +142,7 @@
     "start:webview": "cd niivue && yarn run start",
     "build:webview": "cd niivue && yarn run build",
     "test:webview": "cd niivue && yarn run test",
+    "watch:webview": "cd niivue && yarn run watch",
     "vscode:prepublish": "yarn run compile",
     "compile": "tsc -p ./",
     "watch": "tsc -watch -p ./",