@niivue/niivue 0.41.0 → 0.41.1

package/build/index.js

@@ -10,11 +10,10 @@ var __publicField = (obj, key, value) => {
 };
 
 // src/niivue/index.ts
-import { Subject } from "rxjs";
 import { mat4 as mat46, vec2, vec3 as vec310, vec4 as vec47 } from "gl-matrix";
 
 // package.json
-var version = "0.41.0";
+var version = "0.41.1";
 
 // src/logger.ts
 var _Log = class _Log {
@@ -745,8 +744,109 @@ out vec4 color;` + kDrawFunc + `void main() {
 	if ((isAlphaClipDark) && (background.a == 0.0)) color.a = 0.0; //FSLeyes clipping range
 	vec4 ocolor = vec4(0.0);
 	float overlayAlpha = overlayAlphaShader;
-	if (overlays > 0.0)
+	if (overlays > 0.0) {
 		ocolor = texture(overlay, texPos);
+		//dFdx for "boxing" issue 435 has aliasing on some implementations (coarse vs fine)
+		//however, this only identifies 50% of the edges due to aliasing effects
+		// http://www.aclockworkberry.com/shader-derivative-functions/
+		// https://bgolus.medium.com/distinctive-derivative-differences-cce38d36797b
+		//if ((ocolor.a >= 1.0) && ((dFdx(ocolor.a) != 0.0) || (dFdy(ocolor.a) != 0.0)  ))
+		//	ocolor.rbg = vec3(0.0, 0.0, 0.0);
+		bool isOutlineBelowNotAboveThreshold = true;
+		if (isOutlineBelowNotAboveThreshold) {
+			if ((overlayOutlineWidth > 0.0) && (ocolor.a < 1.0)) { //check voxel neighbors for edge
+				vec3 vx = (overlayOutlineWidth ) / vec3(textureSize(overlay, 0));
+				//6 voxel neighbors that share a face
+				vec3 vxR = vec3(texPos.x+vx.x, texPos.y, texPos.z);
+				vec3 vxL = vec3(texPos.x-vx.x, texPos.y, texPos.z);
+				vec3 vxA = vec3(texPos.x, texPos.y+vx.y, texPos.z);
+				vec3 vxP = vec3(texPos.x, texPos.y-vx.y, texPos.z);
+				vec3 vxS = vec3(texPos.x, texPos.y, texPos.z+vx.z);
+				vec3 vxI = vec3(texPos.x, texPos.y, texPos.z-vx.z);
+				float a = 0.0;
+				if (axCorSag != 2) {
+					a = max(a, texture(overlay, vxR).a);
+					a = max(a, texture(overlay, vxL).a);
+				}
+				if (axCorSag != 1) {
+					a = max(a, texture(overlay, vxA).a);
+					a = max(a, texture(overlay, vxP).a);
+				}
+				if (axCorSag != 0) {
+					a = max(a, texture(overlay, vxS).a);
+					a = max(a, texture(overlay, vxI).a);
+				}
+				bool isCheckCorners = true;
+				if (isCheckCorners) {
+					//12 voxel neighbors that share an edge
+					vec3 vxRA = vec3(texPos.x+vx.x, texPos.y+vx.y, texPos.z);
+					vec3 vxLA = vec3(texPos.x-vx.x, texPos.y+vx.y, texPos.z);
+					vec3 vxRP = vec3(texPos.x+vx.x, texPos.y-vx.y, texPos.z);
+					vec3 vxLP = vec3(texPos.x-vx.x, texPos.y-vx.y, texPos.z);
+					vec3 vxRS = vec3(texPos.x+vx.x, texPos.y, texPos.z+vx.z);
+					vec3 vxLS = vec3(texPos.x-vx.x, texPos.y, texPos.z+vx.z);
+					vec3 vxRI = vec3(texPos.x+vx.x, texPos.y, texPos.z-vx.z);
+					vec3 vxLI = vec3(texPos.x-vx.x, texPos.y, texPos.z-vx.z);
+					vec3 vxAS = vec3(texPos.x, texPos.y+vx.y, texPos.z+vx.z);
+					vec3 vxPS = vec3(texPos.x, texPos.y-vx.y, texPos.z+vx.z);
+					vec3 vxAI = vec3(texPos.x, texPos.y+vx.y, texPos.z-vx.z);
+					vec3 vxPI = vec3(texPos.x, texPos.y-vx.y, texPos.z-vx.z);
+
+					if (axCorSag == 0) { //axial corners
+						a = max(a, texture(overlay, vxRA).a);
+						a = max(a, texture(overlay, vxLA).a);
+						a = max(a, texture(overlay, vxRP).a);
+						a = max(a, texture(overlay, vxLP).a);
+					}
+					if (axCorSag == 1) { //coronal corners
+						a = max(a, texture(overlay, vxRS).a);
+						a = max(a, texture(overlay, vxLS).a);
+						a = max(a, texture(overlay, vxRI).a);
+						a = max(a, texture(overlay, vxLI).a);
+					}
+					if (axCorSag == 2) { //sagittal corners
+						a = max(a, texture(overlay, vxAS).a);
+						a = max(a, texture(overlay, vxPS).a);
+						a = max(a, texture(overlay, vxAI).a);
+						a = max(a, texture(overlay, vxPI).a);
+					}
+				}
+				if (a >= 1.0) {
+					ocolor = vec4(0.0, 0.0, 0.0, 1.0);
+					overlayAlpha = 1.0;
+				}
+			}
+
+		} else {
+			if ((overlayOutlineWidth > 0.0) && (ocolor.a >= 1.0)) { //check voxel neighbors for edge
+				vec3 vx = (overlayOutlineWidth ) / vec3(textureSize(overlay, 0));
+				vec3 vxR = vec3(texPos.x+vx.x, texPos.y, texPos.z);
+				vec3 vxL = vec3(texPos.x-vx.x, texPos.y, texPos.z);
+				vec3 vxA = vec3(texPos.x, texPos.y+vx.y, texPos.z);
+				vec3 vxP = vec3(texPos.x, texPos.y-vx.y, texPos.z);
+				vec3 vxS = vec3(texPos.x, texPos.y, texPos.z+vx.z);
+				vec3 vxI = vec3(texPos.x, texPos.y, texPos.z-vx.z);
+				float a = 1.0;
+				if (axCorSag != 2) {
+					a = min(a, texture(overlay, vxR).a);
+					a = min(a, texture(overlay, vxL).a);
+				}
+				if (axCorSag != 1) {
+					a = min(a, texture(overlay, vxA).a);
+					a = min(a, texture(overlay, vxP).a);
+				}
+				if (axCorSag != 0) {
+					a = min(a, texture(overlay, vxS).a);
+					a = min(a, texture(overlay, vxI).a);
+				}
+				if (a < 1.0) {
+					ocolor = vec4(0.0, 0.0, 0.0, 1.0);
+					overlayAlpha = 1.0;
+				}
+			}
+		} //outline above threshold
+	}
+
 `;
 var kFragSliceTail = `	ocolor.a *= overlayAlpha;
 	vec4 dcolor = drawColor(texture(drawing, texPos).r, drawOpacity);
@@ -1176,28 +1276,28 @@ var fragGrowCutShader = `#version 300 es
 	uniform int finalPass;
 	uniform float coordZ;
 	uniform lowp sampler3D in3D;
-	uniform highp isampler3D inputTexture0; // background
-	uniform highp isampler3D inputTexture1; // label
-	uniform highp isampler3D inputTexture2; // strength
+	uniform highp isampler3D backTex; // background
+	uniform highp isampler3D labelTex; // label
+	uniform highp isampler3D strengthTex; // strength
 void main(void) {
 	vec3 interpolatedTextureCoordinate = vec3(TexCoord.xy, coordZ);
-	ivec3 size = textureSize(inputTexture0, 0);
+	ivec3 size = textureSize(backTex, 0);
 	ivec3 texelIndex = ivec3(floor(interpolatedTextureCoordinate * vec3(size)));
-	int background = texelFetch(inputTexture0, texelIndex, 0).r;
-	label = texelFetch(inputTexture1, texelIndex, 0).r;
-	strength = texelFetch(inputTexture2, texelIndex, 0).r;
+	int background = texelFetch(backTex, texelIndex, 0).r;
+	label = texelFetch(labelTex, texelIndex, 0).r;
+	strength = texelFetch(strengthTex, texelIndex, 0).r;
 	for (int k = -1; k <= 1; k++) {
 		for (int j = -1; j <= 1; j++) {
 			for (int i = -1; i <= 1; i++) {
 				if (i != 0 && j != 0 && k != 0) {
 					ivec3 neighborIndex = texelIndex + ivec3(i,j,k);
-					int neighborBackground = texelFetch(inputTexture0, neighborIndex, 0).r;
-					int neighborStrength = texelFetch(inputTexture2, neighborIndex, 0).r;
+					int neighborBackground = texelFetch(backTex, neighborIndex, 0).r;
+					int neighborStrength = texelFetch(strengthTex, neighborIndex, 0).r;
 					int strengthCost = abs(neighborBackground - background);
 					int takeoverStrength = neighborStrength - strengthCost;
 					if (takeoverStrength > strength) {
 						strength = takeoverStrength;
-						label = texelFetch(inputTexture1, neighborIndex, 0).r;
+						label = texelFetch(labelTex, neighborIndex, 0).r;
 					}
 				}
 			}
@@ -1211,7 +1311,7 @@ void main(void) {
 		for (int j = -1; j <= 1; j++)
 			for (int i = -1; i <= 1; i++) {
 				ivec3 neighborIndex = texelIndex + ivec3(i,j,k);
-				int ilabel = texelFetch(inputTexture1, neighborIndex, 0).r;
+				int ilabel = texelFetch(labelTex, neighborIndex, 0).r;
 				if ((ilabel < 0) || (ilabel > 3))
 					ok = 0;
 				else
@@ -2816,8 +2916,8 @@ __publicField(_NiivueObject3D, "CULL_FACE", 2);
 __publicField(_NiivueObject3D, "CULL_FRONT", 4);
 __publicField(_NiivueObject3D, "CULL_BACK", 8);
 __publicField(_NiivueObject3D, "ENABLE_DEPTH_TEST", 16);
-__publicField(_NiivueObject3D, "generateCrosshairs", function(gl, id, xyzMM, xyzMin, xyzMax, radius, sides = 20) {
-  const geometry = _NiivueObject3D.generateCrosshairsGeometry(gl, xyzMM, xyzMin, xyzMax, radius, sides);
+__publicField(_NiivueObject3D, "generateCrosshairs", function(gl, id, xyzMM, xyzMin, xyzMax, radius, sides = 20, gap = 0) {
+  const geometry = _NiivueObject3D.generateCrosshairsGeometry(gl, xyzMM, xyzMin, xyzMax, radius, sides, gap);
   return new _NiivueObject3D(
     id,
     geometry.vertexBuffer,
@@ -2828,18 +2928,40 @@ __publicField(_NiivueObject3D, "generateCrosshairs", function(gl, id, xyzMM, xyz
   );
 });
 // not included in public docs
-__publicField(_NiivueObject3D, "generateCrosshairsGeometry", function(gl, xyzMM, xyzMin, xyzMax, radius, sides = 20) {
+__publicField(_NiivueObject3D, "generateCrosshairsGeometry", function(gl, xyzMM, xyzMin, xyzMax, radius, sides = 20, gap = 0) {
   const vertices = [];
   const indices = [];
-  let start = vec3.fromValues(xyzMin[0], xyzMM[1], xyzMM[2]);
-  let dest = vec3.fromValues(xyzMax[0], xyzMM[1], xyzMM[2]);
-  _NiivueObject3D.makeCylinder(vertices, indices, start, dest, radius, sides);
-  start = vec3.fromValues(xyzMM[0], xyzMin[1], xyzMM[2]);
-  dest = vec3.fromValues(xyzMM[0], xyzMax[1], xyzMM[2]);
-  _NiivueObject3D.makeCylinder(vertices, indices, start, dest, radius, sides);
-  start = vec3.fromValues(xyzMM[0], xyzMM[1], xyzMin[2]);
-  dest = vec3.fromValues(xyzMM[0], xyzMM[1], xyzMax[2]);
-  _NiivueObject3D.makeCylinder(vertices, indices, start, dest, radius, sides);
+  const gapX = radius * gap;
+  if (gapX <= 0) {
+    let start = vec3.fromValues(xyzMin[0], xyzMM[1], xyzMM[2]);
+    let dest = vec3.fromValues(xyzMax[0], xyzMM[1], xyzMM[2]);
+    _NiivueObject3D.makeCylinder(vertices, indices, start, dest, radius, sides);
+    start = vec3.fromValues(xyzMM[0], xyzMin[1], xyzMM[2]);
+    dest = vec3.fromValues(xyzMM[0], xyzMax[1], xyzMM[2]);
+    _NiivueObject3D.makeCylinder(vertices, indices, start, dest, radius, sides);
+    start = vec3.fromValues(xyzMM[0], xyzMM[1], xyzMin[2]);
+    dest = vec3.fromValues(xyzMM[0], xyzMM[1], xyzMax[2]);
+    _NiivueObject3D.makeCylinder(vertices, indices, start, dest, radius, sides);
+  } else {
+    let start = vec3.fromValues(xyzMin[0], xyzMM[1], xyzMM[2]);
+    let dest = vec3.fromValues(xyzMM[0] - gapX, xyzMM[1], xyzMM[2]);
+    _NiivueObject3D.makeCylinder(vertices, indices, start, dest, radius, sides, false);
+    start = vec3.fromValues(xyzMM[0] + gapX, xyzMM[1], xyzMM[2]);
+    dest = vec3.fromValues(xyzMax[0], xyzMM[1], xyzMM[2]);
+    _NiivueObject3D.makeCylinder(vertices, indices, start, dest, radius, sides, false);
+    start = vec3.fromValues(xyzMM[0], xyzMin[1], xyzMM[2]);
+    dest = vec3.fromValues(xyzMM[0], xyzMM[1] - gapX, xyzMM[2]);
+    _NiivueObject3D.makeCylinder(vertices, indices, start, dest, radius, sides, false);
+    start = vec3.fromValues(xyzMM[0], xyzMM[1] + gapX, xyzMM[2]);
+    dest = vec3.fromValues(xyzMM[0], xyzMax[1], xyzMM[2]);
+    _NiivueObject3D.makeCylinder(vertices, indices, start, dest, radius, sides, false);
+    start = vec3.fromValues(xyzMM[0], xyzMM[1], xyzMin[2]);
+    dest = vec3.fromValues(xyzMM[0], xyzMM[1], xyzMM[2] - gapX);
+    _NiivueObject3D.makeCylinder(vertices, indices, start, dest, radius, sides, false);
+    start = vec3.fromValues(xyzMM[0], xyzMM[1], xyzMM[2] + gapX);
+    dest = vec3.fromValues(xyzMM[0], xyzMM[1], xyzMax[2]);
+    _NiivueObject3D.makeCylinder(vertices, indices, start, dest, radius, sides, false);
+  }
   const vertexBuffer = gl.createBuffer();
   if (vertexBuffer === null) {
     throw new Error("could not instantiate vertex buffer");
@@ -11374,11 +11496,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
     const offsetPt0 = [];
     offsetPt0.push(npt);
     const pts = [];
-    const dps = [];
-    dps.push({
-      id: "tract",
-      vals: []
-    });
+    const bundleTags = [];
     for (let t = 0; t < n_tracts; t++) {
       line = readStr();
       const new_tracts = readNumericTag("ni_dimen=");
@@ -11398,13 +11516,18 @@ var NVMeshLoaders = class _NVMeshLoaders {
         }
         npt += new_pts;
         offsetPt0.push(npt);
-        dps[0].vals.push(bundleTag);
+        bundleTags.push(bundleTag);
       }
       line = readStr();
     }
+    const dps = [];
+    dps.push({
+      id: "tract",
+      vals: Float32Array.from(bundleTags)
+    });
     return {
-      pts,
-      offsetPt0,
+      pts: new Float32Array(pts),
+      offsetPt0: new Uint32Array(offsetPt0),
       dps
     };
   }
@@ -11493,8 +11616,8 @@ var NVMeshLoaders = class _NVMeshLoaders {
       }
       return mat2;
     }
-    let offsetPt0 = [];
-    let pts = [];
+    let offsetPt0 = new Uint32Array(0);
+    let pts = new Float32Array(0);
     const mat = readMatV4(buffer);
     if (!("trans_to_mni" in mat)) {
       throw new Error("TT format file must have 'trans_to_mni'");
@@ -11526,8 +11649,6 @@ var NVMeshLoaders = class _NVMeshLoaders {
       m[15]
     );
     mat42.transpose(trans_to_mni, trans_to_mni);
-    const zoomMat = mat42.create();
-    mat42.transpose(zoomMat, zoomMat);
     function parse_tt(track) {
       const dv = new DataView(track.buffer);
       const pos = [];
@@ -11565,12 +11686,10 @@ var NVMeshLoaders = class _NVMeshLoaders {
       for (let i2 = 0; i2 < npt; i2++) {
         pts[i2] = pts[i2] / 32;
       }
-      const vox2mmMat = mat42.create();
-      mat42.mul(vox2mmMat, trans_to_mni, zoomMat);
       let v = 0;
       for (let i2 = 0; i2 < npt / 3; i2++) {
         const pos2 = vec42.fromValues(pts[v], pts[v + 1], pts[v + 2], 1);
-        vec42.transformMat4(pos2, pos2, vox2mmMat);
+        vec42.transformMat4(pos2, pos2, trans_to_mni);
         pts[v++] = pos2[0];
         pts[v++] = pos2[1];
         pts[v++] = pos2[2];
@@ -11594,7 +11713,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
     }
     let noff = 0;
     let npt = 0;
-    let pts = [];
+    let pts = new Float32Array([]);
     const offsetPt0 = [];
     const dpg = [];
     const dps = [];
@@ -11669,31 +11788,21 @@ var NVMeshLoaders = class _NVMeshLoaders {
       if (pname.includes("groups")) {
         dpg.push({
           id: tag,
-          vals: Array.from(vals.slice())
+          vals: Float32Array.from(vals.slice())
         });
         continue;
       }
       if (pname.includes("dpv")) {
-        let mn = vals[0];
-        let mx = vals[0];
-        for (let i2 = 1; i2 < vals.length; i2++) {
-          mn = Math.min(vals[i2], mn);
-          mx = Math.max(vals[i2], mx);
-        }
         dpv.push({
           id: tag,
-          vals: Array.from(vals.slice()),
-          global_min: mn,
-          global_max: mx,
-          cal_min: mn,
-          cal_max: mx
+          vals: Float32Array.from(vals.slice())
         });
         continue;
       }
       if (pname.includes("dps")) {
         dps.push({
           id: tag,
-          vals: Array.from(vals.slice())
+          vals: Float32Array.from(vals.slice())
         });
         continue;
       }
@@ -11705,7 +11814,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
       }
       if (fname.startsWith("positions.3.")) {
         npt = nval;
-        pts = Array.from(vals.slice());
+        pts = new Float32Array(vals);
       }
     }
     if (noff === 0 || npt === 0) {
@@ -11716,8 +11825,8 @@ var NVMeshLoaders = class _NVMeshLoaders {
     }
     offsetPt0[noff] = npt / 3;
     return {
-      pts: Array.from(pts),
-      offsetPt0: Array.from(offsetPt0),
+      pts,
+      offsetPt0: new Uint32Array(offsetPt0),
       dpg,
       dps,
       dpv,
@@ -11877,23 +11986,16 @@ var NVMeshLoaders = class _NVMeshLoaders {
     if (vers > 2 || hdr_sz !== 1e3 || magic !== 1128354388) {
       throw new Error("Not a valid TRK file");
     }
-    const dps = [];
-    const dpv = [];
     const n_scalars = reader.getInt16(36, true);
-    if (n_scalars > 0) {
-      for (let i2 = 0; i2 < n_scalars; i2++) {
-        const arr = new Uint8Array(buffer.slice(38 + i2 * 20, 58 + i2 * 20));
-        const str = new TextDecoder().decode(arr).split("\0").shift();
-        dpv.push({
-          id: str.trim(),
-          // TODO can we guarantee this?
-          vals: [],
-          global_min: 0,
-          global_max: 0,
-          cal_min: 0,
-          cal_max: 0
-        });
-      }
+    const dpv = [];
+    for (let i2 = 0; i2 < n_scalars; i2++) {
+      const arr = new Uint8Array(buffer.slice(38 + i2 * 20, 58 + i2 * 20));
+      const str = new TextDecoder().decode(arr).split("\0").shift();
+      dpv.push({
+        id: str.trim(),
+        // TODO can we guarantee this?
+        vals: []
+      });
     }
     const voxel_sizeX = reader.getFloat32(12, true);
     const voxel_sizeY = reader.getFloat32(16, true);
@@ -11917,16 +12019,15 @@ var NVMeshLoaders = class _NVMeshLoaders {
       1
     );
     const n_properties = reader.getInt16(238, true);
-    if (n_properties > 0) {
-      for (let i2 = 0; i2 < n_properties; i2++) {
-        const arr = new Uint8Array(buffer.slice(240 + i2 * 20, 260 + i2 * 20));
-        const str = new TextDecoder().decode(arr).split("\0").shift();
-        dps.push({
-          id: str.trim(),
-          // TODO can we guarantee this?
-          vals: []
-        });
-      }
+    const dps = [];
+    for (let i2 = 0; i2 < n_properties; i2++) {
+      const arr = new Uint8Array(buffer.slice(240 + i2 * 20, 260 + i2 * 20));
+      const str = new TextDecoder().decode(arr).split("\0").shift();
+      dps.push({
+        id: str.trim(),
+        // TODO can we guarantee this?
+        vals: []
+      });
     }
     const mat = mat42.create();
     for (let i2 = 0; i2 < 16; i2++) {
@@ -11938,9 +12039,6 @@ var NVMeshLoaders = class _NVMeshLoaders {
     }
     const vox2mmMat = mat42.create();
     mat42.mul(vox2mmMat, zoomMat, mat);
-    vox2mmMat[3] = mat[3];
-    vox2mmMat[7] = mat[7];
-    vox2mmMat[11] = mat[11];
     let i32 = null;
     let f32 = null;
     i32 = new Int32Array(buffer.slice(hdr_sz));
@@ -11982,15 +12080,19 @@ var NVMeshLoaders = class _NVMeshLoaders {
         }
       }
     }
-    if (n_scalars > 0) {
-      for (let s = 0; s < n_scalars; s++) {
-        const mn = dpv[s].vals.reduce((acc, current) => Math.min(acc, current));
-        const mx = dpv[s].vals.reduce((acc, current) => Math.max(acc, current));
-        dpv[s].global_min = mn;
-        dpv[s].global_max = mx;
-        dpv[s].cal_min = mn;
-        dpv[s].cal_max = mx;
-      }
+    const dps32 = [];
+    for (let i2 = 0; i2 < dps.length; i2++) {
+      dps32.push({
+        id: dps[i2].id,
+        vals: Float32Array.from(dps[i2].vals)
+      });
+    }
+    const dpv32 = [];
+    for (let s = 0; s < dpv.length; s++) {
+      dpv32.push({
+        id: dpv[i].id,
+        vals: Float32Array.from(dpv[i].vals)
+      });
     }
     offsetPt0[noffset++] = npt;
     pts = pts.slice(0, npt3);
@@ -11998,8 +12100,8 @@ var NVMeshLoaders = class _NVMeshLoaders {
     return {
       pts,
       offsetPt0,
-      dps,
-      dpv
+      dps: dps32,
+      dpv: dpv32
     };
   }
   // readTRK()
@@ -12157,7 +12259,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
     } else {
       throw new Error("Unsupported ASCII VTK datatype " + items[0]);
     }
-    const indices = new Int32Array(tris);
+    const indices = new Uint32Array(tris);
     return {
       positions,
       indices
@@ -12203,7 +12305,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
       const mx2 = vals.reduce((acc, current) => Math.max(acc, current));
       nvmesh.dpv.push({
         id: tag,
-        vals: Array.from(vals.slice()),
+        vals: Float32Array.from(vals.slice()),
         global_min: mn2,
         global_max: mx2,
         cal_min: mn2,
@@ -12615,7 +12717,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
       }
       if (ntri < 1) {
         ntri = parseInt(items[0]);
-        indices = new Int32Array(ntri * 3);
+        indices = new Uint32Array(ntri * 3);
         continue;
       }
       if (t >= ntri * 3) {
@@ -12671,7 +12773,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
       positions[j + 2] = parseFloat(items[2]);
       j += 3;
     }
-    const indices = new Int32Array(ntri * 3);
+    const indices = new Uint32Array(ntri * 3);
     j = 0;
     for (let i = 0; i < ntri; i++) {
       line = readStr();
@@ -12853,7 +12955,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
     } else {
       throw new Error("Unsupported binary VTK datatype " + items[0]);
     }
-    const indices = new Int32Array(tris);
+    const indices = new Uint32Array(tris);
     return {
       positions,
       indices
@@ -12874,7 +12976,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
     const nvert = reader.getUint32(28, true);
     const vcoffset = reader.getUint32(48, true);
     let pos = hdrBytes;
-    const indices = new Int32Array(buffer, pos, nface * 3);
+    const indices = new Uint32Array(buffer, pos, nface * 3);
     pos += nface * 3 * 4;
     const positions = new Float32Array(buffer, pos, nvert * 3);
     for (let i = 0; i < nvert * 3; i += 3) {
@@ -12957,7 +13059,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
     let filepos = 16 + nskip;
     let indices = null;
     if (isFace) {
-      indices = new Int32Array(_buffer, filepos, nface * 3);
+      indices = new Uint32Array(_buffer, filepos, nface * 3);
       filepos += nface * 3 * 4;
     }
     let positions = null;
@@ -13111,7 +13213,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
         positions2[v + 2] = parseFloat(items[2]);
         v += 3;
       }
-      let indices2 = new Int32Array(nface * 3);
+      let indices2 = new Uint32Array(nface * 3);
       let f = 0;
       for (let i = 0; i < nface; i++) {
         line = readStr();
@@ -13121,7 +13223,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
           break;
         }
         if (f + nTri * 3 > indices2.length) {
-          const c = new Int32Array(indices2.length + indices2.length);
+          const c = new Uint32Array(indices2.length + indices2.length);
           c.set(indices2);
           indices2 = c.slice();
         }
@@ -13171,7 +13273,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
         pos += vertStride;
       }
     }
-    const indices = new Int32Array(nface * 3);
+    const indices = new Uint32Array(nface * 3);
     let isTriangular = true;
     let j = 0;
     if (indexCountBytes === 1 && indexBytes === 4 && indexStrideBytes === 13) {
@@ -13262,7 +13364,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
     header = lines[line].trim().split(/\s+/);
     line++;
     const num_f = parseInt(header[0]);
-    const indices = new Int32Array(num_f * 3);
+    const indices = new Uint32Array(num_f * 3);
     for (let i = 0; i < num_f; i++) {
       const items = lines[line].trim().split(/\s+/);
       line++;
@@ -13347,7 +13449,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
       }
     }
     const positions = new Float32Array(pts);
-    const indices = new Int32Array(t);
+    const indices = new Uint32Array(t);
     return {
       positions,
       indices
@@ -13393,7 +13495,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
       i++;
     }
     const positions = new Float32Array(pts);
-    const indices = new Int32Array(t);
+    const indices = new Uint32Array(t);
     return {
       positions,
       indices
@@ -13429,7 +13531,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
     j += num_c * 4;
     j += nTri;
     const nTriX3 = nTri * 3;
-    const indices = new Int32Array(nTriX3);
+    const indices = new Uint32Array(nTriX3);
     for (let i = 0; i < nTriX3; i++) {
       indices[i] = parseInt(items[j++]);
     }
@@ -13478,7 +13580,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
       }
     }
     const positions = new Float32Array(pts);
-    const indices = new Int32Array(t);
+    const indices = new Uint32Array(t);
     return {
       positions,
       indices
@@ -13513,7 +13615,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
       offset += 4;
     }
     nf *= 3;
-    const indices = new Int32Array(nf);
+    const indices = new Uint32Array(nf);
     for (let i = 0; i < nf; i++) {
       indices[i] = view.getUint32(offset, false);
       offset += 4;
@@ -13630,7 +13732,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
       const nNearest = reader.getUint32(pos, true);
       pos += 4 + 4 * nNearest;
     }
-    const indices = new Int32Array(nTri * 3);
+    const indices = new Uint32Array(nTri * 3);
     for (let i = 0; i < nTri * 3; i++) {
       indices[i] = reader.getInt32(pos, true);
       pos += 4;
@@ -13669,7 +13771,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
       throw new Error("Unable to parse ASCII STL file.");
     }
     const positions = new Float32Array(pts);
-    const indices = new Int32Array(npts);
+    const indices = new Uint32Array(npts);
     for (let i = 0; i < npts; i++) {
       indices[i] = i;
     }
@@ -13695,7 +13797,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
     if (buffer.byteLength < 80 + 4 + ntri * 50) {
       throw new Error("STL file too small to store triangles = " + ntri);
     }
-    const indices = new Int32Array(ntri3);
+    const indices = new Uint32Array(ntri3);
     const positions = new Float32Array(ntri3 * 3);
     let pos = 80 + 4 + 12;
     let v = 0;
@@ -13790,7 +13892,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
       let indexCount = 0;
       let surfaceNumberOfVertices = 0;
       let brainStructure = "";
-      let vertexIndices = new Int32Array();
+      let vertexIndices = new Uint32Array();
       const bytes = new Uint8Array(buffer);
       let pos = 552;
       let line;
@@ -13840,7 +13942,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
           if (items.length < indexCount) {
             log.error("Error parsing VertexIndices");
           }
-          vertexIndices = new Int32Array(indexCount);
+          vertexIndices = new Uint32Array(indexCount);
           for (let i = 0; i < indexCount; i++) {
             vertexIndices[i] = parseInt(items[i]);
           }
@@ -14372,8 +14474,8 @@ var NVMeshLoaders = class _NVMeshLoaders {
     }
     return {
       positions: Float32Array.from(positions),
-      indices: Int32Array.from(indices),
-      rgba255
+      indices: Uint32Array.from(indices),
+      rgba255: Uint8Array.from(rgba255)
     };
   }
   // readX3D()
@@ -14441,7 +14543,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
     }
     len = tag.contentEndPos;
     let positions = new Float32Array();
-    let indices = new Int32Array();
+    let indices = new Uint32Array();
     let scalars = new Float32Array();
     let anatomicalStructurePrimary = "";
     let isIdx = false;
@@ -14568,7 +14670,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
           if (dataType !== 8) {
             log.warn("expect indices as INT32");
           }
-          indices = new Int32Array(datBin.buffer);
+          indices = new Uint32Array(datBin.buffer);
           if (isColMajor) {
             const tmp = indices.slice();
             const np = tmp.length / 3;
@@ -14701,7 +14803,7 @@ var NVMeshLoaders = class _NVMeshLoaders {
 
 // src/nvmesh.ts
 var NVMeshFromUrlOptions = class {
-  constructor(url = "", gl = null, name = "", opacity = 1, rgba255 = [255, 255, 255, 255], visible = true, layers = [], colorbarVisible = true) {
+  constructor(url = "", gl = null, name = "", opacity = 1, rgba255 = new Uint8Array([255, 255, 255, 255]), visible = true, layers = [], colorbarVisible = true) {
     __publicField(this, "url");
     __publicField(this, "gl");
     __publicField(this, "name");
@@ -14736,7 +14838,7 @@ var NVMesh = class _NVMesh {
    * @param colorbarVisible - does this mesh display a colorbar
    * @param anatomicalStructurePrimary - region for mesh. Default is an empty string
    */
-  constructor(pts, tris, name = "", rgba255 = [255, 255, 255, 255], opacity = 1, visible = true, gl, connectome = null, dpg = null, dps = null, dpv = null, colorbarVisible = true, anatomicalStructurePrimary = "") {
+  constructor(pts, tris, name = "", rgba255 = new Uint8Array([255, 255, 255, 255]), opacity = 1, visible = true, gl, connectome = null, dpg = null, dps = null, dpv = null, colorbarVisible = true, anatomicalStructurePrimary = "") {
     __publicField(this, "id");
     __publicField(this, "name");
     __publicField(this, "anatomicalStructurePrimary");
@@ -14784,6 +14886,7 @@ var NVMesh = class _NVMesh {
     __publicField(this, "vertexCount", 1);
     __publicField(this, "nodeScale", 4);
     __publicField(this, "edgeScale", 1);
+    __publicField(this, "legendLineThickness", 0);
     __publicField(this, "nodeColormap", "warm");
     __publicField(this, "edgeColormap", "warm");
     __publicField(this, "nodeColormapNegative");
@@ -14846,6 +14949,15 @@ var NVMesh = class _NVMesh {
       this.dpg = dpg;
       this.dps = dps;
       this.dpv = dpv;
+      if (dpg) {
+        this.initValuesArray(dpg);
+      }
+      if (dps) {
+        this.initValuesArray(dps);
+      }
+      if (dpv) {
+        this.initValuesArray(dpv);
+      }
       this.offsetPt0 = tris;
       this.updateFibers(gl);
       gl.bindVertexArray(this.vaoFiber);
@@ -14870,6 +14982,17 @@ var NVMesh = class _NVMesh {
     this.tris = tris;
     this.updateMesh(gl);
   }
+  initValuesArray(va) {
+    for (let i = 0; i < va.length; i++) {
+      const mn = va[i].vals.reduce((acc, current) => Math.min(acc, current));
+      const mx = va[i].vals.reduce((acc, current) => Math.max(acc, current));
+      va[i].global_min = mn;
+      va[i].global_max = mx;
+      va[i].cal_min = mn;
+      va[i].cal_max = mx;
+    }
+    return va;
+  }
   // given streamlines (which webGL renders as a single pixel), extrude to cylinders
   linesToCylinders(gl, posClrF32, indices) {
     function v4ToV3(v4) {
@@ -14965,7 +15088,7 @@ var NVMesh = class _NVMesh {
       }
     }
     const nidx = (n_line_vtx - n_streamlines) * cyl_sides * 2 * 3;
-    const idxs = new Int32Array(nidx);
+    const idxs = new Uint32Array(nidx);
     let idx = 0;
     vtx = 0;
     for (let i = 1; i < n_count; i++) {
@@ -14997,9 +15120,9 @@ var NVMesh = class _NVMesh {
       vtx += cyl_sides;
     }
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
-    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Int32Array(idxs), gl.STATIC_DRAW);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, Uint32Array.from(idxs), gl.STATIC_DRAW);
     gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(f32), gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, Float32Array.from(f32), gl.STATIC_DRAW);
     this.indexCount = nidx;
   }
   // linesToCylinders
@@ -15014,7 +15137,7 @@ var NVMesh = class _NVMesh {
     const n_count = offsetPt0.length - 1;
     const npt = pts.length / 3;
     if (!this.fiberLengths) {
-      this.fiberLengths = [];
+      this.fiberLengths = new Uint32Array(n_count);
       for (let i = 0; i < n_count; i++) {
         const vStart3 = offsetPt0[i] * 3;
         const vEnd3 = (offsetPt0[i + 1] - 1) * 3;
@@ -15023,7 +15146,7 @@ var NVMesh = class _NVMesh {
           const v = vec34.fromValues(pts[j + 0] - pts[j + 3], pts[j + 1] - pts[j + 4], pts[j + 2] - pts[j + 5]);
           len += vec34.len(v);
         }
-        this.fiberLengths.push(len);
+        this.fiberLengths[i] = len;
       }
     }
     const posClrF32 = new Float32Array(npt * 4);
@@ -15236,119 +15359,12 @@ var NVMesh = class _NVMesh {
     } else {
       this.indexCount = indices.length;
       gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
-      gl.bufferData(gl.ARRAY_BUFFER, new Uint32Array(posClrU32), gl.STATIC_DRAW);
+      gl.bufferData(gl.ARRAY_BUFFER, Uint32Array.from(posClrU32), gl.STATIC_DRAW);
       gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
-      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(indices), gl.STATIC_DRAW);
+      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, Uint32Array.from(indices), gl.STATIC_DRAW);
     }
   }
   // updateFibers()
-  // internal function filters connectome to identify which color, size and visibility of nodes and edges
-  updateConnectome(gl) {
-    const tris = [];
-    const nNode = this.nodes.X.length;
-    let hasEdges = false;
-    if (nNode > 1 && this.edges) {
-      let nEdges = this.edges.length;
-      if (nEdges = nNode * nNode) {
-        hasEdges = true;
-      } else {
-        log.warn("Expected %d edges not %d", nNode * nNode, nEdges);
-      }
-    }
-    const pts = [];
-    const rgba255 = [];
-    let lut = cmapper.colormap(this.nodeColormap, this.colormapInvert);
-    let lutNeg = cmapper.colormap(this.nodeColormapNegative, this.colormapInvert);
-    let hasNeg = this.nodeColormapNegative !== void 0;
-    let min = this.nodeMinColor;
-    let max = this.nodeMaxColor;
-    for (let i = 0; i < nNode; i++) {
-      const radius = this.nodes.Size[i] * this.nodeScale;
-      if (radius <= 0) {
-        continue;
-      }
-      let color = this.nodes.Color[i];
-      let isNeg = false;
-      if (hasNeg && color < 0) {
-        isNeg = true;
-        color = -color;
-      }
-      if (min < max) {
-        if (color < min) {
-          continue;
-        }
-        color = (color - min) / (max - min);
-      } else {
-        color = 1;
-      }
-      color = Math.round(Math.max(Math.min(255, color * 255))) * 4;
-      let rgba = [lut[color], lut[color + 1], lut[color + 2], 255];
-      if (isNeg) {
-        rgba = [lutNeg[color], lutNeg[color + 1], lutNeg[color + 2], 255];
-      }
-      const pt = [
-        this.nodes.X[i],
-        this.nodes.Y[i],
-        this.nodes.Z[i]
-      ];
-      NiivueObject3D.makeColoredSphere(pts, tris, rgba255, radius, pt, rgba);
-    }
-    if (hasEdges) {
-      lut = cmapper.colormap(this.edgeColormap, this.colormapInvert);
-      lutNeg = cmapper.colormap(this.edgeColormapNegative, this.colormapInvert);
-      hasNeg = this.edgeColormapNegative !== void 0;
-      min = this.edgeMin;
-      max = this.edgeMax;
-      for (let i = 0; i < nNode - 1; i++) {
-        for (let j = i + 1; j < nNode; j++) {
-          let color = this.edges[i * nNode + j];
-          let isNeg = false;
-          if (hasNeg && color < 0) {
-            isNeg = true;
-            color = -color;
-          }
-          const radius = color * this.edgeScale;
-          if (radius <= 0) {
-            continue;
-          }
-          if (min < max) {
-            if (color < min) {
-              continue;
-            }
-            color = (color - min) / (max - min);
-          } else {
-            color = 1;
-          }
-          color = Math.round(Math.max(Math.min(255, color * 255))) * 4;
-          let rgba = [lut[color], lut[color + 1], lut[color + 2], 255];
-          if (isNeg) {
-            rgba = [lutNeg[color], lutNeg[color + 1], lutNeg[color + 2], 255];
-          }
-          const pti = [
-            this.nodes.X[i],
-            this.nodes.Y[i],
-            this.nodes.Z[i]
-          ];
-          const ptj = [
-            this.nodes.X[j],
-            this.nodes.Y[j],
-            this.nodes.Z[j]
-          ];
-          NiivueObject3D.makeColoredCylinder(pts, tris, rgba255, pti, ptj, radius, rgba);
-        }
-      }
-    }
-    const obj = NVMeshUtilities.getExtents(pts);
-    this.furthestVertexFromOrigin = obj.mxDx;
-    this.extentsMin = obj.extentsMin;
-    this.extentsMax = obj.extentsMax;
-    const posNormClr = this.generatePosNormClr(pts, tris, rgba255);
-    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
-    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Int32Array(tris), gl.STATIC_DRAW);
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(posNormClr), gl.STATIC_DRAW);
-    this.indexCount = tris.length;
-  }
   // given X,Y,Z coordinates in world space, return index of nearest vertex as well as
   // the distance of this closest vertex to the coordinates
   indexNearestXYZmm(Xmm, Ymm, Zmm) {
@@ -15376,7 +15392,6 @@ var NVMesh = class _NVMesh {
       return;
     }
     if (this.hasConnectome) {
-      this.updateConnectome(gl);
       return;
     }
     if (!this.pts || !this.tris || !this.rgba255) {
@@ -15649,9 +15664,9 @@ var NVMesh = class _NVMesh {
       }
     }
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
-    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Int32Array(this.tris), gl.STATIC_DRAW);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, Uint32Array.from(this.tris), gl.STATIC_DRAW);
     gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(posNormClr), gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, Float32Array.from(posNormClr), gl.STATIC_DRAW);
     this.indexCount = this.tris.length;
     this.vertexCount = this.pts.length;
   }
@@ -15738,75 +15753,10 @@ var NVMesh = class _NVMesh {
     }
     return f32;
   }
-  static loadConnectomeFromFreeSurfer(json, gl, name = "", opacity = 1, visible = true) {
-    let isValid = true;
-    if (json.data_type === void 0) {
-      isValid = false;
-    } else if (json.data_type !== "fs_pointset") {
-      isValid = false;
-    }
-    if (json.points === void 0) {
-      isValid = false;
-    }
-    if (!isValid) {
-      throw Error("not a valid FreeSurfer json pointset");
-    }
-    const jcon = {
-      nodes: {
-        names: [],
-        prefilled: [],
-        X: [],
-        Y: [],
-        Z: [],
-        Color: [],
-        Size: []
-      },
-      edges: [],
-      // @ts-expect-error not sure where this should come from
-      name: this.data_type
-    };
-    if (!json.points) {
-      throw new Error("points are not set!");
-    }
-    for (let i = 0; i < json.points.length; i++) {
-      let name2 = "";
-      if (json.points[i].comments) {
-        if (json.points[i].comments[0].text) {
-          name2 = json.points[i].comments[0].text;
-        }
-      }
-      jcon.nodes.names.push(name2);
-      let prefilled = "";
-      if (json.points[i].comments) {
-        if (json.points[i].comments[0].prefilled) {
-          prefilled = json.points[i].comments[0].prefilled;
-        }
-      }
-      jcon.nodes.prefilled.push(prefilled);
-      jcon.nodes.X.push(json.points[i].coordinates.x);
-      jcon.nodes.Y.push(json.points[i].coordinates.y);
-      jcon.nodes.Z.push(json.points[i].coordinates.z);
-      jcon.nodes.Color.push(1);
-      jcon.nodes.Size.push(1);
-    }
-    return new _NVMesh([], [], name, [], opacity, visible, gl, jcon);
-  }
-  // loadConnectomeFromFreeSurfer
-  // read connectome saved as JSON
-  static loadConnectomeFromJSON(json, gl, name = "", opacity = 1, visible = true) {
-    if ("name" in json) {
-      name = this.name;
-    }
-    if (!("nodes" in json)) {
-      throw Error("not a valid jcon connectome file");
-    }
-    return new _NVMesh([], [], name, [], opacity, visible, gl, json);
-  }
-  // loadConnectomeFromJSON()
   // wrapper to read meshes, tractograms and connectomes regardless of format
-  static readMesh(buffer, name, gl, opacity = 1, rgba255 = [255, 255, 255, 255], visible = true) {
-    let tris = [];
-    let pts = [];
+  static readMesh(buffer, name, gl, opacity = 1, rgba255 = new Uint8Array([255, 255, 255, 255]), visible = true) {
+    let tris = new Uint32Array([]);
+    let pts = new Float32Array([]);
     let anatomicalStructurePrimary = "";
     let obj;
     const re = /(?:\.([^.]+))?$/;
@@ -15817,12 +15767,12 @@ var NVMesh = class _NVMesh {
       ext = ext.toUpperCase();
     }
     if (ext === "JCON") {
-      return _NVMesh.loadConnectomeFromJSON(JSON.parse(new TextDecoder().decode(buffer)), gl, name, opacity);
+      log.error("you should never see this message: load using nvconnectome not nvmesh");
     }
     if (ext === "JSON") {
-      return _NVMesh.loadConnectomeFromFreeSurfer(JSON.parse(new TextDecoder().decode(buffer)), gl, name, opacity);
+      log.error("you should never see this message: load using nvconnectome not nvmesh");
     }
-    rgba255[3] = Math.max(0, rgba255[3]);
+    rgba255[3] = Math.max(1, rgba255[3]);
     if (ext === "TCK" || ext === "TRK" || ext === "TT" || ext === "TRX" || ext === "TRACT") {
       if (ext === "TCK") {
         obj = NVMeshLoaders.readTCK(buffer);
@@ -15836,12 +15786,12 @@ var NVMesh = class _NVMesh {
         obj = NVMeshLoaders.readTRK(buffer);
       }
       if (typeof obj === "undefined") {
-        const pts2 = [0, 0, 0, 0, 0, 0];
-        const offsetPt0 = [0];
+        const pts2 = new Float32Array([0, 0, 0, 0, 0, 0]);
+        const offsetPt0 = new Uint32Array([0]);
         obj = { pts: pts2, offsetPt0 };
         log.error("Creating empty tracts");
       }
-      rgba255[3] = -1;
+      rgba255[3] = 0;
       return new _NVMesh(
         obj.pts,
         obj.offsetPt0,
@@ -15889,10 +15839,10 @@ var NVMesh = class _NVMesh {
     } else if (ext === "FIB" || ext === "VTK") {
       obj = NVMeshLoaders.readVTK(buffer);
       if ("offsetPt0" in obj) {
-        rgba255[3] = -1;
+        rgba255[3] = 0;
         return new _NVMesh(
-          Array.from(obj.pts),
-          Array.from(obj.offsetPt0),
+          obj.pts,
+          obj.offsetPt0,
           name,
           rgba255,
           // colormap,
@@ -15923,20 +15873,21 @@ var NVMesh = class _NVMesh {
     if (!obj.indices) {
       throw new Error("indices not loaded");
     }
-    pts = Array.from(obj.positions);
-    tris = Array.from(obj.indices);
+    pts = obj.positions;
+    tris = obj.indices;
     if ("rgba255" in obj && obj.rgba255.length > 0) {
       rgba255 = obj.rgba255;
     }
     if ("colors" in obj && obj.colors && obj.colors.length === pts.length) {
-      rgba255 = [];
       const n = pts.length / 3;
+      rgba255 = new Uint8Array(n * 4);
       let c = 0;
+      let k = 0;
       for (let i = 0; i < n; i++) {
-        rgba255.push(obj.colors[c] * 255);
-        rgba255.push(obj.colors[c + 1] * 255);
-        rgba255.push(obj.colors[c + 2] * 255);
-        rgba255.push(255);
+        rgba255[k++] = obj.colors[c] * 255;
+        rgba255[k++] = obj.colors[c + 1] * 255;
+        rgba255[k++] = obj.colors[c + 2] * 255;
+        rgba255[k++] = 255;
         c += 3;
       }
     }
@@ -15945,6 +15896,7 @@ var NVMesh = class _NVMesh {
     if (ntri < 1 || npt < 3) {
       throw new Error("Mesh should have at least one triangle and three vertices");
     }
+    rgba255[3] = Math.max(1, rgba255[3]);
     const nvm = new _NVMesh(
       pts,
       tris,
@@ -16088,7 +16040,7 @@ var NVMesh = class _NVMesh {
       throw Error(response.statusText);
     }
     const buffer = await response.arrayBuffer();
-    const nvmesh = await this.readMesh(buffer, name, gl, opacity, rgba255, visible);
+    const nvmesh = await this.readMesh(buffer, name, gl, opacity, new Uint8Array(rgba255), visible);
     if (!layers || layers.length < 1) {
       return nvmesh;
     }
@@ -16131,7 +16083,7 @@ var NVMesh = class _NVMesh {
       throw new Error("rendering context must be set");
     }
     const buffer = await _NVMesh.readFileAsync(file);
-    const nvmesh = _NVMesh.readMesh(buffer, name, gl, opacity, rgba255, visible);
+    const nvmesh = _NVMesh.readMesh(buffer, name, gl, opacity, new Uint8Array(rgba255), visible);
     if (!layers || layers.length < 1) {
       return nvmesh;
     }
@@ -16169,7 +16121,7 @@ var NVMesh = class _NVMesh {
       return bytes.buffer;
     }
     const buffer = base64ToArrayBuffer(base64);
-    const nvmesh = await _NVMesh.readMesh(buffer, name, gl, opacity, rgba255, visible);
+    const nvmesh = await _NVMesh.readMesh(buffer, name, gl, opacity, new Uint8Array(rgba255), visible);
     if (!layers || layers.length < 1) {
       return nvmesh;
     }
@@ -16259,7 +16211,7 @@ var NVMesh = class _NVMesh {
     return NVMeshLoaders.readTSF(buffer);
   }
   static readTT(buffer) {
-    return NVMeshLoaders.readTRX(buffer);
+    return NVMeshLoaders.readTT(buffer);
   }
   static readTRX(buffer) {
     return NVMeshLoaders.readTRX(buffer);
@@ -20962,7 +20914,7 @@ var NVImage = class _NVImage {
    */
   clone() {
     const clonedImage = new _NVImage();
-    clonedImage.id = this.id;
+    clonedImage.id = uuidv42();
     clonedImage.hdr = Object.assign({}, this.hdr);
     clonedImage.img = this.img.slice();
     clonedImage.calculateRAS();
@@ -21393,6 +21345,7 @@ var DEFAULT_OPTIONS = {
   textHeight: 0.06,
   colorbarHeight: 0.05,
   crosshairWidth: 1,
+  crosshairGap: 0,
   rulerWidth: 4,
   show3Dcrosshair: false,
   backColor: [0, 0, 0, 1],
@@ -21772,7 +21725,7 @@ var NVDocument = class _NVDocument {
         pts: mesh.pts,
         tris: mesh.tris,
         name: mesh.name,
-        rgba255: mesh.rgba255,
+        rgba255: Uint8Array.from(mesh.rgba255),
         opacity: mesh.opacity,
         connectome: mesh.connectome,
         dpg: mesh.dpg,
@@ -21809,6 +21762,7 @@ var NVDocument = class _NVDocument {
         nodeMaxColor: mesh.nodeMaxColor,
         nodeMinColor: mesh.nodeMinColor,
         nodeScale: mesh.nodeScale,
+        legendLineThickness: mesh.legendLineThickness,
         offsetPt0: mesh.offsetPt0,
         nodes: mesh.nodes
       };
@@ -21952,14 +21906,14 @@ var defaultOptions = {
   edgeColormapNegative: "winter",
   edgeMin: 2,
   edgeMax: 6,
-  edgeScale: 1
+  edgeScale: 1,
+  legendLineThickness: 0
 };
 var NVConnectome = class _NVConnectome extends NVMesh {
   constructor(gl, connectome) {
-    super([], [], connectome.name, [], 1, true, gl, connectome);
+    super(new Float32Array([]), new Uint32Array([]), connectome.name, new Uint8Array([]), 1, true, gl, connectome);
     __publicField(this, "gl");
     __publicField(this, "nodesChanged");
-    __publicField(this, "legendLineThickness");
     this.gl = gl;
     this.type = "connectome" /* CONNECTOME */;
     if (this.nodes) {
@@ -22235,19 +22189,22 @@ var NVConnectome = class _NVConnectome extends NVMesh {
       const ptj = vec38.fromValues(nodes[edge.second].x, nodes[edge.second].y, nodes[edge.second].z);
       NiivueObject3D.makeColoredCylinder(pts, tris, rgba255, pti, ptj, radius, rgba);
     }
-    const obj = NVMeshUtilities.getExtents(pts);
+    const pts32 = new Float32Array(pts);
+    const tris32 = new Uint32Array(tris);
+    const obj = NVMeshUtilities.getExtents(pts32);
     this.furthestVertexFromOrigin = obj.mxDx;
     this.extentsMin = obj.extentsMin;
     this.extentsMax = obj.extentsMax;
-    const posNormClr = this.generatePosNormClr(pts, tris, rgba255);
+    const posNormClr = this.generatePosNormClr(pts32, tris32, new Uint8Array(rgba255));
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
-    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Int32Array(tris), gl.STATIC_DRAW);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, Uint32Array.from(tris32), gl.STATIC_DRAW);
     gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(posNormClr), gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, Float32Array.from(posNormClr), gl.STATIC_DRAW);
     this.indexCount = tris.length;
   }
   updateMesh(gl) {
     this.updateConnectome(gl);
+    this.updateLabels();
   }
   json() {
     const json = {};
@@ -23048,6 +23005,22 @@ var MESH_EXTENSIONS = [
 var LEFT_MOUSE_BUTTON = 0;
 var CENTER_MOUSE_BUTTON = 1;
 var RIGHT_MOUSE_BUTTON = 2;
+var TEXTURE0_BACK_VOL = 33984;
+var TEXTURE1_COLORMAPS = 33985;
+var TEXTURE2_OVERLAY_VOL = 33986;
+var TEXTURE3_FONT = 33987;
+var TEXTURE4_THUMBNAIL = 33988;
+var TEXTURE5_MATCAP = 33989;
+var TEXTURE6_GRADIENT = 33990;
+var TEXTURE7_DRAW = 33991;
+var TEXTURE8_GRADIENT_TEMP = 33992;
+var TEXTURE9_ORIENT = 33993;
+var TEXTURE10_BLEND = 33994;
+var TEXTURE11_GC_BACK = 33995;
+var TEXTURE12_GC_STRENGTH0 = 33996;
+var TEXTURE13_GC_STRENGTH1 = 33997;
+var TEXTURE14_GC_LABEL0 = 33998;
+var TEXTURE15_GC_LABEL1 = 33999;
 var defaultSaveImageOptions = {
   filename: "",
   isSaveDrawing: false,
@@ -23177,13 +23150,7 @@ var Niivue = class _Niivue {
       dragEnd: [0, 0],
       dragClipPlaneStartDepthAziElev: [0, 0, 0],
       lastTwoTouchDistance: 0,
-      multiTouchGesture: false,
-      loading$: new Subject()
-      // whether or not the scene is loading
-    });
-    // mapping of keys (event strings) to rxjs subjects
-    __publicField(this, "eventsToSubjects", {
-      loading: this.uiData.loading$
+      multiTouchGesture: false
     });
     __publicField(this, "back", null);
     // base layer; defines image space to work in. Defined as this.volumes[0] in Niivue.loadVolumes
@@ -23472,8 +23439,6 @@ var Niivue = class _Niivue {
     __publicField(this, "initialized", false);
     __publicField(this, "currentDrawUndoBitmap");
     __publicField(this, "loadingText");
-    // rxjs subscriptions. Keeping a reference array like this allows us to unsubscribe later
-    __publicField(this, "subscriptions", []);
     for (const name in options) {
       if (typeof options[name] === "function") {
         this[name] = options[name];
@@ -23566,57 +23531,6 @@ var Niivue = class _Niivue {
     log.debug("attached to element with id: ", id);
     return this;
   }
-  // on handles matching event strings (event) with know rxjs subjects within NiiVue.
-  // if the event string exists (e.g. 'location') then the corresponding rxjs subject reference
-  // is extracted from this.eventsToSubjects and the callback passed as the second argument to NiiVue.on
-  // is added to the subsciptions to the next method. These callbacks are called whenever subject.next is called within
-  // various NiiVue methods.
-  /**
-   * register a callback function to run when known Niivue events happen
-   * @param event - the name of the event to watch for. Event names are shown in the type column
-   * @param callback - the function to call when the event happens
-   * @example
-   * niivue = new Niivue()
-   *
-   * // 'location' update event is fired when the crosshair changes position via user input
-   * function doSomethingWithLocationData(data)\{
-   *    // data has the shape \{mm: [N, N, N], vox: [N, N, N], frac: [N, N, N], values: this.volumes.map(v =\> \{return val\})\}
-   *    //...
-   * \}
-   */
-  on(event, callback) {
-    const knownEvents = Object.keys(this.eventsToSubjects);
-    if (!knownEvents.includes(event)) {
-      return;
-    }
-    const subject = this.eventsToSubjects[event];
-    const subscription = subject.subscribe({
-      next: (data) => callback(data)
-    });
-    this.subscriptions.push({ [event]: subscription });
-  }
-  /**
-   * off unsubscribes events and subjects (the opposite of on)
-   * @param event - the name of the event to watch for. Event names are shown in the type column
-   * @example
-   * niivue = new Niivue()
-   * niivue.off('location')
-   */
-  off(event) {
-    const knownEvents = Object.keys(this.eventsToSubjects);
-    if (!knownEvents.includes(event)) {
-      return;
-    }
-    const nsubs = this.subscriptions.length;
-    for (let i = 0; i < nsubs; i++) {
-      const key = Object.keys(this.subscriptions[i])[0];
-      if (key === event) {
-        this.subscriptions[i][event].unsubscribe();
-        this.subscriptions.splice(i, 1);
-        return;
-      }
-    }
-  }
   /**
    * attach the Niivue instance to a canvas element directly
    * @param canvas - the canvas element reference
@@ -24302,6 +24216,12 @@ var Niivue = class _Niivue {
       this.moveCrosshairInVox(0, -1, 0);
     } else if (e.code === "KeyK" && this.opts.sliceType !== 4 /* RENDER */) {
       this.moveCrosshairInVox(0, 1, 0);
+    } else if (e.code === "KeyM" && this.opts.sliceType !== 4 /* RENDER */) {
+      this.opts.dragMode++;
+      if (this.opts.dragMode >= 4 /* slicer3D */) {
+        this.opts.dragMode = 0 /* none */;
+      }
+      log.info("drag mode changed to ", DRAG_MODE[this.opts.dragMode]);
     } else if (e.code === "ArrowLeft") {
       this.setFrame4D(this.volumes[0].id, this.volumes[0].frame4D - 1);
     } else if (e.code === "ArrowRight") {
@@ -24538,7 +24458,6 @@ var Niivue = class _Niivue {
                   gl: this.gl,
                   name: file.name
                 }).then((mesh) => {
-                  this.uiData.loading$.next(false);
                   this.addMesh(mesh);
                 }).catch((e2) => {
                   throw e2;
@@ -24615,6 +24534,9 @@ var Niivue = class _Niivue {
    * @see {@link https://niivue.github.io/niivue/features/layout.html|live demo usage}
    */
   setMultiplanarLayout(layout) {
+    if (typeof layout === "string") {
+      layout = parseInt(layout);
+    }
     this.opts.multiplanarLayout = layout;
     this.drawScene();
   }
@@ -24845,7 +24767,7 @@ var Niivue = class _Niivue {
     const perm = drawingBitmap.permRAS;
     const vx = dims[1] * dims[2] * dims[3];
     this.drawBitmap = new Uint8Array(vx);
-    this.drawTexture = this.r8Tex(this.drawTexture, this.gl.TEXTURE7, this.back.dims, true);
+    this.drawTexture = this.r8Tex(this.drawTexture, TEXTURE7_DRAW, this.back.dims, true);
     const layout = [0, 0, 0];
     for (let i = 0; i < 3; i++) {
       for (let j2 = 0; j2 < 3; j2++) {
@@ -26053,14 +25975,8 @@ var Niivue = class _Niivue {
    * @see {@link https://niivue.github.io/niivue/features/mask.html|live demo usage}
    */
   async loadVolumes(volumeList) {
-    this.on("loading", (isLoading) => {
-      if (isLoading) {
-        this.loadingText = "loading...";
-        this.drawScene();
-      } else {
-        this.loadingText = this.opts.loadingText;
-      }
-    });
+    this.loadingText = "loading...";
+    this.drawScene();
     if (this.thumbnailVisible) {
       this.deferredVolumes = volumeList;
       return this;
@@ -26068,9 +25984,7 @@ var Niivue = class _Niivue {
     this.volumes = [];
     this.gl.clearColor(0, 0, 0, 1);
     this.gl.clear(this.gl.COLOR_BUFFER_BIT);
-    this.uiData.loading$.next(false);
     for (let i = 0; i < volumeList.length; i++) {
-      this.uiData.loading$.next(true);
       if (volumeList[i].colorMap !== void 0) {
         volumeList[i].colormap = volumeList[i].colorMap;
       }
@@ -26091,7 +26005,6 @@ var Niivue = class _Niivue {
         colorbarVisible: volumeList[i].colorbarVisible
       };
       await this.addVolumeFromUrl(imageOptions);
-      this.uiData.loading$.next(false);
     }
     return this;
   }
@@ -26100,6 +26013,16 @@ var Niivue = class _Niivue {
    * @see {@link https://niivue.github.io/niivue/features/multiuser.meshes.html|live demo usage}
    */
   async addMeshFromUrl(meshOptions) {
+    const ext = this.getFileExt(meshOptions.url);
+    if (ext === "JCON" || ext === "JSON") {
+      const response = await fetch(meshOptions.url, {});
+      const json = await response.json();
+      const mesh2 = this.loadConnectomeAsMesh(json);
+      this.mediaUrlMap.set(mesh2, meshOptions.url);
+      this.onMeshAddedFromUrl(meshOptions, mesh2);
+      this.addMesh(mesh2);
+      return mesh2;
+    }
     const mesh = await NVMesh.loadFromUrl({ ...meshOptions, gl: this.gl });
     this.mediaUrlMap.set(mesh, meshOptions.url);
     this.onMeshAddedFromUrl(meshOptions, mesh);
@@ -26116,14 +26039,8 @@ var Niivue = class _Niivue {
    * @see {@link https://niivue.github.io/niivue/features/meshes.html|live demo usage}
    */
   async loadMeshes(meshList) {
-    this.on("loading", (isLoading) => {
-      if (isLoading) {
-        this.loadingText = "loading...";
-        this.drawScene();
-      } else {
-        this.loadingText = this.opts.loadingText;
-      }
-    });
+    this.loadingText = "loading...";
+    this.drawScene();
     if (this.thumbnailVisible) {
       this.deferredMeshes = meshList;
       return this;
@@ -26133,11 +26050,8 @@ var Niivue = class _Niivue {
     this.meshes = [];
     this.gl.clearColor(0, 0, 0, 1);
     this.gl.clear(this.gl.COLOR_BUFFER_BIT);
-    this.uiData.loading$.next(false);
     for (let i = 0; i < meshList.length; i++) {
-      this.uiData.loading$.next(true);
       await this.addMeshFromUrl(meshList[i]);
-      this.uiData.loading$.next(false);
     }
     this.drawScene();
     return this;
@@ -26190,6 +26104,22 @@ var Niivue = class _Niivue {
     );
     this.drawScene();
   }
+  loadConnectomeAsMesh(json) {
+    let connectome = json;
+    if ("data_type" in json && json.data_type === "fs_pointset") {
+      connectome = NVConnectome.convertFreeSurferConnectome(json);
+      log.warn("converted FreeSurfer connectome", connectome);
+    } else if ("nodes" in json) {
+      const nodes = json.nodes;
+      if ("names" in nodes && "X" in nodes && "Y" in nodes && "Z" in nodes && "Color" in nodes && "Size" in nodes) {
+        connectome = NVConnectome.convertLegacyConnectome(json);
+        log.warn("converted legacy connectome", connectome);
+      }
+    } else {
+      throw new Error("not a known connectome format");
+    }
+    return new NVConnectome(this.gl, connectome);
+  }
   /**
    * load a connectome specified by json
    * @param connectome - model
@@ -26197,27 +26127,13 @@ var Niivue = class _Niivue {
    * @see {@link https://niivue.github.io/niivue/features/connectome.html|live demo usage}
    */
   loadConnectome(json) {
-    this.on("loading", (isLoading) => {
-      if (isLoading) {
-        this.loadingText = "loading...";
-        this.drawScene();
-      } else {
-        this.loadingText = this.opts.loadingText;
-      }
-    });
+    this.loadingText = "loading...";
+    this.drawScene();
     this.meshes = [];
     this.gl.clearColor(0, 0, 0, 1);
     this.gl.clear(this.gl.COLOR_BUFFER_BIT);
-    this.uiData.loading$.next(true);
-    let connectome = json;
-    const nodes = json.nodes;
-    if ("names" in nodes && "X" in nodes && "Y" in nodes && "Z" in nodes && "Color" in nodes && "Size" in nodes) {
-      connectome = NVConnectome.convertLegacyConnectome(json);
-      log.warn("converted legacy connectome", connectome);
-    }
-    const mesh = new NVConnectome(this.gl, connectome);
+    const mesh = this.loadConnectomeAsMesh(json);
     this.addMesh(mesh);
-    this.uiData.loading$.next(false);
     this.drawScene();
     return this;
   }
@@ -26238,7 +26154,7 @@ var Niivue = class _Niivue {
     this.drawBitmap = new Uint8Array(vx);
     this.drawClearAllUndoBitmaps();
     this.drawAddUndoBitmap();
-    this.drawTexture = this.r8Tex(this.drawTexture, this.gl.TEXTURE7, this.back.dims, true);
+    this.drawTexture = this.r8Tex(this.drawTexture, TEXTURE7_DRAW, this.back.dims, true);
     this.refreshDrawing(false);
   }
   // not included in public docs
@@ -26299,29 +26215,29 @@ var Niivue = class _Niivue {
     gl.viewport(0, 0, this.back.dims[1], this.back.dims[2]);
     gl.disable(gl.BLEND);
     let img16 = img2ras16(this.back);
-    const background = this.r16Tex(null, gl.TEXTURE3, this.back.dims, img16);
+    const background = this.r16Tex(null, TEXTURE11_GC_BACK, this.back.dims, img16);
     for (let i = 1; i < nv; i++) {
       img16[i] = this.drawBitmap[i];
     }
-    const label0 = this.r16Tex(null, gl.TEXTURE6, this.back.dims, img16);
-    const label1 = this.r16Tex(null, gl.TEXTURE7, this.back.dims, img16);
+    const label0 = this.r16Tex(null, TEXTURE14_GC_LABEL0, this.back.dims, img16);
+    const label1 = this.r16Tex(null, TEXTURE15_GC_LABEL1, this.back.dims, img16);
     const kMAX_STRENGTH = 1e4;
     for (let i = 1; i < nv; i++) {
       if (img16[i] > 0) {
         img16[i] = kMAX_STRENGTH;
       }
     }
-    const strength0 = this.r16Tex(null, gl.TEXTURE4, this.back.dims, img16);
-    const strength1 = this.r16Tex(null, gl.TEXTURE5, this.back.dims, img16);
+    const strength0 = this.r16Tex(null, TEXTURE12_GC_STRENGTH0, this.back.dims, img16);
+    const strength1 = this.r16Tex(null, TEXTURE13_GC_STRENGTH1, this.back.dims, img16);
     gl.bindVertexArray(this.genericVAO);
     const shader = this.growCutShader;
     shader.use(gl);
     const iterations = 128;
     gl.uniform1i(shader.uniforms.finalPass, 0);
-    gl.uniform1i(shader.uniforms.inputTexture0, 3);
+    gl.uniform1i(shader.uniforms.backTex, 11);
     for (let j = 0; j < iterations; j++) {
-      gl.uniform1i(shader.uniforms.inputTexture1, 6);
-      gl.uniform1i(shader.uniforms.inputTexture2, 4);
+      gl.uniform1i(shader.uniforms.labelTex, 14);
+      gl.uniform1i(shader.uniforms.strengthTex, 12);
       for (let i = 0; i < this.back.dims[3]; i++) {
         const coordZ = 1 / this.back.dims[3] * (i + 0.5);
         gl.uniform1f(shader.uniforms.coordZ, coordZ);
@@ -26337,8 +26253,8 @@ var Niivue = class _Niivue {
       if (j === iterations - 1) {
         gl.uniform1i(shader.uniforms.finalPass, 1);
       }
-      gl.uniform1i(shader.uniforms.inputTexture1, 7);
-      gl.uniform1i(shader.uniforms.inputTexture2, 5);
+      gl.uniform1i(shader.uniforms.labelTex, 15);
+      gl.uniform1i(shader.uniforms.strengthTex, 13);
       for (let i = 0; i < this.back.dims[3]; i++) {
         const coordZ = 1 / this.back.dims[3] * (i + 0.5);
         gl.uniform1f(shader.uniforms.coordZ, coordZ);
@@ -26384,14 +26300,6 @@ var Niivue = class _Niivue {
     for (let i = 1; i < nv; i++) {
       this.drawBitmap[i] = img16[i];
     }
-    gl.activeTexture(gl.TEXTURE2);
-    gl.bindTexture(gl.TEXTURE_3D, this.overlayTexture);
-    gl.activeTexture(gl.TEXTURE3);
-    gl.bindTexture(gl.TEXTURE_2D, this.fontTexture);
-    gl.activeTexture(gl.TEXTURE4);
-    gl.bindTexture(gl.TEXTURE_2D, this.bmpTexture);
-    gl.activeTexture(gl.TEXTURE7);
-    gl.bindTexture(gl.TEXTURE_3D, this.drawTexture);
     gl.deleteTexture(background);
     gl.deleteTexture(strength0);
     gl.deleteTexture(strength1);
@@ -26817,7 +26725,7 @@ var Niivue = class _Niivue {
    */
   closeDrawing() {
     this.drawClearAllUndoBitmaps();
-    this.rgbaTex(this.drawTexture, this.gl.TEXTURE7, [2, 2, 2, 2], true);
+    this.rgbaTex(this.drawTexture, TEXTURE7_DRAW, [2, 2, 2, 2], true);
     this.drawBitmap = null;
     this.drawScene();
   }
@@ -26843,7 +26751,7 @@ var Niivue = class _Niivue {
     } else if (vx !== this.drawBitmap.length) {
       log.warn("Drawing bitmap must match the background image");
     }
-    this.gl.activeTexture(this.gl.TEXTURE7);
+    this.gl.activeTexture(TEXTURE7_DRAW);
     this.gl.bindTexture(this.gl.TEXTURE_3D, this.drawTexture);
     this.gl.texSubImage3D(
       this.gl.TEXTURE_3D,
@@ -26954,11 +26862,11 @@ var Niivue = class _Niivue {
           this.bmpTexture = this.gl.createTexture();
           pngTexture = this.bmpTexture;
           this.bmpTextureWH = img.width / img.height;
-          this.gl.activeTexture(this.gl.TEXTURE4);
+          this.gl.activeTexture(TEXTURE4_THUMBNAIL);
           this.bmpShader.use(this.gl);
           this.gl.uniform1i(this.bmpShader.uniforms.bmpTexture, 4);
         } else if (textureNum === 5) {
-          this.gl.activeTexture(this.gl.TEXTURE5);
+          this.gl.activeTexture(TEXTURE5_MATCAP);
           if (this.matCapTexture !== null) {
             this.gl.deleteTexture(this.matCapTexture);
           }
@@ -26966,7 +26874,7 @@ var Niivue = class _Niivue {
           pngTexture = this.matCapTexture;
         } else {
           this.fontShader.use(this.gl);
-          this.gl.activeTexture(this.gl.TEXTURE3);
+          this.gl.activeTexture(TEXTURE3_FONT);
           this.gl.uniform1i(this.fontShader.uniforms.fontTexture, 3);
           if (this.fontTexture !== null) {
             this.gl.deleteTexture(this.fontTexture);
@@ -27201,9 +27109,9 @@ var Niivue = class _Niivue {
     this.gl.cullFace(this.gl.FRONT);
     this.gl.enable(this.gl.BLEND);
     this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
-    this.volumeTexture = this.rgbaTex(this.volumeTexture, this.gl.TEXTURE0, [2, 2, 2, 2], true);
-    this.overlayTexture = this.rgbaTex(this.overlayTexture, this.gl.TEXTURE2, [2, 2, 2, 2], true);
-    this.drawTexture = this.r8Tex(this.drawTexture, this.gl.TEXTURE7, [2, 2, 2, 2], true);
+    this.volumeTexture = this.rgbaTex(this.volumeTexture, TEXTURE0_BACK_VOL, [2, 2, 2, 2], true);
+    this.overlayTexture = this.rgbaTex(this.overlayTexture, TEXTURE2_OVERLAY_VOL, [2, 2, 2, 2], true);
+    this.drawTexture = this.r8Tex(this.drawTexture, TEXTURE7_DRAW, [2, 2, 2, 2], true);
     const rectStrip = [
       1,
       1,
@@ -27340,10 +27248,10 @@ var Niivue = class _Niivue {
     gl.disable(gl.CULL_FACE);
     gl.viewport(0, 0, hdr.dims[1], hdr.dims[2]);
     gl.disable(gl.BLEND);
-    const tempTex3D = this.rgbaTex(null, this.gl.TEXTURE5, hdr.dims);
+    const tempTex3D = this.rgbaTex(null, TEXTURE8_GRADIENT_TEMP, hdr.dims);
     const blurShader = this.blurShader;
     blurShader.use(gl);
-    gl.activeTexture(gl.TEXTURE0);
+    gl.activeTexture(TEXTURE0_BACK_VOL);
     gl.bindTexture(gl.TEXTURE_3D, this.volumeTexture);
     const blurRadius = 0.7;
     gl.uniform1i(blurShader.uniforms.intensityVol, 0);
@@ -27360,20 +27268,20 @@ var Niivue = class _Niivue {
     }
     const sobelShader = this.sobelShader;
     sobelShader.use(gl);
-    gl.activeTexture(gl.TEXTURE1);
+    gl.activeTexture(TEXTURE8_GRADIENT_TEMP);
     gl.bindTexture(gl.TEXTURE_3D, tempTex3D);
-    gl.uniform1i(sobelShader.uniforms.intensityVol, 1);
+    gl.uniform1i(sobelShader.uniforms.intensityVol, 8);
     const sobelRadius = 0.7;
     gl.uniform1f(sobelShader.uniforms.dX, sobelRadius / hdr.dims[1]);
     gl.uniform1f(sobelShader.uniforms.dY, sobelRadius / hdr.dims[2]);
     gl.uniform1f(sobelShader.uniforms.dZ, sobelRadius / hdr.dims[3]);
     gl.uniform1f(sobelShader.uniforms.coordZ, 0.5);
     gl.bindVertexArray(vao2);
-    gl.activeTexture(gl.TEXTURE0);
+    gl.activeTexture(TEXTURE0_BACK_VOL);
     if (this.gradientTexture !== null) {
       gl.deleteTexture(this.gradientTexture);
     }
-    this.gradientTexture = this.rgbaTex(this.gradientTexture, this.gl.TEXTURE6, hdr.dims);
+    this.gradientTexture = this.rgbaTex(this.gradientTexture, TEXTURE6_GRADIENT, hdr.dims);
     for (let i = 0; i < hdr.dims[3] - 1; i++) {
       const coordZ = 1 / hdr.dims[3] * (i + 0.5);
       gl.uniform1f(sobelShader.uniforms.coordZ, coordZ);
@@ -27555,7 +27463,7 @@ var Niivue = class _Niivue {
       this.back.matRAS = overlayItem.matRAS;
       this.back.dims = overlayItem.dimsRAS;
       this.back.pixDims = overlayItem.pixDimsRAS;
-      outTexture = this.rgbaTex(this.volumeTexture, this.gl.TEXTURE0, overlayItem.dimsRAS);
+      outTexture = this.rgbaTex(this.volumeTexture, TEXTURE0_BACK_VOL, overlayItem.dimsRAS);
       const { volScale: volScale2, vox: vox2 } = this.sliceScale(true);
       this.volScale = volScale2;
       this.vox = vox2;
@@ -27604,7 +27512,7 @@ var Niivue = class _Niivue {
       );
       mat46.invert(mtx, mtx);
       if (layer === 1) {
-        outTexture = this.rgbaTex(this.overlayTexture, this.gl.TEXTURE2, this.back.dims);
+        outTexture = this.rgbaTex(this.overlayTexture, TEXTURE2_OVERLAY_VOL, this.back.dims);
         this.overlayTexture = outTexture;
         this.overlayTextureID = outTexture;
       } else {
@@ -27617,7 +27525,7 @@ var Niivue = class _Niivue {
     this.gl.viewport(0, 0, this.back.dims[1], this.back.dims[2]);
     this.gl.disable(this.gl.BLEND);
     const tempTex3D = this.gl.createTexture();
-    this.gl.activeTexture(this.gl.TEXTURE6);
+    this.gl.activeTexture(TEXTURE9_ORIENT);
     this.gl.bindTexture(this.gl.TEXTURE_3D, tempTex3D);
     this.gl.texParameteri(this.gl.TEXTURE_3D, this.gl.TEXTURE_MIN_FILTER, this.gl.NEAREST);
     this.gl.texParameteri(this.gl.TEXTURE_3D, this.gl.TEXTURE_MAG_FILTER, this.gl.NEAREST);
@@ -27766,22 +27674,22 @@ var Niivue = class _Niivue {
     const isUseCopyTexSubImage3D = false;
     if (isUseCopyTexSubImage3D) {
       if (layer > 1) {
-        blendTexture = this.rgbaTex(blendTexture, this.gl.TEXTURE5, this.back.dims, true);
+        blendTexture = this.rgbaTex(blendTexture, TEXTURE10_BLEND, this.back.dims, true);
         this.gl.bindTexture(this.gl.TEXTURE_3D, blendTexture);
         for (let i = 0; i < this.back.dims[3]; i++) {
           this.gl.framebufferTextureLayer(this.gl.FRAMEBUFFER, this.gl.COLOR_ATTACHMENT0, this.overlayTexture, 0, i);
-          this.gl.activeTexture(this.gl.TEXTURE5);
+          this.gl.activeTexture(TEXTURE10_BLEND);
           this.gl.copyTexSubImage3D(this.gl.TEXTURE_3D, 0, 0, 0, i, 0, 0, this.back.dims[1], this.back.dims[2]);
         }
       } else {
-        blendTexture = this.rgbaTex(blendTexture, this.gl.TEXTURE5, [2, 2, 2, 2], true);
+        blendTexture = this.rgbaTex(blendTexture, TEXTURE10_BLEND, [2, 2, 2, 2], true);
       }
     } else {
       if (layer > 1) {
         if (!this.back.dims) {
           throw new Error("back.dims undefined");
         }
-        blendTexture = this.rgbaTex(blendTexture, this.gl.TEXTURE5, this.back.dims);
+        blendTexture = this.rgbaTex(blendTexture, TEXTURE10_BLEND, this.back.dims);
         this.gl.bindTexture(this.gl.TEXTURE_3D, blendTexture);
         const passShader = this.passThroughShader;
         passShader.use(this.gl);
@@ -27793,11 +27701,11 @@ var Niivue = class _Niivue {
           this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
         }
       } else {
-        blendTexture = this.rgbaTex(blendTexture, this.gl.TEXTURE5, [2, 2, 2, 2]);
+        blendTexture = this.rgbaTex(blendTexture, TEXTURE10_BLEND, [2, 2, 2, 2]);
       }
     }
     orientShader.use(this.gl);
-    this.gl.activeTexture(this.gl.TEXTURE1);
+    this.gl.activeTexture(TEXTURE1_COLORMAPS);
     let colormapLabelTexture = null;
     if (overlayItem.colormapLabel !== null && overlayItem.colormapLabel.lut.length > 7) {
       const nLabel = overlayItem.colormapLabel.max - overlayItem.colormapLabel.min + 1;
@@ -27840,8 +27748,8 @@ var Niivue = class _Niivue {
     this.gl.uniform1f(orientShader.uniforms.cal_minNeg ?? null, mnNeg);
     this.gl.uniform1f(orientShader.uniforms.cal_maxNeg ?? null, mxNeg);
     this.gl.bindTexture(this.gl.TEXTURE_3D, tempTex3D);
-    this.gl.uniform1i(orientShader.uniforms.intensityVol ?? null, 6);
-    this.gl.uniform1i(orientShader.uniforms.blend3D ?? null, 5);
+    this.gl.uniform1i(orientShader.uniforms.intensityVol ?? null, 9);
+    this.gl.uniform1i(orientShader.uniforms.blend3D ?? null, 10);
     this.gl.uniform1i(orientShader.uniforms.colormap ?? null, 1);
     this.gl.uniform1f(orientShader.uniforms.scl_inter ?? null, hdr.scl_inter);
     this.gl.uniform1f(orientShader.uniforms.scl_slope ?? null, hdr.scl_slope);
@@ -28004,11 +27912,11 @@ var Niivue = class _Niivue {
     this.gl.uniform1f(shader.uniforms.drawOpacity, this.drawOpacity);
     if (colormapLabelTexture !== null) {
       this.gl.deleteTexture(colormapLabelTexture);
-      this.gl.activeTexture(this.gl.TEXTURE1);
+      this.gl.activeTexture(TEXTURE1_COLORMAPS);
       this.gl.bindTexture(this.gl.TEXTURE_2D, this.colormapTexture);
     }
     this.gl.uniform1i(shader.uniforms.drawing, 7);
-    this.gl.activeTexture(this.gl.TEXTURE7);
+    this.gl.activeTexture(TEXTURE7_DRAW);
     this.gl.bindTexture(this.gl.TEXTURE_3D, this.drawTexture);
     this.updateInterpolation(layer);
   }
@@ -28081,7 +27989,7 @@ var Niivue = class _Niivue {
   /**
    * modulate intensity of one image based on intensity of another
    * @param idTarget - the ID of the NVImage to be biased
-   * @param idModulation - the ID of the NVImage that controls bias (null to disable modulation)
+   * @param idModulation - the ID of the NVImage that controls bias (empty string to disable modulation)
    * @param modulateAlpha - does the modulation influence alpha transparency (values greater than 1).
    * @example niivue.setModulationImage(niivue.volumes[0].id, niivue.volumes[1].id);
    * @see {@link https://niivue.github.io/niivue/features/modulate.html|live demo scalar usage}
@@ -28090,7 +27998,9 @@ var Niivue = class _Niivue {
   setModulationImage(idTarget, idModulation, modulateAlpha = 0) {
     const idxTarget = this.getVolumeIndexByID(idTarget);
     let idxModulation = null;
-    idxModulation = this.getVolumeIndexByID(idModulation);
+    if (idModulation.length > 0) {
+      idxModulation = this.getVolumeIndexByID(idModulation);
+    }
     this.volumes[idxTarget].modulationImage = idxModulation;
     this.volumes[idxTarget].modulateAlpha = modulateAlpha;
     this.updateGLVolume();
@@ -28181,7 +28091,7 @@ var Niivue = class _Niivue {
       return null;
     }
     texture = this.gl.createTexture();
-    this.gl.activeTexture(this.gl.TEXTURE1);
+    this.gl.activeTexture(TEXTURE1_COLORMAPS);
     this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
     this.gl.texStorage2D(this.gl.TEXTURE_2D, 1, this.gl.RGBA8, nCol, nRow);
     this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
@@ -28821,7 +28731,7 @@ var Niivue = class _Niivue {
       throw new Error("colorbarShader undefined");
     }
     this.colorbarShader.use(this.gl);
-    this.gl.activeTexture(this.gl.TEXTURE1);
+    this.gl.activeTexture(TEXTURE1_COLORMAPS);
     this.gl.bindTexture(this.gl.TEXTURE_2D, this.colormapTexture);
     this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.NEAREST);
     this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.NEAREST);
@@ -29064,9 +28974,9 @@ var Niivue = class _Niivue {
       interp = this.gl.NEAREST;
     }
     if (layer === 0) {
-      this.gl.activeTexture(this.gl.TEXTURE0);
+      this.gl.activeTexture(TEXTURE0_BACK_VOL);
     } else {
-      this.gl.activeTexture(this.gl.TEXTURE2);
+      this.gl.activeTexture(TEXTURE2_OVERLAY_VOL);
     }
     this.gl.texParameteri(this.gl.TEXTURE_3D, this.gl.TEXTURE_MIN_FILTER, interp);
     this.gl.texParameteri(this.gl.TEXTURE_3D, this.gl.TEXTURE_MAG_FILTER, interp);
@@ -29636,6 +29546,12 @@ var Niivue = class _Niivue {
     if (graph.opacity <= 0 || graph.LTWH[2] <= 5 || graph.LTWH[3] <= 5) {
       return;
     }
+    if (graph.LTWH[0] + graph.LTWH[2] > this.gl.canvas.width) {
+      return;
+    }
+    if (graph.LTWH[1] + graph.LTWH[3] > this.gl.canvas.height) {
+      return;
+    }
     graph.backColor = [0.15, 0.15, 0.15, graph.opacity];
     graph.lineColor = [1, 1, 1, 1];
     if (this.opts.backColor[0] + this.opts.backColor[1] + this.opts.backColor[2] > 1.5) {
@@ -29899,7 +29815,7 @@ var Niivue = class _Niivue {
       shader.use(this.gl);
       gl.uniform1i(shader.uniforms.backgroundMasksOverlays, this.backgroundMasksOverlays);
       if (this.gradientTextureAmount > 0) {
-        gl.activeTexture(gl.TEXTURE6);
+        gl.activeTexture(TEXTURE6_GRADIENT);
         gl.bindTexture(gl.TEXTURE_3D, this.gradientTexture);
         const modelMatrix = this.calculateModelMatrix(azimuth, elevation);
         const iModelMatrix = mat46.create();
@@ -30307,7 +30223,7 @@ var Niivue = class _Niivue {
         continue;
       }
       if (shader.isMatcap) {
-        gl.activeTexture(gl.TEXTURE6);
+        gl.activeTexture(TEXTURE5_MATCAP);
         gl.bindTexture(gl.TEXTURE_2D, this.matCapTexture);
       }
       gl.bindVertexArray(this.meshes[i].vao);
@@ -30367,7 +30283,7 @@ var Niivue = class _Niivue {
         radius = range[0] * 0.02;
       }
       radius *= this.opts.crosshairWidth;
-      this.crosshairs3D = NiivueObject3D.generateCrosshairs(this.gl, 1, mm, mn, mx, radius);
+      this.crosshairs3D = NiivueObject3D.generateCrosshairs(this.gl, 1, mm, mn, mx, radius, 20, this.opts.crosshairGap);
       this.crosshairs3D.mm = mm;
     }
     if (!this.surfaceShader) {