@niivue/niivue 0.67.1-dev.0 → 0.67.1-dev.1

package/src/nvimage/zarr/NVZarrHelper.ts

@@ -95,9 +95,11 @@ function createTypedVoxelArray(datatypeCode: number, size: number): TypedVoxelAr
         case NiiDataType.DT_UINT16:
             return new Uint16Array(size)
         case NiiDataType.DT_INT16:
-        case NiiDataType.DT_INT32:
             return new Int16Array(size)
+        case NiiDataType.DT_INT32:
+            return new Int32Array(size)
         case NiiDataType.DT_UINT32:
+            return new Uint32Array(size)
         case NiiDataType.DT_FLOAT32:
             return new Float32Array(size)
         case NiiDataType.DT_FLOAT64:
@@ -249,19 +251,23 @@ export class NVZarrHelper {
         helper.updateLevelInfo()
 
         // Center on the level
-        helper.centerX = helper.levelDims.width / 2
-        helper.centerY = helper.levelDims.height / 2
-        helper.centerZ = helper.levelDims.depth / 2
+        helper.centerX = helper.volumeDims.width / 2
+        helper.centerY = helper.volumeDims.height / 2
+        helper.centerZ = helper.volumeDims.depth / 2
 
         // Configure the host NVImage
         helper.configureHostImage()
 
-        // Load initial chunks
-        await helper.updateVolume()
+        // Don't load chunks here — loadInitialChunks() must be called after
+        // the onChunksUpdated callback is registered (see addVolume in Niivue).
 
         return helper
     }
 
+    async loadInitialChunks(): Promise<void> {
+        await this.updateVolume()
+    }
+
     private updateLevelInfo(): void {
         const levelInfo = this.pyramidInfo.levels[this.pyramidLevel]
         const shape = levelInfo.shape
@@ -352,12 +358,12 @@ export class NVZarrHelper {
         // Store original affine so resetVolumeAffine() works on zarr volumes
         img.originalAffine = copyAffine(hdr.affine)
 
-        img.cal_min = NaN
-        img.cal_max = NaN
-        img.robust_min = NaN
-        img.robust_max = NaN
-        img.global_min = NaN
-        img.global_max = NaN
+        img.cal_min = 0
+        img.cal_max = 0
+        img.robust_min = 0
+        img.robust_max = 0
+        img.global_min = 0
+        img.global_max = 0
     }
 
     /** Get unit-converted voxel scales */
@@ -505,6 +511,10 @@ export class NVZarrHelper {
         this.centerAtDragStart = { x: this.centerX, y: this.centerY, z: this.centerZ }
     }
 
+    endDrag(): void {
+        this.centerAtDragStart = null
+    }
+
     async panBy(dx: number, dy: number, dz: number = 0): Promise<void> {
         this.centerX -= dx
         this.centerY -= dy
@@ -515,12 +525,22 @@ export class NVZarrHelper {
     }
 
     async panTo(newCenterX: number, newCenterY: number, newCenterZ?: number): Promise<void> {
+        const prevX = this.centerX
+        const prevY = this.centerY
+        const prevZ = this.centerZ
+
         this.centerX = newCenterX
         this.centerY = newCenterY
         if (newCenterZ !== undefined) {
             this.centerZ = newCenterZ
         }
         this.clampCenter()
+
+        // Skip if clamped position is same as before (prevents infinite loop at boundaries)
+        if (Math.abs(this.centerX - prevX) < 0.001 && Math.abs(this.centerY - prevY) < 0.001 && Math.abs(this.centerZ - prevZ) < 0.001) {
+            return
+        }
+
         this.updateAffine()
         await this.updateVolume()
     }
@@ -571,6 +591,77 @@ export class NVZarrHelper {
         return { ...this.volumeDims }
     }
 
+    /**
+     * Convert physical (mm) coordinates back to real zarr level pixel coordinates.
+     * Inverts the affine: levelPixel = (mm - OME_translation) / scale
+     */
+    mmToLevelCoords(
+        mmX: number,
+        mmY: number,
+        mmZ: number
+    ): {
+        width: number
+        height: number
+        depth: number
+        level: number
+        levelDims: { width: number; height: number; depth: number }
+    } {
+        const { scaleW, scaleH, scaleD } = this.getConvertedScales()
+        const axisNames = this.pyramidInfo.axisMapping.spatialAxisNames
+
+        // Map physical mm (x/y/z) to OME spatial dimensions (width/height/depth)
+        // The affine maps NIfTI cols to physical rows by axis name:
+        //   col 0 (width)  → axis[-1], col 1 (height) → axis[-2], col 2 (depth) → axis[-3]
+        // We need the reverse: given physical x/y/z, find which OME dim it maps to
+        const mmByAxis: Record<string, number> = { x: mmX, y: mmY, z: mmZ }
+
+        let levelW = 0
+        let levelH = 0
+        let levelD = 0
+
+        if (axisNames.length >= 2) {
+            // Width maps to last spatial axis name
+            const wAxisName = axisNames[axisNames.length - 1]
+            const hAxisName = axisNames[axisNames.length - 2]
+            const dAxisName = axisNames.length >= 3 ? axisNames[axisNames.length - 3] : 'z'
+
+            const mmW = mmByAxis[wAxisName] ?? mmX
+            const mmH = mmByAxis[hAxisName] ?? mmY
+            const mmD = mmByAxis[dAxisName] ?? mmZ
+
+            if (this.hasTranslations) {
+                const { transW, transH, transD } = this.getConvertedTranslations()
+                levelW = scaleW !== 0 ? (mmW - transW) / scaleW : 0
+                levelH = scaleH !== 0 ? (mmH - transH) / scaleH : 0
+                levelD = scaleD !== 0 ? (mmD - transD) / scaleD : 0
+            } else {
+                levelW = scaleW !== 0 ? mmW / scaleW : 0
+                levelH = scaleH !== 0 ? mmH / scaleH : 0
+                levelD = scaleD !== 0 ? mmD / scaleD : 0
+            }
+        } else {
+            // Fallback: simple diagonal
+            if (this.hasTranslations) {
+                const { transW, transH, transD } = this.getConvertedTranslations()
+                levelW = scaleW !== 0 ? (mmX - transW) / scaleW : 0
+                levelH = scaleH !== 0 ? (mmY - transH) / scaleH : 0
+                levelD = scaleD !== 0 ? (mmZ - transD) / scaleD : 0
+            } else {
+                levelW = scaleW !== 0 ? mmX / scaleW : 0
+                levelH = scaleH !== 0 ? mmY / scaleH : 0
+                levelD = scaleD !== 0 ? mmZ / scaleD : 0
+            }
+        }
+
+        return {
+            width: Math.round(levelW),
+            height: Math.round(levelH),
+            depth: Math.round(levelD),
+            level: this.pyramidLevel,
+            levelDims: { ...this.levelDims }
+        }
+    }
+
     private clampCenter(): void {
         const halfW = this.volumeDims.width / 2
         const halfH = this.volumeDims.height / 2

package/src/index_zarr.html

@@ -1,152 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>NiiVue</title>
-    <link rel="stylesheet" href="niivue.css" />
-    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
-  </head>
-    <header>
-      &nbsp;
-      <label for="dragMode">Drag mode</label>
-      <select id="dragMode">
-        <option value="contrast">contrast</option>
-        <option value="measurement">measurement</option>
-        <option value="none">none</option>
-        <option value="pan" selected>pan/zoom</option>
-      </select>
-      &nbsp;
-      <label for="thickSelect">&nbsp; Thickness</label>
-      <select id="thickSelect">
-        <option>0.5</option>
-        <option>1.0</option>
-        <option>1.5</option>
-        <option selected>2.0</option>
-        <option>2.5</option>
-        <option>3.0</option>
-      </select>
-    </header>
-    <main id="canvas-container">
-      <div style="display: flex; width: 100%; height: 100%">
-        <canvas id="gl1"></canvas>
-      </div>
-    </main>
-    <footer>
-      <label id="statusBar">&nbsp; </label>
-    </footer>
-</html>
-<script type="module" async>
-  import { Niivue, NVImage, NVMesh, NVMeshLoaders, SHOW_RENDER, DRAG_MODE, SLICE_TYPE } from './niivue/index.ts'
-  thickSelect.onchange = function() {
-    nv1.setMeshThicknessOn2D(parseFloat(this.options[this.selectedIndex].text))
-  }
-  dragMode.onchange = function () {
-    switch (this.value) {
-      case "none":
-        nv1.opts.dragMode = nv1.dragModes.none
-        break
-      case "contrast":
-        nv1.opts.dragMode = nv1.dragModes.contrast
-        break
-      case "measurement":
-        nv1.opts.dragMode = nv1.dragModes.measurement
-        break
-      case "pan":
-        nv1.opts.dragMode = nv1.dragModes.pan
-        break
-    }
-  }
-  var volumeList1 = [
-    { url: "../demos/images/fs/brainmask.mgz" },
-  ]
-  const onLocationChange = (data) => {
-    statusBar.innerHTML = data.string
-  }
-  let defaults = {
-    loglevel: 'debug',
-    show3Dcrosshair: true,
-    onLocationChange: onLocationChange,
-  }
-  var nv1 = new Niivue(defaults)
-  await nv1.attachToCanvas(gl1)
-  nv1.opts.multiplanarShowRender = SHOW_RENDER.ALWAYS
-  nv1.opts.isOrientCube = true
-  nv1.opts.yoke3Dto2DZoom = true
-  nv1.opts.dragMode = nv1.dragModes.pan
-  nv1.opts.crosshairGap = 6
-  await nv1.loadVolumes(volumeList1)
-
-  await nv1.loadMeshes([
-    { url: "../demos/images/fs/rh.white", rgba255: [255, 0, 255, 255] },
-    { url: "../demos/images/fs/rh.pial", rgba255: [0, 255, 64, 255] },
-  ])
-  nv1.setMeshShader(nv1.meshes[0].id, 'crosscut')
-  nv1.setMeshShader(nv1.meshes[1].id, 'crosscut')
-  nv1.setClipPlane([0.0, 180, 20])
-
-  // Chunk-based random volume data animation
-  function startChunkAnimation() {
-    const vol = nv1.volumes[0]
-    if (!vol || !vol.img) return
-
-    const nx = vol.hdr.dims[1]
-    const ny = vol.hdr.dims[2]
-    const nz = vol.hdr.dims[3]
-    const datatype = vol.hdr.datatypeCode
-
-    const CHUNK_SIZE = 8
-
-    // Pre-compute chunks (only include voxels with value > 0)
-    const chunks = []
-    for (let cz = 0; cz < nz; cz += CHUNK_SIZE) {
-      for (let cy = 0; cy < ny; cy += CHUNK_SIZE) {
-        for (let cx = 0; cx < nx; cx += CHUNK_SIZE) {
-          const indices = []
-          for (let z = cz; z < Math.min(cz + CHUNK_SIZE, nz); z++) {
-            for (let y = cy; y < Math.min(cy + CHUNK_SIZE, ny); y++) {
-              for (let x = cx; x < Math.min(cx + CHUNK_SIZE, nx); x++) {
-                const idx = x + y * nx + z * nx * ny
-                if (vol.img[idx] > 0) {
-                  indices.push(idx)
-                }
-              }
-            }
-          }
-          // Only add chunk if it has non-zero voxels
-          if (indices.length > 0) {
-            chunks.push(indices)
-          }
-        }
-      }
-    }
-
-    // Get random value generator based on data type
-    function getRandomValue() {
-      switch (datatype) {
-        case 2:   return Math.floor(Math.random() * 256)           // UINT8
-        case 4:   return Math.floor(Math.random() * 65536) - 32768 // INT16
-        case 512: return Math.floor(Math.random() * 65536)         // UINT16
-        case 16:  return Math.random()                             // FLOAT32
-        default:  return Math.floor(Math.random() * 256)
-      }
-    }
-
-    // Animation loop - run as fast as possible
-    function animate() {
-      for (const chunkIndices of chunks) {
-        const value = getRandomValue()
-        for (const idx of chunkIndices) {
-          vol.img[idx] = value
-        }
-      }
-      nv1.updateGLVolume()
-      requestAnimationFrame(animate)
-    }
-    requestAnimationFrame(animate)
-  }
-
-  // Auto-execute on page load
-  //startChunkAnimation()
-</script>