@niivue/niivue 0.44.2 → 0.45.0

package/build/index.js

@@ -10,7 +10,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import { mat4 as mat46, vec2, vec3 as vec311, vec4 as vec48 } from "gl-matrix";
 
 // package.json
-var version = "0.44.2";
+var version = "0.45.0";
 
 // src/logger.ts
 var _Log = class _Log {
@@ -12393,6 +12393,12 @@ var NVMeshLoaders = class _NVMeshLoaders {
     while (lines[pos].length < 1) {
       pos++;
     }
+    if (lines[pos].startsWith("METADATA")) {
+      while (lines[pos].length > 1) {
+        pos++;
+      }
+      pos++;
+    }
     items = lines[pos].trim().split(/\s+/);
     pos++;
     if (items[0].includes("LINES")) {
@@ -12571,7 +12577,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
           layer.values = obj;
         }
       }
-    } else if (ext === "CRV" || ext === "CURV") {
+    } else if (ext === "CRV" || ext === "CURV" || ext === "THICKNESS" || ext === "AREA") {
       layer.values = _NVMeshLoaders.readCURV(buffer, n_vert);
       layer.isTransparentBelowCalMin = false;
     } else if (ext === "GII") {
@@ -12596,6 +12602,9 @@ var NVMeshLoaders = class _NVMeshLoaders {
       layer.values = _NVMeshLoaders.readSMP(buffer, n_vert);
     } else if (ext === "STC") {
       layer.values = _NVMeshLoaders.readSTC(buffer, n_vert);
+    } else if (_NVMeshLoaders.isCurv(buffer)) {
+      layer.values = _NVMeshLoaders.readCURV(buffer, n_vert);
+      layer.isTransparentBelowCalMin = false;
     } else {
       log.warn("Unknown layer overlay format " + name);
       return layer;
@@ -12769,6 +12778,17 @@ var NVMeshLoaders = class _NVMeshLoaders {
     return f32;
   }
   // readSTC()
+  static isCurv(buffer) {
+    const view = new DataView(buffer);
+    const sig0 = view.getUint8(0);
+    const sig1 = view.getUint8(1);
+    const sig2 = view.getUint8(2);
+    if (sig0 !== 255 || sig1 !== 255 || sig2 !== 255) {
+      utiltiesLogger.debug("Unable to recognize file type: does not appear to be FreeSurfer format.");
+      return false;
+    }
+    return true;
+  }
   // read freesurfer curv big-endian format
   // https://github.com/bonilhamusclab/MRIcroS/blob/master/%2BfileUtils/%2Bpial/readPial.m
   // http://www.grahamwideman.com/gw/brain/fs/surfacefileformats.htm
@@ -20032,7 +20052,7 @@ var NVImage = class _NVImage {
             hdr.datatypeCode = 64 /* DT_FLOAT64 */;
             break;
           default:
-            throw new Error("Unsupported NRRD data type: " + items[0]);
+            throw new Error("Unsupported MHA data type: " + items[0]);
         }
       }
       if (line.startsWith("ObjectType") && !items[0].includes("Image")) {
@@ -20054,6 +20074,9 @@ var NVImage = class _NVImage {
       [mat33[2], mat33[5], mat33[8], offset[2]],
       [0, 0, 0, 1]
     ];
+    while (bytes[pos] === 10) {
+      pos++;
+    }
     hdr.vox_offset = pos;
     if (isDetached && pairedImgData) {
       if (isGz) {
@@ -22261,6 +22284,7 @@ var DEFAULT_OPTIONS = {
   multiplanarPadPixels: 0,
   // @deprecated
   multiplanarForceRender: false,
+  multiplanarEqualSize: false,
   multiplanarShowRender: 2 /* AUTO */,
   // auto is the same behaviour as multiplanarForceRender: false
   isRadiologicalConvention: false,
@@ -22301,6 +22325,7 @@ var DEFAULT_OPTIONS = {
   clickToSegmentBright: true
 };
 var INITIAL_SCENE_DATA = {
+  gamma: 1,
   azimuth: 110,
   elevation: 10,
   crosshairPos: vec38.create(),
@@ -22539,6 +22564,9 @@ var NVDocument = class _NVDocument {
       data.opts.meshThicknessOn2D = "infinity";
     }
     data.labels = [...this.data.labels];
+    for (const label of data.labels) {
+      delete label.onClick;
+    }
     data.customData = this.customData;
     if (this.volumes.length) {
       let imageOptions = this.imageOptionsArray[0];
@@ -22794,6 +22822,19 @@ var LabelLineTerminator = /* @__PURE__ */ ((LabelLineTerminator2) => {
   LabelLineTerminator2["RING"] = "ring";
   return LabelLineTerminator2;
 })(LabelLineTerminator || {});
+var LabelAnchorPoint = /* @__PURE__ */ ((LabelAnchorPoint2) => {
+  LabelAnchorPoint2[LabelAnchorPoint2["NONE"] = 0 /* NONE */] = "NONE";
+  LabelAnchorPoint2[LabelAnchorPoint2["TOPLEFT"] = 9] = "TOPLEFT";
+  LabelAnchorPoint2[LabelAnchorPoint2["TOPCENTER"] = 10] = "TOPCENTER";
+  LabelAnchorPoint2[LabelAnchorPoint2["TOPRIGHT"] = 12] = "TOPRIGHT";
+  LabelAnchorPoint2[LabelAnchorPoint2["MIDDLELEFT"] = 17] = "MIDDLELEFT";
+  LabelAnchorPoint2[LabelAnchorPoint2["MIDDLECENTER"] = 18] = "MIDDLECENTER";
+  LabelAnchorPoint2[LabelAnchorPoint2["MIDDLERIGHT"] = 20] = "MIDDLERIGHT";
+  LabelAnchorPoint2[LabelAnchorPoint2["BOTTOMLEFT"] = 33] = "BOTTOMLEFT";
+  LabelAnchorPoint2[LabelAnchorPoint2["BOTTOMCENTER"] = 34] = "BOTTOMCENTER";
+  LabelAnchorPoint2[LabelAnchorPoint2["BOTTOMRIGHT"] = 36] = "BOTTOMRIGHT";
+  return LabelAnchorPoint2;
+})(LabelAnchorPoint || {});
 var NVLabel3DStyle = class {
   /**
    * @param textColor - Color of text
@@ -22831,13 +22872,17 @@ var NVLabel3D = class {
    * @param style - The style of the label
    * @param points - An array of points label for label lines
    */
-  constructor(text, style, points) {
+  constructor(text, style, points, anchor, onClick) {
     __publicField(this, "text");
     __publicField(this, "style");
     __publicField(this, "points");
+    __publicField(this, "anchor");
+    __publicField(this, "onClick");
     this.text = text;
     this.style = style;
     this.points = points;
+    this.anchor = anchor || 0 /* NONE */;
+    this.onClick = onClick;
   }
 };
 
@@ -23979,6 +24024,7 @@ var Niivue = class _Niivue {
    * @param options  - options object to set modifiable Niivue properties
    */
   constructor(options = DEFAULT_OPTIONS) {
+    __publicField(this, "loaders", {});
     __publicField(this, "canvas", null);
     // the reference to the canvas element on the page
     __publicField(this, "_gl", null);
@@ -24588,6 +24634,11 @@ var Niivue = class _Niivue {
     }
     const thisMM = this.frac2mm(this.scene.crosshairPos);
     if (this.otherNV instanceof _Niivue) {
+      const thisGamma = this.scene.gamma;
+      const otherGamma = this.otherNV.scene.gamma;
+      if (thisGamma !== otherGamma) {
+        this.otherNV.setGamma(thisGamma);
+      }
       if (this.syncOpts["2d"]) {
         this.otherNV.scene.crosshairPos = this.otherNV.mm2frac(thisMM);
         this.otherNV.scene.pan2Dxyzmm = vec48.clone(this.scene.pan2Dxyzmm);
@@ -24604,6 +24655,11 @@ var Niivue = class _Niivue {
         if (this.otherNV[i] === this) {
           continue;
         }
+        const thisGamma = this.scene.gamma;
+        const otherGamma = this.otherNV[i].scene.gamma;
+        if (thisGamma !== otherGamma) {
+          this.otherNV[i].setGamma(thisGamma);
+        }
         if (this.syncOpts["2d"]) {
           this.otherNV[i].scene.crosshairPos = this.otherNV[i].mm2frac(thisMM);
           this.otherNV[i].scene.pan2Dxyzmm = vec48.clone(this.scene.pan2Dxyzmm);
@@ -24719,6 +24775,10 @@ var Niivue = class _Niivue {
     const [x, y] = [pos.x * this.uiData.dpr, pos.y * this.uiData.dpr];
     const label = this.getLabelAtPoint([x, y]);
     if (label) {
+      if (label.onClick) {
+        label.onClick(label);
+        return;
+      }
       for (const mesh of this.meshes) {
         if (mesh.type !== "connectome" /* CONNECTOME */) {
           continue;
@@ -25033,6 +25093,15 @@ var Niivue = 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);
+      if (!pos) {
+        return;
+      }
+      const x = pos.x * this.uiData.dpr;
+      const y = pos.y * this.uiData.dpr;
+      this.mousePos = [x, y];
+      this.drawScene();
     }
   }
   // not included in public docs
@@ -25270,6 +25339,11 @@ var Niivue = class _Niivue {
     if (ext === "GZ") {
       ext = re.exec(fullname.slice(0, -3))[1];
       ext = ext.toUpperCase();
+    } else if (ext === "CBOR") {
+      const endExt = ext;
+      ext = re.exec(fullname.slice(0, -5))[1];
+      ext = ext.toUpperCase();
+      ext = `${ext}.${endExt}`;
     }
     return upperCase ? ext : ext.toLowerCase();
   }
@@ -25290,6 +25364,28 @@ var Niivue = class _Niivue {
   }
   async addVolumesFromUrl(imageOptionsArray) {
     const promises = imageOptionsArray.map(async (imageItem) => {
+      const ext = this.getFileExt(imageItem.url);
+      if (this.loaders[ext]) {
+        let itemToLoad = imageItem.url;
+        const toExt = this.loaders[ext].toExt;
+        let name = imageItem.name || imageItem.url;
+        name = name.split("/").pop();
+        if (typeof imageItem.url === "string") {
+          const url = imageItem.url;
+          try {
+            const response = await fetch(url);
+            if (!response.ok) {
+              throw new Error(`Failed to load file: ${response.statusText}`);
+            }
+            itemToLoad = await response.arrayBuffer();
+          } catch (error) {
+            throw new Error(`Failed to load url ${url}: ${error}`);
+          }
+        }
+        const buffer = await this.loaders[ext].loader(itemToLoad);
+        imageItem.url = buffer;
+        imageItem.name = `${name}.${toExt}`;
+      }
       const imageOptions = {
         url: imageItem.url,
         headers: imageItem.headers,
@@ -25429,6 +25525,40 @@ var Niivue = class _Niivue {
       this.addVolume(volume);
     });
   }
+  /* useLoader
+  
+    registers an external file loader for niivue to use when reading files.
+  
+    the loader must return an array buffer of the file contents for niivue
+    to parse and the extension of the file so niivue can infer the file type to load. 
+  
+    example: 
+  
+    const myCustomLoader = (File) => {
+      // ... do parsing here ...
+      return {
+        arrayBuffer: ArrayBuffer,
+        fileExt: 'iwi.cbor',
+        positions: Float32Array | [], // allows for mesh loading to mz3
+        indices: Uint32Array | [], // allows for mesh loading to mz3
+      }
+  
+    nv.useLoader({
+      loader: myCustomLoader,
+      fileExt: 'iwi.cbor',
+      toExt: 'nii'
+    })
+  
+    */
+  useLoader(loader, fileExt, toExt) {
+    this.loaders = {
+      ...this.loaders,
+      [fileExt.toUpperCase()]: {
+        loader,
+        toExt
+      }
+    };
+  }
   // not included in public docs
   dropListener(e) {
     e.stopPropagation();
@@ -27100,6 +27230,37 @@ var Niivue = class _Niivue {
     this.document.meshes = this.meshes;
     return this.document.download(fileName, compress2);
   }
+  // generic loadImages that wraps loadVolumes and loadMeshes
+  async loadImages(images) {
+    const volumes = [];
+    const meshes = [];
+    for (const image of images) {
+      if ("url" in image) {
+        const ext = this.getFileExt(image.url);
+        if (this.loaders[ext]) {
+          const toExt = this.loaders[ext].toExt.toUpperCase();
+          if (MESH_EXTENSIONS.includes(toExt)) {
+            meshes.push(image);
+          } else {
+            volumes.push(image);
+          }
+          continue;
+        }
+        if (MESH_EXTENSIONS.includes(ext.toUpperCase())) {
+          meshes.push(image);
+        } else {
+          volumes.push(image);
+        }
+      }
+    }
+    if (volumes.length > 0) {
+      await this.loadVolumes(volumes);
+    }
+    if (meshes.length > 0) {
+      await this.loadMeshes(meshes);
+    }
+    return this;
+  }
   /**
    * load an array of volume objects
    * @param volumeList - the array of objects to load. each object must have a resolvable "url" property at a minimum
@@ -27119,27 +27280,7 @@ var Niivue = class _Niivue {
     this.volumes = [];
     this.gl.clearColor(0, 0, 0, 1);
     this.gl.clear(this.gl.COLOR_BUFFER_BIT);
-    if (volumeList.length > 1) {
-      await this.addVolumesFromUrl(volumeList);
-      return this;
-    }
-    const imageOptions = {
-      url: volumeList[0].url,
-      headers: volumeList[0].headers,
-      name: volumeList[0].name,
-      colormap: volumeList[0].colormap ? volumeList[0].colormap : volumeList[0].colorMap,
-      colormapNegative: volumeList[0].colormapNegative ? volumeList[0].colormapNegative : volumeList[0].colorMapNegative,
-      opacity: volumeList[0].opacity,
-      urlImgData: volumeList[0].urlImgData,
-      cal_min: volumeList[0].cal_min,
-      cal_max: volumeList[0].cal_max,
-      trustCalMinMax: this.opts.trustCalMinMax,
-      isManifest: volumeList[0].isManifest,
-      frame4D: volumeList[0].frame4D,
-      limitFrames4D: volumeList[0].limitFrames4D || this.opts.limitFrames4D,
-      colorbarVisible: volumeList[0].colorbarVisible
-    };
-    await this.addVolumeFromUrl(imageOptions);
+    await this.addVolumesFromUrl(volumeList);
     return this;
   }
   /**
@@ -27170,6 +27311,28 @@ var Niivue = class _Niivue {
   async addMeshesFromUrl(meshOptions) {
     const promises = meshOptions.map(async (meshItem) => {
       const ext = this.getFileExt(meshItem.url);
+      if (this.loaders[ext]) {
+        let itemToLoad = meshItem.url;
+        const toExt = this.loaders[ext].toExt;
+        let name = meshItem.name || meshItem.url;
+        name = name.split("/").pop();
+        if (typeof meshItem.url === "string") {
+          const url = meshItem.url;
+          try {
+            const response = await fetch(url);
+            if (!response.ok) {
+              throw new Error(`Failed to load file: ${response.statusText}`);
+            }
+            itemToLoad = await response.arrayBuffer();
+          } catch (error) {
+            throw new Error(`Failed to load url ${url}: ${error}`);
+          }
+        }
+        const { positions, indices } = await this.loaders[ext].loader(itemToLoad);
+        meshItem.name = `${name}.${toExt}`;
+        const mz3 = NVMeshUtilities.createMZ3(positions, indices, false);
+        meshItem.buffer = mz3;
+      }
       if (ext === "JCON" || ext === "JSON") {
         const response = await fetch(meshItem.url, {});
         const json = await response.json();
@@ -27210,13 +27373,7 @@ var Niivue = class _Niivue {
     this.meshes = [];
     this.gl.clearColor(0, 0, 0, 1);
     this.gl.clear(this.gl.COLOR_BUFFER_BIT);
-    if (meshList.length > 1) {
-      await this.addMeshesFromUrl(meshList);
-      this.updateGLVolume();
-      this.drawScene();
-      return this;
-    }
-    await this.addMeshFromUrl(meshList[0]);
+    await this.addMeshesFromUrl(meshList);
     this.updateGLVolume();
     this.drawScene();
     return this;
@@ -29781,6 +29938,7 @@ var Niivue = class _Niivue {
    * @see {@link https://niivue.github.io/niivue/features/colormaps.html | live demo usage}
    */
   setGamma(gamma = 1) {
+    this.scene.gamma = gamma;
     cmapper.gamma = gamma;
     this.updateGLVolume();
   }
@@ -30144,6 +30302,7 @@ var Niivue = class _Niivue {
       }
       if (this.opts.drawingEnabled) {
         const pt = this.frac2vox(this.scene.crosshairPos);
+        const ptMM = this.frac2mm(this.scene.crosshairPos);
         if (this.opts.clickToSegment) {
           const radius = this.opts.clickToSegmentRadius;
           const steps = this.opts.clickToSegmentSteps;
@@ -30152,11 +30311,12 @@ var Niivue = class _Niivue {
           this.drawPenAxCorSag = axCorSag;
           for (let i2 = 1; i2 <= steps; i2++) {
             const angle = i2 / 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);
+            const xMM = ptMM[0] + radius * Math.cos(angle);
+            const yMM = ptMM[1] + radius * Math.sin(angle);
+            const zMM = ptMM[2];
+            const xVox = this.back.mm2vox([xMM, yMM, zMM])[0];
+            const yVox = this.back.mm2vox([xMM, yMM, zMM])[1];
+            const zVox = this.back.mm2vox([xMM, yMM, zMM])[2];
             this.drawPt(xVox, yVox, zVox, this.opts.penValue);
             this.drawPenFillPts.push([xVox, yVox, pt[2]]);
             if (i2 === steps) {
@@ -30440,9 +30600,21 @@ var Niivue = class _Niivue {
     const labels = [...this.document.labels, ...definedMeshLabels];
     return labels;
   }
+  getConnectomeLabels() {
+    const connectomes = this.meshes.filter((m) => m.type === "connectome" /* CONNECTOME */);
+    const meshNodes = connectomes.flatMap((m) => m.nodes);
+    const meshLabels = meshNodes.map((n) => n.label);
+    const definedMeshLabels = meshLabels.filter((l) => l !== void 0);
+    const nonAnchoredLabels = this.document.labels.filter((l) => l.anchor == null || l.anchor === 0 /* NONE */);
+    const nonAnchoredLabelSet = new Set(definedMeshLabels);
+    for (const label of nonAnchoredLabels) {
+      nonAnchoredLabelSet.add(label);
+    }
+    return Array.from(nonAnchoredLabelSet);
+  }
   getBulletMarginWidth() {
     let bulletMargin = 0;
-    const labels = this.getAllLabels();
+    const labels = this.getConnectomeLabels();
     if (labels.length === 0) {
       return 0;
     }
@@ -30459,7 +30631,7 @@ var Niivue = class _Niivue {
     return bulletMargin;
   }
   getLegendPanelWidth() {
-    const labels = this.getAllLabels();
+    const labels = this.getConnectomeLabels();
     if (!this.opts.showLegend || labels.length === 0) {
       return 0;
     }
@@ -30485,7 +30657,7 @@ var Niivue = class _Niivue {
     return width;
   }
   getLegendPanelHeight() {
-    const labels = this.getAllLabels();
+    const labels = this.getConnectomeLabels();
     let height = 0;
     const scale = 1;
     const verticalMargin = this.opts.textHeight * this.gl.canvas.height * scale;
@@ -30927,7 +31099,7 @@ var Niivue = class _Niivue {
   }
   // not included in public docs
   // show text labels for L/R, A/P, I/S dimensions
-  drawSliceOrientationText(leftTopWidthHeight, axCorSag) {
+  drawSliceOrientationText(leftTopWidthHeight, axCorSag, padLeftTop = [NaN, NaN]) {
     this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
     let topText = "S";
     if (axCorSag === 0 /* AXIAL */) {
@@ -30941,8 +31113,32 @@ var Niivue = 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
   xyMM2xyzMM(axCorSag, sliceFrac) {
@@ -30980,7 +31176,7 @@ var Niivue = class _Niivue {
   }
   // not included in public docs
   // draw 2D tile
-  draw2D(leftTopWidthHeight, axCorSag, customMM = NaN) {
+  draw2DMain(leftTopWidthHeight, axCorSag, customMM = NaN) {
     let frac2mmTexture = this.volumes[0].frac2mm.slice();
     let screen = this.screenFieldOfViewExtendedMM(axCorSag);
     let mesh2ortho = mat46.create();
@@ -31009,7 +31205,9 @@ var Niivue = class _Niivue {
       elevation = isRadiolgical ? -90 : 90;
     }
     const gl = this.gl;
+    let isStretchToScreen = false;
     if (leftTopWidthHeight[2] === 0 || leftTopWidthHeight[3] === 0) {
+      isStretchToScreen = true;
       const pixPerMMw = gl.canvas.width / screen.fovMM[0];
       const pixPerMMh = gl.canvas.height / screen.fovMM[1];
       const pixPerMMmin = Math.min(pixPerMMw, pixPerMMh);
@@ -31156,9 +31354,32 @@ var Niivue = class _Niivue {
     if (isNaN(customMM)) {
       this.drawCrosshairs3D(false, 0.15, obj.modelViewProjectionMatrix, true, this.opts.isSliceMM);
     }
-    this.drawSliceOrientationText(leftTopWidthHeight, axCorSag);
+    if (isStretchToScreen) {
+      this.drawSliceOrientationText(leftTopWidthHeight, axCorSag);
+    }
     this.readyForSync = true;
   }
+  draw2D(leftTopWidthHeight, axCorSag, customMM = NaN, imageWidthHeight = [NaN, NaN]) {
+    const padLeftTop = [NaN, NaN];
+    if (isNaN(imageWidthHeight[0])) {
+      this.draw2DMain(leftTopWidthHeight, axCorSag, customMM);
+    } else {
+      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 === 4 /* RENDER */) {
+      return;
+    }
+    if (leftTopWidthHeight[2] !== 0 && leftTopWidthHeight[3] !== 0) {
+      this.drawSliceOrientationText(leftTopWidthHeight, axCorSag, padLeftTop);
+    }
+  }
   // not included in public docs
   // determine 3D model view projection matrix
   calculateMvpMatrix(_unused, leftTopWidthHeight = [0, 0, 0, 0], azimuth, elevation) {
@@ -31769,7 +31990,7 @@ var Niivue = class _Niivue {
    * @param style - label style
    * @param point - 3D point on the model
    */
-  addLabel(text, style, points) {
+  addLabel(text, style, points, anchor, onClick) {
     const defaultStyle = {
       textColor: this.opts.legendTextColor,
       textScale: 1,
@@ -31781,7 +32002,7 @@ var Niivue = 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;
   }
@@ -31799,6 +32020,60 @@ var Niivue = class _Niivue {
     return screenPoint;
   }
   getLabelAtPoint(screenPoint) {
+    const scale = 1;
+    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;
+    for (const label of this.document.labels) {
+      if (label.anchor == null || label.anchor === 0 /* 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 & 1 /* LEFT */) {
+        if (screenPoint[0] > textWidth) {
+          continue;
+        }
+      }
+      if (label.anchor & 2 /* CENTER */) {
+        if (screenPoint[0] < (this.gl.canvas.width - textWidth) / 2) {
+          continue;
+        }
+        if (screenPoint[0] > (this.gl.canvas.width + textWidth) / 2) {
+          continue;
+        }
+      }
+      if (label.anchor & 4 /* RIGHT */) {
+        if (screenPoint[0] < this.gl.canvas.width - textWidth) {
+          continue;
+        }
+      }
+      if (label.anchor & 8 /* TOP */) {
+        if (screenPoint[1] < verticalMargin / 2) {
+          continue;
+        }
+        if (screenPoint[1] > textHeight + verticalMargin / 2) {
+          continue;
+        }
+      }
+      if (label.anchor & 16 /* 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 & 32 /* BOTTOM */) {
+        if (screenPoint[1] < this.gl.canvas.height - textHeight - verticalMargin) {
+          continue;
+        }
+        if (screenPoint[1] > this.gl.canvas.height - verticalMargin / 2) {
+          continue;
+        }
+      }
+      return label;
+    }
     log.debug("screenPoint", screenPoint);
     const panelHeight = this.getLegendPanelHeight();
     const panelWidth = this.getLegendPanelWidth();
@@ -31808,9 +32083,7 @@ var Niivue = class _Niivue {
     if (screenPoint[0] < left || screenPoint[1] < top || screenPoint[0] > left + panelWidth || screenPoint[1] > top + panelHeight) {
       return null;
     }
-    const scale = 1;
-    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);
@@ -31839,7 +32112,7 @@ var Niivue = class _Niivue {
     }
   }
   // not included in public docs
-  draw3DLabel(label, pos, mvpMatrix, leftTopWidthHeight, bulletMargin = 0, legendWidth, secondPass = false) {
+  draw3DLabel(label, pos, mvpMatrix, leftTopWidthHeight, bulletMargin, legendWidth, secondPass) {
     const text = label.text;
     const left = pos[0];
     const top = pos[1];
@@ -31856,22 +32129,24 @@ var Niivue = class _Niivue {
       this.drawCircle([rectLeft, rectTop, bulletSize, bulletSize], label.style.bulletColor);
     }
     let textLeft = left;
-    if (label.style.textAlignment !== "left" /* LEFT */) {
-      const textWidth = this.textWidth(label.style.textScale, label.text) * size;
-      if (label.style.textAlignment === "right" /* RIGHT */) {
-        textLeft = left + legendWidth - size * 1.5 - textWidth;
+    if (legendWidth) {
+      if (label.style.textAlignment !== "left" /* LEFT */) {
+        const textWidth = this.textWidth(label.style.textScale, label.text) * size;
+        if (label.style.textAlignment === "right" /* 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 += bulletMargin;
       }
-    } else {
-      textLeft += bulletMargin;
     }
     this.drawText([textLeft, top], text, label.style.textScale, label.style.textColor);
   }
   // not included in public docs
   draw3DLabels(mvpMatrix, leftTopWidthHeight, secondPass = false) {
-    const labels = this.getAllLabels();
+    const labels = this.getConnectomeLabels();
     if (!this.opts.showLegend || labels.length === 0) {
       return;
     }
@@ -31909,6 +32184,51 @@ var Niivue = class _Niivue {
       }
     }
   }
+  drawAnchoredLabels() {
+    const size = this.opts.textHeight * Math.min(this.gl.canvas.height, this.gl.canvas.width) * 1;
+    const anchoredLabels = this.document.labels.filter((l) => l.anchor != null && l.anchor !== 0 /* 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;
+      let top;
+      const scale = 1;
+      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 & 1 /* LEFT */) {
+        left = 0;
+      }
+      if (label.anchor & 4 /* RIGHT */) {
+        left = this.canvas.width - textWidth;
+        rectHorizontalOffset -= verticalMargin / 4;
+      }
+      if (label.anchor & 2 /* CENTER */) {
+        left = (this.canvas.width - textWidth) / 2;
+        rectHorizontalOffset -= verticalMargin / 4;
+        rectWidthDiff += verticalMargin / 4;
+      }
+      if (label.anchor & 8 /* TOP */) {
+        top = 0;
+      }
+      if (label.anchor & 16 /* MIDDLE */) {
+        top = (this.canvas.height - textHeight - verticalMargin) / 2;
+        rectVerticalOffset -= verticalMargin / 4;
+      }
+      if (label.anchor & 32 /* 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], mvpMatrix = null, modelMatrix = null, normalMatrix = null, azimuth = null, elevation = 0) {
     const isMosaic = azimuth !== null;
@@ -32784,6 +33104,12 @@ var Niivue = 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");
         }
@@ -32821,38 +33147,43 @@ var Niivue = class _Niivue {
             isDrawGrid = true;
           }
         }
+        let ltwh = ltwh2x2;
         if (isDrawColumn) {
-          let ltwh = ltwh1x3;
+          ltwh = ltwh1x3;
           if (isShowRender || this.opts.multiplanarShowRender === 2 /* 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];
-          this.draw2D([ltwh[0], ltwh[1], sX, sY], 0);
-          this.draw2D([ltwh[0], ltwh[1] + sY + pad, sX, sZ], 1);
-          this.draw2D([ltwh[0], ltwh[1] + sY + pad + sZ + pad, sY, sZ], 2);
-          if (isDraw3D) {
-            this.draw3D([ltwh[0], ltwh[1] + sY + sZ + sZ + pad * 3, sMx, sMx]);
-          }
         } else if (isDrawRow) {
-          let ltwh = ltwh3x1;
+          ltwh = ltwh3x1;
           if (isShowRender || this.opts.multiplanarShowRender === 2 /* 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];
-          this.draw2D([ltwh[0], ltwh[1], sX, sY], 0);
-          this.draw2D([ltwh[0] + sX + pad, ltwh[1], sX, sZ], 1);
-          this.draw2D([ltwh[0] + sX + sX + pad * 2, ltwh[1], sY, sZ], 2);
+        }
+        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) {
+          this.draw2D([ltwh[0], ltwh[1], sX, sY], 0, NaN, [actualX, actualY]);
+          this.draw2D([ltwh[0], ltwh[1] + sY + pad, sX, sZ], 1, NaN, [actualX, actualZ]);
+          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) {
+          this.draw2D([ltwh[0], ltwh[1], sX, sY], 0, NaN, [actualX, actualY]);
+          this.draw2D([ltwh[0] + sX + pad, ltwh[1], sX, sZ], 1, NaN, [actualX, actualZ]);
+          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) {
           if (!isShowRender) {
@@ -32861,13 +33192,9 @@ var Niivue = class _Niivue {
           if (this.opts.multiplanarShowRender === 2 /* AUTO */) {
             isDraw3D = true;
           }
-          const ltwh = ltwh2x2;
-          const sX = volScale[0] * ltwh[4];
-          const sY = volScale[1] * ltwh[4];
-          const sZ = volScale[2] * ltwh[4];
-          this.draw2D([ltwh[0], ltwh[1] + sZ + pad, sX, sY], 0);
-          this.draw2D([ltwh[0], ltwh[1], sX, sZ], 1);
-          this.draw2D([ltwh[0] + sX + pad, ltwh[1], sY, sZ], 2);
+          this.draw2D([ltwh[0], ltwh[1] + sZ + pad, sX, sY], 0, NaN, [actualX, actualY]);
+          this.draw2D([ltwh[0], ltwh[1], sX, sZ], 1, NaN, [actualX, actualZ]);
+          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]);
           }
@@ -32932,10 +33259,25 @@ var Niivue = class _Niivue {
         height
       ]);
     }
+    if (this.opts.clickToSegment) {
+      const x = this.mousePos[0];
+      const y = this.mousePos[1];
+      const tileIdx = this.tileIndex(x, y);
+      if (tileIdx > -1) {
+        const fovMM = this.screenSlices[tileIdx].fovMM;
+        const ltwh = this.screenSlices[tileIdx].leftTopWidthHeight;
+        const pixPerMM = ltwh[2] / fovMM[0];
+        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) + "\xD7" + pos[1].toFixed(2) + "\xD7" + pos[2].toFixed(2);
     this.readyForSync = true;
     this.sync();
+    this.drawAnchoredLabels();
     return posString;
   }
   // not included in public docs
@@ -32970,6 +33312,7 @@ export {
   DEFAULT_OPTIONS,
   DRAG_MODE,
   INITIAL_SCENE_DATA,
+  LabelAnchorPoint,
   LabelLineTerminator,
   LabelTextAlignment,
   MULTIPLANAR_TYPE,