@niivue/niivue 0.12.2 → 0.13.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@niivue/niivue",
-  "version": "0.12.2",
+  "version": "0.13.2",
   "description": "minimal webgl2 nifti image viewer",
   "main": "./src/niivue.js",
   "unpkg": "./dist/niivue.umd.js",
@@ -12,7 +12,7 @@
     "demo-win": "npm run build-win && npx http-server demos/",
     "copy-test": "cp ./dist/niivue.umd.js ./tests/niivue.umd.js",
     "copy-test-win": "copy .\\dist\\niivue.umd.js .\\tests\\niivue.umd.js",
-    "copy-demo": "cp ./dist/niivue.umd.js ./demos/niivue.umd.js",
+    "copy-demo": "cp -r ./dist/* ./demos/",
     "copy-demo-win": "copy .\\dist\\niivue.umd.js .\\demos\\niivue.umd.js",
     "test": "npm run build && jest --maxWorkers=1",
     "test-win": "npm run build-win && jest --maxWorkers=1",
@@ -42,22 +42,22 @@
   },
   "homepage": "https://github.com/niivue/niivue#readme",
   "dependencies": {
-    "gl-matrix": "^3.3.0",
+    "gl-matrix": "^3.4.3",
     "nifti-reader-js": "^0.5.4",
-    "rxjs": "^7.1.0",
+    "rxjs": "^7.4.0",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
-    "clean-jsdoc-theme": "^3.2.10",
-    "eslint": "^8.2.0",
+    "clean-jsdoc-theme": "^3.3.1",
+    "eslint": "^8.4.1",
     "express": "^4.17.1",
-    "http-server": "^0.12.3",
-    "jest": "^27.0.6",
+    "http-server": "^14.0.0",
+    "jest": "^27.4.4",
     "jest-image-snapshot": "^4.5.1",
-    "jest-puppeteer": "^5.0.4",
+    "jest-puppeteer": "^6.0.2",
     "jsdoc": "^3.6.7",
-    "prettier": "^2.3.2",
+    "prettier": "^2.5.1",
     "puppeteer": "^9.1.1",
-    "vite": "^2.6.14"
+    "vite": "^2.7.1"
   }
 }

package/src/heap-verifier.js

@@ -0,0 +1,51 @@
+let granule_size = 8;
+let bits_per_byte = 8;
+let bits_per_byte_log2 = 3;
+
+function assert(c, msg) {
+  if (!c) throw new Error(msg);
+}
+function power_of_two(x) {
+  return x && (x & (x - 1)) == 0;
+}
+function assert_power_of_two(x) {
+  assert(power_of_two(x), `not power of two: ${x}`);
+}
+function aligned(x, y) {
+  assert_power_of_two(y);
+  return (x & (y - 1)) == 0;
+}
+
+function assert_aligned(x, y) {
+  assert(aligned(x, y), `bad alignment: ${x} % ${y}`);
+}
+
+export class HeapVerifier {
+  constructor(maxbytes) {
+    this.maxwords = maxbytes / granule_size;
+    this.state = new Uint8Array(this.maxwords / bits_per_byte);
+    this.allocations = new Map();
+  }
+  acquire(offset, len) {
+    assert_aligned(offset, granule_size);
+    for (let i = 0; i < len; i += granule_size) {
+      let bit = (offset + i) / granule_size;
+      let byte = bit >> bits_per_byte_log2;
+      let mask = 1 << (bit & (bits_per_byte - 1));
+      assert((this.state[byte] & mask) == 0, "word in use");
+      this.state[byte] |= mask;
+    }
+    this.allocations.set(offset, len);
+  }
+  release(offset) {
+    assert(this.allocations.has(offset));
+    let len = this.allocations.get(offset);
+    this.allocations.delete(offset);
+    for (let i = 0; i < len; i += granule_size) {
+      let bit = (offset + i) / granule_size;
+      let byte = bit >> bits_per_byte_log2;
+      let mask = 1 << (bit & (bits_per_byte - 1));
+      this.state[byte] &= ~mask;
+    }
+  }
+}

package/src/index.html

@@ -51,19 +51,19 @@
     <!-- <script type="module" src="./index.js">
     </script> -->
     <script type="module">
-      import {Niivue} from './niivue.js'
+      import { Niivue } from './niivue.js'
       // console.log(Niivue)
       var volumeList1 = [
         // first item is brackground image
         {
-          // url: "./mni152.nii.gz",//"./images/RAS.nii.gz", "./images/spm152.nii.gz",
-          url: "https://openneuro.org/crn/datasets/ds002328/snapshots/1.0.0/files/sub-01:anat:sub-01_T1w.nii.gz",
+          url: "./mni152.nii.gz",//"./images/RAS.nii.gz", "./images/spm152.nii.gz",
           colorMap: "gray",
           opacity: 1,
           visible: true,
         }
       ]
       var nv1 = new Niivue()
+      nv1.setRadiologicalConvention(false)
       nv1.attachTo('gl1')
       nv1.loadVolumes(volumeList1)
       nv1.setSliceType(nv1.sliceTypeMultiplanar)

package/src/linear-memory.js

@@ -0,0 +1,33 @@
+import { HeapVerifier } from "./heap-verifier";
+
+export class LinearMemory {
+  constructor({ initial = 2048, maximum = 2048 }) {
+    this.memory = new WebAssembly.Memory({ initial, maximum });
+    this.verifier = new HeapVerifier(maximum * 65536);
+  }
+  record_malloc(ptr, len) {
+    this.verifier.acquire(ptr, len);
+  }
+  record_free(ptr) {
+    this.verifier.release(ptr);
+  }
+  read_string(offset) {
+    let view = new Uint8Array(this.memory.buffer);
+    let bytes = [];
+    for (let byte = view[offset]; byte; byte = view[++offset]) bytes.push(byte);
+    return String.fromCharCode(...bytes);
+  }
+  log(str) {
+    console.log(`wasm log: ${str}`);
+  }
+  log_i(str, i) {
+    console.log(`wasm log: ${str}: ${i}`);
+  }
+  env() {
+    return {
+      memory: this.memory,
+      wasm_log: (off) => this.log(this.read_string(off)),
+      wasm_log_i: (off, i) => this.log_i(this.read_string(off), i),
+    };
+  }
+}

package/src/niivue.js

@@ -29,7 +29,17 @@ import { NVImage } from "./nvimage.js";
 export { NVImage } from "./nvimage";
 import defaultFontPNG from "./fonts/Roboto-Regular.png";
 import defaultFontMetrics from "./fonts/Roboto-Regular.json";
-
+// import createModule from "./process-image";
+// import init from "./process-image.wasm";
+// import { LinearMemory } from "./linear-memory.js";
+// import workerString from "./worker.js?raw";
+// const workerBlob = new Blob([workerString], { type: "text/javascript" });
+// const workerURL = URL.createObjectURL(workerBlob);
+// const worker = new Worker(workerURL, { type: "classic" });
+import NiiMathWorker from "./worker?worker";
+import { v4 as uuidv4 } from "uuid";
+
+var Module;
 /**
  * @class Niivue
  * @description
@@ -49,6 +59,7 @@ import defaultFontMetrics from "./fonts/Roboto-Regular.json";
  * @param {string} [options.clipPlaneHotKey="KeyC"] the keyboard key used to cycle through clip plane orientations. The default is "c"
  * @param {string} [options.viewModeHotKey="KeyV"] the keyboard key used to cycle through view modes. The default is "v"
  * @param {number} [options.keyDebounceTime=50] the keyUp debounce time in milliseconds. The default is 50 ms. You must wait this long before a new hot-key keystroke will be registered by the event listener
+ * @param {boolean} [options.isRadiologicalConvention=false] whether or not to use radiological convention in the display
  * @example
  * let niivue = new Niivue({crosshairColor: [0,1,0,0.5], textHeight: 0.5}) // a see-through green crosshair, and larger text labels
  */
@@ -67,6 +78,7 @@ export const Niivue = function (options = {}) {
     clipPlaneHotKey: "KeyC", // keyboard short cut to activate the clip plane
     viewModeHotKey: "KeyV", // keyboard shortcut to switch view modes
     keyDebounceTime: 50, // default debounce time used in keyup listeners
+    isRadiologicalConvention: false,
   };
 
   this.canvas = null; // the canvas element on the page
@@ -117,7 +129,6 @@ export const Niivue = function (options = {}) {
   this.volumes = []; // all loaded images. Can add in the ability to push or slice as needed
   this.backTexture = [];
   this.objectsToRender3D = [];
-  this.isRadiologicalConvention = false;
   this.volScaleMultiplier = 1;
   this.volScale = [];
   this.vox = [];
@@ -205,7 +216,6 @@ Niivue.prototype.attachTo = async function (id) {
 Niivue.prototype.on = function (event, callback) {
   let knownEvents = Object.keys(this.eventsToSubjects);
   if (knownEvents.indexOf(event) == -1) {
-    console.log(`there is no known event ${event}`);
     return;
   }
   let subject = this.eventsToSubjects[event];
@@ -225,7 +235,6 @@ Niivue.prototype.on = function (event, callback) {
 Niivue.prototype.off = function (event) {
   let knownEvents = Object.keys(this.eventsToSubjects);
   if (knownEvents.indexOf(event) == -1) {
-    console.log(`there is no known event ${event}`);
     return;
   }
   let nsubs = this.subscriptions.length;
@@ -779,6 +788,16 @@ Niivue.prototype.dropListener = async function (e) {
   }
 };
 
+Niivue.prototype.setRadiologicalConvention = function (
+  isRadiologicalConvention
+) {
+  this.opts.isRadiologicalConvention = isRadiologicalConvention;
+};
+
+Niivue.prototype.getRadiologicalConvention = function () {
+  return this.opts.isRadiologicalConvention;
+};
+
 /**
  * add a new volume to the canvas
  * @param {NVImage} volume the new volume to add to the canvas
@@ -1343,6 +1362,73 @@ Niivue.prototype.initText = async function () {
   this.drawLoadingText(this.loadingText);
 }; // initText()
 
+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 = new NiiMathWorker();
+  this.worker.onmessage = (e) => {
+    // find our processed image
+    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 = uuidv4();
+    }
+
+    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";
+    }
+
+    // recalculate
+    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();
+  };
+};
+
 // not included in public docs
 Niivue.prototype.init = async function () {
   //initial setup: only at the startup of the component
@@ -1353,6 +1439,8 @@ Niivue.prototype.init = async function () {
   // console.log("gpu vendor: ", vendor);
   // console.log("gpu renderer: ", renderer);
   // await this.loadFont()
+  await this.initWasm();
+
   this.gl.enable(this.gl.CULL_FACE);
   this.gl.cullFace(this.gl.FRONT);
   this.gl.enable(this.gl.BLEND);
@@ -1941,6 +2029,20 @@ Niivue.prototype.colorMaps = function (sort = true) {
   return sort === true ? cm.sort() : cm;
 };
 
+/**
+ * update the colormap of an image given its ID
+ * @param {string} id the ID of the NVImage
+ * @param {string} colorMap the name of the colorMap to use
+ * @example
+ * niivue = new Niivue()
+ * niivue.setColorMap(someImage.id, 'red')
+ */
+Niivue.prototype.setColorMap = function (id, colorMap) {
+  let idx = this.getVolumeIndexByID(id);
+  this.volumes[idx].colorMap = colorMap;
+  this.updateGLVolume();
+};
+
 // not included in public docs
 Niivue.prototype.colormapFromKey = function (name) {
   let availMaps = this.colorMaps();
@@ -2342,7 +2444,7 @@ Niivue.prototype.draw2D = function (leftTopWidthHeight, axCorSag) {
       this.scene.crosshairPos[0],
     ]; //sagittal: width=j, height=k, slice=i
   let isMirrorLR =
-    this.isRadiologicalConvention && axCorSag < this.sliceTypeSagittal;
+    this.opts.isRadiologicalConvention && axCorSag < this.sliceTypeSagittal;
   this.sliceShader.use(this.gl);
   this.gl.uniform1f(this.sliceShader.uniforms["opacity"], this.backOpacity);
   this.gl.uniform1i(this.sliceShader.uniforms["axCorSag"], axCorSag);

package/src/nvimage.js

@@ -535,6 +535,7 @@ NVImage.loadFromFile = async function (
  */
 NVImage.prototype.clone = function () {
   let clonedImage = new NVImage();
+  clonedImage.id = this.id;
   clonedImage.hdr = Object.assign({}, this.hdr);
   clonedImage.img = this.img.slice();
   clonedImage.calculateRAS();
@@ -552,6 +553,55 @@ NVImage.prototype.zeroImage = function () {
   this.img.fill(0);
 };
 
+/**
+ * Image M.
+ * @typedef {Object} NVImage~MetaData
+ * @property {uuidv4} id - unique if of image
+ * @property {number} datatypeCode - data type
+ * @property {number} nx - number of columns
+ * @property {number} ny - number of rows
+ * @property {number} nz - number of slices
+ * @property {number} nt - number of volumes
+ * @property {number} dx - space between columns
+ * @property {number} dy - space between rows
+ * @property {number} dz - space between slices
+ * @property {number} dt - time between volumes
+ * @property {number} bpx - bits per voxel
+ */
+
+/**
+ * get nifti specific metadata about the image
+ * @returns {NVImage~Metadata} - {@link NVImage~Metadata}
+ */
+NVImage.prototype.getImageMetadata = function () {
+  const id = this.id;
+  const datatypeCode = this.hdr.datatypeCode;
+  const dims = this.hdr.dims;
+  const nx = dims[1];
+  const ny = dims[2];
+  const nz = dims[3];
+  const nt = Math.max(1, dims[4]);
+  const pixDims = this.hdr.pixDims;
+  const dx = pixDims[1];
+  const dy = pixDims[2];
+  const dz = pixDims[3];
+  const dt = pixDims[4];
+  const bpv = Math.floor(this.hdr.numBitsPerVoxel / 8);
+
+  return {
+    id,
+    datatypeCode,
+    nx,
+    ny,
+    nz,
+    nt,
+    dx,
+    dy,
+    dz,
+    dt,
+    bpv,
+  };
+};
 /**
  * a factory function to make a zero filled image given a NVImage as a reference
  * @param {NVImage} nvImage an existing NVImage as a reference
@@ -565,3 +615,12 @@ NVImage.zerosLike = function (nvImage) {
   zeroClone.zeroImage();
   return zeroClone;
 };
+
+String.prototype.getBytes = function () {
+  let bytes = [];
+  for (var i = 0; i < this.length; i++) {
+    bytes.push(this.charCodeAt(i));
+  }
+
+  return bytes;
+};