@niivue/niivue 0.44.1 → 0.44.2-dev.2

package/build/index.js

@@ -4,16 +4,13 @@ var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/niivue/index.ts
 import { mat4 as mat46, vec2, vec3 as vec311, vec4 as vec48 } from "gl-matrix";
 
 // package.json
-var version = "0.44.1";
+var version = "0.45.1";
 
 // src/logger.ts
 var _Log = class _Log {
@@ -1271,11 +1268,11 @@ uniform mat4 mvpMtx;
 uniform mat4 normMtx;
 out vec4 vClr;
 out vec3 vN;
-out vec4 vP;
+out vec4 vPc;
 void main(void) {
 	vec3 lightPosition = vec3(0.0, 0.0, -10.0);
-	vP = vec4(pos, 1.0);
-	gl_Position = mvpMtx * vP;
+	vPc = mvpMtx * vec4(pos, 1.0);
+	gl_Position = vPc;
 	vN = normalize((normMtx * vec4(norm.xyz,1.0)).xyz);
 	//vV = -vec3(modelMtx*vec4(pos,1.0));
 	vClr = clr;
@@ -1420,6 +1417,45 @@ void main() {
 	s *= specularWhite;
 	color = vec4(d3 + s3 + s, opacity);
 }`;
+var fragMeshShaderCrevice = `#version 300 es
+precision highp int;
+precision highp float;
+uniform float opacity;
+in vec4 vClr;
+in vec3 vN;
+in vec4 vPc;
+out vec4 color;
+void main() {
+	vec3 n = normalize(vN);
+	// Compute curvature
+	vec3 dx = dFdx(n);
+	vec3 dy = dFdy(n);
+	vec3 xneg = n - dx;
+	vec3 xpos = n + dx;
+	vec3 yneg = n - dy;
+	vec3 ypos = n + dy;
+	float depth = length(vPc.xyz);
+	float curv = (cross(xneg, xpos).y - cross(yneg, ypos).x) / depth;
+	//at this stage 0.5 for flat, with valleys dark and ridges bright
+	curv = 1.0 - (curv + 0.5);
+	//clamp
+	curv =  min(max(curv, 0.0), 1.0);
+	// easing function
+	curv = pow(curv, 0.5);
+	//modulate ambient and diffuse with curvature
+	vec3 r = vec3(0.0, 0.0, 1.0); //rayDir: for orthographic projections moving in Z direction (no need for normal matrix)
+	float ambient = 0.6;
+	float diffuse = 0.6;
+	float specular = 0.2;
+	float shininess = 10.0;
+	vec3 lightPosition = vec3(0.0, 10.0, -2.0);
+	vec3 l = normalize(lightPosition);
+	float lightNormDot = dot(n, l);
+	vec3 a = vClr.rgb * ambient * curv;
+	vec3 d = max(lightNormDot, 0.0) * vClr.rgb * diffuse;
+	float s = specular * pow(max(dot(reflect(l, n), r), 0.0), shininess);
+	color = vec4(a + d + s, opacity);
+}`;
 var fragMeshShader = `#version 300 es
 precision highp int;
 precision highp float;
@@ -12357,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")) {
@@ -12535,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") {
@@ -12560,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;
@@ -12733,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
@@ -18369,76 +18425,90 @@ function getBestTransform(imageDirections, voxelDimensions, imagePosition) {
   }
   return m;
 }
-function str2Buffer(str) {
+function str2Buffer(str, maxLen = 80) {
+  str = str.replace(/[`$]/g, "");
   const bytes = [];
-  for (let i = 0; i < str.length; i++) {
+  const len = Math.min(maxLen, str.length);
+  for (let i = 0; i < len; i++) {
     const char = str.charCodeAt(i);
     bytes.push(char & 255);
   }
   return bytes;
 }
-function hdrToArrayBuffer(hdr, isDrawing8 = false) {
+function hdrToArrayBuffer(hdr, isDrawing8 = false, isInputEndian = false) {
   const SHORT_SIZE = 2;
   const FLOAT32_SIZE = 4;
+  let isLittleEndian = true;
+  if (isInputEndian) {
+    isLittleEndian = hdr.littleEndian;
+  }
   const byteArray = new Uint8Array(348);
   const view = new DataView(byteArray.buffer);
-  view.setInt32(0, 348, hdr.littleEndian);
+  view.setInt32(0, 348, isLittleEndian);
+  view.setUint8(38, 114);
   view.setUint8(39, hdr.dim_info);
   for (let i = 0; i < 8; i++) {
-    view.setUint16(40 + SHORT_SIZE * i, hdr.dims[i], hdr.littleEndian);
+    view.setUint16(40 + SHORT_SIZE * i, hdr.dims[i], isLittleEndian);
   }
-  view.setFloat32(56, hdr.intent_p1, hdr.littleEndian);
-  view.setFloat32(60, hdr.intent_p2, hdr.littleEndian);
-  view.setFloat32(64, hdr.intent_p3, hdr.littleEndian);
-  view.setInt16(68, hdr.intent_code, hdr.littleEndian);
+  view.setFloat32(56, hdr.intent_p1, isLittleEndian);
+  view.setFloat32(60, hdr.intent_p2, isLittleEndian);
+  view.setFloat32(64, hdr.intent_p3, isLittleEndian);
+  view.setInt16(68, hdr.intent_code, isLittleEndian);
   if (isDrawing8) {
-    view.setInt16(70, 2, hdr.littleEndian);
-    view.setInt16(72, 8, hdr.littleEndian);
+    view.setInt16(70, 2, isLittleEndian);
+    view.setInt16(72, 8, isLittleEndian);
   } else {
-    view.setInt16(70, hdr.datatypeCode, hdr.littleEndian);
-    view.setInt16(72, hdr.numBitsPerVoxel, hdr.littleEndian);
+    view.setInt16(70, hdr.datatypeCode, isLittleEndian);
+    view.setInt16(72, hdr.numBitsPerVoxel, isLittleEndian);
   }
-  view.setInt16(74, hdr.slice_start, hdr.littleEndian);
+  view.setInt16(74, hdr.slice_start, isLittleEndian);
   for (let i = 0; i < 8; i++) {
-    view.setFloat32(76 + FLOAT32_SIZE * i, hdr.pixDims[i], hdr.littleEndian);
+    view.setFloat32(76 + FLOAT32_SIZE * i, hdr.pixDims[i], isLittleEndian);
   }
   if (isDrawing8) {
-    view.setFloat32(108, 352, hdr.littleEndian);
-    view.setFloat32(112, 1, hdr.littleEndian);
-    view.setFloat32(116, 0, hdr.littleEndian);
+    view.setFloat32(108, 352, isLittleEndian);
+    view.setFloat32(112, 1, isLittleEndian);
+    view.setFloat32(116, 0, isLittleEndian);
   } else {
-    view.setFloat32(108, hdr.vox_offset, hdr.littleEndian);
-    view.setFloat32(112, hdr.scl_slope, hdr.littleEndian);
-    view.setFloat32(116, hdr.scl_inter, hdr.littleEndian);
+    view.setFloat32(108, 352, isLittleEndian);
+    view.setFloat32(112, hdr.scl_slope, isLittleEndian);
+    view.setFloat32(116, hdr.scl_inter, isLittleEndian);
   }
-  view.setInt16(120, hdr.slice_end, hdr.littleEndian);
+  view.setInt16(120, hdr.slice_end, isLittleEndian);
   view.setUint8(122, hdr.slice_code);
-  view.setUint8(123, hdr.xyzt_units);
+  if (hdr.xyzt_units === 0) {
+    view.setUint8(123, 10);
+  } else {
+    view.setUint8(123, hdr.xyzt_units);
+  }
   if (isDrawing8) {
-    view.setFloat32(124, 0, hdr.littleEndian);
-    view.setFloat32(128, 0, hdr.littleEndian);
+    view.setFloat32(124, 0, isLittleEndian);
+    view.setFloat32(128, 0, isLittleEndian);
   } else {
-    view.setFloat32(124, hdr.cal_max, hdr.littleEndian);
-    view.setFloat32(128, hdr.cal_min, hdr.littleEndian);
+    view.setFloat32(124, hdr.cal_max, isLittleEndian);
+    view.setFloat32(128, hdr.cal_min, isLittleEndian);
   }
-  view.setFloat32(132, hdr.slice_duration, hdr.littleEndian);
-  view.setFloat32(136, hdr.toffset, hdr.littleEndian);
+  view.setFloat32(132, hdr.slice_duration, isLittleEndian);
+  view.setFloat32(136, hdr.toffset, isLittleEndian);
   byteArray.set(str2Buffer(hdr.description), 148);
   byteArray.set(str2Buffer(hdr.aux_file), 228);
-  view.setInt16(252, hdr.qform_code, hdr.littleEndian);
-  view.setInt16(254, hdr.sform_code, hdr.littleEndian);
-  view.setFloat32(256, hdr.quatern_b, hdr.littleEndian);
-  view.setFloat32(260, hdr.quatern_c, hdr.littleEndian);
-  view.setFloat32(264, hdr.quatern_d, hdr.littleEndian);
-  view.setFloat32(268, hdr.qoffset_x, hdr.littleEndian);
-  view.setFloat32(272, hdr.qoffset_y, hdr.littleEndian);
-  view.setFloat32(276, hdr.qoffset_z, hdr.littleEndian);
+  view.setInt16(252, hdr.qform_code, isLittleEndian);
+  if (hdr.sform_code < 1 || hdr.sform_code < 1) {
+    view.setInt16(254, 1, isLittleEndian);
+  } else {
+    view.setInt16(254, hdr.sform_code, isLittleEndian);
+  }
+  view.setFloat32(256, hdr.quatern_b, isLittleEndian);
+  view.setFloat32(260, hdr.quatern_c, isLittleEndian);
+  view.setFloat32(264, hdr.quatern_d, isLittleEndian);
+  view.setFloat32(268, hdr.qoffset_x, isLittleEndian);
+  view.setFloat32(272, hdr.qoffset_y, isLittleEndian);
+  view.setFloat32(276, hdr.qoffset_z, isLittleEndian);
   const flattened = hdr.affine.flat();
   for (let i = 0; i < 12; i++) {
-    view.setFloat32(280 + FLOAT32_SIZE * i, flattened[i], hdr.littleEndian);
+    view.setFloat32(280 + FLOAT32_SIZE * i, flattened[i], isLittleEndian);
   }
-  byteArray.set(str2Buffer(hdr.intent_name), 328);
-  byteArray.set(str2Buffer(hdr.magic), 344);
+  view.setInt32(344, 3222382, true);
   return byteArray;
 }
 function getExtents(positions, forceOriginInVolume = true) {
@@ -19982,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")) {
@@ -20004,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) {
@@ -22211,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,
@@ -22251,6 +22325,7 @@ var DEFAULT_OPTIONS = {
   clickToSegmentBright: true
 };
 var INITIAL_SCENE_DATA = {
+  gamma: 1,
   azimuth: 110,
   elevation: 10,
   crosshairPos: vec38.create(),
@@ -22489,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];
@@ -22744,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
@@ -22781,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;
   }
 };
 
@@ -23929,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);
@@ -24101,6 +24197,10 @@ var Niivue = class _Niivue {
         Name: "Hemispheric",
         Frag: fragMeshHemiShader
       },
+      {
+        Name: "Crevice",
+        Frag: fragMeshShaderCrevice
+      },
       {
         Name: "Edge",
         Frag: fragMeshEdgeShader
@@ -24534,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);
@@ -24550,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);
@@ -24665,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;
@@ -24979,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
@@ -25216,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();
   }
@@ -25236,6 +25364,28 @@ var Niivue = class _Niivue {
   }
   async addVolumesFromUrl(imageOptionsArray) {
     const promises = imageOptionsArray.map(async (imageItem) => {
+      const ext = this.getFileExt(imageItem.name || 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,
@@ -25375,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();
@@ -25503,7 +25687,6 @@ var Niivue = class _Niivue {
                     this.loadDrawing(volume);
                   } else {
                     this.addVolume(volume);
-                    this.setDrawingEnabled(true);
                   }
                 }).catch((e2) => {
                   throw e2;
@@ -27047,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
@@ -27066,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;
   }
   /**
@@ -27116,7 +27310,29 @@ var Niivue = class _Niivue {
    */
   async addMeshesFromUrl(meshOptions) {
     const promises = meshOptions.map(async (meshItem) => {
-      const ext = this.getFileExt(meshItem.url);
+      const ext = this.getFileExt(meshItem.name || 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();
@@ -27157,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;
@@ -29728,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();
   }
@@ -30091,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;
@@ -30099,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) {
@@ -30387,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;
     }
@@ -30406,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;
     }
@@ -30432,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;
@@ -30874,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 */) {
@@ -30888,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) {
@@ -30927,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();
@@ -30956,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);
@@ -31103,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) {
@@ -31716,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,
@@ -31728,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;
   }
@@ -31746,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();
@@ -31755,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);
@@ -31786,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];
@@ -31803,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;
     }
@@ -31856,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;
@@ -32731,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");
         }
@@ -32768,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) {
@@ -32808,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]);
           }
@@ -32879,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
@@ -32917,6 +33312,7 @@ export {
   DEFAULT_OPTIONS,
   DRAG_MODE,
   INITIAL_SCENE_DATA,
+  LabelAnchorPoint,
   LabelLineTerminator,
   LabelTextAlignment,
   MULTIPLANAR_TYPE,