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

package/src/niivue/index.ts

@@ -345,6 +345,9 @@ export class Niivue {
   drawUndoBitmaps: Uint8Array[] = [] // array of drawBitmaps for undo
   drawLut = cmapper.makeDrawLut('$itksnap') // the color lookup table for drawing
   drawOpacity = 0.8 // opacity of drawing (default)
+  clickToSegmentIsGrowing = false // flag to indicate if the clickToSegment flood fill growing is in progress with left mouse down + drag
+  clickToSegmentGrowingBitmap: Uint8Array | null = null // the bitmap of the growing flood fill
+  clickToSegmentXY = [0, 0] // the x,y location of the clickToSegment flood fill
   renderDrawAmbientOcclusion = 0.4
   colorbarHeight = 0 // height in pixels, set when colorbar is drawn
   drawPenLocation = [NaN, NaN, NaN]
@@ -1189,6 +1192,9 @@ export class Niivue {
     this.drawPenLocation = [NaN, NaN, NaN]
     this.drawPenAxCorSag = -1
     this.uiData.mousedown = true
+    // reset drag positions used previously.
+    this.setDragStart(0, 0)
+    this.setDragEnd(0, 0)
     log.debug('mouse down')
     log.debug(e)
     // record tile where mouse clicked
@@ -1198,6 +1204,9 @@ export class Niivue {
     }
 
     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) {
       // check for user defined onclick handler
@@ -1418,8 +1427,18 @@ export class Niivue {
     if (this.drawPenFillPts.length > 0) {
       this.drawPenFilled()
     } else if (this.drawPenAxCorSag >= 0) {
-      this.drawAddUndoBitmap()
+      if (this.opts.clickToSegment) {
+        // copy clickToSegment bitmap to drawBitmap.
+        // determine which bitmap has more non-zero values, indicating it is more recent
+        const sumBitmap = this.sumBitmap(this.drawBitmap)
+        const sumSeg = this.sumBitmap(this.clickToSegmentGrowingBitmap)
+        if (sumSeg > sumBitmap) {
+          this.updateBitmapFromClickToSegment()
+        }
+      }
     }
+    // add the bitmap after the clickToSegment update
+    this.drawAddUndoBitmap()
     this.drawPenLocation = [NaN, NaN, NaN]
     this.drawPenAxCorSag = -1
     if (isFunction(this.onMouseUp)) {
@@ -1784,6 +1803,40 @@ export class Niivue {
     if (this.thumbnailVisible) {
       return
     }
+    // check that the user has actually created an ROI already.
+    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 dragMode is roiSelection, grow or shrink the selection box
+    // by scrolling the mouse wheel. Grows by 1 pixel per scroll
+    if (this.opts.dragMode === DRAG_MODE.roiSelection && validDrag) {
+      const delta = e.deltaY > 0 ? 1 : -1
+      // update the uiData.dragStart and uiData.dragEnd values to grow or shrink the selection box
+      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
+      }
+      // draw the scene
+      this.uiData.isDragging = true // set is dragging so the selection box is drawn for this drawScene call
+      this.drawScene() // drawScene uses isDragging to determine if the selection box or ROI should be drawn
+      this.uiData.isDragging = false // reset is dragging
+      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)
@@ -3382,6 +3435,12 @@ export class Niivue {
 
   // not included in public docs
   sliceScroll2D(posChange: number, x: number, y: number, isDelta = true): void {
+    // check if the canvas has focus
+    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) {
@@ -4125,6 +4184,7 @@ export class Niivue {
     } // something is horribly wrong!
     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)
@@ -4660,7 +4720,8 @@ export class Niivue {
     forceMax = NaN,
     neighbors = 6,
     // option for only flood filling within max distance from seed voxel
-    maxDistanceMM = Number.POSITIVE_INFINITY
+    maxDistanceMM = Number.POSITIVE_INFINITY,
+    is2D = false
   ): void {
     if (!this.drawBitmap) {
       throw new Error('drawBitmap undefined')
@@ -4682,10 +4743,28 @@ export class Niivue {
     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
+    // use the growing bitmap if the clickToSegmentIsGrowing flag is set.
+    // this allows previewing the flood fill, and the results are copied
+    // to the drawBitmap when the user releases the mouse button.
+    if (this.clickToSegmentIsGrowing) {
+      img = this.clickToSegmentGrowingBitmap.slice()
+      drawBitmap = this.clickToSegmentGrowingBitmap
+    }
+
     if (img.length !== nxy * dims[2]) {
       return
     }
+    // mask2D: axial slices constrained in Z, coronal in Y and sagittal in X
+    let constrainXYZ = -1
+    if (is2D && this.drawPenAxCorSag === SLICE_TYPE.AXIAL) {
+      constrainXYZ = 2
+    } else if (is2D && this.drawPenAxCorSag === SLICE_TYPE.CORONAL) {
+      constrainXYZ = 1
+    } else if (is2D && this.drawPenAxCorSag === SLICE_TYPE.SAGITTAL) {
+      constrainXYZ = 0
+    }
     function vx2xyz(vx: number): number[] {
       // provided address in 1D array, return XYZ coordinate
       const Z = Math.floor(vx / nxy) // slice
@@ -4705,7 +4784,11 @@ export class Niivue {
     const maxDistanceMM2 = maxDistanceMM ** 2
     // function to check if new point to be checked is less than maxDistanceMM
     function isWithinDistance(vx: number): boolean {
-      const xyzMM = vx2mm(vx2xyz(vx))
+      const xzyVox = vx2xyz(vx)
+      if (constrainXYZ >= 0 && xzyVox[constrainXYZ] !== seedXYZ[constrainXYZ]) {
+        return false
+      }
+      const xyzMM = vx2mm(xzyVox)
       const dist2 = (xyzMM[0] - seedMM[0]) ** 2 + (xyzMM[1] - seedMM[1]) ** 2 + (xyzMM[2] - seedMM[2]) ** 2
       return dist2 <= maxDistanceMM2
     }
@@ -4721,7 +4804,7 @@ export class Niivue {
     }
     for (let i = 1; i < nxyz; i++) {
       img[i] = 0
-      if (this.drawBitmap[i] === seedColor) {
+      if (drawBitmap[i] === seedColor) {
         // check if voxel index i is within maxDistanceMM from seed voxel
         if (!isWithinDistance(i)) {
           // move to next voxel if not within distance,
@@ -4775,11 +4858,22 @@ export class Niivue {
     for (let i = 1; i < nxyz; i++) {
       if (img[i] === 2) {
         // if part of cluster
-        this.drawBitmap[i] = newColor
+        drawBitmap[i] = newColor
       }
     }
-    this.drawAddUndoBitmap()
-    this.refreshDrawing(false)
+    if (!this.clickToSegmentIsGrowing) {
+      this.drawBitmap = drawBitmap.slice()
+      if (!this.opts.clickToSegment) {
+        // only update the undo array if clickToSegment is not enabled.
+        // This avoids adding the same drawing twice, since the mouse up
+        // event will also add the drawing to the undo array.
+        this.drawAddUndoBitmap()
+      }
+      this.refreshDrawing(true, this.clickToSegmentIsGrowing)
+    } else {
+      this.clickToSegmentGrowingBitmap = drawBitmap
+      this.refreshDrawing(true, this.clickToSegmentIsGrowing)
+    }
   }
 
   // not included in public docs
@@ -4966,6 +5060,7 @@ export class Niivue {
     this.drawClearAllUndoBitmaps()
     this.rgbaTex(this.drawTexture, TEXTURE7_DRAW, [2, 2, 2, 2], true)
     this.drawBitmap = null
+    this.clickToSegmentGrowingBitmap = null
     this.drawScene()
   }
 
@@ -4975,7 +5070,7 @@ export class Niivue {
    * @example niivue.refreshDrawing();
    * @see {@link https://niivue.github.io/niivue/features/cactus.html | live demo usage}
    */
-  refreshDrawing(isForceRedraw = true): void {
+  refreshDrawing(isForceRedraw = true, useClickToSegmentBitmap = false): void {
     if (!this.back?.dims) {
       throw new Error('back.dims undefined')
     }
@@ -5005,7 +5100,7 @@ export class Niivue {
       dims[3],
       this.gl.RED,
       this.gl.UNSIGNED_BYTE,
-      this.drawBitmap
+      useClickToSegmentBitmap ? this.clickToSegmentGrowingBitmap : this.drawBitmap
     )
     if (isForceRedraw) {
       this.drawScene()
@@ -5733,43 +5828,99 @@ export class Niivue {
       mask.fill(0)
       console.log('startVox', startVox)
       console.log('endVox', endVox)
-      // const startVox = roiInfo.startVox
-      // const endVox = roiInfo.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]])
 
-      // for our constant dimension we add one so that the for loop runs at least once
-      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
+      // identify the constant dimension (the plane where the ellipse is drawn)
+      let constantDim = -1
+      if (startVox[0] === endVox[0]) {
+        constantDim = 0 // x is constant
+      } else if (startVox[1] === endVox[1]) {
+        constantDim = 1 // y is constant
+      } else if (startVox[2] === endVox[2]) {
+        constantDim = 2 // z is constant
+      } else {
+        console.error('Error: No constant dimension found.')
+        return
       }
 
+      // get the varying dimensions
+      const dims = [0, 1, 2]
+      const varDims = dims.filter((dim) => dim !== constantDim)
+
+      // compute the center of the ellipse in voxel coordinates
+      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
+
+      // compute the radii along each varying dimension
+      const radiusX = Math.abs(endVox[varDims[0]] - startVox[varDims[0]]) / 2
+      const radiusY = Math.abs(endVox[varDims[1]] - startVox[varDims[1]]) / 2
+
+      // dimensions of the image
       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 zdim = hdr.dims[3]
+
+      // define the ranges for the varying dimensions
+      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))
+
+      // the constant dimension value
+      const constDimVal = centerVox[constantDim]
+      if (constDimVal < 0 || constDimVal >= hdr.dims[constantDim + 1]) {
+        console.error('Error: Constant dimension value is out of bounds.')
+        return
+      }
+
+      // iterate over the varying dimensions and apply the elliptical mask
+      for (let i = minVarDim0; i <= maxVarDim0; i++) {
+        for (let j = minVarDim1; j <= maxVarDim1; j++) {
+          // set the voxel coordinates
+          const voxel = []
+          voxel[constantDim] = constDimVal // Fixed dimension
+          voxel[varDims[0]] = i
+          voxel[varDims[1]] = j
+          // calculate the normalized distances from the center
+          const di = (voxel[varDims[0]] - centerVox[varDims[0]]) / radiusX
+          const dj = (voxel[varDims[1]] - centerVox[varDims[1]]) / radiusY
+          // calculate the squared distance in ellipse space
+          const distSq = di * di + dj * dj
+          // check if the voxel is within the ellipse
+          if (distSq <= 1) {
+            // calculate the index in the mask array
+            const x = voxel[0]
+            const y = voxel[1]
+            const z = voxel[2]
+            const index = z * xdim * ydim + y * xdim + x
             mask[index] = 1
           }
         }
       }
-      // calculate area 2d area from startVox and endVox coordinates if roiIsMask is true (since mask is created from a 2d slice only)
-      // area is in mm^2. The below calculations work regardless of the orientation of the image since
-      // Niivue converts all images to RAS
-      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]))
-      // one of the above will be zero since roiIsMask==true, so we filter out the non-zero value
-      // and then multiply the other two to get the area
-      const mms = [xmm, ymm, zmm]
-      area = mms.filter((m) => m !== 0).reduce((a, b) => a * b, 1)
+      // calculate the area based on the number of voxels in the mask
+      const voxelArea = pixDimsRAS[varDims[0] + 1] * pixDimsRAS[varDims[1] + 1] // adjusted for 1-indexing
+      const numMaskedVoxels = mask.reduce((count, value) => count + (value === 1 ? 1 : 0), 0)
+      area = numMaskedVoxels * voxelArea
+
+      // perhaps better to calculate the area using the ellipse area formula
+      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
+      // for debuging: show mask -- loop over drawing and set drawing to 1 if mask is 1
+      // this.setDrawingEnabled(true)
+      // this.drawOpacity = 0.3
+      // for (let i = 0; i < nv; i++) {
+      //   if (mask[i] === 1) {
+      //     this.drawBitmap![i] = 1
+      //   } else {
+      //     this.drawBitmap![i] = 0
+      //   }
+      // }
+      // this.refreshDrawing(false)
+      // this.setDrawingEnabled(false)
     }
     // Welfords method
     // https://www.embeddedrelated.com/showarticle/785.php
@@ -7502,6 +7653,31 @@ export class Niivue {
     return pos[0] > 0 && pos[1] > 0 && pos[0] <= 1 && pos[1] <= 1
   }
 
+  // update drawBitmap if it differs from clickTosegmentBitmap
+  updateBitmapFromClickToSegment(): void {
+    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 i = 0; i < nvx; i++) {
+      this.drawBitmap[i] = this.clickToSegmentGrowingBitmap[i]
+    }
+  }
+
+  sumBitmap(img: Uint8Array): number {
+    let sum = 0
+    for (let i = 0; i < img.length; i++) {
+      sum += img[i]
+    }
+    return sum
+  }
+
   // not included in public docs
   // handle mouse click event on canvas
   mouseClick(x: number, y: number, posChange = 0, isDelta = true): void {
@@ -7565,7 +7741,7 @@ export class Niivue {
       if (axCorSag > SLICE_TYPE.SAGITTAL) {
         continue
       }
-      const texFrac = this.screenXY2TextureFrac(x, y, i, false)
+      let texFrac = this.screenXY2TextureFrac(x, y, i, false)
       if (texFrac[0] < 0) {
         continue
       } // click not on slice i
@@ -7596,21 +7772,37 @@ export class Niivue {
       }
       if (this.opts.drawingEnabled) {
         // drawing done in voxels
-        const pt = this.frac2vox(this.scene.crosshairPos) as [number, number, number]
+        let pt = this.frac2vox(this.scene.crosshairPos) as [number, number, number]
         // if click-to-segment enabled
         if (this.opts.clickToSegment) {
-          // get voxel value of pt
-          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], i, false)
+          pt = this.frac2vox(texFrac) as [number, number, number]
+          let diff = 0
+          let threshold = this.opts.clickToSegmentPercent + diff
+          if (this.uiData.mousedown) {
+            // get percent difference between current x, y, and clickToSegmentXY
+            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))
+            // use the sign of the larger difference to determine the direction
+            diff *= Math.sign(Math.abs(xDiff) > Math.abs(yDiff) ? xDiff : yDiff)
+            threshold = this.opts.clickToSegmentPercent + diff
           }
+          // get voxel value of pt
+          let voxelIntensity = this.back.getValue(pt[0], pt[1], pt[2])
           // if clickToSegmentAutoIntensity, then calculate if we need to flood fill
           // in a bright or dark region based on the intensity of the clicked voxel,
           // and where it falls in the range of cal_min and cal_max.
           // !important! If this option is true, then it will ignore the boolean value of
           // clickToSegmentBright supplied by the user
           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 voxel intensity is greater than the midpoint of cal_min and cal_max,
             // then flood fill in a bright region
             if (voxelIntensity > (this.back.cal_min + this.back.cal_max) * 0.5) {
@@ -7641,9 +7833,16 @@ export class Niivue {
           }
           // draw the point at the cursor using the penSize to set the
           // seed for the flood fill
-          // !important! clickToSegment performs two drawing operations,
-          // therefore, if you want to undo the clickToSegment, you need to call undo twice
           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
+          }
+
+          // do flood fill
           this.drawFloodFill(
             [pt[0], pt[1], pt[2]],
             0,
@@ -7651,11 +7850,18 @@ export class Niivue {
             this.opts.clickToSegmentIntensityMin,
             this.opts.clickToSegmentIntensityMax,
             this.opts.floodFillNeighbors,
-            this.opts.clickToSegmentMaxDistanceMM
+            this.opts.clickToSegmentMaxDistanceMM,
+            this.opts.clickToSegmentIs2D
           )
+          // draw the scene so we see the changes
           this.drawScene()
           this.createOnLocationChange(axCorSag)
-          // get the volume of the segmented region
+          if (this.clickToSegmentIsGrowing) {
+            // don't get descriptive stats if the user
+            // is still growing the segmented region
+            return
+          }
+          // get the volume of the segmented region if the user is not growing the region
           const info = this.getDescriptives({
             layer: 0,
             masks: [],
@@ -7928,6 +8134,7 @@ export class Niivue {
       this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4)
       this.gl.bindVertexArray(this.unusedVAO) // switch off to avoid tampering with settings
     } else {
+      this.drawCircle(leftTopWidthHeight, lineColor, 0.1)
       // this.opts.selectionBoxIsOutline == true
       this.rectOutlineShader.use(this.gl)
       this.gl.enable(this.gl.BLEND)
@@ -7976,6 +8183,11 @@ export class Niivue {
   // not included in public docs
   // draw a rectangle at desired location
   drawSelectionBox(leftTopWidthHeight: number[]): void {
+    if (this.opts.dragMode === DRAG_MODE.roiSelection) {
+      this.drawCircle(leftTopWidthHeight, this.opts.selectionBoxColor, 0.1)
+      return
+    }
+    // else draw a rectangle
     this.drawRect(leftTopWidthHeight, this.opts.selectionBoxColor)
   }
 

package/src/niivue.css

@@ -35,7 +35,6 @@ canvas:focus {
 }
 div {
   display: table-row;
-  background-color: blue;
 }
 .dropdown {
   float: left;

package/src/nvdocument.ts

@@ -150,9 +150,11 @@ export type NVConfigOptions = {
   clickToSegmentIntensityMin: number // also covers NaN
   clickToSegmentPercent: number
   clickToSegmentMaxDistanceMM: number // max distance in mm to consider for click to segment flood fill
+  clickToSegmentIs2D: boolean
   // selection box outline thickness
   selectionBoxLineThickness: number
   selectionBoxIsOutline: boolean
+  scrollRequiresFocus: boolean
 }
 
 export const DEFAULT_OPTIONS: NVConfigOptions = {
@@ -234,8 +236,10 @@ export const DEFAULT_OPTIONS: NVConfigOptions = {
   // for the clickToSegmentIntensityMin and clickToSegmentIntensityMax values.
   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
 }
 
 type SceneData = {