@niivue/niivue 0.43.7 → 0.44.1

package/build/index.js

@@ -13,7 +13,7 @@ var __publicField = (obj, key, value) => {
 import { mat4 as mat46, vec2, vec3 as vec311, vec4 as vec48 } from "gl-matrix";
 
 // package.json
-var version = "0.43.7";
+var version = "0.44.1";
 
 // src/logger.ts
 var _Log = class _Log {
@@ -11254,6 +11254,7 @@ var cmapper = new ColorTables();
 
 // src/nvmesh-utilities.ts
 import { vec3 as vec32 } from "gl-matrix";
+import { gzipSync } from "fflate/browser";
 var NVMeshUtilities = class {
   static getClusterBoundaryU8(u8, faces) {
     const border = new Array(u8.length).fill(false);
@@ -11279,6 +11280,112 @@ var NVMeshUtilities = class {
     }
     return border;
   }
+  static createMZ3(vertices, indices, compress2 = false) {
+    const magic = 23117;
+    const attr = 3;
+    const nface = indices.length / 3;
+    const nvert = vertices.length / 3;
+    const nskip = 0;
+    const headerSize = 16;
+    const indexSize = nface * 3 * 4;
+    const vertexSize = nvert * 3 * 4;
+    const totalSize = headerSize + indexSize + vertexSize;
+    const buffer = new ArrayBuffer(totalSize);
+    const writer = new DataView(buffer);
+    writer.setUint16(0, magic, true);
+    writer.setUint16(2, attr, true);
+    writer.setUint32(4, nface, true);
+    writer.setUint32(8, nvert, true);
+    writer.setUint32(12, nskip, true);
+    let offset = headerSize;
+    new Uint32Array(buffer, offset, indices.length).set(indices);
+    offset += indexSize;
+    new Float32Array(buffer, offset, vertices.length).set(vertices);
+    if (compress2) {
+      return gzipSync(new Uint8Array(buffer));
+    }
+    return buffer;
+  }
+  static createOBJ(vertices, indices) {
+    let objContent = "";
+    for (let i = 0; i < vertices.length; i += 3) {
+      objContent += `v ${vertices[i]} ${vertices[i + 1]} ${vertices[i + 2]}
+`;
+    }
+    for (let i = 0; i < indices.length; i += 3) {
+      objContent += `f ${indices[i] + 1} ${indices[i + 1] + 1} ${indices[i + 2] + 1}
+`;
+    }
+    const encoder = new TextEncoder();
+    const arrayBuffer = encoder.encode(objContent).buffer;
+    return arrayBuffer;
+  }
+  static createSTL(vertices, indices) {
+    const numTriangles = indices.length / 3;
+    const bufferLength = 84 + numTriangles * 50;
+    const arrayBuffer = new ArrayBuffer(bufferLength);
+    const dataView = new DataView(arrayBuffer);
+    for (let i = 0; i < 80; i++) {
+      dataView.setUint8(i, 0);
+    }
+    dataView.setUint32(80, numTriangles, true);
+    let offset = 84;
+    for (let i = 0; i < indices.length; i += 3) {
+      const i0 = indices[i] * 3;
+      const i1 = indices[i + 1] * 3;
+      const i2 = indices[i + 2] * 3;
+      dataView.setFloat32(offset, 0, true);
+      dataView.setFloat32(offset + 4, 0, true);
+      dataView.setFloat32(offset + 8, 0, true);
+      offset += 12;
+      dataView.setFloat32(offset, vertices[i0], true);
+      dataView.setFloat32(offset + 4, vertices[i0 + 1], true);
+      dataView.setFloat32(offset + 8, vertices[i0 + 2], true);
+      offset += 12;
+      dataView.setFloat32(offset, vertices[i1], true);
+      dataView.setFloat32(offset + 4, vertices[i1 + 1], true);
+      dataView.setFloat32(offset + 8, vertices[i1 + 2], true);
+      offset += 12;
+      dataView.setFloat32(offset, vertices[i2], true);
+      dataView.setFloat32(offset + 4, vertices[i2 + 1], true);
+      dataView.setFloat32(offset + 8, vertices[i2 + 2], true);
+      offset += 12;
+      dataView.setUint16(offset, 0, true);
+      offset += 2;
+    }
+    return arrayBuffer;
+  }
+  static downloadArrayBuffer(buffer, filename) {
+    const blob = new Blob([buffer], { type: "application/octet-stream" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.style.display = "none";
+    a.click();
+    setTimeout(() => {
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    }, 0);
+  }
+  static saveMesh(vertices, indices, filename = ".mz3", compress2 = false) {
+    let buff = new ArrayBuffer(0);
+    if (/\.obj$/i.test(filename)) {
+      buff = this.createOBJ(vertices, indices);
+    } else if (/\.stl$/i.test(filename)) {
+      buff = this.createSTL(vertices, indices);
+    } else {
+      if (!/\.mz3$/i.test(filename)) {
+        filename += ".mz3";
+      }
+      buff = this.createMZ3(vertices, indices, compress2);
+    }
+    if (filename.length > 4) {
+      this.downloadArrayBuffer(buff, filename);
+    }
+    return buff;
+  }
   static getClusterBoundary(rgba8, faces) {
     const rgba32 = new Uint32Array(rgba8.buffer);
     const border = new Array(rgba32.length).fill(false);
@@ -12669,7 +12776,8 @@ var NVMeshLoaders = class _NVMeshLoaders {
   static readANNOT(buffer, n_vert, isReadColortables = false) {
     const view = new DataView(buffer);
     const n_vertex = view.getUint32(0, false);
-    if (n_vert !== n_vertex) {
+    const n_vertexDecimated = this.decimateLayerVertices(n_vertex, n_vert);
+    if (n_vert !== n_vertexDecimated) {
       throw new Error("ANNOT file has different number of vertices than mesh");
     }
     if (buffer.byteLength < 4 + 8 * n_vertex) {
@@ -13917,6 +14025,20 @@ var NVMeshLoaders = class _NVMeshLoaders {
     };
   }
   // readSTL()
+  static decimateLayerVertices(nVertLayer, nVertMesh) {
+    if (nVertLayer % nVertMesh === 0) {
+      return nVertLayer;
+    }
+    const V0 = 12;
+    const orderLayer = Math.round(Math.log((nVertLayer - 2) / (V0 - 2)) / Math.log(4));
+    const orderMesh = Math.round(Math.log((nVertMesh - 2) / (V0 - 2)) / Math.log(4));
+    const nVLayer = Math.pow(4, orderLayer) * (V0 - 2) + 2;
+    const nVMesh = Math.pow(4, orderMesh) * (V0 - 2) + 2;
+    if (nVLayer !== nVertLayer || nVMesh !== nVertMesh) {
+      return nVertLayer;
+    }
+    return nVertMesh;
+  }
   // read NIfTI2 format with embedded CIfTI
   // this variation very specific to connectome workbench
   // https://brainder.org/2015/04/03/the-nifti-2-file-format/
@@ -14077,8 +14199,9 @@ var NVMeshLoaders = class _NVMeshLoaders {
       );
       return scalars2;
     }
+    nvert = this.decimateLayerVertices(nvert, n_vert);
     if (nvert % n_vert !== 0) {
-      throw new Error("Vertices in NIfTI (" + nvert + ") is not a multiple of number of vertices (" + n_vert + ")");
+      throw new Error("Vertices in layer (" + nvert + ") is not a multiple of number of vertices (" + n_vert + ")");
     }
     if (isLittleEndian) {
       if (datatype === 16) {
@@ -14157,8 +14280,9 @@ var NVMeshLoaders = class _NVMeshLoaders {
       const dim = reader.getUint16(40 + i * 2, isLittleEndian);
       nvert *= Math.max(dim, 1);
     }
+    nvert = this.decimateLayerVertices(nvert, n_vert);
     if (nvert % n_vert !== 0) {
-      throw new Error("Vertices in NIfTI (" + nvert + ") is not a multiple of number of vertices (" + n_vert + ")");
+      throw new Error("Vertices in layer (" + nvert + ") is not a multiple of number of vertices (" + n_vert + ")");
     }
     if (isLittleEndian) {
       if (datatype === 16) {
@@ -14214,10 +14338,11 @@ var NVMeshLoaders = class _NVMeshLoaders {
     if (version2 !== 1 || mtype < 0 || mtype > 4) {
       log.warn("Not a valid MGH file");
     }
-    const nvert = width * height * depth * nframes;
+    let nvert = width * height * depth * nframes;
     let scalars = [];
+    nvert = this.decimateLayerVertices(nvert, n_vert);
     if (nvert % n_vert !== 0) {
-      log.warn("Vertices in NIfTI (" + nvert + ") is not a multiple of number of vertices (" + n_vert + ")");
+      log.warn("Vertices in layer (" + nvert + ") is not a multiple of number of vertices (" + n_vert + ")");
       return scalars;
     }
     if (mtype === 3) {
@@ -15961,6 +16086,91 @@ var NVMesh2 = class _NVMesh {
     }
     this.updateMesh(gl);
   }
+  hierarchicalOrder() {
+    const V0 = 12;
+    const F0 = 20;
+    const nF = this.tris.length / 3;
+    const order = Math.log(nF / F0) / Math.log(4);
+    if (nF !== Math.pow(4, order) * F0) {
+      return NaN;
+    }
+    const nV = this.pts.length / 3;
+    if (nV !== Math.pow(4, order) * (V0 - 2) + 2) {
+      return NaN;
+    }
+    for (let i = 0; i < 15; i += 3) {
+      if (this.tris[i] !== 0) {
+        return NaN;
+      }
+    }
+    for (let i = 15; i < 24; i += 3) {
+      if (this.tris[i] !== 3) {
+        return NaN;
+      }
+    }
+    for (let i = 24; i < 30; i += 3) {
+      if (this.tris[i] !== 4) {
+        return NaN;
+      }
+    }
+    return order;
+  }
+  decimateFaces(n, ntarget) {
+    let fac = this.tris;
+    const V0 = 12;
+    const F0 = 20;
+    for (let j = n - 1; j >= ntarget; j--) {
+      const nVjprev = Math.pow(4, j + 1) * (V0 - 2) + 2;
+      const nVj = Math.pow(4, j) * (V0 - 2) + 2;
+      const nFjprev = fac.length / 3;
+      const nFj = Math.pow(4, j) * F0;
+      console.log(`order ${j + 1} -> ${j} vertices ${nVjprev} -> ${nVj} faces ${nFjprev} -> ${nFj}`);
+      const remap = Array.from({ length: nVjprev }, (_, i) => i + 1);
+      for (let i = 0; i < nFjprev; i++) {
+        const v1 = fac[3 * i];
+        const v2 = fac[3 * i + 1];
+        const v3 = fac[3 * i + 2];
+        remap[v1 - 1] = Math.min(remap[v1 - 1], v2, v3);
+      }
+      const facJ = new Uint32Array(nFj * 3);
+      for (let i = 0; i < nFj; i++) {
+        facJ[3 * i] = remap[fac[3 * i] - 1];
+        facJ[3 * i + 1] = remap[fac[3 * i + 1] - 1];
+        facJ[3 * i + 2] = remap[fac[3 * i + 2] - 1];
+      }
+      fac = facJ;
+    }
+    this.tris = new Uint32Array(fac);
+  }
+  // internal function simplifies FreeSurfer triangulated mesh and overlays
+  decimateHierarchicalMesh(gl, order = 4) {
+    const inputOrder = this.hierarchicalOrder();
+    if (isNaN(inputOrder)) {
+      log.warn("Unable to decimate mesh: it does not have a hierarchical structure");
+      return false;
+    }
+    if (order >= inputOrder) {
+      log.warn(`Unable to decimate mesh: input order (${inputOrder}) must be larger than downsampled order (${order})`);
+      return false;
+    }
+    const inputVLength = this.pts.length / 3;
+    const V0 = 12;
+    const nV = Math.pow(4, order) * (V0 - 2) + 2;
+    this.pts = new Float32Array(this.pts.slice(0, nV * 3));
+    this.decimateFaces(inputOrder, order);
+    if (this.layers && this.layers.length > 0) {
+      for (let i = 0; i < this.layers.length; i++) {
+        const layer = this.layers[i];
+        if (layer.values instanceof Float32Array || layer.values.length !== inputVLength) {
+          layer.values = new Float32Array(layer.values.slice(0, nV));
+        } else {
+          log.warn(`decimation logic needs to be updated`);
+        }
+      }
+    }
+    this.updateMesh(gl);
+    return true;
+  }
   // adjust attributes of a mesh layer. invoked by niivue.setMeshLayerProperty()
   // TODO this method is a bit too generic
   setLayerProperty(id, key, val, gl) {
@@ -18016,7 +18226,7 @@ import { vec3 as vec38, vec4 as vec46 } from "gl-matrix";
 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 } from "fflate/browser";
+import { Decompress, decompressSync as decompressSync3, gzipSync as gzipSync2 } from "fflate/browser";
 import { v4 as uuidv42 } from "@lukeed/uuid";
 
 // src/nvimage/utils.ts
@@ -20875,7 +21085,7 @@ var NVImage = class _NVImage {
     let saveData = null;
     const compress2 = fnm.endsWith(".gz");
     if (compress2) {
-      saveData = gzipSync(odata, {
+      saveData = gzipSync2(odata, {
         // GZIP-specific: the filename to use when decompressed
         filename: fnm,
         // GZIP-specific: the modification time. Can be a Date, date string,
@@ -21338,7 +21548,7 @@ var NVImage = class _NVImage {
    * read a 3D slab of voxels from a volume
    * @param voxStart - first row, column and slice (RAS order) for selection
    * @param voxEnd - final row, column and slice (RAS order) for selection
-   * @param dataType - array data type. Options: 'same' (default), 'uint8', 'float32'
+   * @param dataType - array data type. Options: 'same' (default), 'uint8', 'float32', 'scaled', 'normalized', 'windowed'
    * @returns the an array where ret[0] is the voxel values and ret[1] is dimension of selection
    * @see {@link https://niivue.github.io/niivue/features/slab_selection.html | live demo usage}
    */
@@ -21362,7 +21572,7 @@ var NVImage = class _NVImage {
     let dt = this.hdr.datatypeCode;
     if (dataType === "uint8") {
       dt = 2 /* DT_UINT8 */;
-    } else if (dataType === "float32") {
+    } else if (dataType === "float32" || dataType === "scaled" || dataType === "normalized" || dataType === "windowed") {
       dt = 16 /* DT_FLOAT32 */;
     }
     if (dt === 2 /* DT_UINT8 */) {
@@ -21392,6 +21602,24 @@ var NVImage = class _NVImage {
         }
       }
     }
+    if (dataType === "scaled" || dataType === "normalized" || dataType === "windowed") {
+      for (let i2 = 0; i2 < img.length; i2++) {
+        img[i2] = img[i2] * this.hdr.scl_slope + this.hdr.scl_inter;
+      }
+    }
+    if (dataType === "normalized" || dataType === "windowed") {
+      let mn = this.cal_min;
+      let mx = this.cal_max;
+      if (dataType === "normalized") {
+        mn = this.global_min;
+        mx = this.global_max;
+      }
+      const scale = 1 / (mx - mn);
+      for (let i2 = 0; i2 < img.length; i2++) {
+        img[i2] = (img[i2] - mn) * scale;
+        img[i2] = Math.max(Math.min(img[i2], 1), 0);
+      }
+    }
     return [img, slabDims];
   }
   // getVolumeData()
@@ -21929,6 +22157,12 @@ var SLICE_TYPE = /* @__PURE__ */ ((SLICE_TYPE2) => {
   SLICE_TYPE2[SLICE_TYPE2["RENDER"] = 4] = "RENDER";
   return SLICE_TYPE2;
 })(SLICE_TYPE || {});
+var SHOW_RENDER = /* @__PURE__ */ ((SHOW_RENDER2) => {
+  SHOW_RENDER2[SHOW_RENDER2["NEVER"] = 0] = "NEVER";
+  SHOW_RENDER2[SHOW_RENDER2["ALWAYS"] = 1] = "ALWAYS";
+  SHOW_RENDER2[SHOW_RENDER2["AUTO"] = 2] = "AUTO";
+  return SHOW_RENDER2;
+})(SHOW_RENDER || {});
 var MULTIPLANAR_TYPE = /* @__PURE__ */ ((MULTIPLANAR_TYPE2) => {
   MULTIPLANAR_TYPE2[MULTIPLANAR_TYPE2["AUTO"] = 0] = "AUTO";
   MULTIPLANAR_TYPE2[MULTIPLANAR_TYPE2["COLUMN"] = 1] = "COLUMN";
@@ -21975,7 +22209,10 @@ var DEFAULT_OPTIONS = {
   isColorbar: false,
   isOrientCube: false,
   multiplanarPadPixels: 0,
+  // @deprecated
   multiplanarForceRender: false,
+  multiplanarShowRender: 2 /* AUTO */,
+  // auto is the same behaviour as multiplanarForceRender: false
   isRadiologicalConvention: false,
   meshThicknessOn2D: Infinity,
   dragMode: 1 /* contrast */,
@@ -24997,6 +25234,39 @@ var Niivue = class _Niivue {
     this.addVolume(volume);
     return volume;
   }
+  async addVolumesFromUrl(imageOptionsArray) {
+    const promises = imageOptionsArray.map(async (imageItem) => {
+      const imageOptions = {
+        url: imageItem.url,
+        headers: imageItem.headers,
+        name: imageItem.name,
+        colormap: imageItem.colormap ? imageItem.colormap : imageItem.colorMap,
+        colormapNegative: imageItem.colormapNegative ? imageItem.colormapNegative : imageItem.colorMapNegative,
+        opacity: imageItem.opacity,
+        urlImgData: imageItem.urlImgData,
+        cal_min: imageItem.cal_min,
+        cal_max: imageItem.cal_max,
+        trustCalMinMax: this.opts.trustCalMinMax,
+        isManifest: imageItem.isManifest,
+        frame4D: imageItem.frame4D,
+        limitFrames4D: imageItem.limitFrames4D || this.opts.limitFrames4D,
+        colorbarVisible: imageItem.colorbarVisible
+      };
+      const volume = await NVImage.loadFromUrl(imageOptions);
+      this.document.addImageOptions(volume, imageOptions);
+      volume.onColormapChange = this.onColormapChange;
+      this.mediaUrlMap.set(volume, imageOptions.url);
+      if (this.onVolumeAddedFromUrl) {
+        this.onVolumeAddedFromUrl(imageOptions, volume);
+      }
+      return volume;
+    });
+    const volumes = await Promise.all(promises);
+    for (let i = 0; i < volumes.length; i++) {
+      this.addVolume(volumes[i]);
+    }
+    return volumes;
+  }
   /**
    * Find media by url
    */
@@ -25924,6 +26194,24 @@ var Niivue = class _Niivue {
     }
     return this.meshes[idx].indexNearestXYZmm(Xmm, Ymm, Zmm);
   }
+  /**
+   * reduce complexity of FreeSurfer mesh
+   * @param mesh - identity of mesh to change
+   * @param order - decimation order 0..6
+   * @example niivue.decimateHierarchicalMesh(niivue.meshes[0].id, 4)
+   * @returns boolean false if mesh is not hierarchical or of lower order
+   * @see {@link https://niivue.github.io/niivue/features/meshes.html | live demo usage}
+   */
+  decimateHierarchicalMesh(mesh, order = 3) {
+    const idx = this.getMeshIndexByID(mesh);
+    if (idx < 0) {
+      log.warn("reverseFaces() id not loaded", mesh);
+      return;
+    }
+    const ret = this.meshes[idx].decimateHierarchicalMesh(this.gl, order);
+    this.updateGLVolume();
+    return ret;
+  }
   /**
    * reverse triangle winding of mesh (swap front and back faces)
    * @param id - identity of mesh to change
@@ -26422,6 +26710,9 @@ var Niivue = class _Niivue {
     this.renderShader.use(this.gl);
     this.gl.uniform3fv(this.renderShader.uniforms.clipLo, this.opts.clipVolumeLow);
     this.gl.uniform3fv(this.renderShader.uniforms.clipHi, this.opts.clipVolumeHigh);
+    this.pickingImageShader.use(this.gl);
+    this.gl.uniform3fv(this.pickingImageShader.uniforms.clipLo, this.opts.clipVolumeLow);
+    this.gl.uniform3fv(this.pickingImageShader.uniforms.clipHi, this.opts.clipVolumeHigh);
     this.drawScene();
   }
   /**
@@ -26775,28 +27066,27 @@ var Niivue = class _Niivue {
     this.volumes = [];
     this.gl.clearColor(0, 0, 0, 1);
     this.gl.clear(this.gl.COLOR_BUFFER_BIT);
-    for (let i = 0; i < volumeList.length; i++) {
-      if (volumeList[i].colorMap !== void 0) {
-        volumeList[i].colormap = volumeList[i].colorMap;
-      }
-      const imageOptions = {
-        url: volumeList[i].url,
-        headers: volumeList[i].headers,
-        name: volumeList[i].name,
-        colormap: volumeList[i].colormap,
-        colormapNegative: volumeList[i].colormapNegative,
-        opacity: volumeList[i].opacity,
-        urlImgData: volumeList[i].urlImgData,
-        cal_min: volumeList[i].cal_min,
-        cal_max: volumeList[i].cal_max,
-        trustCalMinMax: this.opts.trustCalMinMax,
-        isManifest: volumeList[i].isManifest,
-        frame4D: volumeList[i].frame4D,
-        limitFrames4D: volumeList[i].limitFrames4D || this.opts.limitFrames4D,
-        colorbarVisible: volumeList[i].colorbarVisible
-      };
-      await this.addVolumeFromUrl(imageOptions);
+    if (volumeList.length > 1) {
+      await this.addVolumesFromUrl(volumeList);
+      return this;
     }
+    const imageOptions = {
+      url: volumeList[0].url,
+      headers: volumeList[0].headers,
+      name: volumeList[0].name,
+      colormap: volumeList[0].colormap ? volumeList[0].colormap : volumeList[0].colorMap,
+      colormapNegative: volumeList[0].colormapNegative ? volumeList[0].colormapNegative : volumeList[0].colorMapNegative,
+      opacity: volumeList[0].opacity,
+      urlImgData: volumeList[0].urlImgData,
+      cal_min: volumeList[0].cal_min,
+      cal_max: volumeList[0].cal_max,
+      trustCalMinMax: this.opts.trustCalMinMax,
+      isManifest: volumeList[0].isManifest,
+      frame4D: volumeList[0].frame4D,
+      limitFrames4D: volumeList[0].limitFrames4D || this.opts.limitFrames4D,
+      colorbarVisible: volumeList[0].colorbarVisible
+    };
+    await this.addVolumeFromUrl(imageOptions);
     return this;
   }
   /**
@@ -26820,6 +27110,32 @@ var Niivue = class _Niivue {
     this.addMesh(mesh);
     return mesh;
   }
+  /**
+   * Add mesh and notify subscribers
+   * @see {@link https://niivue.github.io/niivue/features/multiuser.meshes.html | live demo usage}
+   */
+  async addMeshesFromUrl(meshOptions) {
+    const promises = meshOptions.map(async (meshItem) => {
+      const ext = this.getFileExt(meshItem.url);
+      if (ext === "JCON" || ext === "JSON") {
+        const response = await fetch(meshItem.url, {});
+        const json = await response.json();
+        const mesh2 = this.loadConnectomeAsMesh(json);
+        this.mediaUrlMap.set(mesh2, meshItem.url);
+        this.onMeshAddedFromUrl(meshItem, mesh2);
+        return mesh2;
+      }
+      const mesh = await NVMesh2.loadFromUrl({ ...meshItem, gl: this.gl });
+      this.mediaUrlMap.set(mesh, meshItem.url);
+      this.onMeshAddedFromUrl(meshItem, mesh);
+      return mesh;
+    });
+    const meshes = await Promise.all(promises);
+    for (let i = 0; i < meshes.length; i++) {
+      this.addMesh(meshes[i]);
+    }
+    return meshes;
+  }
   /**
    * load an array of meshes
    * @param meshList - the array of objects to load. each object must have a resolvable "url" property at a minimum
@@ -26841,9 +27157,13 @@ var Niivue = class _Niivue {
     this.meshes = [];
     this.gl.clearColor(0, 0, 0, 1);
     this.gl.clear(this.gl.COLOR_BUFFER_BIT);
-    for (let i = 0; i < meshList.length; i++) {
-      await this.addMeshFromUrl(meshList[i]);
+    if (meshList.length > 1) {
+      await this.addMeshesFromUrl(meshList);
+      this.updateGLVolume();
+      this.drawScene();
+      return this;
     }
+    await this.addMeshFromUrl(meshList[0]);
     this.updateGLVolume();
     this.drawScene();
     return this;
@@ -28694,6 +29014,8 @@ var Niivue = class _Niivue {
     this.pickingImageShader.use(this.gl);
     this.gl.uniform1f(this.pickingImageShader.uniforms.overlays, this.overlays.length);
     this.gl.uniform3fv(this.pickingImageShader.uniforms.texVox, vox);
+    this.gl.uniform3fv(this.pickingImageShader.uniforms.clipLo, this.opts.clipVolumeLow);
+    this.gl.uniform3fv(this.pickingImageShader.uniforms.clipHi, this.opts.clipVolumeHigh);
     let shader = this.sliceMMShader;
     if (this.opts.isV1SliceShader) {
       shader = this.sliceV1Shader;
@@ -30104,6 +30426,9 @@ var Niivue = class _Niivue {
       width = bulletMargin + longestTextLength;
       width += horizontalMargin * 2;
     }
+    if (width >= this.gl.canvas.width) {
+      return 0;
+    }
     return width;
   }
   getLegendPanelHeight() {
@@ -32390,6 +32715,20 @@ var Niivue = class _Niivue {
       } else if (this.opts.sliceType === 2 /* SAGITTAL */) {
         this.draw2D([0, 0, 0, 0], 2);
       } else {
+        let isShowRender = false;
+        if (this.opts.multiplanarForceRender) {
+          isShowRender = true;
+          if (this.opts.multiplanarForceRender) {
+            this.opts.multiplanarShowRender = 1 /* ALWAYS */;
+          } else {
+            this.opts.multiplanarShowRender = 2 /* AUTO */;
+          }
+          delete this.opts.multiplanarForceRender;
+        } else {
+          if (this.opts.multiplanarShowRender === 1 /* ALWAYS */) {
+            isShowRender = true;
+          }
+        }
         const isDrawPenDown = isFinite(this.drawPenLocation[0]) && this.opts.drawingEnabled;
         const { volScale } = this.sliceScale();
         if (typeof this.opts.multiplanarPadPixels !== "number") {
@@ -32431,7 +32770,7 @@ var Niivue = class _Niivue {
         }
         if (isDrawColumn) {
           let ltwh = ltwh1x3;
-          if (this.opts.multiplanarForceRender || ltwh1x4[4] >= ltwh1x3[4]) {
+          if (isShowRender || this.opts.multiplanarShowRender === 2 /* AUTO */ && ltwh1x4[4] >= ltwh1x3[4]) {
             ltwh = ltwh1x4;
           } else {
             isDraw3D = false;
@@ -32448,7 +32787,7 @@ var Niivue = class _Niivue {
           }
         } else if (isDrawRow) {
           let ltwh = ltwh3x1;
-          if (this.opts.multiplanarForceRender || ltwh4x1[4] >= ltwh3x1[4]) {
+          if (isShowRender || this.opts.multiplanarShowRender === 2 /* AUTO */ && ltwh4x1[4] >= ltwh3x1[4]) {
             ltwh = ltwh4x1;
           } else {
             isDraw3D = false;
@@ -32463,6 +32802,12 @@ var Niivue = class _Niivue {
             this.draw3D([ltwh[0] + sX + sX + sY + pad * 3, ltwh[1], ltwh[3], ltwh[3]]);
           }
         } else if (isDrawGrid) {
+          if (!isShowRender) {
+            isDraw3D = false;
+          }
+          if (this.opts.multiplanarShowRender === 2 /* AUTO */) {
+            isDraw3D = true;
+          }
           const ltwh = ltwh2x2;
           const sX = volScale[0] * ltwh[4];
           const sY = volScale[1] * ltwh[4];
@@ -32585,8 +32930,10 @@ export {
   NVMeshFromUrlOptions,
   NVMeshLayerDefaults,
   NVMeshLoaders,
+  NVMeshUtilities,
   NVUtilities,
   Niivue,
+  SHOW_RENDER,
   SLICE_TYPE,
   cmapper,
   ColorTables as colortables