@niivue/niivue 0.12.0 → 0.12.4

package/README.md

@@ -4,6 +4,10 @@ NiiVue is a WebGL 2.0 medical image viewer. This repository contains the **core
 
 The NiiVue package is intented to be used by individuals developing interactive web pages related to showing [nifti](https://nifti.nimh.nih.gov) images. NiiVue includes many mouse and keyboard interactions that enable browsing and manipulating images displayed in the canvas. This core package does not include a comprehensive user interface outside of the canvas (e.g. buttons, and other widgets). However, developers who wish to build custom user interfaces around the NiiVue canvas can manipulate the rendered images and change settings via the API. Our [web-based user interface implementation](https://github.com/niivue/niivue-ui) (under development) will demonstrate how to integrate NiiVue into a more comprehensive [VueJS](https://vuejs.org/) UI.  
 
+# Getting started Docs and References
+
+[click here to go to the docs web page](https://niivue.github.io/niivue/devdocs/)
+
 # Active Projects
 
 [See our active projects here](https://github.com/orgs/niivue/projects)
@@ -34,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.12.0/dist/niivue.js"></script>
+<script src="https://unpkg.com/@niivue/niivue@0.12.4/dist/niivue.umd.js"></script>
 
 <canvas id="gl" height=480 width=640></canvas>
 

package/dist/niivue.es.js

@@ -12283,7 +12283,7 @@ var defaultFontMetrics = {
   glyphs,
   kerning
 };
-const Niivue = function(opts = {}) {
+const Niivue = function(options = {}) {
   this.opts = {};
   this.defaults = {
     textHeight: 0.03,
@@ -12294,12 +12294,11 @@ const Niivue = function(opts = {}) {
     selectionBoxColor: [1, 1, 1, 0.5],
     clipPlaneColor: [1, 1, 1, 0.5],
     colorBarMargin: 0.05,
-    briStep: 1,
-    conStep: 1,
     trustCalMinMax: true,
     clipPlaneHotKey: "KeyC",
     viewModeHotKey: "KeyV",
-    keyDebounceTime: 50
+    keyDebounceTime: 50,
+    isRadiologicalConvention: false
   };
   this.canvas = null;
   this.gl = null;
@@ -12347,7 +12346,6 @@ const Niivue = function(opts = {}) {
   this.volumes = [];
   this.backTexture = [];
   this.objectsToRender3D = [];
-  this.isRadiologicalConvention = false;
   this.volScaleMultiplier = 1;
   this.volScale = [];
   this.vox = [];
@@ -12369,6 +12367,8 @@ const Niivue = function(opts = {}) {
   this.clipPlaneObject3D = null;
   this.intensityRange$ = new Subject();
   this.scene.location$ = new Subject();
+  this.scene.loading$ = new Subject();
+  this.loadingText = "drag and drop to start";
   this.currentClipPlaneIndex = 0;
   this.lastCalled = new Date().getTime();
   this.multiTouchGesture = false;
@@ -12379,10 +12379,11 @@ const Niivue = function(opts = {}) {
   this.DISTANCE_FROM_CAMERA = -0.54;
   this.initialized = false;
   for (let prop in this.defaults) {
-    this.opts[prop] = opts[prop] === void 0 ? this.defaults[prop] : opts[prop];
+    this.opts[prop] = options[prop] === void 0 ? this.defaults[prop] : options[prop];
   }
   this.eventsToSubjects = {
-    location: this.scene.location$
+    location: this.scene.location$,
+    loading: this.scene.loading$
   };
   this.subscriptions = [];
 };
@@ -12733,6 +12734,12 @@ Niivue.prototype.dropListener = async function(e) {
     }
   }
 };
+Niivue.prototype.setRadiologicalConvention = function(isRadiologicalConvention) {
+  this.opts.isRadiologicalConvention = isRadiologicalConvention;
+};
+Niivue.prototype.getRadiologicalConvention = function() {
+  return this.opts.isRadiologicalConvention;
+};
 Niivue.prototype.addVolume = function(volume) {
   if (this.volumes.length > 1) {
     this.overlays.push(volume);
@@ -12823,11 +12830,11 @@ Niivue.prototype.sph2cartDeg = function sph2cartDeg(azimuth, elevation) {
   ret[2] /= len;
   return ret;
 };
-Niivue.prototype.clipPlaneUpdate = function(azimuthElevationDepth) {
+Niivue.prototype.clipPlaneUpdate = function(azimuthElevation) {
   if (this.sliceType != this.sliceTypeRender)
     return;
-  let v = this.sph2cartDeg(azimuthElevationDepth[0], azimuthElevationDepth[1]);
-  this.scene.clipPlane = [v[0], v[1], v[2], azimuthElevationDepth[2]];
+  let v = this.sph2cartDeg(azimuthElevation[0], azimuthElevation[1]);
+  this.scene.clipPlane = [v[0], v[1], v[2], azimuthElevation[2]];
   this.drawScene();
 };
 Niivue.prototype.setCrosshairColor = function(color) {
@@ -12860,6 +12867,7 @@ Niivue.prototype.setScale = function(scale2) {
 };
 Niivue.prototype.setClipPlaneColor = function(color) {
   this.opts.clipPlaneColor = color;
+  this.drawScene();
 };
 Niivue.prototype.overlayRGBA = function(volume) {
   let hdr = volume.hdr;
@@ -12901,14 +12909,24 @@ Niivue.prototype.cloneVolume = function(index) {
   return this.volumes[index].clone();
 };
 Niivue.prototype.loadVolumes = async function(volumeList) {
+  this.on("loading", (isLoading) => {
+    if (isLoading) {
+      this.loadingText = "loading...";
+      this.drawScene();
+    } else {
+      this.loadingText = "drag and drop to start";
+    }
+  });
   if (!this.initialized) {
     await this.init();
   }
   this.volumes = [];
   this.gl.clearColor(0, 0, 0, 1);
   this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+  this.scene.loading$.next(true);
   for (let i = 0; i < volumeList.length; i++) {
     let volume = await NVImage.loadFromUrl(volumeList[i].url, volumeList[i].name, volumeList[i].colorMap, volumeList[i].opacity, this.opts.trustCalMinMax);
+    this.scene.loading$.next(false);
     this.volumes.push(volume);
     if (i === 0) {
       this.back = volume;
@@ -13014,7 +13032,7 @@ Niivue.prototype.initText = async function() {
   this.fontShader = new Shader(this.gl, vertFontShader, fragFontShader);
   this.fontShader.use(this.gl);
   await this.loadDefaultFont();
-  this.drawLoadingText("drag and drop");
+  this.drawLoadingText(this.loadingText);
 };
 Niivue.prototype.init = async function() {
   this.gl.enable(this.gl.CULL_FACE);
@@ -13309,6 +13327,11 @@ Niivue.prototype.colorMaps = function(sort = true) {
   }
   return sort === true ? cm.sort() : cm;
 };
+Niivue.prototype.setColorMap = function(id, colorMap) {
+  let idx = this.getVolumeIndexByID(id);
+  this.volumes[idx].colorMap = colorMap;
+  this.updateGLVolume();
+};
 Niivue.prototype.colormapFromKey = function(name) {
   let availMaps = this.colorMaps();
   for (let i = 0; i < availMaps.length; i++) {
@@ -13572,7 +13595,7 @@ Niivue.prototype.draw2D = function(leftTopWidthHeight, axCorSag) {
       this.scene.crosshairPos[2],
       this.scene.crosshairPos[0]
     ];
-  let isMirrorLR = this.isRadiologicalConvention && axCorSag < this.sliceTypeSagittal;
+  let isMirrorLR = 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);
@@ -13866,11 +13889,7 @@ Niivue.prototype.drawScene = function() {
   this.gl.clear(this.gl.COLOR_BUFFER_BIT);
   let posString = "";
   if (!this.back.dims) {
-    if (this.volumes && this.volumes.length > 0) {
-      this.drawLoadingText("loading");
-    } else {
-      this.drawLoadingText("drag and drop a file to start");
-    }
+    this.drawLoadingText(this.loadingText);
     return;
   }
   if (this.sliceType === this.sliceTypeRender)