@niivue/niivue 0.48.0 → 0.49.0

package/build/index.js

@@ -10,7 +10,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import { mat4 as mat46, vec2, vec3 as vec311, vec4 as vec48 } from "gl-matrix";
 
 // package.json
-var version = "0.48.0";
+var version = "0.49.0";
 
 // src/logger.ts
 var _Log = class _Log {
@@ -83,6 +83,13 @@ var compileShader = function(gl, vert, frag) {
   gl.attachShader(program, fs);
   gl.linkProgram(program);
   if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    console.log(gl.getProgramInfoLog(program));
+    if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) {
+      console.log("Vertex shader compilation error:", gl.getShaderInfoLog(vs));
+    }
+    if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) {
+      console.log("Fragment shader compilation error:", gl.getShaderInfoLog(fs));
+    }
     log.error(gl.getProgramInfoLog(program));
     throw new Error("Shader failed to link, see console for log");
   }
@@ -1114,6 +1121,9 @@ void main(void) {
 	float r = max(0.00001, abs(mx - mn));
 	mn = min(mn, mx);
 	float txl = mix(0.0, 1.0, (f - mn) / r);
+	if (f > mn) { //issue1139: survives threshold, so round up to opaque voxel
+		txl = max(txl, 2.0/256.0);
+	}
 	//https://stackoverflow.com/questions/5879403/opengl-texture-coordinates-in-pixel-space
 	float nlayer = float(textureSize(colormap, 0).y);
 	//each volume has two color maps:
@@ -1130,6 +1140,8 @@ void main(void) {
 		r = max(0.00001, abs(mx - mn));
 		mn = min(mn, mx);
 		txl = 1.0 - mix(0.0, 1.0, (f - mn) / r);
+		//issue1139: survives threshold, so round up to opaque voxel
+		txl = max(txl, 2.0/256.0);
 		y = ((2.0 * layer) + 0.5)/nlayer;
 		FragColor = texture(colormap, vec2(txl, y));
 	}
@@ -1308,9 +1320,11 @@ uniform mat4 mvpMtx;
 uniform mat4 normMtx;
 out vec4 vClr;
 out vec3 vN;
+out vec4 vP;
 out vec4 vPc;
 void main(void) {
 	vec3 lightPosition = vec3(0.0, 0.0, -10.0);
+	vP = vec4(pos, 1.0);
 	vPc = mvpMtx * vec4(pos, 1.0);
 	gl_Position = vPc;
 	vN = normalize((normMtx * vec4(norm.xyz,1.0)).xyz);
@@ -11169,7 +11183,9 @@ var ColorTables = class {
     const nLabels = cm.R.length;
     const idxs = cm.I ?? [...Array(nLabels).keys()];
     if (nLabels !== cm.G.length || nLabels !== cm.B.length || nLabels !== idxs.length) {
-      throw new Error(`colormap does not make sense: ${cm}`);
+      throw new Error(
+        `colormap does not make sense: ${cm} Rs ${cm.R.length} Gs ${cm.G.length} Bs ${cm.B.length} Is ${idxs.length}`
+      );
     }
     let As = new Uint8ClampedArray(nLabels).fill(alphaFill);
     As[0] = 0;
@@ -11656,6 +11672,15 @@ var NVUtilities = class _NVUtilities {
     return mat;
   }
   // readMatV4()
+  static b64toUint8(base64) {
+    const binaryString = atob(base64);
+    const length = binaryString.length;
+    const bytes = new Uint8Array(length);
+    for (let i = 0; i < length; i++) {
+      bytes[i] = binaryString.charCodeAt(i);
+    }
+    return bytes;
+  }
   /*
   https://gist.github.com/jonleighton/958841
   MIT LICENSE
@@ -12559,7 +12584,8 @@ var NVMeshLoaders = class _NVMeshLoaders {
       alphaThreshold: false,
       isTransparentBelowCalMin: true,
       isAdditiveBlend: false,
-      colorbarVisible: true
+      colorbarVisible: true,
+      colormapLabel: null
     };
     const isReadColortables = true;
     const re = /(?:\.([^.]+))?$/;
@@ -15456,7 +15482,7 @@ var NVMesh2 = class _NVMesh {
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, Uint32Array.from(idxs), gl.STATIC_DRAW);
     gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, Float32Array.from(f32), gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, u8, gl.STATIC_DRAW);
     this.indexCount = nidx;
   }
   // linesToCylinders
@@ -16162,7 +16188,7 @@ var NVMesh2 = class _NVMesh {
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, Uint32Array.from(this.tris), gl.STATIC_DRAW);
     gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, Float32Array.from(posNormClr), gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, u8, gl.STATIC_DRAW);
     this.indexCount = this.tris.length;
     this.vertexCount = this.pts.length;
   }
@@ -16270,13 +16296,26 @@ var NVMesh2 = class _NVMesh {
   }
   // adjust attributes of a mesh layer. invoked by niivue.setMeshLayerProperty()
   // TODO this method is a bit too generic
-  setLayerProperty(id, key, val, gl) {
+  async setLayerProperty(id, key, val, gl) {
     const layer = this.layers[id];
     if (!layer || !(key in layer)) {
       log.warn("mesh does not have property ", key, " for layer ", layer);
       return;
     }
-    layer[key] = val;
+    if (key === "colormapLabel") {
+      if (typeof val === "object") {
+        layer[key] = cmapper.makeLabelLut(val);
+      } else if (typeof val === "string") {
+        const cmap = await cmapper.makeLabelLutFromUrl(val);
+        layer[key] = cmap;
+        this.updateMesh(gl);
+        return;
+      } else {
+        log.error("colormapLabel requires a string or object");
+      }
+    } else {
+      layer[key] = val;
+    }
     this.updateMesh(gl);
   }
   // adjust mesh attributes. invoked by niivue.setMeshProperty(()
@@ -16502,8 +16541,13 @@ var NVMesh2 = class _NVMesh {
       anatomicalStructurePrimary
     );
     if ("scalars" in obj && obj.scalars.length > 0) {
-      NVMeshLoaders.readLayer(name, buffer, nvm, opacity, "gray");
-      nvm.updateMesh(gl);
+      const newLayer = NVMeshLoaders.readLayer(name, buffer, nvm, opacity, "gray");
+      if (typeof newLayer === "undefined") {
+        log.warn("readLayer() failed to convert scalars");
+      } else {
+        nvm.layers.push(newLayer);
+        nvm.updateMesh(gl);
+      }
     }
     return nvm;
   }
@@ -18321,7 +18365,6 @@ import { vec3 as vec38, vec4 as vec46 } from "gl-matrix";
 
 // src/nvimage/index.ts
 import * as nifti from "nifti-reader-js";
-import daikon from "daikon";
 import { mat3, mat4 as mat44, vec3 as vec37, vec4 as vec45 } from "gl-matrix";
 import { Decompress, decompressSync as decompressSync3, gzipSync as gzipSync2 } from "fflate/browser";
 import { v4 as uuidv42 } from "@lukeed/uuid";
@@ -18440,32 +18483,6 @@ var NVImageFromUrlOptions = (url, urlImageData = "", name = "", colormap = "gray
     colormapLabel
   };
 };
-function getBestTransform(imageDirections, voxelDimensions, imagePosition) {
-  const cosines = imageDirections;
-  let m = null;
-  if (cosines) {
-    const vs = {
-      colSize: voxelDimensions[0],
-      rowSize: voxelDimensions[1],
-      sliceSize: voxelDimensions[2]
-    };
-    const coord = imagePosition;
-    const cosx = [cosines[0], cosines[1], cosines[2]];
-    const cosy = [cosines[3], cosines[4], cosines[5]];
-    const cosz = [
-      cosx[1] * cosy[2] - cosx[2] * cosy[1],
-      cosx[2] * cosy[0] - cosx[0] * cosy[2],
-      cosx[0] * cosy[1] - cosx[1] * cosy[0]
-    ];
-    m = [
-      [cosx[0] * vs.colSize * -1, cosy[0] * vs.rowSize * -1, cosz[0] * vs.sliceSize * -1, -1 * coord[0]],
-      [cosx[1] * vs.colSize * -1, cosy[1] * vs.rowSize * -1, cosz[1] * vs.sliceSize * -1, -1 * coord[1]],
-      [cosx[2] * vs.colSize, cosy[2] * vs.rowSize, cosz[2] * vs.sliceSize, coord[2]],
-      [0, 0, 0, 1]
-    ];
-  }
-  return m;
-}
 function str2Buffer(str, maxLen = 80) {
   str = str.replace(/[`$]/g, "");
   const bytes = [];
@@ -18766,8 +18783,7 @@ var NVImage = class _NVImage {
       case NVIMAGE_TYPE.DCM_FOLDER:
       case NVIMAGE_TYPE.DCM_MANIFEST:
       case NVIMAGE_TYPE.DCM:
-        imgRaw = this.readDICOM(dataBuffer);
-        break;
+        return;
       case NVIMAGE_TYPE.FIB:
         ;
         [imgRaw, this.v1] = this.readFIB(dataBuffer);
@@ -19311,121 +19327,133 @@ var NVImage = class _NVImage {
   }
   // not included in public docs
   // read DICOM format image and treat it like a NIfTI
-  readDICOM(buf) {
-    this.series = new daikon.Series();
-    if (Array.isArray(buf)) {
-      for (let i = 0; i < buf.length; i++) {
-        const dataview = new DataView(buf[i]);
-        const image = daikon.Series.parseImage(dataview);
-        if (image === null) {
-          log.error(daikon.Series.parserError);
-        } else if (image.hasPixelData()) {
-          if (this.series.images.length === 0 || image.getSeriesId() === this.series.images[0].getSeriesId()) {
-            this.series.addImage(image);
-          }
-        }
-      }
-    } else {
-      const image = daikon.Series.parseImage(new DataView(buf));
-      if (image === null) {
-        log.error(daikon.Series.parserError);
-      } else if (image.hasPixelData()) {
-        if (this.series.images.length === 0 || image.getSeriesId() === this.series.images[0].getSeriesId()) {
-          this.series.addImage(image);
-        }
-      }
-    }
-    this.series.buildSeries();
-    this.hdr = new nifti.NIFTI1();
-    const hdr = this.hdr;
-    hdr.scl_inter = 0;
-    hdr.scl_slope = 1;
-    if (this.series.images[0].getDataScaleIntercept()) {
-      hdr.scl_inter = this.series.images[0].getDataScaleIntercept();
-    }
-    if (this.series.images[0].getDataScaleSlope()) {
-      hdr.scl_slope = this.series.images[0].getDataScaleSlope();
-    }
-    hdr.dims = [3, 1, 1, 1, 0, 0, 0, 0];
-    hdr.pixDims = [1, 1, 1, 1, 1, 0, 0, 0];
-    hdr.dims[1] = this.series.images[0].getCols();
-    hdr.dims[2] = this.series.images[0].getRows();
-    hdr.dims[3] = this.series.images[0].getNumberOfFrames();
-    if (this.series.images.length > 1) {
-      if (hdr.dims[3] > 1) {
-        log.debug("To Do: multiple slices per file and multiple files (XA30 DWI)");
-      }
-      hdr.dims[3] = this.series.images.length;
-    }
-    const rc = this.series.images[0].getPixelSpacing();
-    hdr.pixDims[1] = rc[0];
-    hdr.pixDims[2] = rc[1];
-    if (this.series.images.length > 1) {
-      const p0 = vec37.fromValues(...this.series.images[0].getImagePosition());
-      const p1 = vec37.fromValues(...this.series.images[1].getImagePosition());
-      const n = vec37.fromValues(0, 0, 0);
-      vec37.subtract(n, p0, p1);
-      hdr.pixDims[3] = vec37.length(n);
-    } else {
-      hdr.pixDims[3] = this.series.images[0].getSliceThickness();
-    }
-    hdr.pixDims[4] = this.series.images[0].getTR() / 1e3;
-    const dt = this.series.images[0].getDataType();
-    const bpv = this.series.images[0].getBitsAllocated();
-    hdr.numBitsPerVoxel = bpv;
-    this.hdr.littleEndian = this.series.images[0].littleEndian;
-    if (bpv === 8 && dt === 2) {
-      hdr.datatypeCode = 256 /* DT_INT8 */;
-    } else if (bpv === 8 && dt === 3) {
-      hdr.datatypeCode = 2 /* DT_UINT8 */;
-    } else if (bpv === 16 && dt === 2) {
-      hdr.datatypeCode = 4 /* DT_INT16 */;
-    } else if (bpv === 16 && dt === 3) {
-      hdr.datatypeCode = 512 /* DT_UINT16 */;
-    } else if (bpv === 32 && dt === 2) {
-      hdr.datatypeCode = 8 /* DT_INT32 */;
-    } else if (bpv === 32 && dt === 3) {
-      hdr.datatypeCode = 768 /* DT_UINT32 */;
-    } else if (bpv === 32 && dt === 4) {
-      hdr.datatypeCode = 16 /* DT_FLOAT32 */;
-    } else if (bpv === 64 && dt === 4) {
-      hdr.datatypeCode = 64 /* DT_FLOAT64 */;
-    } else if (bpv === 1) {
-      hdr.datatypeCode = 1 /* DT_BINARY */;
-    } else {
-      log.warn("Unsupported DICOM format: " + dt + " " + bpv);
-    }
-    const voxelDimensions = hdr.pixDims.slice(1, 4);
-    const m = getBestTransform(
-      this.series.images[0].getImageDirections(),
-      voxelDimensions,
-      this.series.images[0].getImagePosition()
-    );
-    if (m) {
-      hdr.sform_code = 1;
-      hdr.affine = [
-        [m[0][0], m[0][1], m[0][2], m[0][3]],
-        [m[1][0], m[1][1], m[1][2], m[1][3]],
-        [m[2][0], m[2][1], m[2][2], m[2][3]],
-        [0, 0, 0, 1]
-      ];
-    }
-    let data;
-    let length = this.series.validatePixelDataLength(this.series.images[0]);
-    const buffer = new Uint8Array(new ArrayBuffer(length * this.series.images.length));
-    for (let i = 0; i < this.series.images.length; i++) {
-      if (this.series.isMosaic) {
-        data = this.series.getMosaicData(this.series.images[i], this.series.images[i].getPixelDataBytes());
-      } else {
-        data = this.series.images[i].getPixelDataBytes();
-      }
-      length = this.series.validatePixelDataLength(this.series.images[i]);
-      this.series.images[i].clearPixelData();
-      buffer.set(new Uint8Array(data, 0, length), length * i);
-    }
-    return buffer.buffer;
-  }
-  // readDICOM()
+  // -----------------
+  // readDICOM(buf: ArrayBuffer | ArrayBuffer[]): ArrayBuffer {
+  //   this.series = new daikon.Series()
+  //   // parse DICOM file
+  //   if (Array.isArray(buf)) {
+  //     for (let i = 0; i < buf.length; i++) {
+  //       const dataview = new DataView(buf[i])
+  //       const image = daikon.Series.parseImage(dataview)
+  //       if (image === null) {
+  //         log.error(daikon.Series.parserError)
+  //       } else if (image.hasPixelData()) {
+  //         // if it's part of the same series, add it
+  //         if (this.series.images.length === 0 || image.getSeriesId() === this.series.images[0].getSeriesId()) {
+  //           this.series.addImage(image)
+  //         }
+  //       } // if hasPixelData
+  //     } // for i
+  //   } else {
+  //     // not a dicom folder drop
+  //     const image = daikon.Series.parseImage(new DataView(buf))
+  //     if (image === null) {
+  //       log.error(daikon.Series.parserError)
+  //     } else if (image.hasPixelData()) {
+  //       // if it's part of the same series, add it
+  //       if (this.series.images.length === 0 || image.getSeriesId() === this.series.images[0].getSeriesId()) {
+  //         this.series.addImage(image)
+  //       }
+  //     }
+  //   }
+  //   // order the image files, determines number of frames, etc.
+  //   this.series.buildSeries()
+  //   // output some header info
+  //   this.hdr = new nifti.NIFTI1()
+  //   const hdr = this.hdr
+  //   hdr.scl_inter = 0
+  //   hdr.scl_slope = 1
+  //   if (this.series.images[0].getDataScaleIntercept()) {
+  //     hdr.scl_inter = this.series.images[0].getDataScaleIntercept()
+  //   }
+  //   if (this.series.images[0].getDataScaleSlope()) {
+  //     hdr.scl_slope = this.series.images[0].getDataScaleSlope()
+  //   }
+  //   hdr.dims = [3, 1, 1, 1, 0, 0, 0, 0]
+  //   hdr.pixDims = [1, 1, 1, 1, 1, 0, 0, 0]
+  //   hdr.dims[1] = this.series.images[0].getCols()
+  //   hdr.dims[2] = this.series.images[0].getRows()
+  //   hdr.dims[3] = this.series.images[0].getNumberOfFrames()
+  //   if (this.series.images.length > 1) {
+  //     if (hdr.dims[3] > 1) {
+  //       log.debug('To Do: multiple slices per file and multiple files (XA30 DWI)')
+  //     }
+  //     hdr.dims[3] = this.series.images.length
+  //   }
+  //   const rc = this.series.images[0].getPixelSpacing() // TODO: order?
+  //   hdr.pixDims[1] = rc[0]
+  //   hdr.pixDims[2] = rc[1]
+  //   if (this.series.images.length > 1) {
+  //     // Multiple slices. The depth of a pixel is the physical distance between offsets. This is not the same as slice
+  //     // spacing for tilted slices (skew).
+  //     const p0 = vec3.fromValues(...(this.series.images[0].getImagePosition() as [number, number, number]))
+  //     const p1 = vec3.fromValues(...(this.series.images[1].getImagePosition() as [number, number, number]))
+  //     const n = vec3.fromValues(0, 0, 0)
+  //     vec3.subtract(n, p0, p1)
+  //     hdr.pixDims[3] = vec3.length(n)
+  //   } else {
+  //     // Single slice. Use the slice thickness as pixel depth.
+  //     hdr.pixDims[3] = this.series.images[0].getSliceThickness()
+  //   }
+  //   hdr.pixDims[4] = this.series.images[0].getTR() / 1000.0 // msec -> sec
+  //   const dt = this.series.images[0].getDataType() // 2=int,3=uint,4=float,
+  //   const bpv = this.series.images[0].getBitsAllocated()
+  //   hdr.numBitsPerVoxel = bpv
+  //   this.hdr.littleEndian = this.series.images[0].littleEndian
+  //   if (bpv === 8 && dt === 2) {
+  //     hdr.datatypeCode = NiiDataType.DT_INT8
+  //   } else if (bpv === 8 && dt === 3) {
+  //     hdr.datatypeCode = NiiDataType.DT_UINT8
+  //   } else if (bpv === 16 && dt === 2) {
+  //     hdr.datatypeCode = NiiDataType.DT_INT16
+  //   } else if (bpv === 16 && dt === 3) {
+  //     hdr.datatypeCode = NiiDataType.DT_UINT16
+  //   } else if (bpv === 32 && dt === 2) {
+  //     hdr.datatypeCode = NiiDataType.DT_INT32
+  //   } else if (bpv === 32 && dt === 3) {
+  //     hdr.datatypeCode = NiiDataType.DT_UINT32
+  //   } else if (bpv === 32 && dt === 4) {
+  //     hdr.datatypeCode = NiiDataType.DT_FLOAT32
+  //   } else if (bpv === 64 && dt === 4) {
+  //     hdr.datatypeCode = NiiDataType.DT_FLOAT64
+  //   } else if (bpv === 1) {
+  //     hdr.datatypeCode = NiiDataType.DT_BINARY
+  //   } else {
+  //     log.warn('Unsupported DICOM format: ' + dt + ' ' + bpv)
+  //   }
+  //   const voxelDimensions = hdr.pixDims.slice(1, 4)
+  //   const m = getBestTransform(
+  //     this.series.images[0].getImageDirections(),
+  //     voxelDimensions,
+  //     this.series.images[0].getImagePosition()
+  //   )
+  //   if (m) {
+  //     hdr.sform_code = 1
+  //     hdr.affine = [
+  //       [m[0][0], m[0][1], m[0][2], m[0][3]],
+  //       [m[1][0], m[1][1], m[1][2], m[1][3]],
+  //       [m[2][0], m[2][1], m[2][2], m[2][3]],
+  //       [0, 0, 0, 1]
+  //     ]
+  //   }
+  //   let data
+  //   let length = this.series.validatePixelDataLength(this.series.images[0])
+  //   const buffer = new Uint8Array(new ArrayBuffer(length * this.series.images.length))
+  //   // implementation copied from:
+  //   // https://github.com/rii-mango/Daikon/blob/bbe08bad9758dfbdf31ca22fb79048c7bad85706/src/series.js#L496
+  //   for (let i = 0; i < this.series.images.length; i++) {
+  //     if (this.series.isMosaic) {
+  //       data = this.series.getMosaicData(this.series.images[i], this.series.images[i].getPixelDataBytes())
+  //     } else {
+  //       data = this.series.images[i].getPixelDataBytes()
+  //     }
+  //     length = this.series.validatePixelDataLength(this.series.images[i])
+  //     this.series.images[i].clearPixelData()
+  //     buffer.set(new Uint8Array(data, 0, length), length * i)
+  //   } // for images.length
+  //   return buffer.buffer
+  // } // readDICOM()
+  // -----------------------
   // not included in public docs
   // read ECAT7 format image
   // https://github.com/openneuropet/PET2BIDS/tree/28aae3fab22309047d36d867c624cd629c921ca6/ecat_validation/ecat_info
@@ -21325,7 +21353,10 @@ var NVImage = class _NVImage {
         throw Error(response.statusText);
       }
       const contents = await response.arrayBuffer();
-      dataBuffer.push(contents);
+      dataBuffer.push({
+        name: line,
+        data: contents
+      });
     }
     return dataBuffer;
   }
@@ -22459,7 +22490,8 @@ var DEFAULT_OPTIONS = {
   // red
   measureLineColor: [1, 0, 0, 1],
   // red
-  measureTextHeight: 0.03
+  measureTextHeight: 0.03,
+  isAlphaClipDark: false
 };
 var INITIAL_SCENE_DATA = {
   gamma: 1,
@@ -22706,55 +22738,12 @@ var NVDocument = class _NVDocument {
     }
     data.customData = this.customData;
     if (this.volumes.length) {
-      let imageOptions = this.imageOptionsArray[0];
-      if (!imageOptions) {
-        log.debug("no image options for base image");
-        imageOptions = {
-          name: "",
-          colormap: "gray",
-          opacity: 1,
-          pairedImgData: null,
-          cal_min: NaN,
-          cal_max: NaN,
-          trustCalMinMax: true,
-          percentileFrac: 0.02,
-          ignoreZeroVoxels: false,
-          useQFormNotSForm: false,
-          colormapNegative: "",
-          colormapLabel: null,
-          imageType: NVIMAGE_TYPE.NII,
-          frame4D: 0,
-          limitFrames4D: NaN,
-          // TODO the following fields were previously not included
-          url: "",
-          urlImageData: "",
-          alphaThreshold: false,
-          cal_minNeg: NaN,
-          cal_maxNeg: NaN,
-          colorbarVisible: true
-        };
-      }
-      imageOptions.colormap = this.volumes[0].colormap;
-      imageOptions.opacity = this.volumes[0].opacity;
-      imageOptions.cal_max = this.volumes[0].cal_max || NaN;
-      imageOptions.cal_min = this.volumes[0].cal_min || NaN;
-      if (imageOptions) {
-        imageOptionsArray.push(imageOptions);
-        const encodedImageBlob = NVUtilities.uint8tob64(this.volumes[0].toUint8Array());
-        data.encodedImageBlobs.push(encodedImageBlob);
-        if (this.drawBitmap) {
-          data.encodedDrawingBlob = NVUtilities.uint8tob64(this.volumes[0].toUint8Array(this.drawBitmap));
-        }
-        data.imageOptionsMap.set(this.volumes[0].id, 0);
-      } else {
-        throw new Error("image options for base layer not found");
-      }
-      for (let i = 1; i < this.volumes.length; i++) {
+      for (let i = 0; i < this.volumes.length; i++) {
         const volume = this.volumes[i];
-        let imageOptions2 = this.getImageOptions(volume);
-        if (imageOptions2 === null) {
+        let imageOptions = this.getImageOptions(volume);
+        if (imageOptions === null) {
           log.warn("no options found for image, using default");
-          imageOptions2 = {
+          imageOptions = {
             name: "",
             colormap: "gray",
             opacity: 1,
@@ -22779,16 +22768,16 @@ var NVDocument = class _NVDocument {
             colorbarVisible: true
           };
         } else {
-          if (!("imageType" in imageOptions2)) {
-            imageOptions2.imageType = NVIMAGE_TYPE.NII;
+          if (!("imageType" in imageOptions)) {
+            imageOptions.imageType = NVIMAGE_TYPE.NII;
           }
         }
-        imageOptions2.colormap = volume.colormap;
-        imageOptions2.colormapLabel = volume.colormapLabel;
-        imageOptions2.opacity = volume.opacity;
-        imageOptions2.cal_max = volume.cal_max || NaN;
-        imageOptions2.cal_min = volume.cal_min || NaN;
-        imageOptionsArray.push(imageOptions2);
+        imageOptions.colormap = volume.colormap;
+        imageOptions.colormapLabel = volume.colormapLabel;
+        imageOptions.opacity = volume.opacity;
+        imageOptions.cal_max = volume.cal_max || NaN;
+        imageOptions.cal_min = volume.cal_min || NaN;
+        imageOptionsArray.push(imageOptions);
         const encodedImageBlob = NVUtilities.uint8tob64(volume.toUint8Array());
         data.encodedImageBlobs.push(encodedImageBlob);
         data.imageOptionsMap.set(volume.id, i);
@@ -22857,6 +22846,9 @@ var NVDocument = class _NVDocument {
       meshes.push(copyMesh);
     }
     data.meshesString = JSON.stringify(serialize(meshes));
+    if (this.drawBitmap) {
+      data.encodedDrawingBlob = NVUtilities.uint8tob64(this.drawBitmap);
+    }
     return data;
   }
   /**
@@ -24206,6 +24198,16 @@ var Niivue = class {
    */
   constructor(options = DEFAULT_OPTIONS) {
     __publicField(this, "loaders", {});
+    // create a dicom loader
+    __publicField(this, "dicomLoader", null);
+    // {
+    //   loader: (data: DicomLoaderInput) => {
+    //     return new Promise<{name: string; data: ArrayBuffer}[]>((resolve, reject) => {
+    //       reject('No DICOM loader provided')
+    //     })
+    //   },
+    //   toExt: 'nii'
+    // }
     __publicField(this, "canvas", null);
     // the reference to the canvas element on the page
     __publicField(this, "_gl", null);
@@ -24301,7 +24303,6 @@ var Niivue = class {
     // float, 0 for none
     __publicField(this, "overlayAlphaShader", 1);
     // float, 1 for opaque
-    __publicField(this, "isAlphaClipDark", false);
     __publicField(this, "position");
     __publicField(this, "extentsMin");
     __publicField(this, "extentsMax");
@@ -24637,6 +24638,8 @@ var Niivue = class {
     });
     __publicField(this, "onMeshPropertyChanged", () => {
     });
+    __publicField(this, "onDicomLoaderFinishedWithImages", () => {
+    });
     /**
      * callback function to run when the user loads a new NiiVue document
      * @example
@@ -24685,6 +24688,12 @@ var Niivue = class {
   set sliceMosaicString(newSliceMosaicString) {
     this.document.opts.sliceMosaicString = newSliceMosaicString;
   }
+  get isAlphaClipDark() {
+    return this.document.opts.isAlphaClipDark;
+  }
+  set isAlphaClipDark(newVal) {
+    this.document.opts.isAlphaClipDark = newVal;
+  }
   get volumes() {
     return this.document.volumes;
   }
@@ -25661,6 +25670,9 @@ var Niivue = class {
   async addVolumesFromUrl(imageOptionsArray) {
     const promises = imageOptionsArray.map(async (imageItem) => {
       const ext = this.getFileExt(imageItem.name || imageItem.url);
+      if (ext === "DCM") {
+        throw new Error("DICOM files must be loaded using useDicomLoader");
+      }
       if (this.loaders[ext]) {
         let itemToLoad = imageItem.url;
         const toExt = this.loaders[ext].toExt;
@@ -25732,6 +25744,36 @@ var Niivue = class {
       throw new Error("No volume with URL present");
     }
   }
+  async traverseFileTree(item, path = "", fileArray) {
+    return new Promise((resolve) => {
+      if (item.isFile) {
+        item.file((file) => {
+          file.fullPath = path + file.name;
+          file._webkitRelativePath = path + file.name;
+          fileArray.push(file);
+          resolve(fileArray);
+        });
+      } else if (item.isDirectory) {
+        const dirReader = item.createReader();
+        const readAllEntries = () => {
+          dirReader.readEntries((entries) => {
+            if (entries.length > 0) {
+              const promises = [];
+              for (const entry of entries) {
+                promises.push(this.traverseFileTree(entry, path + item.name + "/", fileArray));
+              }
+              Promise.all(promises).then(readAllEntries).catch((e) => {
+                throw e;
+              });
+            } else {
+              resolve(fileArray);
+            }
+          });
+        };
+        readAllEntries();
+      }
+    });
+  }
   readDirectory(directory) {
     const reader = directory.createReader();
     let allEntiresInDir = [];
@@ -25742,6 +25784,7 @@ var Niivue = class {
       };
       for (let i = 0; i < fileSystemEntries.length; i++) {
         allFileObects.push(await getFile(fileSystemEntries[i]));
+        console.log(allFileObects);
       }
       return allFileObects;
     };
@@ -25751,21 +25794,8 @@ var Niivue = class {
           allEntiresInDir = allEntiresInDir.concat(entries);
           readEntries();
         } else {
-          getFileObjects(allEntiresInDir).then((allFileObjects) => {
-            NVImage.loadFromFile({
-              file: allFileObjects,
-              // an array of file objects
-              name: directory.name,
-              urlImgData: null,
-              // nothing
-              imageType: NVIMAGE_TYPE.DCM_FOLDER
-              // signify that this is a dicom directory
-            }).then((volume) => {
-              this.addVolume(volume);
-              this.setDrawingEnabled(true);
-            }).catch((e) => {
-              throw e;
-            });
+          getFileObjects(allEntiresInDir).then(async (allFileObjects) => {
+            console.log(allFileObjects);
           }).catch((e) => {
             throw e;
           });
@@ -25846,6 +25876,17 @@ var Niivue = class {
     })
   
     */
+  // interface LoaderMap {
+  //   [key: string]: {
+  //     loader: LoaderFunction;
+  //     toExt: string;
+  //   };
+  // }
+  // Example usage:
+  // const loaderMap: LoaderMap = {
+  //   'TXT': { loader: (file: File) => file.text(), toExt: 'json' }
+  // };
+  // loader can either be a function that takes a file or ArrayBuffer, or the async version of that.
   useLoader(loader, fileExt, toExt) {
     this.loaders = {
       ...this.loaders,
@@ -25855,6 +25896,24 @@ var Niivue = class {
       }
     };
   }
+  useDicomLoader(loader) {
+    this.dicomLoader = loader;
+  }
+  getDicomLoader() {
+    return this.dicomLoader;
+  }
+  // dicom loading is a special case because it can take a list
+  // of files (e.g. from a user supplied DICOM directory) or a single file.
+  // Our preferred DICOM loader is the WASM port of dcm2niix (implemented in a separate niivue loader module).
+  // useDicomLoader(loader: unknown, toExt: string) {
+  //   this.loaders = {
+  //     ...this.loaders,
+  //     ['DCM']: {
+  //       loader,
+  //       toExt,
+  //     },
+  //   }
+  // }
   // not included in public docs
   dropListener(e) {
     e.stopPropagation();
@@ -25863,6 +25922,7 @@ var Niivue = class {
       return;
     }
     const urlsToLoad = [];
+    const files = [];
     const dt = e.dataTransfer;
     if (!dt) {
       return;
@@ -25990,7 +26050,33 @@ var Niivue = class {
               }
             });
           } else if (entry.isDirectory) {
-            this.readDirectory(entry);
+            this.traverseFileTree(entry, "", files).then((files2) => {
+              const loader = this.getDicomLoader().loader;
+              if (!loader) {
+                throw new Error("No loader for DICOM files");
+              }
+              loader(files2).then(async (fileArrayBuffers) => {
+                console.log(fileArrayBuffers);
+                const promises = fileArrayBuffers.map(
+                  (loaderImage) => NVImage.loadFromUrl({
+                    url: loaderImage.data,
+                    name: loaderImage.name,
+                    limitFrames4D: this.opts.limitFrames4D
+                  })
+                );
+                Promise.all(promises).then(async (loadedNvImages) => {
+                  console.log("from dicom loader");
+                  console.log(loadedNvImages);
+                  await this.onDicomLoaderFinishedWithImages(loadedNvImages);
+                }).catch((e2) => {
+                  throw e2;
+                });
+              }).catch((error) => {
+                console.error("Error loading DICOM files:", error);
+              });
+            }).catch((e2) => {
+              throw e2;
+            });
           }
         }
       }
@@ -26725,13 +26811,13 @@ var Niivue = class {
    * @example niivue.setMeshLayerProperty(niivue.meshes[0].id, 0, 'frame4D', 22)
    * @see {@link https://niivue.github.io/niivue/features/mesh.4D.html | live demo usage}
    */
-  setMeshLayerProperty(mesh, layer, key, val) {
+  async setMeshLayerProperty(mesh, layer, key, val) {
     const idx = this.getMeshIndexByID(mesh);
     if (idx < 0) {
       log.warn("setMeshLayerProperty() id not loaded", mesh);
       return;
     }
-    this.meshes[idx].setLayerProperty(layer, key, val, this.gl);
+    await this.meshes[idx].setLayerProperty(layer, key, val, this.gl);
     this.updateGLVolume();
   }
   /**
@@ -27304,12 +27390,12 @@ var Niivue = class {
     const encodedImageBlobs = document2.encodedImageBlobs;
     for (let i = 0; i < document2.imageOptionsArray.length; i++) {
       const imageOptions = document2.imageOptionsArray[i];
-      const base642 = encodedImageBlobs[i];
-      if (base642) {
+      const base64 = encodedImageBlobs[i];
+      if (base64) {
         if ("colorMap" in imageOptions) {
           imageOptions.colormap = imageOptions.colorMap;
         }
-        const image = NVImage.loadFromBase64({ base64: base642, ...imageOptions });
+        const image = NVImage.loadFromBase64({ base64, ...imageOptions });
         if (image) {
           if (image.colormapLabel) {
             const length = Object.keys(image.colormapLabel.lut).length;
@@ -27326,14 +27412,6 @@ var Niivue = class {
     if (this.volumes.length > 0) {
       this.back = this.volumes[0];
     }
-    const base64 = document2.encodedDrawingBlob;
-    if (base64) {
-      const imageOptions = document2.imageOptionsArray[0];
-      const drawingBitmap = NVImage.loadFromBase64({ base64, ...imageOptions });
-      if (drawingBitmap) {
-        this.loadDrawing(drawingBitmap);
-      }
-    }
     for (const meshDataObject of document2.meshDataObjects ?? []) {
       const meshInit = { gl: this.gl, ...meshDataObject };
       if (meshDataObject.offsetPt0) {
@@ -27375,6 +27453,19 @@ var Niivue = class {
         this.addMesh(meshToAdd);
       }
     }
+    this.createEmptyDrawing();
+    const drawingBase64 = document2.encodedDrawingBlob;
+    if (drawingBase64) {
+      const drawingBitmap = NVUtilities.b64toUint8(drawingBase64);
+      if (drawingBitmap) {
+        const dims = this.back.dims;
+        if (drawingBitmap.length !== dims[1] * dims[2] * dims[3]) {
+          throw new Error("drawBitmap size does not match the texture dimensions.");
+        }
+        this.drawBitmap = drawingBitmap;
+        this.refreshDrawing();
+      }
+    }
     this.updateGLVolume();
     this.drawScene();
     this.onDocumentLoaded(document2);
@@ -27571,6 +27662,44 @@ var Niivue = class {
     }
     return this;
   }
+  async loadDicoms(dicomList) {
+    if (!this.getDicomLoader()) {
+      throw new Error("No dicom loader set. Please set a dicom loader before loading dicoms");
+    }
+    this.drawScene();
+    this.volumes = [];
+    this.gl.clearColor(0, 0, 0, 1);
+    this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+    const promises = dicomList.map(async (dicom) => {
+      let dicomData = null;
+      if (dicom.isManifest) {
+        dicomData = await NVImage.fetchDicomData(dicom.url);
+      } else {
+        const response = await fetch(dicom.url);
+        if (!response.ok) {
+          throw new Error(`Failed to load file: ${response.statusText}`);
+        }
+        const dicomArrayBuffer = await response.arrayBuffer();
+        const basename = dicom.url.split("/").pop();
+        const data2 = dicomArrayBuffer;
+        dicomData = [{ name: basename, data: data2 }];
+      }
+      const dicomLoader = this.getDicomLoader().loader;
+      const convertedArrayBuffer = await dicomLoader(dicomData);
+      console.log(convertedArrayBuffer);
+      const name = convertedArrayBuffer[0].name;
+      const data = convertedArrayBuffer[0].data;
+      const image = NVImage.loadFromUrl({ url: data, name });
+      return image;
+    });
+    const nvImages = await Promise.all(promises);
+    if (nvImages.length === 1) {
+      this.addVolume(nvImages[0]);
+    } else {
+      this.onDicomLoaderFinishedWithImages(nvImages);
+    }
+    return this;
+  }
   /**
    * load an array of volume objects
    * @param volumeList - the array of objects to load. each object must have a resolvable "url" property at a minimum
@@ -29615,6 +29744,17 @@ var Niivue = class {
         mxNeg = Math.max(overlayItem.cal_minNeg, overlayItem.cal_maxNeg);
       }
     }
+    if (layer > 0 && this.overlayOutlineWidth > 0) {
+      const A = overlayItem.cal_min;
+      const B = overlayItem.cal_max;
+      let isZeroCrossing = Math.min(A, B) <= 0 && Math.max(A, B) >= 0;
+      if (!isZeroCrossing && mnNeg < mxNeg) {
+        isZeroCrossing = mnNeg <= 0 && mxNeg >= 0;
+      }
+      if (isZeroCrossing) {
+        log.error("issue1139: do not use overlayOutlineWidth when thresholds cross or touch zero");
+      }
+    }
     if (!orientShader) {
       throw new Error("orientShader undefined");
     }