@niivue/niivue 0.44.1 → 0.44.2-dev.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@niivue/niivue",
-  "version": "0.44.1",
+  "version": "0.44.2-dev.2",
   "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,233 @@
+<!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.drawOpacity = 0.4
+          nv1.opts.clickToSegment = true;
+          nv1.setPenValue(penColor, false) // red and filled
+          // hide the crosshair
+          nv1.opts.crosshairWidth = 0;
+          // hide the mouse cursor
+          nv1.canvas.style.cursor = "none";
+        } else {
+          nv1.opts.clickToSegment = false;
+          // show the crosshair
+          nv1.opts.crosshairWidth = 1;
+          // show the mouse cursor
+          nv1.canvas.style.cursor = "default";
+        }
+      }
+      growBtn.onclick = function () {
+        nv1.drawingBinaryDilationWithSeed(
+          nv1.frac2vox(nv1.scene.crosshairPos)
+        )
+      }
+      penColorBtn.onclick = function () {
+        penColor = penColor % 4 + 1;
+        nv1.setPenValue(penColor, false)
+      }
+
+      const onDragRelease = (data) => {
+        // if there is a div with the id dragReleaseDiv, remove it
+        const divToRemove = document.getElementById("dragReleaseDiv");
+        if (divToRemove) {
+          divToRemove.remove();
+        }
+
+        console.log("drag release", data);
+        let obj = nv1.getDescriptives({
+          layer: 0,
+          startVox: data.voxStart,
+          endVox: data.voxEnd,
+          roiIsMask: true,
+        });
+        console.log(obj);
+        // get dpr
+        const dpr = window.devicePixelRatio;
+        // get mouse x,y. Divide by dpr to get the correct position
+        const x = nv1.uiData.dragEnd[0] / dpr;
+        const y = nv1.uiData.dragEnd[1] / dpr;
+        console.log(x, y);
+        const pad = 5;
+        const div = document.createElement("div");
+        // set id for removal on the next pass
+        div.id = "dragReleaseDiv";
+        div.style.color = "red";
+        div.style.position = "absolute";
+        div.style.backgroundColor = "black";
+        div.style.opacity = 0.8;
+        div.style.padding = "5px";
+        // set z-index to be well above the canvas
+        div.style.zIndex = 1000;
+        div.innerHTML = `Mean: ${obj.mean}<br>Area: ${obj.area}<br>Stdev: ${obj.stdev}`;
+        // set position to be at the mouse x,y relative to the canvas
+        div.style.left = x + pad + "px";
+        div.style.top = y + pad + "px";
+        // get the canvas element reference from niivue
+        const canvas = nv1.gl.canvas;
+        // niivue should always be in a container, so get the parent of the canvas
+        const parentDiv = canvas.parentElement;
+        parentDiv.appendChild(div);
+      };
+
+      const onLocationChange = (data) => {
+        // remove the stats div if it exists when the user clicks away 
+        const divToRemove = document.getElementById("dragReleaseDiv");
+        if (divToRemove) {
+          divToRemove.remove();
+        }
+        // console.log(data.string)
+      };
+
+
+      var volumeList1 = [
+        { url: "../demos/images/FLAIR.nii.gz" },
+      ];
+      let clicks = 0;
+      const defaultPercent = 0.02;
+      let defaults = {
+        backColor: [0, 0, 0, 1],
+        show3Dcrosshair: true,
+        loglevel: 'debug',
+        isRuler: true,
+        clickToSegmentRadius: 3, // in mm
+        clickToSegmentPercent: defaultPercent,
+        clickToSegmentAutoIntensity: true,
+        clickToSegmentMaxDistanceMM: 50,
+        clickToSegmentIs2D: true,
+        floodFillNeighbors: 6,
+        penSize: 3, // in voxels, but overridden by clickToSegmentRadius
+        maxDrawUndoBitmaps: 100, // large number for undo
+        onDragRelease: onDragRelease,
+        onLocationChange: onLocationChange,
+        selectionBoxColor: [1, 0, 0, 0.5],
+        dragMode: DRAG_MODE.roiSelection,
+        selectionBoxIsOutline: true,
+        scrollRequiresFocus: false
+      };
+      var nv1 = new Niivue(defaults);
+      nv1.attachToCanvas(gl1);
+      nv1.opts.multiplanarShowRender = SHOW_RENDER.AUTO
+      nv1.setSliceType(0)
+      nv1.setInterpolation(false)
+      await nv1.loadVolumes(volumeList1);
+      equalCheck.onchange()
+
+      // store mouse position
+      const mouse = { x: 0, y: 0 };
+
+      // when the user presses "t" toggle the overlay opacity between 0 and 1
+      document.addEventListener("keydown", (e) => {
+        if (e.key === "t") {
+          if (nv1.volumes.length < 2) {
+            return;
+          }
+          const currentOpacity = nv1.volumes[1].opacity;
+          nv1.setOpacity(1, currentOpacity === 0 ? 0.5 : 0);
+        }
+      });
+    </script>
+  </body>
+</html>