@niivue/niivue 0.44.2-dev.1 → 0.45.0

package/src/niivue/index.ts

@@ -12,7 +12,6 @@ import {
   vertLineShader,
   vertLine3DShader,
   fragRectShader,
-  fragRectOutlineShader,
   vertRenderShader,
   fragRenderShader,
   fragRenderGradientShader,
@@ -98,6 +97,7 @@ import {
   ImageFromUrlOptions
 } from '../nvimage/index.js'
 import { NVUtilities } from '../nvutilities.js'
+import { NVMeshUtilities } from '../nvmesh-utilities.js'
 import {
   Connectome,
   LegacyConnectome,
@@ -105,8 +105,7 @@ import {
   NiftiHeader,
   DragReleaseParams,
   NiiVueLocation,
-  NiiVueLocationValue,
-  SyncOpts
+  NiiVueLocationValue
 } from '../types.js'
 import {
   clamp,
@@ -196,7 +195,6 @@ type Descriptive = {
   cal_max: number
   robust_min: number
   robust_max: number
-  area: number | null
 }
 
 type SliceScale = {
@@ -332,6 +330,7 @@ const defaultSaveImageOptions: SaveImageOptions = {
  * let niivue = new Niivue({crosshairColor: [0,1,0,0.5], textHeight: 0.5}) // a see-through green crosshair, and larger text labels
  */
 export class Niivue {
+  loaders = {}
   canvas: HTMLCanvasElement | null = null // the reference to the canvas element on the page
   _gl: WebGL2RenderingContext | null = null // the gl context
   isBusy = false // flag to indicate if the scene is busy drawing
@@ -358,7 +357,6 @@ export class Niivue {
   orientCubeShader?: Shader
   orientCubeShaderVAO: WebGLVertexArrayObject | null = null
   rectShader?: Shader
-  rectOutlineShader?: Shader
   renderShader?: Shader
   lineShader?: Shader
   line3DShader?: Shader
@@ -404,19 +402,7 @@ export class Niivue {
   extentsMax?: vec3
   // ResizeObserver
   private resizeObserver: ResizeObserver | null = null
-  // syncOpts: Record<string, unknown> = {}
-  syncOpts: 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
-  }
-
+  syncOpts: Record<string, unknown> = {}
   readyForSync = false
 
   // UI Data
@@ -466,7 +452,7 @@ export class Niivue {
 
   cuboidVertexBuffer?: WebGLBuffer
 
-  otherNV: Niivue[] | null = null // another niivue instance that we wish to sync position with
+  otherNV: Niivue | Niivue[] | null = null // another niivue instance that we wish to sync position with
   volumeObject3D: NiivueObject3D | null = null
   pivot3D = [0, 0, 0] // center for rendering rotation
   furthestFromPivot = 10.0 // most distant point from pivot
@@ -935,11 +921,7 @@ export class Niivue {
    * @deprecated use broadcastTo instead
    * @see {@link https://niivue.github.io/niivue/features/sync.mesh.html | live demo usage}
    */
-  syncWith(otherNV: Niivue | Niivue[], syncOpts = { '2d': true, '3d': true }): void {
-    // if otherNV is not an array, make it an array of one
-    if (!(otherNV instanceof Array)) {
-      otherNV = [otherNV]
-    }
+  syncWith(otherNV: Niivue, syncOpts = { '2d': true, '3d': true }): void {
     this.otherNV = otherNV
     this.syncOpts = { ...syncOpts }
   }
@@ -956,71 +938,10 @@ export class Niivue {
    * @see {@link https://niivue.github.io/niivue/features/sync.mesh.html | live demo usage}
    */
   broadcastTo(otherNV: Niivue | Niivue[], syncOpts = { '2d': true, '3d': true }): void {
-    // if otherNV is a single instance then make it an array of one
-    if (!(otherNV instanceof Array)) {
-      otherNV = [otherNV]
-    }
     this.otherNV = otherNV
     this.syncOpts = syncOpts
   }
 
-  doSync3d(otherNV: Niivue): void {
-    otherNV.scene.renderAzimuth = this.scene.renderAzimuth
-    otherNV.scene.renderElevation = this.scene.renderElevation
-    otherNV.scene.volScaleMultiplier = this.scene.volScaleMultiplier
-  }
-
-  // both crosshair and zoomPan
-  doSync2d(otherNV: Niivue): void {
-    const thisMM = this.frac2mm(this.scene.crosshairPos)
-    otherNV.scene.crosshairPos = otherNV.mm2frac(thisMM)
-    otherNV.scene.pan2Dxyzmm = vec4.clone(this.scene.pan2Dxyzmm)
-  }
-
-  doSyncGamma(otherNV: Niivue): void {
-    // gamma not dependent on 2d/3d
-    const thisGamma = this.scene.gamma
-    const otherGamma = otherNV.scene.gamma
-    if (thisGamma !== otherGamma) {
-      otherNV.setGamma(thisGamma)
-    }
-  }
-
-  doSyncZoomPan(otherNV: Niivue): void {
-    otherNV.scene.pan2Dxyzmm = vec4.clone(this.scene.pan2Dxyzmm)
-  }
-
-  doSyncCrosshair(otherNV: Niivue): void {
-    const thisMM = this.frac2mm(this.scene.crosshairPos)
-    otherNV.scene.crosshairPos = otherNV.mm2frac(thisMM)
-  }
-
-  doSyncCalMin(otherNV: Niivue): void {
-    // only call updateGLVolume if the cal_min is different
-    // because updateGLVolume is expensive, but required to update the volume
-    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: Niivue): void {
-    // only call updateGLVolume if the cal_max is different
-    // because updateGLVolume is expensive, but required to update the volume
-    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: Niivue): void {
-    otherNV.setSliceType(this.opts.sliceType)
-  }
-
-  doSyncClipPlane(otherNV: Niivue): void {
-    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
@@ -1034,52 +955,58 @@ export class Niivue {
     if (!this.gl || !this.otherNV || typeof this.otherNV === 'undefined') {
       return
     }
+    // if (!this.otherNV.readyForSync || !this.readyForSync) {
+    //   return;
+    // }
     // canvas must have focus to send messages issue706
     if (!(this.gl.canvas as HTMLCanvasElement).matches(':focus')) {
       return
     }
-    for (let i = 0; i < this.otherNV.length; i++) {
-      if (this.otherNV[i] === this) {
-        continue
-      }
-      // gamma
-      if (this.syncOpts.gamma) {
-        this.doSyncGamma(this.otherNV[i])
-      }
-      // crosshair
-      if (this.syncOpts.crosshair) {
-        this.doSyncCrosshair(this.otherNV[i])
-      }
-      // zoomPan
-      if (this.syncOpts.zoomPan) {
-        this.doSyncZoomPan(this.otherNV[i])
-      }
-      // sliceType
-      if (this.syncOpts.sliceType) {
-        this.doSyncSliceType(this.otherNV[i])
-      }
-      // cal_min
-      if (this.syncOpts.cal_min) {
-        this.doSyncCalMin(this.otherNV[i])
-      }
-      // cal_max
-      if (this.syncOpts.cal_max) {
-        this.doSyncCalMax(this.otherNV[i])
-      }
-      // clipPlane
-      if (this.syncOpts.clipPlane) {
-        this.doSyncClipPlane(this.otherNV[i])
-      }
-      // legacy 2d option for multiple properties
+    const thisMM = this.frac2mm(this.scene.crosshairPos)
+    // if this.otherNV is an object, then it is a single Niivue instance
+    if (this.otherNV instanceof Niivue) {
+      // gamma not dependent on 2d/3d
+      const thisGamma = this.scene.gamma
+      const otherGamma = this.otherNV.scene.gamma
+      if (thisGamma !== otherGamma) {
+        this.otherNV.setGamma(thisGamma)
+      }
+      // options specific to 2d rendering
       if (this.syncOpts['2d']) {
-        this.doSync2d(this.otherNV[i])
+        this.otherNV.scene.crosshairPos = this.otherNV.mm2frac(thisMM)
+        this.otherNV.scene.pan2Dxyzmm = vec4.clone(this.scene.pan2Dxyzmm)
       }
-      // legacy 3d option for multiple properties
+      // options specific to 3d rendering
       if (this.syncOpts['3d']) {
-        this.doSync3d(this.otherNV[i])
+        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
+        }
+        // gamma not dependent on 2d/3d
+        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 = vec4.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.otherNV[i].drawScene()
-      this.otherNV[i].createOnLocationChange()
     }
   }
 
@@ -1381,6 +1308,7 @@ export class Niivue {
     const mmLength = vec3.len(v)
     const voxStart = this.frac2vox(fracStart)
     const voxEnd = this.frac2vox(fracEnd)
+
     this.onDragRelease({
       fracStart,
       fracEnd,
@@ -1433,11 +1361,6 @@ export 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 roiSelection drag mode
-      if (this.opts.dragMode === DRAG_MODE.roiSelection) {
-        // do not call drawScene so that the selection box remains visible
-        return
-      }
       if (this.opts.dragMode !== DRAG_MODE.contrast) {
         return
       }
@@ -1855,6 +1778,13 @@ export class Niivue {
     if (ext === 'GZ') {
       ext = re.exec(fullname.slice(0, -3))![1] // img.trk.gz -> img.trk
       ext = ext.toUpperCase()
+    } else if (ext === 'CBOR') {
+      // we want to keep cbor WITH the extension before it.
+      // e.g. if fullname is img.iwi.cbor, we want the ext to be iwi.cbor
+      const endExt = ext
+      ext = re.exec(fullname.slice(0, -5))![1] // img.iwi.cbor -> iwi.cbor
+      ext = ext.toUpperCase()
+      ext = `${ext}.${endExt}`
     }
     return upperCase ? ext : ext.toLowerCase() // developer can choose to have extensions as upper or lower
   }
@@ -1877,6 +1807,33 @@ export class Niivue {
 
   async addVolumesFromUrl(imageOptionsArray: ImageFromUrlOptions[]): Promise<NVImage[]> {
     const promises = imageOptionsArray.map(async (imageItem) => {
+      // first check this.loaders to see if the user has
+      // registered a custom loader for this file type.
+      // if so, use that loader to load the file.
+      const ext = this.getFileExt(imageItem.url)
+      if (this.loaders[ext]) {
+        let itemToLoad: string | Uint8Array | ArrayBuffer = imageItem.url
+        const toExt = this.loaders[ext].toExt
+        let name = imageItem.name || imageItem.url
+        // in case the name is a url, just get the basename without the slashes
+        name = name.split('/').pop()
+        // if url is a string fetch the file first
+        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,
@@ -2032,6 +1989,41 @@ export class Niivue {
     })
   }
 
+  /* 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: unknown, fileExt: string, toExt: string): void {
+    this.loaders = {
+      ...this.loaders,
+      [fileExt.toUpperCase()]: {
+        loader,
+        toExt
+      }
+    }
+  }
+
   // not included in public docs
   dropListener(e: DragEvent): void {
     e.stopPropagation()
@@ -3881,6 +3873,45 @@ export class Niivue {
     return this.document.download(fileName, compress)
   }
 
+  // generic loadImages that wraps loadVolumes and loadMeshes
+  async loadImages(images: Array<ImageFromUrlOptions | LoadFromUrlParams>): Promise<this> {
+    const volumes = []
+    const meshes = []
+    for (const image of images) {
+      if ('url' in image) {
+        const ext = this.getFileExt(image.url)
+        // check this.loaders to see if a user has register
+        // a custom loader for this file extension
+        if (this.loaders[ext]) {
+          // check if the loader type property is a volume or mesh
+          // by using the toExt property
+          const toExt = this.loaders[ext].toExt.toUpperCase()
+          if (MESH_EXTENSIONS.includes(toExt)) {
+            meshes.push(image)
+          } else {
+            volumes.push(image)
+          }
+          // continue to the next image
+          continue
+        }
+
+        if (MESH_EXTENSIONS.includes(ext.toUpperCase())) {
+          meshes.push(image)
+        } else {
+          volumes.push(image)
+        }
+      }
+    }
+    if (volumes.length > 0) {
+      await this.loadVolumes(volumes as ImageFromUrlOptions[])
+    }
+    if (meshes.length > 0) {
+      await this.loadMeshes(meshes as LoadFromUrlParams[])
+    }
+
+    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
@@ -3905,30 +3936,33 @@ export class Niivue {
     this.gl.clear(this.gl.COLOR_BUFFER_BIT)
     // if more than one volume, then fetch them all simultaneously
     // using addVolumesFromUrl (note the "s" in "Volumes")
-    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)
+    // if (volumeList.length > 1) {
+    //   await this.addVolumesFromUrl(volumeList)
+    //   return this
+    // }
+
+    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
   }
 
   /**
@@ -3959,7 +3993,34 @@ export class Niivue {
    */
   async addMeshesFromUrl(meshOptions: LoadFromUrlParams[]): Promise<NVMesh[]> {
     const promises = meshOptions.map(async (meshItem) => {
+      // first check this.loaders to see if the user has
+      // registered a custom loader for this file type.
+      // if so, use that loader to load the file.
       const ext = this.getFileExt(meshItem.url)
+      if (this.loaders[ext]) {
+        let itemToLoad: string | Uint8Array | ArrayBuffer = meshItem.url
+        const toExt = this.loaders[ext].toExt
+        let name = meshItem.name || meshItem.url
+        // in case the name is a url, just get the basename without the slashes
+        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
+        // return await this.loadFromArrayBuffer(mz3, meshItem.name)
+      }
       if (ext === 'JCON' || ext === 'JSON') {
         const response = await fetch(meshItem.url, {})
         const json = await response.json()
@@ -4008,17 +4069,17 @@ export class Niivue {
 
     // if more than one mesh, then fetch them all simultaneously
     // using addMeshesFromUrl (note the "s" in "Meshes")
-    if (meshList.length > 1) {
-      await this.addMeshesFromUrl(meshList)
-      this.updateGLVolume()
-      this.drawScene()
-      return this
-    }
-
-    await this.addMeshFromUrl(meshList[0])
+    // 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
   }
 
   /**
@@ -4313,29 +4374,6 @@ export 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
-    // get tile index for voxel
-    const isAx = this.drawPenAxCorSag === 0
-    const isCor = this.drawPenAxCorSag === 1
-    const isSag = this.drawPenAxCorSag === 2
-    // since the pen is only drawing in one 2D plane,
-    // only draw the neighbors (based on penSize) in that plane.
-    // if penSize is 1, only draw the voxel itself.
-    // if penSize is even (2, 4, 6, etc.), then the extra voxel will be drawn in the positive direction.
-    // if penSize is odd (3, 5, 7, etc.), then the the pen will be centered on the voxel.
-    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
@@ -4422,140 +4460,6 @@ export 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: number[], // seed voxel x,y,z
-    neighbors: 6 | 18 | 26 = 6
-  ): void {
-    try {
-      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
-      function xyz2vx(pt: number[]): number {
-        return pt[0] + pt[1] * nx + pt[2] * nxy
-      }
-
-      const seedIndex = xyz2vx(seedXYZ)
-
-      // check that the seed index is within bounds
-      if (seedIndex < 0 || seedIndex >= totalVoxels) {
-        throw new Error('Seed index is out of bounds.')
-      }
-
-      // get value of the seed voxel
-      const seedValue = mask[seedIndex]
-
-      // check that the seed voxel is filled
-      if (seedValue === 0) {
-        throw new Error('Seed voxel is not part of a filled cluster.')
-      }
-
-      // create a copy of the mask to work on
-      const img = mask.slice()
-      // binarise the img since there could be multiple colors in the mask
-      for (let i = 0; i < totalVoxels; i++) {
-        img[i] = img[i] === seedValue ? 1 : 0
-      }
-
-      // use drawFloodFillCore to identify the connected cluster starting from seedIndex
-      this.drawFloodFillCore(img, seedIndex, neighbors)
-
-      // now, img has the cluster marked with value 2
-      // create an output mask for dilation
-      const outputMask = mask.slice() // Clone the original mask
-
-      // precompute neighbor offsets based on connectivity
-      const neighborOffsets: number[] = []
-
-      // offsets for 6-connectivity (face neighbors)
-      const offsets6 = [-nxy, nxy, -xDim, xDim, -1, 1]
-
-      neighborOffsets.push(...offsets6)
-
-      if (neighbors > 6) {
-        // offsets for 18-connectivity (edge neighbors)
-        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) {
-        // offsets for 26-connectivity (corner neighbors)
-        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
-        )
-      }
-
-      // iterate over the cluster voxels (value 2 in img) to perform dilation
-      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
-
-            // skip if neighbor index is out of bounds
-            if (neighborIdx < 0 || neighborIdx >= totalVoxels) {
-              continue
-            }
-
-            // calculate neighbor coordinates
-            const nx = neighborIdx % xDim
-            const ny = Math.floor((neighborIdx % nxy) / xDim)
-            const nz = Math.floor(neighborIdx / nxy)
-
-            // ensure neighbor is adjacent (prevent wrapping around edges)
-            if (Math.abs(nx - x) > 1 || Math.abs(ny - y) > 1 || Math.abs(nz - z) > 1) {
-              continue
-            }
-
-            // if the neighbor voxel is empty in the original mask, fill it in the output mask
-            if (mask[neighborIdx] === 0) {
-              outputMask[neighborIdx] = seedValue
-            }
-          }
-        }
-      }
-      // set the output as the new drawing bitmap
-      this.drawBitmap = outputMask
-      // update the undo stack
-      this.drawAddUndoBitmap()
-      // refresh the drawing (copy from cpu to gpu) and show immediately
-      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)
@@ -4658,9 +4562,7 @@ export class Niivue {
     growSelectedCluster = 0, // if non-zero, growth based on background intensity POSITIVE_INFINITY for selected or bright, NEGATIVE_INFINITY for selected or darker
     forceMin = NaN,
     forceMax = NaN,
-    neighbors = 6,
-    // option for only flood filling within max distance from seed voxel
-    maxDistanceMM = Number.POSITIVE_INFINITY
+    neighbors = 6
   ): void {
     if (!this.drawBitmap) {
       throw new Error('drawBitmap undefined')
@@ -4686,29 +4588,10 @@ export class Niivue {
     if (img.length !== nxy * dims[2]) {
       return
     }
-    function vx2xyz(vx: number): number[] {
-      // provided address in 1D array, return XYZ coordinate
-      const Z = Math.floor(vx / nxy) // slice
-      const Y = Math.floor((vx - Z * nxy) / nx) // column
-      const X = Math.floor(vx % nx)
-      return [X, Y, Z]
-    }
     function xyz2vx(pt: number[]): number {
       // provided an XYZ 3D point, provide address in 1D array
       return pt[0] + pt[1] * nx + pt[2] * nxy
     }
-    const vx2mm = (xyz: number[]): vec3 => {
-      return this.vox2mm(xyz, this.back.matRAS)
-    }
-    // store seed vox as mm coordinates
-    const seedMM = vx2mm(seedXYZ)
-    const maxDistanceMM2 = maxDistanceMM ** 2
-    // function to check if new point to be checked is less than maxDistanceMM
-    function isWithinDistance(vx: number): boolean {
-      const xyzMM = vx2mm(vx2xyz(vx))
-      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) {
@@ -4722,12 +4605,6 @@ export class Niivue {
     for (let i = 1; i < nxyz; i++) {
       img[i] = 0
       if (this.drawBitmap[i] === seedColor) {
-        // check if voxel index i is within maxDistanceMM from seed voxel
-        if (!isWithinDistance(i)) {
-          // move to next voxel if not within distance,
-          // no need to check voxel intensity for cluster assignment
-          continue
-        }
         img[i] = 1
       }
     }
@@ -4759,12 +4636,6 @@ export class Niivue {
       for (let i = 1; i < nxyz; i++) {
         img[i] = 0
         if (backImg[i] >= mn && backImg[i] <= mx) {
-          // check if voxel index i is within maxDistanceMM from seed voxel
-          if (!isWithinDistance(i)) {
-            // move to next voxel if not within distance,
-            // no need to check voxel intensity for cluster assignment
-            continue
-          }
           img[i] = 1
         }
       }
@@ -5473,8 +5344,6 @@ export class Niivue {
     // rect shader (crosshair): horizontal and vertical lines only
     this.rectShader = new Shader(gl, vertRectShader, fragRectShader)
     this.rectShader.use(gl)
-    this.rectOutlineShader = new Shader(gl, vertRectShader, fragRectOutlineShader)
-    this.rectOutlineShader.use(gl)
     // line shader: diagonal lines
     this.lineShader = new Shader(gl, vertLineShader, fragRectShader)
     this.lineShader.use(gl)
@@ -5650,46 +5519,14 @@ export class Niivue {
 
   /**
    * 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: {
-    layer?: number
-    masks?: number[]
-    drawingIsMask?: boolean
-    roiIsMask?: boolean
-    startVox?: number[]
-    endVox?: number[]
-  }): Descriptive {
-    const {
-      layer = 0,
-      masks = [],
-      drawingIsMask = false,
-      roiIsMask = false,
-      startVox = [0, 0, 0],
-      endVox = [0, 0, 0]
-    } = options
-
-    // Rest of the code remains the same
-    let area = null // used if roiIsMask since ROI is in 2D slice
+  getDescriptives(layer = 0, masks = [], drawingIsMask = false): Descriptive {
     const hdr = this.volumes[layer].hdr!
-    const pixDimsRAS = this.volumes[layer].pixDimsRAS!
     let slope = hdr.scl_slope
     if (isNaN(slope)) {
       slope = 1
@@ -5728,48 +5565,6 @@ export class Niivue {
           mask[i] = 0
         }
       }
-    } else if (masks.length < 1 && roiIsMask) {
-      // fill mask with zeros
-      mask.fill(0)
-      console.log('startVox', startVox)
-      console.log('endVox', endVox)
-      // const startVox = roiInfo.startVox
-      // const endVox = roiInfo.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]])
-
-      // for our constant dimension we add one so that the for loop runs at least once
-      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
-          }
-        }
-      }
-      // calculate area 2d area from startVox and endVox coordinates if roiIsMask is true (since mask is created from a 2d slice only)
-      // area is in mm^2. The below calculations work regardless of the orientation of the image since
-      // Niivue converts all images to RAS
-      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]))
-      // one of the above will be zero since roiIsMask==true, so we filter out the non-zero value
-      // and then multiply the other two to get the area
-      const mms = [xmm, ymm, zmm]
-      area = mms.filter((m) => m !== 0).reduce((a, b) => a * b, 1)
     }
     // Welfords method
     // https://www.embeddedrelated.com/showarticle/785.php
@@ -5830,8 +5625,7 @@ export 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!,
-      area
+      robust_max: this.volumes[layer].robust_max!
     }
   }
 
@@ -7597,70 +7391,39 @@ export class Niivue {
       if (this.opts.drawingEnabled) {
         // drawing done in voxels
         const pt = this.frac2vox(this.scene.crosshairPos) as [number, number, number]
+        // radius given in mm
+        const ptMM = this.frac2mm(this.scene.crosshairPos)
         // if click-to-segment enabled
         if (this.opts.clickToSegment) {
-          // get voxel value of pt
-          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 clickToSegmentAutoIntensity, then calculate if we need to flood fill
-          // in a bright or dark region based on the intensity of the clicked voxel,
-          // and where it falls in the range of cal_min and cal_max.
-          // !important! If this option is true, then it will ignore the boolean value of
-          // clickToSegmentBright supplied by the user
-          if (this.opts.clickToSegmentAutoIntensity) {
-            // if voxel intensity is greater than the midpoint of cal_min and cal_max,
-            // then flood fill in a bright region
-            if (voxelIntensity > (this.back.cal_min + this.back.cal_max) * 0.5) {
-              this.opts.clickToSegmentBright = true
-            } else {
-              // else flood fill in a dark region
-              this.opts.clickToSegmentBright = false
-            }
-          }
-          // set brightOrDark now, if clickToSegmentAutoBrightOrDark is false,
-          // then brightOrDark will be set to the value of clickToSegmentBright supplied by the user
+          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 === SLICE_TYPE.AXIAL) {
-            // get voxel penSize for the current slice, but what if pixDims are not isotropic?
-            // we will use the smallest pixDim for the current slice
-            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 === SLICE_TYPE.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 === SLICE_TYPE.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)
+          for (let i = 1; i <= steps; i++) {
+            const angle = (i / steps) * 2 * Math.PI
+            // get the x,y,z in mm since radius given in mm
+            const xMM = ptMM[0] + radius * Math.cos(angle)
+            const yMM = ptMM[1] + radius * Math.sin(angle)
+            const zMM = ptMM[2]
+            // convert x,y,z in mm to voxels for drawing
+            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]
+            // draw the point
+            this.drawPt(xVox, yVox, zVox, this.opts.penValue)
+            this.drawPenFillPts.push([xVox, yVox, pt[2]])
+            // fill in the circle if we are at the last step.
+            // This also triggers the growth of the circle based on cluster intensity method of flood fill.
+            // If the circle is drawn in a bright region, it will grow in the bright region using all connected bright voxels and vice versa.
+            if (i === steps) {
+              this.drawFloodFill([xVox, yVox, pt[2]], 0, brightOrDark, NaN, NaN, this.opts.floodFillNeighbors)
+            }
           }
-          // draw the point at the cursor using the penSize to set the
-          // seed for the flood fill
-          // !important! clickToSegment performs two drawing operations,
-          // therefore, if you want to undo the clickToSegment, you need to call undo twice
-          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
-          )
           this.drawScene()
           this.createOnLocationChange(axCorSag)
           // get the volume of the segmented region
-          const info = this.getDescriptives({
-            layer: 0,
-            masks: [],
-            drawingIsMask: true
-          })
+          const info = this.getDescriptives(0, [], true)
           this.onClickToSegment({ mL: info.volumeML, mm3: info.volumeMM3 })
           return
         }
@@ -7912,43 +7675,20 @@ export class Niivue {
     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) // switch off to avoid tampering with settings
-    } else {
-      // this.opts.selectionBoxIsOutline == true
-      this.rectOutlineShader.use(this.gl)
-      this.gl.enable(this.gl.BLEND)
-      // set thickness of line
-      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) // switch off to avoid tampering with settings
-    }
+    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) // switch off to avoid tampering with settings
   }
 
   drawCircle(leftTopWidthHeight: number[], circleColor = this.opts.fontColor, fillPercent = 1.0): void {
@@ -11120,18 +10860,12 @@ export class Niivue {
         width,
         height
       ])
-      return
     }
 
     // draw circle at mouse position if clickToSegment is enabled
     if (this.opts.clickToSegment) {
       const x = this.mousePos[0]
       const y = this.mousePos[1]
-      // check if hovering over the 3D render tile
-      if (this.inRenderTile(x, y) >= 0) {
-        // exit early since we do not want to draw the cursor here!
-        return
-      }
       // determine the tile the mouse is hovering in
       const tileIdx = this.tileIndex(x, y)
       // if a valid tile index, draw the circle