@niivue/niivue 0.15.1 → 0.18.1

package/README.md

@@ -38,7 +38,7 @@ We host many NiiVue examples via github pages. These are updated and deployed au
 
 ## existing html page
 ```html
-<script src="https://unpkg.com/@niivue/niivue@0.15.1/dist/niivue.umd.js"></script>
+<script src="https://unpkg.com/@niivue/niivue@0.18.1/dist/niivue.umd.js"></script>
 
 <canvas id="gl" height=480 width=640></canvas>
 

package/dist/niivue.es.js

@@ -714,16 +714,22 @@ var fragSliceShader = `#version 300 es
 precision highp int;
 precision highp float;
 uniform highp sampler3D volume, overlay;
+uniform float overlays;
 uniform float opacity;
 in vec3 texPos;
 out vec4 color;
 void main() {
 	color = vec4(texture(volume, texPos).rgb, opacity);
-	vec4 ocolor = texture(overlay, texPos);
-    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.a = aout;
+	vec4 ocolor = vec4(0.0);
+	if (overlays < 1.0) {
+	 ocolor = vec4(0.0, 0.0, 0.0, 0.0);
+	} else {
+		ocolor = texture(overlay, texPos);
+	}
+	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.a = aout;
 }`;
 var fragLineShader = `#version 300 es
 #line 189
@@ -10559,6 +10565,16 @@ NVImage.prototype.vox2mm = function(XYZ, mtx) {
   let pos3 = fromValues$1(pos[0], pos[1], pos[2]);
   return pos3;
 };
+NVImage.prototype.mm2vox = function(mm) {
+  let sform = fromValues$2(...this.hdr.affine.flat());
+  let out = clone(sform);
+  transpose(out, sform);
+  invert(out, out);
+  let pos = fromValues(mm[0], mm[1], mm[2], 1);
+  transformMat4(pos, pos, out);
+  let pos3 = fromValues$1(pos[0], pos[1], pos[2]);
+  return [Math.round(pos3[0]), Math.round(pos3[1]), Math.round(pos3[2])];
+};
 NVImage.prototype.arrayEquals = function(a, b) {
   return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((val, index) => val === b[index]);
 };
@@ -10785,35 +10801,37 @@ String.prototype.getBytes = function() {
   }
   return bytes;
 };
+NVImage.prototype.getValue = function(x, y, z) {
+  const { nx, ny } = this.getImageMetadata();
+  return this.img[x + y * nx + z * nx * ny];
+};
 const Log = function(logLevel) {
-  this.DEBUG = "debug";
-  this.INFO = "info";
-  this.WARN = "warn";
-  this.ERROR = "error";
-  this.LOG_PREFIX = "NiiVue: ";
+  this.LOGGING_ON = true;
+  this.LOGGING_OFF = false;
+  this.LOG_PREFIX = "NiiVue:";
   this.logLevel = logLevel;
 };
 Log.prototype.getTimeStamp = function() {
-  return `${this.LOG_PREFIX}${Date.now()} `;
+  return `${this.LOG_PREFIX} `;
 };
 Log.prototype.debug = function() {
-  if (this.logLevel === this.DEBUG) {
-    console.log(this.getTimeStamp(), ...arguments);
+  if (this.logLevel === this.LOGGING_ON) {
+    console.log(this.getTimeStamp(), "DEBUG", ...arguments);
   }
 };
 Log.prototype.info = function() {
-  if (this.logLevel === this.INFO) {
-    console.log(this.getTimeStamp(), ...arguments);
+  if (this.logLevel === this.LOGGING_ON) {
+    console.log(this.getTimeStamp(), "INFO", ...arguments);
   }
 };
 Log.prototype.warn = function() {
-  if (this.logLevel === this.WARN) {
-    console.warn(this.getTimeStamp(), ...arguments);
+  if (this.logLevel === this.LOGGING_ON) {
+    console.warn(this.getTimeStamp(), "WARN", ...arguments);
   }
 };
 Log.prototype.error = function() {
-  if (this.logLevel === this.ERROR) {
-    console.error(this.getTimeStamp(), ...arguments);
+  if (this.logLevel === this.LOGGING_ON) {
+    console.error(this.getTimeStamp(), "ERROR", ...arguments);
   }
 };
 Log.prototype.setLogLevel = function(logLevel) {
@@ -12353,11 +12371,6 @@ var defaultFontMetrics = {
   glyphs,
   kerning
 };
-function WorkerWrapper() {
-  return new Worker("./assets/niimathWorker.1f52eda8.js", {
-    "type": "module"
-  });
-}
 const log = new Log();
 const Niivue = function(options = {}) {
   this.opts = {};
@@ -12375,7 +12388,7 @@ const Niivue = function(options = {}) {
     viewModeHotKey: "KeyV",
     keyDebounceTime: 50,
     isRadiologicalConvention: false,
-    logLevel: "info"
+    logging: false
   };
   this.canvas = null;
   this.gl = null;
@@ -12445,7 +12458,7 @@ const Niivue = function(options = {}) {
   this.intensityRange$ = new Subject();
   this.scene.location$ = new Subject();
   this.scene.loading$ = new Subject();
-  this.loadingText = "drag and drop to start";
+  this.loadingText = "waiting for images...";
   this.currentClipPlaneIndex = 0;
   this.lastCalled = new Date().getTime();
   this.multiTouchGesture = false;
@@ -12458,7 +12471,7 @@ const Niivue = function(options = {}) {
   for (let prop in this.defaults) {
     this.opts[prop] = options[prop] === void 0 ? this.defaults[prop] : options[prop];
   }
-  log.setLogLevel(this.opts.logLevel);
+  log.setLogLevel(this.opts.logging);
   this.eventsToSubjects = {
     location: this.scene.location$,
     loading: this.scene.loading$
@@ -12467,7 +12480,7 @@ const Niivue = function(options = {}) {
 };
 Niivue.prototype.attachTo = async function(id) {
   await this.attachToCanvas(document.getElementById(id));
-  log.debug("attached to canvas", [1, 0, 1], false);
+  log.debug("attached to element with id: ", id);
   return this;
 };
 Niivue.prototype.on = function(event, callback) {
@@ -12592,14 +12605,14 @@ function intensityRaw2Scaled(hdr, raw) {
     hdr.scl_slope = 1;
   return raw * hdr.scl_slope + hdr.scl_inter;
 }
-Niivue.prototype.calculateNewRange = function() {
+Niivue.prototype.calculateNewRange = function(volIdx = 0) {
   if (this.sliceType === this.sliceTypeRender) {
     return;
   }
   let frac = this.canvasPos2frac([this.dragStart[0], this.dragStart[1]]);
-  let startVox = this.frac2vox(frac);
+  let startVox = this.frac2vox(frac, volIdx);
   frac = this.canvasPos2frac([this.dragEnd[0], this.dragEnd[1]]);
-  let endVox = this.frac2vox(frac);
+  let endVox = this.frac2vox(frac, volIdx);
   let hi = -Number.MAX_VALUE, lo = Number.MAX_VALUE;
   let xrange;
   let yrange;
@@ -12614,8 +12627,8 @@ Niivue.prototype.calculateNewRange = function() {
   } else if (startVox[2] - endVox[2] === 0) {
     zrange[1] = startVox[2] + 1;
   }
-  const hdr = this.volumes[0].hdr;
-  const img = this.volumes[0].img;
+  const hdr = this.volumes[volIdx].hdr;
+  const img = this.volumes[volIdx].img;
   const xdim = hdr.dims[1];
   const ydim = hdr.dims[2];
   for (let z = zrange[0]; z < zrange[1]; z++) {
@@ -12635,8 +12648,8 @@ Niivue.prototype.calculateNewRange = function() {
   }
   var mnScale = intensityRaw2Scaled(hdr, lo);
   var mxScale = intensityRaw2Scaled(hdr, hi);
-  this.volumes[0].cal_min = mnScale;
-  this.volumes[0].cal_max = mxScale;
+  this.volumes[volIdx].cal_min = mnScale;
+  this.volumes[volIdx].cal_max = mxScale;
   this.intensityRange$.next([mnScale, mxScale]);
 };
 Niivue.prototype.mouseUpListener = function() {
@@ -12847,22 +12860,40 @@ Niivue.prototype.getOverlayIndexByID = function(id) {
   return -1;
 };
 Niivue.prototype.setVolume = function(volume, toIndex = 0) {
+  this.volumes.map((v) => {
+    log.debug(v.name);
+  });
   let numberOfLoadedImages = this.volumes.length;
   if (toIndex > numberOfLoadedImages) {
     return;
   }
   let volIndex = this.getVolumeIndexByID(volume.id);
-  if (volIndex >= 0) {
-    this.volumes.splice(volIndex, 1);
-  }
   if (toIndex === 0) {
+    this.volumes.splice(volIndex, 1);
     this.volumes.unshift(volume);
     this.back = this.volumes[0];
+    this.overlays = this.volumes.slice(1);
+  } else if (toIndex < 0) {
+    this.volumes.splice(this.getVolumeIndexByID(volume.id), 1);
+    this.back = this.volumes[0];
+    if (this.volumes.length > 1) {
+      this.overlays = this.volumes.slice(1);
+    } else {
+      this.overlays = [];
+    }
   } else {
+    this.volumes.splice(volIndex, 1);
     this.volumes.splice(toIndex, 0, volume);
     this.overlays = this.volumes.slice(1);
+    this.back = this.volumes[0];
   }
   this.updateGLVolume();
+  this.volumes.map((v) => {
+    log.debug(v.name);
+  });
+};
+Niivue.prototype.removeVolume = function(volume) {
+  this.setVolume(volume, -1);
 };
 Niivue.prototype.moveVolumeToBottom = function(volume) {
   this.setVolume(volume, 0);
@@ -12991,12 +13022,11 @@ Niivue.prototype.loadVolumes = async function(volumeList) {
       this.loadingText = "loading...";
       this.drawScene();
     } else {
-      this.loadingText = "drag and drop to start";
+      this.loadingText = "waiting for images...";
     }
   });
-  if (!this.initialized) {
-    await this.init();
-  }
+  if (!this.initialized)
+    ;
   this.volumes = [];
   this.gl.clearColor(0, 0, 0, 1);
   this.gl.clear(this.gl.COLOR_BUFFER_BIT);
@@ -13111,65 +13141,12 @@ Niivue.prototype.initText = async function() {
   await this.loadDefaultFont();
   this.drawLoadingText(this.loadingText);
 };
-Niivue.prototype.processImage = function(imageIndex, cmd, isNewLayer = true) {
-  let image = this.volumes[imageIndex].clone();
-  let metadata = image.getImageMetadata();
-  this.worker.postMessage([metadata, image.img.buffer, cmd, isNewLayer]);
-};
-Niivue.prototype.initWasm = async function() {
-  this.worker = WorkerWrapper;
-  this.worker.onmessage = (e) => {
-    const id = e.data.id;
-    let processedImage = this.volumes.find((image) => image.id == id);
-    if (!processedImage) {
-      console.log("image not found");
-      return;
-    }
-    const isNewLayer = e.data.isNewLayer;
-    if (isNewLayer) {
-      processedImage = processedImage.clone();
-      processedImage.id = v4();
-    }
-    let imageBytes = e.data.imageBytes;
-    switch (processedImage.hdr.datatypeCode) {
-      case processedImage.DT_UNSIGNED_CHAR:
-        processedImage.img = new Uint8Array(imageBytes);
-        break;
-      case processedImage.DT_SIGNED_SHORT:
-        processedImage.img = new Int16Array(imageBytes);
-        break;
-      case processedImage.DT_FLOAT:
-        processedImage.img = new Float32Array(imageBytes);
-        break;
-      case processedImage.DT_DOUBLE:
-        throw "datatype " + processedImage.hdr.datatypeCode + " not supported";
-      case processedImage.DT_RGB:
-        processedImage.img = new Uint8Array(imageBytes);
-        break;
-      case processedImage.DT_UINT16:
-        processedImage.img = new Uint16Array(imageBytes);
-        break;
-      case processedImage.DT_RGBA32:
-        processedImage.img = new Uint8Array(imageBytes);
-        break;
-      default:
-        throw "datatype " + processedImage.hdr.datatypeCode + " not supported";
-    }
-    processedImage.trustCalMinMax = false;
-    processedImage.calMinMax();
-    let imageIndex = this.volumes.length;
-    if (isNewLayer) {
-      this.setVolume(processedImage, this.volumes.length);
-    } else {
-      imageIndex = this.volumes.indexOf(processedImage);
-    }
-    this.refreshLayers(processedImage, imageIndex, this.volumes.length);
-    this.drawScene();
-    this.updateGLVolume();
-  };
-};
 Niivue.prototype.init = async function() {
-  await this.initWasm();
+  let rendererInfo = this.gl.getExtension("WEBGL_debug_renderer_info");
+  let vendor = this.gl.getParameter(rendererInfo.UNMASKED_VENDOR_WEBGL);
+  let renderer = this.gl.getParameter(rendererInfo.UNMASKED_RENDERER_WEBGL);
+  log.info("renderer vendor: ", vendor);
+  log.info("renderer: ", renderer);
   this.gl.enable(this.gl.CULL_FACE);
   this.gl.cullFace(this.gl.FRONT);
   this.gl.enable(this.gl.BLEND);
@@ -13445,6 +13422,8 @@ Niivue.prototype.refreshLayers = function(overlayItem, layer, numLayers) {
   this.gl.deleteTexture(blendTexture);
   this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
   this.gl.deleteFramebuffer(fb);
+  this.sliceShader.use(this.gl);
+  this.gl.uniform1f(this.sliceShader.uniforms["overlays"], this.overlays);
   this.renderShader.use(this.gl);
   let slicescl = this.sliceScale();
   let vox = slicescl.vox;
@@ -13597,7 +13576,13 @@ Niivue.prototype.mouseClick = function(x, y, posChange = 0, isDelta = true) {
         this.scene.location$.next({
           mm: this.frac2mm(this.scene.crosshairPos),
           vox: this.frac2vox(this.scene.crosshairPos),
-          frac: this.scene.crosshairPos
+          frac: this.scene.crosshairPos,
+          values: this.volumes.map((v, index) => {
+            let mm = this.frac2mm(this.scene.crosshairPos);
+            let vox = v.mm2vox(mm);
+            let val = v.getValue(...vox);
+            return val;
+          })
         });
         return;
       }
@@ -13617,7 +13602,13 @@ Niivue.prototype.mouseClick = function(x, y, posChange = 0, isDelta = true) {
       this.scene.location$.next({
         mm: this.frac2mm(this.scene.crosshairPos),
         vox: this.frac2vox(this.scene.crosshairPos),
-        frac: this.scene.crosshairPos
+        frac: this.scene.crosshairPos,
+        values: this.volumes.map((v, index) => {
+          let mm = this.frac2mm(this.scene.crosshairPos);
+          let vox = v.mm2vox(mm);
+          let val = v.getValue(...vox);
+          return val;
+        })
       });
       return;
     } else {
@@ -13911,16 +13902,16 @@ Niivue.prototype.draw3D = function() {
   this.sync();
   return posString;
 };
-Niivue.prototype.mm2frac = function(mm) {
+Niivue.prototype.mm2frac = function(mm, volIdx = 0) {
   let mm4 = fromValues(mm[0], mm[1], mm[2], 1);
-  let d = this.back.dims;
+  let d = this.volumes[volIdx].hdr.dims;
   let frac = [0, 0, 0];
   if (typeof d === "undefined") {
     return frac;
   }
   if (d[1] < 1 || d[2] < 1 || d[3] < 1)
     return frac;
-  let sform = clone(this.back.matRAS);
+  let sform = clone(this.volumes[volIdx].matRAS);
   transpose(sform, sform);
   invert(sform, sform);
   transformMat4(mm4, mm4, sform);
@@ -13929,32 +13920,31 @@ Niivue.prototype.mm2frac = function(mm) {
   frac[2] = (mm4[2] + 0.5) / d[3];
   return frac;
 };
-Niivue.prototype.vox2frac = function(vox) {
+Niivue.prototype.vox2frac = function(vox, volIdx = 0) {
   let frac = [
-    (vox[0] + 0.5) / this.back.dims[1],
-    (vox[1] + 0.5) / this.back.dims[2],
-    (vox[2] + 0.5) / this.back.dims[3]
+    (vox[0] + 0.5) / this.volumes[volIdx].hdr.dims[1],
+    (vox[1] + 0.5) / this.volumes[volIdx].hdr.dims[2],
+    (vox[2] + 0.5) / this.volumes[volIdx].hdr.dims[3]
   ];
   return frac;
 };
-Niivue.prototype.frac2vox = function(frac) {
+Niivue.prototype.frac2vox = function(frac, volIdx = 0) {
   let vox = [
-    Math.round(frac[0] * this.back.dims[1] - 0.5),
-    Math.round(frac[1] * this.back.dims[2] - 0.5),
-    Math.round(frac[2] * this.back.dims[3] - 0.5)
+    Math.round(frac[0] * this.volumes[volIdx].hdr.dims[1] - 0.5),
+    Math.round(frac[1] * this.volumes[volIdx].hdr.dims[2] - 0.5),
+    Math.round(frac[2] * this.volumes[volIdx].hdr.dims[3] - 0.5)
   ];
   return vox;
 };
-Niivue.prototype.frac2mm = function(frac) {
+Niivue.prototype.frac2mm = function(frac, volIdx = 0) {
   let pos = fromValues(frac[0], frac[1], frac[2], 1);
-  let dim = fromValues(this.back.dims[1], this.back.dims[2], this.back.dims[3], 1);
-  let sform = clone(this.back.matRAS);
+  let dim = fromValues(this.volumes[volIdx].hdr.dims[1], this.volumes[volIdx].hdr.dims[2], this.volumes[volIdx].hdr.dims[3], 1);
+  let sform = clone(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);
-  this.mm2frac(pos);
   return pos;
 };
 Niivue.prototype.canvasPos2frac = function(canvasPos) {
@@ -14023,7 +14013,7 @@ Niivue.prototype.drawScene = function() {
   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);
   let posString = "";
-  if (!this.back.dims) {
+  if (this.volumes.length === 0 || typeof this.volumes[0].dims === "undefined") {
     this.drawLoadingText(this.loadingText);
     return;
   }