@niivue/niivue 0.44.2 → 0.45.0

package/src/niivue/index.ts

@@ -79,7 +79,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,
@@ -90,6 +97,7 @@ import {
   ImageFromUrlOptions
 } from '../nvimage/index.js'
 import { NVUtilities } from '../nvutilities.js'
+import { NVMeshUtilities } from '../nvmesh-utilities.js'
 import {
   Connectome,
   LegacyConnectome,
@@ -122,7 +130,7 @@ 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'
 
@@ -322,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
@@ -956,10 +965,18 @@ export class Niivue {
     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.otherNV.scene.crosshairPos = this.otherNV.mm2frac(thisMM)
         this.otherNV.scene.pan2Dxyzmm = vec4.clone(this.scene.pan2Dxyzmm)
       }
+      // options specific to 3d rendering
       if (this.syncOpts['3d']) {
         this.otherNV.scene.renderAzimuth = this.scene.renderAzimuth
         this.otherNV.scene.renderElevation = this.scene.renderElevation
@@ -972,6 +989,12 @@ export class Niivue {
         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)
@@ -1104,6 +1127,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) {
@@ -1452,6 +1480,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()
     }
   }
 
@@ -1740,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
   }
@@ -1762,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,
@@ -1917,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()
@@ -3766,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
@@ -3790,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
   }
 
   /**
@@ -3844,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()
@@ -3893,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
   }
 
   /**
@@ -6801,6 +6977,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()
   }
@@ -7212,7 +7389,10 @@ 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]
+        // radius given in mm
+        const ptMM = this.frac2mm(this.scene.crosshairPos)
         // if click-to-segment enabled
         if (this.opts.clickToSegment) {
           const radius = this.opts.clickToSegmentRadius
@@ -7222,11 +7402,15 @@ export class Niivue {
           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)
+            // 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.
@@ -7556,9 +7740,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
     }
@@ -7583,7 +7784,7 @@ export class Niivue {
   }
 
   getLegendPanelWidth(): number {
-    const labels = this.getAllLabels()
+    const labels = this.getConnectomeLabels()
     if (!this.opts.showLegend || labels.length === 0) {
       return 0
     }
@@ -7614,7 +7815,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
@@ -8129,7 +8330,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) {
@@ -8143,9 +8348,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
@@ -8188,7 +8416,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()
@@ -8217,8 +8445,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)
@@ -8377,10 +8607,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[] {
@@ -9079,7 +9341,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,
@@ -9091,7 +9359,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
   }
@@ -9114,6 +9382,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()
@@ -9129,10 +9466,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)
@@ -9170,11 +9504,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]
@@ -9200,17 +9534,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)
@@ -9218,7 +9554,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
     }
@@ -9268,6 +9604,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],
@@ -9360,6 +9749,7 @@ export class Niivue {
     this.readyForSync = true
     this.sync()
     this.draw3DLabels(mvpMatrix, relativeLTWH, true)
+
     return posString
   }
 
@@ -10295,7 +10685,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')
         }
@@ -10340,44 +10737,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?
@@ -10388,16 +10790,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])
           }
@@ -10463,11 +10861,37 @@ export class Niivue {
         height
       ])
     }
+
+    // draw circle at mouse position if clickToSegment is enabled
+    if (this.opts.clickToSegment) {
+      const x = this.mousePos[0]
+      const y = this.mousePos[1]
+      // 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
   }