@niivue/niivue 0.24.2 → 0.26.3

package/dist/niivue.es.js

@@ -91,7 +91,7 @@ function fromValues$3(m00, m01, m02, m10, m11, m12, m20, m21, m22) {
   out[8] = m22;
   return out;
 }
-function multiply$2(out, a, b) {
+function multiply$1(out, a, b) {
   var a00 = a[0], a01 = a[1], a02 = a[2];
   var a10 = a[3], a11 = a[4], a12 = a[5];
   var a20 = a[6], a21 = a[7], a22 = a[8];
@@ -286,7 +286,7 @@ function invert(out, a) {
   out[15] = (a20 * b03 - a21 * b01 + a22 * b00) * det;
   return out;
 }
-function multiply$1(out, a, b) {
+function multiply(out, a, b) {
   var a00 = a[0], a01 = a[1], a02 = a[2], a03 = a[3];
   var a10 = a[4], a11 = a[5], a12 = a[6], a13 = a[7];
   var a20 = a[8], a21 = a[9], a22 = a[10], a23 = a[11];
@@ -500,7 +500,7 @@ function multiplyScalar(out, a, b) {
   out[15] = a[15] * b;
   return out;
 }
-var mul$1 = multiply$1;
+var mul = multiply;
 function create$1() {
   var out = new ARRAY_TYPE(3);
   if (ARRAY_TYPE != Float32Array) {
@@ -609,6 +609,7 @@ function angle(a, b) {
   var ax = a[0], ay = a[1], az = a[2], bx = b[0], by = b[1], bz = b[2], mag1 = Math.sqrt(ax * ax + ay * ay + az * az), mag2 = Math.sqrt(bx * bx + by * by + bz * bz), mag = mag1 * mag2, cosine = mag && dot(a, b) / mag;
   return Math.acos(Math.min(Math.max(cosine, -1), 1));
 }
+var sub = subtract;
 var len = length$1;
 (function() {
   var vec = create$1();
@@ -662,13 +663,6 @@ function add(out, a, b) {
   out[3] = a[3] + b[3];
   return out;
 }
-function multiply(out, a, b) {
-  out[0] = a[0] * b[0];
-  out[1] = a[1] * b[1];
-  out[2] = a[2] * b[2];
-  out[3] = a[3] * b[3];
-  return out;
-}
 function transformMat4(out, a, m) {
   var x2 = a[0], y = a[1], z = a[2], w = a[3];
   out[0] = m[0] * x2 + m[4] * y + m[8] * z + m[12] * w;
@@ -677,7 +671,6 @@ function transformMat4(out, a, m) {
   out[3] = m[3] * x2 + m[7] * y + m[11] * z + m[15] * w;
   return out;
 }
-var mul = multiply;
 (function() {
   var vec = create();
   return function(a, stride, offset, count, fn, arg2) {
@@ -786,7 +779,19 @@ float frac2ndc(vec3 frac) {
 	
 }
 void main() {
+  if (fColor.x > 2.0) {
+    fColor = vec4(1.0, 0.0, 0.0, 0.5);
+    return;
+  }
 	fColor = vec4(0.0,0.0,0.0,0.0);
+	vec4 clipPlaneColorX = clipPlaneColor;
+	//if (clipPlaneColor.a < 0.0)
+	//	clipPlaneColorX.a = - 1.0;
+	bool isColorPlaneInVolume = false;
+	if (clipPlaneColorX.a < 0.0) {
+		isColorPlaneInVolume = true;
+		clipPlaneColorX.a = 0.0;
+	}
 	//fColor = vec4(vColor.rgb, 1.0); return;
 	vec3 start = vColor;
 	gl_FragDepth = 0.0;
@@ -813,19 +818,23 @@ void main() {
 	vec4 deltaDirFast = vec4(dir.xyz * stepSizeFast, stepSizeFast);
 	while (samplePos.a <= len) {
 		float val = texture(volume, samplePos.xyz).a;
-		if (val > 0.01) break;
+    if (val > 0.01) {
+      break;
+    }
 		samplePos += deltaDirFast; //advance ray position
 	}
 	if ((samplePos.a >= len) && ((overlays < 1.0) || (backgroundMasksOverlays > 0))) {
-		if (isClip)
-			fColor += clipPlaneColor;
+    if (isClip){
+			fColor += clipPlaneColorX;
+    }
 		return;
 	}
 	fColor = vec4(1.0, 1.0, 1.0, 1.0);
 	//gl_FragDepth = frac2ndc(samplePos.xyz); //crude due to fast pass resolution
 	samplePos -= deltaDirFast;
-	if (samplePos.a < 0.0)
+  if (samplePos.a < 0.0){
 		vec4 samplePos = vec4(start.xyz, 0.0); //ray position
+  }
 	//end: fast pass
 	vec4 colAcc = vec4(0.0,0.0,0.0,0.0);
 	vec4 firstHit = vec4(0.0,0.0,0.0,2.0 * lenNoClip);
@@ -836,23 +845,29 @@ void main() {
 	while (samplePos.a <= len) {
 		vec4 colorSample = texture(volume, samplePos.xyz);
 		samplePos += deltaDir; //advance ray position
-		if (colorSample.a < 0.01) continue;
-		if (firstHit.a > lenNoClip)
-			firstHit = samplePos;
-		backNearest = min(backNearest, samplePos.a);
-		colorSample.a = 1.0-pow((1.0 - colorSample.a), opacityCorrection);
-		colorSample.rgb *= colorSample.a;
-		colAcc= (1.0 - colAcc.a) * colorSample + colAcc;
-		if ( colAcc.a > earlyTermination )
-			break;
+		if (colorSample.a >= 0.01) {
+			if (firstHit.a > lenNoClip)
+				firstHit = samplePos;
+			backNearest = min(backNearest, samplePos.a);
+			colorSample.a = 1.0-pow((1.0 - colorSample.a), opacityCorrection);
+			colorSample.rgb *= colorSample.a;
+			colAcc= (1.0 - colAcc.a) * colorSample + colAcc;
+			if ( colAcc.a > earlyTermination )
+				break;
+		}
 	}
-	if (firstHit.a < len)
+  if (firstHit.a < len){
 		gl_FragDepth = frac2ndc(firstHit.xyz);
+  }
 	colAcc.a = (colAcc.a / earlyTermination) * backOpacity;
 	fColor = colAcc;
-	if (isClip) //CR
-		fColor.rgb = mix(fColor.rgb, clipPlaneColor.rgb, clipPlaneColor.a * 0.15);
-	if (overlays < 1.0) return;
+	//if (isClip) //CR
+	if ((isColorPlaneInVolume) && (clipPos.a != samplePos.a) && (abs(firstHit.a - clipPos.a) < deltaDir.a))
+		fColor.rgb = mix(fColor.rgb, clipPlaneColorX.rgb, abs(clipPlaneColor.a));
+		//fColor.rgb = mix(fColor.rgb, clipPlaneColorX.rgb, clipPlaneColorX.a * 0.65);
+  if (overlays < 1.0) {
+    return;
+  }
 	//overlay pass
 	len = lenNoClip;
 	samplePos = vec4(start.xyz, 0.0); //ray position
@@ -861,48 +876,56 @@ void main() {
 	deltaDirFast = vec4(dir.xyz * stepSizeFast, stepSizeFast);
 	while (samplePos.a <= len) {
 		float val = texture(overlay, samplePos.xyz).a;
-		if (val > 0.01) break;
+    if (val > 0.01) {
+      break;
+    }
 		samplePos += deltaDirFast; //advance ray position
 	}
 	if (samplePos.a >= len) {
-		if (isClip && (fColor.a == 0.0))
-			fColor += clipPlaneColor;
+    if (isClip && (fColor.a == 0.0)) {
+			fColor += clipPlaneColorX;
+    }
 		return;
 	}
 	samplePos -= deltaDirFast;
-	if (samplePos.a < 0.0)
+  if (samplePos.a < 0.0){
 		vec4 samplePos = vec4(start.xyz, 0.0); //ray position
+  }
 	//end: fast pass
 	float overFarthest = len;
 	colAcc = vec4(0.0, 0.0, 0.0, 0.0);
 	samplePos += deltaDir * ran; //jitter ray
 	vec4 overFirstHit = vec4(0.0,0.0,0.0,2.0 * len);
-	if (backgroundMasksOverlays > 0)
+  if (backgroundMasksOverlays > 0){
 		samplePos = firstHit;
+  }
 	while (samplePos.a <= len) {
 		vec4 colorSample = texture(overlay, samplePos.xyz);
 		samplePos += deltaDir; //advance ray position
-		if (colorSample.a < 0.01) continue;
-		if (overFirstHit.a > len)
-			overFirstHit = samplePos;
-		colorSample.a = 1.0-pow((1.0 - colorSample.a), opacityCorrection);
-		colorSample.rgb *= colorSample.a;
-		colAcc= (1.0 - colAcc.a) * colorSample + colAcc;
-		overFarthest = samplePos.a;
-		if ( colAcc.a > earlyTermination )
-			break;
+		if (colorSample.a >= 0.01) {
+			if (overFirstHit.a > len)
+				overFirstHit = samplePos;
+			colorSample.a = 1.0-pow((1.0 - colorSample.a), opacityCorrection);
+			colorSample.rgb *= colorSample.a;
+			colAcc= (1.0 - colAcc.a) * colorSample + colAcc;
+			overFarthest = samplePos.a;
+			if ( colAcc.a > earlyTermination )
+				break;
+		}
 	}
 	if (samplePos.a >= len) {
-		if (isClip && (fColor.a == 0.0))
-			fColor += clipPlaneColor;
+    if (isClip && (fColor.a == 0.0)){
+			fColor += clipPlaneColorX;
+    }
 		return;
 	}
 	//if (overFirstHit.a < len)
-		gl_FragDepth = frac2ndc(overFirstHit.xyz);
+	gl_FragDepth = frac2ndc(overFirstHit.xyz);
 	float overMix = colAcc.a;
 	float overlayDepth = 0.3;
-	if (fColor.a <= 0.0)
+  if (fColor.a <= 0.0){
 			overMix = 1.0;
+  }
 	else if (((overFarthest) > backNearest)) {
 		float dx = (overFarthest - backNearest)/1.73;
 		dx = fColor.a * pow(dx, overlayDepth);
@@ -917,15 +940,22 @@ layout(location=0) in vec3 pos;
 uniform int axCorSag;
 uniform float slice;
 uniform vec2 canvasWidthHeight;
+uniform vec3 panXYscale;
 uniform vec4 leftTopWidthHeight;
 out vec3 texPos;
 void main(void) {
 	//convert pixel x,y space 1..canvasWidth,1..canvasHeight to WebGL 1..-1,-1..1
 	vec2 frac;
-	frac.x = (leftTopWidthHeight.x + (pos.x * leftTopWidthHeight.z)) / canvasWidthHeight.x; //0..1
-	frac.y = 1.0 - ((leftTopWidthHeight.y + ((1.0 - pos.y) * leftTopWidthHeight.w)) / canvasWidthHeight.y); //1..0
+	vec3 vpos = pos;
+	frac.x = (leftTopWidthHeight.x + (vpos.x * leftTopWidthHeight.z)) / canvasWidthHeight.x; //0..1
+	frac.y = 1.0 - ((leftTopWidthHeight.y + ((1.0 - vpos.y) * leftTopWidthHeight.w)) / canvasWidthHeight.y); //1..0
+	//frac.x = pos.x; //0..1
+	//frac.y = pos.y; //1..0
+
 	frac = (frac * 2.0) - 1.0;
 	gl_Position = vec4(frac, 0.0, 1.0);
+	gl_Position.x += panXYscale.x;
+	gl_Position.y += panXYscale.y;
 	if (axCorSag == 1)
 		texPos = vec3(pos.x, slice, pos.y);
 	else if (axCorSag == 2)
@@ -974,7 +1004,68 @@ void main() {
 	color.rgb = mix(color.rgb, ocolor.rgb, ocolor.a);
 	color.a = aout;
 }`;
-var fragLineShader = `#version 300 es
+var vertSliceMMShader = `#version 300 es
+#line 4
+layout(location=0) in vec3 pos;
+uniform int axCorSag;
+uniform mat4 mvpMtx;
+uniform mat4 frac2mm;
+uniform float slice;
+out vec3 texPos;
+void main(void) {
+	texPos = vec3(pos.x, pos.y, slice);
+	if (axCorSag > 1)
+		texPos = vec3(slice, pos.x, pos.y);
+  else if (axCorSag > 0)
+		texPos = vec3(pos.x, slice, pos.y);
+	vec4 mm = frac2mm * vec4(texPos, 1.0);
+	//vec4 mm =  vec4(texPos, 1.0) * frac2mm;
+	gl_Position = mvpMtx * mm;
+	//gl_Position = mm;
+}`;
+var fragSliceMMShader = `#version 300 es
+#line 228
+precision highp int;
+precision highp float;
+uniform highp sampler3D volume, overlay;
+uniform int backgroundMasksOverlays;
+uniform float overlays;
+uniform float opacity;
+uniform float drawOpacity;
+uniform highp sampler3D drawing;
+in vec3 texPos;
+out vec4 color;
+void main() {
+	//color = vec4(1.0, 0.0, 1.0, 1.0);return;
+	vec4 background = texture(volume, texPos);
+	color = vec4(background.rgb, opacity);
+	vec4 ocolor = vec4(0.0);
+	if (overlays > 0.0) {
+		ocolor = texture(overlay, texPos);
+	}
+	float draw = texture(drawing, texPos).r;
+	if (draw > 0.0) {
+		vec3 dcolor = vec3(0.0, 0.0, 0.0);
+		if (draw >= (4.0/255.0))
+			dcolor.rgb = vec3(draw,0.0,draw);
+		else if (draw >= (3.0/255.0))
+			dcolor.b = 1.0;
+		else if (draw >= (2.0/255.0))
+			dcolor.g = 1.0;
+		else
+			dcolor.r = 1.0;
+		color.rgb = mix(color.rgb, dcolor, drawOpacity);
+		color.a = max(drawOpacity, color.a);
+	}
+	if ((backgroundMasksOverlays > 0) && (background.a == 0.0))
+		return;
+	//float aout = ocolor.a + (1.0 - ocolor.a) * color.a;
+	//if (aout <= 0.0) return;
+	//color.rgb = ((ocolor.rgb * ocolor.a) + (color.rgb * color.a * (1.0 - ocolor.a))) / aout;
+	color.rgb = mix(color.rgb, ocolor.rgb, ocolor.a);
+	color.a = 1.0;
+}`;
+var fragRectShader = `#version 300 es
 #line 189
 precision highp int;
 precision highp float;
@@ -1003,10 +1094,13 @@ var fragColorbarShader = `#version 300 es
 precision highp int;
 precision highp float;
 uniform highp sampler2D colormap;
+uniform float layer;
 in vec2 vColor;
 out vec4 color;
 void main() {
-	color = vec4(texture(colormap, vColor).rgb, 1.0);
+	float nlayer = float(textureSize(colormap, 0).y);
+	float fmap = (0.5 + layer) / nlayer;
+	color = vec4(texture(colormap, vec2(vColor.x, fmap)).rgb, 1.0);
 }`;
 var vertGraphShader = `#version 300 es
 #line 229
@@ -1047,7 +1141,7 @@ void main(void) {
 	frac = (frac * 2.0) - 1.0;
 	gl_Position = vec4(frac, 0.0, 1.0);
 }`;
-var vertLineShader = `#version 300 es
+var vertRectShader = `#version 300 es
 #line 229
 layout(location=0) in vec3 pos;
 uniform vec2 canvasWidthHeight;
@@ -1060,6 +1154,20 @@ void main(void) {
 	frac = (frac * 2.0) - 1.0;
 	gl_Position = vec4(frac, 0.0, 1.0);
 }`;
+var vertLineShader = `#version 300 es
+#line 229
+layout(location=0) in vec3 pos;
+uniform vec2 canvasWidthHeight;
+uniform float thickness;
+uniform vec4 startXYendXY;
+void main(void) {
+	vec2 posXY = mix(startXYendXY.xy, startXYendXY.zw, pos.x);
+	vec2 dir = normalize(startXYendXY.xy - startXYendXY.zw);
+	posXY += vec2(-dir.y, dir.x) * thickness * (pos.y - 0.5);
+	posXY.x = (posXY.x) / canvasWidthHeight.x; //0..1
+	posXY.y = 1.0 - (posXY.y / canvasWidthHeight.y); //1..0
+	gl_Position = vec4((posXY * 2.0) - 1.0, 0.0, 1.0);
+}`;
 var vertBmpShader = `#version 300 es
 #line 229
 layout(location=0) in vec3 pos;
@@ -1146,7 +1254,7 @@ in vec2 TexCoord;
 out vec4 FragColor;
 uniform float coordZ;
 uniform float layer;
-uniform float numLayers;
+//uniform float numLayers;
 uniform highp sampler2D colormap;
 uniform lowp sampler3D blend3D;
 uniform float opacity;
@@ -1176,7 +1284,9 @@ void main(void) {
  }
  idx = ((idx - uint(1)) % uint(100))+uint(1);
  float fx = (float(idx)+0.5) / 256.0;
- float y = (2.0 * layer + 1.0)/(2.0 * numLayers);
+ float nlayer = float(textureSize(colormap, 0).y) * 0.5; //0.5 as both each layer has positive and negative color slot
+ float y = (2.0 * layer + 1.0)/(4.0 * nlayer);
+ //float y = (2.0 * layer + 1.0)/(4.0 * numLayers);
  FragColor = texture(colormap, vec2(fx, y)).rgba;
  FragColor.a *= opacity;
  if (layer < 2.0) return;
@@ -1195,28 +1305,43 @@ in vec2 TexCoord;
 out vec4 FragColor;
 uniform float coordZ;
 uniform float layer;
-uniform float numLayers;
+//uniform float numLayers;
 uniform float scl_slope;
 uniform float scl_inter;
 uniform float cal_max;
 uniform float cal_min;
 uniform highp sampler2D colormap;
 uniform lowp sampler3D blend3D;
+uniform int modulation;
+uniform highp sampler3D modulationVol;
 uniform float opacity;
 uniform mat4 mtx;
 void main(void) {
  vec4 vx = vec4(TexCoord.xy, coordZ, 1.0) * mtx;
  float f = (scl_slope * float(texture(intensityVol, vx.xyz).r)) + scl_inter;
+ bool isNegative = (f < 0.0);
  float r = max(0.00001, abs(cal_max - cal_min));
  float mn = min(cal_min, cal_max);
- f = mix(0.0, 1.0, (f - mn) / r);
- //float y = 1.0 / numLayers;
- //y = ((layer + 0.5) * y);
+ float txl = mix(0.0, 1.0, (f - mn) / r);
  //https://stackoverflow.com/questions/5879403/opengl-texture-coordinates-in-pixel-space
- float y = (2.0 * layer + 1.0)/(2.0 * numLayers);
- FragColor = texture(colormap, vec2(f, y)).rgba;
+ float nlayer = float(textureSize(colormap, 0).y) * 0.5; //0.5 as both each layer has positive and negative color slot
+ float y = (2.0 * layer + 1.0)/(4.0 * nlayer);
+ FragColor = texture(colormap, vec2(txl, y)).rgba;
+ if (isNegative) {
+   y = (2.0 * layer + nlayer + nlayer + 1.0)/(4.0 * nlayer);
+   //select texels at positions 0 and 1 of lookup table: 
+   vec4 v0 = texture(colormap, vec2(0.5/256.0, y));
+   vec4 v1 = texture(colormap, vec2(1.5/256.0, y));
+   txl = mix(0.0, 1.0, (- f - mn) / r);
+   //detect bogus color: negative color slot not used than
+   // v0 = 1,1,1,0 and v1 = 0,0,0,1
+   if ((v0.r != 1.0) || (v0.a != 0.0) || (v1.r != 0.0) || (v1.a != 1.0))
+     FragColor = texture(colormap, vec2(txl, y));
+ }
  if (layer > 0.7)
    FragColor.a = step(0.00001, FragColor.a);
+ if (modulation > 0)
+   FragColor.rgb *= texture(modulationVol, vx.xyz).r;
  FragColor.a *= opacity;
  if (layer < 1.0) return;
  vec2 texXY = TexCoord.xy*0.5 +vec2(0.5,0.5);
@@ -1234,7 +1359,7 @@ in vec2 TexCoord;
 out vec4 FragColor;
 uniform float coordZ;
 uniform float layer;
-uniform float numLayers;
+//uniform float numLayers;
 uniform float scl_slope;
 uniform float scl_inter;
 uniform float cal_max;
@@ -1244,10 +1369,14 @@ uniform lowp sampler3D blend3D;
 uniform float opacity;
 uniform mat4 mtx;
 uniform bool hasAlpha;
+uniform int modulation;
+uniform highp sampler3D modulationVol;
 void main(void) {
  vec4 vx = vec4(TexCoord.xy, coordZ, 1.0) * mtx;
  uvec4 aColor = texture(intensityVol, vx.xyz);
  FragColor = vec4(float(aColor.r) / 255.0, float(aColor.g) / 255.0, float(aColor.b) / 255.0, float(aColor.a) / 255.0);
+ if (modulation > 0)
+   FragColor.rgb *= texture(modulationVol, vx.xyz).r;
  if (!hasAlpha)
    FragColor.a = (FragColor.r * 0.21 + FragColor.g * 0.72 + FragColor.b * 0.07);
  FragColor.a *= opacity;
@@ -1290,15 +1419,13 @@ var fragGrowCutShader = `#version 300 es
   layout(location = 0) out int label;
   layout(location = 1) out int strength;
   in vec2 TexCoord;
-  //out vec4 FragColor;
+  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
 void main(void) {
-  //int MAX_STRENGTH  = int(255);
-  int MAX_STRENGTH  = int(10000);
   vec3 interpolatedTextureCoordinate = vec3(TexCoord.xy, coordZ);
   ivec3 size = textureSize(inputTexture0, 0);
   ivec3 texelIndex = ivec3(floor(interpolatedTextureCoordinate * vec3(size)));
@@ -1322,6 +1449,29 @@ void main(void) {
       }
     }
   }
+  if (finalPass < 1)
+    return;
+  int ok = 1;
+  ivec4 labelCount = ivec4(0,0,0,0);
+  for (int k = -1; k <= 1; k++)
+    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;
+        if ((ilabel < 0) || (ilabel > 3))
+          ok = 0;
+        else
+          labelCount[ilabel]++;
+      }
+  if (ok != 1) {
+    return;
+  }
+  int maxIdx = 0;
+  for (int i = 1; i < 4; i++) {
+    if (labelCount[i] > labelCount[maxIdx])
+      maxIdx = i;
+  }
+  label = maxIdx;
 }`;
 var vertSurfaceShader = `#version 300 es
 layout(location=0) in vec3 pos;
@@ -1373,6 +1523,22 @@ void main(void) {
 	vV = -vec3(modelMtx*vec4(pos,1.0));
 	vClr = clr;
 }`;
+var fragMeshDepthShader = `#version 300 es
+precision highp int;
+precision highp float;
+uniform float opacity;
+out vec4 color;
+vec4 packFloatToVec4i(const float value) {
+	//this Papaya function uses BSD 3-clause license Copyright (c) 2012-2015, RII-UTHSCSA
+	const vec4 bitSh = vec4(256.0*256.0*256.0, 256.0*256.0, 256.0, 1.0);
+	const vec4 bitMsk = vec4(0.0, 1.0/256.0, 1.0/256.0, 1.0/256.0);
+	vec4 res = fract(value * bitSh);
+	res -= res.xxyz * bitMsk;
+	return res;
+}
+void main() {
+	color = packFloatToVec4i(gl_FragCoord.z);
+}`;
 var fragMeshToonShader = `#version 300 es
 precision highp int;
 precision highp float;
@@ -1672,6 +1838,18 @@ function __extends(d, b) {
   }
   d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 }
+var __assign = function() {
+  __assign = Object.assign || function __assign2(t) {
+    for (var s, i2 = 1, n = arguments.length; i2 < n; i2++) {
+      s = arguments[i2];
+      for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p))
+          t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
 function __values(o) {
   var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i2 = 0;
   if (m)
@@ -1916,6 +2094,22 @@ function reportUnhandledError(err2) {
 }
 function noop() {
 }
+var COMPLETE_NOTIFICATION = function() {
+  return createNotification("C", void 0, void 0);
+}();
+function errorNotification(error) {
+  return createNotification("E", void 0, error);
+}
+function nextNotification(value2) {
+  return createNotification("N", value2, void 0);
+}
+function createNotification(kind, value2, error) {
+  return {
+    kind,
+    value: value2,
+    error
+  };
+}
 var context = null;
 function errorContext(cb) {
   if (config.useDeprecatedSynchronousErrorHandling) {
@@ -1954,24 +2148,24 @@ var Subscriber = function(_super) {
     return new SafeSubscriber(next, error, complete);
   };
   Subscriber2.prototype.next = function(value2) {
-    if (this.isStopped)
-      ;
-    else {
+    if (this.isStopped) {
+      handleStoppedNotification(nextNotification(value2), this);
+    } else {
       this._next(value2);
     }
   };
   Subscriber2.prototype.error = function(err2) {
-    if (this.isStopped)
-      ;
-    else {
+    if (this.isStopped) {
+      handleStoppedNotification(errorNotification(err2), this);
+    } else {
       this.isStopped = true;
       this._error(err2);
     }
   };
   Subscriber2.prototype.complete = function() {
-    if (this.isStopped)
-      ;
-    else {
+    if (this.isStopped) {
+      handleStoppedNotification(COMPLETE_NOTIFICATION, this);
+    } else {
       this.isStopped = true;
       this._complete();
     }
@@ -2084,6 +2278,12 @@ function handleUnhandledError(error) {
 function defaultErrorHandler(err2) {
   throw err2;
 }
+function handleStoppedNotification(notification, subscriber) {
+  var onStoppedNotification = config.onStoppedNotification;
+  onStoppedNotification && timeoutProvider.setTimeout(function() {
+    return onStoppedNotification(notification, subscriber);
+  });
+}
 var EMPTY_OBSERVER = {
   closed: true,
   next: noop,
@@ -2361,6 +2561,289 @@ var AnonymousSubject = function(_super) {
   };
   return AnonymousSubject2;
 }(Subject);
+var dateTimestampProvider = {
+  now: function() {
+    return (dateTimestampProvider.delegate || Date).now();
+  },
+  delegate: void 0
+};
+var ReplaySubject = function(_super) {
+  __extends(ReplaySubject2, _super);
+  function ReplaySubject2(_bufferSize, _windowTime, _timestampProvider) {
+    if (_bufferSize === void 0) {
+      _bufferSize = Infinity;
+    }
+    if (_windowTime === void 0) {
+      _windowTime = Infinity;
+    }
+    if (_timestampProvider === void 0) {
+      _timestampProvider = dateTimestampProvider;
+    }
+    var _this = _super.call(this) || this;
+    _this._bufferSize = _bufferSize;
+    _this._windowTime = _windowTime;
+    _this._timestampProvider = _timestampProvider;
+    _this._buffer = [];
+    _this._infiniteTimeWindow = true;
+    _this._infiniteTimeWindow = _windowTime === Infinity;
+    _this._bufferSize = Math.max(1, _bufferSize);
+    _this._windowTime = Math.max(1, _windowTime);
+    return _this;
+  }
+  ReplaySubject2.prototype.next = function(value2) {
+    var _a2 = this, isStopped = _a2.isStopped, _buffer = _a2._buffer, _infiniteTimeWindow = _a2._infiniteTimeWindow, _timestampProvider = _a2._timestampProvider, _windowTime = _a2._windowTime;
+    if (!isStopped) {
+      _buffer.push(value2);
+      !_infiniteTimeWindow && _buffer.push(_timestampProvider.now() + _windowTime);
+    }
+    this._trimBuffer();
+    _super.prototype.next.call(this, value2);
+  };
+  ReplaySubject2.prototype._subscribe = function(subscriber) {
+    this._throwIfClosed();
+    this._trimBuffer();
+    var subscription = this._innerSubscribe(subscriber);
+    var _a2 = this, _infiniteTimeWindow = _a2._infiniteTimeWindow, _buffer = _a2._buffer;
+    var copy2 = _buffer.slice();
+    for (var i2 = 0; i2 < copy2.length && !subscriber.closed; i2 += _infiniteTimeWindow ? 1 : 2) {
+      subscriber.next(copy2[i2]);
+    }
+    this._checkFinalizedStatuses(subscriber);
+    return subscription;
+  };
+  ReplaySubject2.prototype._trimBuffer = function() {
+    var _a2 = this, _bufferSize = _a2._bufferSize, _timestampProvider = _a2._timestampProvider, _buffer = _a2._buffer, _infiniteTimeWindow = _a2._infiniteTimeWindow;
+    var adjustedBufferSize = (_infiniteTimeWindow ? 1 : 2) * _bufferSize;
+    _bufferSize < Infinity && adjustedBufferSize < _buffer.length && _buffer.splice(0, _buffer.length - adjustedBufferSize);
+    if (!_infiniteTimeWindow) {
+      var now = _timestampProvider.now();
+      var last = 0;
+      for (var i2 = 1; i2 < _buffer.length && _buffer[i2] <= now; i2 += 2) {
+        last = i2;
+      }
+      last && _buffer.splice(0, last + 1);
+    }
+  };
+  return ReplaySubject2;
+}(Subject);
+var Action = function(_super) {
+  __extends(Action2, _super);
+  function Action2(scheduler, work) {
+    return _super.call(this) || this;
+  }
+  Action2.prototype.schedule = function(state, delay) {
+    return this;
+  };
+  return Action2;
+}(Subscription);
+var intervalProvider = {
+  setInterval: function(handler, timeout) {
+    var args = [];
+    for (var _i = 2; _i < arguments.length; _i++) {
+      args[_i - 2] = arguments[_i];
+    }
+    var delegate = intervalProvider.delegate;
+    if (delegate === null || delegate === void 0 ? void 0 : delegate.setInterval) {
+      return delegate.setInterval.apply(delegate, __spreadArray([handler, timeout], __read(args)));
+    }
+    return setInterval.apply(void 0, __spreadArray([handler, timeout], __read(args)));
+  },
+  clearInterval: function(handle) {
+    var delegate = intervalProvider.delegate;
+    return ((delegate === null || delegate === void 0 ? void 0 : delegate.clearInterval) || clearInterval)(handle);
+  },
+  delegate: void 0
+};
+var AsyncAction = function(_super) {
+  __extends(AsyncAction2, _super);
+  function AsyncAction2(scheduler, work) {
+    var _this = _super.call(this, scheduler, work) || this;
+    _this.scheduler = scheduler;
+    _this.work = work;
+    _this.pending = false;
+    return _this;
+  }
+  AsyncAction2.prototype.schedule = function(state, delay) {
+    if (delay === void 0) {
+      delay = 0;
+    }
+    if (this.closed) {
+      return this;
+    }
+    this.state = state;
+    var id = this.id;
+    var scheduler = this.scheduler;
+    if (id != null) {
+      this.id = this.recycleAsyncId(scheduler, id, delay);
+    }
+    this.pending = true;
+    this.delay = delay;
+    this.id = this.id || this.requestAsyncId(scheduler, this.id, delay);
+    return this;
+  };
+  AsyncAction2.prototype.requestAsyncId = function(scheduler, _id, delay) {
+    if (delay === void 0) {
+      delay = 0;
+    }
+    return intervalProvider.setInterval(scheduler.flush.bind(scheduler, this), delay);
+  };
+  AsyncAction2.prototype.recycleAsyncId = function(_scheduler, id, delay) {
+    if (delay === void 0) {
+      delay = 0;
+    }
+    if (delay != null && this.delay === delay && this.pending === false) {
+      return id;
+    }
+    intervalProvider.clearInterval(id);
+    return void 0;
+  };
+  AsyncAction2.prototype.execute = function(state, delay) {
+    if (this.closed) {
+      return new Error("executing a cancelled action");
+    }
+    this.pending = false;
+    var error = this._execute(state, delay);
+    if (error) {
+      return error;
+    } else if (this.pending === false && this.id != null) {
+      this.id = this.recycleAsyncId(this.scheduler, this.id, null);
+    }
+  };
+  AsyncAction2.prototype._execute = function(state, _delay) {
+    var errored = false;
+    var errorValue;
+    try {
+      this.work(state);
+    } catch (e) {
+      errored = true;
+      errorValue = e ? e : new Error("Scheduled action threw falsy error");
+    }
+    if (errored) {
+      this.unsubscribe();
+      return errorValue;
+    }
+  };
+  AsyncAction2.prototype.unsubscribe = function() {
+    if (!this.closed) {
+      var _a2 = this, id = _a2.id, scheduler = _a2.scheduler;
+      var actions = scheduler.actions;
+      this.work = this.state = this.scheduler = null;
+      this.pending = false;
+      arrRemove(actions, this);
+      if (id != null) {
+        this.id = this.recycleAsyncId(scheduler, id, null);
+      }
+      this.delay = null;
+      _super.prototype.unsubscribe.call(this);
+    }
+  };
+  return AsyncAction2;
+}(Action);
+var Scheduler = function() {
+  function Scheduler2(schedulerActionCtor, now) {
+    if (now === void 0) {
+      now = Scheduler2.now;
+    }
+    this.schedulerActionCtor = schedulerActionCtor;
+    this.now = now;
+  }
+  Scheduler2.prototype.schedule = function(work, delay, state) {
+    if (delay === void 0) {
+      delay = 0;
+    }
+    return new this.schedulerActionCtor(this, work).schedule(state, delay);
+  };
+  Scheduler2.now = dateTimestampProvider.now;
+  return Scheduler2;
+}();
+var AsyncScheduler = function(_super) {
+  __extends(AsyncScheduler2, _super);
+  function AsyncScheduler2(SchedulerAction, now) {
+    if (now === void 0) {
+      now = Scheduler.now;
+    }
+    var _this = _super.call(this, SchedulerAction, now) || this;
+    _this.actions = [];
+    _this._active = false;
+    _this._scheduled = void 0;
+    return _this;
+  }
+  AsyncScheduler2.prototype.flush = function(action) {
+    var actions = this.actions;
+    if (this._active) {
+      actions.push(action);
+      return;
+    }
+    var error;
+    this._active = true;
+    do {
+      if (error = action.execute(action.state, action.delay)) {
+        break;
+      }
+    } while (action = actions.shift());
+    this._active = false;
+    if (error) {
+      while (action = actions.shift()) {
+        action.unsubscribe();
+      }
+      throw error;
+    }
+  };
+  return AsyncScheduler2;
+}(Scheduler);
+var asyncScheduler = new AsyncScheduler(AsyncAction);
+var async = asyncScheduler;
+function isScheduler(value2) {
+  return value2 && isFunction(value2.schedule);
+}
+function isValidDate(value2) {
+  return value2 instanceof Date && !isNaN(value2);
+}
+function timer(dueTime, intervalOrScheduler, scheduler) {
+  if (dueTime === void 0) {
+    dueTime = 0;
+  }
+  if (scheduler === void 0) {
+    scheduler = async;
+  }
+  var intervalDuration = -1;
+  if (intervalOrScheduler != null) {
+    if (isScheduler(intervalOrScheduler)) {
+      scheduler = intervalOrScheduler;
+    } else {
+      intervalDuration = intervalOrScheduler;
+    }
+  }
+  return new Observable(function(subscriber) {
+    var due = isValidDate(dueTime) ? +dueTime - scheduler.now() : dueTime;
+    if (due < 0) {
+      due = 0;
+    }
+    var n = 0;
+    return scheduler.schedule(function() {
+      if (!subscriber.closed) {
+        subscriber.next(n++);
+        if (0 <= intervalDuration) {
+          this.schedule(void 0, intervalDuration);
+        } else {
+          subscriber.complete();
+        }
+      }
+    }, due);
+  });
+}
+function interval(period, scheduler) {
+  if (period === void 0) {
+    period = 0;
+  }
+  if (scheduler === void 0) {
+    scheduler = asyncScheduler;
+  }
+  if (period < 0) {
+    period = 0;
+  }
+  return timer(period, period, scheduler);
+}
 var NiivueObject3D = function(id, vertexBuffer, mode, indexCount, indexBuffer = null, vao = null) {
   this.BLEND = 1;
   this.CULL_FACE = 2;
@@ -2785,12 +3268,12 @@ var utilities$1 = { exports: {} };
     return data.getFloat64(start, littleEndian);
   };
   nifti3.Utils.getLongAt = function(data, start, littleEndian) {
-    var ctr, array = [], value2 = 0;
+    var ctr, array2 = [], value2 = 0;
     for (ctr = 0; ctr < 8; ctr += 1) {
-      array[ctr] = nifti3.Utils.getByteAt(data, start + ctr, littleEndian);
+      array2[ctr] = nifti3.Utils.getByteAt(data, start + ctr, littleEndian);
     }
-    for (ctr = array.length - 1; ctr >= 0; ctr--) {
-      value2 = value2 * 256 + array[ctr];
+    for (ctr = array2.length - 1; ctr >= 0; ctr--) {
+      value2 = value2 * 256 + array2[ctr];
     }
     return value2;
   };
@@ -7674,24 +8157,24 @@ var utilities = { exports: {} };
     }
     return tmp.buffer;
   };
-  daikon2.Utils.fillBuffer = function(array, buffer2, offset, numBytes) {
+  daikon2.Utils.fillBuffer = function(array2, buffer2, offset, numBytes) {
     var ctr;
     if (numBytes === 1) {
-      for (ctr = 0; ctr < array.length; ctr += 1) {
-        buffer2.setUint8(offset + ctr, array[ctr]);
+      for (ctr = 0; ctr < array2.length; ctr += 1) {
+        buffer2.setUint8(offset + ctr, array2[ctr]);
       }
     } else if (numBytes === 2) {
-      for (ctr = 0; ctr < array.length; ctr += 1) {
-        buffer2.setUint16(offset + ctr * 2, array[ctr], true);
+      for (ctr = 0; ctr < array2.length; ctr += 1) {
+        buffer2.setUint16(offset + ctr * 2, array2[ctr], true);
       }
     }
   };
-  daikon2.Utils.fillBufferRGB = function(array, buffer2, offset) {
-    var r, g, b, ctr, numElements = parseInt(array.length / 3);
+  daikon2.Utils.fillBufferRGB = function(array2, buffer2, offset) {
+    var r, g, b, ctr, numElements = parseInt(array2.length / 3);
     for (ctr = 0; ctr < numElements; ctr += 1) {
-      r = array[ctr * 3];
-      g = array[ctr * 3 + 1];
-      b = array[ctr * 3 + 2];
+      r = array2[ctr * 3];
+      g = array2[ctr * 3 + 1];
+      b = array2[ctr * 3 + 2];
       buffer2.setUint8(offset + ctr, parseInt((r + b + g) / 3), true);
     }
   };
@@ -13766,9 +14249,9 @@ var jpegBaseline = { exports: {} };
         }
         function readDataBlock() {
           var length2 = readUint16();
-          var array = data.subarray(offset, offset + length2 - 2);
-          offset += array.length;
-          return array;
+          var array2 = data.subarray(offset, offset + length2 - 2);
+          offset += array2.length;
+          return array2;
         }
         function prepareComponents(frame2) {
           var mcusPerLine = Math.ceil(frame2.samplesPerLine / 8 / frame2.maxH);
@@ -16853,11 +17336,11 @@ var jpx = { exports: {} };
       }
       return dict.get(name);
     };
-    Util2.inherit = function Util_inherit(sub, base, prototype) {
-      sub.prototype = Object.create(base.prototype);
-      sub.prototype.constructor = sub;
+    Util2.inherit = function Util_inherit(sub2, base, prototype) {
+      sub2.prototype = Object.create(base.prototype);
+      sub2.prototype.constructor = sub2;
       for (var prop in prototype) {
-        sub.prototype[prop] = prototype[prop];
+        sub2.prototype[prop] = prototype[prop];
       }
     };
     Util2.loadScript = function Util_loadScript(src, callback) {
@@ -18476,10 +18959,10 @@ var require$$1 = /* @__PURE__ */ getAugmentedNamespace(__viteBrowserExternal$1);
       return u8array;
     }
     Module["intArrayFromString"] = intArrayFromString;
-    function intArrayToString(array) {
+    function intArrayToString(array2) {
       var ret = [];
-      for (var i2 = 0; i2 < array.length; i2++) {
-        var chr = array[i2];
+      for (var i2 = 0; i2 < array2.length; i2++) {
+        var chr = array2[i2];
         if (chr > 255) {
           chr &= 255;
         }
@@ -18489,18 +18972,18 @@ var require$$1 = /* @__PURE__ */ getAugmentedNamespace(__viteBrowserExternal$1);
     }
     Module["intArrayToString"] = intArrayToString;
     function writeStringToMemory(string, buffer2, dontAddNull) {
-      var array = intArrayFromString(string, dontAddNull);
+      var array2 = intArrayFromString(string, dontAddNull);
       var i2 = 0;
-      while (i2 < array.length) {
-        var chr = array[i2];
+      while (i2 < array2.length) {
+        var chr = array2[i2];
         HEAP8[buffer2 + i2 >> 0] = chr;
         i2 = i2 + 1;
       }
     }
     Module["writeStringToMemory"] = writeStringToMemory;
-    function writeArrayToMemory(array, buffer2) {
-      for (var i2 = 0; i2 < array.length; i2++) {
-        HEAP8[buffer2++ >> 0] = array[i2];
+    function writeArrayToMemory(array2, buffer2) {
+      for (var i2 = 0; i2 < array2.length; i2++) {
+        HEAP8[buffer2++ >> 0] = array2[i2];
       }
     }
     Module["writeArrayToMemory"] = writeArrayToMemory;
@@ -18674,9 +19157,9 @@ var require$$1 = /* @__PURE__ */ getAugmentedNamespace(__viteBrowserExternal$1);
     function __isLeapYear(year) {
       return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
     }
-    function __arraySum(array, index) {
+    function __arraySum(array2, index) {
       var sum = 0;
-      for (var i2 = 0; i2 <= index; sum += array[i2++])
+      for (var i2 = 0; i2 <= index; sum += array2[i2++])
         ;
       return sum;
     }
@@ -103059,7 +103542,7 @@ function isPlatformLittleEndian() {
   new DataView(buffer2).setInt16(0, 256, true);
   return new Int16Array(buffer2)[0] === 256;
 }
-function NVImage(dataBuffer, name = "", colorMap = "gray", opacity = 1, pairedImgData = null, cal_min = NaN, cal_max = NaN, trustCalMinMax = true, percentileFrac = 0.02, ignoreZeroVoxels = false, visible = true, isDICOMDIR = false, useQFormNotSForm = false) {
+function NVImage(dataBuffer, name = "", colorMap = "gray", opacity = 1, pairedImgData = null, cal_min = NaN, cal_max = NaN, trustCalMinMax = true, percentileFrac = 0.02, ignoreZeroVoxels = false, visible = true, isDICOMDIR = false, useQFormNotSForm = false, colorMapNegative = "") {
   this.DT_NONE = 0;
   this.DT_UNKNOWN = 0;
   this.DT_BINARY = 1;
@@ -103088,7 +103571,9 @@ function NVImage(dataBuffer, name = "", colorMap = "gray", opacity = 1, pairedIm
   this.percentileFrac = percentileFrac;
   this.ignoreZeroVoxels = ignoreZeroVoxels;
   this.trustCalMinMax = trustCalMinMax;
+  this.colorMapNegative = colorMapNegative;
   this.visible = visible;
+  this.modulationImage = null;
   this.series = [];
   if (!dataBuffer) {
     return;
@@ -103140,7 +103625,7 @@ function NVImage(dataBuffer, name = "", colorMap = "gray", opacity = 1, pairedIm
   let nVol4D = imgRaw.byteLength / this.nVox3D / (this.hdr.numBitsPerVoxel / 8);
   if (nVol4D !== this.nFrame4D)
     console.log("This header does not match voxel data", this.hdr, imgRaw.byteLength);
-  if (this.hdr.intent_code === 1007 && this.nFrame4D === 3 && this.hdr.datatypeCode === this.DT_FLOAT) {
+  if ((this.hdr.intent_code === 1007 || this.hdr.intent_code === 2003) && this.nFrame4D === 3 && this.hdr.datatypeCode === this.DT_FLOAT) {
     let tmp = new Float32Array(imgRaw);
     let f32 = tmp.slice();
     this.hdr.datatypeCode = this.DT_RGB;
@@ -103352,7 +103837,25 @@ function NVImage(dataBuffer, name = "", colorMap = "gray", opacity = 1, pairedIm
     this.hdr.cal_max = cal_max;
   this.calMinMax();
 }
+NVImage.prototype.computeObliqueAngle = function(mtx44) {
+  let mtx = clone$1(mtx44);
+  transpose(mtx, mtx44);
+  let dxtmp = Math.sqrt(mtx[0] * mtx[0] + mtx[1] * mtx[1] + mtx[2] * mtx[2]);
+  let xmax = Math.max(Math.max(Math.abs(mtx[0]), Math.abs(mtx[1])), Math.abs(mtx[2])) / dxtmp;
+  let dytmp = Math.sqrt(mtx[4] * mtx[4] + mtx[5] * mtx[5] + mtx[6] * mtx[6]);
+  let ymax = Math.max(Math.max(Math.abs(mtx[4]), Math.abs(mtx[5])), Math.abs(mtx[6])) / dytmp;
+  let dztmp = Math.sqrt(mtx[8] * mtx[8] + mtx[9] * mtx[9] + mtx[10] * mtx[10]);
+  let zmax = Math.max(Math.max(Math.abs(mtx[8]), Math.abs(mtx[9])), Math.abs(mtx[10])) / dztmp;
+  let fig_merit = Math.min(Math.min(xmax, ymax), zmax);
+  let oblique_angle = Math.abs(Math.acos(fig_merit) * 180 / 3.141592653);
+  if (oblique_angle > 0.01)
+    console.log("Warning voxels not aligned with world space: " + oblique_angle + " degrees from plumb.\n");
+  else
+    oblique_angle = 0;
+  return oblique_angle;
+};
 NVImage.prototype.calculateOblique = function() {
+  this.oblique_angle = this.computeObliqueAngle(this.matRAS);
   let LPI = this.vox2mm([0, 0, 0], this.matRAS);
   let X1mm = this.vox2mm([1 / this.pixDimsRAS[1], 0, 0], this.matRAS);
   let Y1mm = this.vox2mm([0, 1 / this.pixDimsRAS[2], 0], this.matRAS);
@@ -103368,6 +103871,21 @@ NVImage.prototype.calculateOblique = function() {
   let maxShear = Math.max(Math.max(XY, XZ), YZ);
   if (maxShear > 0.1)
     log$2.debug("Warning: shear detected (gantry tilt) of %f degrees", maxShear);
+  let dim = fromValues(this.dimsRAS[1], this.dimsRAS[2], this.dimsRAS[3], 1);
+  let sform = clone$1(this.matRAS);
+  transpose(sform, sform);
+  let shim = fromValues(-0.5, -0.5, -0.5, 0);
+  translate(sform, sform, shim);
+  sform[0] *= dim[0];
+  sform[1] *= dim[0];
+  sform[2] *= dim[0];
+  sform[4] *= dim[1];
+  sform[5] *= dim[1];
+  sform[6] *= dim[1];
+  sform[8] *= dim[2];
+  sform[9] *= dim[2];
+  sform[10] *= dim[2];
+  this.frac2mm = clone$1(sform);
 };
 NVImage.prototype.THD_daxes_to_NIFTI = function(xyzDelta, xyzOrigin, orientSpecific) {
   let hdr = this.hdr;
@@ -103768,11 +104286,12 @@ NVImage.prototype.readMGH = function(buffer2) {
   let hdr = this.hdr;
   hdr.dims = [3, 1, 1, 1, 0, 0, 0, 0];
   hdr.pixDims = [1, 1, 1, 1, 1, 0, 0, 0];
-  var reader = new DataView(buffer2);
   var raw = buffer2;
+  var reader = new DataView(raw);
   if (reader.getUint8(0) === 31 && reader.getUint8(1) === 139) {
-    var raw = decompressSync(new Uint8Array(buffer2));
-    reader = new DataView(raw.buffer);
+    let raw8 = decompressSync(new Uint8Array(buffer2));
+    raw = raw8.buffer;
+    reader = new DataView(raw);
   }
   let version = reader.getInt32(0, false);
   let width = reader.getInt32(4, false);
@@ -104062,7 +104581,7 @@ NVImage.prototype.readMHA = function(buffer2, pairedImgData) {
     line = readStr();
   }
   let mmMat = fromValues$3(hdr.pixDims[1], 0, 0, 0, hdr.pixDims[2], 0, 0, 0, hdr.pixDims[3]);
-  multiply$2(mat33, mmMat, mat33);
+  multiply$1(mat33, mmMat, mat33);
   hdr.affine = [
     [-mat33[0], -mat33[3], -mat33[6], -offset[0]],
     [-mat33[1], -mat33[4], -mat33[7], -offset[1]],
@@ -104463,7 +104982,7 @@ NVImage.prototype.readNRRD = function(dataBuffer, pairedImgData) {
       offset[1] = -offset[1];
     if (rot33[8] < 0)
       offset[2] = -offset[2];
-    multiply$2(mat33, rot33, mat33);
+    multiply$1(mat33, rot33, mat33);
     let mat = fromValues$2(mat33[0], mat33[3], mat33[6], offset[0], mat33[1], mat33[4], mat33[7], offset[1], mat33[2], mat33[5], mat33[8], offset[2], 0, 0, 0, 1);
     let mm000 = this.vox2mm([0, 0, 0], mat);
     let mm100 = this.vox2mm([1, 0, 0], mat);
@@ -104579,7 +105098,7 @@ NVImage.prototype.calculateRAS = function() {
   rotM[3 + 2 * 4] = (header.dims[perm[2]] - 1) * flip[2];
   let residualR = create$2();
   invert(residualR, rotM);
-  multiply$1(residualR, residualR, R2);
+  multiply(residualR, residualR, R2);
   this.matRAS = clone$1(residualR);
   rotM = fromValues$2(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
   rotM[perm[0] - 1 + 0 * 4] = -flip[0] * 2 + 1;
@@ -104881,7 +105400,8 @@ NVImage.loadFromUrl = async function({
   trustCalMinMax = true,
   percentileFrac = 0.02,
   ignoreZeroVoxels = false,
-  visible = true
+  visible = true,
+  colorMapNegative = ""
 } = {}) {
   if (url === "") {
     throw Error("url must not be empty");
@@ -104914,7 +105434,7 @@ NVImage.loadFromUrl = async function({
     pairedImgData = await resp.arrayBuffer();
   }
   if (dataBuffer) {
-    nvimage = new NVImage(dataBuffer, name, colorMap, opacity, pairedImgData, cal_min, cal_max, trustCalMinMax, percentileFrac, ignoreZeroVoxels, visible);
+    nvimage = new NVImage(dataBuffer, name, colorMap, opacity, pairedImgData, cal_min, cal_max, trustCalMinMax, percentileFrac, ignoreZeroVoxels, visible, false, false, colorMapNegative);
   } else {
     alert("Unable to load buffer properly from volume");
   }
@@ -105114,14 +105634,20 @@ function getExtents$1(positions, forceOriginInVolume = true) {
   return { min: min2, max: max2, furthestVertexFromOrigin, origin };
 }
 NVImage.prototype.toNiivueObject3D = function(id, gl) {
-  let LPI = this.vox2mm([0, 0, 0], this.matRAS);
-  let LAI = this.vox2mm([0, this.dimsRAS[2] - 1, 0], this.matRAS);
-  let LPS = this.vox2mm([0, 0, this.dimsRAS[3] - 1], this.matRAS);
-  let LAS = this.vox2mm([0, this.dimsRAS[2] - 1, this.dimsRAS[3] - 1], this.matRAS);
-  let RPI = this.vox2mm([this.dimsRAS[1] - 1, 0, 0], this.matRAS);
-  let RAI = this.vox2mm([this.dimsRAS[1] - 1, this.dimsRAS[2] - 1, 0], this.matRAS);
-  let RPS = this.vox2mm([this.dimsRAS[1] - 1, 0, this.dimsRAS[3] - 1], this.matRAS);
-  let RAS = this.vox2mm([this.dimsRAS[1] - 1, this.dimsRAS[2] - 1, this.dimsRAS[3] - 1], this.matRAS);
+  let L = -0.5;
+  let P = -0.5;
+  let I2 = -0.5;
+  let R2 = this.dimsRAS[1] - 1 + 0.5;
+  let A2 = this.dimsRAS[2] - 1 + 0.5;
+  let S = this.dimsRAS[3] - 1 + 0.5;
+  let LPI = this.vox2mm([L, P, I2], this.matRAS);
+  let LAI = this.vox2mm([L, A2, I2], this.matRAS);
+  let LPS = this.vox2mm([L, P, S], this.matRAS);
+  let LAS = this.vox2mm([L, A2, S], this.matRAS);
+  let RPI = this.vox2mm([R2, P, I2], this.matRAS);
+  let RAI = this.vox2mm([R2, A2, I2], this.matRAS);
+  let RPS = this.vox2mm([R2, P, S], this.matRAS);
+  let RAS = this.vox2mm([R2, A2, S], this.matRAS);
   let posTex = [
     ...LPS,
     ...[0, 0, 1],
@@ -105204,11 +105730,16 @@ NVImage.prototype.toNiivueObject3D = function(id, gl) {
     ...RAI,
     ...RPI
   ]);
-  obj3D.extentsMin = extents.min;
-  obj3D.extentsMax = extents.max;
+  obj3D.extentsMin = extents.min.slice();
+  obj3D.extentsMax = extents.max.slice();
   obj3D.furthestVertexFromOrigin = extents.furthestVertexFromOrigin;
   obj3D.originNegate = clone(extents.origin);
   negate(obj3D.originNegate, obj3D.originNegate);
+  obj3D.fieldOfViewDeObliqueMM = [
+    this.dimsRAS[1] * this.pixDimsRAS[1],
+    this.dimsRAS[2] * this.pixDimsRAS[2],
+    this.dimsRAS[3] * this.pixDimsRAS[3]
+  ];
   return obj3D;
 };
 const colortables = function() {
@@ -105260,6 +105791,8 @@ colortables.prototype.makeLut = function(Rs, Gs, Bs, As, Is) {
   if (this.gamma === 1)
     return lut;
   for (var i2 = 0; i2 < 255 * 4; i2++) {
+    if (i2 % 4 === 3)
+      continue;
     lut[i2] = Math.pow(lut[i2] / 255, 1 / this.gamma) * 255;
   }
   return lut;
@@ -105933,7 +106466,7 @@ NVMesh.readTRK = function(buffer2) {
     identity$1(mat);
   }
   var vox2mmMat = create$2();
-  mul$1(vox2mmMat, mat, zoomMat);
+  mul(vox2mmMat, mat, zoomMat);
   let i32 = null;
   let f32 = null;
   i32 = new Int32Array(buffer2.slice(hdr_sz));
@@ -106753,19 +107286,30 @@ NVMesh.readPLY = function(buffer2) {
     }
     let indices2 = new Int32Array(nface * 3);
     let f = 0;
-    let isTriangular2 = true;
     for (var i2 = 0; i2 < nface; i2++) {
       line = readStr();
       let items = line.split(/\s/);
-      if (parseInt(items[0]) > 3)
-        isTriangular2 = false;
-      indices2[f] = parseInt(items[1]);
-      indices2[f + 1] = parseInt(items[2]);
-      indices2[f + 2] = parseInt(items[3]);
-      f += 3;
-    }
-    if (!isTriangular2)
-      console.log("Only able to read PLY meshes limited to triangles.");
+      let nTri = parseInt(items[0]) - 2;
+      if (nTri < 1)
+        break;
+      if (f + nTri * 3 > indices2.length) {
+        var c2 = new Int32Array(indices2.length + indices2.length);
+        c2.set(indices2);
+        indices2 = c2.slice();
+      }
+      let idx0 = parseInt(items[1]);
+      let idx1 = parseInt(items[2]);
+      for (let j2 = 0; j2 < nTri; j2++) {
+        let idx2 = parseInt(items[3 + j2]);
+        indices2[f + 0] = idx0;
+        indices2[f + 1] = idx1;
+        indices2[f + 2] = idx2;
+        idx1 = idx2;
+        f += 3;
+      }
+    }
+    if (indices2.length !== f)
+      indices2 = indices2.slice(0, f);
     return {
       positions: positions2,
       indices: indices2
@@ -106956,12 +107500,21 @@ NVMesh.readOBJ = function(buffer2) {
     }
     if (str[0] === "f") {
       let items = str.split(" ");
+      let new_t = items.length - 3;
+      if (new_t < 1)
+        break;
       let tn = items[1].split("/");
-      t.push(parseInt(tn - 1));
+      let t0 = parseInt(tn[0]) - 1;
       tn = items[2].split("/");
-      t.push(parseInt(tn - 1));
-      tn = items[3].split("/");
-      t.push(parseInt(tn - 1));
+      let tprev = parseInt(tn[0]) - 1;
+      for (let j = 0; j < new_t; j++) {
+        tn = items[3 + j].split("/");
+        let tcurr = parseInt(tn[0]) - 1;
+        t.push(t0);
+        t.push(tprev);
+        t.push(tcurr);
+        tprev = tcurr;
+      }
     }
   }
   var positions = new Float32Array(pts);
@@ -109643,6 +110196,219 @@ var defaultFontMetrics = {
   glyphs,
   kerning
 };
+var DEFAULT_WEBSOCKET_CONFIG = {
+  url: "",
+  deserializer: function(e) {
+    return JSON.parse(e.data);
+  },
+  serializer: function(value2) {
+    return JSON.stringify(value2);
+  }
+};
+var WEBSOCKETSUBJECT_INVALID_ERROR_OBJECT = "WebSocketSubject.error must be called with an object with an error code, and an optional reason: { code: number, reason: string }";
+var WebSocketSubject = function(_super) {
+  __extends(WebSocketSubject2, _super);
+  function WebSocketSubject2(urlConfigOrSource, destination) {
+    var _this = _super.call(this) || this;
+    _this._socket = null;
+    if (urlConfigOrSource instanceof Observable) {
+      _this.destination = destination;
+      _this.source = urlConfigOrSource;
+    } else {
+      var config2 = _this._config = __assign({}, DEFAULT_WEBSOCKET_CONFIG);
+      _this._output = new Subject();
+      if (typeof urlConfigOrSource === "string") {
+        config2.url = urlConfigOrSource;
+      } else {
+        for (var key2 in urlConfigOrSource) {
+          if (urlConfigOrSource.hasOwnProperty(key2)) {
+            config2[key2] = urlConfigOrSource[key2];
+          }
+        }
+      }
+      if (!config2.WebSocketCtor && WebSocket) {
+        config2.WebSocketCtor = WebSocket;
+      } else if (!config2.WebSocketCtor) {
+        throw new Error("no WebSocket constructor can be found");
+      }
+      _this.destination = new ReplaySubject();
+    }
+    return _this;
+  }
+  WebSocketSubject2.prototype.lift = function(operator) {
+    var sock = new WebSocketSubject2(this._config, this.destination);
+    sock.operator = operator;
+    sock.source = this;
+    return sock;
+  };
+  WebSocketSubject2.prototype._resetState = function() {
+    this._socket = null;
+    if (!this.source) {
+      this.destination = new ReplaySubject();
+    }
+    this._output = new Subject();
+  };
+  WebSocketSubject2.prototype.multiplex = function(subMsg, unsubMsg, messageFilter) {
+    var self2 = this;
+    return new Observable(function(observer) {
+      try {
+        self2.next(subMsg());
+      } catch (err2) {
+        observer.error(err2);
+      }
+      var subscription = self2.subscribe({
+        next: function(x2) {
+          try {
+            if (messageFilter(x2)) {
+              observer.next(x2);
+            }
+          } catch (err2) {
+            observer.error(err2);
+          }
+        },
+        error: function(err2) {
+          return observer.error(err2);
+        },
+        complete: function() {
+          return observer.complete();
+        }
+      });
+      return function() {
+        try {
+          self2.next(unsubMsg());
+        } catch (err2) {
+          observer.error(err2);
+        }
+        subscription.unsubscribe();
+      };
+    });
+  };
+  WebSocketSubject2.prototype._connectSocket = function() {
+    var _this = this;
+    var _a2 = this._config, WebSocketCtor = _a2.WebSocketCtor, protocol = _a2.protocol, url = _a2.url, binaryType = _a2.binaryType;
+    var observer = this._output;
+    var socket = null;
+    try {
+      socket = protocol ? new WebSocketCtor(url, protocol) : new WebSocketCtor(url);
+      this._socket = socket;
+      if (binaryType) {
+        this._socket.binaryType = binaryType;
+      }
+    } catch (e) {
+      observer.error(e);
+      return;
+    }
+    var subscription = new Subscription(function() {
+      _this._socket = null;
+      if (socket && socket.readyState === 1) {
+        socket.close();
+      }
+    });
+    socket.onopen = function(evt) {
+      var _socket = _this._socket;
+      if (!_socket) {
+        socket.close();
+        _this._resetState();
+        return;
+      }
+      var openObserver = _this._config.openObserver;
+      if (openObserver) {
+        openObserver.next(evt);
+      }
+      var queue = _this.destination;
+      _this.destination = Subscriber.create(function(x2) {
+        if (socket.readyState === 1) {
+          try {
+            var serializer = _this._config.serializer;
+            socket.send(serializer(x2));
+          } catch (e) {
+            _this.destination.error(e);
+          }
+        }
+      }, function(err2) {
+        var closingObserver = _this._config.closingObserver;
+        if (closingObserver) {
+          closingObserver.next(void 0);
+        }
+        if (err2 && err2.code) {
+          socket.close(err2.code, err2.reason);
+        } else {
+          observer.error(new TypeError(WEBSOCKETSUBJECT_INVALID_ERROR_OBJECT));
+        }
+        _this._resetState();
+      }, function() {
+        var closingObserver = _this._config.closingObserver;
+        if (closingObserver) {
+          closingObserver.next(void 0);
+        }
+        socket.close();
+        _this._resetState();
+      });
+      if (queue && queue instanceof ReplaySubject) {
+        subscription.add(queue.subscribe(_this.destination));
+      }
+    };
+    socket.onerror = function(e) {
+      _this._resetState();
+      observer.error(e);
+    };
+    socket.onclose = function(e) {
+      if (socket === _this._socket) {
+        _this._resetState();
+      }
+      var closeObserver = _this._config.closeObserver;
+      if (closeObserver) {
+        closeObserver.next(e);
+      }
+      if (e.wasClean) {
+        observer.complete();
+      } else {
+        observer.error(e);
+      }
+    };
+    socket.onmessage = function(e) {
+      try {
+        var deserializer = _this._config.deserializer;
+        observer.next(deserializer(e));
+      } catch (err2) {
+        observer.error(err2);
+      }
+    };
+  };
+  WebSocketSubject2.prototype._subscribe = function(subscriber) {
+    var _this = this;
+    var source = this.source;
+    if (source) {
+      return source.subscribe(subscriber);
+    }
+    if (!this._socket) {
+      this._connectSocket();
+    }
+    this._output.subscribe(subscriber);
+    subscriber.add(function() {
+      var _socket = _this._socket;
+      if (_this._output.observers.length === 0) {
+        if (_socket && (_socket.readyState === 1 || _socket.readyState === 0)) {
+          _socket.close();
+        }
+        _this._resetState();
+      }
+    });
+    return subscriber;
+  };
+  WebSocketSubject2.prototype.unsubscribe = function() {
+    var _socket = this._socket;
+    if (_socket && (_socket.readyState === 1 || _socket.readyState === 0)) {
+      _socket.close();
+    }
+    this._resetState();
+    _super.prototype.unsubscribe.call(this);
+  };
+  return WebSocketSubject2;
+}(AnonymousSubject);
+function webSocket(urlConfigOrSource) {
+  return new WebSocketSubject(urlConfigOrSource);
+}
 const log = new Log();
 const cmapper = new colortables();
 function Niivue(options = {}) {
@@ -109651,11 +110417,13 @@ function Niivue(options = {}) {
     textHeight: 0.06,
     colorbarHeight: 0.05,
     crosshairWidth: 1,
+    rulerWidth: 4,
     show3Dcrosshair: false,
     backColor: [0, 0, 0, 1],
     crosshairColor: [1, 0, 0, 1],
     selectionBoxColor: [1, 1, 1, 0.5],
     clipPlaneColor: [0.7, 0, 0.7, 0.5],
+    rulerColor: [1, 0, 0, 0.8],
     colorBarMargin: 0.05,
     trustCalMinMax: true,
     clipPlaneHotKey: "KeyC",
@@ -109663,14 +110431,27 @@ function Niivue(options = {}) {
     keyDebounceTime: 50,
     isNearestInterpolation: false,
     isAtlasOutline: false,
+    isRuler: false,
+    isColorbar: false,
     isRadiologicalConvention: false,
+    meshThicknessOn2D: Infinity,
+    isDragShowsMeasurementTool: false,
+    isCornerOrientationText: false,
+    sagittalNoseLeft: false,
+    isSliceMM: false,
     logging: false,
     loadingText: "waiting for images...",
     dragAndDropEnabled: true,
     drawingEnabled: false,
     penValue: 1,
     isFilledPen: false,
-    thumbnail: ""
+    thumbnail: "",
+    onLocationChange: () => {
+    },
+    onIntensityChange: () => {
+    },
+    onImageLoaded: () => {
+    }
   };
   this.canvas = null;
   this.gl = null;
@@ -109678,8 +110459,11 @@ function Niivue(options = {}) {
   this.volumeTexture = null;
   this.drawTexture = null;
   this.drawBitmap = null;
-  this.drawUndoBitmap = null;
+  this.maxDrawUndoBitmaps = 8;
+  this.currentDrawUndoBitmap = this.maxDrawUndoBitmaps;
+  this.drawUndoBitmaps = [];
   this.drawOpacity = 0.8;
+  this.colorbarHeight = 0;
   this.drawPenLocation = [NaN, NaN, NaN];
   this.drawPenAxCorSag = -1;
   this.drawFillOverwrites = true;
@@ -109687,7 +110471,8 @@ function Niivue(options = {}) {
   this.overlayTexture = null;
   this.overlayTextureID = [];
   this.sliceShader = null;
-  this.lineShader = null;
+  this.sliceMMShader = null;
+  this.rectShader = null;
   this.graphShader = null;
   this.renderShader = null;
   this.pickingShader = null;
@@ -109720,6 +110505,7 @@ function Niivue(options = {}) {
   this.sliceTypeSagittal = 2;
   this.sliceTypeMultiplanar = 3;
   this.sliceTypeRender = 4;
+  this.sliceMosaicString = "";
   this.sliceType = this.sliceTypeMultiplanar;
   this.scene = {};
   this.syncOpts = {};
@@ -109736,6 +110522,7 @@ function Niivue(options = {}) {
   this.scene.mouseButtonLeftDown = false;
   this.scene.mouseButtonRightDown = false;
   this.scene.mouseDepthPicker = false;
+  this.scene.pan2Dxyzmm = [0, 0, 0, 1];
   this.scene.scale2D = 1;
   this.scene.prevX = 0;
   this.scene.prevY = 0;
@@ -109752,13 +110539,7 @@ function Niivue(options = {}) {
   this.volScale = [];
   this.vox = [];
   this.mousePos = [0, 0];
-  this.numScreenSlices = 0;
-  this.screenSlices = [
-    { leftTopWidthHeight: [1, 0, 0, 1], axCorSag: this.sliceTypeAxial },
-    { leftTopWidthHeight: [1, 0, 0, 1], axCorSag: this.sliceTypeAxial },
-    { leftTopWidthHeight: [1, 0, 0, 1], axCorSag: this.sliceTypeAxial },
-    { leftTopWidthHeight: [1, 0, 0, 1], axCorSag: this.sliceTypeAxial }
-  ];
+  this.screenSlices = [];
   this.isDragging = false;
   this.dragStart = [0, 0];
   this.dragEnd = [0, 0];
@@ -109768,10 +110549,7 @@ function Niivue(options = {}) {
   this.volumeObject3D = null;
   this.pivot3D = [0, 0, 0];
   this.furthestFromPivot = 10;
-  this.intensityRange$ = new Subject();
-  this.scene.location$ = new Subject();
   this.scene.loading$ = new Subject();
-  this.imageLoaded$ = new Subject();
   this.currentClipPlaneIndex = 0;
   this.lastCalled = new Date().getTime();
   this.multiTouchGesture = false;
@@ -109810,8 +110588,18 @@ function Niivue(options = {}) {
     {
       Name: "Toon",
       Frag: fragMeshToonShader
+    },
+    {
+      Name: "Depth",
+      Frag: fragMeshDepthShader
     }
   ];
+  this.isController = false;
+  this.isInSession = false;
+  this.sessionKey = "";
+  this.sessionUrl = "";
+  this.serverConnection$ = null;
+  this.interval$ = null;
   this.initialized = false;
   for (let prop in this.defaults) {
     this.opts[prop] = options[prop] === void 0 ? this.defaults[prop] : options[prop];
@@ -109825,13 +110613,32 @@ function Niivue(options = {}) {
   this.loadingText = this.opts.loadingText;
   log.setLogLevel(this.opts.logging);
   this.eventsToSubjects = {
-    location: this.scene.location$,
-    loading: this.scene.loading$,
-    imageLoaded: this.imageLoaded$,
-    intensityRange: this.intensityRange$
+    loading: this.scene.loading$
   };
   this.subscriptions = [];
 }
+Niivue.prototype.saveScene = function(filename = "") {
+  function saveBlob(blob, name) {
+    const a = document.createElement("a");
+    document.body.appendChild(a);
+    a.style.display = "none";
+    const url = window.URL.createObjectURL(blob);
+    a.href = url;
+    a.download = name;
+    a.click();
+    a.remove();
+  }
+  let canvas = this.canvas;
+  this.drawScene();
+  canvas.toBlob((blob) => {
+    if (filename === "") {
+      filename = `niivue-screenshot-${new Date().toString()}.png`;
+      filename = filename.replace(/\s/g, "_");
+    }
+    console.log(filename);
+    saveBlob(blob, filename);
+  });
+};
 Niivue.prototype.attachTo = async function(id) {
   await this.attachToCanvas(document.getElementById(id));
   log.debug("attached to element with id: ", id);
@@ -109902,6 +110709,85 @@ Niivue.prototype.sync = function() {
   }
   this.otherNV.drawScene();
 };
+Niivue.prototype.connectToServer = function(wsServerUrl, sessionName) {
+  const url = new URL(wsServerUrl);
+  url.pathname = "websockets";
+  url.search = "?session=" + sessionName;
+  this.serverConnection$ = webSocket(url.href);
+  console.log(url.href);
+};
+Niivue.prototype.setUpdateInterval = function() {
+  this.interval$ = interval(300);
+  this.interval$.subscribe(() => {
+    this.serverConnection$.next({
+      op: "update",
+      azimuth: this.scene.renderAzimuth,
+      elevation: this.scene.renderElevation,
+      clipPlane: this.scene.clipPlane,
+      zoom: this.volScaleMultiplier,
+      key: this.sessionKey
+    });
+  });
+};
+Niivue.prototype.subscribeToServer = function(sessionCreatedCallback, sessionJoinedCallback) {
+  this.serverConnection$.subscribe({
+    next: (msg2) => {
+      switch (msg2["op"]) {
+        case "update":
+          this.scene.renderAzimuth = msg2["azimuth"];
+          this.scene.renderElevation = msg2["elevation"];
+          this.volScaleMultiplier = msg2["zoom"];
+          this.scene.clipPlane = msg2["clipPlane"];
+          this.drawScene();
+          break;
+        case "create":
+          console.log(msg2);
+          if (!msg2["isError"]) {
+            this.isInSession = true;
+            this.sessionKey = msg2["key"];
+            this.setUpdateInterval();
+          }
+          if (sessionCreatedCallback) {
+            sessionCreatedCallback(msg2["message"], msg2["url"], msg2["key"], msg2["isError"]);
+          }
+          break;
+        case "join":
+          this.isInSession = true;
+          this.isController = msg2["isController"];
+          if (this.isController) {
+            this.setUpdateInterval();
+          }
+          if (sessionJoinedCallback) {
+            sessionJoinedCallback(msg2["message"], msg2["url"], msg2["isController"]);
+          }
+          break;
+      }
+    },
+    error: (err2) => console.log(err2),
+    complete: () => console.log("complete")
+  });
+};
+Niivue.prototype.createSession = function(wsServerUrl, sessionName, sessionCreatedCallback) {
+  this.connectToServer(wsServerUrl, sessionName);
+  this.subscribeToServer(sessionCreatedCallback);
+  this.serverConnection$.next({
+    op: "create"
+  });
+};
+Niivue.prototype.joinSession = function(wsServerUrl, sessionName, key2, sessionJoinedCallback) {
+  this.connectToServer(wsServerUrl, sessionName);
+  this.subscribeToServer(null, sessionJoinedCallback);
+  this.serverConnection$.next({
+    op: "join",
+    key: key2
+  });
+};
+Niivue.prototype.closeSession = function() {
+  this.interval$.complete();
+  this.serverConnection$.complete();
+  this.isInSession = false;
+  this.isController = false;
+};
 Niivue.prototype.arrayEquals = function(a, b) {
   return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((val, index) => val === b[index]);
 };
@@ -109956,13 +110842,13 @@ Niivue.prototype.mouseRightButtonHandler = function(e) {
   this.dragClipPlaneStartDepthAziElev = this.scene.clipPlaneDepthAziElev;
   return;
 };
-Niivue.prototype.calculateMinMaxVoxIdx = function(array) {
-  if (array.length > 2) {
+Niivue.prototype.calculateMinMaxVoxIdx = function(array2) {
+  if (array2.length > 2) {
     throw new Error("array must not contain more than two values");
   }
   return [
-    Math.floor(Math.min(array[0], array[1])),
-    Math.floor(Math.max(array[0], array[1]))
+    Math.floor(Math.min(array2[0], array2[1])),
+    Math.floor(Math.max(array2[0], array2[1]))
   ];
 };
 function intensityRaw2Scaled(hdr, raw) {
@@ -109971,14 +110857,18 @@ function intensityRaw2Scaled(hdr, raw) {
   return raw * hdr.scl_slope + hdr.scl_inter;
 }
 Niivue.prototype.calculateNewRange = function(volIdx = 0) {
-  if (this.sliceType === this.sliceTypeRender) {
+  if (this.sliceType === this.sliceTypeRender && this.sliceMosaicString.length < 1) {
     return;
   }
   if (this.dragStart[0] === this.dragEnd[0] && this.dragStart[1] === this.dragEnd[1])
     return;
   let frac = this.canvasPos2frac([this.dragStart[0], this.dragStart[1]]);
+  if (frac[0] < 0)
+    return;
   let startVox = this.frac2vox(frac, volIdx);
   frac = this.canvasPos2frac([this.dragEnd[0], this.dragEnd[1]]);
+  if (frac[0] < 0)
+    return;
   let endVox = this.frac2vox(frac, volIdx);
   let hi = -Number.MAX_VALUE, lo = Number.MAX_VALUE;
   let xrange;
@@ -110019,7 +110909,7 @@ Niivue.prototype.calculateNewRange = function(volIdx = 0) {
   var mxScale = intensityRaw2Scaled(hdr, hi);
   this.volumes[volIdx].cal_min = mnScale;
   this.volumes[volIdx].cal_max = mxScale;
-  this.intensityRange$.next(this.volumes[volIdx]);
+  this.opts.onIntensityChange(this.volumes[volIdx]);
 };
 Niivue.prototype.mouseUpListener = function() {
   this.scene.mousedown = false;
@@ -110027,10 +110917,14 @@ Niivue.prototype.mouseUpListener = function() {
   this.scene.mouseButtonLeftDown = false;
   if (this.drawPenFillPts.length > 0)
     this.drawPenFilled();
+  else if (this.drawPenAxCorSag >= 0)
+    this.drawAddUndoBitmap();
   this.drawPenLocation = [NaN, NaN, NaN];
   this.drawPenAxCorSag = -1;
   if (this.isDragging) {
     this.isDragging = false;
+    if (this.opts.isDragShowsMeasurementTool)
+      return;
     this.calculateNewRange();
     this.refreshLayers(this.volumes[0], 0, this.volumes.length);
   }
@@ -110073,15 +110967,24 @@ Niivue.prototype.mouseMoveListener = function(e) {
     this.scene.prevY = this.scene.currY;
   }
 };
-Niivue.prototype.resetBriCon = function() {
+Niivue.prototype.resetBriCon = function(msg2 = null) {
+  let isRender = false;
   if (this.sliceType === this.sliceTypeRender) {
+    isRender = true;
+  }
+  if (msg2 !== null) {
+    if (this.inRenderTile(msg2.offsetX, msg2.offsetY) >= 0)
+      isRender = true;
+  }
+  if (isRender) {
     this.scene.mouseDepthPicker = true;
     this.drawScene();
+    this.drawScene();
     return;
   }
   this.volumes[0].cal_min = this.volumes[0].robust_min;
   this.volumes[0].cal_max = this.volumes[0].robust_max;
-  this.intensityRange$.next(this.volumes[0]);
+  this.opts.onIntensityChange(this.volumes[0]);
   this.refreshLayers(this.volumes[0], 0, this.volumes.length);
   this.drawScene();
 };
@@ -110112,9 +111015,6 @@ Niivue.prototype.handlePinchZoom = function(e) {
 };
 Niivue.prototype.keyUpListener = function(e) {
   if (e.code === this.opts.clipPlaneHotKey) {
-    if (this.sliceType != this.sliceTypeRender) {
-      return;
-    }
     let now = new Date().getTime();
     let elapsed = now - this.lastCalled;
     if (elapsed > this.opts.keyDebounceTime) {
@@ -110312,8 +111212,26 @@ Niivue.prototype.dropListener = async function(e) {
   }
   this.drawScene();
 };
+Niivue.prototype.setCornerOrientationText = function(isCornerOrientationText) {
+  this.opts.isCornerOrientationText = isCornerOrientationText;
+  this.updateGLVolume();
+};
 Niivue.prototype.setRadiologicalConvention = function(isRadiologicalConvention) {
   this.opts.isRadiologicalConvention = isRadiologicalConvention;
+  this.updateGLVolume();
+};
+Niivue.prototype.setMeshThicknessOn2D = function(meshThicknessOn2D) {
+  this.opts.meshThicknessOn2D = meshThicknessOn2D;
+  this.updateGLVolume();
+};
+Niivue.prototype.setSliceMosaicString = function(str) {
+  this.sliceMosaicString = str;
+  this.updateGLVolume();
+};
+Niivue.prototype.setSliceMM = function(isSliceMM) {
+  this.opts.isSliceMM = isSliceMM;
+  console.log("SliceMM feature is experimental");
+  this.updateGLVolume();
 };
 Niivue.prototype.getRadiologicalConvention = function() {
   return this.opts.isRadiologicalConvention;
@@ -110322,13 +111240,13 @@ Niivue.prototype.addVolume = function(volume) {
   this.volumes.push(volume);
   let idx = this.volumes.length === 1 ? 0 : this.volumes.length - 1;
   this.setVolume(volume, idx);
-  this.imageLoaded$.next(volume);
+  this.opts.onImageLoaded(volume);
 };
 Niivue.prototype.addMesh = function(mesh) {
   this.meshes.push(mesh);
   let idx = this.meshes.length === 1 ? 0 : this.meshes.length - 1;
   this.setMesh(mesh, idx);
-  this.imageLoaded$.next(mesh);
+  this.opts.onImageLoaded(mesh);
 };
 Niivue.prototype.getVolumeIndexByID = function(id) {
   let n = this.volumes.length;
@@ -110340,9 +111258,112 @@ Niivue.prototype.getVolumeIndexByID = function(id) {
   }
   return -1;
 };
+function encodeRLE(data) {
+  let dl = data.length;
+  let dp = 0;
+  let r = new Uint8Array(dl + Math.ceil(0.01 * dl));
+  let rI = new Int8Array(r.buffer);
+  let rp = 0;
+  while (dp < dl) {
+    let v = data[dp];
+    dp++;
+    let rl = 1;
+    while (rl < 129 && dp < dl && data[dp] === v) {
+      dp++;
+      rl++;
+    }
+    if (rl > 1) {
+      rI[rp] = -rl + 1;
+      rp++;
+      r[rp] = v;
+      rp++;
+      continue;
+    }
+    while (dp < dl) {
+      if (rl > 127)
+        break;
+      if (dp + 2 < dl) {
+        if (v !== data[dp] && data[dp + 2] === data[dp] && data[dp + 1] === data[dp])
+          break;
+      }
+      v = data[dp];
+      dp++;
+      rl++;
+    }
+    r[rp] = rl - 1;
+    rp++;
+    for (let i2 = 0; i2 < rl; i2++) {
+      r[rp] = data[dp - rl + i2];
+      rp++;
+    }
+  }
+  log.info("PackBits " + dl + " -> " + rp + " bytes (x" + dl / rp + ")");
+  return r.slice(0, rp);
+}
+function decodeRLE(rle2, decodedlen) {
+  let r = new Uint8Array(rle2.buffer);
+  let rI = new Int8Array(r.buffer);
+  let rp = 0;
+  let d = new Uint8Array(decodedlen);
+  let dp = 0;
+  while (rp < r.length) {
+    let hdr = rI[rp];
+    rp++;
+    if (hdr < 0) {
+      let v = rI[rp];
+      rp++;
+      for (let i2 = 0; i2 < 1 - hdr; i2++) {
+        d[dp] = v;
+        dp++;
+      }
+    } else {
+      for (let i2 = 0; i2 < hdr + 1; i2++) {
+        d[dp] = rI[rp];
+        rp++;
+        dp++;
+      }
+    }
+  }
+  return d;
+}
+Niivue.prototype.drawAddUndoBitmap = async function(fnm) {
+  if (!this.drawBitmap || this.drawBitmap.length < 1) {
+    console.log("drawAddUndoBitmap error: No drawing open");
+    return false;
+  }
+  this.currentDrawUndoBitmap++;
+  if (this.currentDrawUndoBitmap >= this.maxDrawUndoBitmaps)
+    this.currentDrawUndoBitmap = 0;
+  this.drawUndoBitmaps[this.currentDrawUndoBitmap] = encodeRLE(this.drawBitmap);
+};
+Niivue.prototype.drawClearAllUndoBitmaps = async function() {
+  this.currentDrawUndoBitmap = this.maxDrawUndoBitmaps;
+  if (this.drawUndoBitmaps.length < 1)
+    return;
+  for (let i2 = this.drawUndoBitmaps.length - 1; i2 >= 0; i2--)
+    array[i2] = [];
+};
+Niivue.prototype.drawUndo = function() {
+  if (this.drawUndoBitmaps.length < 1) {
+    console.log("undo bitmaps not loaded");
+    return;
+  }
+  this.currentDrawUndoBitmap--;
+  if (this.currentDrawUndoBitmap < 0)
+    this.currentDrawUndoBitmap = this.drawUndoBitmaps.length - 1;
+  if (this.currentDrawUndoBitmap >= this.drawUndoBitmaps.length)
+    this.currentDrawUndoBitmap = 0;
+  if (this.drawUndoBitmaps[this.currentDrawUndoBitmap].length < 2) {
+    console.log("drawUndo is misbehaving");
+    return;
+  }
+  this.drawBitmap = decodeRLE(this.drawUndoBitmaps[this.currentDrawUndoBitmap], this.drawBitmap.length);
+  this.refreshDrawing(true);
+};
 Niivue.prototype.loadDrawing = async function(fnm) {
   if (this.drawBitmap)
     console.log("Overwriting open drawing!");
+  this.drawClearAllUndoBitmaps();
   let volume = await NVImage.loadFromUrl({ url: fnm });
   let dims = volume.hdr.dims;
   if (dims[1] !== this.back.hdr.dims[1] || dims[2] !== this.back.hdr.dims[2] || dims[3] !== this.back.hdr.dims[3]) {
@@ -110353,7 +111374,6 @@ Niivue.prototype.loadDrawing = async function(fnm) {
     console.log("Drawings should be UINT8");
   let perm = volume.permRAS;
   let vx = dims[1] * dims[2] * dims[3];
-  this.drawUndoBitmap = null;
   this.drawBitmap = new Uint8Array(vx);
   this.drawTexture = this.r8Tex(this.drawTexture, this.gl.TEXTURE7, this.back.dims, true);
   let layout = [0, 0, 0];
@@ -110405,6 +111425,7 @@ Niivue.prototype.loadDrawing = async function(fnm) {
       }
     }
   }
+  this.drawAddUndoBitmap();
   this.refreshDrawing(false);
   this.drawScene();
 };
@@ -110517,9 +111538,12 @@ Niivue.prototype.setMeshLayerProperty = function(mesh, layer, key2, val) {
   this.meshes[idx].setLayerProperty(layer, key2, val, this.gl);
   this.updateGLVolume();
 };
+Niivue.prototype.setPan2Dxyzmm = function(xyzmmZoom) {
+  this.scene.pan2Dxyzmm = xyzmmZoom;
+  this.drawScene();
+};
 Niivue.prototype.setScale2D = function(zoomFactor) {
   this.scene.scale2D = zoomFactor;
-  console.log("bingo");
   this.drawScene();
 };
 Niivue.prototype.setRenderAzimuthElevation = function(a, e) {
@@ -110614,12 +111638,12 @@ Niivue.prototype.moveVolumeToTop = function(volume) {
   this.setVolume(volume, this.volumes.length - 1);
 };
 Niivue.prototype.mouseDown = function mouseDown(x2, y) {
-  if (this.sliceType != this.sliceTypeRender)
+  if (this.inRenderTile(x2, y) < 0)
     return;
   this.mousePos = [x2, y];
 };
 Niivue.prototype.mouseMove = function mouseMove(x2, y) {
-  if (this.sliceType != this.sliceTypeRender)
+  if (this.inRenderTile(x2, y) < 0)
     return;
   this.scene.renderAzimuth += x2 - this.mousePos[0];
   this.scene.renderElevation += y - this.mousePos[1];
@@ -110646,8 +111670,6 @@ Niivue.prototype.setClipPlane = function(depthAzimuthElevation) {
   let v = this.sph2cartDeg(depthAzimuthElevation[1] + 180, depthAzimuthElevation[2]);
   this.scene.clipPlane = [v[0], v[1], v[2], depthAzimuthElevation[0]];
   this.scene.clipPlaneDepthAziElev = depthAzimuthElevation;
-  if (this.sliceType != this.sliceTypeRender)
-    return;
   this.drawScene();
 };
 Niivue.prototype.setCrosshairColor = function(color) {
@@ -110698,6 +111720,8 @@ Niivue.prototype.setScale = function(scale2) {
 };
 Niivue.prototype.setClipPlaneColor = function(color) {
   this.opts.clipPlaneColor = color;
+  this.renderShader.use(this.gl);
+  this.gl.uniform4fv(this.renderShader.uniforms["clipPlaneColor"], this.opts.clipPlaneColor);
   this.drawScene();
 };
 Niivue.prototype.overlayRGBA = function(volume) {
@@ -110762,6 +111786,7 @@ Niivue.prototype.loadVolumes = async function(volumeList) {
       url: volumeList[i2].url,
       name: volumeList[i2].name,
       colorMap: volumeList[i2].colorMap,
+      colorMapNegative: volumeList[i2].colorMapNegative,
       opacity: volumeList[i2].opacity,
       urlImgData: volumeList[i2].urlImgData,
       cal_min: volumeList[i2].cal_min,
@@ -110841,7 +111866,8 @@ Niivue.prototype.createEmptyDrawing = function() {
     return;
   let vx = this.back.dims[1] * this.back.dims[2] * this.back.dims[3];
   this.drawBitmap = new Uint8Array(vx);
-  this.drawUndoBitmap = null;
+  this.drawClearAllUndoBitmaps();
+  this.drawAddUndoBitmap();
   this.drawTexture = this.r8Tex(this.drawTexture, this.gl.TEXTURE7, this.back.dims, true);
   this.refreshDrawing(false);
 };
@@ -110918,16 +111944,6 @@ function img2ras16(volume) {
   }
   return img16;
 }
-Niivue.prototype.drawUndo = function() {
-  let hdr = this.back.hdr;
-  let nv = hdr.dims[1] * hdr.dims[2] * hdr.dims[3];
-  if (this.drawUndoBitmap.length !== nv || this.drawBitmap.length !== nv) {
-    console.log("bitmap dims are wrong");
-    return;
-  }
-  this.drawBitmap = this.drawUndoBitmap.slice();
-  this.refreshDrawing(true);
-};
 Niivue.prototype.drawGrowCut = function() {
   let hdr = this.back.hdr;
   let nv = hdr.dims[1] * hdr.dims[2] * hdr.dims[3];
@@ -110935,7 +111951,6 @@ Niivue.prototype.drawGrowCut = function() {
     console.log("bitmap dims are wrong");
     return;
   }
-  this.drawUndoBitmap = this.drawBitmap.slice();
   let gl = this.gl;
   let fb = gl.createFramebuffer();
   gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
@@ -110948,16 +111963,19 @@ Niivue.prototype.drawGrowCut = function() {
     img16[i2] = this.drawBitmap[i2];
   let label0 = this.r16Tex(null, gl.TEXTURE6, this.back.dims, img16);
   let label1 = this.r16Tex(null, gl.TEXTURE7, this.back.dims, img16);
+  let kMAX_STRENGTH = 1e4;
   for (let i2 = 1; i2 < nv; i2++)
     if (img16[i2] > 0)
-      img16[i2] = 1e4;
+      img16[i2] = kMAX_STRENGTH;
   let strength0 = this.r16Tex(null, gl.TEXTURE4, this.back.dims, img16);
   let strength1 = this.r16Tex(null, gl.TEXTURE5, this.back.dims, img16);
   this.gl.bindVertexArray(this.genericVAO);
   let shader = this.growCutShader;
   shader.use(gl);
+  let iterations = 128;
+  gl.uniform1i(shader.uniforms["finalPass"], 0);
   gl.uniform1i(shader.uniforms["inputTexture0"], 3);
-  for (let j = 0; j < 45; j++) {
+  for (let j = 0; j < iterations; j++) {
     gl.uniform1i(shader.uniforms["inputTexture1"], 6);
     gl.uniform1i(shader.uniforms["inputTexture2"], 4);
     for (let i2 = 0; i2 < this.back.dims[3]; i2++) {
@@ -110971,6 +111989,8 @@ Niivue.prototype.drawGrowCut = function() {
         console.error("Incomplete framebuffer");
       this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
     }
+    if (j === iterations - 1)
+      gl.uniform1i(shader.uniforms["finalPass"], 1);
     gl.uniform1i(shader.uniforms["inputTexture1"], 7);
     gl.uniform1i(shader.uniforms["inputTexture2"], 5);
     for (let i2 = 0; i2 < this.back.dims[3]; i2++) {
@@ -110986,8 +112006,8 @@ Niivue.prototype.drawGrowCut = function() {
     }
   }
   gl.drawBuffers([gl.COLOR_ATTACHMENT0]);
-  let readAttach = gl.COLOR_ATTACHMENT0;
-  let readTex = label1;
+  let readAttach = gl.COLOR_ATTACHMENT1;
+  let readTex = label0;
   gl.readBuffer(readAttach);
   const format = gl.getParameter(gl.IMPLEMENTATION_COLOR_READ_FORMAT);
   const type2 = gl.getParameter(gl.IMPLEMENTATION_COLOR_READ_TYPE);
@@ -111023,6 +112043,7 @@ Niivue.prototype.drawGrowCut = function() {
   gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
   gl.bindFramebuffer(gl.FRAMEBUFFER, null);
   gl.deleteFramebuffer(fb);
+  this.drawAddUndoBitmap();
   this.refreshDrawing(true);
 };
 Niivue.prototype.drawPt = function(x2, y, z, penValue) {
@@ -111034,7 +112055,7 @@ Niivue.prototype.drawPt = function(x2, y, z, penValue) {
   z = Math.min(Math.max(z, 0), dz - 1);
   this.drawBitmap[x2 + y * dx + z * dx * dy] = penValue;
 };
-Niivue.prototype.drawLine = function(ptA, ptB, penValue) {
+Niivue.prototype.drawPenLine = function(ptA, ptB, penValue) {
   let dx = Math.abs(ptA[0] - ptB[0]);
   let dy = Math.abs(ptA[1] - ptB[1]);
   let dz = Math.abs(ptA[2] - ptB[2]);
@@ -111106,6 +112127,74 @@ Niivue.prototype.drawLine = function(ptA, ptB, penValue) {
     }
   }
 };
+Niivue.prototype.drawFloodFill = function(seedXYZ, newColor = 0) {
+  newColor = Math.abs(newColor);
+  let dims = [this.back.dims[1], this.back.dims[2], this.back.dims[3]];
+  if (seedXYZ[0] < 0 || seedXYZ[1] < 0 || seedXYZ[2] < 0)
+    return;
+  if (seedXYZ[0] >= dims[0] || seedXYZ[1] >= dims[1] || seedXYZ[2] >= dims[2])
+    return;
+  let nx = dims[0];
+  let nxy = nx * dims[1];
+  let nxyz = nxy * dims[2];
+  let img = this.drawBitmap.slice();
+  if (img.length !== nxy * dims[2])
+    return;
+  function xyz2vx(pt) {
+    return pt[0] + pt[1] * nx + pt[2] * nxy;
+  }
+  function vx2xyz(vx) {
+    let Z = Math.floor(vx / nxy);
+    let Y = Math.floor((vx - Z * nxy) / nx);
+    let X = Math.floor(vx % nx);
+    return [X, Y, Z];
+  }
+  let seedVx = xyz2vx(seedXYZ);
+  let seedColor = img[seedVx];
+  if (seedColor === newColor) {
+    console.log("drawFloodFill selected voxel is already desired color");
+    return;
+  }
+  for (let i2 = 1; i2 < nxyz; i2++) {
+    img[i2] = 0;
+    if (this.drawBitmap[i2] === seedColor)
+      img[i2] = 1;
+  }
+  let Q = [];
+  Q.push(seedVx);
+  img[seedVx] = 2;
+  while (Q.length > 0) {
+    let testNeighbor = function(offset) {
+      let xyzN = xyz.slice();
+      xyzN[0] += offset[0];
+      xyzN[1] += offset[1];
+      xyzN[2] += offset[2];
+      if (xyzN[0] < 0 || xyzN[1] < 0 || xyzN[2] < 0)
+        return;
+      if (xyzN[0] >= dims[0] || xyzN[1] >= dims[1] || xyzN[2] >= dims[2])
+        return;
+      let vxT = xyz2vx(xyzN);
+      if (img[vxT] !== 1)
+        return;
+      img[vxT] = 2;
+      Q.push(vxT);
+    };
+    let vx = Q[0];
+    Q.shift();
+    let xyz = vx2xyz(vx);
+    testNeighbor([0, 0, -1]);
+    testNeighbor([0, 0, 1]);
+    testNeighbor([0, -1, 0]);
+    testNeighbor([0, 1, 0]);
+    testNeighbor([-1, 0, 0]);
+    testNeighbor([1, 0, 0]);
+  }
+  for (let i2 = 1; i2 < nxyz; i2++)
+    if (img[i2] === 2)
+      this.drawBitmap[i2] = newColor;
+  this.drawAddUndoBitmap();
+  this.refreshDrawing(false);
+};
 Niivue.prototype.drawPenFilled = function() {
   let nPts = this.drawPenFillPts.length;
   if (nPts < 2) {
@@ -111221,15 +112310,17 @@ Niivue.prototype.drawPenFilled = function() {
       }
     }
   }
-  if (!this.drawFillOverwrites && this.drawUndoBitmap.length === this.drawBitmap.length) {
-    let nv = this.drawUndoBitmap.length;
+  if (!this.drawFillOverwrites && this.drawUndoBitmaps[this.currentDrawUndoBitmap].length > 0) {
+    let nv = this.drawBitmap.length;
+    let bmp = decodeRLE(this.drawUndoBitmaps[this.currentDrawUndoBitmap], nv);
     for (let i2 = 0; i2 < nv; i2++) {
-      if (this.drawUndoBitmap[i2] === 0)
+      if (bmp[i2] === 0)
         continue;
-      this.drawBitmap[i2] = this.drawUndoBitmap[i2];
+      this.drawBitmap[i2] = bmp[i2];
     }
   }
   this.drawPenFillPts = [];
+  this.drawAddUndoBitmap();
   this.refreshDrawing(false);
 };
 Niivue.prototype.closeDrawing = function() {
@@ -111473,8 +112564,15 @@ Niivue.prototype.init = async function() {
   this.gl.uniform1i(this.sliceShader.uniforms["overlay"], 2);
   this.gl.uniform1i(this.sliceShader.uniforms["drawing"], 7);
   this.gl.uniform1f(this.sliceShader.uniforms["drawOpacity"], this.drawOpacity);
-  this.lineShader = new Shader(this.gl, vertLineShader, fragLineShader);
-  this.graphShader = new Shader(this.gl, vertGraphShader, fragLineShader);
+  this.sliceMMShader = new Shader(this.gl, vertSliceMMShader, fragSliceMMShader);
+  this.sliceMMShader.use(this.gl);
+  this.gl.uniform1i(this.sliceMMShader.uniforms["volume"], 0);
+  this.gl.uniform1i(this.sliceMMShader.uniforms["overlay"], 2);
+  this.gl.uniform1i(this.sliceMMShader.uniforms["drawing"], 7);
+  this.gl.uniform1f(this.sliceMMShader.uniforms["drawOpacity"], this.drawOpacity);
+  this.rectShader = new Shader(this.gl, vertRectShader, fragRectShader);
+  this.lineShader = new Shader(this.gl, vertLineShader, fragRectShader);
+  this.graphShader = new Shader(this.gl, vertGraphShader, fragRectShader);
   this.renderShader = new Shader(this.gl, vertRenderShader, fragRenderShader);
   this.renderShader.use(this.gl);
   this.gl.uniform1i(this.renderShader.uniforms["volume"], 0);
@@ -111602,7 +112700,6 @@ Niivue.prototype.refreshLayers = function(overlayItem, layer, numLayers) {
   if (layer === 0) {
     this.volumeObject3D = overlayItem.toNiivueObject3D(this.VOLUME_ID, this.gl);
     invert(mtx, mtx);
-    log.debug(`mtx layer ${layer}`, mtx);
     this.back.matRAS = overlayItem.matRAS;
     this.back.dims = overlayItem.dimsRAS;
     this.back.pixDims = overlayItem.pixDimsRAS;
@@ -111719,10 +112816,54 @@ Niivue.prototype.refreshLayers = function(overlayItem, layer, numLayers) {
   this.gl.uniform1i(orientShader.uniforms["blend3D"], 5);
   this.gl.uniform1i(orientShader.uniforms["colormap"], 1);
   this.gl.uniform1f(orientShader.uniforms["layer"], layer);
-  this.gl.uniform1f(orientShader.uniforms["numLayers"], numLayers);
   this.gl.uniform1f(orientShader.uniforms["scl_inter"], hdr.scl_inter);
   this.gl.uniform1f(orientShader.uniforms["scl_slope"], hdr.scl_slope);
   this.gl.uniform1f(orientShader.uniforms["opacity"], opacity);
+  this.gl.uniform1i(orientShader.uniforms["modulationVol"], 7);
+  let modulateTexture = null;
+  if (overlayItem.modulationImage && overlayItem.modulationImage >= 0 && overlayItem.modulationImage < this.volumes.length) {
+    console.log(this.volumes);
+    let mhdr = this.volumes[overlayItem.modulationImage].hdr;
+    if (mhdr.dims[1] === hdr.dims[1] && mhdr.dims[2] === hdr.dims[2] && mhdr.dims[3] === hdr.dims[3]) {
+      this.gl.uniform1i(orientShader.uniforms["modulation"], 1);
+      modulateTexture = this.r8Tex(modulateTexture, this.gl.TEXTURE7, hdr.dims, true);
+      this.gl.activeTexture(this.gl.TEXTURE7);
+      this.gl.bindTexture(this.gl.TEXTURE_3D, modulateTexture);
+      let vx = hdr.dims[1] * hdr.dims[2] * hdr.dims[3];
+      let modulateVolume = new Uint8Array(vx);
+      let mn = mhdr.cal_min;
+      let scale2 = 255 / (mhdr.cal_max - mhdr.cal_min);
+      let imgRaw = this.volumes[overlayItem.modulationImage].img.buffer;
+      let img2 = new Uint8Array(imgRaw);
+      switch (mhdr.datatypeCode) {
+        case overlayItem.DT_SIGNED_SHORT:
+          img2 = new Int16Array(imgRaw);
+          break;
+        case overlayItem.DT_FLOAT:
+          img2 = new Float32Array(imgRaw);
+          break;
+        case overlayItem.DT_DOUBLE:
+          img2 = new Float64Array(imgRaw);
+          break;
+        case overlayItem.DT_RGB:
+          img2 = new Uint8Array(imgRaw);
+          break;
+        case overlayItem.DT_UINT16:
+          img2 = new Uint16Array(imgRaw);
+          break;
+      }
+      console.log(this.volumes[overlayItem.modulationImage]);
+      for (let i2 = 0; i2 < vx; i2++) {
+        let v = img2[i2] * mhdr.scl_slope + mhdr.scl_inter;
+        v = (v - mn) * scale2;
+        v = Math.min(Math.max(v, 0), 255);
+        modulateVolume[i2] = v;
+      }
+      this.gl.texSubImage3D(this.gl.TEXTURE_3D, 0, 0, 0, 0, hdr.dims[1], hdr.dims[2], hdr.dims[3], this.gl.RED, this.gl.UNSIGNED_BYTE, modulateVolume);
+    } else
+      console.log("Modulation image dimensions do not match target");
+  } else
+    this.gl.uniform1i(orientShader.uniforms["modulation"], 0);
   this.gl.uniformMatrix4fv(orientShader.uniforms["mtx"], false, mtx);
   if (hdr.intent_code === 1002) {
     let x2 = 1 / this.back.dims[1];
@@ -111743,6 +112884,7 @@ Niivue.prototype.refreshLayers = function(overlayItem, layer, numLayers) {
   }
   this.gl.bindVertexArray(this.unusedVAO);
   this.gl.deleteTexture(tempTex3D);
+  this.gl.deleteTexture(modulateTexture);
   this.gl.deleteTexture(blendTexture);
   this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
   this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
@@ -111760,10 +112902,16 @@ Niivue.prototype.refreshLayers = function(overlayItem, layer, numLayers) {
   this.pickingShader.use(this.gl);
   this.gl.uniform1f(this.pickingShader.uniforms["overlays"], this.overlays.length);
   this.gl.uniform3fv(this.pickingShader.uniforms["texVox"], vox);
+  this.sliceMMShader.use(this.gl);
+  this.gl.uniform1f(this.sliceMMShader.uniforms["overlays"], this.overlays.length);
+  this.gl.uniform1f(this.sliceMMShader.uniforms["drawOpacity"], this.drawOpacity);
+  this.gl.uniform1i(this.sliceMMShader.uniforms["drawing"], 7);
   this.sliceShader.use(this.gl);
   this.gl.uniform1f(this.sliceShader.uniforms["overlays"], this.overlays.length);
   this.gl.uniform1f(this.sliceShader.uniforms["drawOpacity"], this.drawOpacity);
   this.gl.uniform1i(this.sliceShader.uniforms["drawing"], 7);
+  this.gl.activeTexture(this.gl.TEXTURE7);
+  this.gl.bindTexture(this.gl.TEXTURE_3D, this.drawTexture);
   this.updateInterpolation(layer);
 };
 Niivue.prototype.colorMaps = function(sort = true) {
@@ -111774,6 +112922,18 @@ Niivue.prototype.setColorMap = function(id, colorMap) {
   this.volumes[idx].colorMap = colorMap;
   this.updateGLVolume();
 };
+Niivue.prototype.setColorMapNegative = function(id, colorMapNegative) {
+  let idx = this.getVolumeIndexByID(id);
+  this.volumes[idx].colorMapNegative = colorMapNegative;
+  this.updateGLVolume();
+};
+Niivue.prototype.setModulationImage = function(idTarget, idModulation) {
+  let idxTarget = this.getVolumeIndexByID(idTarget);
+  let idxModulation = null;
+  idxModulation = this.getVolumeIndexByID(idModulation);
+  this.volumes[idxTarget].modulationImage = idxModulation;
+  this.updateGLVolume();
+};
 Niivue.prototype.setGamma = function(gamma = 1) {
   cmapper.gamma = gamma;
   this.updateGLVolume();
@@ -111808,40 +112968,87 @@ Niivue.prototype.refreshColormaps = function() {
   this.colormapTexture = this.gl.createTexture();
   this.gl.activeTexture(this.gl.TEXTURE1);
   this.gl.bindTexture(this.gl.TEXTURE_2D, this.colormapTexture);
-  this.gl.texStorage2D(this.gl.TEXTURE_2D, 1, this.gl.RGBA8, 256, nLayer);
+  this.gl.texStorage2D(this.gl.TEXTURE_2D, 1, this.gl.RGBA8, 256, nLayer * 2);
   this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
   this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
   this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_R, this.gl.CLAMP_TO_EDGE);
   this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
   this.gl.pixelStorei(this.gl.UNPACK_ALIGNMENT, 1);
   let luts2 = this.colormap(this.volumes[0].colorMap);
-  if (nLayer > 1) {
-    for (let i2 = 1; i2 < nLayer; i2++) {
-      let lut = this.colormap(this.volumes[i2].colorMap);
-      let c2 = new Uint8ClampedArray(luts2.length + lut.length);
-      c2.set(luts2);
-      c2.set(lut, luts2.length);
-      luts2 = c2;
-    }
-  }
-  this.gl.texSubImage2D(this.gl.TEXTURE_2D, 0, 0, 0, 256, nLayer, this.gl.RGBA, this.gl.UNSIGNED_BYTE, luts2);
+  function addColormap(lut) {
+    let c2 = new Uint8ClampedArray(luts2.length + lut.length);
+    c2.set(luts2);
+    c2.set(lut, luts2.length);
+    luts2 = c2;
+  }
+  for (let i2 = 1; i2 < nLayer; i2++)
+    addColormap(this.colormap(this.volumes[i2].colorMap));
+  let bogusLut = new Uint8ClampedArray(1024);
+  bogusLut[0] = 255;
+  bogusLut[1] = 255;
+  bogusLut[2] = 255;
+  bogusLut[3] = 0;
+  bogusLut[4] = 0;
+  bogusLut[5] = 0;
+  bogusLut[6] = 0;
+  bogusLut[7] = 255;
+  for (let i2 = 0; i2 < nLayer; i2++) {
+    let lut = bogusLut.slice();
+    if (this.volumes[i2].colorMapNegative.length > 0)
+      lut = this.colormap(this.volumes[i2].colorMapNegative);
+    addColormap(lut);
+  }
+  this.gl.texSubImage2D(this.gl.TEXTURE_2D, 0, 0, 0, 256, nLayer * 2, this.gl.RGBA, this.gl.UNSIGNED_BYTE, luts2);
   return this;
 };
 Niivue.prototype.sliceScale = function() {
-  var dims = [
-    1,
-    this.back.dims[1] * this.back.pixDims[1],
-    this.back.dims[2] * this.back.pixDims[2],
-    this.back.dims[3] * this.back.pixDims[3]
-  ];
-  var longestAxis = Math.max(dims[1], Math.max(dims[2], dims[3]));
+  let dimsMM = this.screenFieldOfViewMM(this.sliceTypeAxial);
+  var longestAxis = Math.max(dimsMM[0], Math.max(dimsMM[1], dimsMM[2]));
   var volScale = [
-    dims[1] / longestAxis,
-    dims[2] / longestAxis,
-    dims[3] / longestAxis
+    dimsMM[0] / longestAxis,
+    dimsMM[1] / longestAxis,
+    dimsMM[2] / longestAxis
   ];
   var vox = [this.back.dims[1], this.back.dims[2], this.back.dims[3]];
-  return { volScale, vox };
+  return { volScale, vox, longestAxis, dimsMM };
+};
+function swizzleVec3(vec, order = [0, 1, 2]) {
+  let vout = create$1();
+  vout[0] = vec[order[0]];
+  vout[1] = vec[order[1]];
+  vout[2] = vec[order[2]];
+  return vout;
+}
+Niivue.prototype.inRenderTile = function(x2, y) {
+  for (let i2 = 0; i2 < this.screenSlices.length; i2++) {
+    if (this.screenSlices[i2].axCorSag !== this.sliceTypeRender)
+      continue;
+    let ltwh = this.screenSlices[i2].leftTopWidthHeight;
+    if (x2 > ltwh[0] && y > ltwh[1] && x2 < ltwh[0] + ltwh[2] && y < ltwh[1] + ltwh[3])
+      return i2;
+  }
+  return -1;
+};
+Niivue.prototype.sliceScroll3D = function(posChange = 0) {
+  if (posChange === 0)
+    return;
+  if (this.volumes.length > 0 && this.scene.clipPlaneDepthAziElev[0] < 1.8) {
+    let depthAziElev = this.scene.clipPlaneDepthAziElev.slice();
+    if (posChange > 0)
+      depthAziElev[0] = Math.min(1.5, depthAziElev[0] + 0.025);
+    if (posChange < 0)
+      depthAziElev[0] = Math.max(-1.5, depthAziElev[0] - 0.025);
+    if (depthAziElev[0] !== this.scene.clipPlaneDepthAziElev[0]) {
+      this.scene.clipPlaneDepthAziElev = depthAziElev;
+      return this.setClipPlane(this.scene.clipPlaneDepthAziElev);
+    }
+    return;
+  }
+  if (posChange > 0)
+    this.volScaleMultiplier = Math.min(2, this.volScaleMultiplier * 1.1);
+  if (posChange < 0)
+    this.volScaleMultiplier = Math.max(0.5, this.volScaleMultiplier * 0.9);
+  this.drawScene();
 };
 Niivue.prototype.mouseClick = function(x2, y, posChange = 0, isDelta = true) {
   var posNow;
@@ -111864,48 +113071,23 @@ Niivue.prototype.mouseClick = function(x2, y, posChange = 0, isDelta = true) {
       return;
     }
   }
-  if (this.sliceType === this.sliceTypeRender) {
-    if (posChange === 0)
-      return;
-    if (this.volumes.length > 0 && this.scene.clipPlaneDepthAziElev[0] < 1.8) {
-      let depthAziElev = this.scene.clipPlaneDepthAziElev.slice();
-      if (posChange > 0)
-        depthAziElev[0] = Math.min(1.5, depthAziElev[0] + 0.025);
-      if (posChange < 0)
-        depthAziElev[0] = Math.max(-1.5, depthAziElev[0] - 0.025);
-      if (depthAziElev[0] !== this.scene.clipPlaneDepthAziElev[0]) {
-        this.scene.clipPlaneDepthAziElev = depthAziElev;
-        return this.setClipPlane(this.scene.clipPlaneDepthAziElev);
-      }
-      return;
-    }
-    if (posChange > 0)
-      this.volScaleMultiplier = Math.min(2, this.volScaleMultiplier * 1.1);
-    if (posChange < 0)
-      this.volScaleMultiplier = Math.max(0.5, this.volScaleMultiplier * 0.9);
+  if (this.inRenderTile(x2, y) >= 0) {
+    this.sliceScroll3D(posChange);
     this.drawScene();
     return;
   }
-  if (this.numScreenSlices < 1 || this.gl.canvas.height < 1 || this.gl.canvas.width < 1)
+  if (this.screenSlices.length < 1 || this.gl.canvas.height < 1 || this.gl.canvas.width < 1)
     return;
-  for (let i2 = 0; i2 < this.numScreenSlices; i2++) {
+  for (let i2 = 0; i2 < this.screenSlices.length; i2++) {
     var axCorSag = this.screenSlices[i2].axCorSag;
     if (this.drawPenAxCorSag >= 0 && this.drawPenAxCorSag !== axCorSag)
       continue;
     if (axCorSag > this.sliceTypeSagittal)
       continue;
-    var ltwh = this.screenSlices[i2].leftTopWidthHeight;
-    let isMirror = false;
-    if (ltwh[2] < 0) {
-      isMirror = true;
-      ltwh[0] += ltwh[2];
-      ltwh[2] = -ltwh[2];
-    }
-    var fracX = (x2 - ltwh[0]) / ltwh[2];
-    if (isMirror)
-      fracX = 1 - fracX;
-    var fracY = 1 - (y - ltwh[1]) / ltwh[3];
-    if (fracX >= 0 && fracX < 1 && fracY >= 0 && fracY < 1) {
+    let texFrac = this.screenXY2TextureFrac(x2, y, i2);
+    if (texFrac[0] < 0)
+      continue;
+    {
       if (!isDelta) {
         this.scene.crosshairPos[2 - axCorSag] = posChange;
         this.drawScene();
@@ -111920,42 +113102,35 @@ Niivue.prototype.mouseClick = function(x2, y, posChange = 0, isDelta = true) {
           posFuture = 0;
         this.scene.crosshairPos[2 - axCorSag] = posFuture;
         this.drawScene();
-        this.scene.location$.next({
+        this.opts.onLocationChange({
           mm: this.frac2mm(this.scene.crosshairPos),
           vox: this.frac2vox(this.scene.crosshairPos),
           frac: this.scene.crosshairPos,
+          xy: [x2, y],
           values: this.volumes.map((v) => {
             let mm = this.frac2mm(this.scene.crosshairPos);
             let vox = v.mm2vox(mm);
             let val = v.getValue(...vox);
-            return val;
+            return { name: v.name, value: val, id: v.id, mm, vox };
           })
         });
         return;
       }
-      if (axCorSag === this.sliceTypeAxial) {
-        this.scene.crosshairPos[0] = fracX;
-        this.scene.crosshairPos[1] = fracY;
-      }
-      if (axCorSag === this.sliceTypeCoronal) {
-        this.scene.crosshairPos[0] = fracX;
-        this.scene.crosshairPos[2] = fracY;
-      }
-      if (axCorSag === this.sliceTypeSagittal) {
-        this.scene.crosshairPos[1] = fracX;
-        this.scene.crosshairPos[2] = fracY;
-      }
+      this.scene.crosshairPos = texFrac.slice();
       if (this.opts.drawingEnabled) {
         let pt = this.frac2vox(this.scene.crosshairPos);
+        if (this.opts.penValue < 0 || Object.is(this.opts.penValue, -0)) {
+          this.drawFloodFill(pt, Math.abs(this.opts.penValue));
+          return;
+        }
         if (isNaN(this.drawPenLocation[0])) {
           this.drawPenAxCorSag = axCorSag;
           this.drawPenFillPts = [];
           this.drawPt(...pt, this.opts.penValue);
-          this.drawUndoBitmap = this.drawBitmap.slice();
         } else {
           if (pt[0] === this.drawPenLocation[0] && pt[1] === this.drawPenLocation[1] && pt[2] === this.drawPenLocation[2])
             return;
-          this.drawLine(pt, this.drawPenLocation, this.opts.penValue);
+          this.drawPenLine(pt, this.drawPenLocation, this.opts.penValue);
         }
         this.drawPenLocation = pt;
         if (this.opts.isFilledPen)
@@ -111963,57 +113138,287 @@ Niivue.prototype.mouseClick = function(x2, y, posChange = 0, isDelta = true) {
         this.refreshDrawing(false);
       }
       this.drawScene();
-      this.scene.location$.next({
+      this.opts.onLocationChange({
         mm: this.frac2mm(this.scene.crosshairPos),
         vox: this.frac2vox(this.scene.crosshairPos),
         frac: this.scene.crosshairPos,
+        xy: [x2, y],
         values: this.volumes.map((v) => {
           let mm = this.frac2mm(this.scene.crosshairPos);
           let vox = v.mm2vox(mm);
           let val = v.getValue(...vox);
-          return val;
+          return { name: v.name, value: val, id: v.id, mm, vox };
         })
       });
       return;
-    } else {
-      if (x2 === null && y === null) {
-        this.scene.crosshairPos[2 - axCorSag] = posChange;
-        this.drawScene();
-        return;
-      }
     }
   }
 };
-Niivue.prototype.drawSelectionBox = function(leftTopWidthHeight) {
+Niivue.prototype.drawRuler = function() {
+  let fovMM = [];
+  let ltwh = [];
+  for (let i2 = 0; i2 < this.screenSlices.length; i2++) {
+    if (this.screenSlices[i2].axCorSag === this.sliceTypeRender)
+      continue;
+    if (this.screenSlices[i2].fovMM.length > 1) {
+      ltwh = this.screenSlices[i2].leftTopWidthHeight;
+      fovMM = this.screenSlices[i2].fovMM;
+      break;
+    }
+  }
+  if (ltwh.length < 4)
+    return;
+  let frac10cm = 100 / fovMM[0];
+  let pix10cm = frac10cm * ltwh[2];
+  let pixLeft = ltwh[0] + 0.5 * ltwh[2] - 0.5 * pix10cm;
+  let pixTop = ltwh[1] + ltwh[3] - 2 * this.opts.rulerWidth;
+  let startXYendXY = [pixLeft, pixTop, pixLeft + pix10cm, pixTop];
+  this.drawRuler10cm(startXYendXY);
+};
+Niivue.prototype.drawRuler10cm = function(startXYendXY) {
+  this.gl.bindVertexArray(this.genericVAO);
   this.lineShader.use(this.gl);
-  this.gl.uniform4fv(this.lineShader.uniforms["lineColor"], this.opts.selectionBoxColor);
+  this.gl.uniform4fv(this.lineShader.uniforms["lineColor"], this.opts.rulerColor);
   this.gl.uniform2fv(this.lineShader.uniforms["canvasWidthHeight"], [
     this.gl.canvas.width,
     this.gl.canvas.height
   ]);
-  this.gl.uniform4f(this.lineShader.uniforms["leftTopWidthHeight"], leftTopWidthHeight[0], leftTopWidthHeight[1], leftTopWidthHeight[2], leftTopWidthHeight[3]);
+  this.gl.uniform1f(this.lineShader.uniforms["thickness"], this.opts.rulerWidth);
+  this.gl.uniform4fv(this.lineShader.uniforms["startXYendXY"], startXYendXY);
+  this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+  let w1cm = -0.1 * (startXYendXY[0] - startXYendXY[2]);
+  let b = startXYendXY[1];
+  let t = b - 2 * this.opts.rulerWidth;
+  let t2 = b - 4 * this.opts.rulerWidth;
+  for (let i2 = 0; i2 < 11; i2++) {
+    let l = startXYendXY[0] + i2 * w1cm;
+    let xyxy = [l, b, l, t];
+    if (i2 % 5 === 0)
+      xyxy[3] = t2;
+    this.gl.uniform4fv(this.lineShader.uniforms["startXYendXY"], xyxy);
+    this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+  }
+  this.gl.bindVertexArray(this.unusedVAO);
+};
+Niivue.prototype.drawMeasurementTool = function(startXYendXY) {
+  let gl = this.gl;
+  gl.bindVertexArray(this.genericVAO);
+  gl.depthFunc(gl.ALWAYS);
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+  this.lineShader.use(this.gl);
+  gl.uniform4fv(this.lineShader.uniforms["lineColor"], this.opts.rulerColor);
+  gl.uniform2fv(this.lineShader.uniforms["canvasWidthHeight"], [
+    gl.canvas.width,
+    gl.canvas.height
+  ]);
+  gl.uniform1f(this.lineShader.uniforms["thickness"], this.opts.rulerWidth);
+  gl.uniform4fv(this.lineShader.uniforms["startXYendXY"], startXYendXY);
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  let c2 = this.opts.rulerColor;
+  c2[3] = 1;
+  gl.uniform4fv(this.lineShader.uniforms["lineColor"], c2);
+  let w = this.opts.rulerWidth;
+  gl.uniform1f(this.lineShader.uniforms["thickness"], w * 2);
+  let sXYeXY = [
+    startXYendXY[0],
+    startXYendXY[1] - w,
+    startXYendXY[0],
+    startXYendXY[1] + w
+  ];
+  gl.uniform4fv(this.lineShader.uniforms["startXYendXY"], sXYeXY);
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  sXYeXY = [
+    startXYendXY[2],
+    startXYendXY[3] - w,
+    startXYendXY[2],
+    startXYendXY[3] + w
+  ];
+  gl.uniform4fv(this.lineShader.uniforms["startXYendXY"], sXYeXY);
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  let startXY = this.canvasPos2frac([startXYendXY[0], startXYendXY[1]]);
+  let endXY = this.canvasPos2frac([startXYendXY[2], startXYendXY[3]]);
+  if (startXY[0] >= 0 && endXY[0] >= 0) {
+    startXY = this.frac2mm(startXY);
+    endXY = this.frac2mm(endXY);
+    let v = create$1();
+    sub(v, startXY, endXY);
+    let lenMM = len(v);
+    let decimals = 2;
+    if (lenMM > 9)
+      decimals = 1;
+    if (lenMM > 99)
+      decimals = 0;
+    let stringMM = lenMM.toFixed(decimals);
+    this.drawTextBetween(startXYendXY, stringMM);
+  }
+  gl.bindVertexArray(this.unusedVAO);
+};
+Niivue.prototype.drawBox = function(leftTopWidthHeight, lineColor = [1, 0, 0, 1]) {
+  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);
 };
-Niivue.prototype.drawColorbar = function(leftTopWidthHeight) {
+Niivue.prototype.drawSelectionBox = function(leftTopWidthHeight, lineColor = [1, 0, 0, 1]) {
+  this.drawBox(leftTopWidthHeight, this.opts.selectionBoxColor);
+};
+function tickSpacingX(tickCount, mn, mx) {
+  let range = Math.abs(mx - mn);
+  if (range === 0)
+    return [0, 0];
+  let unroundedTickSize = range / (tickCount - 1);
+  let x2 = Math.ceil(Math.log10(unroundedTickSize) - 1);
+  let pow10x = Math.pow(10, x2);
+  let spacing = Math.ceil(unroundedTickSize / pow10x) * pow10x;
+  let ticMin = mn;
+  if (ticMin % spacing !== 0 && range % spacing !== 0)
+    ticMin = Math.floor((mn + spacing) / spacing) * spacing;
+  if (mn / spacing % 1 !== 0)
+    ticMin = Math.sign(ticMin) * Math.round(Math.abs(ticMin));
+  return [spacing, ticMin];
+}
+function tickSpacing(mn, mx) {
+  let range = Math.abs(mx - mn);
+  let [spacing, ticMin] = tickSpacingX(5, mn, mx);
+  if (range % spacing === 0)
+    return [spacing, ticMin];
+  [spacing, ticMin] = tickSpacingX(4, mn, mx);
+  if (range % spacing === 0)
+    return [spacing, ticMin];
+  [spacing, ticMin] = tickSpacingX(5, mn, mx);
+  return [spacing, ticMin];
+}
+Niivue.prototype.effectiveCanvasHeight = function() {
+  return this.gl.canvas.height - this.colorbarHeight;
+};
+Niivue.prototype.reserveColorbarPanel = function() {
+  let txtHt = Math.max(this.opts.textHeight, 0.01);
+  txtHt = txtHt * Math.min(this.gl.canvas.height, this.gl.canvas.width);
+  let fullHt = 3 * txtHt;
+  let leftTopWidthHeight = [
+    0,
+    this.gl.canvas.height - fullHt,
+    this.gl.canvas.width,
+    fullHt
+  ];
+  this.colorbarHeight = leftTopWidthHeight[3] + 1;
+  return leftTopWidthHeight;
+};
+Niivue.prototype.drawColorbarCore = function(layer = 0, leftTopWidthHeight = [0, 0, 0, 0], isNegativeColor = false) {
+  if (this.volumes.length < 1)
+    return;
+  if (layer >= this.volumes.length)
+    layer = 0;
   if (leftTopWidthHeight[2] <= 0 || leftTopWidthHeight[3] <= 0)
     return;
+  let txtHt = Math.max(this.opts.textHeight, 0.01);
+  txtHt = txtHt * Math.min(this.gl.canvas.height, this.gl.canvas.width);
+  let margin = txtHt;
+  let fullHt = 3 * txtHt;
+  let barHt = txtHt;
+  if (leftTopWidthHeight[3] < fullHt) {
+    if (leftTopWidthHeight[3] < 3)
+      return;
+    margin = 1;
+    barHt = leftTopWidthHeight[3] - 2;
+  }
+  this.gl.disable(this.gl.DEPTH_TEST);
+  this.colorbarHeight = leftTopWidthHeight[3] + 1;
+  [
+    this.opts.backColor[0],
+    this.opts.backColor[1],
+    this.opts.backColor[2],
+    0.5
+  ];
+  leftTopWidthHeight[1];
+  let barLTWH = [
+    leftTopWidthHeight[0] + margin,
+    leftTopWidthHeight[1],
+    leftTopWidthHeight[2] - 2 * margin,
+    barHt
+  ];
+  let rimLTWH = [
+    barLTWH[0] - 1,
+    barLTWH[1] - 1,
+    barLTWH[2] + 2,
+    barLTWH[3] + 2
+  ];
+  this.drawBox(rimLTWH, this.opts.crosshairColor);
   this.colorbarShader.use(this.gl);
   this.gl.activeTexture(this.gl.TEXTURE1);
   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);
+  let lx = layer;
+  if (isNegativeColor)
+    lx += this.volumes.length;
+  this.gl.uniform1f(this.colorbarShader.uniforms["layer"], lx);
   this.gl.uniform2fv(this.colorbarShader.uniforms["canvasWidthHeight"], [
     this.gl.canvas.width,
     this.gl.canvas.height
   ]);
-  this.gl.uniform4f(this.colorbarShader.uniforms["leftTopWidthHeight"], leftTopWidthHeight[0], leftTopWidthHeight[1], leftTopWidthHeight[2], leftTopWidthHeight[3]);
+  this.gl.uniform4fv(this.colorbarShader.uniforms["leftTopWidthHeight"], barLTWH);
   this.gl.bindVertexArray(this.genericVAO);
   this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
   this.gl.bindVertexArray(this.unusedVAO);
   this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
   this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
+  let min2 = this.volumes[layer].cal_min;
+  let max2 = this.volumes[layer].cal_max;
+  if (min2 >= max2 || txtHt < 1)
+    return;
+  let range = max2 - min2;
+  let [spacing, ticMin] = tickSpacing(min2, max2);
+  function humanize(x2) {
+    return x2.toFixed(6).replace(/\.?0*$/, "");
+  }
+  let tic = ticMin;
+  let ticLTWH = [0, barLTWH[1] + barLTWH[3] - txtHt * 0.5, 2, txtHt * 0.75];
+  let txtTop = ticLTWH[1] + ticLTWH[3];
+  while (tic <= max2) {
+    ticLTWH[0] = barLTWH[0] + (tic - min2) / range * barLTWH[2];
+    this.drawBox(ticLTWH);
+    let str = humanize(tic);
+    if (isNegativeColor)
+      str = "-" + str;
+    this.drawTextBelow([ticLTWH[0], txtTop], str);
+    tic += spacing;
+  }
+};
+Niivue.prototype.drawColorbar = function() {
+  let nlayers = this.volumes.length;
+  if (nlayers < 1)
+    return;
+  let ncolorMapNegative = 0;
+  for (let i2 = 0; i2 < nlayers; i2++)
+    if (this.volumes[i2].colorMapNegative.length > 0)
+      ncolorMapNegative++;
+  let leftTopWidthHeight = this.reserveColorbarPanel();
+  let txtHt = Math.max(this.opts.textHeight, 0.01);
+  txtHt = txtHt * Math.min(this.gl.canvas.height, this.gl.canvas.width);
+  let fullHt = 3 * txtHt;
+  let wid = leftTopWidthHeight[2] / (nlayers + ncolorMapNegative);
+  if (leftTopWidthHeight[2] <= 0 || leftTopWidthHeight[3] <= 0) {
+    wid = this.gl.canvas.width / nlayers;
+    leftTopWidthHeight = [0, this.gl.canvas.height - fullHt, wid, fullHt];
+  }
+  leftTopWidthHeight[2] = wid;
+  for (let i2 = 0; i2 < nlayers; i2++) {
+    this.drawColorbarCore(i2, leftTopWidthHeight);
+    leftTopWidthHeight[0] += wid;
+    if (this.volumes[i2].colorMapNegative.length === 0)
+      continue;
+    this.drawColorbarCore(i2, leftTopWidthHeight, true);
+    leftTopWidthHeight[0] += wid;
+  }
 };
 Niivue.prototype.textWidth = function(scale2, str) {
   let w = 0;
@@ -112074,6 +113479,34 @@ Niivue.prototype.drawTextLeft = function(xy, str, scale2 = 1, color = null) {
   xy[1] -= 0.5 * size;
   this.drawText(xy, str, scale2, color);
 };
+Niivue.prototype.drawTextRightBelow = function(xy, str, scale2 = 1, color = null) {
+  if (this.opts.textHeight <= 0)
+    return;
+  this.opts.textHeight * this.gl.canvas.height * scale2;
+  this.drawText(xy, str, scale2, color);
+};
+Niivue.prototype.drawTextBetween = function(startXYendXY, str, scale2 = 1, color = null) {
+  if (this.opts.textHeight <= 0)
+    return;
+  let xy = [
+    (startXYendXY[0] + startXYendXY[2]) * 0.5,
+    (startXYendXY[1] + startXYendXY[3]) * 0.5
+  ];
+  let size = this.opts.textHeight * this.gl.canvas.height * scale2;
+  let w = this.textWidth(size, str);
+  xy[0] -= 0.5 * w;
+  xy[1] -= 0.5 * size;
+  let LTWH = [xy[0] - 1, xy[1] - 1, w + 2, size + 2];
+  let clr = color;
+  if (clr === null)
+    clr = this.opts.crosshairColor;
+  if (clr[0] + clr[1] + clr[2] > 0.8)
+    clr = [0, 0, 0, 0.5];
+  else
+    clr = [1, 1, 1, 0.5];
+  this.drawRect(LTWH, clr);
+  this.drawText(xy, str, scale2, color);
+};
 Niivue.prototype.drawTextBelow = function(xy, str, scale2 = 1, color = null) {
   if (this.opts.textHeight <= 0)
     return;
@@ -112107,114 +113540,271 @@ Niivue.prototype.setInterpolation = function(isNearest) {
     this.updateInterpolation(1);
   this.drawScene();
 };
-Niivue.prototype.calculateMvpMatrixX = function() {
-  let whratio = this.gl.canvas.clientWidth / this.gl.canvas.clientHeight;
-  let scale2 = this.furthestFromPivot;
-  let origin = [0, 0, 0];
+function deg2rad(deg) {
+  return deg * (Math.PI / 180);
+}
+Niivue.prototype.calculateMvpMatrix2D = function(leftTopWidthHeight, mn, mx, clipTolerance = Infinity, clipDepth = 0, azimuth = null, elevation = null, isRadiolgical) {
+  let gl = this.gl;
+  gl.viewport(leftTopWidthHeight[0], this.gl.canvas.clientHeight - (leftTopWidthHeight[1] + leftTopWidthHeight[3]), leftTopWidthHeight[2], leftTopWidthHeight[3]);
+  let left = mn[0];
+  let right = mx[0];
+  let leftTopMM = [left, mn[1]];
+  let fovMM = [right - left, mx[1] - mn[1]];
+  if (isRadiolgical) {
+    leftTopMM = [mx[0], mn[1]];
+    fovMM = [mn[0] - mx[0], mx[1] - mn[1]];
+    left = -mx[0];
+    right = -mn[0];
+  }
+  let scale2 = 2 * Math.max(Math.abs(mn[2]), Math.abs(mx[2]));
   let projectionMatrix = create$2();
-  if (whratio < 1)
-    ortho(projectionMatrix, -scale2, scale2, -scale2 / whratio, scale2 / whratio, 0.01, scale2 * 8);
-  else
-    ortho(projectionMatrix, -scale2 * whratio, scale2 * whratio, -scale2, scale2, 0.01, scale2 * 8);
+  let near = 0.01;
+  let far = scale2 * 8;
+  if (clipTolerance !== Infinity) {
+    let r = isRadiolgical;
+    if (elevation === 0 && (azimuth === 0 || azimuth === 180))
+      r = !r;
+    let dx = scale2 * 1.8 - clipDepth;
+    if (!r)
+      dx = scale2 * 1.8 + clipDepth;
+    near = dx - clipTolerance;
+    far = dx + clipTolerance;
+  }
+  ortho(projectionMatrix, left, right, mn[1], mx[1], near, far);
   const modelMatrix = create$2();
   modelMatrix[0] = -1;
   let translateVec3 = fromValues$1(0, 0, -scale2 * 1.8);
   translate(modelMatrix, modelMatrix, translateVec3);
-  if (this.position)
-    translate(modelMatrix, modelMatrix, this.position);
-  translate(modelMatrix, modelMatrix, [
-    -origin[0],
-    -origin[1],
-    -origin[2]
-  ]);
+  rotateX(modelMatrix, modelMatrix, deg2rad(270 - elevation));
+  rotateZ(modelMatrix, modelMatrix, deg2rad(azimuth - 180));
   let iModelMatrix = create$2();
   invert(iModelMatrix, modelMatrix);
   let normalMatrix = create$2();
   transpose(normalMatrix, iModelMatrix);
   let modelViewProjectionMatrix = create$2();
-  multiply$1(modelViewProjectionMatrix, projectionMatrix, modelMatrix);
-  return [modelViewProjectionMatrix, modelMatrix, normalMatrix];
+  multiply(modelViewProjectionMatrix, projectionMatrix, modelMatrix);
+  return {
+    modelViewProjectionMatrix,
+    modelMatrix,
+    normalMatrix,
+    leftTopMM,
+    fovMM
+  };
 };
-Niivue.prototype.drawMesh3DX = function(isDepthTest = true, alpha = 1, leftTopWidthHeight) {
-  if (this.meshes.length < 1)
+Niivue.prototype.swizzleVec3MM = function(v3, axCorSag) {
+  if (axCorSag === this.sliceTypeCoronal) {
+    v3 = swizzleVec3(v3, [0, 2, 1]);
+  } else if (axCorSag === this.sliceTypeSagittal) {
+    v3 = swizzleVec3(v3, [1, 2, 0]);
+  }
+  return v3;
+};
+Niivue.prototype.screenFieldOfViewMM = function(axCorSag = 0, forceSliceMM = false) {
+  if (!forceSliceMM && !this.opts.isSliceMM) {
+    let fov = this.volumeObject3D.fieldOfViewDeObliqueMM.slice();
+    return this.swizzleVec3MM(fov, axCorSag);
+  }
+  let mnMM = this.volumeObject3D.extentsMin.slice();
+  let mxMM = this.volumeObject3D.extentsMax.slice();
+  create$2();
+  mnMM = this.swizzleVec3MM(mnMM, axCorSag);
+  mxMM = this.swizzleVec3MM(mxMM, axCorSag);
+  let fovMM = create$1();
+  subtract(fovMM, mxMM, mnMM);
+  return fovMM;
+};
+Niivue.prototype.screenFieldOfViewExtendedMM = function(axCorSag = 0) {
+  let mnMM = this.volumeObject3D.extentsMin.slice();
+  let mxMM = this.volumeObject3D.extentsMax.slice();
+  let rotation = create$2();
+  mnMM = this.swizzleVec3MM(mnMM, axCorSag);
+  mxMM = this.swizzleVec3MM(mxMM, axCorSag);
+  let fovMM = create$1();
+  subtract(fovMM, mxMM, mnMM);
+  return { mnMM, mxMM, rotation, fovMM };
+};
+Niivue.prototype.drawSliceOrientationText = function(leftTopWidthHeight, axCorSag) {
+  this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
+  let topText = "S";
+  if (axCorSag === this.sliceTypeAxial)
+    topText = "A";
+  let leftText = this.opts.isRadiologicalConvention ? "R" : "L";
+  if (axCorSag === this.sliceTypeSagittal)
+    leftText = this.opts.sagittalNoseLeft ? "A" : "P";
+  if (this.opts.isCornerOrientationText) {
+    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);
+};
+Niivue.prototype.xyMM2xyzMM = function(axCorSag, sliceFrac) {
+  let sliceDim = 2;
+  if (axCorSag === this.sliceTypeCoronal)
+    sliceDim = 1;
+  if (axCorSag === this.sliceTypeSagittal)
+    sliceDim = 0;
+  let a = [0, 0, 0];
+  let b = [1, 1, 0];
+  let c2 = [1, 0, 1];
+  a[sliceDim] = sliceFrac;
+  b[sliceDim] = sliceFrac;
+  c2[sliceDim] = sliceFrac;
+  a = this.frac2mm(a);
+  b = this.frac2mm(b);
+  c2 = this.frac2mm(c2);
+  a = this.swizzleVec3MM(a, axCorSag);
+  b = this.swizzleVec3MM(b, axCorSag);
+  c2 = this.swizzleVec3MM(c2, axCorSag);
+  let denom = (b[0] - a[0]) * (c2[1] - a[1]) - (c2[0] - a[0]) * (b[1] - a[1]);
+  let yMult = (b[0] - a[0]) * (c2[2] - a[2]) - (c2[0] - a[0]) * (b[2] - a[2]);
+  yMult /= denom;
+  let xMult = (b[1] - a[1]) * (c2[2] - a[2]) - (c2[1] - a[1]) * (b[2] - a[2]);
+  xMult /= denom;
+  let AxyzMxy = [0, 0, 0, 0, 0];
+  AxyzMxy[0] = a[0];
+  AxyzMxy[1] = a[1];
+  AxyzMxy[2] = a[2];
+  AxyzMxy[3] = xMult;
+  AxyzMxy[4] = yMult;
+  return AxyzMxy;
+};
+Niivue.prototype.draw2DMM = function(leftTopWidthHeight, axCorSag, customMM = NaN) {
+  let screen2 = this.screenFieldOfViewExtendedMM(axCorSag);
+  let isRadiolgical = this.opts.isRadiologicalConvention && axCorSag < this.sliceTypeSagittal;
+  if (customMM === Infinity || customMM === -Infinity) {
+    isRadiolgical = customMM !== Infinity;
+    if (axCorSag === this.sliceTypeCoronal)
+      isRadiolgical = !isRadiolgical;
+  } else if (this.opts.sagittalNoseLeft && axCorSag === this.sliceTypeSagittal)
+    isRadiolgical = !isRadiolgical;
+  let elevation = 0;
+  let azimuth = 0;
+  if (axCorSag === this.sliceTypeSagittal) {
+    azimuth = isRadiolgical ? 90 : -90;
+  } else if (axCorSag === this.sliceTypeCoronal) {
+    azimuth = isRadiolgical ? 180 : 0;
+  } else {
+    azimuth = isRadiolgical ? 180 : 0;
+    elevation = isRadiolgical ? -90 : 90;
+  }
+  if (leftTopWidthHeight[2] === 0 || leftTopWidthHeight[3] === 0)
+    leftTopWidthHeight = this.scaleSlice(screen2.fovMM[0], screen2.fovMM[1]);
+  if (isNaN(customMM)) {
+    let panXY = this.swizzleVec3MM(this.scene.pan2Dxyzmm, axCorSag);
+    screen2.mnMM[0] -= panXY[0];
+    screen2.mxMM[0] -= panXY[0];
+    screen2.mnMM[1] -= panXY[1];
+    screen2.mxMM[1] -= panXY[1];
+    screen2.mnMM[0] /= this.scene.pan2Dxyzmm[3];
+    screen2.mxMM[0] /= this.scene.pan2Dxyzmm[3];
+    screen2.mnMM[1] /= this.scene.pan2Dxyzmm[3];
+    screen2.mxMM[1] /= this.scene.pan2Dxyzmm[3];
+  }
+  let sliceDim = 2;
+  if (axCorSag === this.sliceTypeCoronal)
+    sliceDim = 1;
+  if (axCorSag === this.sliceTypeSagittal)
+    sliceDim = 0;
+  let sliceFrac = this.scene.crosshairPos[sliceDim];
+  let mm = this.frac2mm(this.scene.crosshairPos);
+  if (!isNaN(customMM) && customMM !== Infinity && customMM !== -Infinity) {
+    mm = this.frac2mm([0.5, 0.5, 0.5]);
+    mm[sliceDim] = customMM;
+    let frac = this.mm2frac(mm);
+    sliceFrac = frac[sliceDim];
+  }
+  let sliceMM = mm[sliceDim];
   let gl = this.gl;
-  let m, modelMtx, normMtx;
-  [m, modelMtx, normMtx] = this.calculateMvpMatrixX(this.volumeObject3D, leftTopWidthHeight);
+  gl.clear(gl.DEPTH_BUFFER_BIT);
+  let obj = this.calculateMvpMatrix2D(leftTopWidthHeight, screen2.mnMM, screen2.mxMM, Infinity, 0, azimuth, elevation, isRadiolgical);
+  if (customMM === Infinity || customMM === -Infinity) {
+    this.draw3D(leftTopWidthHeight, obj.modelViewProjectionMatrix, obj.modelMatrix, obj.normalMatrix, azimuth, elevation);
+    return;
+  }
   gl.enable(gl.DEPTH_TEST);
   gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
   gl.disable(gl.BLEND);
   gl.depthFunc(gl.GREATER);
-  if (isDepthTest) {
-    gl.disable(gl.BLEND);
-    gl.depthFunc(gl.GREATER);
-  } else {
-    gl.enable(gl.BLEND);
-    gl.depthFunc(gl.ALWAYS);
-  }
   gl.disable(gl.CULL_FACE);
-  this.meshShader.use(this.gl);
-  gl.uniformMatrix4fv(this.meshShader.uniforms["mvpMtx"], false, m);
-  gl.uniformMatrix4fv(this.meshShader.uniforms["modelMtx"], false, modelMtx);
-  gl.uniformMatrix4fv(this.meshShader.uniforms["normMtx"], false, normMtx);
-  gl.uniform1f(this.meshShader.uniforms["opacity"], alpha);
-  let hasFibers = false;
-  for (let i2 = 0; i2 < this.meshes.length; i2++) {
-    if (this.meshes[i2].indexCount < 3)
-      continue;
-    if (this.meshes[i2].offsetPt0) {
-      hasFibers = true;
-      continue;
-    }
-    gl.bindVertexArray(this.meshes[i2].vao);
-    gl.drawElements(gl.TRIANGLES, this.meshes[i2].indexCount, gl.UNSIGNED_INT, 0);
-    gl.bindVertexArray(this.unusedVAO);
-  }
-  if (!hasFibers) {
-    gl.enable(gl.BLEND);
-    gl.depthFunc(gl.ALWAYS);
-    return;
+  this.sliceMMShader.use(this.gl);
+  this.gl.uniform1i(this.sliceMMShader.uniforms["backgroundMasksOverlays"], this.backgroundMasksOverlays);
+  this.gl.uniform1f(this.sliceMMShader.uniforms["opacity"], this.volumes[0].opacity);
+  this.gl.uniform1i(this.sliceMMShader.uniforms["axCorSag"], axCorSag);
+  this.gl.uniform1f(this.sliceMMShader.uniforms["slice"], sliceFrac);
+  this.gl.uniformMatrix4fv(this.sliceMMShader.uniforms["frac2mm"], false, this.volumes[0].frac2mm);
+  this.gl.uniformMatrix4fv(this.sliceMMShader.uniforms["mvpMtx"], false, obj.modelViewProjectionMatrix.slice());
+  this.gl.bindVertexArray(this.genericVAO);
+  this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+  this.gl.bindVertexArray(this.unusedVAO);
+  this.screenSlices.push({
+    leftTopWidthHeight,
+    axCorSag,
+    sliceFrac,
+    AxyzMxy: this.xyMM2xyzMM(axCorSag, sliceFrac),
+    leftTopMM: obj.leftTopMM,
+    fovMM: obj.fovMM
+  });
+  if (isNaN(customMM)) {
+    this.drawCrosshairs3D(true, 1, obj.modelViewProjectionMatrix);
   }
-  let shader = this.fiberShader;
-  shader.use(this.gl);
-  gl.uniformMatrix4fv(shader.uniforms["mvpMtx"], false, m);
-  gl.uniform1f(shader.uniforms["opacity"], alpha);
-  for (let i2 = 0; i2 < this.meshes.length; i2++) {
-    if (this.meshes[i2].indexCount < 3)
-      continue;
-    if (!this.meshes[i2].offsetPt0)
-      continue;
-    gl.bindVertexArray(this.meshes[i2].vao);
-    gl.drawElements(gl.LINE_STRIP, this.meshes[i2].indexCount, gl.UNSIGNED_INT, 0);
-    gl.bindVertexArray(this.unusedVAO);
+  if (this.opts.meshThicknessOn2D > 0) {
+    if (this.opts.meshThicknessOn2D !== Infinity)
+      obj = this.calculateMvpMatrix2D(leftTopWidthHeight, screen2.mnMM, screen2.mxMM, this.opts.meshThicknessOn2D, sliceMM, azimuth, elevation, isRadiolgical);
+    this.drawMesh3D(true, 1, obj.modelViewProjectionMatrix, obj.modelMatrix, obj.normalMatrix);
   }
-  gl.enable(gl.BLEND);
-  gl.depthFunc(gl.ALWAYS);
+  if (isNaN(customMM))
+    this.drawCrosshairs3D(false, 0.15, obj.modelViewProjectionMatrix);
+  this.drawSliceOrientationText(leftTopWidthHeight, axCorSag);
   this.readyForSync = true;
 };
-Niivue.prototype.draw2D = function(leftTopWidthHeight, axCorSag) {
+Niivue.prototype.draw2DVox = function(leftTopWidthHeight, axCorSag, customMM = NaN) {
+  let fovMM = this.screenFieldOfViewMM(axCorSag);
+  if (leftTopWidthHeight[2] === 0 || leftTopWidthHeight[3] === 0) {
+    leftTopWidthHeight = this.scaleSlice(fovMM[0], fovMM[1]);
+  }
   this.gl.cullFace(this.gl.FRONT);
+  let ltwh = leftTopWidthHeight.slice();
   let gl = this.gl;
   gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
   gl.disable(gl.DEPTH_TEST);
-  var crossXYZ = [
+  let sliceDim = 2;
+  let crossXYZ = [
     this.scene.crosshairPos[0],
     this.scene.crosshairPos[1],
     this.scene.crosshairPos[2]
   ];
-  if (axCorSag === this.sliceTypeCoronal)
+  if (axCorSag === this.sliceTypeCoronal) {
+    sliceDim = 1;
     crossXYZ = [
       this.scene.crosshairPos[0],
       this.scene.crosshairPos[2],
       this.scene.crosshairPos[1]
     ];
-  if (axCorSag === this.sliceTypeSagittal)
+  }
+  if (axCorSag === this.sliceTypeSagittal) {
+    sliceDim = 0;
     crossXYZ = [
       this.scene.crosshairPos[1],
       this.scene.crosshairPos[2],
       this.scene.crosshairPos[0]
     ];
+  }
+  if (!isNaN(customMM)) {
+    let mm = this.frac2mm([0.5, 0.5, 0.5]);
+    mm[sliceDim] = customMM;
+    let frac = this.mm2frac(mm);
+    crossXYZ[2] = frac[sliceDim];
+  }
   let isMirrorLR = this.opts.isRadiologicalConvention && axCorSag < this.sliceTypeSagittal;
+  if (this.opts.sagittalNoseLeft && axCorSag === this.sliceTypeSagittal)
+    isMirrorLR = !isMirrorLR;
   this.sliceShader.use(this.gl);
   this.gl.uniform1f(this.sliceShader.uniforms["opacity"], this.volumes[0].opacity);
   this.gl.uniform1i(this.sliceShader.uniforms["backgroundMasksOverlays"], this.backgroundMasksOverlays);
@@ -112232,59 +113822,50 @@ Niivue.prototype.draw2D = function(leftTopWidthHeight, axCorSag) {
   this.gl.uniform4f(this.sliceShader.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.screenSlices[this.numScreenSlices].leftTopWidthHeight = leftTopWidthHeight;
-  this.screenSlices[this.numScreenSlices].axCorSag = axCorSag;
-  this.numScreenSlices += 1;
+  this.screenSlices.push({
+    leftTopWidthHeight,
+    axCorSag,
+    sliceFrac: crossXYZ[2],
+    AxyzMxy: [],
+    leftTopMM: [],
+    fovMM: [fovMM[0], fovMM[1]]
+  });
+  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+  this.drawSliceOrientationText(ltwh, axCorSag);
+  if (!isNaN(customMM))
+    return;
   if (this.opts.crosshairWidth <= 0)
     return;
-  this.lineShader.use(this.gl);
-  this.gl.uniform4fv(this.lineShader.uniforms["lineColor"], this.opts.crosshairColor);
-  this.gl.uniform2fv(this.lineShader.uniforms["canvasWidthHeight"], [
+  this.gl.bindVertexArray(this.genericVAO);
+  this.rectShader.use(this.gl);
+  this.gl.uniform4fv(this.rectShader.uniforms["lineColor"], this.opts.crosshairColor);
+  this.gl.uniform2fv(this.rectShader.uniforms["canvasWidthHeight"], [
     this.gl.canvas.width,
     this.gl.canvas.height
   ]);
   var xleft = leftTopWidthHeight[0] + leftTopWidthHeight[2] * crossXYZ[0];
-  this.gl.uniform4f(this.lineShader.uniforms["leftTopWidthHeight"], xleft - 0.5 * this.opts.crosshairWidth, leftTopWidthHeight[1], this.opts.crosshairWidth, leftTopWidthHeight[3]);
+  this.gl.uniform4f(this.rectShader.uniforms["leftTopWidthHeight"], xleft - 0.5 * this.opts.crosshairWidth, leftTopWidthHeight[1], this.opts.crosshairWidth, leftTopWidthHeight[3]);
   this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
   var xtop = leftTopWidthHeight[1] + leftTopWidthHeight[3] * (1 - crossXYZ[1]);
-  this.gl.uniform4f(this.lineShader.uniforms["leftTopWidthHeight"], leftTopWidthHeight[0], xtop - 0.5 * this.opts.crosshairWidth, leftTopWidthHeight[2], this.opts.crosshairWidth);
+  this.gl.uniform4f(this.rectShader.uniforms["leftTopWidthHeight"], leftTopWidthHeight[0], xtop - 0.5 * this.opts.crosshairWidth, leftTopWidthHeight[2], this.opts.crosshairWidth);
   this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
   this.gl.bindVertexArray(this.unusedVAO);
   this.gl.enable(this.gl.CULL_FACE);
-  if (isMirrorLR)
-    this.drawTextRight([
-      leftTopWidthHeight[0] + leftTopWidthHeight[2] + 1,
-      leftTopWidthHeight[1] + 0.5 * leftTopWidthHeight[3]
-    ], "R");
-  else if (axCorSag < this.sliceTypeSagittal)
-    this.drawTextRight([
-      leftTopWidthHeight[0] + 1,
-      leftTopWidthHeight[1] + 0.5 * leftTopWidthHeight[3]
-    ], "L");
-  if (axCorSag === this.sliceTypeAxial)
-    this.drawTextBelow([
-      leftTopWidthHeight[0] + 0.5 * leftTopWidthHeight[2],
-      leftTopWidthHeight[1] + 1
-    ], "A");
-  if (axCorSag > this.sliceTypeAxial)
-    this.drawTextBelow([
-      leftTopWidthHeight[0] + 0.5 * leftTopWidthHeight[2],
-      leftTopWidthHeight[1] + 1
-    ], "S");
-  if (axCorSag !== this.sliceTypeAxial)
-    return;
-  this.setPivot3D();
-  gl.viewport(leftTopWidthHeight[0], leftTopWidthHeight[1], leftTopWidthHeight[2], leftTopWidthHeight[3]);
   gl.enable(gl.DEPTH_TEST);
   gl.depthFunc(gl.ALWAYS);
   gl.clearDepth(0);
   this.sync();
 };
-Niivue.prototype.calculateMvpMatrix = function() {
-  function deg2rad(deg) {
-    return deg * (Math.PI / 180);
-  }
-  let whratio = this.gl.canvas.clientWidth / this.gl.canvas.clientHeight;
+Niivue.prototype.draw2D = function(leftTopWidthHeight, axCorSag, customMM = NaN) {
+  if (this.opts.isSliceMM)
+    this.draw2DMM(leftTopWidthHeight, axCorSag, customMM);
+  else
+    this.draw2DVox(leftTopWidthHeight, axCorSag, customMM);
+};
+Niivue.prototype.calculateMvpMatrix = function(unused, leftTopWidthHeight = [0, 0, 0, 0], azimuth, elevation) {
+  if (leftTopWidthHeight[2] === 0 || leftTopWidthHeight[3] === 0)
+    leftTopWidthHeight = [0, 0, this.gl.canvas.width, this.gl.canvas.height];
+  let whratio = leftTopWidthHeight[2] / leftTopWidthHeight[3];
   let scale2 = this.furthestFromPivot;
   let origin = this.pivot3D;
   let projectionMatrix = create$2();
@@ -112299,8 +113880,8 @@ Niivue.prototype.calculateMvpMatrix = function() {
   translate(modelMatrix, modelMatrix, translateVec3);
   if (this.position)
     translate(modelMatrix, modelMatrix, this.position);
-  rotateX(modelMatrix, modelMatrix, deg2rad(270 - this.scene.renderElevation));
-  rotateZ(modelMatrix, modelMatrix, deg2rad(this.scene.renderAzimuth - 180));
+  rotateX(modelMatrix, modelMatrix, deg2rad(270 - elevation));
+  rotateZ(modelMatrix, modelMatrix, deg2rad(azimuth - 180));
   translate(modelMatrix, modelMatrix, [
     -origin[0],
     -origin[1],
@@ -112311,24 +113892,24 @@ Niivue.prototype.calculateMvpMatrix = function() {
   let normalMatrix = create$2();
   transpose(normalMatrix, iModelMatrix);
   let modelViewProjectionMatrix = create$2();
-  multiply$1(modelViewProjectionMatrix, projectionMatrix, modelMatrix);
+  multiply(modelViewProjectionMatrix, projectionMatrix, modelMatrix);
   return [modelViewProjectionMatrix, modelMatrix, normalMatrix];
 };
-Niivue.prototype.calculateRayDirection = function() {
-  function deg2rad(deg) {
+Niivue.prototype.calculateRayDirection = function(azimuth, elevation) {
+  function deg2rad2(deg) {
     return deg * (Math.PI / 180);
   }
   const modelMatrix = create$2();
   modelMatrix[0] = -1;
-  rotateX(modelMatrix, modelMatrix, deg2rad(270 - this.scene.renderElevation));
-  rotateZ(modelMatrix, modelMatrix, deg2rad(this.scene.renderAzimuth - 180));
+  rotateX(modelMatrix, modelMatrix, deg2rad2(270 - elevation));
+  rotateZ(modelMatrix, modelMatrix, deg2rad2(azimuth - 180));
   if (this.back.obliqueRAS) {
     let oblique = clone$1(this.back.obliqueRAS);
-    multiply$1(modelMatrix, modelMatrix, oblique);
+    multiply(modelMatrix, modelMatrix, oblique);
   }
   let projectionMatrix = fromValues$2(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
   let mvpMatrix = create$2();
-  multiply$1(mvpMatrix, projectionMatrix, modelMatrix);
+  multiply(mvpMatrix, projectionMatrix, modelMatrix);
   var inv = create$2();
   invert(inv, mvpMatrix);
   var rayDir4 = fromValues(0, 0, -1, 1);
@@ -112367,6 +113948,8 @@ Niivue.prototype.setPivot3D = function() {
   scale(pivot, pivot, 0.5);
   this.pivot3D = [pivot[0], pivot[1], pivot[2]];
   subtract(pivot, mx, mn);
+  this.extentsMin = mn;
+  this.extentsMax = mx;
   this.furthestFromPivot = length$1(pivot) * 0.5;
 };
 Niivue.prototype.drawGraphLine = function(LTRB, color = [1, 0, 0, 0.5], thickness = 2) {
@@ -112383,35 +113966,22 @@ Niivue.prototype.drawGraphLine = function(LTRB, color = [1, 0, 0, 0.5], thicknes
   this.gl.bindVertexArray(this.unusedVAO);
 };
 Niivue.prototype.drawRect = function(LTWH, color = [1, 0, 0, 0.5]) {
-  this.lineShader.use(this.gl);
-  this.gl.uniform4fv(this.lineShader.uniforms["lineColor"], color);
-  this.gl.uniform2fv(this.lineShader.uniforms["canvasWidthHeight"], [
+  this.rectShader.use(this.gl);
+  this.gl.uniform4fv(this.rectShader.uniforms["lineColor"], color);
+  this.gl.uniform2fv(this.rectShader.uniforms["canvasWidthHeight"], [
     this.gl.canvas.width,
     this.gl.canvas.height
   ]);
-  this.gl.uniform4f(this.lineShader.uniforms["leftTopWidthHeight"], LTWH[0], LTWH[1], LTWH[2], LTWH[3]);
+  this.gl.uniform4f(this.rectShader.uniforms["leftTopWidthHeight"], LTWH[0], LTWH[1], LTWH[2], LTWH[3]);
   this.gl.bindVertexArray(this.genericVAO);
   this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
   this.gl.bindVertexArray(this.unusedVAO);
 };
-function tickSpacing(tickCount, mn, mx) {
-  let range = Math.abs(mx - mn);
-  if (range === 0)
-    return [0, 0];
-  let unroundedTickSize = range / (tickCount - 1);
-  let x2 = Math.ceil(Math.log10(unroundedTickSize) - 1);
-  let pow10x = Math.pow(10, x2);
-  let spacing = Math.ceil(unroundedTickSize / pow10x) * pow10x;
-  let ticMin = mn;
-  if (mn / spacing % 1 !== 0)
-    ticMin = Math.sign(ticMin) * Math.round(Math.abs(ticMin));
-  return [spacing, ticMin];
-}
 Niivue.prototype.drawGraph = function() {
   this.gl;
   let graph = this.graph;
   if (this.graph.autoSizeMultiplanar && this.sliceType === this.sliceTypeMultiplanar) {
-    for (let i2 = 0; i2 < this.numScreenSlices; i2++) {
+    for (let i2 = 0; i2 < this.screenSlices.length; i2++) {
       var axCorSag = this.screenSlices[i2].axCorSag;
       if (axCorSag !== this.sliceTypeSagittal)
         continue;
@@ -112504,7 +114074,7 @@ Niivue.prototype.drawGraph = function() {
     graph.backColor[3]
   ];
   this.drawRect(graph.LTWH, borderColor);
-  let [spacing, ticMin] = tickSpacing(5, mn, mx);
+  let [spacing, ticMin] = tickSpacing(mn, mx);
   function humanize(x2) {
     return x2.toFixed(6).replace(/\.?0*$/, "");
   }
@@ -112605,21 +114175,54 @@ Niivue.prototype.drawGraph = function() {
     this.drawGraphLine([x2, plotLTWH[1], x2, plotLTWH[1] + plotLTWH[3]], [graph.lineRGB[3][0], graph.lineRGB[3][1], graph.lineRGB[3][2], 1], graph.lineThickness);
   }
 };
-Niivue.prototype.draw3D = function() {
+function isRadiological(mtx) {
+  let vRight = fromValues(1, 0, 0, 0);
+  let vRotated = create();
+  transformMat4(vRotated, vRight, mtx);
+  return vRotated[0];
+}
+Niivue.prototype.draw3D = function(leftTopWidthHeight = [0, 0, 0, 0], mvpMatrix = null, modelMatrix, normalMatrix, azimuth = null, elevation) {
+  let isMosaic = azimuth !== null;
   this.setPivot3D();
+  if (!isMosaic) {
+    azimuth = this.scene.renderAzimuth;
+    elevation = this.scene.renderElevation;
+  }
   let gl = this.gl;
-  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+  if (mvpMatrix === null)
+    [mvpMatrix, modelMatrix, normalMatrix] = this.calculateMvpMatrix(null, leftTopWidthHeight, azimuth, elevation);
+  if (leftTopWidthHeight[2] === 0 || leftTopWidthHeight[3] === 0) {
+    leftTopWidthHeight = [0, 0, gl.canvas.width, gl.canvas.height];
+    this.screenSlices.push({
+      leftTopWidthHeight,
+      axCorSag: this.sliceTypeRender,
+      sliceFrac: 0,
+      AxyzMxy: [],
+      leftTopMM: [],
+      fovMM: [isRadiological(modelMatrix), 0]
+    });
+  } else {
+    this.screenSlices.push({
+      leftTopWidthHeight: leftTopWidthHeight.slice(),
+      axCorSag: this.sliceTypeRender,
+      sliceFrac: 0,
+      AxyzMxy: [],
+      leftTopMM: [],
+      fovMM: [isRadiological(modelMatrix), 0]
+    });
+    leftTopWidthHeight[1] = gl.canvas.height - leftTopWidthHeight[3] - leftTopWidthHeight[1];
+  }
+  gl.viewport(leftTopWidthHeight[0], leftTopWidthHeight[1], leftTopWidthHeight[2], leftTopWidthHeight[3]);
   gl.enable(gl.DEPTH_TEST);
   gl.depthFunc(gl.ALWAYS);
   gl.clearDepth(0);
   if (this.volumes.length === 0) {
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-    this.drawMesh3D(true, 1);
+    this.drawMesh3D(true, 1, mvpMatrix, modelMatrix, normalMatrix);
+    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
     return;
   }
-  let mvpMatrix, modelMatrix, normalMatrix;
-  [mvpMatrix, modelMatrix, normalMatrix] = this.calculateMvpMatrix(this.volumeObject3D);
-  const rayDir = this.calculateRayDirection();
+  const rayDir = this.calculateRayDirection(azimuth, elevation);
   let object3D = this.volumeObject3D;
   if (this.scene.mouseDepthPicker) {
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
@@ -112637,8 +114240,8 @@ Niivue.prototype.draw3D = function() {
       gl.drawElements(object3D.mode, object3D.indexCount, gl.UNSIGNED_SHORT, 0);
       gl.bindVertexArray(this.unusedVAO);
     }
-    const pixelX = this.mousePos[0] * gl.canvas.width / gl.canvas.clientWidth;
-    const pixelY = gl.canvas.height - this.mousePos[1] * gl.canvas.height / gl.canvas.clientHeight - 1;
+    const pixelX = this.mousePos[0] * leftTopWidthHeight[2] / leftTopWidthHeight[2];
+    const pixelY = gl.canvas.height - this.mousePos[1] * leftTopWidthHeight[3] / leftTopWidthHeight[3] - 1;
     const rgbaPixel = new Uint8Array(4);
     gl.readPixels(pixelX, pixelY, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, rgbaPixel);
     this.selectedObjectId = rgbaPixel[3];
@@ -112662,22 +114265,25 @@ Niivue.prototype.draw3D = function() {
     gl.drawElements(object3D.mode, object3D.indexCount, gl.UNSIGNED_SHORT, 0);
     gl.bindVertexArray(this.unusedVAO);
   }
-  this.drawCrosshairs3D(true, 1);
-  this.drawMesh3D(true, 1);
-  this.drawMesh3D(false, 0.02);
-  this.drawCrosshairs3D(false, 0.15);
+  if (!isMosaic)
+    this.drawCrosshairs3D(true, 1, mvpMatrix);
+  this.drawMesh3D(true, 1, mvpMatrix, modelMatrix, normalMatrix);
+  this.drawMesh3D(false, 0.02, mvpMatrix, modelMatrix, normalMatrix);
+  if (!isMosaic)
+    this.drawCrosshairs3D(false, 0.15, mvpMatrix);
+  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
   let posString = "azimuth: " + this.scene.renderAzimuth.toFixed(0) + " elevation: " + this.scene.renderElevation.toFixed(0);
   this.drawGraph();
   this.readyForSync = true;
   this.sync();
   return posString;
 };
-Niivue.prototype.drawMesh3D = function(isDepthTest = true, alpha = 1) {
+Niivue.prototype.drawMesh3D = function(isDepthTest = true, alpha = 1, m, modelMtx, normMtx) {
   if (this.meshes.length < 1)
     return;
   let gl = this.gl;
-  let m, modelMtx, normMtx;
-  [m, modelMtx, normMtx] = this.calculateMvpMatrix(this.volumeObject3D);
+  if (!m)
+    [m, modelMtx, normMtx] = this.calculateMvpMatrix(this.volumeObject3D, this.scene.renderAzimuth, this.scene.renderElevation);
   gl.enable(gl.DEPTH_TEST);
   gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
   gl.disable(gl.BLEND);
@@ -112729,7 +114335,7 @@ Niivue.prototype.drawMesh3D = function(isDepthTest = true, alpha = 1) {
   gl.depthFunc(gl.ALWAYS);
   this.readyForSync = true;
 };
-Niivue.prototype.drawCrosshairs3D = function(isDepthTest = true, alpha = 1) {
+Niivue.prototype.drawCrosshairs3D = function(isDepthTest = true, alpha = 1, mvpMtx = null) {
   if (!this.opts.show3Dcrosshair)
     return;
   let gl = this.gl;
@@ -112739,15 +114345,16 @@ Niivue.prototype.drawCrosshairs3D = function(isDepthTest = true, alpha = 1) {
       gl.deleteBuffer(this.crosshairs3D.indexBuffer);
       gl.deleteBuffer(this.crosshairs3D.vertexBuffer);
     }
-    let radius = Math.min(Math.min(this.back.pixDims[1], this.back.pixDims[2]), this.back.pixDims[3]);
+    let radius = 0.5 * Math.min(Math.min(this.back.pixDims[1], this.back.pixDims[2]), this.back.pixDims[3]);
     this.crosshairs3D = NiivueObject3D.generateCrosshairs(this.gl, 1, mm, this.volumeObject3D.extentsMin, this.volumeObject3D.extentsMax, radius);
     this.crosshairs3D.mm = mm;
   }
   let crosshairsShader = this.surfaceShader;
   crosshairsShader.use(this.gl);
-  let m, modelMtx, normMtx;
-  [m, modelMtx, normMtx] = this.calculateMvpMatrix(this.crosshairs3D);
-  gl.uniformMatrix4fv(crosshairsShader.uniforms["mvpMtx"], false, m);
+  let modelMtx, normMtx;
+  if (mvpMtx == null)
+    [mvpMtx, modelMtx, normMtx] = this.calculateMvpMatrix(this.crosshairs3D, this.scene.renderAzimuth, this.scene.renderElevation);
+  gl.uniformMatrix4fv(crosshairsShader.uniforms["mvpMtx"], false, mvpMtx);
   gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.crosshairs3D.indexBuffer);
   gl.enable(gl.DEPTH_TEST);
   let color = [...this.opts.crosshairColor];
@@ -112809,69 +114416,77 @@ Niivue.prototype.moveCrosshairInVox = function(x2, y, z) {
 };
 Niivue.prototype.frac2mm = function(frac, volIdx = 0) {
   let pos = fromValues(frac[0], frac[1], frac[2], 1);
-  let dim = fromValues(this.volumes[volIdx].dimsRAS[1], this.volumes[volIdx].dimsRAS[2], this.volumes[volIdx].dimsRAS[3], 1);
-  let sform = clone$1(this.volumes[volIdx].matRAS);
-  transpose(sform, sform);
-  mul(pos, pos, dim);
-  let shim = fromValues(-0.5, -0.5, -0.5, 0);
-  add(pos, pos, shim);
-  transformMat4(pos, pos, sform);
+  transformMat4(pos, pos, this.volumes[volIdx].frac2mm);
   return pos;
 };
-Niivue.prototype.canvasPos2frac = function(canvasPos) {
-  let x2, y, z;
-  for (let i2 = 0; i2 < this.numScreenSlices; i2++) {
-    var axCorSag = this.screenSlices[i2].axCorSag;
-    if (axCorSag > this.sliceTypeSagittal)
-      continue;
-    var ltwh = this.screenSlices[i2].leftTopWidthHeight;
-    let isMirror = false;
-    if (ltwh[2] < 0) {
-      isMirror = true;
-      ltwh[0] += ltwh[2];
-      ltwh[2] = -ltwh[2];
-    }
-    var fracX = (canvasPos[0] - ltwh[0]) / ltwh[2];
-    if (isMirror) {
-      fracX = 1 - fracX;
-    }
-    var fracY = 1 - (canvasPos[1] - ltwh[1]) / ltwh[3];
-    if (fracX >= 0 && fracX < 1 && fracY >= 0 && fracY < 1) {
-      switch (axCorSag) {
-        case this.sliceTypeAxial:
-          break;
-        case this.sliceTypeCoronal:
-          break;
-      }
-      if (axCorSag === this.sliceTypeAxial) {
-        x2 = fracX;
-        y = fracY;
-        z = this.scene.crosshairPos[2];
-      }
-      if (axCorSag === this.sliceTypeCoronal) {
-        x2 = fracX;
-        y = this.scene.crosshairPos[1];
-        z = fracY;
-      }
-      if (axCorSag === this.sliceTypeSagittal) {
-        x2 = this.scene.crosshairPos[0];
-        y = fracX;
-        z = fracY;
-      }
-      break;
+Niivue.prototype.screenXY2TextureFrac = function(x2, y, i2) {
+  let texFrac = [-1, -1, -1];
+  var axCorSag = this.screenSlices[i2].axCorSag;
+  if (axCorSag > this.sliceTypeSagittal)
+    return texFrac;
+  var ltwh = this.screenSlices[i2].leftTopWidthHeight.slice();
+  let isMirror = false;
+  if (ltwh[2] < 0) {
+    isMirror = true;
+    ltwh[0] += ltwh[2];
+    ltwh[2] = -ltwh[2];
+  }
+  var fracX = (x2 - ltwh[0]) / ltwh[2];
+  if (isMirror)
+    fracX = 1 - fracX;
+  var fracY = 1 - (y - ltwh[1]) / ltwh[3];
+  if (fracX < 0 || fracX > 1 || fracY < 0 || fracY > 1)
+    return texFrac;
+  if (this.screenSlices[i2].AxyzMxy.length > 4) {
+    let xyzMM = [0, 0, 0];
+    xyzMM[0] = this.screenSlices[i2].leftTopMM[0] + fracX * this.screenSlices[i2].fovMM[0];
+    xyzMM[1] = this.screenSlices[i2].leftTopMM[1] + fracY * this.screenSlices[i2].fovMM[1];
+    let v = this.screenSlices[i2].AxyzMxy;
+    xyzMM[2] = v[2] + v[4] * (xyzMM[1] - v[1]) - v[3] * (xyzMM[0] - v[0]);
+    if (axCorSag === this.sliceTypeCoronal)
+      xyzMM = swizzleVec3(xyzMM, [0, 2, 1]);
+    if (axCorSag === this.sliceTypeSagittal)
+      xyzMM = swizzleVec3(xyzMM, [2, 0, 1]);
+    let xyz = this.mm2frac(xyzMM);
+    if (xyz[0] < 0 || xyz[0] > 1 || xyz[1] < 0 || xyz[1] > 1 || xyz[2] < 0 || xyz[2] > 1)
+      return texFrac;
+    texFrac[0] = xyz[0];
+    texFrac[1] = xyz[1];
+    texFrac[2] = xyz[2];
+  } else {
+    texFrac = this.scene.crosshairPos.slice();
+    if (axCorSag === this.sliceTypeAxial) {
+      texFrac[0] = fracX;
+      texFrac[1] = fracY;
+    }
+    if (axCorSag === this.sliceTypeCoronal) {
+      texFrac[0] = fracX;
+      texFrac[2] = fracY;
+    }
+    if (axCorSag === this.sliceTypeSagittal) {
+      texFrac[1] = fracX;
+      texFrac[2] = fracY;
     }
   }
-  return [x2, y, z];
+  return texFrac;
+};
+Niivue.prototype.canvasPos2frac = function(canvasPos) {
+  for (let i2 = 0; i2 < this.screenSlices.length; i2++) {
+    let texFrac = this.screenXY2TextureFrac(canvasPos[0], canvasPos[1], i2);
+    if (texFrac[0] >= 0)
+      return texFrac;
+  }
+  return [-1, -1, -1];
 };
 Niivue.prototype.scaleSlice = function(w, h) {
   let scalePix = this.gl.canvas.clientWidth / w;
-  if (h * scalePix > this.gl.canvas.clientHeight)
-    scalePix = this.gl.canvas.clientHeight / h;
+  if (h * scalePix > this.effectiveCanvasHeight())
+    scalePix = this.effectiveCanvasHeight() / h;
   let wPix = w * scalePix;
   let hPix = h * scalePix;
   let leftTopWidthHeight = [
     (this.gl.canvas.clientWidth - wPix) * 0.5,
-    (this.gl.canvas.clientHeight - hPix) * 0.5,
+    (this.effectiveCanvasHeight() - hPix) * 0.5,
     wPix,
     hPix
   ];
@@ -112891,10 +114506,324 @@ Niivue.prototype.drawThumbnail = function() {
   this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
   this.gl.bindVertexArray(this.unusedVAO);
 };
+Niivue.prototype.drawLine = function(leftTopWidthHeight) {
+  this.gl.enable(this.gl.BLEND);
+  this.rectShader.use(this.gl);
+  this.gl.uniform4fv(this.rectShader.uniforms["lineColor"], this.opts.crosshairColor);
+  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);
+};
+Niivue.prototype.drawLine2DX = function(startXYendXY, thickness = 1) {
+  this.gl.bindVertexArray(this.genericVAO);
+  this.lineShader.use(this.gl);
+  this.gl.uniform4fv(this.lineShader.uniforms["lineColor"], this.opts.crosshairColor);
+  this.gl.uniform2fv(this.lineShader.uniforms["canvasWidthHeight"], [
+    this.gl.canvas.width,
+    this.gl.canvas.height
+  ]);
+  this.gl.uniform1f(this.lineShader.uniforms["thickness"], thickness);
+  this.gl.uniform4fv(this.lineShader.uniforms["startXYendXY"], startXYendXY);
+  this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+  this.gl.bindVertexArray(this.unusedVAO);
+};
+Niivue.prototype.drawCrossLinesMM = function(sliceIndex, axCorSag, axiMM, corMM, sagMM) {
+  if (sliceIndex < 0 || this.screenSlices.length <= sliceIndex)
+    return;
+  let tile = this.screenSlices[sliceIndex];
+  let linesH = corMM.slice();
+  let linesV = sagMM.slice();
+  let thick = Math.max(1, this.opts.crosshairWidth);
+  if (axCorSag === this.sliceTypeCoronal)
+    linesH = axiMM.slice();
+  if (axCorSag === this.sliceTypeSagittal) {
+    linesH = axiMM.slice();
+    linesV = corMM.slice();
+  }
+  function mm2screen(mm) {
+    let screenXY = [0, 0];
+    screenXY[0] = tile.leftTopWidthHeight[0] + (mm[0] - tile.leftTopMM[0]) / tile.fovMM[0] * tile.leftTopWidthHeight[2];
+    screenXY[1] = tile.leftTopWidthHeight[1] + tile.leftTopWidthHeight[3] - (mm[1] - tile.leftTopMM[1]) / tile.fovMM[1] * tile.leftTopWidthHeight[3];
+    return screenXY;
+  }
+  if (linesH.length > 0 && axCorSag === 0) {
+    let fracZ = tile.sliceFrac;
+    let dimV = 1;
+    for (let i2 = 0; i2 < linesH.length; i2++) {
+      let mmV = this.frac2mm([0.5, 0.5, 0.5]);
+      mmV[dimV] = linesH[i2];
+      let fracY = this.mm2frac(mmV);
+      fracY = fracY[dimV];
+      let left = this.frac2mm([0, fracY, fracZ]);
+      left = swizzleVec3(left, [0, 1, 2]);
+      let right = this.frac2mm([1, fracY, fracZ]);
+      right = swizzleVec3(right, [0, 1, 2]);
+      left = mm2screen(left);
+      right = mm2screen(right);
+      this.drawLine2DX([left[0], left[1], right[0], right[1]], thick);
+    }
+  }
+  if (linesH.length > 0 && axCorSag === 1) {
+    let fracH = tile.sliceFrac;
+    this.frac2mm([0.5, fracH, 0.5]);
+    let dimV = 2;
+    for (let i2 = 0; i2 < linesH.length; i2++) {
+      let mmV = this.frac2mm([0.5, 0.5, 0.5]);
+      mmV[dimV] = linesH[i2];
+      let fracV = this.mm2frac(mmV);
+      fracV = fracV[dimV];
+      let left = this.frac2mm([0, fracH, fracV]);
+      left = swizzleVec3(left, [0, 2, 1]);
+      let right = this.frac2mm([1, fracH, fracV]);
+      right = swizzleVec3(right, [0, 2, 1]);
+      left = mm2screen(left);
+      right = mm2screen(right);
+      this.drawLine2DX([left[0], left[1], right[0], right[1]], thick);
+    }
+  }
+  if (linesH.length > 0 && axCorSag === 2) {
+    let fracX = tile.sliceFrac;
+    let dimV = 2;
+    for (let i2 = 0; i2 < linesH.length; i2++) {
+      let mmV = this.frac2mm([0.5, 0.5, 0.5]);
+      mmV[dimV] = linesH[i2];
+      let fracZ = this.mm2frac(mmV);
+      fracZ = fracZ[dimV];
+      let left = this.frac2mm([fracX, 0, fracZ]);
+      left = swizzleVec3(left, [1, 2, 0]);
+      let right = this.frac2mm([fracX, 1, fracZ]);
+      right = swizzleVec3(right, [1, 2, 0]);
+      left = mm2screen(left);
+      right = mm2screen(right);
+      this.drawLine2DX([left[0], left[1], right[0], right[1]], thick);
+    }
+  }
+  if (linesV.length > 0 && axCorSag === 0) {
+    let fracZ = tile.sliceFrac;
+    let dimH = 0;
+    for (let i2 = 0; i2 < linesV.length; i2++) {
+      let mm = this.frac2mm([0.5, 0.5, 0.5]);
+      mm[dimH] = linesV[i2];
+      let frac = this.mm2frac(mm);
+      frac = frac[dimH];
+      let left = this.frac2mm([frac, 0, fracZ]);
+      left = swizzleVec3(left, [0, 1, 2]);
+      let right = this.frac2mm([frac, 1, fracZ]);
+      right = swizzleVec3(right, [0, 1, 2]);
+      left = mm2screen(left);
+      right = mm2screen(right);
+      this.drawLine2DX([left[0], left[1], right[0], right[1]], thick);
+    }
+  }
+  if (linesV.length > 0 && axCorSag === 1) {
+    let fracY = tile.sliceFrac;
+    let dimH = 0;
+    for (let i2 = 0; i2 < linesV.length; i2++) {
+      let mm = this.frac2mm([0.5, 0.5, 0.5]);
+      mm[dimH] = linesV[i2];
+      let frac = this.mm2frac(mm);
+      frac = frac[dimH];
+      let left = this.frac2mm([frac, fracY, 0]);
+      left = swizzleVec3(left, [0, 2, 1]);
+      let right = this.frac2mm([frac, fracY, 1]);
+      right = swizzleVec3(right, [0, 2, 1]);
+      left = mm2screen(left);
+      right = mm2screen(right);
+      this.drawLine2DX([left[0], left[1], right[0], right[1]], thick);
+    }
+  }
+  if (linesV.length > 0 && axCorSag === 2) {
+    let fracX = tile.sliceFrac;
+    let dimH = 1;
+    for (let i2 = 0; i2 < linesV.length; i2++) {
+      let mm = this.frac2mm([0.5, 0.5, 0.5]);
+      mm[dimH] = linesV[i2];
+      let frac = this.mm2frac(mm);
+      frac = frac[dimH];
+      let left = this.frac2mm([fracX, frac, 0]);
+      left = swizzleVec3(left, [1, 2, 0]);
+      let right = this.frac2mm([fracX, frac, 1]);
+      right = swizzleVec3(right, [1, 2, 0]);
+      left = mm2screen(left);
+      right = mm2screen(right);
+      this.drawLine2DX([left[0], left[1], right[0], right[1]], thick);
+    }
+  }
+};
+Niivue.prototype.drawCrossLines = function(sliceIndex, axCorSag, axiMM, corMM, sagMM) {
+  if (sliceIndex < 0 || this.screenSlices.length <= sliceIndex)
+    return;
+  if (this.opts.isSliceMM)
+    return this.drawCrossLinesMM(sliceIndex, axCorSag, axiMM, corMM, sagMM);
+  let tile = this.screenSlices[sliceIndex];
+  let linesH = corMM.slice();
+  let linesV = sagMM.slice();
+  Math.max(1, this.opts.crosshairWidth);
+  if (axCorSag === this.sliceTypeCoronal)
+    linesH = axiMM.slice();
+  if (axCorSag === this.sliceTypeSagittal) {
+    linesH = axiMM.slice();
+    linesV = corMM.slice();
+  }
+  if (linesH.length > 0) {
+    let LTWH = tile.leftTopWidthHeight.slice();
+    let sliceDim = 2;
+    let mm = this.frac2mm([0.5, 0.5, 0.5]);
+    for (let i2 = 0; i2 < linesH.length; i2++) {
+      mm[sliceDim] = linesH[i2];
+      let frac = this.mm2frac(mm);
+      this.drawLine([
+        LTWH[0],
+        LTWH[1] + LTWH[3] - frac[sliceDim] * LTWH[3],
+        LTWH[2],
+        1
+      ]);
+    }
+  }
+  if (linesV.length > 0) {
+    let LTWH = tile.leftTopWidthHeight.slice();
+    let isRadiolgical = tile.fovMM[0] < 0;
+    let sliceDim = 0;
+    if (axCorSag === this.sliceTypeSagittal)
+      sliceDim = 1;
+    let mm = this.frac2mm([0.5, 0.5, 0.5]);
+    for (let i2 = 0; i2 < linesV.length; i2++) {
+      mm[sliceDim] = linesV[i2];
+      let frac = this.mm2frac(mm);
+      if (isRadiolgical)
+        this.drawLine([
+          LTWH[0] + (LTWH[2] - frac[sliceDim] * LTWH[2]),
+          LTWH[1],
+          1,
+          LTWH[3]
+        ]);
+      else
+        this.drawLine([
+          LTWH[0] + frac[sliceDim] * LTWH[2],
+          LTWH[1],
+          1,
+          LTWH[3]
+        ]);
+    }
+  }
+};
+Niivue.prototype.drawMosaic = function(mosaicStr) {
+  if (this.volumes.length === 0) {
+    console.log("Unable to draw mosaic until voxel-based image is loaded");
+    return;
+  }
+  this.screenSlices = [];
+  let fovRenderMM = this.screenFieldOfViewMM(this.sliceTypeAxial, true);
+  let fovSliceMM = this.screenFieldOfViewMM(this.sliceTypeAxial);
+  mosaicStr = mosaicStr.replaceAll(";", " ;").trim();
+  let axiMM = [];
+  let corMM = [];
+  let sagMM = [];
+  let items = mosaicStr.split(/\s+/);
+  let scale2 = 1;
+  let labelSize = this.opts.textHeight;
+  for (let pass = 0; pass < 2; pass++) {
+    let isRender = false;
+    let isCrossLines = false;
+    isRender = false;
+    let rowHt = 0;
+    let left = 0;
+    let top = 0;
+    let mxRowWid = 0;
+    let isLabel = false;
+    let axCorSag = this.sliceTypeAxial;
+    for (let i2 = 0; i2 < items.length; i2++) {
+      let item = items[i2];
+      if (item.includes("X")) {
+        isCrossLines = true;
+        continue;
+      }
+      if (item.includes("L")) {
+        isLabel = !item.includes("-");
+        continue;
+      }
+      if (item.includes("V") || item.includes("H")) {
+        i2++;
+        continue;
+      }
+      if (item.includes("A"))
+        axCorSag = this.sliceTypeAxial;
+      if (item.includes("C"))
+        axCorSag = this.sliceTypeCoronal;
+      if (item.includes("S"))
+        axCorSag = this.sliceTypeSagittal;
+      if (item.includes("R"))
+        isRender = true;
+      if (item.includes(";")) {
+        top += rowHt;
+        mxRowWid = Math.max(mxRowWid, left);
+        rowHt = 0;
+        left = 0;
+      }
+      let sliceMM = parseFloat(item, NaN);
+      if (isNaN(sliceMM))
+        continue;
+      let w = 0;
+      let h = 0;
+      let fov = fovSliceMM;
+      if (isRender)
+        fov = fovRenderMM;
+      if (axCorSag === this.sliceTypeSagittal)
+        w = fov[1];
+      else
+        w = fov[0];
+      if (axCorSag === this.sliceTypeAxial)
+        h = fov[1];
+      else
+        h = fov[2];
+      if (pass === 0) {
+        if (!isRender) {
+          if (axCorSag === this.sliceTypeAxial)
+            axiMM.push(sliceMM);
+          if (axCorSag === this.sliceTypeCoronal)
+            corMM.push(sliceMM);
+          if (axCorSag === this.sliceTypeSagittal)
+            sagMM.push(sliceMM);
+        }
+      } else {
+        let ltwh = [scale2 * left, scale2 * top, scale2 * w, scale2 * h];
+        this.opts.textHeight = isLabel ? labelSize : 0;
+        if (isRender) {
+          let inf = sliceMM < 0 ? -Infinity : Infinity;
+          if (Object.is(sliceMM, -0))
+            inf = -Infinity;
+          this.draw2DMM(ltwh, axCorSag, inf, isLabel);
+        } else
+          this.draw2D(ltwh, axCorSag, sliceMM, isLabel);
+        if (isCrossLines) {
+          this.drawCrossLines(this.screenSlices.length - 1, axCorSag, axiMM, corMM, sagMM);
+        }
+        isRender = false;
+        isCrossLines = false;
+      }
+      left += w;
+      rowHt = Math.max(rowHt, h);
+    }
+    top += rowHt;
+    mxRowWid = Math.max(mxRowWid, left);
+    if (mxRowWid <= 0 || top <= 0)
+      break;
+    let scaleW = this.gl.canvas.width / mxRowWid;
+    let scaleH = this.effectiveCanvasHeight() / top;
+    scale2 = Math.min(scaleW, scaleH);
+  }
+  this.opts.textHeight = labelSize;
+};
 Niivue.prototype.drawScene = function() {
   if (!this.initialized) {
     return;
   }
+  this.colorbarHeight = 0;
   this.gl.clearColor(this.opts.backColor[0], this.opts.backColor[1], this.opts.backColor[2], this.opts.backColor[3]);
   this.gl.clear(this.gl.COLOR_BUFFER_BIT);
   if (this.bmpTexture) {
@@ -112904,6 +114833,7 @@ Niivue.prototype.drawScene = function() {
   let posString = "";
   if (this.volumes.length === 0 || typeof this.volumes[0].dims === "undefined") {
     if (this.meshes.length > 0) {
+      this.screenSlices = [];
       this.sliceType = this.sliceTypeRender;
       return this.draw3D();
     }
@@ -112912,64 +114842,90 @@ Niivue.prototype.drawScene = function() {
   }
   if (!this.back.hasOwnProperty("dims"))
     return;
-  if (this.sliceType === this.sliceTypeRender) {
-    if (this.isDragging && this.scene.clipPlaneDepthAziElev[0] < 1.8) {
-      let x2 = this.dragStart[0] - this.dragEnd[0];
-      let y = this.dragStart[1] - this.dragEnd[1];
-      let depthAziElev = this.dragClipPlaneStartDepthAziElev.slice();
-      depthAziElev[1] -= x2;
-      depthAziElev[1] = depthAziElev[1] % 360;
-      depthAziElev[2] += y;
-      if (depthAziElev[1] !== this.scene.clipPlaneDepthAziElev[1] || depthAziElev[2] !== this.scene.clipPlaneDepthAziElev[2]) {
-        this.scene.clipPlaneDepthAziElev = depthAziElev;
-        return this.setClipPlane(this.scene.clipPlaneDepthAziElev);
-      }
-    }
-    return this.draw3D();
+  if (this.isDragging && this.scene.clipPlaneDepthAziElev[0] < 1.8 && this.inRenderTile(this.dragStart[0], this.dragStart[1]) >= 0) {
+    let x2 = this.dragStart[0] - this.dragEnd[0];
+    let y = this.dragStart[1] - this.dragEnd[1];
+    let depthAziElev = this.dragClipPlaneStartDepthAziElev.slice();
+    depthAziElev[1] -= x2;
+    depthAziElev[1] = depthAziElev[1] % 360;
+    depthAziElev[2] += y;
+    if (depthAziElev[1] !== this.scene.clipPlaneDepthAziElev[1] || depthAziElev[2] !== this.scene.clipPlaneDepthAziElev[2]) {
+      this.scene.clipPlaneDepthAziElev = depthAziElev;
+      return this.setClipPlane(this.scene.clipPlaneDepthAziElev);
+    }
+  }
+  if (this.sliceMosaicString.length < 1 && this.sliceType === this.sliceTypeRender) {
+    this.screenSlices = [];
+    this.draw3D();
+    if (this.opts.isColorbar)
+      this.drawColorbar();
+    return;
   }
-  let { volScale } = this.sliceScale();
-  this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
-  this.numScreenSlices = 0;
-  if (this.sliceType === this.sliceTypeAxial) {
-    let leftTopWidthHeight = this.scaleSlice(volScale[0], volScale[1]);
-    this.draw2D(leftTopWidthHeight, 0);
-  } else if (this.sliceType === this.sliceTypeCoronal) {
-    let leftTopWidthHeight = this.scaleSlice(volScale[0], volScale[2]);
-    this.draw2D(leftTopWidthHeight, 1);
-  } else if (this.sliceType === this.sliceTypeSagittal) {
-    let leftTopWidthHeight = this.scaleSlice(volScale[1], volScale[2]);
-    this.draw2D(leftTopWidthHeight, 2);
+  if (this.opts.isColorbar)
+    this.reserveColorbarPanel();
+  if (this.sliceMosaicString.length > 0) {
+    this.drawMosaic(this.sliceMosaicString);
   } else {
-    let ltwh = this.scaleSlice(volScale[0] + volScale[1], volScale[1] + volScale[2]);
-    let wX = ltwh[2] * volScale[0] / (volScale[0] + volScale[1]);
-    let ltwh3x1 = this.scaleSlice(volScale[0] + volScale[0] + volScale[1], Math.max(volScale[1], volScale[2]));
-    let wX1 = ltwh3x1[2] * volScale[0] / (volScale[0] + volScale[0] + volScale[1]);
-    if (wX1 > wX && !this.graph.autoSizeMultiplanar) {
-      let pixScale = wX1 / volScale[0];
-      let hY1 = volScale[1] * pixScale;
-      let hZ1 = volScale[2] * pixScale;
-      this.draw2D([ltwh3x1[0], ltwh3x1[1], wX1, hY1], 0);
-      this.draw2D([ltwh3x1[0] + wX1, ltwh3x1[1], wX1, hZ1], 1);
-      this.draw2D([ltwh3x1[0] + wX1 + wX1, ltwh3x1[1], hY1, hZ1], 2);
+    this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
+    this.screenSlices = [];
+    if (this.sliceType === this.sliceTypeAxial) {
+      this.draw2D([0, 0, 0, 0], 0);
+    } else if (this.sliceType === this.sliceTypeCoronal) {
+      this.draw2D([0, 0, 0, 0], 1);
+    } else if (this.sliceType === this.sliceTypeSagittal) {
+      this.draw2D([0, 0, 0, 0], 2);
     } else {
-      let wY = ltwh[2] - wX;
-      let hY = ltwh[3] * volScale[1] / (volScale[1] + volScale[2]);
-      let hZ = ltwh[3] - hY;
-      this.draw2D([ltwh[0], ltwh[1] + hZ, wX, hY], 0);
-      this.draw2D([ltwh[0], ltwh[1], wX, hZ], 1);
-      this.draw2D([ltwh[0] + wX, ltwh[1], wY, hZ], 2);
-      var margin = this.opts.colorBarMargin * hY;
-      if (!this.graph.autoSizeMultiplanar) {
-        this.drawColorbar([
-          ltwh[0] + wX + margin,
-          ltwh[1] + hZ + margin,
-          wY - margin - margin,
-          hY * this.opts.colorbarHeight
-        ]);
+      let { volScale, vox, longestAxis } = this.sliceScale();
+      let ltwh = this.scaleSlice(volScale[0] + volScale[1], volScale[1] + volScale[2]);
+      let wX = ltwh[2] * volScale[0] / (volScale[0] + volScale[1]);
+      let ltwh3x1 = this.scaleSlice(volScale[0] + volScale[0] + volScale[1], Math.max(volScale[1], volScale[2]));
+      let mx = Math.max(Math.max(volScale[1], volScale[2]), volScale[0]);
+      let ltwh4x1 = this.scaleSlice(volScale[0] + volScale[0] + volScale[1] + mx, mx);
+      let wX1 = ltwh3x1[2] * volScale[0] / (volScale[0] + volScale[0] + volScale[1]);
+      if (wX1 > wX && !this.graph.autoSizeMultiplanar) {
+        let pixScale = wX1 / volScale[0];
+        let hY1 = volScale[1] * pixScale;
+        let hZ1 = volScale[2] * pixScale;
+        if (ltwh3x1[3] === ltwh4x1[3]) {
+          ltwh3x1 = ltwh4x1;
+          this.draw3D([
+            ltwh3x1[0] + wX1 + wX1 + hY1,
+            ltwh3x1[1],
+            ltwh4x1[3],
+            ltwh4x1[3]
+          ]);
+        }
+        this.draw2D([ltwh3x1[0], ltwh3x1[1], wX1, hY1], 0);
+        this.draw2D([ltwh3x1[0] + wX1, ltwh3x1[1], wX1, hZ1], 1);
+        this.draw2D([ltwh3x1[0] + wX1 + wX1, ltwh3x1[1], hY1, hZ1], 2);
+      } else {
+        let wY = ltwh[2] - wX;
+        let hY = ltwh[3] * volScale[1] / (volScale[1] + volScale[2]);
+        let hZ = ltwh[3] - hY;
+        this.draw2D([ltwh[0], ltwh[1] + hZ, wX, hY], 0);
+        this.draw2D([ltwh[0], ltwh[1], wX, hZ], 1);
+        this.draw2D([ltwh[0] + wX, ltwh[1], wY, hZ], 2);
+        if (!this.graph.autoSizeMultiplanar)
+          this.draw3D([ltwh[0] + wX, ltwh[1] + hZ, wY, hY]);
       }
     }
   }
-  if (this.isDragging && this.sliceType !== this.sliceTypeRender) {
+  if (this.opts.isRuler)
+    this.drawRuler();
+  if (this.opts.isColorbar)
+    this.drawColorbar();
+  if (this.isDragging) {
+    if (this.opts.isDragShowsMeasurementTool) {
+      this.drawMeasurementTool([
+        this.dragStart[0],
+        this.dragStart[1],
+        this.dragEnd[0],
+        this.dragEnd[1]
+      ]);
+      return;
+    }
+    if (this.inRenderTile(this.dragStart[0], this.dragStart[1]) >= 0)
+      return;
     let width = Math.abs(this.dragStart[0] - this.dragEnd[0]);
     let height = Math.abs(this.dragStart[1] - this.dragEnd[1]);
     this.drawSelectionBox([