@niivue/niivue 0.45.1 → 0.47.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.45.1";
+var version = "0.47.0";
 
 // src/logger.ts
 var _Log = class _Log {
@@ -806,6 +806,46 @@ out vec4 color;
 void main() {
 	color = lineColor;
 }`;
+var fragRectOutlineShader = `#version 300 es
+#line 723
+precision highp int;
+precision highp float;
+
+uniform vec4 lineColor;
+uniform vec4 leftTopWidthHeight;
+uniform float thickness; // line thickness in pixels
+uniform vec2 canvasWidthHeight;
+
+out vec4 color;
+
+void main() {
+    // fragment position in screen coordinates
+    vec2 fragCoord = gl_FragCoord.xy;
+
+    // canvas height
+    float canvasHeight = canvasWidthHeight.y;
+
+    // 'top' and 'bottom' to match gl_FragCoord.y coordinate system
+    float top = canvasHeight - leftTopWidthHeight.y;
+    float bottom = top - leftTopWidthHeight.w;
+
+    // left and right edges
+    float left = leftTopWidthHeight.x;
+    float right = left + leftTopWidthHeight.z;
+
+    bool withinLeft = fragCoord.x >= left && fragCoord.x <= left + thickness;
+    bool withinRight = fragCoord.x <= right && fragCoord.x >= right - thickness;
+    bool withinTop = fragCoord.y <= top && fragCoord.y >= top - thickness;
+    bool withinBottom = fragCoord.y >= bottom && fragCoord.y <= bottom + thickness;
+
+    bool isOutline = withinLeft || withinRight || withinTop || withinBottom;
+
+    if (isOutline) {
+        color = lineColor;
+    } else {
+        discard; 
+    }
+}`;
 var vertColorbarShader = `#version 300 es
 #line 490
 layout(location=0) in vec3 pos;
@@ -12328,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;
@@ -14445,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;
@@ -20221,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;
@@ -20942,11 +20988,13 @@ var NVImage = class _NVImage {
       this.onOpacityChange(this);
     }
   }
-  // not included in public docs
-  // given an overlayItem and its img TypedArray, calculate 2% and 98% display range if needed
-  // clone FSL robust_range estimates https://github.com/rordenlab/niimath/blob/331758459140db59290a794350d0ff3ad4c37b67/src/core32.c#L1215
-  // ToDo: convert to web assembly, this is slow in JavaScript
-  calMinMax() {
+  /**
+   * set contrast/brightness to robust range (2%..98%)
+   * @param vol - volume for estimate (use -1 to use estimate on all loaded volumes; use INFINITY for current volume)
+   * @sets volume brightness and returns array [pct2, pct98, mnScale, mxScale]
+   * @see {@link https://niivue.github.io/niivue/features/timeseries2.html | live demo usage}
+   */
+  calMinMax(vol = Number.POSITIVE_INFINITY) {
     if (!this.hdr) {
       throw new Error("hdr undefined");
     }
@@ -20957,10 +21005,20 @@ var NVImage = class _NVImage {
     let mx = Number.NEGATIVE_INFINITY;
     let nZero = 0;
     let nNan = 0;
-    const nVox = this.img.length;
+    let voxEnd = this.img.length;
+    let voxStart = 0;
+    const nVox3D = this.hdr.dims[1] * this.hdr.dims[2] * this.hdr.dims[3];
+    const nVol = Math.floor(voxEnd / nVox3D);
+    if (vol >= nVol) {
+      vol = this.frame4D;
+    }
+    if (vol >= 0 && vol < nVol) {
+      voxStart = vol * nVox3D;
+      voxEnd = voxStart + nVox3D;
+    }
     const isFastCalc = this.img.constructor !== Float64Array && this.img.constructor !== Float32Array && this.ignoreZeroVoxels;
     if (isFastCalc) {
-      for (let i = 0; i < nVox; i++) {
+      for (let i = voxStart; i < voxEnd; i++) {
         mn = Math.min(this.img[i], mn);
         mx = Math.max(this.img[i], mx);
         if (this.img[i] === 0) {
@@ -20968,7 +21026,7 @@ var NVImage = class _NVImage {
         }
       }
     } else {
-      for (let i = 0; i < nVox; i++) {
+      for (let i = voxStart; i < voxEnd; i++) {
         if (isNaN(this.img[i])) {
           nNan++;
           continue;
@@ -21013,7 +21071,7 @@ var NVImage = class _NVImage {
       this.robust_max = this.cal_max;
       return [cmMin, cmMax, cmMin, cmMax];
     }
-    const percentZero = 100 * nZero / nVox;
+    const percentZero = 100 * nZero / (voxEnd - voxStart);
     let isOverrideIgnoreZeroVoxels = false;
     if (percentZero > 60 && !this.ignoreZeroVoxels) {
       log.warn(`${Math.round(percentZero)}% of voxels are zero: ignoring zeros for cal_max`);
@@ -21024,7 +21082,7 @@ var NVImage = class _NVImage {
       nZero = 0;
     }
     nZero += nNan;
-    const n2pct = Math.round((nVox - nZero) * this.percentileFrac);
+    const n2pct = Math.round((voxEnd - voxStart - nZero) * this.percentileFrac);
     if (n2pct < 1 || mn === mx) {
       log.debug("no variability in image intensity?");
       this.cal_min = mnScale;
@@ -21042,11 +21100,11 @@ var NVImage = class _NVImage {
       hist[i] = 0;
     }
     if (isFastCalc) {
-      for (let i = 0; i < nVox; i++) {
+      for (let i = voxStart; i < voxEnd; i++) {
         hist[Math.round((this.img[i] - mn) * scl)]++;
       }
     } else if (this.ignoreZeroVoxels) {
-      for (let i = 0; i < nVox; i++) {
+      for (let i = voxStart; i < voxEnd; i++) {
         if (this.img[i] === 0) {
           continue;
         }
@@ -21056,7 +21114,7 @@ var NVImage = class _NVImage {
         hist[Math.round((this.img[i] - mn) * scl)]++;
       }
     } else {
-      for (let i = 0; i < nVox; i++) {
+      for (let i = voxStart; i < voxEnd; i++) {
         if (isNaN(this.img[i])) {
           continue;
         }
@@ -22250,12 +22308,14 @@ var DRAG_MODE = /* @__PURE__ */ ((DRAG_MODE2) => {
   DRAG_MODE2[DRAG_MODE2["pan"] = 3] = "pan";
   DRAG_MODE2[DRAG_MODE2["slicer3D"] = 4] = "slicer3D";
   DRAG_MODE2[DRAG_MODE2["callbackOnly"] = 5] = "callbackOnly";
+  DRAG_MODE2[DRAG_MODE2["roiSelection"] = 6] = "roiSelection";
   return DRAG_MODE2;
 })(DRAG_MODE || {});
 var DEFAULT_OPTIONS = {
   textHeight: 0.06,
   colorbarHeight: 0.05,
   crosshairWidth: 1,
+  crosshairWidthUnit: "voxels",
   crosshairGap: 0,
   rulerWidth: 4,
   show3Dcrosshair: false,
@@ -22281,6 +22341,7 @@ var DEFAULT_OPTIONS = {
   isRuler: false,
   isColorbar: false,
   isOrientCube: false,
+  tileMargin: 0,
   multiplanarPadPixels: 0,
   // @deprecated
   multiplanarForceRender: false,
@@ -22293,6 +22354,8 @@ var DEFAULT_OPTIONS = {
   yoke3Dto2DZoom: false,
   isDepthPickMesh: false,
   isCornerOrientationText: false,
+  heroImageFraction: 0,
+  heroSliceType: 4 /* RENDER */,
   sagittalNoseLeft: false,
   isSliceMM: false,
   isV1SliceShader: false,
@@ -22319,20 +22382,49 @@ var DEFAULT_OPTIONS = {
   renderOverlayBlend: 1,
   sliceMosaicString: "",
   centerMosaic: false,
+  penSize: 1,
+  // in voxels, since all drawing is done using bitmap indices
   clickToSegment: false,
-  clickToSegmentRadius: 2,
-  clickToSegmentSteps: 10,
-  clickToSegmentBright: true
+  clickToSegmentRadius: 3,
+  // in mm
+  clickToSegmentBright: true,
+  clickToSegmentAutoIntensity: false,
+  // new option, but keep clickToSegmentBright for backwards compatibility
+  clickToSegmentIntensityMax: NaN,
+  // NaN will use auto threshold (default flood fill behavior from before)
+  clickToSegmentIntensityMin: NaN,
+  // NaN will use auto threshold (default flood fill behavior from before)
+  // 0 will use auto threshold (default flood fill behavior from before)
+  // Take the voxel intensity at the click point and use this percentage +/- to threshold the flood fill operation.
+  // If greater than 0, clickedVoxelIntensity +/- clickedVoxelIntensity * clickToSegmentPercent will be used
+  // for the clickToSegmentIntensityMin and clickToSegmentIntensityMax values.
+  clickToSegmentPercent: 0,
+  clickToSegmentMaxDistanceMM: Number.POSITIVE_INFINITY,
+  // default value is infinity for backwards compatibility with flood fill routine.
+  clickToSegmentIs2D: false,
+  selectionBoxLineThickness: 4,
+  selectionBoxIsOutline: 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,
   azimuth: 110,
   elevation: 10,
-  crosshairPos: vec38.create(),
+  crosshairPos: vec38.fromValues(0.5, 0.5, 0.5),
   clipPlane: [0, 0, 0, 0],
   clipPlaneDepthAziElev: [2, 0, 0],
   volScaleMultiplier: 1,
-  pan2Dxyzmm: vec46.create(),
+  pan2Dxyzmm: vec46.fromValues(0, 0, 0, 1),
   clipThick: 2,
   clipVolumeLow: [0, 0, 0],
   clipVolumeHigh: [1, 1, 1]
@@ -22980,8 +23072,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;
@@ -23112,14 +23223,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++) {
@@ -23152,35 +23278,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);
@@ -24019,7 +24155,7 @@ var defaultSaveImageOptions = {
   isSaveDrawing: false,
   volumeByIndex: 0
 };
-var Niivue = class _Niivue {
+var Niivue = class {
   /**
    * @param options  - options object to set modifiable Niivue properties
    */
@@ -24050,6 +24186,12 @@ var Niivue = class _Niivue {
     // the color lookup table for drawing
     __publicField(this, "drawOpacity", 0.8);
     // opacity of drawing (default)
+    __publicField(this, "clickToSegmentIsGrowing", false);
+    // flag to indicate if the clickToSegment flood fill growing is in progress with left mouse down + drag
+    __publicField(this, "clickToSegmentGrowingBitmap", null);
+    // the bitmap of the growing flood fill
+    __publicField(this, "clickToSegmentXY", [0, 0]);
+    // the x,y location of the clickToSegment flood fill
     __publicField(this, "renderDrawAmbientOcclusion", 0.4);
     __publicField(this, "colorbarHeight", 0);
     // height in pixels, set when colorbar is drawn
@@ -24067,6 +24209,7 @@ var Niivue = class _Niivue {
     __publicField(this, "orientCubeShader");
     __publicField(this, "orientCubeShaderVAO", null);
     __publicField(this, "rectShader");
+    __publicField(this, "rectOutlineShader");
     __publicField(this, "renderShader");
     __publicField(this, "lineShader");
     __publicField(this, "line3DShader");
@@ -24119,7 +24262,20 @@ var Niivue = class _Niivue {
     __publicField(this, "extentsMax");
     // ResizeObserver
     __publicField(this, "resizeObserver", null);
-    __publicField(this, "syncOpts", {});
+    // syncOpts: Record<string, unknown> = {}
+    __publicField(this, "syncOpts", {
+      "3d": false,
+      // legacy option
+      "2d": false,
+      // legacy option
+      zoomPan: false,
+      cal_min: false,
+      cal_max: false,
+      clipPlane: false,
+      gamma: false,
+      sliceType: false,
+      crosshair: false
+    });
     __publicField(this, "readyForSync", false);
     // UI Data
     __publicField(this, "uiData", {
@@ -24178,7 +24334,8 @@ var Niivue = class _Niivue {
       vols: [0],
       // e.g. timeline for background volume only, e.g. [0,2] for first and third volumes
       autoSizeMultiplanar: false,
-      normalizeValues: false
+      normalizeValues: false,
+      isRangeCalMinMax: false
     });
     __publicField(this, "meshShaders", [
       {
@@ -24578,8 +24735,16 @@ var Niivue = class _Niivue {
       this.canvas.style.display = "block";
       this.canvas.width = this.canvas.offsetWidth;
       this.canvas.height = this.canvas.offsetHeight;
-      window.addEventListener("resize", this.resizeListener.bind(this));
-      this.resizeObserver = new ResizeObserver(this.resizeListener.bind(this));
+      window.addEventListener("resize", () => {
+        requestAnimationFrame(() => {
+          this.resizeListener();
+        });
+      });
+      this.resizeObserver = new ResizeObserver(() => {
+        requestAnimationFrame(() => {
+          this.resizeListener();
+        });
+      });
       this.resizeObserver.observe(this.canvas.parentElement);
     }
     this.registerInteractions();
@@ -24598,6 +24763,9 @@ var Niivue = class _Niivue {
    * @see {@link https://niivue.github.io/niivue/features/sync.mesh.html | live demo usage}
    */
   syncWith(otherNV, syncOpts = { "2d": true, "3d": true }) {
+    if (!(otherNV instanceof Array)) {
+      otherNV = [otherNV];
+    }
     this.otherNV = otherNV;
     this.syncOpts = { ...syncOpts };
   }
@@ -24613,9 +24781,55 @@ var Niivue = class _Niivue {
    * @see {@link https://niivue.github.io/niivue/features/sync.mesh.html | live demo usage}
    */
   broadcastTo(otherNV, syncOpts = { "2d": true, "3d": true }) {
+    if (!(otherNV instanceof Array)) {
+      otherNV = [otherNV];
+    }
     this.otherNV = otherNV;
     this.syncOpts = syncOpts;
   }
+  doSync3d(otherNV) {
+    otherNV.scene.renderAzimuth = this.scene.renderAzimuth;
+    otherNV.scene.renderElevation = this.scene.renderElevation;
+    otherNV.scene.volScaleMultiplier = this.scene.volScaleMultiplier;
+  }
+  // both crosshair and zoomPan
+  doSync2d(otherNV) {
+    const thisMM = this.frac2mm(this.scene.crosshairPos);
+    otherNV.scene.crosshairPos = otherNV.mm2frac(thisMM);
+    otherNV.scene.pan2Dxyzmm = vec48.clone(this.scene.pan2Dxyzmm);
+  }
+  doSyncGamma(otherNV) {
+    const thisGamma = this.scene.gamma;
+    const otherGamma = otherNV.scene.gamma;
+    if (thisGamma !== otherGamma) {
+      otherNV.setGamma(thisGamma);
+    }
+  }
+  doSyncZoomPan(otherNV) {
+    otherNV.scene.pan2Dxyzmm = vec48.clone(this.scene.pan2Dxyzmm);
+  }
+  doSyncCrosshair(otherNV) {
+    const thisMM = this.frac2mm(this.scene.crosshairPos);
+    otherNV.scene.crosshairPos = otherNV.mm2frac(thisMM);
+  }
+  doSyncCalMin(otherNV) {
+    if (this.volumes[0].cal_min !== otherNV.volumes[0].cal_min) {
+      otherNV.volumes[0].cal_min = this.volumes[0].cal_min;
+      otherNV.updateGLVolume();
+    }
+  }
+  doSyncCalMax(otherNV) {
+    if (this.volumes[0].cal_max !== otherNV.volumes[0].cal_max) {
+      otherNV.volumes[0].cal_max = this.volumes[0].cal_max;
+      otherNV.updateGLVolume();
+    }
+  }
+  doSyncSliceType(otherNV) {
+    otherNV.setSliceType(this.opts.sliceType);
+  }
+  doSyncClipPlane(otherNV) {
+    otherNV.setClipPlane(this.scene.clipPlaneDepthAziElev);
+  }
   /**
    * Sync the scene controls (orientation, crosshair location, etc.) from one Niivue instance to another. useful for using one canvas to drive another.
    * @internal
@@ -24632,46 +24846,39 @@ var Niivue = class _Niivue {
     if (!this.gl.canvas.matches(":focus")) {
       return;
     }
-    const thisMM = this.frac2mm(this.scene.crosshairPos);
-    if (this.otherNV instanceof _Niivue) {
-      const thisGamma = this.scene.gamma;
-      const otherGamma = this.otherNV.scene.gamma;
-      if (thisGamma !== otherGamma) {
-        this.otherNV.setGamma(thisGamma);
+    for (let i = 0; i < this.otherNV.length; i++) {
+      if (this.otherNV[i] === this) {
+        continue;
+      }
+      if (this.syncOpts.gamma) {
+        this.doSyncGamma(this.otherNV[i]);
+      }
+      if (this.syncOpts.crosshair) {
+        this.doSyncCrosshair(this.otherNV[i]);
+      }
+      if (this.syncOpts.zoomPan) {
+        this.doSyncZoomPan(this.otherNV[i]);
+      }
+      if (this.syncOpts.sliceType) {
+        this.doSyncSliceType(this.otherNV[i]);
+      }
+      if (this.syncOpts.cal_min) {
+        this.doSyncCalMin(this.otherNV[i]);
+      }
+      if (this.syncOpts.cal_max) {
+        this.doSyncCalMax(this.otherNV[i]);
+      }
+      if (this.syncOpts.clipPlane) {
+        this.doSyncClipPlane(this.otherNV[i]);
       }
       if (this.syncOpts["2d"]) {
-        this.otherNV.scene.crosshairPos = this.otherNV.mm2frac(thisMM);
-        this.otherNV.scene.pan2Dxyzmm = vec48.clone(this.scene.pan2Dxyzmm);
+        this.doSync2d(this.otherNV[i]);
       }
       if (this.syncOpts["3d"]) {
-        this.otherNV.scene.renderAzimuth = this.scene.renderAzimuth;
-        this.otherNV.scene.renderElevation = this.scene.renderElevation;
-        this.otherNV.scene.volScaleMultiplier = this.scene.volScaleMultiplier;
-      }
-      this.otherNV.drawScene();
-      this.otherNV.createOnLocationChange();
-    } else if (Array.isArray(this.otherNV)) {
-      for (let i = 0; i < this.otherNV.length; i++) {
-        if (this.otherNV[i] === this) {
-          continue;
-        }
-        const thisGamma = this.scene.gamma;
-        const otherGamma = this.otherNV[i].scene.gamma;
-        if (thisGamma !== otherGamma) {
-          this.otherNV[i].setGamma(thisGamma);
-        }
-        if (this.syncOpts["2d"]) {
-          this.otherNV[i].scene.crosshairPos = this.otherNV[i].mm2frac(thisMM);
-          this.otherNV[i].scene.pan2Dxyzmm = vec48.clone(this.scene.pan2Dxyzmm);
-        }
-        if (this.syncOpts["3d"]) {
-          this.otherNV[i].scene.renderAzimuth = this.scene.renderAzimuth;
-          this.otherNV[i].scene.renderElevation = this.scene.renderElevation;
-          this.otherNV[i].scene.volScaleMultiplier = this.scene.volScaleMultiplier;
-        }
-        this.otherNV[i].drawScene();
-        this.otherNV[i].createOnLocationChange();
+        this.doSync3d(this.otherNV[i]);
       }
+      this.otherNV[i].drawScene();
+      this.otherNV[i].createOnLocationChange();
     }
   }
   /** Not documented publicly for now
@@ -24766,6 +24973,8 @@ var Niivue = class _Niivue {
     this.drawPenLocation = [NaN, NaN, NaN];
     this.drawPenAxCorSag = -1;
     this.uiData.mousedown = true;
+    this.setDragStart(0, 0);
+    this.setDragEnd(0, 0);
     log.debug("mouse down");
     log.debug(e);
     const pos = this.getNoPaddingNoBorderCanvasRelativeMousePosition(e, this.gl.canvas);
@@ -24773,6 +24982,9 @@ var Niivue = class _Niivue {
       return;
     }
     const [x, y] = [pos.x * this.uiData.dpr, pos.y * this.uiData.dpr];
+    if (this.opts.clickToSegment) {
+      this.clickToSegmentXY = [x, y];
+    }
     const label = this.getLabelAtPoint([x, y]);
     if (label) {
       if (label.onClick) {
@@ -24973,8 +25185,15 @@ var Niivue = class _Niivue {
     if (this.drawPenFillPts.length > 0) {
       this.drawPenFilled();
     } else if (this.drawPenAxCorSag >= 0) {
-      this.drawAddUndoBitmap();
+      if (this.opts.clickToSegment) {
+        const sumBitmap = this.sumBitmap(this.drawBitmap);
+        const sumSeg = this.sumBitmap(this.clickToSegmentGrowingBitmap);
+        if (sumSeg > sumBitmap) {
+          this.updateBitmapFromClickToSegment();
+        }
+      }
     }
+    this.drawAddUndoBitmap();
     this.drawPenLocation = [NaN, NaN, NaN];
     this.drawPenAxCorSag = -1;
     if (isFunction(this.onMouseUp)) {
@@ -24988,6 +25207,9 @@ var Niivue = class _Niivue {
       const fracStart = this.canvasPos2frac([this.uiData.dragStart[0], this.uiData.dragStart[1]]);
       const fracEnd = this.canvasPos2frac([this.uiData.dragEnd[0], this.uiData.dragEnd[1]]);
       this.generateMouseUpCallback(fracStart, fracEnd);
+      if (this.opts.dragMode === 6 /* roiSelection */) {
+        return;
+      }
       if (this.opts.dragMode !== 1 /* contrast */) {
         return;
       }
@@ -25290,6 +25512,35 @@ var Niivue = class _Niivue {
     if (this.thumbnailVisible) {
       return;
     }
+    const dragStartSum = this.uiData.dragStart.reduce((a, b) => a + b, 0);
+    const dragEndSum = this.uiData.dragEnd.reduce((a, b) => a + b, 0);
+    const validDrag = dragStartSum > 0 && dragEndSum > 0;
+    if (this.opts.dragMode === 6 /* roiSelection */ && validDrag) {
+      const delta = e.deltaY > 0 ? 1 : -1;
+      if (this.uiData.dragStart[0] < this.uiData.dragEnd[0]) {
+        this.uiData.dragStart[0] -= delta;
+        this.uiData.dragEnd[0] += delta;
+      } else {
+        this.uiData.dragStart[0] += delta;
+        this.uiData.dragEnd[0] -= delta;
+      }
+      if (this.uiData.dragStart[1] < this.uiData.dragEnd[1]) {
+        this.uiData.dragStart[1] -= delta;
+        this.uiData.dragEnd[1] += delta;
+      } else {
+        this.uiData.dragStart[1] += delta;
+        this.uiData.dragEnd[1] -= delta;
+      }
+      this.uiData.isDragging = true;
+      this.drawScene();
+      this.uiData.isDragging = false;
+      const tileIdx = this.tileIndex(this.uiData.dragStart[0], this.uiData.dragStart[1]);
+      this.generateMouseUpCallback(
+        this.screenXY2TextureFrac(this.uiData.dragStart[0], this.uiData.dragStart[1], tileIdx),
+        this.screenXY2TextureFrac(this.uiData.dragEnd[0], this.uiData.dragEnd[1], tileIdx)
+      );
+      return;
+    }
     const rect = this.canvas.getBoundingClientRect();
     if (e.deltaY < 0) {
       this.sliceScroll2D(-0.01, e.clientX - rect.left, e.clientY - rect.top);
@@ -25734,6 +25985,16 @@ var Niivue = class _Niivue {
     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
@@ -26783,6 +27044,10 @@ var Niivue = class _Niivue {
   }
   // not included in public docs
   sliceScroll2D(posChange, x, y, isDelta = true) {
+    if (this.opts.scrollRequiresFocus && this.canvas !== document.activeElement) {
+      log.warn("Canvas element does not have focus. Scroll events will not be processed.");
+      return;
+    }
     if (this.inGraphTile(x, y)) {
       let vol = this.volumes[0].frame4D;
       if (posChange > 0) {
@@ -27474,6 +27739,7 @@ var Niivue = class _Niivue {
     }
     const vx = this.back.dims[1] * this.back.dims[2] * this.back.dims[3];
     this.drawBitmap = new Uint8Array(vx);
+    this.clickToSegmentGrowingBitmap = new Uint8Array(vx);
     this.drawClearAllUndoBitmaps();
     this.drawAddUndoBitmap();
     this.drawTexture = this.r8Tex(this.drawTexture, TEXTURE7_DRAW, this.back.dims, true);
@@ -27647,6 +27913,23 @@ var Niivue = class _Niivue {
     y = Math.min(Math.max(y, 0), dy - 1);
     z = Math.min(Math.max(z, 0), dz - 1);
     this.drawBitmap[x + y * dx + z * dx * dy] = penValue;
+    const isAx = this.drawPenAxCorSag === 0;
+    const isCor = this.drawPenAxCorSag === 1;
+    const isSag = this.drawPenAxCorSag === 2;
+    if (this.opts.penSize > 1) {
+      const halfPenSize = Math.floor(this.opts.penSize / 2);
+      for (let i = -halfPenSize; i <= halfPenSize; i++) {
+        for (let j = -halfPenSize; j <= halfPenSize; j++) {
+          if (isAx) {
+            this.drawBitmap[x + i + (y + j) * dx + z * dx * dy] = penValue;
+          } else if (isCor) {
+            this.drawBitmap[x + i + y * dx + (z + j) * dx * dy] = penValue;
+          } else if (isSag) {
+            this.drawBitmap[x + (y + j) * dx + (z + i) * dx * dy] = penValue;
+          }
+        }
+      }
+    }
   }
   // not included in public docs
   // create line between to voxels in drawing
@@ -27728,6 +28011,98 @@ var Niivue = class _Niivue {
       }
     }
   }
+  /**
+   * Performs a 1-voxel binary dilation on a connected cluster within the drawing mask using the drawFloodFillCore function.
+   *
+   * @param seedXYZ -  voxel index of the seed voxel in the mask array.
+   * @param neighbors - Number of neighbors to consider for connectivity and dilation (6, 18, or 26).
+   */
+  drawingBinaryDilationWithSeed(seedXYZ, neighbors = 6) {
+    try {
+      let xyz2vx = function(pt) {
+        return pt[0] + pt[1] * nx + pt[2] * nxy;
+      };
+      const mask = this.drawBitmap;
+      const xDim = this.back.dims[1];
+      const yDim = this.back.dims[2];
+      const zDim = this.back.dims[3];
+      const nx = xDim;
+      const nxy = xDim * yDim;
+      const totalVoxels = nxy * zDim;
+      const seedIndex = xyz2vx(seedXYZ);
+      if (seedIndex < 0 || seedIndex >= totalVoxels) {
+        throw new Error("Seed index is out of bounds.");
+      }
+      const seedValue = mask[seedIndex];
+      if (seedValue === 0) {
+        throw new Error("Seed voxel is not part of a filled cluster.");
+      }
+      const img = mask.slice();
+      for (let i = 0; i < totalVoxels; i++) {
+        img[i] = img[i] === seedValue ? 1 : 0;
+      }
+      this.drawFloodFillCore(img, seedIndex, neighbors);
+      const outputMask = mask.slice();
+      const neighborOffsets = [];
+      const offsets6 = [-nxy, nxy, -xDim, xDim, -1, 1];
+      neighborOffsets.push(...offsets6);
+      if (neighbors > 6) {
+        neighborOffsets.push(
+          -xDim - 1,
+          -xDim + 1,
+          xDim - 1,
+          xDim + 1,
+          -nxy - xDim,
+          -nxy + xDim,
+          -nxy - 1,
+          -nxy + 1,
+          nxy - xDim,
+          nxy + xDim,
+          nxy - 1,
+          nxy + 1
+        );
+      }
+      if (neighbors > 18) {
+        neighborOffsets.push(
+          -nxy - xDim - 1,
+          -nxy - xDim + 1,
+          -nxy + xDim - 1,
+          -nxy + xDim + 1,
+          nxy - xDim - 1,
+          nxy - xDim + 1,
+          nxy + xDim - 1,
+          nxy + xDim + 1
+        );
+      }
+      for (let idx = 0; idx < totalVoxels; idx++) {
+        if (img[idx] === 2) {
+          const x = idx % xDim;
+          const y = Math.floor(idx % nxy / xDim);
+          const z = Math.floor(idx / nxy);
+          for (const offset of neighborOffsets) {
+            const neighborIdx = idx + offset;
+            if (neighborIdx < 0 || neighborIdx >= totalVoxels) {
+              continue;
+            }
+            const nx2 = neighborIdx % xDim;
+            const ny = Math.floor(neighborIdx % nxy / xDim);
+            const nz = Math.floor(neighborIdx / nxy);
+            if (Math.abs(nx2 - x) > 1 || Math.abs(ny - y) > 1 || Math.abs(nz - z) > 1) {
+              continue;
+            }
+            if (mask[neighborIdx] === 0) {
+              outputMask[neighborIdx] = seedValue;
+            }
+          }
+        }
+      }
+      this.drawBitmap = outputMask;
+      this.drawAddUndoBitmap();
+      this.refreshDrawing(true);
+    } catch (error) {
+      log.error("Error in drawingBinaryDilationWithSeed:", error);
+    }
+  }
   // a voxel can be defined as having 6, 18 or 26 neighbors:
   //   6: neighbors share faces (distance=1)
   //  18: neighbors share faces (distance=1) or edges (1.4)
@@ -27809,7 +28184,7 @@ var Niivue = class _Niivue {
   }
   // not included in public docs
   // set all connected voxels in drawing to new color
-  drawFloodFill(seedXYZ, newColor = 0, growSelectedCluster = 0, forceMin = NaN, forceMax = NaN, neighbors = 6) {
+  drawFloodFill(seedXYZ, newColor = 0, growSelectedCluster = 0, forceMin = NaN, forceMax = NaN, neighbors = 6, maxDistanceMM = Number.POSITIVE_INFINITY, is2D = false) {
     if (!this.drawBitmap) {
       throw new Error("drawBitmap undefined");
     }
@@ -27827,13 +28202,46 @@ var Niivue = class _Niivue {
     const nx = dims[0];
     const nxy = nx * dims[1];
     const nxyz = nxy * dims[2];
-    const img = this.drawBitmap.slice();
+    let img = this.drawBitmap.slice();
+    let drawBitmap = this.drawBitmap;
+    if (this.clickToSegmentIsGrowing) {
+      img = this.clickToSegmentGrowingBitmap.slice();
+      drawBitmap = this.clickToSegmentGrowingBitmap;
+    }
     if (img.length !== nxy * dims[2]) {
       return;
     }
+    let constrainXYZ = -1;
+    if (is2D && this.drawPenAxCorSag === 0 /* AXIAL */) {
+      constrainXYZ = 2;
+    } else if (is2D && this.drawPenAxCorSag === 1 /* CORONAL */) {
+      constrainXYZ = 1;
+    } else if (is2D && this.drawPenAxCorSag === 2 /* SAGITTAL */) {
+      constrainXYZ = 0;
+    }
+    function vx2xyz(vx) {
+      const Z = Math.floor(vx / nxy);
+      const Y = Math.floor((vx - Z * nxy) / nx);
+      const X = Math.floor(vx % nx);
+      return [X, Y, Z];
+    }
     function xyz2vx(pt) {
       return pt[0] + pt[1] * nx + pt[2] * nxy;
     }
+    const vx2mm = (xyz) => {
+      return this.vox2mm(xyz, this.back.matRAS);
+    };
+    const seedMM = vx2mm(seedXYZ);
+    const maxDistanceMM2 = maxDistanceMM ** 2;
+    function isWithinDistance(vx) {
+      const xzyVox = vx2xyz(vx);
+      if (constrainXYZ >= 0 && xzyVox[constrainXYZ] !== seedXYZ[constrainXYZ]) {
+        return false;
+      }
+      const xyzMM = vx2mm(xzyVox);
+      const dist2 = (xyzMM[0] - seedMM[0]) ** 2 + (xyzMM[1] - seedMM[1]) ** 2 + (xyzMM[2] - seedMM[2]) ** 2;
+      return dist2 <= maxDistanceMM2;
+    }
     const seedVx = xyz2vx(seedXYZ);
     const seedColor = img[seedVx];
     if (seedColor === newColor) {
@@ -27846,7 +28254,10 @@ var Niivue = class _Niivue {
     }
     for (let i = 1; i < nxyz; i++) {
       img[i] = 0;
-      if (this.drawBitmap[i] === seedColor) {
+      if (drawBitmap[i] === seedColor) {
+        if (!isWithinDistance(i)) {
+          continue;
+        }
         img[i] = 1;
       }
     }
@@ -27876,6 +28287,9 @@ var Niivue = class _Niivue {
       for (let i = 1; i < nxyz; i++) {
         img[i] = 0;
         if (backImg[i] >= mn && backImg[i] <= mx) {
+          if (!isWithinDistance(i)) {
+            continue;
+          }
           img[i] = 1;
         }
       }
@@ -27884,11 +28298,19 @@ var Niivue = class _Niivue {
     }
     for (let i = 1; i < nxyz; i++) {
       if (img[i] === 2) {
-        this.drawBitmap[i] = newColor;
+        drawBitmap[i] = newColor;
       }
     }
-    this.drawAddUndoBitmap();
-    this.refreshDrawing(false);
+    if (!this.clickToSegmentIsGrowing) {
+      this.drawBitmap = drawBitmap.slice();
+      if (!this.opts.clickToSegment) {
+        this.drawAddUndoBitmap();
+      }
+      this.refreshDrawing(true, this.clickToSegmentIsGrowing);
+    } else {
+      this.clickToSegmentGrowingBitmap = drawBitmap;
+      this.refreshDrawing(true, this.clickToSegmentIsGrowing);
+    }
   }
   // not included in public docs
   // given series of line segments, connect first and last
@@ -28048,6 +28470,7 @@ var Niivue = class _Niivue {
     this.drawClearAllUndoBitmaps();
     this.rgbaTex(this.drawTexture, TEXTURE7_DRAW, [2, 2, 2, 2], true);
     this.drawBitmap = null;
+    this.clickToSegmentGrowingBitmap = null;
     this.drawScene();
   }
   /**
@@ -28056,7 +28479,7 @@ var Niivue = class _Niivue {
    * @example niivue.refreshDrawing();
    * @see {@link https://niivue.github.io/niivue/features/cactus.html | live demo usage}
    */
-  refreshDrawing(isForceRedraw = true) {
+  refreshDrawing(isForceRedraw = true, useClickToSegmentBitmap = false) {
     if (!this.back?.dims) {
       throw new Error("back.dims undefined");
     }
@@ -28085,7 +28508,7 @@ var Niivue = class _Niivue {
       dims[3],
       this.gl.RED,
       this.gl.UNSIGNED_BYTE,
-      this.drawBitmap
+      useClickToSegmentBitmap ? this.clickToSegmentGrowingBitmap : this.drawBitmap
     );
     if (isForceRedraw) {
       this.drawScene();
@@ -28497,6 +28920,8 @@ var Niivue = class _Niivue {
     gl.bindVertexArray(this.unusedVAO);
     this.rectShader = new Shader(gl, vertRectShader, fragRectShader);
     this.rectShader.use(gl);
+    this.rectOutlineShader = new Shader(gl, vertRectShader, fragRectOutlineShader);
+    this.rectOutlineShader.use(gl);
     this.lineShader = new Shader(gl, vertLineShader, fragRectShader);
     this.lineShader.use(gl);
     this.line3DShader = new Shader(gl, vertLine3DShader, fragRectShader);
@@ -28649,14 +29074,37 @@ var Niivue = class _Niivue {
   }
   /**
    * basic statistics for selected voxel-based image
-   * @param layer - selects image to describe
-   * @param masks - are optional binary images to filter voxles
-   * @returns numeric values to describe image
-   * @example niivue.getDescriptives(0);
+   * @param options - an object containing the following properties:
+   *   - layer: selects image to describe
+   *   - masks: optional binary images to filter voxels
+   *   - drawingIsMask: a boolean indicating if the drawing is used as a mask
+   *   - roiIsMask: a boolean indicating if the ROI is used as a mask
+   *   - startVox: the starting voxel coordinates
+   *   - endVox: the ending voxel coordinates
+   * @returns numeric values to describe image or regions of images
+   * @example
+   * niivue.getDescriptives({
+   *   layer: 0,
+   *   masks: [],
+   *   drawingIsMask: true, // drawingIsMask and roiIsMask are mutually exclusive
+   *   roiIsMask: false,
+   *   startVox: [10, 20, 30], // ignored if roiIsMask is false
+   *   endVox: [40, 50, 60] // ignored if roiIsMask is false
+   * });
    * @see {@link https://niivue.github.io/niivue/features/draw2.html | live demo usage}
    */
-  getDescriptives(layer = 0, masks = [], drawingIsMask = false) {
+  getDescriptives(options) {
+    const {
+      layer = 0,
+      masks = [],
+      drawingIsMask = false,
+      roiIsMask = false,
+      startVox = [0, 0, 0],
+      endVox = [0, 0, 0]
+    } = options;
+    let area = null;
     const hdr = this.volumes[layer].hdr;
+    const pixDimsRAS = this.volumes[layer].pixDimsRAS;
     let slope = hdr.scl_slope;
     if (isNaN(slope)) {
       slope = 1;
@@ -28694,6 +29142,65 @@ var Niivue = class _Niivue {
           mask[i] = 0;
         }
       }
+    } else if (masks.length < 1 && roiIsMask) {
+      mask.fill(0);
+      console.log("startVox", startVox);
+      console.log("endVox", endVox);
+      let constantDim = -1;
+      if (startVox[0] === endVox[0]) {
+        constantDim = 0;
+      } else if (startVox[1] === endVox[1]) {
+        constantDim = 1;
+      } else if (startVox[2] === endVox[2]) {
+        constantDim = 2;
+      } else {
+        console.error("Error: No constant dimension found.");
+        return;
+      }
+      const dims = [0, 1, 2];
+      const varDims = dims.filter((dim) => dim !== constantDim);
+      const centerVox = [];
+      centerVox[constantDim] = startVox[constantDim];
+      centerVox[varDims[0]] = (startVox[varDims[0]] + endVox[varDims[0]]) / 2;
+      centerVox[varDims[1]] = (startVox[varDims[1]] + endVox[varDims[1]]) / 2;
+      const radiusX = Math.abs(endVox[varDims[0]] - startVox[varDims[0]]) / 2;
+      const radiusY = Math.abs(endVox[varDims[1]] - startVox[varDims[1]]) / 2;
+      const xdim = hdr.dims[1];
+      const ydim = hdr.dims[2];
+      const minVarDim0 = Math.max(0, Math.floor(centerVox[varDims[0]] - radiusX));
+      const maxVarDim0 = Math.min(hdr.dims[varDims[0] + 1] - 1, Math.ceil(centerVox[varDims[0]] + radiusX));
+      const minVarDim1 = Math.max(0, Math.floor(centerVox[varDims[1]] - radiusY));
+      const maxVarDim1 = Math.min(hdr.dims[varDims[1] + 1] - 1, Math.ceil(centerVox[varDims[1]] + radiusY));
+      const constDimVal = centerVox[constantDim];
+      if (constDimVal < 0 || constDimVal >= hdr.dims[constantDim + 1]) {
+        console.error("Error: Constant dimension value is out of bounds.");
+        return;
+      }
+      for (let i = minVarDim0; i <= maxVarDim0; i++) {
+        for (let j = minVarDim1; j <= maxVarDim1; j++) {
+          const voxel = [];
+          voxel[constantDim] = constDimVal;
+          voxel[varDims[0]] = i;
+          voxel[varDims[1]] = j;
+          const di = (voxel[varDims[0]] - centerVox[varDims[0]]) / radiusX;
+          const dj = (voxel[varDims[1]] - centerVox[varDims[1]]) / radiusY;
+          const distSq = di * di + dj * dj;
+          if (distSq <= 1) {
+            const x = voxel[0];
+            const y = voxel[1];
+            const z = voxel[2];
+            const index = z * xdim * ydim + y * xdim + x;
+            mask[index] = 1;
+          }
+        }
+      }
+      const voxelArea = pixDimsRAS[varDims[0] + 1] * pixDimsRAS[varDims[1] + 1];
+      const numMaskedVoxels = mask.reduce((count, value) => count + (value === 1 ? 1 : 0), 0);
+      area = numMaskedVoxels * voxelArea;
+      const radiusX_mm = radiusX * pixDimsRAS[varDims[0] + 1];
+      const radiusY_mm = radiusY * pixDimsRAS[varDims[1] + 1];
+      const areaEllipse = Math.PI * radiusX_mm * radiusY_mm;
+      area = areaEllipse;
     }
     let k = 0;
     let M = 0;
@@ -28747,7 +29254,8 @@ var Niivue = class _Niivue {
       cal_min: this.volumes[layer].cal_min,
       cal_max: this.volumes[layer].cal_max,
       robust_min: this.volumes[layer].robust_min,
-      robust_max: this.volumes[layer].robust_max
+      robust_max: this.volumes[layer].robust_max,
+      area
     };
   }
   // not included in public docs
@@ -30225,6 +30733,29 @@ var Niivue = class _Niivue {
     const pos = [(x - this.graph.LTWH[0]) / this.graph.LTWH[2], (y - this.graph.LTWH[1]) / this.graph.LTWH[3]];
     return pos[0] > 0 && pos[1] > 0 && pos[0] <= 1 && pos[1] <= 1;
   }
+  // update drawBitmap if it differs from clickTosegmentBitmap
+  updateBitmapFromClickToSegment() {
+    if (this.clickToSegmentGrowingBitmap === null) {
+      return;
+    }
+    if (this.drawBitmap === null) {
+      return;
+    }
+    if (this.clickToSegmentGrowingBitmap.length !== this.drawBitmap.length) {
+      return;
+    }
+    const nvx = this.drawBitmap.length;
+    for (let i = 0; i < nvx; i++) {
+      this.drawBitmap[i] = this.clickToSegmentGrowingBitmap[i];
+    }
+  }
+  sumBitmap(img) {
+    let sum = 0;
+    for (let i = 0; i < img.length; i++) {
+      sum += img[i];
+    }
+    return sum;
+  }
   // not included in public docs
   // handle mouse click event on canvas
   mouseClick(x, y, posChange = 0, isDelta = true) {
@@ -30274,7 +30805,7 @@ var Niivue = class _Niivue {
       if (axCorSag > 2 /* SAGITTAL */) {
         continue;
       }
-      const texFrac = this.screenXY2TextureFrac(x, y, i, false);
+      let texFrac = this.screenXY2TextureFrac(x, y, i, false);
       if (texFrac[0] < 0) {
         continue;
       }
@@ -30301,31 +30832,75 @@ var Niivue = class _Niivue {
         this.scene.crosshairPos = vec311.clone(texFrac);
       }
       if (this.opts.drawingEnabled) {
-        const pt = this.frac2vox(this.scene.crosshairPos);
-        const ptMM = this.frac2mm(this.scene.crosshairPos);
+        let pt = this.frac2vox(this.scene.crosshairPos);
         if (this.opts.clickToSegment) {
-          const radius = this.opts.clickToSegmentRadius;
-          const steps = this.opts.clickToSegmentSteps;
+          texFrac = this.screenXY2TextureFrac(this.clickToSegmentXY[0], this.clickToSegmentXY[1], i, false);
+          pt = this.frac2vox(texFrac);
+          let diff = 0;
+          let threshold = this.opts.clickToSegmentPercent + diff;
+          if (this.uiData.mousedown) {
+            const xDiff = (this.clickToSegmentXY[0] - x) / this.gl.canvas.width;
+            const yDiff = (this.clickToSegmentXY[1] - y) / this.gl.canvas.height;
+            diff = Math.max(Math.abs(xDiff), Math.abs(yDiff));
+            threshold = this.opts.clickToSegmentPercent + diff;
+          }
+          let voxelIntensity = this.back.getValue(pt[0], pt[1], pt[2]);
+          if (this.opts.clickToSegmentAutoIntensity) {
+            if (threshold !== 0) {
+              if (voxelIntensity === 0) {
+                voxelIntensity = 0.01;
+              }
+              this.opts.clickToSegmentIntensityMax = voxelIntensity * (1 + threshold);
+              this.opts.clickToSegmentIntensityMin = voxelIntensity * (1 - threshold);
+            }
+            if (voxelIntensity > (this.back.cal_min + this.back.cal_max) * 0.5) {
+              this.opts.clickToSegmentBright = true;
+            } else {
+              this.opts.clickToSegmentBright = false;
+            }
+          }
           const brightOrDark = this.opts.clickToSegmentBright ? Number.POSITIVE_INFINITY : Number.NEGATIVE_INFINITY;
-          this.drawPenFillPts = [];
           this.drawPenAxCorSag = axCorSag;
-          for (let i2 = 1; i2 <= steps; i2++) {
-            const angle = i2 / steps * 2 * Math.PI;
-            const xMM = ptMM[0] + radius * Math.cos(angle);
-            const yMM = ptMM[1] + radius * Math.sin(angle);
-            const zMM = ptMM[2];
-            const xVox = this.back.mm2vox([xMM, yMM, zMM])[0];
-            const yVox = this.back.mm2vox([xMM, yMM, zMM])[1];
-            const zVox = this.back.mm2vox([xMM, yMM, zMM])[2];
-            this.drawPt(xVox, yVox, zVox, this.opts.penValue);
-            this.drawPenFillPts.push([xVox, yVox, pt[2]]);
-            if (i2 === steps) {
-              this.drawFloodFill([xVox, yVox, pt[2]], 0, brightOrDark, NaN, NaN, this.opts.floodFillNeighbors);
-            }
+          if (this.drawPenAxCorSag === 0 /* AXIAL */) {
+            const pixDims = [this.back.pixDimsRAS[0], this.back.pixDimsRAS[1]];
+            const minPixDim = Math.min(...pixDims);
+            this.opts.penSize = Math.ceil(this.opts.clickToSegmentRadius / minPixDim);
+          } else if (this.drawPenAxCorSag === 1 /* CORONAL */) {
+            const pixDims = [this.back.pixDimsRAS[0], this.back.pixDimsRAS[2]];
+            const minPixDim = Math.min(...pixDims);
+            this.opts.penSize = Math.ceil(this.opts.clickToSegmentRadius / minPixDim);
+          } else if (this.drawPenAxCorSag === 2 /* SAGITTAL */) {
+            const pixDims = [this.back.pixDimsRAS[1], this.back.pixDimsRAS[2]];
+            const minPixDim = Math.min(...pixDims);
+            this.opts.penSize = Math.ceil(this.opts.clickToSegmentRadius / minPixDim);
           }
+          this.drawPt(pt[0], pt[1], pt[2], this.opts.penValue);
+          if (diff !== 0) {
+            this.clickToSegmentIsGrowing = true;
+            this.clickToSegmentGrowingBitmap = this.drawBitmap.slice();
+          } else {
+            this.clickToSegmentIsGrowing = false;
+          }
+          this.drawFloodFill(
+            [pt[0], pt[1], pt[2]],
+            0,
+            brightOrDark,
+            this.opts.clickToSegmentIntensityMin,
+            this.opts.clickToSegmentIntensityMax,
+            this.opts.floodFillNeighbors,
+            this.opts.clickToSegmentMaxDistanceMM,
+            this.opts.clickToSegmentIs2D
+          );
           this.drawScene();
           this.createOnLocationChange(axCorSag);
-          const info = this.getDescriptives(0, [], true);
+          if (this.clickToSegmentIsGrowing) {
+            return;
+          }
+          const info = this.getDescriptives({
+            layer: 0,
+            masks: [],
+            drawingIsMask: true
+          });
           this.onClickToSegment({ mL: info.volumeML, mm3: info.volumeMM3 });
           return;
         }
@@ -30385,30 +30960,39 @@ var Niivue = class _Niivue {
     }
     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;
@@ -30486,6 +31070,24 @@ var Niivue = class _Niivue {
   // 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);
@@ -30500,9 +31102,9 @@ var Niivue = class _Niivue {
     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];
@@ -30528,8 +31130,30 @@ var Niivue = class _Niivue {
       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);
   }
@@ -30543,20 +31167,42 @@ var Niivue = class _Niivue {
     if (!this.rectShader) {
       throw new Error("rectShader undefined");
     }
-    this.rectShader.use(this.gl);
-    this.gl.enable(this.gl.BLEND);
-    this.gl.uniform4fv(this.rectShader.uniforms.lineColor, lineColor);
-    this.gl.uniform2fv(this.rectShader.uniforms.canvasWidthHeight, [this.gl.canvas.width, this.gl.canvas.height]);
-    this.gl.uniform4f(
-      this.rectShader.uniforms.leftTopWidthHeight,
-      leftTopWidthHeight[0],
-      leftTopWidthHeight[1],
-      leftTopWidthHeight[2],
-      leftTopWidthHeight[3]
-    );
-    this.gl.bindVertexArray(this.genericVAO);
-    this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
-    this.gl.bindVertexArray(this.unusedVAO);
+    if (!this.opts.selectionBoxIsOutline) {
+      this.rectShader.use(this.gl);
+      this.gl.enable(this.gl.BLEND);
+      this.gl.uniform4fv(this.rectShader.uniforms.lineColor, lineColor);
+      this.gl.uniform2fv(this.rectShader.uniforms.canvasWidthHeight, [this.gl.canvas.width, this.gl.canvas.height]);
+      this.gl.uniform4f(
+        this.rectShader.uniforms.leftTopWidthHeight,
+        leftTopWidthHeight[0],
+        leftTopWidthHeight[1],
+        leftTopWidthHeight[2],
+        leftTopWidthHeight[3]
+      );
+      this.gl.bindVertexArray(this.genericVAO);
+      this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+      this.gl.bindVertexArray(this.unusedVAO);
+    } else {
+      this.drawCircle(leftTopWidthHeight, lineColor, 0.1);
+      this.rectOutlineShader.use(this.gl);
+      this.gl.enable(this.gl.BLEND);
+      this.gl.uniform1f(this.rectOutlineShader.uniforms.thickness, this.opts.selectionBoxLineThickness);
+      this.gl.uniform4fv(this.rectOutlineShader.uniforms.lineColor, lineColor);
+      this.gl.uniform2fv(this.rectOutlineShader.uniforms.canvasWidthHeight, [
+        this.gl.canvas.width,
+        this.gl.canvas.height
+      ]);
+      this.gl.uniform4f(
+        this.rectOutlineShader.uniforms.leftTopWidthHeight,
+        leftTopWidthHeight[0],
+        leftTopWidthHeight[1],
+        leftTopWidthHeight[2],
+        leftTopWidthHeight[3]
+      );
+      this.gl.bindVertexArray(this.genericVAO);
+      this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+      this.gl.bindVertexArray(this.unusedVAO);
+    }
   }
   drawCircle(leftTopWidthHeight, circleColor = this.opts.fontColor, fillPercent = 1) {
     if (!this.circleShader) {
@@ -30582,6 +31228,10 @@ var Niivue = class _Niivue {
   // not included in public docs
   // draw a rectangle at desired location
   drawSelectionBox(leftTopWidthHeight) {
+    if (this.opts.dragMode === 6 /* roiSelection */) {
+      this.drawCircle(leftTopWidthHeight, this.opts.selectionBoxColor, 0.1);
+      return;
+    }
     this.drawRect(leftTopWidthHeight, this.opts.selectionBoxColor);
   }
   // not included in public docs
@@ -31361,6 +32011,18 @@ var Niivue = class _Niivue {
   }
   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 {
@@ -31572,10 +32234,10 @@ var Niivue = class _Niivue {
     if (graph.opacity <= 0 || graph.LTWH[2] <= 5 || graph.LTWH[3] <= 5) {
       return;
     }
-    if (graph.LTWH[0] + graph.LTWH[2] > this.gl.canvas.width) {
+    if (Math.floor(graph.LTWH[0] + graph.LTWH[2]) > this.gl.canvas.width) {
       return;
     }
-    if (graph.LTWH[1] + graph.LTWH[3] > this.gl.canvas.height) {
+    if (Math.floor(graph.LTWH[1] + graph.LTWH[3]) > this.gl.canvas.height) {
       return;
     }
     graph.backColor = [0.15, 0.15, 0.15, graph.opacity];
@@ -31645,6 +32307,12 @@ var Niivue = class _Niivue {
         mx = Math.max(v, mx);
       }
     }
+    const volMn = this.volumes[vols[0]].cal_min;
+    const volMx = this.volumes[vols[0]].cal_max;
+    if (graph.isRangeCalMinMax && volMn < volMx && isFinite(volMn) && isFinite(volMx)) {
+      mn = volMn;
+      mx = volMx;
+    }
     if (graph.normalizeValues && mx > mn) {
       const range = mx - mn;
       for (let j = 0; j < graph.lines.length; j++) {
@@ -32400,22 +33068,28 @@ var Niivue = class _Niivue {
     }
     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;
     }
@@ -32434,6 +33108,7 @@ var Niivue = class _Niivue {
       );
     }
     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];
@@ -32584,9 +33259,9 @@ var Niivue = class _Niivue {
   }
   // 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;
@@ -33035,7 +33710,6 @@ var Niivue = class _Niivue {
     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();
@@ -33079,6 +33753,8 @@ var Niivue = class _Niivue {
     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 */) {
@@ -33088,6 +33764,9 @@ var Niivue = class _Niivue {
       } 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;
@@ -33114,20 +33793,42 @@ var Niivue = class _Niivue {
           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;
@@ -33150,22 +33851,39 @@ var Niivue = class _Niivue {
         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];
@@ -33192,6 +33910,9 @@ var Niivue = class _Niivue {
           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]);
@@ -33258,10 +33979,14 @@ var Niivue = class _Niivue {
         width,
         height
       ]);
+      return;
     }
     if (this.opts.clickToSegment) {
       const x = this.mousePos[0];
       const y = this.mousePos[1];
+      if (this.inRenderTile(x, y) >= 0) {
+        return;
+      }
       const tileIdx = this.tileIndex(x, y);
       if (tileIdx > -1) {
         const fovMM = this.screenSlices[tileIdx].fovMM;