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

package/src/nvimage/utils.ts

@@ -210,6 +210,8 @@ export type ImageFromUrlOptions = {
     zarrChannel?: number
     /** Convert OME spatial units to millimeters for NIfTI compatibility (default: true) */
     zarrConvertUnits?: boolean
+    /** World-space center [x, y, z] in mm where the zarr volume center should be positioned */
+    zarrCenterMM?: [number, number, number]
 }
 
 // TODO centralize shared options

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:
@@ -156,6 +158,7 @@ export class NVZarrHelper {
     private voxelTranslations: { width: number; height: number; depth: number }
     private hasTranslations: boolean
     private convertUnitsToMm: boolean
+    private worldOffsetMM: [number, number, number] = [0, 0, 0]
 
     private centerX: number
     private centerY: number
@@ -169,6 +172,7 @@ export class NVZarrHelper {
     private currentAbortController: AbortController | null = null
     private runningMin = Infinity
     private runningMax = -Infinity
+    private calibrationDone = false
 
     // Debounce state for batching chunk updates
     private updateDebounceTimer: ReturnType<typeof setTimeout> | null = null
@@ -248,7 +252,7 @@ export class NVZarrHelper {
         helper.pyramidLevel = level
         helper.updateLevelInfo()
 
-        // Center on the level
+        // Center on the level (use levelDims so initial view shows the center of the zarr)
         helper.centerX = helper.levelDims.width / 2
         helper.centerY = helper.levelDims.height / 2
         helper.centerZ = helper.levelDims.depth / 2
@@ -256,12 +260,16 @@ export class NVZarrHelper {
         // 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 +360,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 */
@@ -451,6 +459,9 @@ export class NVZarrHelper {
                 affine[row][col] = niftiCols[col].scale
                 affine[row][3] = niftiCols[col].trans
             }
+            affine[0][3] += this.worldOffsetMM[0]
+            affine[1][3] += this.worldOffsetMM[1]
+            affine[2][3] += this.worldOffsetMM[2]
             hdr.affine = affine
         } else {
             // No OME translations — calculate offset based on pan position
@@ -481,13 +492,16 @@ export class NVZarrHelper {
                     affine[row][col] = niftiCols[col].scale
                     affine[row][3] = niftiCols[col].trans
                 }
+                affine[0][3] += this.worldOffsetMM[0]
+                affine[1][3] += this.worldOffsetMM[1]
+                affine[2][3] += this.worldOffsetMM[2]
                 hdr.affine = affine
             } else {
                 // Fallback: simple diagonal affine with pan position
                 hdr.affine = [
-                    [scaleW, 0, 0, volStartW * scaleW],
-                    [0, -scaleH, 0, volStartH * scaleH],
-                    [0, 0, -scaleD, volStartD * scaleD],
+                    [scaleW, 0, 0, volStartW * scaleW + this.worldOffsetMM[0]],
+                    [0, -scaleH, 0, volStartH * scaleH + this.worldOffsetMM[1]],
+                    [0, 0, -scaleD, volStartD * scaleD + this.worldOffsetMM[2]],
                     [0, 0, 0, 1]
                 ]
             }
@@ -505,6 +519,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 +533,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 +599,124 @@ export class NVZarrHelper {
         return { ...this.volumeDims }
     }
 
+    getWorldOffset(): [number, number, number] {
+        return [...this.worldOffsetMM]
+    }
+
+    /**
+     * Set the world-space offset so the full level's center maps to targetMM in world space.
+     * Computes the native physical center of the zarr level, then sets worldOffsetMM
+     * so that center aligns with targetMM. Also centers the viewport on the level center.
+     */
+    setWorldCenter(targetMM: [number, number, number]): void {
+        const { scaleW, scaleH, scaleD } = this.getConvertedScales()
+        const { transW, transH, transD } = this.getConvertedTranslations()
+        const axisNames = this.pyramidInfo.axisMapping.spatialAxisNames
+
+        // Native physical center per OME dim (width=last, height=2nd-to-last, depth=3rd-to-last)
+        const physW = (this.levelDims.width / 2) * scaleW + transW
+        const physH = (this.levelDims.height / 2) * scaleH + transH
+        const physD = (this.levelDims.depth / 2) * scaleD + transD
+
+        // Map OME dims to x/y/z rows using axis names
+        const nativeCenter: [number, number, number] = [0, 0, 0]
+        const dims = [
+            { name: axisNames[axisNames.length - 1], phys: physW },
+            { name: axisNames[axisNames.length - 2], phys: physH },
+            { name: axisNames.length >= 3 ? axisNames[axisNames.length - 3] : 'z', phys: physD }
+        ]
+        for (const d of dims) {
+            const row = d.name === 'x' ? 0 : d.name === 'y' ? 1 : 2
+            nativeCenter[row] = d.phys
+        }
+
+        this.worldOffsetMM = [targetMM[0] - nativeCenter[0], targetMM[1] - nativeCenter[1], targetMM[2] - nativeCenter[2]]
+
+        // Center viewport on level center so visible region is at the target
+        this.centerX = this.levelDims.width / 2
+        this.centerY = this.levelDims.height / 2
+        this.centerZ = this.levelDims.depth / 2
+        this.clampCenter()
+
+        this.updateAffine()
+    }
+
+    /**
+     * 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 }
+    } {
+        // Subtract world offset to convert from offset world-space back to native zarr space
+        mmX -= this.worldOffsetMM[0]
+        mmY -= this.worldOffsetMM[1]
+        mmZ -= this.worldOffsetMM[2]
+
+        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
@@ -651,9 +797,6 @@ export class NVZarrHelper {
                 const abortController = new AbortController()
                 this.currentAbortController = abortController
 
-                this.runningMin = Infinity
-                this.runningMax = -Infinity
-
                 await new Promise<void>((resolve) => {
                     requestAnimationFrame(() => resolve())
                 })
@@ -800,15 +943,17 @@ export class NVZarrHelper {
             return
         }
 
-        // Track min/max for calibration
-        const step = Math.max(1, Math.floor(data.length / 2000))
-        for (let i = 0; i < data.length; i += step) {
-            const val = data[i]
-            if (val < this.runningMin) {
-                this.runningMin = val
-            }
-            if (val > this.runningMax) {
-                this.runningMax = val
+        // Track min/max for initial calibration (skipped once calibration is done)
+        if (!this.calibrationDone) {
+            const step = Math.max(1, Math.floor(data.length / 2000))
+            for (let i = 0; i < data.length; i += step) {
+                const val = data[i]
+                if (val < this.runningMin) {
+                    this.runningMin = val
+                }
+                if (val > this.runningMax) {
+                    this.runningMax = val
+                }
             }
         }
 
@@ -849,6 +994,9 @@ export class NVZarrHelper {
     }
 
     private updateCalibration(): void {
+        if (this.calibrationDone) {
+            return
+        }
         if (this.runningMin < Infinity && this.runningMax > -Infinity) {
             this.hostImage.cal_min = this.runningMin
             this.hostImage.cal_max = this.runningMax
@@ -856,6 +1004,7 @@ export class NVZarrHelper {
             this.hostImage.robust_max = this.runningMax
             this.hostImage.global_min = this.runningMin
             this.hostImage.global_max = this.runningMax
+            this.calibrationDone = true
         }
     }
 

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>