@niivue/niivue 0.44.2-dev.1 → 0.45.0

package/src/nvdocument.ts

@@ -46,8 +46,7 @@ export enum DRAG_MODE {
   measurement = 2,
   pan = 3,
   slicer3D = 4,
-  callbackOnly = 5,
-  roiSelection = 6
+  callbackOnly = 5
 }
 
 // make mutable type
@@ -141,18 +140,10 @@ export type NVConfigOptions = {
   renderOverlayBlend: number
   sliceMosaicString: string
   centerMosaic: boolean
-  penSize: number
   clickToSegment: boolean
   clickToSegmentRadius: number
+  clickToSegmentSteps: number
   clickToSegmentBright: boolean
-  clickToSegmentAutoIntensity: boolean // new option, but keep clickToSegmentBright for backwards compatibility
-  clickToSegmentIntensityMax: number // also covers NaN
-  clickToSegmentIntensityMin: number // also covers NaN
-  clickToSegmentPercent: number
-  clickToSegmentMaxDistanceMM: number // max distance in mm to consider for click to segment flood fill
-  // selection box outline thickness
-  selectionBoxLineThickness: number
-  selectionBoxIsOutline: boolean
 }
 
 export const DEFAULT_OPTIONS: NVConfigOptions = {
@@ -221,21 +212,10 @@ export const DEFAULT_OPTIONS: NVConfigOptions = {
   renderOverlayBlend: 1.0,
   sliceMosaicString: '',
   centerMosaic: false,
-  penSize: 1, // in voxels, since all drawing is done using bitmap indices
   clickToSegment: false,
-  clickToSegmentRadius: 3, // in mm
-  clickToSegmentBright: true,
-  clickToSegmentAutoIntensity: false, // new option, but keep clickToSegmentBright for backwards compatibility
-  clickToSegmentIntensityMax: NaN, // NaN will use auto threshold (default flood fill behavior from before)
-  clickToSegmentIntensityMin: NaN, // NaN will use auto threshold (default flood fill behavior from before)
-  // 0 will use auto threshold (default flood fill behavior from before)
-  // Take the voxel intensity at the click point and use this percentage +/- to threshold the flood fill operation.
-  // If greater than 0, clickedVoxelIntensity +/- clickedVoxelIntensity * clickToSegmentPercent will be used
-  // for the clickToSegmentIntensityMin and clickToSegmentIntensityMax values.
-  clickToSegmentPercent: 0,
-  clickToSegmentMaxDistanceMM: Number.POSITIVE_INFINITY, // default value is infinity for backwards compatibility with flood fill routine.
-  selectionBoxLineThickness: 4,
-  selectionBoxIsOutline: false
+  clickToSegmentRadius: 2,
+  clickToSegmentSteps: 10,
+  clickToSegmentBright: true
 }
 
 type SceneData = {

package/src/shader-srcs.ts

@@ -719,47 +719,6 @@ void main() {
 	color = lineColor;
 }`
 
-export const fragRectOutlineShader = `#version 300 es
-#line 723
-precision highp int;
-precision highp float;
-
-uniform vec4 lineColor;
-uniform vec4 leftTopWidthHeight;
-uniform float thickness; // line thickness in pixels
-uniform vec2 canvasWidthHeight;
-
-out vec4 color;
-
-void main() {
-    // fragment position in screen coordinates
-    vec2 fragCoord = gl_FragCoord.xy;
-
-    // canvas height
-    float canvasHeight = canvasWidthHeight.y;
-
-    // 'top' and 'bottom' to match gl_FragCoord.y coordinate system
-    float top = canvasHeight - leftTopWidthHeight.y;
-    float bottom = top - leftTopWidthHeight.w;
-
-    // left and right edges
-    float left = leftTopWidthHeight.x;
-    float right = left + leftTopWidthHeight.z;
-
-    bool withinLeft = fragCoord.x >= left && fragCoord.x <= left + thickness;
-    bool withinRight = fragCoord.x <= right && fragCoord.x >= right - thickness;
-    bool withinTop = fragCoord.y <= top && fragCoord.y >= top - thickness;
-    bool withinBottom = fragCoord.y >= bottom && fragCoord.y <= bottom + thickness;
-
-    bool isOutline = withinLeft || withinRight || withinTop || withinBottom;
-
-    if (isOutline) {
-        color = lineColor;
-    } else {
-        discard; 
-    }
-}`
-
 export const vertColorbarShader = `#version 300 es
 #line 490
 layout(location=0) in vec3 pos;

package/src/types.ts

@@ -152,16 +152,3 @@ export type NiiVueLocation = {
   vox: vec3
   xy: [number, number]
 }
-
-export type SyncOpts = {
-  '3d'?: boolean
-  '2d'?: boolean
-  zoomPan?: boolean
-  cal_min?: boolean
-  cal_max?: boolean
-  gamma?: boolean
-  useSliceOffset?: boolean
-  sliceType?: boolean
-  crosshair?: boolean
-  clipPlane?: boolean
-}

package/src/index_segment.html

@@ -1,165 +0,0 @@
-<!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

@@ -1,289 +0,0 @@
-<!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>