@niivue/niivue 0.44.0 → 0.44.2-dev.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@niivue/niivue",
-  "version": "0.44.0",
+  "version": "0.44.2-dev.1",
   "description": "minimal webgl2 nifti image viewer",
   "types": "./build/index.d.ts",
   "main": "./build/index.js",
@@ -72,31 +72,32 @@
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
-    "@playwright/test": "^1.42.1",
-    "@rollup/plugin-commonjs": "^25.0.7",
+    "@playwright/test": "^1.45.2",
+    "@rollup/plugin-commonjs": "^26.0.1",
     "@types/array-equal": "^1.0.2",
-    "@types/node": "^20.12.2",
+    "@types/node": "^20.14.11",
     "@types/ungap__structured-clone": "^1.2.0",
-    "@typescript-eslint/eslint-plugin": "^7.5.0",
-    "@typescript-eslint/parser": "^7.5.0",
-    "@vitest/coverage-v8": "^1.4.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.1",
+    "@typescript-eslint/parser": "^7.16.1",
+    "@vitest/coverage-v8": "^2.0.3",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-tsdoc": "^0.2.17",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-tsdoc": "^0.3.0",
     "express": "^4.19.2",
-    "happy-dom": "^14.3.10",
+    "happy-dom": "^14.12.3",
     "http-server": "^14.1.1",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.3",
     "regenerator-runtime": "^0.14.1",
-    "tsup": "^8.0.2",
-    "typedoc": "^0.25.12",
-    "typescript": "^5.4.3",
-    "vite": "^5.2.7",
-    "vitest": "^1.4.0"
+    "terser": "^5.31.3",
+    "tsup": "^8.1.2",
+    "typedoc": "^0.26.4",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.4",
+    "vitest": "^2.0.3"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.13.2"
+    "@rollup/rollup-linux-x64-gnu": "^4.18.1"
   }
 }

package/src/index.html

@@ -58,7 +58,30 @@
         class="slider"
         id="fiberCalMin"
       />
-      <button id="about">About</button>
+      <label for="layoutSelect">Layout</label>
+      <select id="layoutSelect">
+        <option value="0" selected>Auto</option>
+        <option value="1">Column</option>
+        <option value="2">Grid</option>
+        <option value="3">Row</option>
+      </select>
+      <label for="renderingSelect">MultiplanarRendering</label>
+      <select id="renderingSelect">
+        <option value="0">Never</option>
+        <option value="1">Always</option>
+        <option value="2" selected>Auto</option>
+      </select>
+      <select id="sliceType">
+        <option value="0">Axial</option>
+        <option value="1">Coronal</option>
+        <option value="2">Sagittal</option>
+        <option value="4">Render</option>
+        <option value="3" selected>Multiplanar</option>
+      </select>
+      <label for="equalCheck">EqualSize</label>
+      <input type="checkbox" id="equalCheck" checked />
+      <label for="cornerCheck">CornerText</label>
+      <input type="checkbox" id="cornerCheck" unchecked />
     </header>
     <main id="canvas-container">
       <canvas id="gl1"></canvas>
@@ -107,16 +130,31 @@
         nv1.meshes[0].dpv[0].cal_min = this.value * 1; //*1 converts string to number
         nv1.setMeshProperty(nv1.meshes[0].id, "colormap", fiberColormap.value);
       };
-      about.onclick = function () {
-        window.alert(
-          "The `Per Vertex` colors visualize a tsf format overlay created with tcksample",
-        );
-      };
+      layoutSelect.onchange = function () {
+        nv1.setMultiplanarLayout(Number(this.value));
+      }
+      renderingSelect.onchange = function () {
+        nv1.opts.multiplanarShowRender =  Number(this.value);
+        nv1.drawScene();
+      }
+      equalCheck.onchange = function () {
+        nv1.opts.multiplanarEqualSize = this.checked
+        nv1.drawScene()
+      }
+      cornerCheck.onchange = function () {
+        //nv1.opts.isCornerOrientationText = this.checked\
+        nv1.setCornerOrientationText(this.checked)
+      }
+      sliceType.onchange = function () {
+        let st = parseInt(document.getElementById("sliceType").value);
+        nv1.setSliceType(st)
+      }
       var volumeList1 = [{ url: "../demos/images/mni152.nii.gz" }];
       let defaults = {
         backColor: [0, 0, 0, 1],
         show3Dcrosshair: true,
-        loglevel: 'debug'
+        loglevel: 'debug',
+        isRuler: true
       };
       var nv1 = new Niivue(defaults);
       nv1.attachToCanvas(gl1);
@@ -152,6 +190,7 @@
         };
         cmapEl.appendChild(btn);
       }
+      equalCheck.onchange()
     </script>
   </body>
 </html>

package/src/index_segment.html

@@ -0,0 +1,165 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>NiiVue</title>
+    <link rel="stylesheet" href="niivue.css" />
+    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
+  </head>
+  <body>
+    <noscript>
+      <strong>niivue requires JavaScript.</strong>
+    </noscript>
+    <header>
+      <button id="openBtn">Choose an image or mesh with a dialog</button>
+      <label for="layoutSelect">Layout</label>
+      <select id="layoutSelect">
+        <option value="0" selected>Auto</option>
+        <option value="1">Column</option>
+        <option value="2">Grid</option>
+        <option value="3">Row</option>
+      </select>
+      <label for="renderingSelect">MultiplanarRendering</label>
+      <select id="renderingSelect">
+        <option value="0">Never</option>
+        <option value="1">Always</option>
+        <option value="2" selected>Auto</option>
+      </select>
+      <select id="sliceType">
+        <option value="0">Axial</option>
+        <option value="1">Coronal</option>
+        <option value="2">Sagittal</option>
+        <option value="4">Render</option>
+        <option value="3" selected>Multiplanar</option>
+      </select>
+      <label for="equalCheck">EqualSize</label>
+      <input type="checkbox" id="equalCheck" checked />
+      <label for="cornerCheck">CornerText</label>
+      <input type="checkbox" id="cornerCheck" unchecked />
+      <!-- undo button for drawing -->
+      <button id="undoBtn">Undo</button>
+      <!-- draw toggle button -->
+      <button id="drawBtn">Draw</button>
+      <!-- grow button -->
+      <button id="growBtn">Grow</button>
+      <!-- pen color button cycler -->
+      <button id="penColorBtn">Pen color</button>
+    </header>
+    <main id="canvas-container">
+      <canvas id="gl1"></canvas>
+    </main>
+    
+    <script type="module" async>
+      import {
+        Niivue,
+        NVImage,
+        NVMesh,
+        NVMeshLoaders,
+        SHOW_RENDER,
+        DRAG_MODE
+      } from "./niivue/index.ts";
+      async function addVolumeFromFiles(f) {
+        console.log("attempting to open ", f[0].name);
+        console.log("details", f[0]);
+        nv1.loadFromFile(f[0]);
+      }
+      openBtn.onclick = function () {
+        let input = document.createElement("input");
+        input.style.display = "none";
+        input.type = "file";
+        document.body.appendChild(input);
+        input.onchange = function (event) {
+          addVolumeFromFiles(event.target.files);
+        };
+        input.click();
+      };
+
+      // pen colors can be 1, 2, 3, 4
+      let penColor = 1;
+      
+      layoutSelect.onchange = function () {
+        nv1.setMultiplanarLayout(Number(this.value));
+      }
+      renderingSelect.onchange = function () {
+        nv1.opts.multiplanarShowRender =  Number(this.value);
+        nv1.drawScene();
+      }
+      equalCheck.onchange = function () {
+        nv1.opts.multiplanarEqualSize = this.checked
+        nv1.drawScene()
+      }
+      cornerCheck.onchange = function () {
+        //nv1.opts.isCornerOrientationText = this.checked\
+        nv1.setCornerOrientationText(this.checked)
+      }
+      sliceType.onchange = function () {
+        let st = parseInt(document.getElementById("sliceType").value);
+        nv1.setSliceType(st)
+      }
+      undoBtn.onclick = function () {
+        nv1.drawUndo()
+      }
+      drawBtn.onclick = function () {
+        nv1.setDrawingEnabled(!nv1.opts.drawingEnabled)
+        if (nv1.opts.drawingEnabled) {
+          nv1.opts.clickToSegment = true;
+          nv1.setPenValue(penColor, false) // red and filled
+        } else {
+          nv1.opts.clickToSegment = false;
+        }
+      }
+      growBtn.onclick = function () {
+        nv1.drawingBinaryDilationWithSeed(
+          nv1.frac2vox(nv1.scene.crosshairPos)
+        )
+      }
+      penColorBtn.onclick = function () {
+        penColor = penColor % 4 + 1;
+        nv1.setPenValue(penColor, false)
+      }
+
+      const onDragRelease = (data) => {
+        console.log("drag release", data);
+        let obj = nv1.getDescriptives({
+          layer: 0,
+          startVox: data.voxStart,
+          endVox: data.voxEnd,
+          roiIsMask: true,
+        });
+        console.log(obj);
+      };
+
+      var volumeList1 = [{ url: "../demos/images/FLAIR.nii.gz" }];
+      let defaults = {
+        backColor: [0, 0, 0, 1],
+        show3Dcrosshair: true,
+        loglevel: 'debug',
+        isRuler: true,
+        clickToSegmentRadius: 3, // in mm
+        clickToSegmentPercent: 0.2,
+        clickToSegmentAutoIntensity: true,
+        clickToSegmentMaxDistanceMM: 10,
+        penSize: 3, // in voxels, but overridden by clickToSegmentRadius
+        maxDrawUndoBitmaps: 30,
+        onDragRelease: onDragRelease,
+        selectionBoxColor: [1, 0, 0, 0.5],
+        dragMode: DRAG_MODE.roiSelection,
+        selectionBoxIsOutline: true
+      };
+      var nv1 = new Niivue(defaults);
+      nv1.attachToCanvas(gl1);
+      // multiplanarShowRender is the preferred option now, 
+      // but multiplanarForceRender is still available for backwards compatibility
+      // previous use was: nv1.opts.multiplanarForceRender = true;
+      nv1.opts.multiplanarShowRender = SHOW_RENDER.AUTO
+      await nv1.loadVolumes(volumeList1);
+      equalCheck.onchange()
+
+      // set drawing enabled
+      // nv1.setDrawingEnabled(true);
+      // nv1.setPenValue(1, true) // red and filled
+    </script>
+  </body>
+</html>

package/src/index_sync.html

@@ -0,0 +1,289 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>Bidirectional Sync</title>
+<style>
+  html {
+    height: auto;
+    min-height: 100%;
+    margin: 0;
+  }
+  body {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    min-height: 100%;
+    width: 100%;
+    position: absolute;
+    font-family: system-ui, Arial, Helvetica, sans-serif;
+    user-select: none; /* Standard syntax */
+    color: white;
+    background: #202020;
+  }
+  header {
+    margin: 10px;
+  }
+  footer {
+    margin: 5px;
+  }
+  .page-wrapper {
+    margin: 2px;
+  }
+  .row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 100%;
+    min-height: 100%;
+    margin: 2px;
+  }
+  .column {
+    display: flex;
+    flex-direction: column;
+    flex-basis: 100%;
+    flex: 1;
+    background: #404040;
+  }
+  canvas:focus {
+    outline: red 1px solid;
+  }
+</style>
+  </head>
+  <body>
+    <noscript>niivue requires JavaScript.</noscript>
+    <header>
+      <label for="layout">Layout</label>
+      <select id="layout">
+        <option value="0" selected>Auto</option>
+        <option value="1">Column</option>
+        <option value="2">Grid</option>
+        <option value="3">Row</option>
+      </select>
+      <label for="canvasHeight">Height</label>
+      <select id="canvasHeight">
+        <option value="256">256</option>
+        <option value="640" selected>512</option>
+        <option value="768">768</option>
+      </select>
+      <label for="syncDrop"> Broadcast</label>
+      <select id="syncDrop">
+        <option value="0">Sync Disabled</option>
+        <option value="1">Sync 2D</option>
+        <option value="2">Sync 3D</option>
+        <option value="3" selected>Sync 2D and 3D</option>
+      </select>
+      <!-- slider for gamma -->
+      <label for="gammaSlider">Gamma</label>
+      <input
+      type="range"
+      min="10"
+      max="400"
+      value="100"
+      class="slider"
+      id="gammaSlider"
+    />
+    <!-- sliceType select -->
+    <label for="sliceType">Slice Type</label>
+    <select id="sliceType">
+      <option value="0">Axial</option>
+      <option value="1">Coronal</option>
+      <option value="2">Sagittal</option>
+      <option value="3" selected>Multi</option>
+    </select>
+    
+    <!-- slider for cal_min -->
+    <label for="calMin">min</label>
+    <input
+      type="range"
+      min="0"
+      max="100"
+      value="0"
+      class="slider"
+      id="calMin"
+    />
+    <!-- slider for cal_max -->
+    <label for="calMax">max</label>
+    <input
+      type="range"
+      min="0"
+      max="100"
+      value="100"
+      class="slider"
+      id="calMax"
+    />
+    </header>
+    <main>
+      <div class='page-wrapper'>
+        <div class='row'>
+          <div class='column'>
+            <div>
+              <canvas id="gl1" height="512">
+            </div>
+          </div>
+          <div class='column'>
+            <div>
+              <canvas id="gl2" height="512">
+            </div>
+          </div>
+          <div class='column'>
+            <div>
+              <canvas id="gl3" height="512">
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+    <footer>
+      <x id="intensity"> &nbsp;</x>
+      <x id="intensity2"> &nbsp;</x>
+      <x id="intensity3"> &nbsp;</x>
+    </footer>
+    <script type="module" async>
+      import {
+        Niivue,
+        NVImage,
+        NVMesh,
+        NVMeshLoaders,
+        SHOW_RENDER
+      } from "./niivue/index.ts";
+      layout.onchange = function () {
+        nv1.setMultiplanarLayout(parseInt(this.value));
+        nv2.setMultiplanarLayout(parseInt(this.value));
+        nv3.setMultiplanarLayout(parseInt(this.value));
+      }
+      canvasHeight.onchange = function () {
+        gl1.height = this.value;
+        gl2.height = this.value;
+        gl3.height = this.value;
+        nv1.resizeListener();
+        nv2.resizeListener();
+        nv3.resizeListener();
+      }
+
+      gammaSlider.onchange = function() {
+        const v = parseFloat(gammaSlider.value) * 0.01
+        nv1.setGamma(v)
+        nv1.gl.canvas.focus()
+        nv1.sync()
+        nv1.gl.canvas.blur()
+      }
+
+      syncDrop.onchange = function() {
+        const v = parseInt(syncDrop.value)
+        let is2D = false
+        let is3D = false
+        if (v % 2) {
+            is2D = true
+        }
+        if (v > 1) {
+            is3D = true
+        }
+        nv1.broadcastTo([nv2, nv3], { "2d": is2D, "3d": is3D })
+        nv2.broadcastTo([nv1, nv3], { "2d": is2D, "3d": is3D })
+        nv3.broadcastTo([nv1, nv2], { "2d": is2D, "3d": is3D })
+      }
+
+      calMin.onchange = function() {
+        const v = parseFloat(calMin.value)
+        nv2.volumes[0].cal_min = v
+        // set focus to the canvas
+        nv2.gl.canvas.focus()
+        nv2.updateGLVolume()
+        // remove focus from the canvas
+        nv2.gl.canvas.blur()
+      }
+
+      calMax.onchange = function() {
+        const v = parseFloat(calMax.value)
+        nv2.volumes[0].cal_max = v
+        // set focus to the canvas
+        nv2.gl.canvas.focus()
+        nv2.updateGLVolume()
+        // remove focus from the canvas
+        nv2.gl.canvas.blur()
+      }
+
+      sliceType.onchange = function() {
+        const v = parseInt(sliceType.value)
+        nv1.setSliceType(v)
+        nv2.setSliceType(v)
+        nv3.setSliceType(v)
+      }
+
+      function handleIntensityChange(data) {
+        document.getElementById("intensity").innerHTML =
+          "&nbsp;&nbsp;" + data.string;
+      }
+      function handleIntensityChange2(data) {
+        document.getElementById("intensity2").innerHTML =
+          "&nbsp;&nbsp;" + data.string;
+      }
+      function handleIntensityChange3(data) {
+        document.getElementById("intensity3").innerHTML =
+          "&nbsp;&nbsp;" + data.string;
+      }
+      var nv1 = new Niivue({
+        show3Dcrosshair: true,
+        onLocationChange: handleIntensityChange,
+        backColor: [1, 1, 1, 1],
+        // dragMode: 3,
+        sliceType: 3,
+        multiplanarShowRender: SHOW_RENDER.ALWAYS
+      });
+      nv1.attachTo("gl1");
+      var volumeList1 = [{ url: "../demos/images/pcasl.nii.gz" }];
+      await nv1.loadVolumes(volumeList1);
+      var nv2 = new Niivue({
+        show3Dcrosshair: true,
+        onLocationChange: handleIntensityChange2,
+        backColor: [1, 1, 1, 1],
+        // dragMode: 3,
+        sliceType: 3,
+        multiplanarShowRender: SHOW_RENDER.ALWAYS
+      });
+      nv2.attachTo("gl2");
+      var nv3 = new Niivue({
+        show3Dcrosshair: true,
+        onLocationChange: handleIntensityChange3,
+        backColor: [1, 1, 1, 1],
+        // dragMode: 0,
+        sliceType: 3,
+        multiplanarShowRender: SHOW_RENDER.ALWAYS
+      });
+      nv3.attachTo("gl3");
+      var volumeList2 = [{ url: "../demos/images/mni152.nii.gz" }];
+      var volumeList3 = [{ url: "../demos/images/mni152.nii.gz" }];
+      await nv2.loadVolumes(volumeList2);
+      // once the volumes are loaded for nv2, set the min and max values for 
+      // the calMin and calMax sliders to the min and max values of the volume
+      calMin.min = nv2.volumes[0].global_min
+      calMin.max = nv2.volumes[0].global_max
+      calMin.value = nv2.volumes[0].cal_min
+      calMax.min = nv2.volumes[0].global_min
+      calMax.max = nv2.volumes[0].global_max
+      calMax.value = nv2.volumes[0].cal_max
+
+      await nv3.loadVolumes(volumeList3);
+      const syncOpts = {
+        // "2d": true, // legacy option
+        // "3d": true, // legacy option
+        // new options allowing more fine-grained control below.
+        crosshair: true,
+        zoomPan: true,
+        gamma: true,
+        sliceType: true,
+        clipPlane: true,
+        cal_min: false,
+        cal_max: false,
+      }
+      // make sure all views can control each other
+      nv1.broadcastTo([nv2, nv3], syncOpts);
+      nv2.broadcastTo([nv1, nv3], syncOpts);
+      nv3.broadcastTo([nv1, nv2], syncOpts);
+
+    </script>
+  </body>
+</html>