@niivue/niivue 0.44.2-dev.1 → 0.45.0

package/dist/index.js

@@ -95525,7 +95525,7 @@ var forEach3 = function() {
 }();
 
 // package.json
-var version = "0.44.2-dev.1";
+var version = "0.45.0";
 
 // src/logger.ts
 var _Log = class _Log {
@@ -96321,46 +96321,6 @@ 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;
@@ -119194,7 +119154,6 @@ 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 = {
@@ -119264,27 +119223,10 @@ var DEFAULT_OPTIONS = {
   renderOverlayBlend: 1,
   sliceMosaicString: "",
   centerMosaic: false,
-  penSize: 1,
-  // in voxels, since all drawing is done using bitmap indices
   clickToSegment: false,
-  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.
-  selectionBoxLineThickness: 4,
-  selectionBoxIsOutline: false
+  clickToSegmentRadius: 2,
+  clickToSegmentSteps: 10,
+  clickToSegmentBright: true
 };
 var INITIAL_SCENE_DATA = {
   gamma: 1,
@@ -120978,11 +120920,12 @@ var defaultSaveImageOptions = {
   isSaveDrawing: false,
   volumeByIndex: 0
 };
-var Niivue = class {
+var Niivue = class _Niivue {
   /**
    * @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);
@@ -121025,7 +120968,6 @@ var Niivue = class {
     __publicField(this, "orientCubeShader");
     __publicField(this, "orientCubeShaderVAO", null);
     __publicField(this, "rectShader");
-    __publicField(this, "rectOutlineShader");
     __publicField(this, "renderShader");
     __publicField(this, "lineShader");
     __publicField(this, "line3DShader");
@@ -121078,20 +121020,7 @@ var Niivue = class {
     __publicField(this, "extentsMax");
     // ResizeObserver
     __publicField(this, "resizeObserver", null);
-    // 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, "syncOpts", {});
     __publicField(this, "readyForSync", false);
     // UI Data
     __publicField(this, "uiData", {
@@ -121570,9 +121499,6 @@ var Niivue = class {
    * @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 };
   }
@@ -121588,55 +121514,9 @@ var Niivue = class {
    * @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 = vec4_exports.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 = vec4_exports.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
@@ -121653,39 +121533,46 @@ var Niivue = class {
     if (!this.gl.canvas.matches(":focus")) {
       return;
     }
-    for (let i2 = 0; i2 < this.otherNV.length; i2++) {
-      if (this.otherNV[i2] === this) {
-        continue;
-      }
-      if (this.syncOpts.gamma) {
-        this.doSyncGamma(this.otherNV[i2]);
-      }
-      if (this.syncOpts.crosshair) {
-        this.doSyncCrosshair(this.otherNV[i2]);
-      }
-      if (this.syncOpts.zoomPan) {
-        this.doSyncZoomPan(this.otherNV[i2]);
-      }
-      if (this.syncOpts.sliceType) {
-        this.doSyncSliceType(this.otherNV[i2]);
-      }
-      if (this.syncOpts.cal_min) {
-        this.doSyncCalMin(this.otherNV[i2]);
-      }
-      if (this.syncOpts.cal_max) {
-        this.doSyncCalMax(this.otherNV[i2]);
-      }
-      if (this.syncOpts.clipPlane) {
-        this.doSyncClipPlane(this.otherNV[i2]);
+    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);
       }
       if (this.syncOpts["2d"]) {
-        this.doSync2d(this.otherNV[i2]);
+        this.otherNV.scene.crosshairPos = this.otherNV.mm2frac(thisMM);
+        this.otherNV.scene.pan2Dxyzmm = vec4_exports.clone(this.scene.pan2Dxyzmm);
       }
       if (this.syncOpts["3d"]) {
-        this.doSync3d(this.otherNV[i2]);
+        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 i2 = 0; i2 < this.otherNV.length; i2++) {
+        if (this.otherNV[i2] === this) {
+          continue;
+        }
+        const thisGamma = this.scene.gamma;
+        const otherGamma = this.otherNV[i2].scene.gamma;
+        if (thisGamma !== otherGamma) {
+          this.otherNV[i2].setGamma(thisGamma);
+        }
+        if (this.syncOpts["2d"]) {
+          this.otherNV[i2].scene.crosshairPos = this.otherNV[i2].mm2frac(thisMM);
+          this.otherNV[i2].scene.pan2Dxyzmm = vec4_exports.clone(this.scene.pan2Dxyzmm);
+        }
+        if (this.syncOpts["3d"]) {
+          this.otherNV[i2].scene.renderAzimuth = this.scene.renderAzimuth;
+          this.otherNV[i2].scene.renderElevation = this.scene.renderElevation;
+          this.otherNV[i2].scene.volScaleMultiplier = this.scene.volScaleMultiplier;
+        }
+        this.otherNV[i2].drawScene();
+        this.otherNV[i2].createOnLocationChange();
       }
-      this.otherNV[i2].drawScene();
-      this.otherNV[i2].createOnLocationChange();
     }
   }
   /** Not documented publicly for now
@@ -122002,9 +121889,6 @@ var Niivue = class {
       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;
       }
@@ -122356,6 +122240,11 @@ var Niivue = class {
     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();
   }
@@ -122376,6 +122265,28 @@ var Niivue = class {
   }
   async addVolumesFromUrl(imageOptionsArray) {
     const promises = imageOptionsArray.map(async (imageItem) => {
+      const ext = this.getFileExt(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 buffer2 = await this.loaders[ext].loader(itemToLoad);
+        imageItem.url = buffer2;
+        imageItem.name = `${name}.${toExt}`;
+      }
       const imageOptions = {
         url: imageItem.url,
         headers: imageItem.headers,
@@ -122515,6 +122426,40 @@ var Niivue = class {
       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();
@@ -124186,6 +124131,37 @@ var Niivue = class {
     this.document.meshes = this.meshes;
     return this.document.download(fileName, compress);
   }
+  // 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
@@ -124205,27 +124181,7 @@ var Niivue = class {
     this.volumes = [];
     this.gl.clearColor(0, 0, 0, 1);
     this.gl.clear(this.gl.COLOR_BUFFER_BIT);
-    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);
+    await this.addVolumesFromUrl(volumeList);
     return this;
   }
   /**
@@ -124256,6 +124212,28 @@ var Niivue = class {
   async addMeshesFromUrl(meshOptions) {
     const promises = meshOptions.map(async (meshItem) => {
       const ext = this.getFileExt(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;
+      }
       if (ext === "JCON" || ext === "JSON") {
         const response = await fetch(meshItem.url, {});
         const json = await response.json();
@@ -124296,13 +124274,7 @@ var Niivue = class {
     this.meshes = [];
     this.gl.clearColor(0, 0, 0, 1);
     this.gl.clear(this.gl.COLOR_BUFFER_BIT);
-    if (meshList.length > 1) {
-      await this.addMeshesFromUrl(meshList);
-      this.updateGLVolume();
-      this.drawScene();
-      return this;
-    }
-    await this.addMeshFromUrl(meshList[0]);
+    await this.addMeshesFromUrl(meshList);
     this.updateGLVolume();
     this.drawScene();
     return this;
@@ -124576,23 +124548,6 @@ var Niivue = class {
     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 i2 = -halfPenSize; i2 <= halfPenSize; i2++) {
-        for (let j = -halfPenSize; j <= halfPenSize; j++) {
-          if (isAx) {
-            this.drawBitmap[x + i2 + (y + j) * dx + z * dx * dy] = penValue;
-          } else if (isCor) {
-            this.drawBitmap[x + i2 + y * dx + (z + j) * dx * dy] = penValue;
-          } else if (isSag) {
-            this.drawBitmap[x + (y + j) * dx + (z + i2) * dx * dy] = penValue;
-          }
-        }
-      }
-    }
   }
   // not included in public docs
   // create line between to voxels in drawing
@@ -124674,98 +124629,6 @@ var Niivue = class {
       }
     }
   }
-  /**
-   * 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 i2 = 0; i2 < totalVoxels; i2++) {
-        img[i2] = img[i2] === 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)
@@ -124847,7 +124710,7 @@ var Niivue = class {
   }
   // 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, maxDistanceMM = Number.POSITIVE_INFINITY) {
+  drawFloodFill(seedXYZ, newColor = 0, growSelectedCluster = 0, forceMin = NaN, forceMax = NaN, neighbors = 6) {
     if (!this.drawBitmap) {
       throw new Error("drawBitmap undefined");
     }
@@ -124869,25 +124732,9 @@ var Niivue = class {
     if (img.length !== nxy * dims[2]) {
       return;
     }
-    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 xyzMM = vx2mm(vx2xyz(vx));
-      const dist22 = (xyzMM[0] - seedMM[0]) ** 2 + (xyzMM[1] - seedMM[1]) ** 2 + (xyzMM[2] - seedMM[2]) ** 2;
-      return dist22 <= maxDistanceMM2;
-    }
     const seedVx = xyz2vx(seedXYZ);
     const seedColor = img[seedVx];
     if (seedColor === newColor) {
@@ -124901,9 +124748,6 @@ var Niivue = class {
     for (let i2 = 1; i2 < nxyz; i2++) {
       img[i2] = 0;
       if (this.drawBitmap[i2] === seedColor) {
-        if (!isWithinDistance(i2)) {
-          continue;
-        }
         img[i2] = 1;
       }
     }
@@ -124933,9 +124777,6 @@ var Niivue = class {
       for (let i2 = 1; i2 < nxyz; i2++) {
         img[i2] = 0;
         if (backImg[i2] >= mn && backImg[i2] <= mx) {
-          if (!isWithinDistance(i2)) {
-            continue;
-          }
           img[i2] = 1;
         }
       }
@@ -125557,8 +125398,6 @@ var Niivue = class {
     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);
@@ -125711,37 +125550,14 @@ var Niivue = class {
   }
   /**
    * basic statistics for selected voxel-based image
-   * @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
-   * });
+   * @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);
    * @see {@link https://niivue.github.io/niivue/features/draw2.html | live demo usage}
    */
-  getDescriptives(options) {
-    const {
-      layer = 0,
-      masks = [],
-      drawingIsMask = false,
-      roiIsMask = false,
-      startVox = [0, 0, 0],
-      endVox = [0, 0, 0]
-    } = options;
-    let area = null;
+  getDescriptives(layer = 0, masks = [], drawingIsMask = false) {
     const hdr = this.volumes[layer].hdr;
-    const pixDimsRAS = this.volumes[layer].pixDimsRAS;
     let slope = hdr.scl_slope;
     if (isNaN(slope)) {
       slope = 1;
@@ -125779,37 +125595,6 @@ var Niivue = class {
           mask[i2] = 0;
         }
       }
-    } else if (masks.length < 1 && roiIsMask) {
-      mask.fill(0);
-      console.log("startVox", startVox);
-      console.log("endVox", endVox);
-      const xrange = this.calculateMinMaxVoxIdx([startVox[0], endVox[0]]);
-      const yrange = this.calculateMinMaxVoxIdx([startVox[1], endVox[1]]);
-      const zrange = this.calculateMinMaxVoxIdx([startVox[2], endVox[2]]);
-      if (startVox[0] - endVox[0] === 0) {
-        xrange[1] = startVox[0] + 1;
-      } else if (startVox[1] - endVox[1] === 0) {
-        yrange[1] = startVox[1] + 1;
-      } else if (startVox[2] - endVox[2] === 0) {
-        zrange[1] = startVox[2] + 1;
-      }
-      const xdim = hdr.dims[1];
-      const ydim = hdr.dims[2];
-      for (let z = zrange[0]; z < zrange[1]; z++) {
-        const zi = z * xdim * ydim;
-        for (let y = yrange[0]; y < yrange[1]; y++) {
-          const yi = y * xdim;
-          for (let x = xrange[0]; x < xrange[1]; x++) {
-            const index = zi + yi + x;
-            mask[index] = 1;
-          }
-        }
-      }
-      const xmm = Math.abs(pixDimsRAS[1] * (endVox[0] - startVox[0]));
-      const ymm = Math.abs(pixDimsRAS[2] * (endVox[1] - startVox[1]));
-      const zmm = Math.abs(pixDimsRAS[3] * (endVox[2] - startVox[2]));
-      const mms = [xmm, ymm, zmm];
-      area = mms.filter((m) => m !== 0).reduce((a, b) => a * b, 1);
     }
     let k = 0;
     let M = 0;
@@ -125863,8 +125648,7 @@ var Niivue = class {
       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,
-      area
+      robust_max: this.volumes[layer].robust_max
     };
   }
   // not included in public docs
@@ -127419,51 +127203,30 @@ var Niivue = class {
       }
       if (this.opts.drawingEnabled) {
         const pt = this.frac2vox(this.scene.crosshairPos);
+        const ptMM = this.frac2mm(this.scene.crosshairPos);
         if (this.opts.clickToSegment) {
-          const voxelIntensity = this.back.getValue(pt[0], pt[1], pt[2]);
-          if (this.opts.clickToSegmentPercent > 0 && this.opts.clickToSegmentPercent <= 1) {
-            this.opts.clickToSegmentIntensityMax = voxelIntensity * (1 + this.opts.clickToSegmentPercent);
-            this.opts.clickToSegmentIntensityMin = voxelIntensity * (1 - this.opts.clickToSegmentPercent);
-          }
-          if (this.opts.clickToSegmentAutoIntensity) {
-            if (voxelIntensity > (this.back.cal_min + this.back.cal_max) * 0.5) {
-              this.opts.clickToSegmentBright = true;
-            } else {
-              this.opts.clickToSegmentBright = false;
-            }
-          }
+          const radius = this.opts.clickToSegmentRadius;
+          const steps = this.opts.clickToSegmentSteps;
           const brightOrDark = this.opts.clickToSegmentBright ? Number.POSITIVE_INFINITY : Number.NEGATIVE_INFINITY;
+          this.drawPenFillPts = [];
           this.drawPenAxCorSag = axCorSag;
-          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);
-          this.drawFloodFill(
-            [pt[0], pt[1], pt[2]],
-            0,
-            brightOrDark,
-            this.opts.clickToSegmentIntensityMin,
-            this.opts.clickToSegmentIntensityMax,
-            this.opts.floodFillNeighbors,
-            this.opts.clickToSegmentMaxDistanceMM
-          );
+          for (let i3 = 1; i3 <= steps; i3++) {
+            const angle3 = i3 / steps * 2 * Math.PI;
+            const xMM = ptMM[0] + radius * Math.cos(angle3);
+            const yMM = ptMM[1] + radius * Math.sin(angle3);
+            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 (i3 === steps) {
+              this.drawFloodFill([xVox, yVox, pt[2]], 0, brightOrDark, NaN, NaN, this.opts.floodFillNeighbors);
+            }
+          }
           this.drawScene();
           this.createOnLocationChange(axCorSag);
-          const info = this.getDescriptives({
-            layer: 0,
-            masks: [],
-            drawingIsMask: true
-          });
+          const info = this.getDescriptives(0, [], true);
           this.onClickToSegment({ mL: info.volumeML, mm3: info.volumeMM3 });
           return;
         }
@@ -127681,41 +127444,20 @@ var Niivue = class {
     if (!this.rectShader) {
       throw new Error("rectShader undefined");
     }
-    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.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);
-    }
+    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);
   }
   drawCircle(leftTopWidthHeight, circleColor = this.opts.fontColor, fillPercent = 1) {
     if (!this.circleShader) {
@@ -130417,14 +130159,10 @@ var Niivue = class {
         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;