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

package/dist/index.d.ts

@@ -678,8 +678,10 @@ type NVConfigOptions = {
     clickToSegmentIntensityMin: number;
     clickToSegmentPercent: number;
     clickToSegmentMaxDistanceMM: number;
+    clickToSegmentIs2D: boolean;
     selectionBoxLineThickness: number;
     selectionBoxIsOutline: boolean;
+    scrollRequiresFocus: boolean;
 };
 declare const DEFAULT_OPTIONS: NVConfigOptions;
 type SceneData = {
@@ -1704,6 +1706,9 @@ declare class Niivue {
     drawUndoBitmaps: Uint8Array[];
     drawLut: LUT;
     drawOpacity: number;
+    clickToSegmentIsGrowing: boolean;
+    clickToSegmentGrowingBitmap: Uint8Array | null;
+    clickToSegmentXY: number[];
     renderDrawAmbientOcclusion: number;
     colorbarHeight: number;
     drawPenLocation: number[];
@@ -2736,7 +2741,7 @@ declare class Niivue {
     neighbors?: 6 | 18 | 26): void;
     drawFloodFillCore(img: Uint8Array, seedVx: number, neighbors?: number): void;
     drawFloodFill(seedXYZ: number[], newColor?: number, growSelectedCluster?: number, // if non-zero, growth based on background intensity POSITIVE_INFINITY for selected or bright, NEGATIVE_INFINITY for selected or darker
-    forceMin?: number, forceMax?: number, neighbors?: number, maxDistanceMM?: number): void;
+    forceMin?: number, forceMax?: number, neighbors?: number, maxDistanceMM?: number, is2D?: boolean): void;
     drawPenFilled(): void;
     /**
      * close drawing: make sure you have saved any changes before calling this!
@@ -2750,7 +2755,7 @@ declare class Niivue {
      * @example niivue.refreshDrawing();
      * @see {@link https://niivue.github.io/niivue/features/cactus.html | live demo usage}
      */
-    refreshDrawing(isForceRedraw?: boolean): void;
+    refreshDrawing(isForceRedraw?: boolean, useClickToSegmentBitmap?: boolean): void;
     r8Tex(texID: WebGLTexture | null, activeID: number, dims: number[], isInit?: boolean): WebGLTexture | null;
     rgbaTex(texID: WebGLTexture | null, activeID: number, dims: number[], isInit?: boolean): WebGLTexture | null;
     requestCORSIfNotSameOrigin(img: HTMLImageElement, url: string): void;
@@ -3009,6 +3014,8 @@ declare class Niivue {
     sliceScroll3D(posChange?: number): void;
     deleteThumbnail(): void;
     inGraphTile(x: number, y: number): boolean;
+    updateBitmapFromClickToSegment(): void;
+    sumBitmap(img: Uint8Array): number;
     mouseClick(x: number, y: number, posChange?: number, isDelta?: boolean): void;
     drawRuler(): void;
     drawRuler10cm(startXYendXY: number[]): void;

package/dist/index.js

@@ -119283,8 +119283,11 @@ var DEFAULT_OPTIONS = {
   clickToSegmentPercent: 0,
   clickToSegmentMaxDistanceMM: Number.POSITIVE_INFINITY,
   // default value is infinity for backwards compatibility with flood fill routine.
+  clickToSegmentIs2D: false,
   selectionBoxLineThickness: 4,
-  selectionBoxIsOutline: false
+  selectionBoxIsOutline: false,
+  scrollRequiresFocus: false
+  // determines if the cavas need to be focused to scroll
 };
 var INITIAL_SCENE_DATA = {
   gamma: 1,
@@ -121008,6 +121011,12 @@ var Niivue = class {
     // the color lookup table for drawing
     __publicField(this, "drawOpacity", 0.8);
     // opacity of drawing (default)
+    __publicField(this, "clickToSegmentIsGrowing", false);
+    // flag to indicate if the clickToSegment flood fill growing is in progress with left mouse down + drag
+    __publicField(this, "clickToSegmentGrowingBitmap", null);
+    // the bitmap of the growing flood fill
+    __publicField(this, "clickToSegmentXY", [0, 0]);
+    // the x,y location of the clickToSegment flood fill
     __publicField(this, "renderDrawAmbientOcclusion", 0.4);
     __publicField(this, "colorbarHeight", 0);
     // height in pixels, set when colorbar is drawn
@@ -121780,6 +121789,8 @@ var Niivue = class {
     this.drawPenLocation = [NaN, NaN, NaN];
     this.drawPenAxCorSag = -1;
     this.uiData.mousedown = true;
+    this.setDragStart(0, 0);
+    this.setDragEnd(0, 0);
     log.debug("mouse down");
     log.debug(e);
     const pos = this.getNoPaddingNoBorderCanvasRelativeMousePosition(e, this.gl.canvas);
@@ -121787,6 +121798,9 @@ var Niivue = class {
       return;
     }
     const [x, y] = [pos.x * this.uiData.dpr, pos.y * this.uiData.dpr];
+    if (this.opts.clickToSegment) {
+      this.clickToSegmentXY = [x, y];
+    }
     const label = this.getLabelAtPoint([x, y]);
     if (label) {
       if (label.onClick) {
@@ -121987,8 +122001,15 @@ var Niivue = class {
     if (this.drawPenFillPts.length > 0) {
       this.drawPenFilled();
     } else if (this.drawPenAxCorSag >= 0) {
-      this.drawAddUndoBitmap();
+      if (this.opts.clickToSegment) {
+        const sumBitmap = this.sumBitmap(this.drawBitmap);
+        const sumSeg = this.sumBitmap(this.clickToSegmentGrowingBitmap);
+        if (sumSeg > sumBitmap) {
+          this.updateBitmapFromClickToSegment();
+        }
+      }
     }
+    this.drawAddUndoBitmap();
     this.drawPenLocation = [NaN, NaN, NaN];
     this.drawPenAxCorSag = -1;
     if (isFunction(this.onMouseUp)) {
@@ -122307,6 +122328,35 @@ var Niivue = class {
     if (this.thumbnailVisible) {
       return;
     }
+    const dragStartSum = this.uiData.dragStart.reduce((a, b) => a + b, 0);
+    const dragEndSum = this.uiData.dragEnd.reduce((a, b) => a + b, 0);
+    const validDrag = dragStartSum > 0 && dragEndSum > 0;
+    if (this.opts.dragMode === 6 /* roiSelection */ && validDrag) {
+      const delta = e.deltaY > 0 ? 1 : -1;
+      if (this.uiData.dragStart[0] < this.uiData.dragEnd[0]) {
+        this.uiData.dragStart[0] -= delta;
+        this.uiData.dragEnd[0] += delta;
+      } else {
+        this.uiData.dragStart[0] += delta;
+        this.uiData.dragEnd[0] -= delta;
+      }
+      if (this.uiData.dragStart[1] < this.uiData.dragEnd[1]) {
+        this.uiData.dragStart[1] -= delta;
+        this.uiData.dragEnd[1] += delta;
+      } else {
+        this.uiData.dragStart[1] += delta;
+        this.uiData.dragEnd[1] -= delta;
+      }
+      this.uiData.isDragging = true;
+      this.drawScene();
+      this.uiData.isDragging = false;
+      const tileIdx = this.tileIndex(this.uiData.dragStart[0], this.uiData.dragStart[1]);
+      this.generateMouseUpCallback(
+        this.screenXY2TextureFrac(this.uiData.dragStart[0], this.uiData.dragStart[1], tileIdx),
+        this.screenXY2TextureFrac(this.uiData.dragEnd[0], this.uiData.dragEnd[1], tileIdx)
+      );
+      return;
+    }
     const rect = this.canvas.getBoundingClientRect();
     if (e.deltaY < 0) {
       this.sliceScroll2D(-0.01, e.clientX - rect.left, e.clientY - rect.top);
@@ -123739,6 +123789,10 @@ var Niivue = class {
   }
   // not included in public docs
   sliceScroll2D(posChange, x, y, isDelta = true) {
+    if (this.opts.scrollRequiresFocus && this.canvas !== document.activeElement) {
+      log.warn("Canvas element does not have focus. Scroll events will not be processed.");
+      return;
+    }
     if (this.inGraphTile(x, y)) {
       let vol = this.volumes[0].frame4D;
       if (posChange > 0) {
@@ -124403,6 +124457,7 @@ var Niivue = class {
     }
     const vx = this.back.dims[1] * this.back.dims[2] * this.back.dims[3];
     this.drawBitmap = new Uint8Array(vx);
+    this.clickToSegmentGrowingBitmap = new Uint8Array(vx);
     this.drawClearAllUndoBitmaps();
     this.drawAddUndoBitmap();
     this.drawTexture = this.r8Tex(this.drawTexture, TEXTURE7_DRAW, this.back.dims, true);
@@ -124847,7 +124902,7 @@ var Niivue = class {
   }
   // not included in public docs
   // set all connected voxels in drawing to new color
-  drawFloodFill(seedXYZ, newColor = 0, growSelectedCluster = 0, forceMin = NaN, forceMax = NaN, neighbors = 6, maxDistanceMM = Number.POSITIVE_INFINITY) {
+  drawFloodFill(seedXYZ, newColor = 0, growSelectedCluster = 0, forceMin = NaN, forceMax = NaN, neighbors = 6, maxDistanceMM = Number.POSITIVE_INFINITY, is2D = false) {
     if (!this.drawBitmap) {
       throw new Error("drawBitmap undefined");
     }
@@ -124865,10 +124920,23 @@ var Niivue = class {
     const nx = dims[0];
     const nxy = nx * dims[1];
     const nxyz = nxy * dims[2];
-    const img = this.drawBitmap.slice();
+    let img = this.drawBitmap.slice();
+    let drawBitmap = this.drawBitmap;
+    if (this.clickToSegmentIsGrowing) {
+      img = this.clickToSegmentGrowingBitmap.slice();
+      drawBitmap = this.clickToSegmentGrowingBitmap;
+    }
     if (img.length !== nxy * dims[2]) {
       return;
     }
+    let constrainXYZ = -1;
+    if (is2D && this.drawPenAxCorSag === 0 /* AXIAL */) {
+      constrainXYZ = 2;
+    } else if (is2D && this.drawPenAxCorSag === 1 /* CORONAL */) {
+      constrainXYZ = 1;
+    } else if (is2D && this.drawPenAxCorSag === 2 /* SAGITTAL */) {
+      constrainXYZ = 0;
+    }
     function vx2xyz(vx) {
       const Z = Math.floor(vx / nxy);
       const Y = Math.floor((vx - Z * nxy) / nx);
@@ -124884,7 +124952,11 @@ var Niivue = class {
     const seedMM = vx2mm(seedXYZ);
     const maxDistanceMM2 = maxDistanceMM ** 2;
     function isWithinDistance(vx) {
-      const xyzMM = vx2mm(vx2xyz(vx));
+      const xzyVox = vx2xyz(vx);
+      if (constrainXYZ >= 0 && xzyVox[constrainXYZ] !== seedXYZ[constrainXYZ]) {
+        return false;
+      }
+      const xyzMM = vx2mm(xzyVox);
       const dist22 = (xyzMM[0] - seedMM[0]) ** 2 + (xyzMM[1] - seedMM[1]) ** 2 + (xyzMM[2] - seedMM[2]) ** 2;
       return dist22 <= maxDistanceMM2;
     }
@@ -124900,7 +124972,7 @@ var Niivue = class {
     }
     for (let i2 = 1; i2 < nxyz; i2++) {
       img[i2] = 0;
-      if (this.drawBitmap[i2] === seedColor) {
+      if (drawBitmap[i2] === seedColor) {
         if (!isWithinDistance(i2)) {
           continue;
         }
@@ -124944,11 +125016,19 @@ var Niivue = class {
     }
     for (let i2 = 1; i2 < nxyz; i2++) {
       if (img[i2] === 2) {
-        this.drawBitmap[i2] = newColor;
+        drawBitmap[i2] = newColor;
       }
     }
-    this.drawAddUndoBitmap();
-    this.refreshDrawing(false);
+    if (!this.clickToSegmentIsGrowing) {
+      this.drawBitmap = drawBitmap.slice();
+      if (!this.opts.clickToSegment) {
+        this.drawAddUndoBitmap();
+      }
+      this.refreshDrawing(true, this.clickToSegmentIsGrowing);
+    } else {
+      this.clickToSegmentGrowingBitmap = drawBitmap;
+      this.refreshDrawing(true, this.clickToSegmentIsGrowing);
+    }
   }
   // not included in public docs
   // given series of line segments, connect first and last
@@ -125108,6 +125188,7 @@ var Niivue = class {
     this.drawClearAllUndoBitmaps();
     this.rgbaTex(this.drawTexture, TEXTURE7_DRAW, [2, 2, 2, 2], true);
     this.drawBitmap = null;
+    this.clickToSegmentGrowingBitmap = null;
     this.drawScene();
   }
   /**
@@ -125116,7 +125197,7 @@ var Niivue = class {
    * @example niivue.refreshDrawing();
    * @see {@link https://niivue.github.io/niivue/features/cactus.html | live demo usage}
    */
-  refreshDrawing(isForceRedraw = true) {
+  refreshDrawing(isForceRedraw = true, useClickToSegmentBitmap = false) {
     if (!this.back?.dims) {
       throw new Error("back.dims undefined");
     }
@@ -125145,7 +125226,7 @@ var Niivue = class {
       dims[3],
       this.gl.RED,
       this.gl.UNSIGNED_BYTE,
-      this.drawBitmap
+      useClickToSegmentBitmap ? this.clickToSegmentGrowingBitmap : this.drawBitmap
     );
     if (isForceRedraw) {
       this.drawScene();
@@ -125783,33 +125864,61 @@ var Niivue = class {
       mask.fill(0);
       console.log("startVox", startVox);
       console.log("endVox", endVox);
-      const xrange = this.calculateMinMaxVoxIdx([startVox[0], endVox[0]]);
-      const yrange = this.calculateMinMaxVoxIdx([startVox[1], endVox[1]]);
-      const zrange = this.calculateMinMaxVoxIdx([startVox[2], endVox[2]]);
-      if (startVox[0] - endVox[0] === 0) {
-        xrange[1] = startVox[0] + 1;
-      } else if (startVox[1] - endVox[1] === 0) {
-        yrange[1] = startVox[1] + 1;
-      } else if (startVox[2] - endVox[2] === 0) {
-        zrange[1] = startVox[2] + 1;
+      let constantDim = -1;
+      if (startVox[0] === endVox[0]) {
+        constantDim = 0;
+      } else if (startVox[1] === endVox[1]) {
+        constantDim = 1;
+      } else if (startVox[2] === endVox[2]) {
+        constantDim = 2;
+      } else {
+        console.error("Error: No constant dimension found.");
+        return;
       }
+      const dims = [0, 1, 2];
+      const varDims = dims.filter((dim) => dim !== constantDim);
+      const centerVox = [];
+      centerVox[constantDim] = startVox[constantDim];
+      centerVox[varDims[0]] = (startVox[varDims[0]] + endVox[varDims[0]]) / 2;
+      centerVox[varDims[1]] = (startVox[varDims[1]] + endVox[varDims[1]]) / 2;
+      const radiusX = Math.abs(endVox[varDims[0]] - startVox[varDims[0]]) / 2;
+      const radiusY = Math.abs(endVox[varDims[1]] - startVox[varDims[1]]) / 2;
       const xdim = hdr.dims[1];
       const ydim = hdr.dims[2];
-      for (let z = zrange[0]; z < zrange[1]; z++) {
-        const zi = z * xdim * ydim;
-        for (let y = yrange[0]; y < yrange[1]; y++) {
-          const yi = y * xdim;
-          for (let x = xrange[0]; x < xrange[1]; x++) {
-            const index = zi + yi + x;
+      const minVarDim0 = Math.max(0, Math.floor(centerVox[varDims[0]] - radiusX));
+      const maxVarDim0 = Math.min(hdr.dims[varDims[0] + 1] - 1, Math.ceil(centerVox[varDims[0]] + radiusX));
+      const minVarDim1 = Math.max(0, Math.floor(centerVox[varDims[1]] - radiusY));
+      const maxVarDim1 = Math.min(hdr.dims[varDims[1] + 1] - 1, Math.ceil(centerVox[varDims[1]] + radiusY));
+      const constDimVal = centerVox[constantDim];
+      if (constDimVal < 0 || constDimVal >= hdr.dims[constantDim + 1]) {
+        console.error("Error: Constant dimension value is out of bounds.");
+        return;
+      }
+      for (let i2 = minVarDim0; i2 <= maxVarDim0; i2++) {
+        for (let j = minVarDim1; j <= maxVarDim1; j++) {
+          const voxel = [];
+          voxel[constantDim] = constDimVal;
+          voxel[varDims[0]] = i2;
+          voxel[varDims[1]] = j;
+          const di = (voxel[varDims[0]] - centerVox[varDims[0]]) / radiusX;
+          const dj = (voxel[varDims[1]] - centerVox[varDims[1]]) / radiusY;
+          const distSq = di * di + dj * dj;
+          if (distSq <= 1) {
+            const x = voxel[0];
+            const y = voxel[1];
+            const z = voxel[2];
+            const index = z * xdim * ydim + y * xdim + x;
             mask[index] = 1;
           }
         }
       }
-      const xmm = Math.abs(pixDimsRAS[1] * (endVox[0] - startVox[0]));
-      const ymm = Math.abs(pixDimsRAS[2] * (endVox[1] - startVox[1]));
-      const zmm = Math.abs(pixDimsRAS[3] * (endVox[2] - startVox[2]));
-      const mms = [xmm, ymm, zmm];
-      area = mms.filter((m) => m !== 0).reduce((a, b) => a * b, 1);
+      const voxelArea = pixDimsRAS[varDims[0] + 1] * pixDimsRAS[varDims[1] + 1];
+      const numMaskedVoxels = mask.reduce((count, value) => count + (value === 1 ? 1 : 0), 0);
+      area = numMaskedVoxels * voxelArea;
+      const radiusX_mm = radiusX * pixDimsRAS[varDims[0] + 1];
+      const radiusY_mm = radiusY * pixDimsRAS[varDims[1] + 1];
+      const areaEllipse = Math.PI * radiusX_mm * radiusY_mm;
+      area = areaEllipse;
     }
     let k = 0;
     let M = 0;
@@ -127342,6 +127451,29 @@ var Niivue = class {
     const pos = [(x - this.graph.LTWH[0]) / this.graph.LTWH[2], (y - this.graph.LTWH[1]) / this.graph.LTWH[3]];
     return pos[0] > 0 && pos[1] > 0 && pos[0] <= 1 && pos[1] <= 1;
   }
+  // update drawBitmap if it differs from clickTosegmentBitmap
+  updateBitmapFromClickToSegment() {
+    if (this.clickToSegmentGrowingBitmap === null) {
+      return;
+    }
+    if (this.drawBitmap === null) {
+      return;
+    }
+    if (this.clickToSegmentGrowingBitmap.length !== this.drawBitmap.length) {
+      return;
+    }
+    const nvx = this.drawBitmap.length;
+    for (let i2 = 0; i2 < nvx; i2++) {
+      this.drawBitmap[i2] = this.clickToSegmentGrowingBitmap[i2];
+    }
+  }
+  sumBitmap(img) {
+    let sum = 0;
+    for (let i2 = 0; i2 < img.length; i2++) {
+      sum += img[i2];
+    }
+    return sum;
+  }
   // not included in public docs
   // handle mouse click event on canvas
   mouseClick(x, y, posChange = 0, isDelta = true) {
@@ -127391,7 +127523,7 @@ var Niivue = class {
       if (axCorSag > 2 /* SAGITTAL */) {
         continue;
       }
-      const texFrac = this.screenXY2TextureFrac(x, y, i2, false);
+      let texFrac = this.screenXY2TextureFrac(x, y, i2, false);
       if (texFrac[0] < 0) {
         continue;
       }
@@ -127418,14 +127550,28 @@ var Niivue = class {
         this.scene.crosshairPos = vec3_exports.clone(texFrac);
       }
       if (this.opts.drawingEnabled) {
-        const pt = this.frac2vox(this.scene.crosshairPos);
+        let pt = this.frac2vox(this.scene.crosshairPos);
         if (this.opts.clickToSegment) {
-          const voxelIntensity = this.back.getValue(pt[0], pt[1], pt[2]);
-          if (this.opts.clickToSegmentPercent > 0 && this.opts.clickToSegmentPercent <= 1) {
-            this.opts.clickToSegmentIntensityMax = voxelIntensity * (1 + this.opts.clickToSegmentPercent);
-            this.opts.clickToSegmentIntensityMin = voxelIntensity * (1 - this.opts.clickToSegmentPercent);
-          }
+          texFrac = this.screenXY2TextureFrac(this.clickToSegmentXY[0], this.clickToSegmentXY[1], i2, false);
+          pt = this.frac2vox(texFrac);
+          let diff = 0;
+          let threshold = this.opts.clickToSegmentPercent + diff;
+          if (this.uiData.mousedown) {
+            const xDiff = (this.clickToSegmentXY[0] - x) / this.gl.canvas.width;
+            const yDiff = (this.clickToSegmentXY[1] - y) / this.gl.canvas.height;
+            diff = Math.max(Math.abs(xDiff), Math.abs(yDiff));
+            diff *= Math.sign(Math.abs(xDiff) > Math.abs(yDiff) ? xDiff : yDiff);
+            threshold = this.opts.clickToSegmentPercent + diff;
+          }
+          let voxelIntensity = this.back.getValue(pt[0], pt[1], pt[2]);
           if (this.opts.clickToSegmentAutoIntensity) {
+            if (threshold !== 0) {
+              if (voxelIntensity === 0) {
+                voxelIntensity = 0.01;
+              }
+              this.opts.clickToSegmentIntensityMax = voxelIntensity * (1 + threshold);
+              this.opts.clickToSegmentIntensityMin = voxelIntensity * (1 - threshold);
+            }
             if (voxelIntensity > (this.back.cal_min + this.back.cal_max) * 0.5) {
               this.opts.clickToSegmentBright = true;
             } else {
@@ -127448,6 +127594,12 @@ var Niivue = class {
             this.opts.penSize = Math.ceil(this.opts.clickToSegmentRadius / minPixDim);
           }
           this.drawPt(pt[0], pt[1], pt[2], this.opts.penValue);
+          if (diff !== 0) {
+            this.clickToSegmentIsGrowing = true;
+            this.clickToSegmentGrowingBitmap = this.drawBitmap.slice();
+          } else {
+            this.clickToSegmentIsGrowing = false;
+          }
           this.drawFloodFill(
             [pt[0], pt[1], pt[2]],
             0,
@@ -127455,10 +127607,14 @@ var Niivue = class {
             this.opts.clickToSegmentIntensityMin,
             this.opts.clickToSegmentIntensityMax,
             this.opts.floodFillNeighbors,
-            this.opts.clickToSegmentMaxDistanceMM
+            this.opts.clickToSegmentMaxDistanceMM,
+            this.opts.clickToSegmentIs2D
           );
           this.drawScene();
           this.createOnLocationChange(axCorSag);
+          if (this.clickToSegmentIsGrowing) {
+            return;
+          }
           const info = this.getDescriptives({
             layer: 0,
             masks: [],
@@ -127697,6 +127853,7 @@ var Niivue = class {
       this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
       this.gl.bindVertexArray(this.unusedVAO);
     } else {
+      this.drawCircle(leftTopWidthHeight, lineColor, 0.1);
       this.rectOutlineShader.use(this.gl);
       this.gl.enable(this.gl.BLEND);
       this.gl.uniform1f(this.rectOutlineShader.uniforms.thickness, this.opts.selectionBoxLineThickness);
@@ -127741,6 +127898,10 @@ var Niivue = class {
   // not included in public docs
   // draw a rectangle at desired location
   drawSelectionBox(leftTopWidthHeight) {
+    if (this.opts.dragMode === 6 /* roiSelection */) {
+      this.drawCircle(leftTopWidthHeight, this.opts.selectionBoxColor, 0.1);
+      return;
+    }
     this.drawRect(leftTopWidthHeight, this.opts.selectionBoxColor);
   }
   // not included in public docs