@niivue/niivue 0.44.1 → 0.44.2-dev.2

package/src/niivue.css

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

package/src/nvdocument.ts

@@ -46,7 +46,8 @@ export enum DRAG_MODE {
   measurement = 2,
   pan = 3,
   slicer3D = 4,
-  callbackOnly = 5
+  callbackOnly = 5,
+  roiSelection = 6
 }
 
 // make mutable type
@@ -96,6 +97,7 @@ export type NVConfigOptions = {
   multiplanarPadPixels: number
   // @deprecated
   multiplanarForceRender: boolean
+  multiplanarEqualSize: boolean
   multiplanarShowRender: SHOW_RENDER
   isRadiologicalConvention: boolean
   // string to allow infinity
@@ -139,10 +141,20 @@ 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
+  clickToSegmentIs2D: boolean
+  // selection box outline thickness
+  selectionBoxLineThickness: number
+  selectionBoxIsOutline: boolean
+  scrollRequiresFocus: boolean
 }
 
 export const DEFAULT_OPTIONS: NVConfigOptions = {
@@ -177,6 +189,7 @@ export const DEFAULT_OPTIONS: NVConfigOptions = {
   multiplanarPadPixels: 0,
   // @deprecated
   multiplanarForceRender: false,
+  multiplanarEqualSize: false,
   multiplanarShowRender: SHOW_RENDER.AUTO, // auto is the same behaviour as multiplanarForceRender: false
   isRadiologicalConvention: false,
   meshThicknessOn2D: Infinity,
@@ -210,13 +223,27 @@ 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: 2,
-  clickToSegmentSteps: 10,
-  clickToSegmentBright: true
+  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.
+  clickToSegmentIs2D: false,
+  selectionBoxLineThickness: 4,
+  selectionBoxIsOutline: false,
+  scrollRequiresFocus: false // determines if the cavas need to be focused to scroll
 }
 
 type SceneData = {
+  gamma: number
   azimuth: number
   elevation: number
   crosshairPos: vec3
@@ -230,6 +257,7 @@ type SceneData = {
 }
 
 export const INITIAL_SCENE_DATA = {
+  gamma: 1.0,
   azimuth: 110,
   elevation: 10,
   crosshairPos: vec3.create(),
@@ -255,6 +283,7 @@ export type Scene = {
   pan2Dxyzmm: vec4
   _elevation?: number
   _azimuth?: number
+  gamma?: number
 }
 
 export type DocumentData = {
@@ -566,6 +595,12 @@ export class NVDocument {
     }
 
     data.labels = [...this.data.labels]
+
+    // remove any handlers
+    for (const label of data.labels) {
+      delete label.onClick
+    }
+
     data.customData = this.customData
 
     // volumes

package/src/nvimage/index.ts

@@ -1631,7 +1631,7 @@ export class NVImage {
             hdr.datatypeCode = NiiDataType.DT_FLOAT64
             break
           default:
-            throw new Error('Unsupported NRRD data type: ' + items[0])
+            throw new Error('Unsupported MHA data type: ' + items[0])
         }
       }
       if (line.startsWith('ObjectType') && !items[0].includes('Image')) {
@@ -1653,6 +1653,9 @@ export class NVImage {
       [mat33[2], mat33[5], mat33[8], offset[2]],
       [0, 0, 0, 1]
     ]
+    while (bytes[pos] === 10) {
+      pos++
+    }
     hdr.vox_offset = pos
     if (isDetached && pairedImgData) {
       if (isGz) {

package/src/nvimage/utils.ts

@@ -373,10 +373,13 @@ following conditions are met:
   return m
 }
 
-function str2Buffer(str: string): number[] {
+function str2Buffer(str: string, maxLen: number = 80): number[] {
   // emulate node.js Buffer.from
+  // remove characters than could be used for shell expansion
+  str = str.replace(/[`$]/g, '')
   const bytes = []
-  for (let i = 0; i < str.length; i++) {
+  const len = Math.min(maxLen, str.length)
+  for (let i = 0; i < len; i++) {
     const char = str.charCodeAt(i)
     bytes.push(char & 0xff)
   }
@@ -384,70 +387,79 @@ function str2Buffer(str: string): number[] {
 }
 
 // save NIfTI header into UINT8 array for saving to disk
-export function hdrToArrayBuffer(hdr: NiftiHeader, isDrawing8 = false): Uint8Array {
+export function hdrToArrayBuffer(hdr: NiftiHeader, isDrawing8 = false, isInputEndian = false): Uint8Array {
   const SHORT_SIZE = 2
   const FLOAT32_SIZE = 4
-
+  let isLittleEndian = true
+  if (isInputEndian) {
+    isLittleEndian = hdr.littleEndian
+  }
   const byteArray = new Uint8Array(348)
   const view = new DataView(byteArray.buffer)
   // sizeof_hdr
-  view.setInt32(0, 348, hdr.littleEndian)
+  view.setInt32(0, 348, isLittleEndian)
 
   // data_type, db_name, extents, session_error, regular are not used
-
+  // regular set to 'r' (ASCII 114) for Analyze compatibility
+  view.setUint8(38, 114)
   // dim_info
   view.setUint8(39, hdr.dim_info)
 
   // dims
   for (let i = 0; i < 8; i++) {
-    view.setUint16(40 + SHORT_SIZE * i, hdr.dims[i], hdr.littleEndian)
+    view.setUint16(40 + SHORT_SIZE * i, hdr.dims[i], isLittleEndian)
   }
 
   // intent_p1, intent_p2, intent_p3
-  view.setFloat32(56, hdr.intent_p1, hdr.littleEndian)
-  view.setFloat32(60, hdr.intent_p2, hdr.littleEndian)
-  view.setFloat32(64, hdr.intent_p3, hdr.littleEndian)
+  view.setFloat32(56, hdr.intent_p1, isLittleEndian)
+  view.setFloat32(60, hdr.intent_p2, isLittleEndian)
+  view.setFloat32(64, hdr.intent_p3, isLittleEndian)
   // intent_code, datatype, bitpix, slice_start
-  view.setInt16(68, hdr.intent_code, hdr.littleEndian)
+  view.setInt16(68, hdr.intent_code, isLittleEndian)
   if (isDrawing8) {
-    view.setInt16(70, 2, hdr.littleEndian) // 2 = DT_UINT8
-    view.setInt16(72, 8, hdr.littleEndian)
+    view.setInt16(70, 2, isLittleEndian) // 2 = DT_UINT8
+    view.setInt16(72, 8, isLittleEndian)
   } else {
-    view.setInt16(70, hdr.datatypeCode, hdr.littleEndian)
-    view.setInt16(72, hdr.numBitsPerVoxel, hdr.littleEndian)
+    view.setInt16(70, hdr.datatypeCode, isLittleEndian)
+    view.setInt16(72, hdr.numBitsPerVoxel, isLittleEndian)
   }
-  view.setInt16(74, hdr.slice_start, hdr.littleEndian)
+  view.setInt16(74, hdr.slice_start, isLittleEndian)
 
   // pixdim[8], vox_offset, scl_slope, scl_inter
   for (let i = 0; i < 8; i++) {
-    view.setFloat32(76 + FLOAT32_SIZE * i, hdr.pixDims[i], hdr.littleEndian)
+    view.setFloat32(76 + FLOAT32_SIZE * i, hdr.pixDims[i], isLittleEndian)
   }
   if (isDrawing8) {
-    view.setFloat32(108, 352, hdr.littleEndian)
-    view.setFloat32(112, 1.0, hdr.littleEndian)
-    view.setFloat32(116, 0.0, hdr.littleEndian)
+    view.setFloat32(108, 352, isLittleEndian)
+    view.setFloat32(112, 1.0, isLittleEndian)
+    view.setFloat32(116, 0.0, isLittleEndian)
   } else {
-    view.setFloat32(108, hdr.vox_offset, hdr.littleEndian)
-    view.setFloat32(112, hdr.scl_slope, hdr.littleEndian)
-    view.setFloat32(116, hdr.scl_inter, hdr.littleEndian)
+    // view.setFloat32(108, hdr.vox_offset, isLittleEndian)
+    view.setFloat32(108, 352, isLittleEndian)
+    view.setFloat32(112, hdr.scl_slope, isLittleEndian)
+    view.setFloat32(116, hdr.scl_inter, isLittleEndian)
   }
   // slice_end
-  view.setInt16(120, hdr.slice_end, hdr.littleEndian)
+  view.setInt16(120, hdr.slice_end, isLittleEndian)
 
   // slice_code, xyzt_units
   view.setUint8(122, hdr.slice_code)
-  view.setUint8(123, hdr.xyzt_units)
+  if (hdr.xyzt_units === 0) {
+    view.setUint8(123, 10)
+  } else {
+    view.setUint8(123, hdr.xyzt_units)
+  }
 
   // cal_max, cal_min, slice_duration, toffset
   if (isDrawing8) {
-    view.setFloat32(124, 0, hdr.littleEndian)
-    view.setFloat32(128, 0, hdr.littleEndian)
+    view.setFloat32(124, 0, isLittleEndian)
+    view.setFloat32(128, 0, isLittleEndian)
   } else {
-    view.setFloat32(124, hdr.cal_max, hdr.littleEndian)
-    view.setFloat32(128, hdr.cal_min, hdr.littleEndian)
+    view.setFloat32(124, hdr.cal_max, isLittleEndian)
+    view.setFloat32(128, hdr.cal_min, isLittleEndian)
   }
-  view.setFloat32(132, hdr.slice_duration, hdr.littleEndian)
-  view.setFloat32(136, hdr.toffset, hdr.littleEndian)
+  view.setFloat32(132, hdr.slice_duration, isLittleEndian)
+  view.setFloat32(136, hdr.toffset, isLittleEndian)
 
   // glmax, glmin are unused
 
@@ -457,27 +469,34 @@ export function hdrToArrayBuffer(hdr: NiftiHeader, isDrawing8 = false): Uint8Arr
   // node.js: byteArray.set(Buffer.from(hdr.aux_file), 228);
   byteArray.set(str2Buffer(hdr.aux_file), 228)
   // qform_code, sform_code
-  view.setInt16(252, hdr.qform_code, hdr.littleEndian)
-  view.setInt16(254, hdr.sform_code, hdr.littleEndian)
+  view.setInt16(252, hdr.qform_code, isLittleEndian)
+  // if sform unknown, assume NIFTI_XFORM_SCANNER_ANAT
+  if (hdr.sform_code < 1 || hdr.sform_code < 1) {
+    view.setInt16(254, 1, isLittleEndian)
+  } else {
+    view.setInt16(254, hdr.sform_code, isLittleEndian)
+  }
 
   // quatern_b, quatern_c, quatern_d, qoffset_x, qoffset_y, qoffset_z, srow_x[4], srow_y[4], and srow_z[4]
-  view.setFloat32(256, hdr.quatern_b, hdr.littleEndian)
-  view.setFloat32(260, hdr.quatern_c, hdr.littleEndian)
-  view.setFloat32(264, hdr.quatern_d, hdr.littleEndian)
-  view.setFloat32(268, hdr.qoffset_x, hdr.littleEndian)
-  view.setFloat32(272, hdr.qoffset_y, hdr.littleEndian)
-  view.setFloat32(276, hdr.qoffset_z, hdr.littleEndian)
+  view.setFloat32(256, hdr.quatern_b, isLittleEndian)
+  view.setFloat32(260, hdr.quatern_c, isLittleEndian)
+  view.setFloat32(264, hdr.quatern_d, isLittleEndian)
+  view.setFloat32(268, hdr.qoffset_x, isLittleEndian)
+  view.setFloat32(272, hdr.qoffset_y, isLittleEndian)
+  view.setFloat32(276, hdr.qoffset_z, isLittleEndian)
   const flattened = hdr.affine.flat()
   // we only want the first three rows
   for (let i = 0; i < 12; i++) {
-    view.setFloat32(280 + FLOAT32_SIZE * i, flattened[i], hdr.littleEndian)
+    view.setFloat32(280 + FLOAT32_SIZE * i, flattened[i], isLittleEndian)
   }
   // node.js https://www.w3schools.com/nodejs/met_buffer_from.asp
   // intent_name and magic
   // node.js byteArray.set(Buffer.from(hdr.intent_name), 328);
-  byteArray.set(str2Buffer(hdr.intent_name), 328)
+  //  byteArray.set(str2Buffer(hdr.intent_name), 328)
   // node.js byteArray.set(Buffer.from(hdr.magic), 344);
-  byteArray.set(str2Buffer(hdr.magic), 344)
+  // byteArray.set(str2Buffer(hdr.magic), 344)
+  view.setInt32(344, 3222382, true) // "n+1\0"
+
   return byteArray
   // return byteArray.buffer;
 }

package/src/nvlabel.ts

@@ -10,6 +10,29 @@ export enum LabelLineTerminator {
   RING = 'ring'
 }
 
+export enum LabelAnchorFlag {
+  NONE = 0,
+  LEFT = 1 << 0,
+  CENTER = 1 << 1,
+  RIGHT = 1 << 2,
+  TOP = 1 << 3,
+  MIDDLE = 1 << 4,
+  BOTTOM = 1 << 5
+}
+
+export enum LabelAnchorPoint {
+  NONE = LabelAnchorFlag.NONE,
+  TOPLEFT = LabelAnchorFlag.TOP | LabelAnchorFlag.LEFT,
+  TOPCENTER = LabelAnchorFlag.TOP | LabelAnchorFlag.CENTER,
+  TOPRIGHT = LabelAnchorFlag.TOP | LabelAnchorFlag.RIGHT,
+  MIDDLELEFT = LabelAnchorFlag.MIDDLE | LabelAnchorFlag.LEFT,
+  MIDDLECENTER = LabelAnchorFlag.MIDDLE | LabelAnchorFlag.CENTER,
+  MIDDLERIGHT = LabelAnchorFlag.MIDDLE | LabelAnchorFlag.RIGHT,
+  BOTTOMLEFT = LabelAnchorFlag.BOTTOM | LabelAnchorFlag.LEFT,
+  BOTTOMCENTER = LabelAnchorFlag.BOTTOM | LabelAnchorFlag.CENTER,
+  BOTTOMRIGHT = LabelAnchorFlag.BOTTOM | LabelAnchorFlag.RIGHT
+}
+
 /**
  * Class representing label style.
  * @ignore
@@ -65,15 +88,25 @@ export class NVLabel3D {
   text: string
   style: NVLabel3DStyle
   points?: number[] | number[][]
+  anchor: LabelAnchorPoint
+  onClick?: (label: NVLabel3D) => void
 
   /**
    * @param text - The text of the label
    * @param style - The style of the label
    * @param points - An array of points label for label lines
    */
-  constructor(text: string, style: NVLabel3DStyle, points?: number[] | number[][]) {
+  constructor(
+    text: string,
+    style: NVLabel3DStyle,
+    points?: number[] | number[][],
+    anchor?: LabelAnchorPoint,
+    onClick?: (label: NVLabel3D) => void
+  ) {
     this.text = text
     this.style = style
     this.points = points
+    this.anchor = anchor || LabelAnchorPoint.NONE
+    this.onClick = onClick
   }
 }

package/src/nvmesh-loaders.ts

@@ -709,6 +709,12 @@ export class NVMeshLoaders {
     while (lines[pos].length < 1) {
       pos++
     } // skip blank lines
+    if (lines[pos].startsWith('METADATA')) {
+      while (lines[pos].length > 1) {
+        pos++
+      } // skip until blank line
+      pos++
+    }
     items = lines[pos].trim().split(/\s+/)
     pos++
     if (items[0].includes('LINES')) {
@@ -909,7 +915,7 @@ export class NVMeshLoaders {
           layer.values = obj
         }
       }
-    } else if (ext === 'CRV' || ext === 'CURV') {
+    } else if (ext === 'CRV' || ext === 'CURV' || ext === 'THICKNESS' || ext === 'AREA') {
       layer.values = NVMeshLoaders.readCURV(buffer, n_vert)
       layer.isTransparentBelowCalMin = false
     } else if (ext === 'GII') {
@@ -935,6 +941,10 @@ export class NVMeshLoaders {
       layer.values = NVMeshLoaders.readSMP(buffer, n_vert)
     } else if (ext === 'STC') {
       layer.values = NVMeshLoaders.readSTC(buffer, n_vert)
+    } else if (NVMeshLoaders.isCurv(buffer)) {
+      // Unknown layer overlay format - hail mary assume FreeSurfer
+      layer.values = NVMeshLoaders.readCURV(buffer, n_vert)
+      layer.isTransparentBelowCalMin = false
     } else {
       log.warn('Unknown layer overlay format ' + name)
       return layer
@@ -1123,6 +1133,19 @@ export class NVMeshLoaders {
     return f32
   } // readSTC()
 
+  static isCurv(buffer: ArrayBuffer): boolean {
+    const view = new DataView(buffer) // ArrayBuffer to dataview
+    // ALWAYS big endian
+    const sig0 = view.getUint8(0)
+    const sig1 = view.getUint8(1)
+    const sig2 = view.getUint8(2)
+    if (sig0 !== 255 || sig1 !== 255 || sig2 !== 255) {
+      utiltiesLogger.debug('Unable to recognize file type: does not appear to be FreeSurfer format.')
+      return false
+    }
+    return true
+  }
+
   // read freesurfer curv big-endian format
   // https://github.com/bonilhamusclab/MRIcroS/blob/master/%2BfileUtils/%2Bpial/readPial.m
   // http://www.grahamwideman.com/gw/brain/fs/surfacefileformats.htm

package/src/shader-srcs.ts

@@ -719,6 +719,47 @@ 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;
@@ -1207,11 +1248,11 @@ uniform mat4 mvpMtx;
 uniform mat4 normMtx;
 out vec4 vClr;
 out vec3 vN;
-out vec4 vP;
+out vec4 vPc;
 void main(void) {
 	vec3 lightPosition = vec3(0.0, 0.0, -10.0);
-	vP = vec4(pos, 1.0);
-	gl_Position = mvpMtx * vP;
+	vPc = mvpMtx * vec4(pos, 1.0);
+	gl_Position = vPc;
 	vN = normalize((normMtx * vec4(norm.xyz,1.0)).xyz);
 	//vV = -vec3(modelMtx*vec4(pos,1.0));
 	vClr = clr;
@@ -1368,6 +1409,46 @@ void main() {
 	color = vec4(d3 + s3 + s, opacity);
 }`
 
+// https://thorium.rocks/media/curves/curvaceous.html
+export const fragMeshShaderCrevice = `#version 300 es
+precision highp int;
+precision highp float;
+uniform float opacity;
+in vec4 vClr;
+in vec3 vN;
+in vec4 vPc;
+out vec4 color;
+void main() {
+	vec3 n = normalize(vN);
+	// Compute curvature
+	vec3 dx = dFdx(n);
+	vec3 dy = dFdy(n);
+	vec3 xneg = n - dx;
+	vec3 xpos = n + dx;
+	vec3 yneg = n - dy;
+	vec3 ypos = n + dy;
+	float depth = length(vPc.xyz);
+	float curv = (cross(xneg, xpos).y - cross(yneg, ypos).x) / depth;
+	//at this stage 0.5 for flat, with valleys dark and ridges bright
+	curv = 1.0 - (curv + 0.5);
+	//clamp
+	curv =  min(max(curv, 0.0), 1.0);
+	// easing function
+	curv = pow(curv, 0.5);
+	//modulate ambient and diffuse with curvature
+	vec3 r = vec3(0.0, 0.0, 1.0); //rayDir: for orthographic projections moving in Z direction (no need for normal matrix)
+	float ambient = 0.6;
+	float diffuse = 0.6;
+	float specular = 0.2;
+	float shininess = 10.0;
+	vec3 lightPosition = vec3(0.0, 10.0, -2.0);
+	vec3 l = normalize(lightPosition);
+	float lightNormDot = dot(n, l);
+	vec3 a = vClr.rgb * ambient * curv;
+	vec3 d = max(lightNormDot, 0.0) * vClr.rgb * diffuse;
+	float s = specular * pow(max(dot(reflect(l, n), r), 0.0), shininess);
+	color = vec4(a + d + s, opacity);
+}`
 // Phong: default
 export const fragMeshShader = `#version 300 es
 precision highp int;

package/src/types.ts

@@ -152,3 +152,16 @@ 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
+}