@niivue/niivue 0.44.2-dev.3 → 0.44.2-dev.4

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.44.2-dev.4";
 
 // 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;
@@ -22250,6 +22290,7 @@ 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 = {
@@ -22319,10 +22360,30 @@ 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
 };
 var INITIAL_SCENE_DATA = {
   gamma: 1,
@@ -24019,12 +24080,11 @@ var defaultSaveImageOptions = {
   isSaveDrawing: false,
   volumeByIndex: 0
 };
-var Niivue = class _Niivue {
+var Niivue = class {
   /**
    * @param options  - options object to set modifiable Niivue properties
    */
   constructor(options = DEFAULT_OPTIONS) {
-    __publicField(this, "loaders", {});
     __publicField(this, "canvas", null);
     // the reference to the canvas element on the page
     __publicField(this, "_gl", null);
@@ -24050,6 +24110,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 +24133,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 +24186,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", {
@@ -24598,6 +24678,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 +24696,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 +24761,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 +24888,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 +24897,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 +25100,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 +25122,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 +25427,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);
@@ -25339,11 +25505,6 @@ var Niivue = class _Niivue {
     if (ext === "GZ") {
       ext = re.exec(fullname.slice(0, -3))[1];
       ext = ext.toUpperCase();
-    } else if (ext === "CBOR") {
-      const endExt = ext;
-      ext = re.exec(fullname.slice(0, -5))[1];
-      ext = ext.toUpperCase();
-      ext = `${ext}.${endExt}`;
     }
     return upperCase ? ext : ext.toLowerCase();
   }
@@ -25364,28 +25525,6 @@ var Niivue = class _Niivue {
   }
   async addVolumesFromUrl(imageOptionsArray) {
     const promises = imageOptionsArray.map(async (imageItem) => {
-      const ext = this.getFileExt(imageItem.name || imageItem.url);
-      if (this.loaders[ext]) {
-        let itemToLoad = imageItem.url;
-        const toExt = this.loaders[ext].toExt;
-        let name = imageItem.name || imageItem.url;
-        name = name.split("/").pop();
-        if (typeof imageItem.url === "string") {
-          const url = imageItem.url;
-          try {
-            const response = await fetch(url);
-            if (!response.ok) {
-              throw new Error(`Failed to load file: ${response.statusText}`);
-            }
-            itemToLoad = await response.arrayBuffer();
-          } catch (error) {
-            throw new Error(`Failed to load url ${url}: ${error}`);
-          }
-        }
-        const buffer = await this.loaders[ext].loader(itemToLoad);
-        imageItem.url = buffer;
-        imageItem.name = `${name}.${toExt}`;
-      }
       const imageOptions = {
         url: imageItem.url,
         headers: imageItem.headers,
@@ -25525,40 +25664,6 @@ var Niivue = class _Niivue {
       this.addVolume(volume);
     });
   }
-  /* useLoader
-  
-    registers an external file loader for niivue to use when reading files.
-  
-    the loader must return an array buffer of the file contents for niivue
-    to parse and the extension of the file so niivue can infer the file type to load. 
-  
-    example: 
-  
-    const myCustomLoader = (File) => {
-      // ... do parsing here ...
-      return {
-        arrayBuffer: ArrayBuffer,
-        fileExt: 'iwi.cbor',
-        positions: Float32Array | [], // allows for mesh loading to mz3
-        indices: Uint32Array | [], // allows for mesh loading to mz3
-      }
-  
-    nv.useLoader({
-      loader: myCustomLoader,
-      fileExt: 'iwi.cbor',
-      toExt: 'nii'
-    })
-  
-    */
-  useLoader(loader, fileExt, toExt) {
-    this.loaders = {
-      ...this.loaders,
-      [fileExt.toUpperCase()]: {
-        loader,
-        toExt
-      }
-    };
-  }
   // not included in public docs
   dropListener(e) {
     e.stopPropagation();
@@ -26783,6 +26888,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) {
@@ -27230,37 +27339,6 @@ var Niivue = class _Niivue {
     this.document.meshes = this.meshes;
     return this.document.download(fileName, compress2);
   }
-  // generic loadImages that wraps loadVolumes and loadMeshes
-  async loadImages(images) {
-    const volumes = [];
-    const meshes = [];
-    for (const image of images) {
-      if ("url" in image) {
-        const ext = this.getFileExt(image.url);
-        if (this.loaders[ext]) {
-          const toExt = this.loaders[ext].toExt.toUpperCase();
-          if (MESH_EXTENSIONS.includes(toExt)) {
-            meshes.push(image);
-          } else {
-            volumes.push(image);
-          }
-          continue;
-        }
-        if (MESH_EXTENSIONS.includes(ext.toUpperCase())) {
-          meshes.push(image);
-        } else {
-          volumes.push(image);
-        }
-      }
-    }
-    if (volumes.length > 0) {
-      await this.loadVolumes(volumes);
-    }
-    if (meshes.length > 0) {
-      await this.loadMeshes(meshes);
-    }
-    return this;
-  }
   /**
    * load an array of volume objects
    * @param volumeList - the array of objects to load. each object must have a resolvable "url" property at a minimum
@@ -27280,7 +27358,27 @@ var Niivue = class _Niivue {
     this.volumes = [];
     this.gl.clearColor(0, 0, 0, 1);
     this.gl.clear(this.gl.COLOR_BUFFER_BIT);
-    await this.addVolumesFromUrl(volumeList);
+    if (volumeList.length > 1) {
+      await this.addVolumesFromUrl(volumeList);
+      return this;
+    }
+    const imageOptions = {
+      url: volumeList[0].url,
+      headers: volumeList[0].headers,
+      name: volumeList[0].name,
+      colormap: volumeList[0].colormap ? volumeList[0].colormap : volumeList[0].colorMap,
+      colormapNegative: volumeList[0].colormapNegative ? volumeList[0].colormapNegative : volumeList[0].colorMapNegative,
+      opacity: volumeList[0].opacity,
+      urlImgData: volumeList[0].urlImgData,
+      cal_min: volumeList[0].cal_min,
+      cal_max: volumeList[0].cal_max,
+      trustCalMinMax: this.opts.trustCalMinMax,
+      isManifest: volumeList[0].isManifest,
+      frame4D: volumeList[0].frame4D,
+      limitFrames4D: volumeList[0].limitFrames4D || this.opts.limitFrames4D,
+      colorbarVisible: volumeList[0].colorbarVisible
+    };
+    await this.addVolumeFromUrl(imageOptions);
     return this;
   }
   /**
@@ -27310,29 +27408,7 @@ var Niivue = class _Niivue {
    */
   async addMeshesFromUrl(meshOptions) {
     const promises = meshOptions.map(async (meshItem) => {
-      const ext = this.getFileExt(meshItem.name || meshItem.url);
-      if (this.loaders[ext]) {
-        let itemToLoad = meshItem.url;
-        const toExt = this.loaders[ext].toExt;
-        let name = meshItem.name || meshItem.url;
-        name = name.split("/").pop();
-        if (typeof meshItem.url === "string") {
-          const url = meshItem.url;
-          try {
-            const response = await fetch(url);
-            if (!response.ok) {
-              throw new Error(`Failed to load file: ${response.statusText}`);
-            }
-            itemToLoad = await response.arrayBuffer();
-          } catch (error) {
-            throw new Error(`Failed to load url ${url}: ${error}`);
-          }
-        }
-        const { positions, indices } = await this.loaders[ext].loader(itemToLoad);
-        meshItem.name = `${name}.${toExt}`;
-        const mz3 = NVMeshUtilities.createMZ3(positions, indices, false);
-        meshItem.buffer = mz3;
-      }
+      const ext = this.getFileExt(meshItem.url);
       if (ext === "JCON" || ext === "JSON") {
         const response = await fetch(meshItem.url, {});
         const json = await response.json();
@@ -27373,7 +27449,13 @@ var Niivue = class _Niivue {
     this.meshes = [];
     this.gl.clearColor(0, 0, 0, 1);
     this.gl.clear(this.gl.COLOR_BUFFER_BIT);
-    await this.addMeshesFromUrl(meshList);
+    if (meshList.length > 1) {
+      await this.addMeshesFromUrl(meshList);
+      this.updateGLVolume();
+      this.drawScene();
+      return this;
+    }
+    await this.addMeshFromUrl(meshList[0]);
     this.updateGLVolume();
     this.drawScene();
     return this;
@@ -27474,6 +27556,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 +27730,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 +27828,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 +28001,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 +28019,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 +28071,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 +28104,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 +28115,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 +28287,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 +28296,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 +28325,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 +28737,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 +28891,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 +28959,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 +29071,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 +30550,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 +30622,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 +30649,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;
         }
@@ -30543,20 +30935,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 +30996,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
@@ -33258,10 +33676,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;