@niivue/niivue 0.24.2 → 0.24.3

package/src/niivue.js

@@ -51,6 +51,9 @@ import { Log } from "./logger";
 import defaultFontPNG from "./fonts/Roboto-Regular.png";
 import defaultFontMetrics from "./fonts/Roboto-Regular.json";
 import { colortables } from "./colortables";
+import { webSocket } from "rxjs/webSocket";
+import { interval } from "rxjs";
+
 const log = new Log();
 const cmapper = new colortables();
 
@@ -119,7 +122,9 @@ export function Niivue(options = {}) {
   this.volumeTexture = null;
   this.drawTexture = null; //the GPU memory storage of the drawing
   this.drawBitmap = null; //the CPU memory storage of the drawing
-  this.drawUndoBitmap = null; //copy of prior drawBitmap
+  this.maxDrawUndoBitmaps = 8; //analogy: number of bullets in revolver, we will cycle these
+  this.currentDrawUndoBitmap = this.maxDrawUndoBitmaps; //analogy: cylinder position of a revolver
+  this.drawUndoBitmaps = [];
   this.drawOpacity = 0.8;
   this.drawPenLocation = [NaN, NaN, NaN];
   this.drawPenAxCorSag = -1; //do not allow pen to drag between Sagittal/Coronal/Axial
@@ -257,6 +262,14 @@ export function Niivue(options = {}) {
     },
   ];
 
+  // multiuser
+  this.isController = false;
+  this.isInSession = false;
+  this.sessionKey = "";
+  this.sessionUrl = "";
+  this.serverConnection$ = null;
+  this.interval$ = null;
+
   this.initialized = false;
   // loop through known Niivue properties
   // if the user supplied opts object has a
@@ -434,6 +447,142 @@ Niivue.prototype.sync = function () {
   this.otherNV.drawScene();
 };
 
+// Internal function to connect to web socket server
+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);
+};
+
+// Internal function to schedule updates to the server
+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,
+    });
+  });
+};
+
+// Internal function called after a connection with the server has been made
+Niivue.prototype.subscribeToServer = function (
+  sessionCreatedCallback,
+  sessionJoinedCallback
+) {
+  this.serverConnection$.subscribe({
+    next: (msg) => {
+      switch (msg["op"]) {
+        case "update":
+          this.scene.renderAzimuth = msg["azimuth"];
+          this.scene.renderElevation = msg["elevation"];
+          this.volScaleMultiplier = msg["zoom"];
+          this.scene.clipPlane = msg["clipPlane"];
+          this.drawScene();
+          break;
+
+        case "create":
+          console.log(msg);
+          if (!msg["isError"]) {
+            this.isInSession = true;
+            this.sessionKey = msg["key"];
+            this.setUpdateInterval();
+          }
+          if (sessionCreatedCallback) {
+            sessionCreatedCallback(
+              msg["message"],
+              msg["url"],
+              msg["key"],
+              msg["isError"]
+            );
+          }
+          break;
+
+        case "join":
+          this.isInSession = true;
+          this.isController = msg["isController"];
+          if (this.isController) {
+            this.setUpdateInterval();
+          }
+
+          if (sessionJoinedCallback) {
+            sessionJoinedCallback(
+              msg["message"],
+              msg["url"],
+              msg["isController"]
+            );
+          }
+          break;
+      }
+    }, // Called whenever there is a message from the server.
+    error: (err) => console.log(err), // Called if at any point WebSocket API signals some kind of error.
+    complete: () => console.log("complete"), // Called when connection is closed (for whatever reason).
+  });
+};
+
+/**
+ * Create a multiuser session
+ * @param {string} wsServerUrl e.g. ws://localhost:3000
+ * @param {string} sessionName
+ * @param {function(string, string, string, boolean):void} sessionCreatedCallback callback after session has been created with message, session url, session key
+ * if there was no error.
+ */
+Niivue.prototype.createSession = function (
+  wsServerUrl,
+  sessionName,
+  sessionCreatedCallback
+) {
+  this.connectToServer(wsServerUrl, sessionName);
+
+  // subscribe to any messages from the server
+  this.subscribeToServer(sessionCreatedCallback);
+
+  // tell the server we want to create a sesion
+  this.serverConnection$.next({
+    op: "create",
+  });
+};
+
+/**
+ * Join a multiuser session
+ * @param {string} wsServerUrl e.g. ws://localhost:3000
+ * @param {string} sessionName
+ * @param {function(string, string, boolean):void} sessionJoinedCallback callback after session has been joined with message, session url and session key
+ */
+Niivue.prototype.joinSession = function (
+  wsServerUrl,
+  sessionName,
+  key,
+  sessionJoinedCallback
+) {
+  this.connectToServer(wsServerUrl, sessionName);
+
+  // subscribe to any messages from the server
+  this.subscribeToServer(null, sessionJoinedCallback);
+
+  // tell the server we want to create a sesion
+  this.serverConnection$.next({
+    op: "join",
+    key: key,
+  });
+};
+
+/**
+ * Close a multiuser session
+ */
+Niivue.prototype.closeSession = function () {
+  this.interval$.complete();
+  this.serverConnection$.complete();
+  this.isInSession = false;
+  this.isController = false;
+};
+
 /* Not documented publicly for now
  * test if two arrays have equal values for each element
  * @param {Array} a the first array
@@ -635,6 +784,7 @@ Niivue.prototype.mouseUpListener = function () {
   this.scene.mouseButtonRightDown = false;
   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) {
@@ -1196,8 +1346,176 @@ Niivue.prototype.getVolumeIndexByID = function (id) {
   return -1; // -1 signals that no valid index was found for a volume with the given id
 };
 
+//inputs
+// data: Uint8Array to compress
+//output
+// returns rle compressed Uint8Array
+
+function encodeRLE(data) {
+  //https://en.wikipedia.org/wiki/PackBits
+  //run length encoding
+  // input and output are Uint8Array
+  // Will compress data with long runs up to x64
+  // Worst case encoded size is ~1% larger than input
+  let dl = data.length; //input length
+  let dp = 0; //input position
+  //worst case: run length encoding (1+1/127) times larger than input
+  let r = new Uint8Array(dl + Math.ceil(0.01 * dl));
+  let rI = new Int8Array(r.buffer); //typecast as header can be negative
+  let rp = 0; //run length position
+  while (dp < dl) {
+    //for each byte in input
+    let v = data[dp];
+    dp++;
+    let rl = 1; //run length
+    while (rl < 129 && dp < dl && data[dp] === v) {
+      dp++;
+      rl++;
+    } //count run length
+    if (rl > 1) {
+      //header
+      rI[rp] = -rl + 1;
+      rp++;
+      r[rp] = v;
+      rp++;
+      continue;
+    }
+    //count literal length
+    while (dp < dl) {
+      if (rl > 127) break;
+      if (dp + 2 < dl) {
+        //console.log(':', v, data[dp], data[dp+1]);
+        if (
+          v !== data[dp] &&
+          data[dp + 2] === data[dp] &&
+          data[dp + 1] === data[dp]
+        )
+          break;
+      }
+      v = data[dp];
+      dp++;
+      rl++;
+    }
+    //write header
+    r[rp] = rl - 1;
+    rp++;
+    for (let i = 0; i < rl; i++) {
+      r[rp] = data[dp - rl + i];
+      rp++;
+    }
+  }
+  log.info("PackBits " + dl + " -> " + rp + " bytes (x" + dl / rp + ")");
+  return r.slice(0, rp);
+} // encodeRLE()
+
+//inputs
+// rle: packbits compressed stream
+// decodedlen: size of uncompressed data
+//output
+// returns Uint8Array of decodedlen bytes
+function decodeRLE(rle, decodedlen) {
+  let r = new Uint8Array(rle.buffer);
+  let rI = new Int8Array(r.buffer); //typecast as header can be negative
+  let rp = 0; //input position in rle array
+  //d: output uncompressed data array
+  let d = new Uint8Array(decodedlen);
+  let dp = 0; //output position in decoded array
+  while (rp < r.length) {
+    //read header
+    let hdr = rI[rp];
+    rp++;
+    if (hdr < 0) {
+      //write run
+      let v = rI[rp];
+      rp++;
+      for (let i = 0; i < 1 - hdr; i++) {
+        d[dp] = v;
+        dp++;
+      }
+    } else {
+      //write literal
+      for (let i = 0; i < hdr + 1; i++) {
+        d[dp] = rI[rp];
+        rp++;
+        dp++;
+      }
+    } //if run else literal
+  } //while rp < r.length
+  return d;
+} // decodeRLE()
+
+/*Niivue.prototype.testRLE = function() {
+  //Demo to test encodeRLE/decodeRLE
+  let len = 256*256*256;
+  let data = new Uint8Array(len);
+  for (let i = 0; i < len; i++)
+    data[i] = ((Math.random() > 0.30) ? 1 : 0);
+  console.log(data);
+  let rle = encodeRLE(data);
+  let ddata = decodeRLE(rle, len);
+  let ok = true;
+  for (let i = 0; i < len; i++)
+    if (data[i] !== ddata[i])
+      ok = false;
+  console.log('decoded correctly:', ok);
+} // testRLE()*/
+
+Niivue.prototype.drawAddUndoBitmap = async function (fnm) {
+  if (!this.drawBitmap || this.drawBitmap.length < 1) {
+    console.log("drawAddUndoBitmap error: No drawing open");
+    return false;
+  }
+  //let rle = encodeRLE(this.drawBitmap);
+  //the bitmaps are a cyclical loop, like a revolver hand gun: increment the cylinder
+  this.currentDrawUndoBitmap++;
+  if (this.currentDrawUndoBitmap >= this.maxDrawUndoBitmaps)
+    this.currentDrawUndoBitmap = 0;
+  this.drawUndoBitmaps[this.currentDrawUndoBitmap] = encodeRLE(this.drawBitmap);
+}; // drawAddUndoBitmap()
+
+Niivue.prototype.drawClearAllUndoBitmaps = async function () {
+  this.currentDrawUndoBitmap = this.maxDrawUndoBitmaps; //next add will be cylinder 0
+  if (this.drawUndoBitmaps.length < 1) return;
+  for (let i = this.drawUndoBitmaps.length - 1; i >= 0; i--) array[i] = [];
+}; // drawClearAllUndoBitmaps()
+
+Niivue.prototype.drawUndo = function () {
+  if (this.drawUndoBitmaps.length < 1) {
+    console.log("undo bitmaps not loaded");
+    return;
+  }
+  //let dims = this.back.hdr.dims;
+  //let nv = dims[1] * dims[2] * dims[3];
+  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.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.loadDrawing = async function (fnm) {
   if (this.drawBitmap) console.log("Overwriting open drawing!");
+  this.drawClearAllUndoBitmaps();
   let volume = await NVImage.loadFromUrl({ url: fnm });
   //let volume = await NVImage.loadFromFile({file: fnm});
   let dims = volume.hdr.dims; //reverse to original
@@ -1215,7 +1533,7 @@ Niivue.prototype.loadDrawing = async function (fnm) {
   //if (perm[0] === 1 && perm[1] === 2 && perm[2] === 3) {
   let vx = dims[1] * dims[2] * dims[3];
   //this.drawBitmap = new Uint8Array(vx);
-  this.drawUndoBitmap = null;
+  //this.drawUndoBitmap = null;
   this.drawBitmap = new Uint8Array(vx);
   this.drawTexture = this.r8Tex(
     this.drawTexture,
@@ -1273,6 +1591,7 @@ Niivue.prototype.loadDrawing = async function (fnm) {
       } //for x
     } //for y
   } //for z
+  this.drawAddUndoBitmap();
   this.refreshDrawing(false);
   this.drawScene();
 };
@@ -1715,6 +2034,11 @@ Niivue.prototype.setScale = function (scale) {
  */
 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();
 }; // setClipPlaneColor()
 
@@ -1915,7 +2239,9 @@ Niivue.prototype.createEmptyDrawing = function () {
   if (mn < 1) return; //something is horribly wrong!
   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.drawUndoBitmap = null;
   this.drawTexture = this.r8Tex(
     this.drawTexture,
     this.gl.TEXTURE7,
@@ -2038,16 +2364,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];
@@ -2055,7 +2371,7 @@ Niivue.prototype.drawGrowCut = function () {
     console.log("bitmap dims are wrong");
     return;
   }
-  this.drawUndoBitmap = this.drawBitmap.slice();
+  //this.drawUndoBitmap = this.drawBitmap.slice();
   let gl = this.gl;
   let fb = gl.createFramebuffer();
   gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
@@ -2068,15 +2384,17 @@ Niivue.prototype.drawGrowCut = function () {
   for (let i = 1; i < nv; i++) img16[i] = this.drawBitmap[i];
   let label0 = this.r16Tex(null, gl.TEXTURE6, this.back.dims, img16);
   let label1 = this.r16Tex(null, gl.TEXTURE7, this.back.dims, img16); //TEXTURE7 = draw Texture
-  for (let i = 1; i < nv; i++) if (img16[i] > 0) img16[i] = 10000;
+  let kMAX_STRENGTH = 10000;
+  for (let i = 1; i < nv; i++) if (img16[i] > 0) img16[i] = 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; //will run 2x this value
+  gl.uniform1i(shader.uniforms["finalPass"], 0);
   gl.uniform1i(shader.uniforms["inputTexture0"], 3); // background is TEXTURE3
-  //for (let j = 0; j < 250; j++) {
-  for (let j = 0; j < 45; j++) {
+  for (let j = 0; j < iterations; j++) {
     gl.uniform1i(shader.uniforms["inputTexture1"], 6); // label0 is TEXTURE6
     gl.uniform1i(shader.uniforms["inputTexture2"], 4); // strength0 is TEXTURE4
     for (let i = 0; i < this.back.dims[3]; i++) {
@@ -2104,6 +2422,7 @@ Niivue.prototype.drawGrowCut = function () {
       this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
     } //for i: each slice
     //reverse order strength1/label1 and strength0/label0 for reading and writing:
+    if (j === iterations - 1) gl.uniform1i(shader.uniforms["finalPass"], 1);
     gl.uniform1i(shader.uniforms["inputTexture1"], 7); // label1 is TEXTURE7
     gl.uniform1i(shader.uniforms["inputTexture2"], 5); // strength1 is TEXTURE5
     for (let i = 0; i < this.back.dims[3]; i++) {
@@ -2132,17 +2451,9 @@ Niivue.prototype.drawGrowCut = function () {
   } //for j: each iteration
   //read data
   gl.drawBuffers([gl.COLOR_ATTACHMENT0]);
-  let readAttach = gl.COLOR_ATTACHMENT0;
-  let readTex = label1;
-  let readStrength = false;
-  if (readStrength) {
-    //read strength or label
-    //readAttach = gl.COLOR_ATTACHMENT1;
-    readTex = strength1;
-  }
-  //gl.readBuffer(gl.COLOR_ATTACHMENT1); //strength
+  let readAttach = gl.COLOR_ATTACHMENT1;
+  let readTex = label0;
   gl.readBuffer(readAttach); //label
-
   // assuming a framebuffer is bound with the texture to read attached
   const format = gl.getParameter(gl.IMPLEMENTATION_COLOR_READ_FORMAT);
   const type = gl.getParameter(gl.IMPLEMENTATION_COLOR_READ_TYPE);
@@ -2173,12 +2484,7 @@ Niivue.prototype.drawGrowCut = function () {
   }
   let mx = img16[0];
   for (let i = 0; i < img16.length; i++) mx = Math.max(mx, img16[i]);
-  //let img16 = new Int16Array(nv);
-  //gl.readPixels(0, 0, w, h, format, type);
-  //            this.fallbackReadPixelsFormat, this.fallbackReadPixelsType, fallbackSliceView);
-
   for (let i = 1; i < nv; i++) this.drawBitmap[i] = img16[i];
-
   //clean up
   //restore textures
   gl.activeTexture(gl.TEXTURE2);
@@ -2199,6 +2505,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);
 };
 
@@ -2289,6 +2596,87 @@ Niivue.prototype.drawLine = function (ptA, ptB, penValue) {
   }
 };
 
+Niivue.prototype.drawFloodFill = function (seedXYZ, newColor = 0) {
+  //3D "paint bucket" fill:
+  // set all voxels connected to seed point to newColor
+  // https://en.wikipedia.org/wiki/Flood_fill
+  newColor = Math.abs(newColor);
+  let dims = [this.back.dims[1], this.back.dims[2], this.back.dims[3]]; //+1: dims indexed from 0!
+  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) {
+    //provided an XYZ 3D point, provide address in 1D array
+    return pt[0] + pt[1] * nx + pt[2] * nxy;
+  }
+  function vx2xyz(vx) {
+    //provided address in 1D array, return XYZ coordinate
+    let Z = Math.floor(vx / nxy); //slice
+    let Y = Math.floor((vx - Z * nxy) / nx); //column
+    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;
+  }
+  //img is binary mask with selected color as 1 and all other colors 0
+  for (let i = 1; i < nxyz; i++) {
+    img[i] = 0;
+    if (this.drawBitmap[i] === seedColor) img[i] = 1;
+  }
+  //1. Set Q to the empty queue or stack.
+  let Q = [];
+  //2. Add node to the end of Q.
+  Q.push(seedVx);
+  img[seedVx] = 2; //part of cluster
+  //3. While Q is not empty:
+  while (Q.length > 0) {
+    //4.   Set n equal to the first element of Q.
+    let vx = Q[0];
+    //5.   Remove first element from Q.
+    Q.shift();
+    //6. Test six neighbors of n (left,right,anterior,posterior,inferior, superior
+    //   If any is is unfound part of cluster (value = 1) set it to found (value 2) and add to Q
+    let xyz = vx2xyz(vx);
+    function testNeighbor(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; //part of cluster
+      Q.push(vxT);
+    }
+    testNeighbor([0, 0, -1]); //inferior
+    testNeighbor([0, 0, 1]); //superior
+    testNeighbor([0, -1, 0]); //posterior
+    testNeighbor([0, 1, 0]); //anterior
+    testNeighbor([-1, 0, 0]); //left
+    testNeighbor([1, 0, 0]); //right
+    //7. Continue looping until Q is exhausted.
+  }
+  //8. Return
+  //this.drawUndoBitmap = this.drawBitmap.slice();
+  for (let i = 1; i < nxyz; i++)
+    if (img[i] === 2)
+      //if part of cluster
+      this.drawBitmap[i] = newColor;
+  this.drawAddUndoBitmap();
+  this.refreshDrawing(false);
+}; // drawFloodFill()
+
 Niivue.prototype.drawPenFilled = function () {
   let nPts = this.drawPenFillPts.length;
   if (nPts < 2) {
@@ -2415,17 +2803,20 @@ Niivue.prototype.drawPenFilled = function () {
       } // x column
     } //y row
   } //not axial
+  //this.drawUndoBitmaps[this.currentDrawUndoBitmap]
   if (
     !this.drawFillOverwrites &&
-    this.drawUndoBitmap.length === this.drawBitmap.length
+    this.drawUndoBitmaps[this.currentDrawUndoBitmap].length > 0
   ) {
-    let nv = this.drawUndoBitmap.length;
+    let nv = this.drawBitmap.length;
+    let bmp = decodeRLE(this.drawUndoBitmaps[this.currentDrawUndoBitmap], nv);
     for (let i = 0; i < nv; i++) {
-      if (this.drawUndoBitmap[i] === 0) continue;
-      this.drawBitmap[i] = this.drawUndoBitmap[i];
+      if (bmp[i] === 0) continue;
+      this.drawBitmap[i] = bmp[i];
     }
   }
   this.drawPenFillPts = [];
+  this.drawAddUndoBitmap();
   this.refreshDrawing(false);
 }; // drawPenFilled()
 
@@ -3767,11 +4158,14 @@ Niivue.prototype.mouseClick = function (x, y, posChange = 0, isDelta = true) {
       }
       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] &&
@@ -3783,6 +4177,7 @@ Niivue.prototype.mouseClick = function (x, y, posChange = 0, isDelta = true) {
         }
         this.drawPenLocation = pt;
         if (this.opts.isFilledPen) this.drawPenFillPts.push(pt);
+        //xxxxxx
         this.refreshDrawing(false);
       }
       this.drawScene();
@@ -4001,12 +4396,22 @@ Niivue.prototype.setInterpolation = function (isNearest) {
   this.drawScene();
 }; // setInterpolation()
 
-Niivue.prototype.calculateMvpMatrixX = function () {
-  let whratio = this.gl.canvas.clientWidth / this.gl.canvas.clientHeight;
+Niivue.prototype.calculateMvpMatrixX = function (leftTopWidthHeight) {
+  let gl = this.gl;
+  gl.viewport(
+    leftTopWidthHeight[0],
+    leftTopWidthHeight[1],
+    leftTopWidthHeight[2],
+    leftTopWidthHeight[3]
+  );
+  let whratio = leftTopWidthHeight[2] / leftTopWidthHeight[3];
   //pivot from center of objects
   //let scale = this.furthestVertexFromOrigin;
   //let origin = [0,0,0];
-  let scale = this.furthestFromPivot;
+  console.log(">>", this.back.dimsRAS, this.back.matRAS);
+
+  let scale = this.furthestFromPivot * 0.5;
+
   let origin = [0, 0, 0];
   let projectionMatrix = mat.mat4.create();
   //scale = (0.8 * scale) / this.volScaleMultiplier; //2.0 WebGL viewport has range of 2.0 [-1,-1]...[1,1]
@@ -4059,7 +4464,7 @@ Niivue.prototype.calculateMvpMatrixX = function () {
   let modelViewProjectionMatrix = mat.mat4.create();
   mat.mat4.multiply(modelViewProjectionMatrix, projectionMatrix, modelMatrix);
   return [modelViewProjectionMatrix, modelMatrix, normalMatrix];
-}; // calculateMvpMatrix
+}; // calculateMvpMatrixX
 
 Niivue.prototype.drawMesh3DX = function (
   isDepthTest = true,
@@ -4069,10 +4474,7 @@ Niivue.prototype.drawMesh3DX = function (
   if (this.meshes.length < 1) return;
   let gl = this.gl;
   let m, modelMtx, normMtx;
-  [m, modelMtx, normMtx] = this.calculateMvpMatrixX(
-    this.volumeObject3D,
-    leftTopWidthHeight
-  );
+  [m, modelMtx, normMtx] = this.calculateMvpMatrixX(leftTopWidthHeight);
 
   gl.enable(gl.DEPTH_TEST);
   gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
@@ -4137,6 +4539,7 @@ Niivue.prototype.drawMesh3DX = function (
   gl.enable(gl.BLEND);
   gl.depthFunc(gl.ALWAYS);
   this.readyForSync = true;
+  //gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
 }; //drawMesh3D()
 
 // not included in public docs
@@ -4145,7 +4548,16 @@ Niivue.prototype.draw2D = function (leftTopWidthHeight, axCorSag) {
   let gl = this.gl;
   gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
   gl.disable(gl.DEPTH_TEST);
-
+  /* issue56
+if (axCorSag === this.sliceTypeAxial) {
+gl.clearDepth(0.0);
+gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+gl.clear(gl.COLOR_BUFFER_BIT);
+
+    this.drawMesh3DX(true,1.0,leftTopWidthHeight);
+      this.setPivot3D();
+  return;
+}*/
   var crossXYZ = [
     this.scene.crosshairPos[0],
     this.scene.crosshairPos[1],
@@ -4267,9 +4679,8 @@ Niivue.prototype.draw2D = function (leftTopWidthHeight, axCorSag) {
       ],
       "S"
     );
+
   if (axCorSag !== this.sliceTypeAxial) return;
-  //  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
-  this.setPivot3D();
   gl.viewport(
     leftTopWidthHeight[0],
     leftTopWidthHeight[1],
@@ -4279,6 +4690,7 @@ Niivue.prototype.draw2D = function (leftTopWidthHeight, axCorSag) {
   gl.enable(gl.DEPTH_TEST);
   gl.depthFunc(gl.ALWAYS);
   gl.clearDepth(0.0);
+
   this.sync();
 }; // draw2D()