@niivue/niivue 0.44.1 → 0.44.2-dev.1

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.44.2-dev.1";
 
 // src/logger.ts
 var _Log = class _Log {
@@ -809,6 +806,46 @@ out vec4 color;
 void main() {
 	color = lineColor;
 }`;
+var fragRectOutlineShader = `#version 300 es
+#line 723
+precision highp int;
+precision highp float;
+
+uniform vec4 lineColor;
+uniform vec4 leftTopWidthHeight;
+uniform float thickness; // line thickness in pixels
+uniform vec2 canvasWidthHeight;
+
+out vec4 color;
+
+void main() {
+    // fragment position in screen coordinates
+    vec2 fragCoord = gl_FragCoord.xy;
+
+    // canvas height
+    float canvasHeight = canvasWidthHeight.y;
+
+    // 'top' and 'bottom' to match gl_FragCoord.y coordinate system
+    float top = canvasHeight - leftTopWidthHeight.y;
+    float bottom = top - leftTopWidthHeight.w;
+
+    // left and right edges
+    float left = leftTopWidthHeight.x;
+    float right = left + leftTopWidthHeight.z;
+
+    bool withinLeft = fragCoord.x >= left && fragCoord.x <= left + thickness;
+    bool withinRight = fragCoord.x <= right && fragCoord.x >= right - thickness;
+    bool withinTop = fragCoord.y <= top && fragCoord.y >= top - thickness;
+    bool withinBottom = fragCoord.y >= bottom && fragCoord.y <= bottom + thickness;
+
+    bool isOutline = withinLeft || withinRight || withinTop || withinBottom;
+
+    if (isOutline) {
+        color = lineColor;
+    } else {
+        discard; 
+    }
+}`;
 var vertColorbarShader = `#version 300 es
 #line 490
 layout(location=0) in vec3 pos;
@@ -1271,11 +1308,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 +1457,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 +12433,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 +12617,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 +12642,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 +12818,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 +18465,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 +20092,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 +20114,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) {
@@ -22177,6 +22290,7 @@ var DRAG_MODE = /* @__PURE__ */ ((DRAG_MODE2) => {
   DRAG_MODE2[DRAG_MODE2["pan"] = 3] = "pan";
   DRAG_MODE2[DRAG_MODE2["slicer3D"] = 4] = "slicer3D";
   DRAG_MODE2[DRAG_MODE2["callbackOnly"] = 5] = "callbackOnly";
+  DRAG_MODE2[DRAG_MODE2["roiSelection"] = 6] = "roiSelection";
   return DRAG_MODE2;
 })(DRAG_MODE || {});
 var DEFAULT_OPTIONS = {
@@ -22211,6 +22325,7 @@ var DEFAULT_OPTIONS = {
   multiplanarPadPixels: 0,
   // @deprecated
   multiplanarForceRender: false,
+  multiplanarEqualSize: false,
   multiplanarShowRender: 2 /* AUTO */,
   // auto is the same behaviour as multiplanarForceRender: false
   isRadiologicalConvention: false,
@@ -22245,12 +22360,30 @@ var DEFAULT_OPTIONS = {
   renderOverlayBlend: 1,
   sliceMosaicString: "",
   centerMosaic: false,
+  penSize: 1,
+  // in voxels, since all drawing is done using bitmap indices
   clickToSegment: false,
-  clickToSegmentRadius: 2,
-  clickToSegmentSteps: 10,
-  clickToSegmentBright: true
+  clickToSegmentRadius: 3,
+  // in mm
+  clickToSegmentBright: true,
+  clickToSegmentAutoIntensity: false,
+  // new option, but keep clickToSegmentBright for backwards compatibility
+  clickToSegmentIntensityMax: NaN,
+  // NaN will use auto threshold (default flood fill behavior from before)
+  clickToSegmentIntensityMin: NaN,
+  // NaN will use auto threshold (default flood fill behavior from before)
+  // 0 will use auto threshold (default flood fill behavior from before)
+  // Take the voxel intensity at the click point and use this percentage +/- to threshold the flood fill operation.
+  // If greater than 0, clickedVoxelIntensity +/- clickedVoxelIntensity * clickToSegmentPercent will be used
+  // for the clickToSegmentIntensityMin and clickToSegmentIntensityMax values.
+  clickToSegmentPercent: 0,
+  clickToSegmentMaxDistanceMM: Number.POSITIVE_INFINITY,
+  // default value is infinity for backwards compatibility with flood fill routine.
+  selectionBoxLineThickness: 4,
+  selectionBoxIsOutline: false
 };
 var INITIAL_SCENE_DATA = {
+  gamma: 1,
   azimuth: 110,
   elevation: 10,
   crosshairPos: vec38.create(),
@@ -22489,6 +22622,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 +22880,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 +22930,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;
   }
 };
 
@@ -23924,7 +24077,7 @@ var defaultSaveImageOptions = {
   isSaveDrawing: false,
   volumeByIndex: 0
 };
-var Niivue = class _Niivue {
+var Niivue = class {
   /**
    * @param options  - options object to set modifiable Niivue properties
    */
@@ -23971,6 +24124,7 @@ var Niivue = class _Niivue {
     __publicField(this, "orientCubeShader");
     __publicField(this, "orientCubeShaderVAO", null);
     __publicField(this, "rectShader");
+    __publicField(this, "rectOutlineShader");
     __publicField(this, "renderShader");
     __publicField(this, "lineShader");
     __publicField(this, "line3DShader");
@@ -24023,7 +24177,20 @@ var Niivue = class _Niivue {
     __publicField(this, "extentsMax");
     // ResizeObserver
     __publicField(this, "resizeObserver", null);
-    __publicField(this, "syncOpts", {});
+    // syncOpts: Record<string, unknown> = {}
+    __publicField(this, "syncOpts", {
+      "3d": false,
+      // legacy option
+      "2d": false,
+      // legacy option
+      zoomPan: false,
+      cal_min: false,
+      cal_max: false,
+      clipPlane: false,
+      gamma: false,
+      sliceType: false,
+      crosshair: false
+    });
     __publicField(this, "readyForSync", false);
     // UI Data
     __publicField(this, "uiData", {
@@ -24101,6 +24268,10 @@ var Niivue = class _Niivue {
         Name: "Hemispheric",
         Frag: fragMeshHemiShader
       },
+      {
+        Name: "Crevice",
+        Frag: fragMeshShaderCrevice
+      },
       {
         Name: "Edge",
         Frag: fragMeshEdgeShader
@@ -24498,6 +24669,9 @@ var Niivue = class _Niivue {
    * @see {@link https://niivue.github.io/niivue/features/sync.mesh.html | live demo usage}
    */
   syncWith(otherNV, syncOpts = { "2d": true, "3d": true }) {
+    if (!(otherNV instanceof Array)) {
+      otherNV = [otherNV];
+    }
     this.otherNV = otherNV;
     this.syncOpts = { ...syncOpts };
   }
@@ -24513,9 +24687,55 @@ var Niivue = class _Niivue {
    * @see {@link https://niivue.github.io/niivue/features/sync.mesh.html | live demo usage}
    */
   broadcastTo(otherNV, syncOpts = { "2d": true, "3d": true }) {
+    if (!(otherNV instanceof Array)) {
+      otherNV = [otherNV];
+    }
     this.otherNV = otherNV;
     this.syncOpts = syncOpts;
   }
+  doSync3d(otherNV) {
+    otherNV.scene.renderAzimuth = this.scene.renderAzimuth;
+    otherNV.scene.renderElevation = this.scene.renderElevation;
+    otherNV.scene.volScaleMultiplier = this.scene.volScaleMultiplier;
+  }
+  // both crosshair and zoomPan
+  doSync2d(otherNV) {
+    const thisMM = this.frac2mm(this.scene.crosshairPos);
+    otherNV.scene.crosshairPos = otherNV.mm2frac(thisMM);
+    otherNV.scene.pan2Dxyzmm = vec48.clone(this.scene.pan2Dxyzmm);
+  }
+  doSyncGamma(otherNV) {
+    const thisGamma = this.scene.gamma;
+    const otherGamma = otherNV.scene.gamma;
+    if (thisGamma !== otherGamma) {
+      otherNV.setGamma(thisGamma);
+    }
+  }
+  doSyncZoomPan(otherNV) {
+    otherNV.scene.pan2Dxyzmm = vec48.clone(this.scene.pan2Dxyzmm);
+  }
+  doSyncCrosshair(otherNV) {
+    const thisMM = this.frac2mm(this.scene.crosshairPos);
+    otherNV.scene.crosshairPos = otherNV.mm2frac(thisMM);
+  }
+  doSyncCalMin(otherNV) {
+    if (this.volumes[0].cal_min !== otherNV.volumes[0].cal_min) {
+      otherNV.volumes[0].cal_min = this.volumes[0].cal_min;
+      otherNV.updateGLVolume();
+    }
+  }
+  doSyncCalMax(otherNV) {
+    if (this.volumes[0].cal_max !== otherNV.volumes[0].cal_max) {
+      otherNV.volumes[0].cal_max = this.volumes[0].cal_max;
+      otherNV.updateGLVolume();
+    }
+  }
+  doSyncSliceType(otherNV) {
+    otherNV.setSliceType(this.opts.sliceType);
+  }
+  doSyncClipPlane(otherNV) {
+    otherNV.setClipPlane(this.scene.clipPlaneDepthAziElev);
+  }
   /**
    * Sync the scene controls (orientation, crosshair location, etc.) from one Niivue instance to another. useful for using one canvas to drive another.
    * @internal
@@ -24532,36 +24752,39 @@ var Niivue = class _Niivue {
     if (!this.gl.canvas.matches(":focus")) {
       return;
     }
-    const thisMM = this.frac2mm(this.scene.crosshairPos);
-    if (this.otherNV instanceof _Niivue) {
+    for (let i = 0; i < this.otherNV.length; i++) {
+      if (this.otherNV[i] === this) {
+        continue;
+      }
+      if (this.syncOpts.gamma) {
+        this.doSyncGamma(this.otherNV[i]);
+      }
+      if (this.syncOpts.crosshair) {
+        this.doSyncCrosshair(this.otherNV[i]);
+      }
+      if (this.syncOpts.zoomPan) {
+        this.doSyncZoomPan(this.otherNV[i]);
+      }
+      if (this.syncOpts.sliceType) {
+        this.doSyncSliceType(this.otherNV[i]);
+      }
+      if (this.syncOpts.cal_min) {
+        this.doSyncCalMin(this.otherNV[i]);
+      }
+      if (this.syncOpts.cal_max) {
+        this.doSyncCalMax(this.otherNV[i]);
+      }
+      if (this.syncOpts.clipPlane) {
+        this.doSyncClipPlane(this.otherNV[i]);
+      }
       if (this.syncOpts["2d"]) {
-        this.otherNV.scene.crosshairPos = this.otherNV.mm2frac(thisMM);
-        this.otherNV.scene.pan2Dxyzmm = vec48.clone(this.scene.pan2Dxyzmm);
+        this.doSync2d(this.otherNV[i]);
       }
       if (this.syncOpts["3d"]) {
-        this.otherNV.scene.renderAzimuth = this.scene.renderAzimuth;
-        this.otherNV.scene.renderElevation = this.scene.renderElevation;
-        this.otherNV.scene.volScaleMultiplier = this.scene.volScaleMultiplier;
-      }
-      this.otherNV.drawScene();
-      this.otherNV.createOnLocationChange();
-    } else if (Array.isArray(this.otherNV)) {
-      for (let i = 0; i < this.otherNV.length; i++) {
-        if (this.otherNV[i] === this) {
-          continue;
-        }
-        if (this.syncOpts["2d"]) {
-          this.otherNV[i].scene.crosshairPos = this.otherNV[i].mm2frac(thisMM);
-          this.otherNV[i].scene.pan2Dxyzmm = vec48.clone(this.scene.pan2Dxyzmm);
-        }
-        if (this.syncOpts["3d"]) {
-          this.otherNV[i].scene.renderAzimuth = this.scene.renderAzimuth;
-          this.otherNV[i].scene.renderElevation = this.scene.renderElevation;
-          this.otherNV[i].scene.volScaleMultiplier = this.scene.volScaleMultiplier;
-        }
-        this.otherNV[i].drawScene();
-        this.otherNV[i].createOnLocationChange();
+        this.doSync3d(this.otherNV[i]);
       }
+      this.otherNV[i].drawScene();
+      this.otherNV[i].createOnLocationChange();
     }
   }
   /** Not documented publicly for now
@@ -24665,6 +24888,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;
@@ -24874,6 +25101,9 @@ var Niivue = class _Niivue {
       const fracStart = this.canvasPos2frac([this.uiData.dragStart[0], this.uiData.dragStart[1]]);
       const fracEnd = this.canvasPos2frac([this.uiData.dragEnd[0], this.uiData.dragEnd[1]]);
       this.generateMouseUpCallback(fracStart, fracEnd);
+      if (this.opts.dragMode === 6 /* roiSelection */) {
+        return;
+      }
       if (this.opts.dragMode !== 1 /* contrast */) {
         return;
       }
@@ -24979,6 +25209,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
@@ -25503,7 +25742,6 @@ var Niivue = class _Niivue {
                     this.loadDrawing(volume);
                   } else {
                     this.addVolume(volume);
-                    this.setDrawingEnabled(true);
                   }
                 }).catch((e2) => {
                   throw e2;
@@ -27437,6 +27675,23 @@ var Niivue = class _Niivue {
     y = Math.min(Math.max(y, 0), dy - 1);
     z = Math.min(Math.max(z, 0), dz - 1);
     this.drawBitmap[x + y * dx + z * dx * dy] = penValue;
+    const isAx = this.drawPenAxCorSag === 0;
+    const isCor = this.drawPenAxCorSag === 1;
+    const isSag = this.drawPenAxCorSag === 2;
+    if (this.opts.penSize > 1) {
+      const halfPenSize = Math.floor(this.opts.penSize / 2);
+      for (let i = -halfPenSize; i <= halfPenSize; i++) {
+        for (let j = -halfPenSize; j <= halfPenSize; j++) {
+          if (isAx) {
+            this.drawBitmap[x + i + (y + j) * dx + z * dx * dy] = penValue;
+          } else if (isCor) {
+            this.drawBitmap[x + i + y * dx + (z + j) * dx * dy] = penValue;
+          } else if (isSag) {
+            this.drawBitmap[x + (y + j) * dx + (z + i) * dx * dy] = penValue;
+          }
+        }
+      }
+    }
   }
   // not included in public docs
   // create line between to voxels in drawing
@@ -27518,6 +27773,98 @@ var Niivue = class _Niivue {
       }
     }
   }
+  /**
+   * Performs a 1-voxel binary dilation on a connected cluster within the drawing mask using the drawFloodFillCore function.
+   *
+   * @param seedXYZ -  voxel index of the seed voxel in the mask array.
+   * @param neighbors - Number of neighbors to consider for connectivity and dilation (6, 18, or 26).
+   */
+  drawingBinaryDilationWithSeed(seedXYZ, neighbors = 6) {
+    try {
+      let xyz2vx = function(pt) {
+        return pt[0] + pt[1] * nx + pt[2] * nxy;
+      };
+      const mask = this.drawBitmap;
+      const xDim = this.back.dims[1];
+      const yDim = this.back.dims[2];
+      const zDim = this.back.dims[3];
+      const nx = xDim;
+      const nxy = xDim * yDim;
+      const totalVoxels = nxy * zDim;
+      const seedIndex = xyz2vx(seedXYZ);
+      if (seedIndex < 0 || seedIndex >= totalVoxels) {
+        throw new Error("Seed index is out of bounds.");
+      }
+      const seedValue = mask[seedIndex];
+      if (seedValue === 0) {
+        throw new Error("Seed voxel is not part of a filled cluster.");
+      }
+      const img = mask.slice();
+      for (let i = 0; i < totalVoxels; i++) {
+        img[i] = img[i] === seedValue ? 1 : 0;
+      }
+      this.drawFloodFillCore(img, seedIndex, neighbors);
+      const outputMask = mask.slice();
+      const neighborOffsets = [];
+      const offsets6 = [-nxy, nxy, -xDim, xDim, -1, 1];
+      neighborOffsets.push(...offsets6);
+      if (neighbors > 6) {
+        neighborOffsets.push(
+          -xDim - 1,
+          -xDim + 1,
+          xDim - 1,
+          xDim + 1,
+          -nxy - xDim,
+          -nxy + xDim,
+          -nxy - 1,
+          -nxy + 1,
+          nxy - xDim,
+          nxy + xDim,
+          nxy - 1,
+          nxy + 1
+        );
+      }
+      if (neighbors > 18) {
+        neighborOffsets.push(
+          -nxy - xDim - 1,
+          -nxy - xDim + 1,
+          -nxy + xDim - 1,
+          -nxy + xDim + 1,
+          nxy - xDim - 1,
+          nxy - xDim + 1,
+          nxy + xDim - 1,
+          nxy + xDim + 1
+        );
+      }
+      for (let idx = 0; idx < totalVoxels; idx++) {
+        if (img[idx] === 2) {
+          const x = idx % xDim;
+          const y = Math.floor(idx % nxy / xDim);
+          const z = Math.floor(idx / nxy);
+          for (const offset of neighborOffsets) {
+            const neighborIdx = idx + offset;
+            if (neighborIdx < 0 || neighborIdx >= totalVoxels) {
+              continue;
+            }
+            const nx2 = neighborIdx % xDim;
+            const ny = Math.floor(neighborIdx % nxy / xDim);
+            const nz = Math.floor(neighborIdx / nxy);
+            if (Math.abs(nx2 - x) > 1 || Math.abs(ny - y) > 1 || Math.abs(nz - z) > 1) {
+              continue;
+            }
+            if (mask[neighborIdx] === 0) {
+              outputMask[neighborIdx] = seedValue;
+            }
+          }
+        }
+      }
+      this.drawBitmap = outputMask;
+      this.drawAddUndoBitmap();
+      this.refreshDrawing(true);
+    } catch (error) {
+      log.error("Error in drawingBinaryDilationWithSeed:", error);
+    }
+  }
   // a voxel can be defined as having 6, 18 or 26 neighbors:
   //   6: neighbors share faces (distance=1)
   //  18: neighbors share faces (distance=1) or edges (1.4)
@@ -27599,7 +27946,7 @@ var Niivue = class _Niivue {
   }
   // not included in public docs
   // set all connected voxels in drawing to new color
-  drawFloodFill(seedXYZ, newColor = 0, growSelectedCluster = 0, forceMin = NaN, forceMax = NaN, neighbors = 6) {
+  drawFloodFill(seedXYZ, newColor = 0, growSelectedCluster = 0, forceMin = NaN, forceMax = NaN, neighbors = 6, maxDistanceMM = Number.POSITIVE_INFINITY) {
     if (!this.drawBitmap) {
       throw new Error("drawBitmap undefined");
     }
@@ -27621,9 +27968,25 @@ var Niivue = class _Niivue {
     if (img.length !== nxy * dims[2]) {
       return;
     }
+    function vx2xyz(vx) {
+      const Z = Math.floor(vx / nxy);
+      const Y = Math.floor((vx - Z * nxy) / nx);
+      const X = Math.floor(vx % nx);
+      return [X, Y, Z];
+    }
     function xyz2vx(pt) {
       return pt[0] + pt[1] * nx + pt[2] * nxy;
     }
+    const vx2mm = (xyz) => {
+      return this.vox2mm(xyz, this.back.matRAS);
+    };
+    const seedMM = vx2mm(seedXYZ);
+    const maxDistanceMM2 = maxDistanceMM ** 2;
+    function isWithinDistance(vx) {
+      const xyzMM = vx2mm(vx2xyz(vx));
+      const dist2 = (xyzMM[0] - seedMM[0]) ** 2 + (xyzMM[1] - seedMM[1]) ** 2 + (xyzMM[2] - seedMM[2]) ** 2;
+      return dist2 <= maxDistanceMM2;
+    }
     const seedVx = xyz2vx(seedXYZ);
     const seedColor = img[seedVx];
     if (seedColor === newColor) {
@@ -27637,6 +28000,9 @@ var Niivue = class _Niivue {
     for (let i = 1; i < nxyz; i++) {
       img[i] = 0;
       if (this.drawBitmap[i] === seedColor) {
+        if (!isWithinDistance(i)) {
+          continue;
+        }
         img[i] = 1;
       }
     }
@@ -27666,6 +28032,9 @@ var Niivue = class _Niivue {
       for (let i = 1; i < nxyz; i++) {
         img[i] = 0;
         if (backImg[i] >= mn && backImg[i] <= mx) {
+          if (!isWithinDistance(i)) {
+            continue;
+          }
           img[i] = 1;
         }
       }
@@ -28287,6 +28656,8 @@ var Niivue = class _Niivue {
     gl.bindVertexArray(this.unusedVAO);
     this.rectShader = new Shader(gl, vertRectShader, fragRectShader);
     this.rectShader.use(gl);
+    this.rectOutlineShader = new Shader(gl, vertRectShader, fragRectOutlineShader);
+    this.rectOutlineShader.use(gl);
     this.lineShader = new Shader(gl, vertLineShader, fragRectShader);
     this.lineShader.use(gl);
     this.line3DShader = new Shader(gl, vertLine3DShader, fragRectShader);
@@ -28439,14 +28810,37 @@ var Niivue = class _Niivue {
   }
   /**
    * basic statistics for selected voxel-based image
-   * @param layer - selects image to describe
-   * @param masks - are optional binary images to filter voxles
-   * @returns numeric values to describe image
-   * @example niivue.getDescriptives(0);
+   * @param options - an object containing the following properties:
+   *   - layer: selects image to describe
+   *   - masks: optional binary images to filter voxels
+   *   - drawingIsMask: a boolean indicating if the drawing is used as a mask
+   *   - roiIsMask: a boolean indicating if the ROI is used as a mask
+   *   - startVox: the starting voxel coordinates
+   *   - endVox: the ending voxel coordinates
+   * @returns numeric values to describe image or regions of images
+   * @example
+   * niivue.getDescriptives({
+   *   layer: 0,
+   *   masks: [],
+   *   drawingIsMask: true, // drawingIsMask and roiIsMask are mutually exclusive
+   *   roiIsMask: false,
+   *   startVox: [10, 20, 30], // ignored if roiIsMask is false
+   *   endVox: [40, 50, 60] // ignored if roiIsMask is false
+   * });
    * @see {@link https://niivue.github.io/niivue/features/draw2.html | live demo usage}
    */
-  getDescriptives(layer = 0, masks = [], drawingIsMask = false) {
+  getDescriptives(options) {
+    const {
+      layer = 0,
+      masks = [],
+      drawingIsMask = false,
+      roiIsMask = false,
+      startVox = [0, 0, 0],
+      endVox = [0, 0, 0]
+    } = options;
+    let area = null;
     const hdr = this.volumes[layer].hdr;
+    const pixDimsRAS = this.volumes[layer].pixDimsRAS;
     let slope = hdr.scl_slope;
     if (isNaN(slope)) {
       slope = 1;
@@ -28484,6 +28878,37 @@ var Niivue = class _Niivue {
           mask[i] = 0;
         }
       }
+    } else if (masks.length < 1 && roiIsMask) {
+      mask.fill(0);
+      console.log("startVox", startVox);
+      console.log("endVox", endVox);
+      const xrange = this.calculateMinMaxVoxIdx([startVox[0], endVox[0]]);
+      const yrange = this.calculateMinMaxVoxIdx([startVox[1], endVox[1]]);
+      const zrange = this.calculateMinMaxVoxIdx([startVox[2], endVox[2]]);
+      if (startVox[0] - endVox[0] === 0) {
+        xrange[1] = startVox[0] + 1;
+      } else if (startVox[1] - endVox[1] === 0) {
+        yrange[1] = startVox[1] + 1;
+      } else if (startVox[2] - endVox[2] === 0) {
+        zrange[1] = startVox[2] + 1;
+      }
+      const xdim = hdr.dims[1];
+      const ydim = hdr.dims[2];
+      for (let z = zrange[0]; z < zrange[1]; z++) {
+        const zi = z * xdim * ydim;
+        for (let y = yrange[0]; y < yrange[1]; y++) {
+          const yi = y * xdim;
+          for (let x = xrange[0]; x < xrange[1]; x++) {
+            const index = zi + yi + x;
+            mask[index] = 1;
+          }
+        }
+      }
+      const xmm = Math.abs(pixDimsRAS[1] * (endVox[0] - startVox[0]));
+      const ymm = Math.abs(pixDimsRAS[2] * (endVox[1] - startVox[1]));
+      const zmm = Math.abs(pixDimsRAS[3] * (endVox[2] - startVox[2]));
+      const mms = [xmm, ymm, zmm];
+      area = mms.filter((m) => m !== 0).reduce((a, b) => a * b, 1);
     }
     let k = 0;
     let M = 0;
@@ -28537,7 +28962,8 @@ var Niivue = class _Niivue {
       cal_min: this.volumes[layer].cal_min,
       cal_max: this.volumes[layer].cal_max,
       robust_min: this.volumes[layer].robust_min,
-      robust_max: this.volumes[layer].robust_max
+      robust_max: this.volumes[layer].robust_max,
+      area
     };
   }
   // not included in public docs
@@ -29728,6 +30154,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();
   }
@@ -30092,27 +30519,50 @@ var Niivue = class _Niivue {
       if (this.opts.drawingEnabled) {
         const pt = this.frac2vox(this.scene.crosshairPos);
         if (this.opts.clickToSegment) {
-          const radius = this.opts.clickToSegmentRadius;
-          const steps = this.opts.clickToSegmentSteps;
+          const voxelIntensity = this.back.getValue(pt[0], pt[1], pt[2]);
+          if (this.opts.clickToSegmentPercent > 0 && this.opts.clickToSegmentPercent <= 1) {
+            this.opts.clickToSegmentIntensityMax = voxelIntensity * (1 + this.opts.clickToSegmentPercent);
+            this.opts.clickToSegmentIntensityMin = voxelIntensity * (1 - this.opts.clickToSegmentPercent);
+          }
+          if (this.opts.clickToSegmentAutoIntensity) {
+            if (voxelIntensity > (this.back.cal_min + this.back.cal_max) * 0.5) {
+              this.opts.clickToSegmentBright = true;
+            } else {
+              this.opts.clickToSegmentBright = false;
+            }
+          }
           const brightOrDark = this.opts.clickToSegmentBright ? Number.POSITIVE_INFINITY : Number.NEGATIVE_INFINITY;
-          this.drawPenFillPts = [];
           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);
-            this.drawPt(xVox, yVox, zVox, this.opts.penValue);
-            this.drawPenFillPts.push([xVox, yVox, pt[2]]);
-            if (i2 === steps) {
-              this.drawFloodFill([xVox, yVox, pt[2]], 0, brightOrDark, NaN, NaN, this.opts.floodFillNeighbors);
-            }
+          if (this.drawPenAxCorSag === 0 /* AXIAL */) {
+            const pixDims = [this.back.pixDimsRAS[0], this.back.pixDimsRAS[1]];
+            const minPixDim = Math.min(...pixDims);
+            this.opts.penSize = Math.ceil(this.opts.clickToSegmentRadius / minPixDim);
+          } else if (this.drawPenAxCorSag === 1 /* CORONAL */) {
+            const pixDims = [this.back.pixDimsRAS[0], this.back.pixDimsRAS[2]];
+            const minPixDim = Math.min(...pixDims);
+            this.opts.penSize = Math.ceil(this.opts.clickToSegmentRadius / minPixDim);
+          } else if (this.drawPenAxCorSag === 2 /* SAGITTAL */) {
+            const pixDims = [this.back.pixDimsRAS[1], this.back.pixDimsRAS[2]];
+            const minPixDim = Math.min(...pixDims);
+            this.opts.penSize = Math.ceil(this.opts.clickToSegmentRadius / minPixDim);
           }
+          this.drawPt(pt[0], pt[1], pt[2], this.opts.penValue);
+          this.drawFloodFill(
+            [pt[0], pt[1], pt[2]],
+            0,
+            brightOrDark,
+            this.opts.clickToSegmentIntensityMin,
+            this.opts.clickToSegmentIntensityMax,
+            this.opts.floodFillNeighbors,
+            this.opts.clickToSegmentMaxDistanceMM
+          );
           this.drawScene();
           this.createOnLocationChange(axCorSag);
-          const info = this.getDescriptives(0, [], true);
+          const info = this.getDescriptives({
+            layer: 0,
+            masks: [],
+            drawingIsMask: true
+          });
           this.onClickToSegment({ mL: info.volumeML, mm3: info.volumeMM3 });
           return;
         }
@@ -30330,20 +30780,41 @@ var Niivue = class _Niivue {
     if (!this.rectShader) {
       throw new Error("rectShader undefined");
     }
-    this.rectShader.use(this.gl);
-    this.gl.enable(this.gl.BLEND);
-    this.gl.uniform4fv(this.rectShader.uniforms.lineColor, lineColor);
-    this.gl.uniform2fv(this.rectShader.uniforms.canvasWidthHeight, [this.gl.canvas.width, this.gl.canvas.height]);
-    this.gl.uniform4f(
-      this.rectShader.uniforms.leftTopWidthHeight,
-      leftTopWidthHeight[0],
-      leftTopWidthHeight[1],
-      leftTopWidthHeight[2],
-      leftTopWidthHeight[3]
-    );
-    this.gl.bindVertexArray(this.genericVAO);
-    this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
-    this.gl.bindVertexArray(this.unusedVAO);
+    if (!this.opts.selectionBoxIsOutline) {
+      this.rectShader.use(this.gl);
+      this.gl.enable(this.gl.BLEND);
+      this.gl.uniform4fv(this.rectShader.uniforms.lineColor, lineColor);
+      this.gl.uniform2fv(this.rectShader.uniforms.canvasWidthHeight, [this.gl.canvas.width, this.gl.canvas.height]);
+      this.gl.uniform4f(
+        this.rectShader.uniforms.leftTopWidthHeight,
+        leftTopWidthHeight[0],
+        leftTopWidthHeight[1],
+        leftTopWidthHeight[2],
+        leftTopWidthHeight[3]
+      );
+      this.gl.bindVertexArray(this.genericVAO);
+      this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+      this.gl.bindVertexArray(this.unusedVAO);
+    } else {
+      this.rectOutlineShader.use(this.gl);
+      this.gl.enable(this.gl.BLEND);
+      this.gl.uniform1f(this.rectOutlineShader.uniforms.thickness, this.opts.selectionBoxLineThickness);
+      this.gl.uniform4fv(this.rectOutlineShader.uniforms.lineColor, lineColor);
+      this.gl.uniform2fv(this.rectOutlineShader.uniforms.canvasWidthHeight, [
+        this.gl.canvas.width,
+        this.gl.canvas.height
+      ]);
+      this.gl.uniform4f(
+        this.rectOutlineShader.uniforms.leftTopWidthHeight,
+        leftTopWidthHeight[0],
+        leftTopWidthHeight[1],
+        leftTopWidthHeight[2],
+        leftTopWidthHeight[3]
+      );
+      this.gl.bindVertexArray(this.genericVAO);
+      this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+      this.gl.bindVertexArray(this.unusedVAO);
+    }
   }
   drawCircle(leftTopWidthHeight, circleColor = this.opts.fontColor, fillPercent = 1) {
     if (!this.circleShader) {
@@ -30387,9 +30858,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 +30889,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 +30915,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 +31357,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 +31371,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 +31434,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 +31463,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 +31612,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 +32248,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 +32260,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 +32278,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 +32341,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 +32370,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 +32387,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 +32442,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 +33362,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 +33405,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) {
-            this.draw3D([ltwh[0] + sX + sX + sY + pad * 3, ltwh[1], ltwh[3], ltwh[3]]);
+            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) {
+            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 +33450,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]);
           }
@@ -32878,11 +33516,30 @@ var Niivue = class _Niivue {
         width,
         height
       ]);
+      return;
+    }
+    if (this.opts.clickToSegment) {
+      const x = this.mousePos[0];
+      const y = this.mousePos[1];
+      if (this.inRenderTile(x, y) >= 0) {
+        return;
+      }
+      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 +33574,7 @@ export {
   DEFAULT_OPTIONS,
   DRAG_MODE,
   INITIAL_SCENE_DATA,
+  LabelAnchorPoint,
   LabelLineTerminator,
   LabelTextAlignment,
   MULTIPLANAR_TYPE,