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

package/build/niivue/index.js

@@ -19,7 +19,7 @@ import { mat4 as mat418, vec2, vec3 as vec324, vec4 as vec417 } from "gl-matrix"
 // package.json
 var package_default = {
   name: "@niivue/niivue",
-  version: "0.67.1-dev.0",
+  version: "0.67.1-dev.2",
   description: "minimal webgl2 nifti image viewer",
   types: "./build/niivue/index.d.ts",
   main: "./build/niivue/index.js",
@@ -22591,6 +22591,7 @@ var NVZarrHelper = class _NVZarrHelper {
     __publicField(this, "voxelTranslations");
     __publicField(this, "hasTranslations");
     __publicField(this, "convertUnitsToMm");
+    __publicField(this, "worldOffsetMM", [0, 0, 0]);
     __publicField(this, "centerX");
     __publicField(this, "centerY");
     __publicField(this, "centerZ");
@@ -22601,6 +22602,7 @@ var NVZarrHelper = class _NVZarrHelper {
     __publicField(this, "currentAbortController", null);
     __publicField(this, "runningMin", Infinity);
     __publicField(this, "runningMax", -Infinity);
+    __publicField(this, "calibrationDone", false);
     // Debounce state for batching chunk updates
     __publicField(this, "updateDebounceTimer", null);
     __publicField(this, "UPDATE_DEBOUNCE_MS", 50);
@@ -22663,9 +22665,9 @@ var NVZarrHelper = class _NVZarrHelper {
     const level = Math.max(0, Math.min(options.level, helper.pyramidInfo.levels.length - 1));
     helper.pyramidLevel = level;
     helper.updateLevelInfo();
-    helper.centerX = helper.volumeDims.width / 2;
-    helper.centerY = helper.volumeDims.height / 2;
-    helper.centerZ = helper.volumeDims.depth / 2;
+    helper.centerX = helper.levelDims.width / 2;
+    helper.centerY = helper.levelDims.height / 2;
+    helper.centerZ = helper.levelDims.depth / 2;
     helper.configureHostImage();
     return helper;
   }
@@ -22828,6 +22830,9 @@ var NVZarrHelper = 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 {
       const { scaleW, scaleH, scaleD } = this.getConvertedScales();
@@ -22851,12 +22856,15 @@ var NVZarrHelper = 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 {
         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]
         ];
       }
@@ -22930,11 +22938,46 @@ var NVZarrHelper = class _NVZarrHelper {
   getVolumeDims() {
     return { ...this.volumeDims };
   }
+  getWorldOffset() {
+    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) {
+    const { scaleW, scaleH, scaleD } = this.getConvertedScales();
+    const { transW, transH, transD } = this.getConvertedTranslations();
+    const axisNames = this.pyramidInfo.axisMapping.spatialAxisNames;
+    const physW = this.levelDims.width / 2 * scaleW + transW;
+    const physH = this.levelDims.height / 2 * scaleH + transH;
+    const physD = this.levelDims.depth / 2 * scaleD + transD;
+    const nativeCenter = [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]];
+    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, mmY, mmZ) {
+    mmX -= this.worldOffsetMM[0];
+    mmY -= this.worldOffsetMM[1];
+    mmZ -= this.worldOffsetMM[2];
     const { scaleW, scaleH, scaleD } = this.getConvertedScales();
     const axisNames = this.pyramidInfo.axisMapping.spatialAxisNames;
     const mmByAxis = { x: mmX, y: mmY, z: mmZ };
@@ -23046,8 +23089,6 @@ var NVZarrHelper = class _NVZarrHelper {
         this.currentAbortController?.abort();
         const abortController = new AbortController();
         this.currentAbortController = abortController;
-        this.runningMin = Infinity;
-        this.runningMax = -Infinity;
         await new Promise((resolve) => {
           requestAnimationFrame(() => resolve());
         });
@@ -23160,14 +23201,16 @@ var NVZarrHelper = class _NVZarrHelper {
     if (actualChunkW <= 0 || actualChunkH <= 0 || actualChunkD <= 0) {
       return;
     }
-    const step = Math.max(1, Math.floor(data.length / 2e3));
-    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;
+    if (!this.calibrationDone) {
+      const step = Math.max(1, Math.floor(data.length / 2e3));
+      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;
+        }
       }
     }
     const fullChunkVol = this.chunkSize.width * this.chunkSize.height * this.chunkSize.depth;
@@ -23198,6 +23241,9 @@ var NVZarrHelper = class _NVZarrHelper {
     }
   }
   updateCalibration() {
+    if (this.calibrationDone) {
+      return;
+    }
     if (this.runningMin < Infinity && this.runningMax > -Infinity) {
       this.hostImage.cal_min = this.runningMin;
       this.hostImage.cal_max = this.runningMax;
@@ -23205,6 +23251,7 @@ var NVZarrHelper = class _NVZarrHelper {
       this.hostImage.robust_max = this.runningMax;
       this.hostImage.global_min = this.runningMin;
       this.hostImage.global_max = this.runningMax;
+      this.calibrationDone = true;
     }
   }
   /**
@@ -23298,6 +23345,7 @@ var NVImage = class _NVImage {
     __publicField(this, "onOpacityChange", () => {
     });
     __publicField(this, "zarrHelper", null);
+    __publicField(this, "_hasExplicitZarrCenter", false);
     __publicField(this, "mm000");
     __publicField(this, "mm100");
     __publicField(this, "mm010");
@@ -23934,7 +23982,8 @@ var NVImage = class _NVImage {
     zarrLevel,
     zarrMaxVolumeSize,
     zarrChannel,
-    zarrConvertUnits
+    zarrConvertUnits,
+    zarrCenterMM
   } = {}) {
     if (url === "") {
       throw Error("url must not be empty");
@@ -23987,7 +24036,8 @@ var NVImage = class _NVImage {
           channel: zarrChannel,
           convertUnitsToMm: zarrConvertUnits,
           colormap,
-          opacity
+          opacity,
+          zarrCenterMM
         });
       }
       const zarrResult = await loadZarrData(url);
@@ -24066,6 +24116,10 @@ var NVImage = class _NVImage {
       cacheSize: options.cacheSize,
       convertUnitsToMm: options.convertUnitsToMm
     });
+    if (options.zarrCenterMM) {
+      nvimage.zarrHelper.setWorldCenter(options.zarrCenterMM);
+      nvimage._hasExplicitZarrCenter = true;
+    }
     if (options.colormap) {
       nvimage._colormap = options.colormap;
     }
@@ -36600,7 +36654,8 @@ var Niivue = class {
         zarrLevel: imageItem.zarrLevel,
         zarrMaxVolumeSize: imageItem.zarrMaxVolumeSize,
         zarrChannel: imageItem.zarrChannel,
-        zarrConvertUnits: imageItem.zarrConvertUnits
+        zarrConvertUnits: imageItem.zarrConvertUnits,
+        zarrCenterMM: imageItem.zarrCenterMM
       };
       const volume = await NVImage.loadFromUrl(imageOptions);
       this.document.addImageOptions(volume, imageOptions);
@@ -37180,6 +37235,20 @@ var Niivue = class {
     this.setVolume(volume, result.index);
     this.onImageLoaded(volume);
     if (volume.zarrHelper) {
+      if (!volume._hasExplicitZarrCenter && this.back && this.back !== volume && this.back.hdr?.dims) {
+        const bg = this.back;
+        const dims = bg.hdr.dims;
+        const affine = bg.hdr.affine;
+        const ci = (dims[1] - 1) / 2;
+        const cj = (dims[2] - 1) / 2;
+        const ck = (dims[3] - 1) / 2;
+        const bgCenter = [
+          affine[0][0] * ci + affine[0][1] * cj + affine[0][2] * ck + affine[0][3],
+          affine[1][0] * ci + affine[1][1] * cj + affine[1][2] * ck + affine[1][3],
+          affine[2][0] * ci + affine[2][1] * cj + affine[2][2] * ck + affine[2][3]
+        ];
+        volume.zarrHelper.setWorldCenter(bgCenter);
+      }
       volume.zarrHelper.onChunksUpdated = () => {
         this.updateGLVolume();
         this._skipDragInDraw = true;