@niivue/niivue 0.44.2-dev.1 → 0.44.2-dev.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@niivue/niivue",
-  "version": "0.44.2-dev.1",
+  "version": "0.44.2-dev.2",
   "description": "minimal webgl2 nifti image viewer",
   "types": "./build/index.d.ts",
   "main": "./build/index.js",

package/src/index_segment.html

@@ -104,10 +104,19 @@
       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 () {
@@ -121,6 +130,12 @@
       }
 
       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,
@@ -129,37 +144,90 @@
           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" }];
+
+      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: 0.2,
+        clickToSegmentPercent: defaultPercent,
         clickToSegmentAutoIntensity: true,
-        clickToSegmentMaxDistanceMM: 10,
+        clickToSegmentMaxDistanceMM: 50,
+        clickToSegmentIs2D: true,
+        floodFillNeighbors: 6,
         penSize: 3, // in voxels, but overridden by clickToSegmentRadius
-        maxDrawUndoBitmaps: 30,
+        maxDrawUndoBitmaps: 100, // large number for undo
         onDragRelease: onDragRelease,
+        onLocationChange: onLocationChange,
         selectionBoxColor: [1, 0, 0, 0.5],
         dragMode: DRAG_MODE.roiSelection,
-        selectionBoxIsOutline: true
+        selectionBoxIsOutline: true,
+        scrollRequiresFocus: false
       };
       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
+      nv1.setSliceType(0)
+      nv1.setInterpolation(false)
       await nv1.loadVolumes(volumeList1);
       equalCheck.onchange()
 
-      // set drawing enabled
-      // nv1.setDrawingEnabled(true);
-      // nv1.setPenValue(1, true) // red and filled
+      // 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>

package/src/index_sync.html

@@ -70,10 +70,18 @@
       </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>
+        <option value="disabled">Sync Disabled</option>
+        <option value="2d">Sync 2D</option>
+        <option value="3d">Sync 3D</option>
+        <option value="crosshair" selected>crosshair</option>
+        <option value="zoomPan">zoomPan</option>
+        <option value="gamma">gamma</option>
+        <option value="sliceType">sliceType</option>
+        <option value="clipPlane">clipPlane</option>
+        <option value="cal_min">cal_min</option>
+        <option value="cal_max">cal_max</option>
+        <!-- everything -->
+         <option value="all">all except intensity</option>
       </select>
       <!-- slider for gamma -->
       <label for="gammaSlider">Gamma</label>
@@ -171,19 +179,54 @@
         nv1.gl.canvas.blur()
       }
 
-      syncDrop.onchange = function() {
-        const v = parseInt(syncDrop.value)
-        let is2D = false
-        let is3D = false
-        if (v % 2) {
-            is2D = true
+      syncDrop.onchange = function(e) {
+        const v = e.target.value
+        // let is2D = false
+        // let is3D = false
+        // if (v % 2) {
+        //     is2D = true
+        // }
+        // if (v > 1) {
+        //     is3D = true
+        // }
+        
+        // check if v === "all", if so, add everything
+        if (v === "all") {
+          nv1.broadcastTo([nv2, nv3], {
+            ['3d']: true,
+            crosshair: true,
+            zoomPan: true,
+            gamma: true,
+            sliceType: true,
+            clipPlane: true,
+            // cal_min: true,
+            // cal_max: true,
+          })
+          nv2.broadcastTo([nv1, nv3], {
+            ['3d']: true,
+            crosshair: true,
+            zoomPan: true,
+            gamma: true,
+            sliceType: true,
+            clipPlane: true,
+            // cal_min: true,
+            // cal_max: true,
+          })
+          nv3.broadcastTo([nv1, nv2], {
+            ['3d']: true,
+            crosshair: true,
+            zoomPan: true,
+            gamma: true,
+            sliceType: true,
+            clipPlane: true,
+            // cal_min: true,
+            // cal_max: true,
+          })
+          return
         }
-        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 })
+        nv1.broadcastTo([nv2, nv3], { [v]: true })
+        nv2.broadcastTo([nv1, nv3], { [v]: true })
+        nv3.broadcastTo([nv1, nv2], { [v]: true })
       }
 
       calMin.onchange = function() {
@@ -229,9 +272,10 @@
         show3Dcrosshair: true,
         onLocationChange: handleIntensityChange,
         backColor: [1, 1, 1, 1],
-        // dragMode: 3,
+        dragMode: 3,
         sliceType: 3,
-        multiplanarShowRender: SHOW_RENDER.ALWAYS
+        multiplanarShowRender: SHOW_RENDER.ALWAYS,
+        isRadiologicalConvention: true
       });
       nv1.attachTo("gl1");
       var volumeList1 = [{ url: "../demos/images/pcasl.nii.gz" }];
@@ -240,7 +284,7 @@
         show3Dcrosshair: true,
         onLocationChange: handleIntensityChange2,
         backColor: [1, 1, 1, 1],
-        // dragMode: 3,
+        dragMode: 3,
         sliceType: 3,
         multiplanarShowRender: SHOW_RENDER.ALWAYS
       });
@@ -249,7 +293,7 @@
         show3Dcrosshair: true,
         onLocationChange: handleIntensityChange3,
         backColor: [1, 1, 1, 1],
-        // dragMode: 0,
+        dragMode: 0,
         sliceType: 3,
         multiplanarShowRender: SHOW_RENDER.ALWAYS
       });