@niivue/niivue 0.43.6 → 0.44.0

package/build/index.d.ts

@@ -211,6 +211,7 @@ type ImageFromUrlOptions = {
     useQFormNotSForm?: boolean;
     alphaThreshold?: boolean;
     colormapNegative?: string;
+    colorMapNegative?: string;
     cal_minNeg?: number;
     cal_maxNeg?: number;
     colorbarVisible?: boolean;
@@ -558,6 +559,11 @@ declare enum SLICE_TYPE {
     MULTIPLANAR = 3,
     RENDER = 4
 }
+declare enum SHOW_RENDER {
+    NEVER = 0,
+    ALWAYS = 1,
+    AUTO = 2
+}
 /**
  * Multi-planar layout
  * @ignore
@@ -613,6 +619,7 @@ type NVConfigOptions = {
     isOrientCube: boolean;
     multiplanarPadPixels: number;
     multiplanarForceRender: boolean;
+    multiplanarShowRender: SHOW_RENDER;
     isRadiologicalConvention: boolean;
     meshThicknessOn2D: number | string;
     dragMode: DRAG_MODE;
@@ -645,6 +652,11 @@ type NVConfigOptions = {
     multiplanarLayout: MULTIPLANAR_TYPE;
     renderOverlayBlend: number;
     sliceMosaicString: string;
+    centerMosaic: boolean;
+    clickToSegment: boolean;
+    clickToSegmentRadius: number;
+    clickToSegmentSteps: number;
+    clickToSegmentBright: boolean;
 };
 declare const DEFAULT_OPTIONS: NVConfigOptions;
 type SceneData = {
@@ -1687,7 +1699,6 @@ declare class Niivue {
     private resizeObserver;
     syncOpts: Record<string, unknown>;
     readyForSync: boolean;
-    centerMosaic: boolean;
     uiData: UIData;
     back: NVImage | null;
     overlays: NVImage[];
@@ -1773,6 +1784,19 @@ declare class Niivue {
      * }
      */
     onIntensityChange: (volume: NVImage) => void;
+    /**
+     * callback function when clickToSegment is enabled and the user clicks on the image. data contains the volume of the segmented region in mm3 and mL
+     * @example
+     * niivue.onClickToSegment = (data) => {
+     * console.log('clicked to segment')
+     * console.log('volume mm3: ', data.mm3)
+     * console.log('volume mL: ', data.mL)
+     * }
+     */
+    onClickToSegment: (data: {
+        mm3: number;
+        mL: number;
+    }) => void;
     /**
      * callback function to run when a new volume is loaded
      * @example
@@ -2042,6 +2066,7 @@ declare class Niivue {
      * @see {@link https://niivue.github.io/niivue/features/document.3d.html | live demo usage}
      */
     addVolumeFromUrl(imageOptions: ImageFromUrlOptions): Promise<NVImage>;
+    addVolumesFromUrl(imageOptionsArray: ImageFromUrlOptions[]): Promise<NVImage[]>;
     /**
      * Find media by url
      */
@@ -2555,6 +2580,11 @@ declare class Niivue {
      * @see {@link https://niivue.github.io/niivue/features/multiuser.meshes.html | live demo usage}
      */
     addMeshFromUrl(meshOptions: LoadFromUrlParams): Promise<NVMesh>;
+    /**
+     * Add mesh and notify subscribers
+     * @see {@link https://niivue.github.io/niivue/features/multiuser.meshes.html | live demo usage}
+     */
+    addMeshesFromUrl(meshOptions: LoadFromUrlParams[]): Promise<NVMesh[]>;
     /**
      * load an array of meshes
      * @param meshList - the array of objects to load. each object must have a resolvable "url" property at a minimum
@@ -2979,4 +3009,4 @@ declare class Niivue {
     set gl(gl: WebGL2RenderingContext | null);
 }
 
-export { type Connectome, type ConnectomeOptions, DEFAULT_OPTIONS, DRAG_MODE, type DocumentData, type DragReleaseParams, type ExportDocumentData, INITIAL_SCENE_DATA, LabelLineTerminator, LabelTextAlignment, type LegacyConnectome, type LegacyNodes, MULTIPLANAR_TYPE, type NVConfigOptions, type NVConnectomeEdge, type NVConnectomeNode, NVController, NVDocument, NVImage, NVImageFromUrlOptions, NVLabel3D, NVLabel3DStyle, NVMesh, NVMeshFromUrlOptions, NVMeshLayerDefaults, NVMeshLoaders, NVUtilities, type NiftiHeader, type NiiVueLocation, type NiiVueLocationValue, Niivue, type Point, SLICE_TYPE, type Scene, type Volume, cmapper, ColorTables as colortables };
+export { type Connectome, type ConnectomeOptions, DEFAULT_OPTIONS, DRAG_MODE, type DocumentData, type DragReleaseParams, type ExportDocumentData, INITIAL_SCENE_DATA, LabelLineTerminator, LabelTextAlignment, type LegacyConnectome, type LegacyNodes, MULTIPLANAR_TYPE, type NVConfigOptions, type NVConnectomeEdge, type NVConnectomeNode, NVController, NVDocument, NVImage, NVImageFromUrlOptions, NVLabel3D, NVLabel3DStyle, NVMesh, NVMeshFromUrlOptions, NVMeshLayerDefaults, NVMeshLoaders, NVUtilities, type NiftiHeader, type NiiVueLocation, type NiiVueLocationValue, Niivue, type Point, SHOW_RENDER, SLICE_TYPE, type Scene, type Volume, cmapper, ColorTables as colortables };

package/build/index.js

@@ -13,7 +13,7 @@ var __publicField = (obj, key, value) => {
 import { mat4 as mat46, vec2, vec3 as vec311, vec4 as vec48 } from "gl-matrix";
 
 // package.json
-var version = "0.43.6";
+var version = "0.44.0";
 
 // src/logger.ts
 var _Log = class _Log {
@@ -21929,6 +21929,12 @@ var SLICE_TYPE = /* @__PURE__ */ ((SLICE_TYPE2) => {
   SLICE_TYPE2[SLICE_TYPE2["RENDER"] = 4] = "RENDER";
   return SLICE_TYPE2;
 })(SLICE_TYPE || {});
+var SHOW_RENDER = /* @__PURE__ */ ((SHOW_RENDER2) => {
+  SHOW_RENDER2[SHOW_RENDER2["NEVER"] = 0] = "NEVER";
+  SHOW_RENDER2[SHOW_RENDER2["ALWAYS"] = 1] = "ALWAYS";
+  SHOW_RENDER2[SHOW_RENDER2["AUTO"] = 2] = "AUTO";
+  return SHOW_RENDER2;
+})(SHOW_RENDER || {});
 var MULTIPLANAR_TYPE = /* @__PURE__ */ ((MULTIPLANAR_TYPE2) => {
   MULTIPLANAR_TYPE2[MULTIPLANAR_TYPE2["AUTO"] = 0] = "AUTO";
   MULTIPLANAR_TYPE2[MULTIPLANAR_TYPE2["COLUMN"] = 1] = "COLUMN";
@@ -21975,7 +21981,10 @@ var DEFAULT_OPTIONS = {
   isColorbar: false,
   isOrientCube: false,
   multiplanarPadPixels: 0,
+  // @deprecated
   multiplanarForceRender: false,
+  multiplanarShowRender: 2 /* AUTO */,
+  // auto is the same behaviour as multiplanarForceRender: false
   isRadiologicalConvention: false,
   meshThicknessOn2D: Infinity,
   dragMode: 1 /* contrast */,
@@ -22006,7 +22015,12 @@ var DEFAULT_OPTIONS = {
   legendTextColor: [1, 1, 1, 1],
   multiplanarLayout: 0 /* AUTO */,
   renderOverlayBlend: 1,
-  sliceMosaicString: ""
+  sliceMosaicString: "",
+  centerMosaic: false,
+  clickToSegment: false,
+  clickToSegmentRadius: 2,
+  clickToSegmentSteps: 10,
+  clickToSegmentBright: true
 };
 var INITIAL_SCENE_DATA = {
   azimuth: 110,
@@ -23783,7 +23797,6 @@ var Niivue = class _Niivue {
     __publicField(this, "resizeObserver", null);
     __publicField(this, "syncOpts", {});
     __publicField(this, "readyForSync", false);
-    __publicField(this, "centerMosaic", false);
     // UI Data
     __publicField(this, "uiData", {
       mousedown: false,
@@ -23947,6 +23960,17 @@ var Niivue = class _Niivue {
      */
     __publicField(this, "onIntensityChange", () => {
     });
+    /**
+     * callback function when clickToSegment is enabled and the user clicks on the image. data contains the volume of the segmented region in mm3 and mL
+     * @example
+     * niivue.onClickToSegment = (data) => {
+     * console.log('clicked to segment')
+     * console.log('volume mm3: ', data.mm3)
+     * console.log('volume mL: ', data.mL)
+     * }
+     */
+    __publicField(this, "onClickToSegment", () => {
+    });
     /**
      * callback function to run when a new volume is loaded
      * @example
@@ -24982,6 +25006,39 @@ var Niivue = class _Niivue {
     this.addVolume(volume);
     return volume;
   }
+  async addVolumesFromUrl(imageOptionsArray) {
+    const promises = imageOptionsArray.map(async (imageItem) => {
+      const imageOptions = {
+        url: imageItem.url,
+        headers: imageItem.headers,
+        name: imageItem.name,
+        colormap: imageItem.colormap ? imageItem.colormap : imageItem.colorMap,
+        colormapNegative: imageItem.colormapNegative ? imageItem.colormapNegative : imageItem.colorMapNegative,
+        opacity: imageItem.opacity,
+        urlImgData: imageItem.urlImgData,
+        cal_min: imageItem.cal_min,
+        cal_max: imageItem.cal_max,
+        trustCalMinMax: this.opts.trustCalMinMax,
+        isManifest: imageItem.isManifest,
+        frame4D: imageItem.frame4D,
+        limitFrames4D: imageItem.limitFrames4D || this.opts.limitFrames4D,
+        colorbarVisible: imageItem.colorbarVisible
+      };
+      const volume = await NVImage.loadFromUrl(imageOptions);
+      this.document.addImageOptions(volume, imageOptions);
+      volume.onColormapChange = this.onColormapChange;
+      this.mediaUrlMap.set(volume, imageOptions.url);
+      if (this.onVolumeAddedFromUrl) {
+        this.onVolumeAddedFromUrl(imageOptions, volume);
+      }
+      return volume;
+    });
+    const volumes = await Promise.all(promises);
+    for (let i = 0; i < volumes.length; i++) {
+      this.addVolume(volumes[i]);
+    }
+    return volumes;
+  }
   /**
    * Find media by url
    */
@@ -25029,7 +25086,10 @@ var Niivue = class _Niivue {
               // nothing
               imageType: NVIMAGE_TYPE.DCM_FOLDER
               // signify that this is a dicom directory
-            }).then((volume) => this.addVolume(volume)).catch((e) => {
+            }).then((volume) => {
+              this.addVolume(volume);
+              this.setDrawingEnabled(true);
+            }).catch((e) => {
               throw e;
             });
           }).catch((e) => {
@@ -25215,6 +25275,7 @@ var Niivue = class _Niivue {
                     this.loadDrawing(volume);
                   } else {
                     this.addVolume(volume);
+                    this.setDrawingEnabled(true);
                   }
                 }).catch((e2) => {
                   throw e2;
@@ -25763,7 +25824,10 @@ var Niivue = class _Niivue {
    * @see {@link https://niivue.github.io/niivue/features/draw.ui.html | live demo usage}
    */
   saveImage(options = defaultSaveImageOptions) {
-    const saveOptions = { ...defaultSaveImageOptions, ...options };
+    const saveOptions = {
+      ...defaultSaveImageOptions,
+      ...options
+    };
     const { filename, isSaveDrawing, volumeByIndex } = saveOptions;
     log.debug("saveImage", filename, isSaveDrawing, volumeByIndex);
     if (this.back?.dims === void 0) {
@@ -26580,7 +26644,7 @@ var Niivue = class _Niivue {
   * @param esm - bundled version of NiiVue
   * @example
   * const javascript = this.generateLoadDocumentJavaScript("gl1");
-  * const html = `<html><body><canvas id="gl1"></canvas><script type="module" async>        
+  * const html = `<html><body><canvas id="gl1"></canvas><script type="module" async>
          ${javascript}</script></body></html>`;
   */
   async generateLoadDocumentJavaScript(canvasId, esm) {
@@ -26588,26 +26652,26 @@ var Niivue = class _Niivue {
     const base64 = await NVUtilities.compressToBase64String(JSON.stringify(json));
     const javascript = `
         ${esm}
-        
-        async function saveNiivueAsHtml(pageName) {    
+
+        async function saveNiivueAsHtml(pageName) {
           //get new docstring
           const docString = nv1.json();
-          const html = 
+          const html =
           document.getElementsByTagName("html")[0]
               .innerHTML.replace(base64, await NVUtilities.compressToBase64String(JSON.stringify(docString)));
           NVUtilities.download(html, pageName, "application/html");
         }
-        
+
         var nv1 = new Niivue();
-        nv1.attachTo("${canvasId}");  
+        nv1.attachTo("${canvasId}");
         var base64 = "${base64}";
         NVUtilities.decompressBase64String(base64).then((jsonText) => {
           var json = JSON.parse(jsonText); // string -> JSON
-          var doc = NVDocument.loadFromJSON(json);                
+          var doc = NVDocument.loadFromJSON(json);
           nv1.loadDocument(doc);
           nv1.updateGLVolume();
         });
-        
+
       `;
     return javascript;
   }
@@ -26681,14 +26745,14 @@ var Niivue = class _Niivue {
             <main>
               <canvas id="gl1"></canvas>
             </main>
-            <script type="module" async>        
+            <script type="module" async>
               ${javascript}
               function saveAsHtml() {
                 saveNiivueAsHtml("page.html");
-              }        
+              }
               // assign our event handler
               var button = document.getElementById("save");
-              button.onclick = saveAsHtml;      
+              button.onclick = saveAsHtml;
             </script>
           </body>
         </html>`;
@@ -26753,28 +26817,27 @@ var Niivue = class _Niivue {
     this.volumes = [];
     this.gl.clearColor(0, 0, 0, 1);
     this.gl.clear(this.gl.COLOR_BUFFER_BIT);
-    for (let i = 0; i < volumeList.length; i++) {
-      if (volumeList[i].colorMap !== void 0) {
-        volumeList[i].colormap = volumeList[i].colorMap;
-      }
-      const imageOptions = {
-        url: volumeList[i].url,
-        headers: volumeList[i].headers,
-        name: volumeList[i].name,
-        colormap: volumeList[i].colormap,
-        colormapNegative: volumeList[i].colormapNegative,
-        opacity: volumeList[i].opacity,
-        urlImgData: volumeList[i].urlImgData,
-        cal_min: volumeList[i].cal_min,
-        cal_max: volumeList[i].cal_max,
-        trustCalMinMax: this.opts.trustCalMinMax,
-        isManifest: volumeList[i].isManifest,
-        frame4D: volumeList[i].frame4D,
-        limitFrames4D: volumeList[i].limitFrames4D || this.opts.limitFrames4D,
-        colorbarVisible: volumeList[i].colorbarVisible
-      };
-      await this.addVolumeFromUrl(imageOptions);
+    if (volumeList.length > 1) {
+      await this.addVolumesFromUrl(volumeList);
+      return this;
     }
+    const imageOptions = {
+      url: volumeList[0].url,
+      headers: volumeList[0].headers,
+      name: volumeList[0].name,
+      colormap: volumeList[0].colormap ? volumeList[0].colormap : volumeList[0].colorMap,
+      colormapNegative: volumeList[0].colormapNegative ? volumeList[0].colormapNegative : volumeList[0].colorMapNegative,
+      opacity: volumeList[0].opacity,
+      urlImgData: volumeList[0].urlImgData,
+      cal_min: volumeList[0].cal_min,
+      cal_max: volumeList[0].cal_max,
+      trustCalMinMax: this.opts.trustCalMinMax,
+      isManifest: volumeList[0].isManifest,
+      frame4D: volumeList[0].frame4D,
+      limitFrames4D: volumeList[0].limitFrames4D || this.opts.limitFrames4D,
+      colorbarVisible: volumeList[0].colorbarVisible
+    };
+    await this.addVolumeFromUrl(imageOptions);
     return this;
   }
   /**
@@ -26798,6 +26861,32 @@ var Niivue = class _Niivue {
     this.addMesh(mesh);
     return mesh;
   }
+  /**
+   * Add mesh and notify subscribers
+   * @see {@link https://niivue.github.io/niivue/features/multiuser.meshes.html | live demo usage}
+   */
+  async addMeshesFromUrl(meshOptions) {
+    const promises = meshOptions.map(async (meshItem) => {
+      const ext = this.getFileExt(meshItem.url);
+      if (ext === "JCON" || ext === "JSON") {
+        const response = await fetch(meshItem.url, {});
+        const json = await response.json();
+        const mesh2 = this.loadConnectomeAsMesh(json);
+        this.mediaUrlMap.set(mesh2, meshItem.url);
+        this.onMeshAddedFromUrl(meshItem, mesh2);
+        return mesh2;
+      }
+      const mesh = await NVMesh2.loadFromUrl({ ...meshItem, gl: this.gl });
+      this.mediaUrlMap.set(mesh, meshItem.url);
+      this.onMeshAddedFromUrl(meshItem, mesh);
+      return mesh;
+    });
+    const meshes = await Promise.all(promises);
+    for (let i = 0; i < meshes.length; i++) {
+      this.addMesh(meshes[i]);
+    }
+    return meshes;
+  }
   /**
    * load an array of meshes
    * @param meshList - the array of objects to load. each object must have a resolvable "url" property at a minimum
@@ -26819,9 +26908,13 @@ var Niivue = class _Niivue {
     this.meshes = [];
     this.gl.clearColor(0, 0, 0, 1);
     this.gl.clear(this.gl.COLOR_BUFFER_BIT);
-    for (let i = 0; i < meshList.length; i++) {
-      await this.addMeshFromUrl(meshList[i]);
+    if (meshList.length > 1) {
+      await this.addMeshesFromUrl(meshList);
+      this.updateGLVolume();
+      this.drawScene();
+      return this;
     }
+    await this.addMeshFromUrl(meshList[0]);
     this.updateGLVolume();
     this.drawScene();
     return this;
@@ -29747,11 +29840,43 @@ var Niivue = class _Niivue {
       }
       if (this.opts.drawingEnabled) {
         const pt = this.frac2vox(this.scene.crosshairPos);
+        if (this.opts.clickToSegment) {
+          const radius = this.opts.clickToSegmentRadius;
+          const steps = this.opts.clickToSegmentSteps;
+          const brightOrDark = this.opts.clickToSegmentBright ? Number.POSITIVE_INFINITY : Number.NEGATIVE_INFINITY;
+          this.drawPenFillPts = [];
+          this.drawPenAxCorSag = axCorSag;
+          for (let i2 = 1; i2 <= steps; i2++) {
+            const angle = i2 / steps * 2 * Math.PI;
+            let xVox = pt[0] + radius * Math.cos(angle);
+            let yVox = pt[1] + radius * Math.sin(angle);
+            const zVox = pt[2];
+            xVox = Math.round(xVox);
+            yVox = Math.round(yVox);
+            this.drawPt(xVox, yVox, zVox, this.opts.penValue);
+            this.drawPenFillPts.push([xVox, yVox, pt[2]]);
+            if (i2 === steps) {
+              this.drawFloodFill([xVox, yVox, pt[2]], 0, brightOrDark, NaN, NaN, this.opts.floodFillNeighbors);
+            }
+          }
+          this.drawScene();
+          this.createOnLocationChange(axCorSag);
+          const info = this.getDescriptives(0, [], true);
+          this.onClickToSegment({ mL: info.volumeML, mm3: info.volumeMM3 });
+          return;
+        }
         if (!isFinite(this.opts.penValue) || this.opts.penValue < 0 || Object.is(this.opts.penValue, -0)) {
           if (!isFinite(this.opts.penValue)) {
-            this.drawFloodFill(pt, 0, this.opts.penValue, this.opts.floodFillNeighbors);
+            this.drawFloodFill(pt, 0, this.opts.penValue, NaN, NaN, this.opts.floodFillNeighbors);
           } else {
-            this.drawFloodFill(pt, Math.abs(this.opts.penValue), this.opts.floodFillNeighbors);
+            this.drawFloodFill(
+              pt,
+              Math.abs(this.opts.penValue),
+              this.opts.penValue,
+              NaN,
+              NaN,
+              this.opts.floodFillNeighbors
+            );
           }
           return;
         }
@@ -30050,6 +30175,9 @@ var Niivue = class _Niivue {
       width = bulletMargin + longestTextLength;
       width += horizontalMargin * 2;
     }
+    if (width >= this.gl.canvas.width) {
+      return 0;
+    }
     return width;
   }
   getLegendPanelHeight() {
@@ -31319,7 +31447,13 @@ var Niivue = class _Niivue {
         const mm2 = this.frac2mm(this.scene.crosshairPos, 0, true);
         const vox = v.mm2vox(mm2);
         const val = v.getValue(vox[0], vox[1], vox[2], v.frame4D);
-        return { name: v.name, value: val, id: v.id, mm: mm2, vox };
+        return {
+          name: v.name,
+          value: val,
+          id: v.id,
+          mm: mm2,
+          vox
+        };
       }),
       string: str
     };
@@ -32254,7 +32388,7 @@ var Niivue = class _Niivue {
       const scaleW = this.gl.canvas.width / mxRowWid;
       const scaleH = this.effectiveCanvasHeight() / top;
       scale = Math.min(scaleW, scaleH);
-      if (this.centerMosaic) {
+      if (this.opts.centerMosaic) {
         marginLeft = Math.floor(0.5 * (this.gl.canvas.width - mxRowWid * scale));
         marginTop = Math.floor(0.5 * (this.effectiveCanvasHeight() - top * scale));
       }
@@ -32330,6 +32464,20 @@ var Niivue = class _Niivue {
       } else if (this.opts.sliceType === 2 /* SAGITTAL */) {
         this.draw2D([0, 0, 0, 0], 2);
       } else {
+        let isShowRender = false;
+        if (this.opts.multiplanarForceRender) {
+          isShowRender = true;
+          if (this.opts.multiplanarForceRender) {
+            this.opts.multiplanarShowRender = 1 /* ALWAYS */;
+          } else {
+            this.opts.multiplanarShowRender = 2 /* AUTO */;
+          }
+          delete this.opts.multiplanarForceRender;
+        } else {
+          if (this.opts.multiplanarShowRender === 1 /* ALWAYS */) {
+            isShowRender = true;
+          }
+        }
         const isDrawPenDown = isFinite(this.drawPenLocation[0]) && this.opts.drawingEnabled;
         const { volScale } = this.sliceScale();
         if (typeof this.opts.multiplanarPadPixels !== "number") {
@@ -32371,7 +32519,7 @@ var Niivue = class _Niivue {
         }
         if (isDrawColumn) {
           let ltwh = ltwh1x3;
-          if (this.opts.multiplanarForceRender || ltwh1x4[4] >= ltwh1x3[4]) {
+          if (isShowRender || this.opts.multiplanarShowRender === 2 /* AUTO */ && ltwh1x4[4] >= ltwh1x3[4]) {
             ltwh = ltwh1x4;
           } else {
             isDraw3D = false;
@@ -32388,7 +32536,7 @@ var Niivue = class _Niivue {
           }
         } else if (isDrawRow) {
           let ltwh = ltwh3x1;
-          if (this.opts.multiplanarForceRender || ltwh4x1[4] >= ltwh3x1[4]) {
+          if (isShowRender || this.opts.multiplanarShowRender === 2 /* AUTO */ && ltwh4x1[4] >= ltwh3x1[4]) {
             ltwh = ltwh4x1;
           } else {
             isDraw3D = false;
@@ -32403,6 +32551,12 @@ var Niivue = class _Niivue {
             this.draw3D([ltwh[0] + sX + sX + sY + pad * 3, ltwh[1], ltwh[3], ltwh[3]]);
           }
         } else if (isDrawGrid) {
+          if (!isShowRender) {
+            isDraw3D = false;
+          }
+          if (this.opts.multiplanarShowRender === 2 /* AUTO */) {
+            isDraw3D = true;
+          }
           const ltwh = ltwh2x2;
           const sX = volScale[0] * ltwh[4];
           const sY = volScale[1] * ltwh[4];
@@ -32527,6 +32681,7 @@ export {
   NVMeshLoaders,
   NVUtilities,
   Niivue,
+  SHOW_RENDER,
   SLICE_TYPE,
   cmapper,
   ColorTables as colortables