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

package/build/{nvdocument-CcP6istx.d.ts → nvdocument-DrX6RoEG.d.ts}

@@ -448,6 +448,8 @@ 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];
 };
 type ImageFromFileOptions = {
     file: File | File[];
@@ -747,6 +749,7 @@ declare class NVZarrHelper {
     private voxelTranslations;
     private hasTranslations;
     private convertUnitsToMm;
+    private worldOffsetMM;
     private centerX;
     private centerY;
     private centerZ;
@@ -757,6 +760,7 @@ declare class NVZarrHelper {
     private currentAbortController;
     private runningMin;
     private runningMax;
+    private calibrationDone;
     private updateDebounceTimer;
     private readonly UPDATE_DEBOUNCE_MS;
     private pendingChunkCount;
@@ -770,6 +774,7 @@ declare class NVZarrHelper {
     onAllChunksLoaded?: () => void;
     private constructor();
     static create(hostImage: NVImage, url: string, options: NVZarrHelperOptions): Promise<NVZarrHelper>;
+    loadInitialChunks(): Promise<void>;
     private updateLevelInfo;
     private configureHostImage;
     /** Get unit-converted voxel scales */
@@ -791,6 +796,7 @@ declare class NVZarrHelper {
      */
     private updateAffine;
     beginDrag(): void;
+    endDrag(): void;
     panBy(dx: number, dy: number, dz?: number): Promise<void>;
     panTo(newCenterX: number, newCenterY: number, newCenterZ?: number): Promise<void>;
     setPyramidLevel(level: number): Promise<void>;
@@ -812,6 +818,28 @@ declare class NVZarrHelper {
         height: number;
         depth: number;
     };
+    getWorldOffset(): [number, number, number];
+    /**
+     * 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;
+    /**
+     * 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;
+        };
+    };
     private clampCenter;
     private getVisibleChunks;
     private updateVolume;
@@ -879,7 +907,7 @@ declare function copyAffine(affine: number[][]): number[][];
  */
 declare function transformsEqual(a: AffineTransform, b: AffineTransform, epsilon?: number): boolean;
 
-type TypedVoxelArray = Float32Array | Uint8Array | Int16Array | Float64Array | Uint16Array;
+type TypedVoxelArray = Float32Array | Uint8Array | Int16Array | Float64Array | Uint16Array | Int32Array | Uint32Array;
 /**
  * a NVImage encapsulates some image data and provides methods to query and operate on images
  */
@@ -936,6 +964,7 @@ declare class NVImage {
     onColormapChange: (img: NVImage) => void;
     onOpacityChange: (img: NVImage) => void;
     zarrHelper: NVZarrHelper | null;
+    _hasExplicitZarrCenter: boolean;
     mm000?: vec3;
     mm100?: vec3;
     mm010?: vec3;
@@ -1039,7 +1068,7 @@ declare class NVImage {
     /**
      * factory function to load and return a new NVImage instance from a given URL
      */
-    static loadFromUrl({ url, urlImgData, headers, name, colormap, opacity, cal_min, cal_max, trustCalMinMax, percentileFrac, ignoreZeroVoxels, useQFormNotSForm, colormapNegative, frame4D, isManifest, limitFrames4D, imageType, colorbarVisible, buffer, zarrLevel, zarrMaxVolumeSize, zarrChannel, zarrConvertUnits }?: Partial<Omit<ImageFromUrlOptions, 'url'>> & {
+    static loadFromUrl({ url, urlImgData, headers, name, colormap, opacity, cal_min, cal_max, trustCalMinMax, percentileFrac, ignoreZeroVoxels, useQFormNotSForm, colormapNegative, frame4D, isManifest, limitFrames4D, imageType, colorbarVisible, buffer, zarrLevel, zarrMaxVolumeSize, zarrChannel, zarrConvertUnits, zarrCenterMM }?: Partial<Omit<ImageFromUrlOptions, 'url'>> & {
         url?: string | Uint8Array | ArrayBuffer;
     }): Promise<NVImage>;
     /**
@@ -1054,6 +1083,7 @@ declare class NVImage {
         convertUnitsToMm?: boolean;
         colormap?: string;
         opacity?: number;
+        zarrCenterMM?: [number, number, number];
     }): Promise<NVImage>;
     static readFileAsync(file: File, bytesToLoad?: number): Promise<ArrayBuffer>;
     /**

package/build/utils/index.d.ts

@@ -1,4 +1,4 @@
-import { ar as Volume, x as NiftiHeader } from '../nvdocument-CcP6istx.js';
+import { ar as Volume, x as NiftiHeader } from '../nvdocument-DrX6RoEG.js';
 import { vec3, mat4, vec4 } from 'gl-matrix';
 import 'nifti-reader-js';
 

package/dist/index.d.ts

@@ -245,6 +245,8 @@ 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];
 };
 type ImageFromFileOptions = {
     file: File | File[];
@@ -544,6 +546,7 @@ declare class NVZarrHelper {
     private voxelTranslations;
     private hasTranslations;
     private convertUnitsToMm;
+    private worldOffsetMM;
     private centerX;
     private centerY;
     private centerZ;
@@ -554,6 +557,7 @@ declare class NVZarrHelper {
     private currentAbortController;
     private runningMin;
     private runningMax;
+    private calibrationDone;
     private updateDebounceTimer;
     private readonly UPDATE_DEBOUNCE_MS;
     private pendingChunkCount;
@@ -567,6 +571,7 @@ declare class NVZarrHelper {
     onAllChunksLoaded?: () => void;
     private constructor();
     static create(hostImage: NVImage, url: string, options: NVZarrHelperOptions): Promise<NVZarrHelper>;
+    loadInitialChunks(): Promise<void>;
     private updateLevelInfo;
     private configureHostImage;
     /** Get unit-converted voxel scales */
@@ -588,6 +593,7 @@ declare class NVZarrHelper {
      */
     private updateAffine;
     beginDrag(): void;
+    endDrag(): void;
     panBy(dx: number, dy: number, dz?: number): Promise<void>;
     panTo(newCenterX: number, newCenterY: number, newCenterZ?: number): Promise<void>;
     setPyramidLevel(level: number): Promise<void>;
@@ -609,6 +615,28 @@ declare class NVZarrHelper {
         height: number;
         depth: number;
     };
+    getWorldOffset(): [number, number, number];
+    /**
+     * 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;
+    /**
+     * 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;
+        };
+    };
     private clampCenter;
     private getVisibleChunks;
     private updateVolume;
@@ -676,7 +704,7 @@ declare function copyAffine(affine: number[][]): number[][];
  */
 declare function transformsEqual(a: AffineTransform, b: AffineTransform, epsilon?: number): boolean;
 
-type TypedVoxelArray = Float32Array | Uint8Array | Int16Array | Float64Array | Uint16Array;
+type TypedVoxelArray = Float32Array | Uint8Array | Int16Array | Float64Array | Uint16Array | Int32Array | Uint32Array;
 /**
  * a NVImage encapsulates some image data and provides methods to query and operate on images
  */
@@ -733,6 +761,7 @@ declare class NVImage {
     onColormapChange: (img: NVImage) => void;
     onOpacityChange: (img: NVImage) => void;
     zarrHelper: NVZarrHelper | null;
+    _hasExplicitZarrCenter: boolean;
     mm000?: vec3;
     mm100?: vec3;
     mm010?: vec3;
@@ -836,7 +865,7 @@ declare class NVImage {
     /**
      * factory function to load and return a new NVImage instance from a given URL
      */
-    static loadFromUrl({ url, urlImgData, headers, name, colormap, opacity, cal_min, cal_max, trustCalMinMax, percentileFrac, ignoreZeroVoxels, useQFormNotSForm, colormapNegative, frame4D, isManifest, limitFrames4D, imageType, colorbarVisible, buffer, zarrLevel, zarrMaxVolumeSize, zarrChannel, zarrConvertUnits }?: Partial<Omit<ImageFromUrlOptions, 'url'>> & {
+    static loadFromUrl({ url, urlImgData, headers, name, colormap, opacity, cal_min, cal_max, trustCalMinMax, percentileFrac, ignoreZeroVoxels, useQFormNotSForm, colormapNegative, frame4D, isManifest, limitFrames4D, imageType, colorbarVisible, buffer, zarrLevel, zarrMaxVolumeSize, zarrChannel, zarrConvertUnits, zarrCenterMM }?: Partial<Omit<ImageFromUrlOptions, 'url'>> & {
         url?: string | Uint8Array | ArrayBuffer;
     }): Promise<NVImage>;
     /**
@@ -851,6 +880,7 @@ declare class NVImage {
         convertUnitsToMm?: boolean;
         colormap?: string;
         opacity?: number;
+        zarrCenterMM?: [number, number, number];
     }): Promise<NVImage>;
     static readFileAsync(file: File, bytesToLoad?: number): Promise<ArrayBuffer>;
     /**
@@ -2314,6 +2344,7 @@ declare class Niivue {
     private canvasObserver;
     syncOpts: SyncOpts;
     readyForSync: boolean;
+    private _skipDragInDraw;
     uiData: UIData;
     back: NVImage | null;
     overlays: NVImage[];

package/dist/index.js

@@ -5249,7 +5249,7 @@ var forEach3 = (function() {
 // package.json
 var package_default = {
   name: "@niivue/niivue",
-  version: "0.67.0",
+  version: "0.67.1-dev.2",
   description: "minimal webgl2 nifti image viewer",
   types: "./build/niivue/index.d.ts",
   main: "./build/niivue/index.js",
@@ -31227,9 +31227,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 */:
@@ -31281,6 +31283,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");
@@ -31291,6 +31294,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);
@@ -31357,9 +31361,11 @@ var NVZarrHelper = class _NVZarrHelper {
     helper.centerY = helper.levelDims.height / 2;
     helper.centerZ = helper.levelDims.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;
@@ -31431,12 +31437,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() {
@@ -31516,6 +31522,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();
@@ -31539,12 +31548,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]
         ];
       }
@@ -31555,6 +31567,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;
@@ -31564,12 +31579,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();
   }
@@ -31609,6 +31630,89 @@ 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 };
+    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;
@@ -31677,8 +31781,6 @@ var NVZarrHelper = class _NVZarrHelper {
         this.currentAbortController?.abort();
         const abortController = new AbortController();
         this.currentAbortController = abortController;
-        this.runningMin = Infinity;
-        this.runningMax = -Infinity;
         await new Promise((resolve2) => {
           requestAnimationFrame(() => resolve2());
         });
@@ -31791,14 +31893,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;
@@ -31829,6 +31933,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;
@@ -31836,6 +31943,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;
     }
   }
   /**
@@ -31929,6 +32037,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");
@@ -32565,7 +32674,8 @@ var NVImage = class _NVImage {
     zarrLevel,
     zarrMaxVolumeSize,
     zarrChannel,
-    zarrConvertUnits
+    zarrConvertUnits,
+    zarrCenterMM
   } = {}) {
     if (url === "") {
       throw Error("url must not be empty");
@@ -32618,7 +32728,8 @@ var NVImage = class _NVImage {
           channel: zarrChannel,
           convertUnitsToMm: zarrConvertUnits,
           colormap,
-          opacity
+          opacity,
+          zarrCenterMM
         });
       }
       const zarrResult = await loadZarrData(url);
@@ -32697,6 +32808,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;
     }
@@ -43414,6 +43529,7 @@ var Niivue = class {
       crosshair: false
     });
     __publicField(this, "readyForSync", false);
+    __publicField(this, "_skipDragInDraw", false);
     // UI Data
     __publicField(this, "uiData", {
       mousedown: false,
@@ -44510,6 +44626,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]];
@@ -44655,6 +44774,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);
@@ -44714,6 +44836,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;
@@ -45284,7 +45409,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);
@@ -45864,10 +45990,27 @@ 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;
         this.drawScene();
+        this._skipDragInDraw = false;
       };
+      volume.zarrHelper.loadInitialChunks().catch((err2) => log.error("Failed to load initial zarr chunks", err2));
     }
     log.debug("loaded volume", volume.name);
     log.debug(volume);
@@ -49994,7 +50137,9 @@ var Niivue = class {
       }
       if (panPromises.length > 0) {
         Promise.all(panPromises).then(() => {
+          this._skipDragInDraw = true;
           this.drawScene();
+          this._skipDragInDraw = false;
         }).catch((err2) => {
           log.error("Failed to pan Zarr:", err2);
         });
@@ -53271,7 +53416,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;
       }