@niivue/niivue 0.59.0 → 0.60.0

package/build/index.d.ts

@@ -1,5 +1,5 @@
 import { mat4, vec3, vec4, vec2 } from 'gl-matrix';
-import { NIFTI1, NIFTI2 } from 'nifti-reader-js';
+import { NIFTI1, NIFTI2, NIFTIEXTENSION } from 'nifti-reader-js';
 
 type ColorMap = {
     R: number[];
@@ -341,6 +341,7 @@ declare class NVImage {
     extentsMaxOrtho?: number[];
     mm2ortho?: mat4;
     hdr: NIFTI1 | NIFTI2 | null;
+    extensions?: NIFTIEXTENSION[];
     imageType?: ImageType;
     img?: TypedVoxelArray;
     imaginary?: Float32Array;
@@ -597,7 +598,8 @@ declare enum DRAG_MODE {
     pan = 3,
     slicer3D = 4,
     callbackOnly = 5,
-    roiSelection = 6
+    roiSelection = 6,
+    angle = 7
 }
 declare enum DRAG_MODE_SECONDARY {
     none = 0,
@@ -606,7 +608,8 @@ declare enum DRAG_MODE_SECONDARY {
     pan = 3,
     slicer3D = 4,
     callbackOnly = 5,
-    roiSelection = 6
+    roiSelection = 6,
+    angle = 7
 }
 declare enum DRAG_MODE_PRIMARY {
     crosshair = 0,
@@ -1568,6 +1571,8 @@ type UIData = {
     max3D?: number;
     windowX: number;
     windowY: number;
+    angleFirstLine: number[];
+    angleState: 'none' | 'drawing_first_line' | 'drawing_second_line' | 'complete';
 };
 type SaveImageOptions = {
     filename: string;
@@ -1720,6 +1725,7 @@ declare class Niivue {
     dragModes: {
         contrast: DRAG_MODE;
         measurement: DRAG_MODE;
+        angle: DRAG_MODE;
         none: DRAG_MODE;
         pan: DRAG_MODE;
         slicer3D: DRAG_MODE;
@@ -3696,7 +3702,32 @@ declare class Niivue {
      * Draw a measurement line with end caps and length text on a 2D tile.
      * @internal
      */
-    drawMeasurementTool(startXYendXY: number[]): void;
+    drawMeasurementTool(startXYendXY: number[], isDrawText?: boolean): void;
+    /**
+     * Draw angle measurement tool with two lines and angle display.
+     * @internal
+     */
+    drawAngleMeasurementTool(): void;
+    /**
+     * Calculate and draw angle text at the intersection of two lines.
+     * @internal
+     */
+    drawAngleText(): void;
+    /**
+     * Calculate angle between two lines in degrees.
+     * @internal
+     */
+    calculateAngleBetweenLines(line1: number[], line2: number[]): number;
+    /**
+     * Reset the angle measurement state.
+     * @internal
+     */
+    resetAngleMeasurement(): void;
+    /**
+     * Set the drag mode for mouse interactions.
+     * @param mode - The drag mode to set ('none', 'contrast', 'measurement', 'angle', 'pan', 'slicer3D', 'callbackOnly', 'roiSelection')
+     */
+    setDragMode(mode: string | DRAG_MODE): void;
     /**
      * Draw a rectangle or outline at given position with specified color or default crosshair color.
      * @internal

package/build/index.js

@@ -19,7 +19,7 @@ import { mat4 as mat49, vec2, vec3 as vec314, vec4 as vec410 } from "gl-matrix";
 // package.json
 var package_default = {
   name: "@niivue/niivue",
-  version: "0.59.0",
+  version: "0.60.0",
   description: "minimal webgl2 nifti image viewer",
   types: "./build/index.d.ts",
   main: "./build/index.js",
@@ -16245,7 +16245,7 @@ function hdrToArrayBuffer(hdr, isDrawing8 = false, isInputEndian = false) {
     view.setFloat32(112, 1, isLittleEndian);
     view.setFloat32(116, 0, isLittleEndian);
   } else {
-    view.setFloat32(108, 352, isLittleEndian);
+    view.setFloat32(108, hdr.vox_offset, isLittleEndian);
     view.setFloat32(112, hdr.scl_slope, isLittleEndian);
     view.setFloat32(116, hdr.scl_inter, isLittleEndian);
   }
@@ -16481,7 +16481,32 @@ function toUint8Array(nvImage, drawingBytes = null) {
   }
   const isDrawing = drawingBytes !== null;
   const hdrCopy = JSON.parse(JSON.stringify(nvImage.hdr));
-  hdrCopy.vox_offset = Math.max(352, hdrCopy.vox_offset);
+  const hasExtensions = nvImage.extensions && nvImage.extensions.length > 0;
+  const extFlag = new Uint8Array(4);
+  extFlag[0] = hasExtensions ? 1 : 0;
+  let extensionsData = new Uint8Array(0);
+  if (hasExtensions) {
+    const blocks = [];
+    let totalSize = 0;
+    for (const ext of nvImage.extensions) {
+      const edataBytes = new Uint8Array(ext.edata);
+      const block = new Uint8Array(8 + edataBytes.length);
+      const dv = new DataView(block.buffer);
+      dv.setInt32(0, ext.esize, true);
+      dv.setInt32(4, ext.ecode, true);
+      block.set(edataBytes, 8);
+      blocks.push(block);
+      totalSize += block.length;
+    }
+    extensionsData = new Uint8Array(totalSize);
+    let offset2 = 0;
+    for (const block of blocks) {
+      extensionsData.set(block, offset2);
+      offset2 += block.length;
+    }
+  }
+  const headerSize = 348;
+  hdrCopy.vox_offset = Math.max(352, headerSize + extFlag.length + extensionsData.length);
   if (isDrawing) {
     hdrCopy.datatypeCode = 2 /* DT_UINT8 */;
     hdrCopy.numBitsPerVoxel = 8;
@@ -16545,13 +16570,20 @@ function toUint8Array(nvImage, drawingBytes = null) {
     }
     imageBytesToSave = new Uint8Array(nvImage.img.buffer, nvImage.img.byteOffset, nvImage.img.byteLength);
   }
-  const headerSize = hdrBytes.length;
-  const paddingSize = Math.max(0, hdrCopy.vox_offset - headerSize);
+  const preImageBytesSize = hdrBytes.length + extFlag.length + extensionsData.length;
+  const paddingSize = Math.max(0, hdrCopy.vox_offset - preImageBytesSize);
   const padding = new Uint8Array(paddingSize);
   const totalLength = hdrCopy.vox_offset + imageBytesToSave.length;
   const outputData = new Uint8Array(totalLength);
-  outputData.set(hdrBytes, 0);
-  outputData.set(padding, headerSize);
+  let offset = 0;
+  outputData.set(hdrBytes, offset);
+  offset += hdrBytes.length;
+  outputData.set(extFlag, offset);
+  offset += extFlag.length;
+  outputData.set(extensionsData, offset);
+  offset += extensionsData.length;
+  outputData.set(padding, offset);
+  offset += padding.length;
   outputData.set(imageBytesToSave, hdrCopy.vox_offset);
   return outputData;
 }
@@ -16994,7 +17026,7 @@ var nii_exports = {};
 __export(nii_exports, {
   readNifti: () => readNifti
 });
-import { isCompressed, decompressAsync, readHeaderAsync, readImage } from "nifti-reader-js";
+import { isCompressed, decompressAsync, readHeaderAsync, readImage, hasExtension } from "nifti-reader-js";
 async function readNifti(nvImage, buffer) {
   let dataBuffer = buffer;
   let imgRaw = null;
@@ -17008,6 +17040,9 @@ async function readNifti(nvImage, buffer) {
       throw new Error("Buffer became invalid after decompression attempt.");
     }
     nvImage.hdr = await readHeaderAsync(dataBuffer);
+    if (hasExtension(nvImage.hdr)) {
+      nvImage.extensions = nvImage.hdr.extensions;
+    }
     if (nvImage.hdr === null) {
       throw new Error(`Failed to read NIfTI header: ${nvImage.name}`);
     }
@@ -17378,6 +17413,7 @@ var NVImage = class _NVImage {
     __publicField(this, "extentsMaxOrtho");
     __publicField(this, "mm2ortho");
     __publicField(this, "hdr", null);
+    __publicField(this, "extensions");
     __publicField(this, "imageType");
     __publicField(this, "img");
     __publicField(this, "imaginary");
@@ -20785,6 +20821,7 @@ var DRAG_MODE = /* @__PURE__ */ ((DRAG_MODE2) => {
   DRAG_MODE2[DRAG_MODE2["slicer3D"] = 4] = "slicer3D";
   DRAG_MODE2[DRAG_MODE2["callbackOnly"] = 5] = "callbackOnly";
   DRAG_MODE2[DRAG_MODE2["roiSelection"] = 6] = "roiSelection";
+  DRAG_MODE2[DRAG_MODE2["angle"] = 7] = "angle";
   return DRAG_MODE2;
 })(DRAG_MODE || {});
 var DRAG_MODE_SECONDARY = /* @__PURE__ */ ((DRAG_MODE_SECONDARY2) => {
@@ -20795,6 +20832,7 @@ var DRAG_MODE_SECONDARY = /* @__PURE__ */ ((DRAG_MODE_SECONDARY2) => {
   DRAG_MODE_SECONDARY2[DRAG_MODE_SECONDARY2["slicer3D"] = 4] = "slicer3D";
   DRAG_MODE_SECONDARY2[DRAG_MODE_SECONDARY2["callbackOnly"] = 5] = "callbackOnly";
   DRAG_MODE_SECONDARY2[DRAG_MODE_SECONDARY2["roiSelection"] = 6] = "roiSelection";
+  DRAG_MODE_SECONDARY2[DRAG_MODE_SECONDARY2["angle"] = 7] = "angle";
   return DRAG_MODE_SECONDARY2;
 })(DRAG_MODE_SECONDARY || {});
 var DRAG_MODE_PRIMARY = /* @__PURE__ */ ((DRAG_MODE_PRIMARY2) => {
@@ -25800,7 +25838,9 @@ var Niivue = class {
       lastTwoTouchDistance: 0,
       multiTouchGesture: false,
       windowX: 0,
-      windowY: 0
+      windowY: 0,
+      angleFirstLine: [0, 0, 0, 0],
+      angleState: "none"
     });
     __publicField(this, "back", null);
     // base layer; defines image space to work in. Defined as this.volumes[0] in Niivue.loadVolumes
@@ -25900,6 +25940,7 @@ var Niivue = class {
     __publicField(this, "dragModes", {
       contrast: 1 /* contrast */,
       measurement: 2 /* measurement */,
+      angle: 7 /* angle */,
       none: 0 /* none */,
       pan: 3 /* pan */,
       slicer3D: 4 /* slicer3D */,
@@ -26624,8 +26665,10 @@ var Niivue = class {
     this.drawPenLocation = [NaN, NaN, NaN];
     this.drawPenAxCorSag = -1;
     this.uiData.mousedown = true;
-    this.setDragStart(0, 0);
-    this.setDragEnd(0, 0);
+    if (!(this.opts.dragMode === 7 /* angle */ && this.uiData.angleState === "drawing_second_line")) {
+      this.setDragStart(0, 0);
+      this.setDragEnd(0, 0);
+    }
     log.debug("mouse down");
     log.debug(e);
     const pos = this.getNoPaddingNoBorderCanvasRelativeMousePosition(e, this.gl.canvas);
@@ -26717,6 +26760,18 @@ var Niivue = class {
     if (this.opts.dragMode === 0 /* none */) {
       return;
     }
+    if (this.opts.dragMode === 7 /* angle */) {
+      if (this.uiData.angleState === "none") {
+        this.uiData.angleState = "drawing_first_line";
+      } else if (this.uiData.angleState === "drawing_second_line") {
+        this.uiData.angleState = "complete";
+        this.drawScene();
+        return;
+      } else if (this.uiData.angleState === "complete") {
+        this.resetAngleMeasurement();
+        this.uiData.angleState = "drawing_first_line";
+      }
+    }
     this.setDragStart(pos.x, pos.y);
     if (!this.uiData.isDragging) {
       this.uiData.pan2DxyzmmAtMouseDown = vec410.clone(this.scene.pan2Dxyzmm);
@@ -26866,6 +26921,24 @@ var Niivue = class {
     }
     if (this.uiData.isDragging) {
       this.uiData.isDragging = false;
+      if (this.opts.dragMode === 7 /* angle */) {
+        if (this.uiData.angleState === "drawing_first_line") {
+          this.uiData.angleFirstLine = [
+            this.uiData.dragStart[0],
+            this.uiData.dragStart[1],
+            this.uiData.dragEnd[0],
+            this.uiData.dragEnd[1]
+          ];
+          this.uiData.angleState = "drawing_second_line";
+          this.uiData.isDragging = true;
+          this.drawScene();
+          return;
+        } else if (this.uiData.angleState === "drawing_second_line") {
+          this.uiData.angleState = "complete";
+          this.drawScene();
+          return;
+        }
+      }
       if (this.opts.dragMode === 5 /* callbackOnly */) {
         this.drawScene();
       }
@@ -27062,6 +27135,13 @@ var Niivue = class {
       this.drawScene();
       this.uiData.prevX = this.uiData.currX;
       this.uiData.prevY = this.uiData.currY;
+    } else if (this.opts.dragMode === 7 /* angle */ && this.uiData.angleState === "drawing_second_line") {
+      const pos = this.getNoPaddingNoBorderCanvasRelativeMousePosition(e, this.gl.canvas);
+      if (!pos) {
+        return;
+      }
+      this.setDragEnd(pos.x, pos.y);
+      this.drawScene();
     } else if (!this.uiData.mousedown && this.opts.clickToSegment) {
       const pos = this.getNoPaddingNoBorderCanvasRelativeMousePosition(e, this.gl.canvas);
       if (!pos) {
@@ -34072,7 +34152,7 @@ var Niivue = class {
    * Draw a measurement line with end caps and length text on a 2D tile.
    * @internal
    */
-  drawMeasurementTool(startXYendXY) {
+  drawMeasurementTool(startXYendXY, isDrawText = true) {
     function extendTo(x0, y0, x1, y1, distance) {
       const x = x0 - x1;
       const y = y0 - y1;
@@ -34151,16 +34231,153 @@ var Niivue = class {
           textCoords = startXYendXY;
           break;
       }
-      this.drawTextBetween(
-        textCoords,
-        stringMM,
-        this.opts.measureTextHeight / 0.06,
-        // <- TODO measureFontPx
-        this.opts.measureTextColor
-      );
+      if (isDrawText) {
+        this.drawTextBetween(
+          textCoords,
+          stringMM,
+          this.opts.measureTextHeight / 0.06,
+          // <- TODO measureFontPx
+          this.opts.measureTextColor
+        );
+      }
     }
     gl.bindVertexArray(this.unusedVAO);
   }
+  /**
+   * Draw angle measurement tool with two lines and angle display.
+   * @internal
+   */
+  drawAngleMeasurementTool() {
+    if (this.uiData.angleState === "drawing_first_line") {
+      this.drawMeasurementTool(
+        [this.uiData.dragStart[0], this.uiData.dragStart[1], this.uiData.dragEnd[0], this.uiData.dragEnd[1]],
+        false
+      );
+    } else if (this.uiData.angleState === "drawing_second_line") {
+      this.drawMeasurementTool(this.uiData.angleFirstLine, false);
+      this.drawMeasurementTool(
+        [
+          this.uiData.angleFirstLine[2],
+          // start from end of first line
+          this.uiData.angleFirstLine[3],
+          this.uiData.dragEnd[0],
+          // to current mouse position
+          this.uiData.dragEnd[1]
+        ],
+        false
+      );
+      this.drawAngleText();
+    } else if (this.uiData.angleState === "complete") {
+      this.drawMeasurementTool(this.uiData.angleFirstLine, false);
+      const secondLine = [
+        this.uiData.angleFirstLine[2],
+        // start from end of first line
+        this.uiData.angleFirstLine[3],
+        this.uiData.dragEnd[0],
+        // to final position
+        this.uiData.dragEnd[1]
+      ];
+      this.drawMeasurementTool(secondLine, false);
+      this.drawAngleText();
+    }
+  }
+  /**
+   * Calculate and draw angle text at the intersection of two lines.
+   * @internal
+   */
+  drawAngleText() {
+    const line1 = this.uiData.angleFirstLine;
+    const line2 = [
+      this.uiData.angleFirstLine[2],
+      // start from end of first line
+      this.uiData.angleFirstLine[3],
+      this.uiData.dragEnd[0],
+      // to current mouse position
+      this.uiData.dragEnd[1]
+    ];
+    const angle = this.calculateAngleBetweenLines(line1, line2);
+    const intersectionX = this.uiData.angleFirstLine[2];
+    const intersectionY = this.uiData.angleFirstLine[3];
+    const angleText = `${angle.toFixed(1)}\xB0`;
+    this.drawTextBetween(
+      [intersectionX, intersectionY, intersectionX + 1, intersectionY + 1],
+      angleText,
+      this.opts.measureTextHeight / 0.06,
+      this.opts.measureTextColor
+    );
+  }
+  /**
+   * Calculate angle between two lines in degrees.
+   * @internal
+   */
+  calculateAngleBetweenLines(line1, line2) {
+    const intersectionX = line1[2];
+    const intersectionY = line1[3];
+    const v1x = line1[0] - intersectionX;
+    const v1y = line1[1] - intersectionY;
+    const v2x = line2[2] - intersectionX;
+    const v2y = line2[3] - intersectionY;
+    const dot = v1x * v2x + v1y * v2y;
+    const mag1 = Math.sqrt(v1x * v1x + v1y * v1y);
+    const mag2 = Math.sqrt(v2x * v2x + v2y * v2y);
+    if (mag1 === 0 || mag2 === 0) {
+      return 0;
+    }
+    const cosAngle = Math.max(-1, Math.min(1, dot / (mag1 * mag2)));
+    const angleRad = Math.acos(cosAngle);
+    const angleDeg = angleRad * (180 / Math.PI);
+    return angleDeg;
+  }
+  /**
+   * Reset the angle measurement state.
+   * @internal
+   */
+  resetAngleMeasurement() {
+    this.uiData.angleState = "none";
+    this.uiData.angleFirstLine = [0, 0, 0, 0];
+  }
+  /**
+   * Set the drag mode for mouse interactions.
+   * @param mode - The drag mode to set ('none', 'contrast', 'measurement', 'angle', 'pan', 'slicer3D', 'callbackOnly', 'roiSelection')
+   */
+  setDragMode(mode) {
+    if (typeof mode === "string") {
+      switch (mode) {
+        case "none":
+          this.opts.dragMode = 0 /* none */;
+          break;
+        case "contrast":
+          this.opts.dragMode = 1 /* contrast */;
+          break;
+        case "measurement":
+          this.opts.dragMode = 2 /* measurement */;
+          break;
+        case "angle":
+          this.opts.dragMode = 7 /* angle */;
+          break;
+        case "pan":
+          this.opts.dragMode = 3 /* pan */;
+          break;
+        case "slicer3D":
+          this.opts.dragMode = 4 /* slicer3D */;
+          break;
+        case "callbackOnly":
+          this.opts.dragMode = 5 /* callbackOnly */;
+          break;
+        case "roiSelection":
+          this.opts.dragMode = 6 /* roiSelection */;
+          break;
+        default:
+          console.warn(`Unknown drag mode: ${mode}`);
+          return;
+      }
+    } else {
+      this.opts.dragMode = mode;
+    }
+    if (this.opts.dragMode !== 7 /* angle */) {
+      this.resetAngleMeasurement();
+    }
+  }
   /**
    * Draw a rectangle or outline at given position with specified color or default crosshair color.
    * @internal
@@ -37421,6 +37638,10 @@ var Niivue = class {
         ]);
         return;
       }
+      if (this.opts.dragMode === 7 /* angle */) {
+        this.drawAngleMeasurementTool();
+        return;
+      }
       const width = Math.abs(this.uiData.dragStart[0] - this.uiData.dragEnd[0]);
       const height = Math.abs(this.uiData.dragStart[1] - this.uiData.dragEnd[1]);
       this.drawSelectionBox([