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

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.0",
+  version: "0.67.1-dev.0",
   description: "minimal webgl2 nifti image viewer",
   types: "./build/niivue/index.d.ts",
   main: "./build/niivue/index.js",
@@ -22535,9 +22535,11 @@ function createTypedVoxelArray(datatypeCode, size) {
     case 512 /* DT_UINT16 */:
       return new Uint16Array(size);
     case 4 /* DT_INT16 */:
-    case 8 /* DT_INT32 */:
       return new Int16Array(size);
+    case 8 /* DT_INT32 */:
+      return new Int32Array(size);
     case 768 /* DT_UINT32 */:
+      return new Uint32Array(size);
     case 16 /* DT_FLOAT32 */:
       return new Float32Array(size);
     case 64 /* DT_FLOAT64 */:
@@ -22661,13 +22663,15 @@ 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.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;
     helper.configureHostImage();
-    await helper.updateVolume();
     return helper;
   }
+  async loadInitialChunks() {
+    await this.updateVolume();
+  }
   updateLevelInfo() {
     const levelInfo = this.pyramidInfo.levels[this.pyramidLevel];
     const shape = levelInfo.shape;
@@ -22739,12 +22743,12 @@ var NVZarrHelper = class _NVZarrHelper {
     img.img = createTypedVoxelArray(this.datatypeCode, width * height * depth);
     this.updateAffine();
     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 */
   getConvertedScales() {
@@ -22863,6 +22867,9 @@ var NVZarrHelper = class _NVZarrHelper {
   beginDrag() {
     this.centerAtDragStart = { x: this.centerX, y: this.centerY, z: this.centerZ };
   }
+  endDrag() {
+    this.centerAtDragStart = null;
+  }
   async panBy(dx, dy, dz = 0) {
     this.centerX -= dx;
     this.centerY -= dy;
@@ -22872,12 +22879,18 @@ var NVZarrHelper = class _NVZarrHelper {
     await this.updateVolume();
   }
   async panTo(newCenterX, newCenterY, newCenterZ) {
+    const prevX = this.centerX;
+    const prevY = this.centerY;
+    const prevZ = this.centerZ;
     this.centerX = newCenterX;
     this.centerY = newCenterY;
     if (newCenterZ !== void 0) {
       this.centerZ = newCenterZ;
     }
     this.clampCenter();
+    if (Math.abs(this.centerX - prevX) < 1e-3 && Math.abs(this.centerY - prevY) < 1e-3 && Math.abs(this.centerZ - prevZ) < 1e-3) {
+      return;
+    }
     this.updateAffine();
     await this.updateVolume();
   }
@@ -22917,6 +22930,54 @@ var NVZarrHelper = class _NVZarrHelper {
   getVolumeDims() {
     return { ...this.volumeDims };
   }
+  /**
+   * Convert physical (mm) coordinates back to real zarr level pixel coordinates.
+   * Inverts the affine: levelPixel = (mm - OME_translation) / scale
+   */
+  mmToLevelCoords(mmX, mmY, mmZ) {
+    const { scaleW, scaleH, scaleD } = this.getConvertedScales();
+    const axisNames = this.pyramidInfo.axisMapping.spatialAxisNames;
+    const mmByAxis = { x: mmX, y: mmY, z: mmZ };
+    let levelW = 0;
+    let levelH = 0;
+    let levelD = 0;
+    if (axisNames.length >= 2) {
+      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 {
+      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 }
+    };
+  }
   clampCenter() {
     const halfW = this.volumeDims.width / 2;
     const halfH = this.volumeDims.height / 2;
@@ -34659,6 +34720,7 @@ var Niivue = class {
       crosshair: false
     });
     __publicField(this, "readyForSync", false);
+    __publicField(this, "_skipDragInDraw", false);
     // UI Data
     __publicField(this, "uiData", {
       mousedown: false,
@@ -35755,6 +35817,9 @@ var Niivue = class {
     }
     if (this.uiData.isDragging) {
       this.uiData.isDragging = false;
+      for (const vol of this.getZarrVolumes()) {
+        vol.zarrHelper?.endDrag();
+      }
       if (currentDragMode === 7 /* angle */) {
         if (this.uiData.angleState === "drawing_first_line") {
           this.uiData.angleFirstLine = [this.uiData.dragStart[0], this.uiData.dragStart[1], this.uiData.dragEnd[0], this.uiData.dragEnd[1]];
@@ -35900,6 +35965,9 @@ var Niivue = class {
     }
     if (this.uiData.isDragging) {
       this.uiData.isDragging = false;
+      for (const vol of this.getZarrVolumes()) {
+        vol.zarrHelper?.endDrag();
+      }
       if (this.getCurrentDragMode() === 1 /* contrast */) {
         this.calculateNewRange();
         this.refreshLayers(this.volumes[0], 0);
@@ -35959,6 +36027,9 @@ var Niivue = class {
     if (this.uiData.isDragging || this.uiData.mousedown) {
       log.debug("Mouse left canvas during drag, resetting drag state.");
       this.uiData.isDragging = false;
+      for (const vol of this.getZarrVolumes()) {
+        vol.zarrHelper?.endDrag();
+      }
       const resetState = createResetButtonState();
       this.uiData.mouseButtonLeftDown = resetState.mouseButtonLeftDown;
       this.uiData.mouseButtonCenterDown = resetState.mouseButtonCenterDown;
@@ -37111,8 +37182,11 @@ var Niivue = class {
     if (volume.zarrHelper) {
       volume.zarrHelper.onChunksUpdated = () => {
         this.updateGLVolume();
+        this._skipDragInDraw = true;
         this.drawScene();
+        this._skipDragInDraw = false;
       };
+      volume.zarrHelper.loadInitialChunks().catch((err) => log.error("Failed to load initial zarr chunks", err));
     }
     log.debug("loaded volume", volume.name);
     log.debug(volume);
@@ -41239,7 +41313,9 @@ var Niivue = class {
       }
       if (panPromises.length > 0) {
         Promise.all(panPromises).then(() => {
+          this._skipDragInDraw = true;
           this.drawScene();
+          this._skipDragInDraw = false;
         }).catch((err) => {
           log.error("Failed to pan Zarr:", err);
         });
@@ -44516,7 +44592,7 @@ var Niivue = class {
         this.dragForSlicer3D([this.uiData.dragStart[0], this.uiData.dragStart[1], this.uiData.dragEnd[0], this.uiData.dragEnd[1]]);
         return;
       }
-      if (this.getCurrentDragMode() === 3 /* pan */) {
+      if (this.getCurrentDragMode() === 3 /* pan */ && !this._skipDragInDraw) {
         this.dragForPanZoom([this.uiData.dragStart[0], this.uiData.dragStart[1], this.uiData.dragEnd[0], this.uiData.dragEnd[1]]);
         return;
       }