@niivue/niivue 0.44.0 → 0.44.2-dev.1

package/src/niivue/index.ts

@@ -12,6 +12,7 @@ import {
   vertLineShader,
   vertLine3DShader,
   fragRectShader,
+  fragRectOutlineShader,
   vertRenderShader,
   fragRenderShader,
   fragRenderGradientShader,
@@ -41,6 +42,7 @@ import {
   fragMeshMatcapShader,
   fragMeshOutlineShader,
   fragMeshEdgeShader,
+  fragMeshShaderCrevice,
   fragMeshDiffuseEdgeShader,
   fragMeshHemiShader,
   fragMeshMatteShader,
@@ -78,7 +80,14 @@ import {
   INITIAL_SCENE_DATA
 } from '../nvdocument.js'
 
-import { LabelTextAlignment, LabelLineTerminator, NVLabel3D, NVLabel3DStyle } from '../nvlabel.js'
+import {
+  LabelTextAlignment,
+  LabelLineTerminator,
+  NVLabel3D,
+  NVLabel3DStyle,
+  LabelAnchorPoint,
+  LabelAnchorFlag
+} from '../nvlabel.js'
 import { FreeSurferConnectome, NVConnectome } from '../nvconnectome.js'
 import {
   NVImage,
@@ -96,7 +105,8 @@ import {
   NiftiHeader,
   DragReleaseParams,
   NiiVueLocation,
-  NiiVueLocationValue
+  NiiVueLocationValue,
+  SyncOpts
 } from '../types.js'
 import {
   clamp,
@@ -121,8 +131,10 @@ export { NVImage, NVImageFromUrlOptions } from '../nvimage/index.js'
 // address rollup error - https://github.com/rollup/plugins/issues/71
 export * from '../nvdocument.js'
 export { NVUtilities } from '../nvutilities.js'
-export { LabelTextAlignment, LabelLineTerminator, NVLabel3DStyle, NVLabel3D } from '../nvlabel.js'
+export { LabelTextAlignment, LabelLineTerminator, NVLabel3DStyle, NVLabel3D, LabelAnchorPoint } from '../nvlabel.js'
 export { NVMeshLoaders } from '../nvmesh-loaders.js'
+export { NVMeshUtilities } from '../nvmesh-utilities.js'
+
 // same rollup error as above during npm run dev, and during the umd build
 // TODO: at least remove the umd build when AFNI do not need it anymore
 export * from '../types.js'
@@ -184,6 +196,7 @@ type Descriptive = {
   cal_max: number
   robust_min: number
   robust_max: number
+  area: number | null
 }
 
 type SliceScale = {
@@ -345,6 +358,7 @@ export class Niivue {
   orientCubeShader?: Shader
   orientCubeShaderVAO: WebGLVertexArrayObject | null = null
   rectShader?: Shader
+  rectOutlineShader?: Shader
   renderShader?: Shader
   lineShader?: Shader
   line3DShader?: Shader
@@ -390,7 +404,19 @@ export class Niivue {
   extentsMax?: vec3
   // ResizeObserver
   private resizeObserver: ResizeObserver | null = null
-  syncOpts: Record<string, unknown> = {}
+  // 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
+  }
+
   readyForSync = false
 
   // UI Data
@@ -440,7 +466,7 @@ export class Niivue {
 
   cuboidVertexBuffer?: WebGLBuffer
 
-  otherNV: Niivue | Niivue[] | null = null // another niivue instance that we wish to sync position with
+  otherNV: 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
@@ -477,6 +503,10 @@ export class Niivue {
       Name: 'Hemispheric',
       Frag: fragMeshHemiShader
     },
+    {
+      Name: 'Crevice',
+      Frag: fragMeshShaderCrevice
+    },
     {
       Name: 'Edge',
       Frag: fragMeshEdgeShader
@@ -905,7 +935,11 @@ export class Niivue {
    * @deprecated use broadcastTo instead
    * @see {@link https://niivue.github.io/niivue/features/sync.mesh.html | live demo usage}
    */
-  syncWith(otherNV: Niivue, syncOpts = { '2d': true, '3d': true }): void {
+  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]
+    }
     this.otherNV = otherNV
     this.syncOpts = { ...syncOpts }
   }
@@ -922,10 +956,71 @@ 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
@@ -939,44 +1034,52 @@ 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
     }
-    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) {
+    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
       if (this.syncOpts['2d']) {
-        this.otherNV.scene.crosshairPos = this.otherNV.mm2frac(thisMM)
-        this.otherNV.scene.pan2Dxyzmm = vec4.clone(this.scene.pan2Dxyzmm)
+        this.doSync2d(this.otherNV[i])
       }
+      // legacy 3d option for multiple properties
       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
-        }
-        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.doSync3d(this.otherNV[i])
       }
+      this.otherNV[i].drawScene()
+      this.otherNV[i].createOnLocationChange()
     }
   }
 
@@ -1097,6 +1200,11 @@ export class Niivue {
     const [x, y] = [pos.x * this.uiData.dpr!, pos.y * this.uiData.dpr!]
     const label = this.getLabelAtPoint([x, y])
     if (label) {
+      // check for user defined onclick handler
+      if (label.onClick) {
+        label.onClick(label)
+        return
+      }
       // find associated mesh
       for (const mesh of this.meshes) {
         if (mesh.type !== MeshType.CONNECTOME) {
@@ -1273,7 +1381,6 @@ export class Niivue {
     const mmLength = vec3.len(v)
     const voxStart = this.frac2vox(fracStart)
     const voxEnd = this.frac2vox(fracEnd)
-
     this.onDragRelease({
       fracStart,
       fracEnd,
@@ -1326,6 +1433,11 @@ 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
       }
@@ -1445,6 +1557,16 @@ export class Niivue {
       this.drawScene()
       this.uiData.prevX = this.uiData.currX
       this.uiData.prevY = this.uiData.currY
+    } else if (!this.uiData.mousedown && this.opts.clickToSegment) {
+      const pos = this.getNoPaddingNoBorderCanvasRelativeMousePosition(e, this.gl.canvas)
+      // ignore if mouse moves outside of tile of initial click
+      if (!pos) {
+        return
+      }
+      const x = pos.x * this.uiData.dpr!
+      const y = pos.y * this.uiData.dpr!
+      this.mousePos = [x, y]
+      this.drawScene()
     }
   }
 
@@ -2049,7 +2171,7 @@ export class Niivue {
                       this.addVolume(volume)
                       // set drawing enabled to make sure
                       // the new drawing bitmap matches the background volume dims
-                      this.setDrawingEnabled(true)
+                      // this.setDrawingEnabled(true)
                     }
                   })
                   .catch((e) => {
@@ -2807,6 +2929,25 @@ export class Niivue {
     return this.meshes[idx].indexNearestXYZmm(Xmm, Ymm, Zmm)
   }
 
+  /**
+   * reduce complexity of FreeSurfer mesh
+   * @param mesh - identity of mesh to change
+   * @param order - decimation order 0..6
+   * @example niivue.decimateHierarchicalMesh(niivue.meshes[0].id, 4)
+   * @returns boolean false if mesh is not hierarchical or of lower order
+   * @see {@link https://niivue.github.io/niivue/features/meshes.html | live demo usage}
+   */
+  decimateHierarchicalMesh(mesh: number, order: number = 3): boolean {
+    const idx = this.getMeshIndexByID(mesh)
+    if (idx < 0) {
+      log.warn('reverseFaces() id not loaded', mesh)
+      return
+    }
+    const ret = this.meshes[idx].decimateHierarchicalMesh(this.gl, order)
+    this.updateGLVolume()
+    return ret
+  }
+
   /**
    * reverse triangle winding of mesh (swap front and back faces)
    * @param id - identity of mesh to change
@@ -3366,6 +3507,9 @@ export class Niivue {
     this.renderShader!.use(this.gl)
     this.gl.uniform3fv(this.renderShader!.uniforms.clipLo!, this.opts.clipVolumeLow)
     this.gl.uniform3fv(this.renderShader!.uniforms.clipHi!, this.opts.clipVolumeHigh)
+    this.pickingImageShader!.use(this.gl)
+    this.gl.uniform3fv(this.pickingImageShader!.uniforms.clipLo!, this.opts.clipVolumeLow)
+    this.gl.uniform3fv(this.pickingImageShader!.uniforms.clipHi!, this.opts.clipVolumeHigh)
     this.drawScene()
   }
 
@@ -4169,6 +4313,29 @@ 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
@@ -4255,6 +4422,140 @@ 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)
@@ -4357,7 +4658,9 @@ 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
+    neighbors = 6,
+    // option for only flood filling within max distance from seed voxel
+    maxDistanceMM = Number.POSITIVE_INFINITY
   ): void {
     if (!this.drawBitmap) {
       throw new Error('drawBitmap undefined')
@@ -4383,10 +4686,29 @@ 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) {
@@ -4400,6 +4722,12 @@ 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
       }
     }
@@ -4431,6 +4759,12 @@ 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
         }
       }
@@ -5139,6 +5473,8 @@ 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)
@@ -5314,14 +5650,46 @@ export 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): Descriptive {
+  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
     const hdr = this.volumes[layer].hdr!
+    const pixDimsRAS = this.volumes[layer].pixDimsRAS!
     let slope = hdr.scl_slope
     if (isNaN(slope)) {
       slope = 1
@@ -5360,6 +5728,48 @@ 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
@@ -5420,7 +5830,8 @@ 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!
+      robust_max: this.volumes[layer].robust_max!,
+      area
     }
   }
 
@@ -5947,7 +6358,8 @@ export class Niivue {
     this.pickingImageShader.use(this.gl)
     this.gl.uniform1f(this.pickingImageShader.uniforms.overlays, this.overlays.length)
     this.gl.uniform3fv(this.pickingImageShader.uniforms.texVox, vox)
-
+    this.gl.uniform3fv(this.pickingImageShader!.uniforms.clipLo!, this.opts.clipVolumeLow)
+    this.gl.uniform3fv(this.pickingImageShader!.uniforms.clipHi!, this.opts.clipVolumeHigh)
     let shader = this.sliceMMShader
     if (this.opts.isV1SliceShader) {
       shader = this.sliceV1Shader
@@ -6771,6 +7183,7 @@ export class Niivue {
    * @see {@link https://niivue.github.io/niivue/features/colormaps.html | live demo usage}
    */
   setGamma(gamma = 1.0): void {
+    this.scene.gamma = gamma
     cmapper.gamma = gamma
     this.updateGLVolume()
   }
@@ -7182,34 +7595,72 @@ export class Niivue {
         this.scene.crosshairPos = vec3.clone(texFrac)
       }
       if (this.opts.drawingEnabled) {
+        // drawing done in voxels
         const pt = this.frac2vox(this.scene.crosshairPos) as [number, number, number]
         // if click-to-segment enabled
         if (this.opts.clickToSegment) {
-          const radius = this.opts.clickToSegmentRadius
-          const steps = this.opts.clickToSegmentSteps
+          // 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 brightOrDark = this.opts.clickToSegmentBright ? Number.POSITIVE_INFINITY : Number.NEGATIVE_INFINITY
-          this.drawPenFillPts = []
           this.drawPenAxCorSag = axCorSag
-          for (let i = 1; i <= steps; i++) {
-            const angle = (i / steps) * 2 * Math.PI
-            let xVox = pt[0] + radius * Math.cos(angle)
-            let yVox = pt[1] + radius * Math.sin(angle)
-            const zVox = pt[2]
-            xVox = Math.round(xVox)
-            yVox = Math.round(yVox)
-            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)
-            }
+          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)
           }
+          // 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(0, [], true)
+          const info = this.getDescriptives({
+            layer: 0,
+            masks: [],
+            drawingIsMask: true
+          })
           this.onClickToSegment({ mL: info.volumeML, mm3: info.volumeMM3 })
           return
         }
@@ -7461,20 +7912,43 @@ export 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) // switch off to avoid tampering with settings
+    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
+    }
   }
 
   drawCircle(leftTopWidthHeight: number[], circleColor = this.opts.fontColor, fillPercent = 1.0): void {
@@ -7526,9 +8000,26 @@ export class Niivue {
     return labels
   }
 
+  getConnectomeLabels(): NVLabel3D[] {
+    const connectomes = this.meshes.filter((m) => m.type === MeshType.CONNECTOME)
+    const meshNodes = connectomes.flatMap((m) => m.nodes as NVConnectomeNode[])
+    const meshLabels = meshNodes.map((n) => n.label)
+    // filter our undefined labels
+    const definedMeshLabels = meshLabels.filter((l): l is NVLabel3D => l !== undefined)
+    // get all of our non-anchored labels
+    const nonAnchoredLabels = this.document.labels.filter((l) => l.anchor == null || l.anchor === LabelAnchorPoint.NONE)
+    // get the unique set of unanchored labels
+    const nonAnchoredLabelSet = new Set(definedMeshLabels)
+    for (const label of nonAnchoredLabels) {
+      nonAnchoredLabelSet.add(label)
+    }
+
+    return Array.from(nonAnchoredLabelSet)
+  }
+
   getBulletMarginWidth(): number {
     let bulletMargin = 0
-    const labels = this.getAllLabels()
+    const labels = this.getConnectomeLabels()
     if (labels.length === 0) {
       return 0
     }
@@ -7553,7 +8044,7 @@ export class Niivue {
   }
 
   getLegendPanelWidth(): number {
-    const labels = this.getAllLabels()
+    const labels = this.getConnectomeLabels()
     if (!this.opts.showLegend || labels.length === 0) {
       return 0
     }
@@ -7584,7 +8075,7 @@ export class Niivue {
   }
 
   getLegendPanelHeight(): number {
-    const labels = this.getAllLabels()
+    const labels = this.getConnectomeLabels()
     let height = 0
     const scale = 1.0 // we may want to make this adjustable in the future
     const verticalMargin = this.opts.textHeight * this.gl.canvas.height * scale
@@ -8099,7 +8590,11 @@ export class Niivue {
 
   // not included in public docs
   // show text labels for L/R, A/P, I/S dimensions
-  drawSliceOrientationText(leftTopWidthHeight: number[], axCorSag: SLICE_TYPE): void {
+  drawSliceOrientationText(
+    leftTopWidthHeight: number[],
+    axCorSag: SLICE_TYPE,
+    padLeftTop: number[] = [NaN, NaN]
+  ): void {
     this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height)
     let topText = 'S'
     if (axCorSag === SLICE_TYPE.AXIAL) {
@@ -8113,9 +8608,32 @@ export class Niivue {
       this.drawTextRightBelow([leftTopWidthHeight[0], leftTopWidthHeight[1]], leftText + topText)
       return
     }
-    this.drawTextBelow([leftTopWidthHeight[0] + leftTopWidthHeight[2] * 0.5, leftTopWidthHeight[1]], topText)
-
-    this.drawTextRight([leftTopWidthHeight[0], leftTopWidthHeight[1] + leftTopWidthHeight[3] * 0.5], leftText)
+    let drawBelow = true
+    let drawRight = true
+    if (!isNaN(padLeftTop[0])) {
+      const ht = this.opts.textHeight * this.gl.canvas.height + 2
+      if (padLeftTop[1] > ht) {
+        this.drawTextBelow(
+          [leftTopWidthHeight[0] + leftTopWidthHeight[2] * 0.5, leftTopWidthHeight[1] + padLeftTop[1] - ht],
+          topText
+        )
+        drawBelow = false
+      }
+      const wid = this.textWidth(ht, leftText) + 2
+      if (padLeftTop[0] > wid) {
+        this.drawTextRight(
+          [leftTopWidthHeight[0] + padLeftTop[0] - wid, leftTopWidthHeight[1] + leftTopWidthHeight[3] * 0.5],
+          leftText
+        )
+        drawRight = false
+      }
+    }
+    if (drawBelow) {
+      this.drawTextBelow([leftTopWidthHeight[0] + leftTopWidthHeight[2] * 0.5, leftTopWidthHeight[1]], topText)
+    }
+    if (drawRight) {
+      this.drawTextRight([leftTopWidthHeight[0], leftTopWidthHeight[1] + leftTopWidthHeight[3] * 0.5], leftText)
+    }
   }
 
   // not included in public docs
@@ -8158,7 +8676,7 @@ export class Niivue {
 
   // not included in public docs
   // draw 2D tile
-  draw2D(leftTopWidthHeight: number[], axCorSag: SLICE_TYPE, customMM = NaN): void {
+  draw2DMain(leftTopWidthHeight: number[], axCorSag: SLICE_TYPE, customMM = NaN): void {
     let frac2mmTexture = this.volumes[0].frac2mm!.slice()
     let screen = this.screenFieldOfViewExtendedMM(axCorSag)
     let mesh2ortho = mat4.create()
@@ -8187,8 +8705,10 @@ export class Niivue {
       elevation = isRadiolgical ? -90 : 90
     }
     const gl = this.gl
+    let isStretchToScreen = false
     if (leftTopWidthHeight[2] === 0 || leftTopWidthHeight[3] === 0) {
       // only one tile: stretch tile to fill whole screen.
+      isStretchToScreen = true
       const pixPerMMw = gl.canvas.width / screen.fovMM[0]
       const pixPerMMh = gl.canvas.height / screen.fovMM[1]
       const pixPerMMmin = Math.min(pixPerMMw, pixPerMMh)
@@ -8347,10 +8867,42 @@ export class Niivue {
       // no crossbars for mosaic view
       this.drawCrosshairs3D(false, 0.15, obj.modelViewProjectionMatrix, true, this.opts.isSliceMM)
     }
-    this.drawSliceOrientationText(leftTopWidthHeight, axCorSag)
+    if (isStretchToScreen) {
+      // issue1065
+      this.drawSliceOrientationText(leftTopWidthHeight, axCorSag)
+    }
     this.readyForSync = true
   }
 
+  draw2D(
+    leftTopWidthHeight: number[],
+    axCorSag: SLICE_TYPE,
+    customMM = NaN,
+    imageWidthHeight: number[] = [NaN, NaN]
+  ): void {
+    const padLeftTop = [NaN, NaN]
+    if (isNaN(imageWidthHeight[0])) {
+      this.draw2DMain(leftTopWidthHeight, axCorSag, customMM)
+    } else {
+      // inset as padded in tile
+      const ltwh = leftTopWidthHeight.slice()
+      padLeftTop[0] = Math.floor(0.5 * (ltwh[2] - imageWidthHeight[0]))
+      padLeftTop[1] = Math.floor(0.5 * (ltwh[3] - imageWidthHeight[1]))
+      ltwh[0] += padLeftTop[0]
+      ltwh[1] += padLeftTop[1]
+      ltwh[2] = imageWidthHeight[0]
+      ltwh[3] = imageWidthHeight[1]
+      this.draw2DMain(ltwh, axCorSag, customMM)
+    }
+    if (customMM === Infinity || customMM === -Infinity || axCorSag === SLICE_TYPE.RENDER) {
+      return
+    }
+    if (leftTopWidthHeight[2] !== 0 && leftTopWidthHeight[3] !== 0) {
+      // issue1065
+      this.drawSliceOrientationText(leftTopWidthHeight, axCorSag, padLeftTop)
+    }
+  }
+
   // not included in public docs
   // determine 3D model view projection matrix
   calculateMvpMatrix(_unused: unknown, leftTopWidthHeight = [0, 0, 0, 0], azimuth: number, elevation: number): mat4[] {
@@ -9049,7 +9601,13 @@ export class Niivue {
    * @param style - label style
    * @param point - 3D point on the model
    */
-  addLabel(text: string, style: NVLabel3DStyle, points?: number[] | number[][]): NVLabel3D {
+  addLabel(
+    text: string,
+    style: NVLabel3DStyle,
+    points?: number[] | number[][],
+    anchor?: LabelAnchorPoint,
+    onClick?: (label: NVLabel3D) => void
+  ): NVLabel3D {
     const defaultStyle = {
       textColor: this.opts.legendTextColor,
       textScale: 1.0,
@@ -9061,7 +9619,7 @@ export class Niivue {
       bulletColor: this.opts.legendTextColor
     }
     const labelStyle = style ? { ...defaultStyle, ...style } : { ...defaultStyle }
-    const label = new NVLabel3D(text, labelStyle, points)
+    const label = new NVLabel3D(text, { ...labelStyle }, points, anchor, onClick)
     this.document.labels.push(label)
     return label
   }
@@ -9084,6 +9642,75 @@ export class Niivue {
   }
 
   getLabelAtPoint(screenPoint: [number, number]): NVLabel3D | null {
+    const scale = 1.0
+    const size = this.opts.textHeight * Math.min(this.gl.canvas.height, this.gl.canvas.width) * scale
+    const verticalMargin = this.opts.textHeight * this.gl.canvas.height * scale
+
+    // get all non-connectome labels
+    for (const label of this.document.labels) {
+      if (label.anchor == null || label.anchor === LabelAnchorPoint.NONE) {
+        continue
+      }
+
+      const labelSize = this.opts.textHeight * this.gl.canvas.height * label.style.textScale
+      const textHeight = this.textHeight(labelSize, label.text)
+      const textWidth = this.textWidth(labelSize, label.text)
+
+      if (label.anchor & LabelAnchorFlag.LEFT) {
+        if (screenPoint[0] > textWidth) {
+          continue
+        }
+      }
+
+      if (label.anchor & LabelAnchorFlag.CENTER) {
+        if (screenPoint[0] < (this.gl.canvas.width - textWidth) / 2) {
+          continue
+        }
+
+        if (screenPoint[0] > (this.gl.canvas.width + textWidth) / 2) {
+          continue
+        }
+      }
+
+      if (label.anchor & LabelAnchorFlag.RIGHT) {
+        if (screenPoint[0] < this.gl.canvas.width - textWidth) {
+          continue
+        }
+      }
+
+      if (label.anchor & LabelAnchorFlag.TOP) {
+        if (screenPoint[1] < verticalMargin / 2) {
+          continue
+        }
+
+        if (screenPoint[1] > textHeight + verticalMargin / 2) {
+          continue
+        }
+      }
+
+      if (label.anchor & LabelAnchorFlag.MIDDLE) {
+        if (screenPoint[1] < (this.gl.canvas.height - textHeight - verticalMargin) / 2) {
+          continue
+        }
+
+        if (screenPoint[1] > (this.gl.canvas.height + textHeight - verticalMargin / 2) / 2) {
+          continue
+        }
+      }
+
+      if (label.anchor & LabelAnchorFlag.BOTTOM) {
+        if (screenPoint[1] < this.gl.canvas.height - textHeight - verticalMargin) {
+          continue
+        }
+
+        if (screenPoint[1] > this.gl.canvas.height - verticalMargin / 2) {
+          continue
+        }
+      }
+
+      // label passed all tests
+      return label
+    }
     log.debug('screenPoint', screenPoint)
     const panelHeight = this.getLegendPanelHeight()
     const panelWidth = this.getLegendPanelWidth()
@@ -9099,10 +9726,7 @@ export class Niivue {
       return null
     }
 
-    const scale = 1.0
-    const size = this.opts.textHeight * Math.min(this.gl.canvas.height, this.gl.canvas.width) * scale
-
-    const labels = this.getAllLabels()
+    const labels = this.getConnectomeLabels()
     for (const label of labels) {
       const labelSize = this.opts.textHeight * this.gl.canvas.height * label.style.textScale
       const textHeight = this.textHeight(labelSize, label.text)
@@ -9140,11 +9764,11 @@ export class Niivue {
   draw3DLabel(
     label: NVLabel3D,
     pos: vec2,
-    mvpMatrix: mat4,
-    leftTopWidthHeight: number[],
-    bulletMargin = 0,
-    legendWidth: number,
-    secondPass = false
+    mvpMatrix?: mat4,
+    leftTopWidthHeight?: number[],
+    bulletMargin?: number,
+    legendWidth?: number,
+    secondPass?: boolean
   ): void {
     const text = label.text
     const left = pos[0]
@@ -9170,17 +9794,19 @@ export class Niivue {
 
     let textLeft = left
 
-    if (label.style.textAlignment !== LabelTextAlignment.LEFT) {
-      const textWidth = this.textWidth(label.style.textScale, label.text) * size
-      if (label.style.textAlignment === LabelTextAlignment.RIGHT) {
-        textLeft = left + legendWidth - size * 1.5 - textWidth
+    if (legendWidth) {
+      if (label.style.textAlignment !== LabelTextAlignment.LEFT) {
+        const textWidth = this.textWidth(label.style.textScale, label.text) * size
+        if (label.style.textAlignment === LabelTextAlignment.RIGHT) {
+          textLeft = left + legendWidth - size * 1.5 - textWidth
+        } else {
+          const remaining = legendWidth - (bulletMargin || size)
+          textLeft += (remaining - textWidth) / 2
+        }
       } else {
-        const remaining = legendWidth - (bulletMargin || size)
-        textLeft += (remaining - textWidth) / 2
+        // textLeft += size / 2;
+        textLeft += bulletMargin
       }
-    } else {
-      // textLeft += size / 2;
-      textLeft += bulletMargin
     }
 
     this.drawText([textLeft, top], text, label.style.textScale, label.style.textColor)
@@ -9188,7 +9814,7 @@ export class Niivue {
 
   // not included in public docs
   draw3DLabels(mvpMatrix: mat4, leftTopWidthHeight: number[], secondPass = false): void {
-    const labels = this.getAllLabels()
+    const labels = this.getConnectomeLabels()
     if (!this.opts.showLegend || labels.length === 0) {
       return
     }
@@ -9238,6 +9864,59 @@ export class Niivue {
     }
   }
 
+  drawAnchoredLabels(): void {
+    const size = this.opts.textHeight * Math.min(this.gl.canvas.height, this.gl.canvas.width) * 1.0
+    const anchoredLabels = this.document.labels.filter((l) => l.anchor != null && l.anchor !== LabelAnchorPoint.NONE)
+    for (const label of anchoredLabels) {
+      const text = label.text
+      const textHeight = this.textHeight(label.style.textScale, text) * size
+      const textWidth = this.textWidth(label.style.textScale, text) * size
+      let left: number
+      let top: number
+
+      const scale = 1.0 // we may want to make this adjustable in the future
+      const verticalMargin = this.opts.textHeight * this.gl.canvas.height * scale
+      const rectHeightDiff = verticalMargin
+      let rectWidthDiff = verticalMargin / 4
+      let rectHorizontalOffset = 0
+      let rectVerticalOffset = 0
+
+      if (label.anchor & LabelAnchorFlag.LEFT) {
+        left = 0
+      }
+
+      if (label.anchor & LabelAnchorFlag.RIGHT) {
+        left = this.canvas.width - textWidth
+        rectHorizontalOffset -= verticalMargin / 4
+      }
+
+      if (label.anchor & LabelAnchorFlag.CENTER) {
+        left = (this.canvas.width - textWidth) / 2
+        rectHorizontalOffset -= verticalMargin / 4
+        rectWidthDiff += verticalMargin / 4
+      }
+
+      if (label.anchor & LabelAnchorFlag.TOP) {
+        top = 0
+      }
+
+      if (label.anchor & LabelAnchorFlag.MIDDLE) {
+        top = (this.canvas.height - textHeight - verticalMargin) / 2
+        rectVerticalOffset -= verticalMargin / 4
+      }
+
+      if (label.anchor & LabelAnchorFlag.BOTTOM) {
+        top = this.canvas.height - textHeight - verticalMargin
+        rectVerticalOffset -= verticalMargin / 4
+      }
+      this.drawRect(
+        [left + rectHorizontalOffset, top + rectVerticalOffset, textWidth + rectWidthDiff, textHeight + rectHeightDiff],
+        label.style.backgroundColor
+      )
+      this.draw3DLabel(label, [left, top])
+    }
+  }
+
   // not included in public docs
   draw3D(
     leftTopWidthHeight = [0, 0, 0, 0],
@@ -9330,6 +10009,7 @@ export class Niivue {
     this.readyForSync = true
     this.sync()
     this.draw3DLabels(mvpMatrix, relativeLTWH, true)
+
     return posString
   }
 
@@ -10265,7 +10945,14 @@ export class Niivue {
           }
         }
         const isDrawPenDown = isFinite(this.drawPenLocation[0]) && this.opts.drawingEnabled
+
         const { volScale } = this.sliceScale()
+        const actualScale = volScale.slice()
+        if (this.opts.multiplanarEqualSize) {
+          volScale[0] = 1
+          volScale[1] = 1
+          volScale[2] = 1
+        }
         if (typeof this.opts.multiplanarPadPixels !== 'number') {
           log.debug('multiplanarPadPixels must be numeric')
         }
@@ -10310,44 +10997,49 @@ export class Niivue {
             isDrawGrid = true
           }
         }
+        let ltwh = ltwh2x2
         if (isDrawColumn) {
-          let ltwh = ltwh1x3
+          ltwh = ltwh1x3
           if (isShowRender || (this.opts.multiplanarShowRender === SHOW_RENDER.AUTO && ltwh1x4[4] >= ltwh1x3[4])) {
             ltwh = ltwh1x4
           } else {
             isDraw3D = false
           }
-          const sX = volScale[0] * ltwh[4]
-          const sY = volScale[1] * ltwh[4]
-          const sZ = volScale[2] * ltwh[4]
-          const sMx = mx * ltwh[4]
+        } else if (isDrawRow) {
+          ltwh = ltwh3x1
+          if (isShowRender || (this.opts.multiplanarShowRender === SHOW_RENDER.AUTO && ltwh4x1[4] >= ltwh3x1[4])) {
+            ltwh = ltwh4x1
+          } else {
+            isDraw3D = false
+          }
+        }
+        const sX = volScale[0] * ltwh[4]
+        const sY = volScale[1] * ltwh[4]
+        const sZ = volScale[2] * ltwh[4]
+        const actualX = actualScale[0] * ltwh[4]
+        const actualY = actualScale[1] * ltwh[4]
+        const actualZ = actualScale[2] * ltwh[4]
+        if (isDrawColumn) {
           // draw axial
-          this.draw2D([ltwh[0], ltwh[1], sX, sY], 0)
+          this.draw2D([ltwh[0], ltwh[1], sX, sY], 0, NaN, [actualX, actualY])
           // draw coronal
-          this.draw2D([ltwh[0], ltwh[1] + sY + pad, sX, sZ], 1)
+          this.draw2D([ltwh[0], ltwh[1] + sY + pad, sX, sZ], 1, NaN, [actualX, actualZ])
           // draw sagittal
-          this.draw2D([ltwh[0], ltwh[1] + sY + pad + sZ + pad, sY, sZ], 2)
+          this.draw2D([ltwh[0], ltwh[1] + sY + pad + sZ + pad, sY, sZ], 2, NaN, [actualY, actualZ])
           if (isDraw3D) {
+            const sMx = mx * ltwh[4]
             this.draw3D([ltwh[0], ltwh[1] + sY + sZ + sZ + pad * 3, sMx, sMx])
           }
         } else if (isDrawRow) {
-          let ltwh = ltwh3x1
-          if (isShowRender || (this.opts.multiplanarShowRender === SHOW_RENDER.AUTO && ltwh4x1[4] >= ltwh3x1[4])) {
-            ltwh = ltwh4x1
-          } else {
-            isDraw3D = false
-          }
-          const sX = volScale[0] * ltwh[4]
-          const sY = volScale[1] * ltwh[4]
-          const sZ = volScale[2] * ltwh[4]
           // draw axial
-          this.draw2D([ltwh[0], ltwh[1], sX, sY], 0)
+          this.draw2D([ltwh[0], ltwh[1], sX, sY], 0, NaN, [actualX, actualY])
           // draw coronal
-          this.draw2D([ltwh[0] + sX + pad, ltwh[1], sX, sZ], 1)
+          this.draw2D([ltwh[0] + sX + pad, ltwh[1], sX, sZ], 1, NaN, [actualX, actualZ])
           // draw sagittal
-          this.draw2D([ltwh[0] + sX + sX + pad * 2, ltwh[1], sY, sZ], 2)
+          this.draw2D([ltwh[0] + sX + sX + pad * 2, ltwh[1], sY, sZ], 2, NaN, [actualY, actualZ])
           if (isDraw3D) {
-            this.draw3D([ltwh[0] + sX + sX + sY + pad * 3, ltwh[1], ltwh[3], ltwh[3]])
+            const sMx = mx * ltwh[4]
+            this.draw3D([ltwh[0] + sX + sX + sY + pad * 3, ltwh[1], sMx, sMx])
           }
         } else if (isDrawGrid) {
           // did the user turn off 3D render view in multiplanar?
@@ -10358,16 +11050,12 @@ export class Niivue {
           if (this.opts.multiplanarShowRender === SHOW_RENDER.AUTO) {
             isDraw3D = true
           }
-          const ltwh = ltwh2x2
-          const sX = volScale[0] * ltwh[4]
-          const sY = volScale[1] * ltwh[4]
-          const sZ = volScale[2] * ltwh[4]
           // draw axial
-          this.draw2D([ltwh[0], ltwh[1] + sZ + pad, sX, sY], 0)
+          this.draw2D([ltwh[0], ltwh[1] + sZ + pad, sX, sY], 0, NaN, [actualX, actualY])
           // draw coronal
-          this.draw2D([ltwh[0], ltwh[1], sX, sZ], 1)
+          this.draw2D([ltwh[0], ltwh[1], sX, sZ], 1, NaN, [actualX, actualZ])
           // draw sagittal
-          this.draw2D([ltwh[0] + sX + pad, ltwh[1], sY, sZ], 2)
+          this.draw2D([ltwh[0] + sX + pad, ltwh[1], sY, sZ], 2, NaN, [actualY, actualZ])
           if (isDraw3D) {
             this.draw3D([ltwh[0] + sX + pad, ltwh[1] + sZ + pad, sY, sY])
           }
@@ -10432,12 +11120,44 @@ 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
+      if (tileIdx > -1) {
+        // get fov in mm for this plane presented in the tile
+        const fovMM = this.screenSlices[tileIdx].fovMM
+        // get the left, top, width, height of the tile in pixels
+        const ltwh = this.screenSlices[tileIdx].leftTopWidthHeight
+        // calculate the pixel to mm scale so we can draw the circle
+        // in pixels (so it is highres) but with the radius specified in mm
+        const pixPerMM = ltwh[2] / fovMM[0]
+        // get the crosshair color, but replace the alpha because we want it to be transparent
+        // no matter what. We want to see the image data underneath the circle.
+        const color = this.opts.crosshairColor
+        const segmentCursorColor = [color[0], color[1], color[2], 0.4]
+        const radius = this.opts.clickToSegmentRadius * pixPerMM
+        this.drawCircle([x - radius, y - radius, radius * 2, radius * 2], segmentCursorColor, 1)
+      }
     }
+
     const pos = this.frac2mm([this.scene.crosshairPos[0], this.scene.crosshairPos[1], this.scene.crosshairPos[2]])
 
     posString = pos[0].toFixed(2) + '×' + pos[1].toFixed(2) + '×' + pos[2].toFixed(2)
     this.readyForSync = true // by the time we get here, all volumes should be loaded and ready to be drawn. We let other niivue instances know that we can now reliably sync draw calls (images are loaded)
     this.sync()
+    this.drawAnchoredLabels()
     return posString
   }