@niivue/niivue 0.43.5 → 0.43.7

package/build/index.d.ts

@@ -645,6 +645,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 +1692,6 @@ declare class Niivue {
     private resizeObserver;
     syncOpts: Record<string, unknown>;
     readyForSync: boolean;
-    centerMosaic: boolean;
     uiData: UIData;
     back: NVImage | null;
     overlays: NVImage[];
@@ -1773,6 +1777,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

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.5";
+var version = "0.43.7";
 
 // src/logger.ts
 var _Log = class _Log {
@@ -22006,16 +22006,21 @@ 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,
   elevation: 10,
-  crosshairPos: vec38.fromValues(0.5, 0.5, 0.5),
+  crosshairPos: vec38.create(),
   clipPlane: [0, 0, 0, 0],
   clipPlaneDepthAziElev: [2, 0, 0],
   volScaleMultiplier: 1,
-  pan2Dxyzmm: vec46.fromValues(0, 0, 0, 1),
+  pan2Dxyzmm: vec46.create(),
   clipThick: 2,
   clipVolumeLow: [0, 0, 0],
   clipVolumeHigh: [1, 1, 1]
@@ -22044,7 +22049,11 @@ var NVDocument = class _NVDocument {
       },
       onZoom3DChange: () => {
       },
-      sceneData: { ...INITIAL_SCENE_DATA },
+      sceneData: {
+        ...INITIAL_SCENE_DATA,
+        pan2Dxyzmm: vec46.fromValues(0, 0, 0, 1),
+        crosshairPos: vec38.fromValues(0.5, 0.5, 0.5)
+      },
       get renderAzimuth() {
         return this.sceneData.azimuth;
       },
@@ -23779,7 +23788,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,
@@ -23943,6 +23951,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
@@ -24243,7 +24262,7 @@ var Niivue = class _Niivue {
    */
   syncWith(otherNV, syncOpts = { "2d": true, "3d": true }) {
     this.otherNV = otherNV;
-    this.syncOpts = syncOpts;
+    this.syncOpts = { ...syncOpts };
   }
   /**
    * Sync the scene controls (orientation, crosshair location, etc.) from one Niivue instance to others. useful for using one canvas to drive another.
@@ -24280,10 +24299,12 @@ var Niivue = class _Niivue {
     if (this.otherNV instanceof _Niivue) {
       if (this.syncOpts["2d"]) {
         this.otherNV.scene.crosshairPos = this.otherNV.mm2frac(thisMM);
+        this.otherNV.scene.pan2Dxyzmm = vec48.clone(this.scene.pan2Dxyzmm);
       }
       if (this.syncOpts["3d"]) {
         this.otherNV.scene.renderAzimuth = this.scene.renderAzimuth;
         this.otherNV.scene.renderElevation = this.scene.renderElevation;
+        this.otherNV.scene.volScaleMultiplier = this.scene.volScaleMultiplier;
       }
       this.otherNV.drawScene();
       this.otherNV.createOnLocationChange();
@@ -24294,10 +24315,12 @@ var Niivue = class _Niivue {
         }
         if (this.syncOpts["2d"]) {
           this.otherNV[i].scene.crosshairPos = this.otherNV[i].mm2frac(thisMM);
+          this.otherNV[i].scene.pan2Dxyzmm = vec48.clone(this.scene.pan2Dxyzmm);
         }
         if (this.syncOpts["3d"]) {
           this.otherNV[i].scene.renderAzimuth = this.scene.renderAzimuth;
           this.otherNV[i].scene.renderElevation = this.scene.renderElevation;
+          this.otherNV[i].scene.volScaleMultiplier = this.scene.volScaleMultiplier;
         }
         this.otherNV[i].drawScene();
         this.otherNV[i].createOnLocationChange();
@@ -25021,7 +25044,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) => {
@@ -25207,6 +25233,7 @@ var Niivue = class _Niivue {
                     this.loadDrawing(volume);
                   } else {
                     this.addVolume(volume);
+                    this.setDrawingEnabled(true);
                   }
                 }).catch((e2) => {
                   throw e2;
@@ -25755,7 +25782,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) {
@@ -26572,7 +26602,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) {
@@ -26580,26 +26610,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;
   }
@@ -26673,14 +26703,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>`;
@@ -29739,11 +29769,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;
         }
@@ -31311,7 +31373,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
     };
@@ -32246,7 +32314,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));
       }