@niivue/niivue 0.46.0 → 0.48.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.46.0";
+var version = "0.48.0";
 
 // src/logger.ts
 var _Log = class _Log {
@@ -12368,10 +12368,10 @@ var NVMeshLoaders = class _NVMeshLoaders {
       });
     }
     const dpv32 = [];
-    for (let s = 0; s < dpv.length; s++) {
+    for (let i2 = 0; i2 < dpv.length; i2++) {
       dpv32.push({
-        id: dpv[i].id,
-        vals: Float32Array.from(dpv[i].vals)
+        id: dpv[i2].id,
+        vals: Float32Array.from(dpv[i2].vals)
       });
     }
     offsetPt0[noffset++] = npt;
@@ -14485,6 +14485,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
           plen = reader.getInt32(voxoffset += 4, isLittleEndian) - 1;
           break;
         case TAG_OLD_SURF_GEOM:
+        // these don't take lengths at all
         case TAG_OLD_USEREALRAS:
           plen = 0;
           break;
@@ -20261,6 +20262,11 @@ var NVImage = class _NVImage {
         case "comments":
           hdr.description = items[0].substring(0, Math.min(79, items[0].length));
           break;
+        /* case 'command_history':
+          if (items[0].startsWith('dwi2tensor')) {
+            isTensor = true
+          }
+          break */
         case "RepetitionTime":
           TR = parseFloat(items[0]);
           break;
@@ -20861,9 +20867,48 @@ var NVImage = class _NVImage {
     this.img2RASstart = outStart;
     this.calculateOblique();
   }
+  // Reorient raw header data to RAS
+  // assume single volume, use nVolumes to specify, set nVolumes = 0 for same as input
+  hdr2RAS(nVolumes = 1) {
+    if (!this.permRAS) {
+      throw new Error("permRAS undefined");
+    }
+    if (!this.hdr) {
+      throw new Error("hdr undefined");
+    }
+    const hdrBytes = hdrToArrayBuffer({ ...this.hdr, vox_offset: 352 }, false);
+    const hdr = nifti.readHeader(hdrBytes.buffer, true);
+    if (nVolumes === 1) {
+      hdr.dims[0] = 3;
+      hdr.dims[4] = 1;
+    } else if (nVolumes > 1) {
+      hdr.dims[0] = 4;
+      hdr.dims[4] = nVolumes;
+    }
+    const perm = this.permRAS.slice();
+    if (perm[0] === 1 && perm[1] === 2 && perm[2] === 3) {
+      return hdr;
+    }
+    hdr.qform_code = 0;
+    for (let i = 1; i < 4; i++) {
+      hdr.dims[i] = this.dimsRAS[i];
+    }
+    for (let i = 0; i < this.pixDimsRAS.length; i++) {
+      hdr.pixDims[i] = this.pixDimsRAS[i];
+    }
+    let k = 0;
+    for (let i = 0; i < 4; i++) {
+      for (let j = 0; j < 4; j++) {
+        hdr.affine[i][j] = this.matRAS[k];
+        k++;
+      }
+    }
+    return hdr;
+  }
   // Reorient raw image data to RAS
   // note that GPU-based orient shader is much faster
-  img2RAS() {
+  // returns single 3D volume even for 4D input. Use nVolume to select volume (0 indexed)
+  img2RAS(nVolume = 0) {
     if (!this.permRAS) {
       throw new Error("permRAS undefined");
     }
@@ -20878,7 +20923,13 @@ var NVImage = class _NVImage {
       return this.img;
     }
     const hdr = this.hdr;
-    const imgRAS = this.img.slice(0, hdr.dims[1] * hdr.dims[1] * hdr.dims[2] * hdr.dims[3]);
+    const nVox = hdr.dims[1] * hdr.dims[2] * hdr.dims[3];
+    let volSkip = nVolume * nVox;
+    if (volSkip + nVox > this.img.length || volSkip < 0) {
+      volSkip = 0;
+      log.warn(`img2RAS nVolume (${nVolume}) out of bounds (${nVolume}+1)\xD7${nVox} > ${this.img.length}`);
+    }
+    const imgRAS = this.img.slice(0, nVox);
     const aperm = [Math.abs(perm[0]), Math.abs(perm[1]), Math.abs(perm[2])];
     const outdim = [hdr.dims[aperm[0]], hdr.dims[aperm[1]], hdr.dims[aperm[2]]];
     const inStep = [1, hdr.dims[1], hdr.dims[1] * hdr.dims[2]];
@@ -20897,7 +20948,7 @@ var NVImage = class _NVImage {
         const yi = outStart[1] + y * outStep[1];
         for (let x = 0; x < outdim[0]; x++) {
           const xi = outStart[0] + x * outStep[0];
-          imgRAS[j] = this.img[xi + yi + zi];
+          imgRAS[j] = this.img[xi + yi + zi + volSkip];
           j++;
         }
       }
@@ -22309,6 +22360,7 @@ var DEFAULT_OPTIONS = {
   textHeight: 0.06,
   colorbarHeight: 0.05,
   crosshairWidth: 1,
+  crosshairWidthUnit: "voxels",
   crosshairGap: 0,
   rulerWidth: 4,
   show3Dcrosshair: false,
@@ -22334,6 +22386,7 @@ var DEFAULT_OPTIONS = {
   isRuler: false,
   isColorbar: false,
   isOrientCube: false,
+  tileMargin: 0,
   multiplanarPadPixels: 0,
   // @deprecated
   multiplanarForceRender: false,
@@ -22346,6 +22399,8 @@ var DEFAULT_OPTIONS = {
   yoke3Dto2DZoom: false,
   isDepthPickMesh: false,
   isCornerOrientationText: false,
+  heroImageFraction: 0,
+  heroSliceType: 4 /* RENDER */,
   sagittalNoseLeft: false,
   isSliceMM: false,
   isV1SliceShader: false,
@@ -22394,8 +22449,17 @@ var DEFAULT_OPTIONS = {
   clickToSegmentIs2D: false,
   selectionBoxLineThickness: 4,
   selectionBoxIsOutline: false,
-  scrollRequiresFocus: false
+  scrollRequiresFocus: false,
   // determines if the cavas need to be focused to scroll
+  showMeasureUnits: true,
+  // e.g. 20.2 vs 20.2 mm
+  measureTextJustify: "center",
+  // start, center, end
+  measureTextColor: [1, 0, 0, 1],
+  // red
+  measureLineColor: [1, 0, 0, 1],
+  // red
+  measureTextHeight: 0.03
 };
 var INITIAL_SCENE_DATA = {
   gamma: 1,
@@ -23053,8 +23117,27 @@ var NVConnectome = class _NVConnectome extends NVMesh2 {
     const nodes = this.nodes;
     if (nodes && nodes.length > 0) {
       const largest = nodes.reduce((a, b) => a.sizeValue > b.sizeValue ? a : b).sizeValue;
-      const min = this.nodeMinColor ? this.nodeMinColor : nodes.reduce((a, b) => a.colorValue < b.colorValue ? a : b).colorValue;
-      const max = this.nodeMaxColor ? this.nodeMaxColor : nodes.reduce((a, b) => a.colorValue > b.colorValue ? a : b).colorValue;
+      let min, max;
+      if (typeof this.nodeMinColor !== "undefined" && isFinite(this.nodeMinColor)) {
+        min = this.nodeMinColor;
+      } else {
+        min = nodes[0].colorValue;
+        for (let i = 1; i < nodes.length; i++) {
+          if (nodes[i].colorValue < min) {
+            min = nodes[i].colorValue;
+          }
+        }
+      }
+      if (typeof this.nodeMaxColor !== "undefined" && isFinite(this.nodeMaxColor)) {
+        max = this.nodeMaxColor;
+      } else {
+        max = nodes[0].colorValue;
+        for (let i = 1; i < nodes.length; i++) {
+          if (nodes[i].colorValue > max) {
+            max = nodes[i].colorValue;
+          }
+        }
+      }
       const lut = cmapper.colormap(this.nodeColormap, this.colormapInvert);
       const lutNeg = cmapper.colormap(this.nodeColormapNegative, this.colormapInvert);
       const hasNeg = "nodeColormapNegative" in this;
@@ -23185,14 +23268,29 @@ var NVConnectome = class _NVConnectome extends NVMesh2 {
     let lut = cmapper.colormap(this.nodeColormap, this.colormapInvert);
     let lutNeg = cmapper.colormap(this.nodeColormapNegative, this.colormapInvert);
     let hasNeg = "nodeColormapNegative" in this;
-    if (this.nodeMinColor === void 0 || this.nodeMaxColor === void 0) {
-      throw new Error("nodeMinColor or nodeMaxColor is undefined");
+    if (this.nodeMinColor === void 0) {
+      this.nodeMinColor = NaN;
+    }
+    if (this.nodeMaxColor === void 0) {
+      this.nodeMaxColor = NaN;
     }
-    if (this.edgeMin === void 0 || this.edgeMax === void 0) {
-      throw new Error("edgeMin or edgeMax undefined");
+    if (this.edgeMin === void 0) {
+      this.edgeMin = NaN;
+    }
+    if (this.edgeMax === void 0) {
+      this.edgeMax = NaN;
     }
     let min = this.nodeMinColor;
     let max = this.nodeMaxColor;
+    if (!isFinite(min) || !isFinite(min)) {
+      const nodes2 = this.nodes;
+      min = nodes2[0].colorValue;
+      max = nodes2[0].colorValue;
+      for (let i = 0; i < nodes2.length; i++) {
+        min = Math.min(min, nodes2[i].colorValue);
+        max = Math.max(max, nodes2[i].colorValue);
+      }
+    }
     const nodes = this.nodes;
     const nNode = nodes.length;
     for (let i = 0; i < nNode; i++) {
@@ -23225,35 +23323,45 @@ var NVConnectome = class _NVConnectome extends NVMesh2 {
     lut = cmapper.colormap(this.edgeColormap, this.colormapInvert);
     lutNeg = cmapper.colormap(this.edgeColormapNegative, this.colormapInvert);
     hasNeg = "edgeColormapNegative" in this;
-    min = this.edgeMin;
-    max = this.edgeMax;
     const edges = this.edges;
-    for (const edge of edges) {
-      let color = edge.colorValue;
-      const isNeg = hasNeg && color < 0;
-      if (isNeg) {
-        color = -color;
-      }
-      const radius = color * this.edgeScale;
-      if (radius <= 0) {
-        continue;
-      }
-      if (min < max) {
-        if (color < min) {
+    if (edges !== void 0 && edges.length > 0) {
+      min = this.edgeMin;
+      max = this.edgeMax;
+      if (!isFinite(min) || !isFinite(min)) {
+        min = edges[0].colorValue;
+        max = edges[0].colorValue;
+        for (let i = 0; i < edges.length; i++) {
+          min = Math.min(min, edges[i].colorValue);
+          max = Math.max(max, edges[i].colorValue);
+        }
+      }
+      for (const edge of edges) {
+        let color = edge.colorValue;
+        const isNeg = hasNeg && color < 0;
+        if (isNeg) {
+          color = -color;
+        }
+        const radius = color * this.edgeScale;
+        if (radius <= 0) {
           continue;
         }
-        color = (color - min) / (max - min);
-      } else {
-        color = 1;
-      }
-      color = Math.round(Math.max(Math.min(255, color * 255))) * 4;
-      let rgba = [lut[color], lut[color + 1], lut[color + 2], 255];
-      if (isNeg) {
-        rgba = [lutNeg[color], lutNeg[color + 1], lutNeg[color + 2], 255];
+        if (min < max) {
+          if (color < min) {
+            continue;
+          }
+          color = (color - min) / (max - min);
+        } else {
+          color = 1;
+        }
+        color = Math.round(Math.max(Math.min(255, color * 255))) * 4;
+        let rgba = [lut[color], lut[color + 1], lut[color + 2], 255];
+        if (isNeg) {
+          rgba = [lutNeg[color], lutNeg[color + 1], lutNeg[color + 2], 255];
+        }
+        const pti = vec39.fromValues(nodes[edge.first].x, nodes[edge.first].y, nodes[edge.first].z);
+        const ptj = vec39.fromValues(nodes[edge.second].x, nodes[edge.second].y, nodes[edge.second].z);
+        NiivueObject3D.makeColoredCylinder(pts, tris, rgba255, pti, ptj, radius, rgba);
       }
-      const pti = vec39.fromValues(nodes[edge.first].x, nodes[edge.first].y, nodes[edge.first].z);
-      const ptj = vec39.fromValues(nodes[edge.second].x, nodes[edge.second].y, nodes[edge.second].z);
-      NiivueObject3D.makeColoredCylinder(pts, tris, rgba255, pti, ptj, radius, rgba);
     }
     const pts32 = new Float32Array(pts);
     const tris32 = new Uint32Array(tris);
@@ -25922,6 +26030,16 @@ var Niivue = class {
     this.opts.isCornerOrientationText = isCornerOrientationText;
     this.updateGLVolume();
   }
+  /**
+   * determine proportion of screen real estate devoted to rendering in multiplanar view.
+   * @param fraction - proportion of screen devoted to primary (hero) image (0 to disable)
+   * @example niivue.setHeroImage(0.5)
+   * @see {@link https://niivue.github.io/niivue/features/layout.html | live demo usage}
+   */
+  setHeroImage(fraction) {
+    this.opts.heroImageFraction = fraction;
+    this.drawScene();
+  }
   /**
    * control whether 2D slices use radiological or neurological convention.
    * @param isRadiologicalConvention - new display convention
@@ -30887,30 +31005,39 @@ var Niivue = class {
     }
     const frac10cm = 100 / fovMM[0];
     const pix10cm = frac10cm * ltwh[2];
-    const pixLeft = ltwh[0] + 0.5 * ltwh[2] - 0.5 * pix10cm;
-    const pixTop = ltwh[1] + ltwh[3] - 2 * this.opts.rulerWidth;
+    const pix1cm = Math.max(Math.round(pix10cm * 0.1), 2);
+    const pixLeft = Math.floor(ltwh[0] + 0.5 * ltwh[2] - 0.5 * pix10cm);
+    const thick = Number(this.opts.rulerWidth);
+    const pixTop = Math.floor(ltwh[1] + ltwh[3] - pix1cm) + 0.5 * thick;
     const startXYendXY = [pixLeft, pixTop, pixLeft + pix10cm, pixTop];
-    this.drawRuler10cm(startXYendXY);
+    let outlineColor = [0, 0, 0, 1];
+    if (this.opts.rulerColor[0] + this.opts.rulerColor[1] + this.opts.rulerColor[2] < 0.8) {
+      outlineColor = [1, 1, 1, 1];
+    }
+    this.drawRuler10cm(startXYendXY, outlineColor, thick + 1);
+    this.drawRuler10cm(startXYendXY, this.opts.rulerColor, thick);
   }
   // not included in public docs
   // draw 10cm ruler at desired coordinates
-  drawRuler10cm(startXYendXY) {
+  drawRuler10cm(startXYendXY, rulerColor, rulerWidth = 1) {
     if (!this.lineShader) {
       throw new Error("lineShader undefined");
     }
     this.gl.bindVertexArray(this.genericVAO);
     this.lineShader.use(this.gl);
-    this.gl.uniform4fv(this.lineShader.uniforms.lineColor, this.opts.rulerColor);
+    this.gl.uniform4fv(this.lineShader.uniforms.lineColor, rulerColor);
     this.gl.uniform2fv(this.lineShader.uniforms.canvasWidthHeight, [this.gl.canvas.width, this.gl.canvas.height]);
-    this.gl.uniform1f(this.lineShader.uniforms.thickness, this.opts.rulerWidth);
+    this.gl.uniform1f(this.lineShader.uniforms.thickness, rulerWidth);
     this.gl.uniform4fv(this.lineShader.uniforms.startXYendXY, startXYendXY);
     this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
     const w1cm = -0.1 * (startXYendXY[0] - startXYendXY[2]);
-    const b = startXYendXY[1];
-    const t = b - 2 * this.opts.rulerWidth;
-    const t2 = b - 4 * this.opts.rulerWidth;
+    const b = startXYendXY[1] - Math.floor(0.5 * this.opts.rulerWidth);
+    const t = Math.floor(b - 0.35 * w1cm);
+    const t2 = Math.floor(b - 0.7 * w1cm);
     for (let i = 0; i < 11; i++) {
-      const l = startXYendXY[0] + i * w1cm;
+      let l = startXYendXY[0] + i * w1cm;
+      l = Math.max(l, startXYendXY[0] + 0.5 * rulerWidth);
+      l = Math.min(l, startXYendXY[2] - 0.5 * rulerWidth);
       const xyxy = [l, b, l, t];
       if (i % 5 === 0) {
         xyxy[3] = t2;
@@ -30988,6 +31115,24 @@ var Niivue = class {
   // not included in public docs
   // draw line between start/end points and text to report length
   drawMeasurementTool(startXYendXY) {
+    function extendTo(x0, y0, x1, y1, distance) {
+      const x = x0 - x1;
+      const y = y0 - y1;
+      if (x === 0 && y === 0) {
+        return {
+          origin: [x1 + distance, y1],
+          terminus: [x1 + distance, y1]
+        };
+      }
+      const c = Math.sqrt(x * x + y * y);
+      const dX = distance * x / c;
+      const dY = distance * y / c;
+      return {
+        origin: [x0 + dX, y0 + dY],
+        // next to start point
+        terminus: [x1 - dX, y1 - dY]
+      };
+    }
     const gl = this.gl;
     gl.bindVertexArray(this.genericVAO);
     gl.depthFunc(gl.ALWAYS);
@@ -31002,9 +31147,9 @@ var Niivue = class {
     gl.uniform1f(this.lineShader.uniforms.thickness, this.opts.rulerWidth);
     gl.uniform4fv(this.lineShader.uniforms.startXYendXY, startXYendXY);
     gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-    const color = this.opts.rulerColor;
-    color[3] = 1;
-    gl.uniform4fv(this.lineShader.uniforms.lineColor, color);
+    const measureLineColor = this.opts.measureLineColor;
+    measureLineColor[3] = 1;
+    gl.uniform4fv(this.lineShader.uniforms.lineColor, measureLineColor);
     const w = this.opts.rulerWidth;
     gl.uniform1f(this.lineShader.uniforms.thickness, w * 2);
     let sXYeXY = [startXYendXY[0], startXYendXY[1] - w, startXYendXY[0], startXYendXY[1] + w];
@@ -31030,8 +31175,30 @@ var Niivue = class {
       if (lenMM > 99) {
         decimals = 0;
       }
-      const stringMM = lenMM.toFixed(decimals);
-      this.drawTextBetween(startXYendXY, stringMM, 1, color);
+      let stringMM = lenMM.toFixed(decimals);
+      if (this.opts.showMeasureUnits) {
+        stringMM = `${stringMM} mm`;
+      }
+      let textCoords = startXYendXY;
+      const [x0, y0, x1, y1] = startXYendXY;
+      const { origin, terminus } = extendTo(x0, y0, x1, y1, 30);
+      switch (this.opts.measureTextJustify) {
+        case "start":
+          textCoords = [...origin, ...origin.map((point) => point + 1)];
+          break;
+        case "end":
+          textCoords = textCoords = [...terminus, ...terminus.map((point) => point + 1)];
+          break;
+        default:
+          textCoords = startXYendXY;
+          break;
+      }
+      this.drawTextBetween(
+        textCoords,
+        stringMM,
+        this.opts.measureTextHeight / this.opts.textHeight,
+        this.opts.measureTextColor
+      );
     }
     gl.bindVertexArray(this.unusedVAO);
   }
@@ -31889,6 +32056,18 @@ var Niivue = class {
   }
   draw2D(leftTopWidthHeight, axCorSag, customMM = NaN, imageWidthHeight = [NaN, NaN]) {
     const padLeftTop = [NaN, NaN];
+    if (imageWidthHeight[0] === Infinity) {
+      const volScale = this.sliceScale().volScale;
+      let scale = this.scaleSlice(volScale[0], volScale[1], [0, 0], [leftTopWidthHeight[2], leftTopWidthHeight[3]]);
+      if (axCorSag === 1 /* CORONAL */) {
+        scale = this.scaleSlice(volScale[0], volScale[2], [0, 0], [leftTopWidthHeight[2], leftTopWidthHeight[3]]);
+      }
+      if (axCorSag === 2 /* SAGITTAL */) {
+        scale = this.scaleSlice(volScale[1], volScale[2], [0, 0], [leftTopWidthHeight[2], leftTopWidthHeight[3]]);
+      }
+      imageWidthHeight[0] = scale[2];
+      imageWidthHeight[1] = scale[3];
+    }
     if (isNaN(imageWidthHeight[0])) {
       this.draw2DMain(leftTopWidthHeight, axCorSag, customMM);
     } else {
@@ -32934,22 +33113,28 @@ var Niivue = class {
     }
     const gl = this.gl;
     const mm = this.frac2mm(this.scene.crosshairPos, 0, isSliceMM);
+    let radius = 1;
+    const [mn, mx, range] = this.sceneExtentsMinMax(isSliceMM);
+    if (this.volumes.length > 0) {
+      if (!this.back) {
+        throw new Error("back undefined");
+      }
+      radius = 0.5 * Math.min(Math.min(this.back.pixDims[1], this.back.pixDims[2]), this.back.pixDims[3]);
+    } else if (range[0] < 50 || range[0] > 1e3) {
+      radius = range[0] * 0.02;
+    }
+    radius *= this.opts.crosshairWidth;
+    if (this.opts?.crosshairWidthUnit === "percent") {
+      radius = range[0] * this.opts.crosshairWidth * 0.5 * 0.01;
+    }
+    if (this.opts?.crosshairWidthUnit === "mm") {
+      radius = this.opts.crosshairWidth * 0.5;
+    }
     if (this.crosshairs3D === null || this.crosshairs3D.mm[0] !== mm[0] || this.crosshairs3D.mm[1] !== mm[1] || this.crosshairs3D.mm[2] !== mm[2]) {
       if (this.crosshairs3D !== null) {
         gl.deleteBuffer(this.crosshairs3D.indexBuffer);
         gl.deleteBuffer(this.crosshairs3D.vertexBuffer);
       }
-      const [mn, mx, range] = this.sceneExtentsMinMax(isSliceMM);
-      let radius = 1;
-      if (this.volumes.length > 0) {
-        if (!this.back) {
-          throw new Error("back undefined");
-        }
-        radius = 0.5 * Math.min(Math.min(this.back.pixDims[1], this.back.pixDims[2]), this.back.pixDims[3]);
-      } else if (range[0] < 50 || range[0] > 1e3) {
-        radius = range[0] * 0.02;
-      }
-      radius *= this.opts.crosshairWidth;
       this.crosshairs3D = NiivueObject3D.generateCrosshairs(this.gl, 1, mm, mn, mx, radius, 20, this.opts.crosshairGap);
       this.crosshairs3D.mm = mm;
     }
@@ -32968,6 +33153,7 @@ var Niivue = class {
       );
     }
     gl.uniformMatrix4fv(crosshairsShader.uniforms.mvpMtx, false, mvpMtx);
+    gl.disable(gl.CULL_FACE);
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.crosshairs3D.indexBuffer);
     gl.enable(gl.DEPTH_TEST);
     const color = [...this.opts.crosshairColor];
@@ -33118,9 +33304,9 @@ var Niivue = class {
   }
   // not included in public docs
   // note: we also have a "sliceScale" method, which could be confusing
-  scaleSlice(w, h, widthPadPixels = 0, heightPadPixels = 0) {
-    const canvasW = this.effectiveCanvasWidth() - widthPadPixels;
-    const canvasH = this.effectiveCanvasHeight() - heightPadPixels;
+  scaleSlice(w, h, padPixelsWH = [0, 0], canvasWH = [0, 0]) {
+    const canvasW = canvasWH[0] === 0 ? this.effectiveCanvasWidth() - padPixelsWH[0] : canvasWH[0] - padPixelsWH[0];
+    const canvasH = canvasWH[1] === 0 ? this.effectiveCanvasHeight() - padPixelsWH[1] : canvasWH[1] - padPixelsWH[1];
     let scalePix = canvasW / w;
     if (h * scalePix > canvasH) {
       scalePix = canvasH / h;
@@ -33569,7 +33755,6 @@ var Niivue = class {
     if (this.volumes.length === 0 || typeof this.volumes[0].dims === "undefined") {
       if (this.meshes.length > 0) {
         this.screenSlices = [];
-        this.opts.sliceType = 4 /* RENDER */;
         this.draw3D();
         if (this.opts.isColorbar) {
           this.drawColorbar();
@@ -33613,6 +33798,8 @@ var Niivue = class {
     if (this.sliceMosaicString.length > 0) {
       this.drawMosaic(this.sliceMosaicString);
     } else {
+      const heroImageWH = [0, 0];
+      let isHeroImage = false;
       this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
       this.screenSlices = [];
       if (this.opts.sliceType === 0 /* AXIAL */) {
@@ -33622,6 +33809,9 @@ var Niivue = class {
       } else if (this.opts.sliceType === 2 /* SAGITTAL */) {
         this.draw2D([0, 0, 0, 0], 2);
       } else {
+        let padPixelsWH = function(cols, rows) {
+          return [(cols - 1) * pad + cols * innerPad, (rows - 1) * pad + rows * innerPad];
+        };
         let isShowRender = false;
         if (this.opts.multiplanarForceRender) {
           isShowRender = true;
@@ -33648,20 +33838,42 @@ var Niivue = class {
           log.debug("multiplanarPadPixels must be numeric");
         }
         const pad = parseFloat(`${this.opts.multiplanarPadPixels}`);
-        const ltwh2x2 = this.scaleSlice(volScale[0] + volScale[1], volScale[1] + volScale[2], pad * 1, pad * 1);
+        let innerPad = this.opts.tileMargin;
+        if (innerPad < 0) {
+          innerPad = 2 * (2 + Math.ceil(Math.max(this.opts.textHeight, 0.01) * Math.min(this.gl.canvas.height, this.gl.canvas.width)));
+        }
+        let canvasWH = [this.effectiveCanvasWidth(), this.effectiveCanvasHeight()];
+        if (this.opts.heroImageFraction > 0 && this.opts.heroImageFraction < 1) {
+          isShowRender = false;
+          isHeroImage = true;
+          if (canvasWH[0] > canvasWH[1] && this.opts.multiplanarLayout !== 3 /* ROW */) {
+            heroImageWH[0] = canvasWH[0] * this.opts.heroImageFraction;
+          } else {
+            heroImageWH[1] = canvasWH[1] * this.opts.heroImageFraction;
+          }
+          canvasWH = [canvasWH[0] - heroImageWH[0], canvasWH[1] - heroImageWH[1]];
+        }
+        const ltwh2x2 = this.scaleSlice(
+          volScale[0] + volScale[1],
+          volScale[1] + volScale[2],
+          padPixelsWH(2, 2),
+          canvasWH
+        );
         const mx = Math.max(Math.max(volScale[1], volScale[2]), volScale[0]);
         const ltwh3x1 = this.scaleSlice(
           volScale[0] + volScale[0] + volScale[1],
           Math.max(volScale[1], volScale[2]),
-          pad * 2
+          padPixelsWH(3, 1),
+          canvasWH
         );
         const ltwh4x1 = this.scaleSlice(
           volScale[0] + volScale[0] + volScale[1] + mx,
           Math.max(volScale[1], volScale[2]),
-          pad * 3
+          padPixelsWH(4, 1),
+          canvasWH
         );
-        const ltwh1x3 = this.scaleSlice(mx, volScale[1] + volScale[2] + volScale[2], 0, pad * 2);
-        const ltwh1x4 = this.scaleSlice(mx, volScale[1] + volScale[2] + volScale[2] + mx, 0, pad * 3);
+        const ltwh1x3 = this.scaleSlice(mx, volScale[1] + volScale[2] + volScale[2], padPixelsWH(1, 3), canvasWH);
+        const ltwh1x4 = this.scaleSlice(mx, volScale[1] + volScale[2] + volScale[2] + mx, padPixelsWH(1, 4), canvasWH);
         let isDraw3D = !isDrawPenDown && (maxVols < 2 || !isDrawGraph);
         let isDrawColumn = false;
         let isDrawGrid = false;
@@ -33684,22 +33896,39 @@ var Niivue = class {
         let ltwh = ltwh2x2;
         if (isDrawColumn) {
           ltwh = ltwh1x3;
-          if (isShowRender || this.opts.multiplanarShowRender === 2 /* AUTO */ && ltwh1x4[4] >= ltwh1x3[4]) {
+          if (!isHeroImage && (isShowRender || this.opts.multiplanarShowRender === 2 /* AUTO */ && ltwh1x4[4] >= ltwh1x3[4])) {
             ltwh = ltwh1x4;
           } else {
             isDraw3D = false;
           }
         } else if (isDrawRow) {
           ltwh = ltwh3x1;
-          if (isShowRender || this.opts.multiplanarShowRender === 2 /* AUTO */ && ltwh4x1[4] >= ltwh3x1[4]) {
+          if (!isHeroImage && (isShowRender || this.opts.multiplanarShowRender === 2 /* AUTO */ && ltwh4x1[4] >= ltwh3x1[4])) {
             ltwh = ltwh4x1;
           } else {
             isDraw3D = false;
           }
         }
-        const sX = volScale[0] * ltwh[4];
-        const sY = volScale[1] * ltwh[4];
-        const sZ = volScale[2] * ltwh[4];
+        if (isHeroImage) {
+          const heroW = heroImageWH[0] === 0 ? this.effectiveCanvasWidth() : heroImageWH[0];
+          const heroH = heroImageWH[1] === 0 ? this.effectiveCanvasHeight() : heroImageWH[1];
+          if (this.opts?.heroSliceType === 0 /* AXIAL */ || this.opts?.heroSliceType === 1 /* CORONAL */ || this.opts?.heroSliceType === 2 /* SAGITTAL */) {
+            this.draw2D([0, 0, heroW, heroH], this.opts.heroSliceType, NaN, [Infinity, Infinity]);
+          } else {
+            const ltwh2 = ltwh.slice();
+            const canvasW = this.effectiveCanvasWidth();
+            if (heroW === canvasW) {
+              ltwh2[0] = 0;
+            }
+            this.draw3D([ltwh2[0], 0, heroW, heroH]);
+          }
+          ltwh[0] += heroImageWH[0];
+          ltwh[1] += heroImageWH[1];
+          isDraw3D = false;
+        }
+        const sX = volScale[0] * ltwh[4] + innerPad;
+        const sY = volScale[1] * ltwh[4] + innerPad;
+        const sZ = volScale[2] * ltwh[4] + innerPad;
         const actualX = actualScale[0] * ltwh[4];
         const actualY = actualScale[1] * ltwh[4];
         const actualZ = actualScale[2] * ltwh[4];
@@ -33726,6 +33955,9 @@ var Niivue = class {
           if (this.opts.multiplanarShowRender === 2 /* AUTO */) {
             isDraw3D = true;
           }
+          if (isHeroImage) {
+            isDraw3D = false;
+          }
           this.draw2D([ltwh[0], ltwh[1] + sZ + pad, sX, sY], 0, NaN, [actualX, actualY]);
           this.draw2D([ltwh[0], ltwh[1], sX, sZ], 1, NaN, [actualX, actualZ]);
           this.draw2D([ltwh[0] + sX + pad, ltwh[1], sY, sZ], 2, NaN, [actualY, actualZ]);