@niivue/niivue 0.26.2 → 0.28.0

package/dist/niivue.es.js

@@ -111481,6 +111481,8 @@ function Niivue(options = {}) {
     trustCalMinMax: true,
     clipPlaneHotKey: "KeyC",
     viewModeHotKey: "KeyV",
+    doubleTouchTimeout: 500,
+    longTouchTimeout: 1e3,
     keyDebounceTime: 50,
     isNearestInterpolation: false,
     isAtlasOutline: false,
@@ -111495,13 +111497,29 @@ function Niivue(options = {}) {
     isCornerOrientationText: false,
     sagittalNoseLeft: false,
     isSliceMM: false,
+    isHighResolutionCapable: false,
     logging: false,
     loadingText: "waiting for images...",
     dragAndDropEnabled: true,
     drawingEnabled: false,
     penValue: 1,
     isFilledPen: false,
-    thumbnail: ""
+    thumbnail: "",
+    maxDrawUndoBitmaps: 8,
+    onLocationChange: () => {
+    },
+    onIntensityChange: () => {
+    },
+    onImageLoaded: () => {
+    },
+    onError: () => {
+    },
+    onInfo: () => {
+    },
+    onWarn: () => {
+    },
+    onDebug: () => {
+    }
   };
   this.canvas = null;
   this.gl = null;
@@ -111509,8 +111527,6 @@ function Niivue(options = {}) {
   this.volumeTexture = null;
   this.drawTexture = null;
   this.drawBitmap = null;
-  this.maxDrawUndoBitmaps = 8;
-  this.currentDrawUndoBitmap = this.maxDrawUndoBitmaps;
   this.drawUndoBitmaps = [];
   this.drawOpacity = 0.8;
   this.colorbarHeight = 0;
@@ -111580,6 +111596,10 @@ function Niivue(options = {}) {
   this.scene.prevY = 0;
   this.scene.currX = 0;
   this.scene.currY = 0;
+  this.currentTouchTime = 0;
+  this.lastTouchTime = 0;
+  this.touchTimer = null;
+  this.doubleTouch = false;
   this.back = {};
   this.overlays = [];
   this.volumes = [];
@@ -111601,10 +111621,7 @@ function Niivue(options = {}) {
   this.volumeObject3D = null;
   this.pivot3D = [0, 0, 0];
   this.furthestFromPivot = 10;
-  this.intensityRange$ = new Subject();
-  this.scene.location$ = new Subject();
   this.scene.loading$ = new Subject();
-  this.imageLoaded$ = new Subject();
   this.currentClipPlaneIndex = 0;
   this.lastCalled = new Date().getTime();
   this.multiTouchGesture = false;
@@ -111659,6 +111676,7 @@ function Niivue(options = {}) {
   for (let prop in this.defaults) {
     this.opts[prop] = options[prop] === void 0 ? this.defaults[prop] : options[prop];
   }
+  this.currentDrawUndoBitmap = this.opts.maxDrawUndoBitmaps;
   if (this.opts.drawingEnabled) {
     this.createEmptyDrawing();
   }
@@ -111668,10 +111686,7 @@ function Niivue(options = {}) {
   this.loadingText = this.opts.loadingText;
   log.setLogLevel(this.opts.logging);
   this.eventsToSubjects = {
-    location: this.scene.location$,
-    loading: this.scene.loading$,
-    imageLoaded: this.imageLoaded$,
-    intensityRange: this.intensityRange$
+    loading: this.scene.loading$
   };
   this.subscriptions = [];
 }
@@ -111852,8 +111867,12 @@ Niivue.prototype.arrayEquals = function(a, b) {
 Niivue.prototype.resizeListener = function() {
   this.canvas.style.width = "100%";
   this.canvas.style.height = "100%";
-  this.canvas.width = this.canvas.offsetWidth;
-  this.canvas.height = this.canvas.offsetHeight;
+  let dpr = 1;
+  if (this.opts.isHighResolutionCapable)
+    dpr = window.devicePixelRatio || 1;
+  this.canvas.width = this.canvas.offsetWidth * dpr;
+  this.canvas.height = this.canvas.offsetHeight * dpr;
+  console.log("RESIZE" + dpr);
   this.drawScene();
 };
 Niivue.prototype.getRelativeMousePosition = function(event, target) {
@@ -111967,7 +111986,7 @@ Niivue.prototype.calculateNewRange = function(volIdx = 0) {
   var mxScale = intensityRaw2Scaled(hdr, hi);
   this.volumes[volIdx].cal_min = mnScale;
   this.volumes[volIdx].cal_max = mxScale;
-  this.intensityRange$.next(this.volumes[volIdx]);
+  this.opts.onIntensityChange(this.volumes[volIdx]);
 };
 Niivue.prototype.mouseUpListener = function() {
   this.scene.mousedown = false;
@@ -111997,7 +112016,27 @@ Niivue.prototype.checkMultitouch = function(e) {
 };
 Niivue.prototype.touchStartListener = function(e) {
   e.preventDefault();
+  if (!this.touchTimer) {
+    this.touchTimer = setTimeout(() => {
+      this.resetBriCon(e);
+    }, this.opts.longTouchTimeout);
+  }
   this.scene.touchdown = true;
+  this.currentTouchTime = new Date().getTime();
+  let timeSinceTouch = this.currentTouchTime - this.lastTouchTime;
+  if (timeSinceTouch < this.opts.doubleTouchTimeout && timeSinceTouch > 0) {
+    this.doubleTouch = true;
+    this.dragStart[0] = e.targetTouches[0].clientX - e.target.getBoundingClientRect().left;
+    this.dragStart[1] = e.targetTouches[0].clientY - e.target.getBoundingClientRect().top;
+    this.resetBriCon(e);
+    this.lastTouchTime = this.currentTouchTime;
+    return;
+  } else {
+    this.doubleTouch = false;
+    this.dragStart = [0, 0];
+    this.dragEnd = [0, 0];
+    this.lastTouchTime = this.currentTouchTime;
+  }
   if (this.scene.touchdown && e.touches.length < 2) {
     this.multiTouchGesture = false;
   } else {
@@ -112005,10 +112044,23 @@ Niivue.prototype.touchStartListener = function(e) {
   }
   setTimeout(this.checkMultitouch.bind(this), 1, e);
 };
-Niivue.prototype.touchEndListener = function() {
+Niivue.prototype.touchEndListener = function(e) {
+  e.preventDefault();
   this.scene.touchdown = false;
   this.lastTwoTouchDistance = 0;
   this.multiTouchGesture = false;
+  if (this.touchTimer) {
+    clearTimeout(this.touchTimer);
+    this.touchTimer = null;
+  }
+  if (this.isDragging) {
+    this.isDragging = false;
+    if (this.opts.isDragShowsMeasurementTool)
+      return;
+    this.calculateNewRange();
+    this.refreshLayers(this.volumes[0], 0, this.volumes.length);
+  }
+  this.drawScene();
 };
 Niivue.prototype.mouseMoveListener = function(e) {
   if (this.scene.mousedown) {
@@ -112026,11 +112078,22 @@ Niivue.prototype.mouseMoveListener = function(e) {
   }
 };
 Niivue.prototype.resetBriCon = function(msg2 = null) {
+  if (this.isDragging)
+    return;
   let isRender = false;
   if (this.sliceType === this.sliceTypeRender)
     isRender = true;
+  let x2 = 0;
+  let y = 0;
   if (msg2 !== null) {
-    if (this.inRenderTile(msg2.offsetX, msg2.offsetY) >= 0)
+    if (msg2.targetTouches !== void 0) {
+      x2 = msg2.targetTouches[0].clientX - msg2.target.getBoundingClientRect().left;
+      y = msg2.targetTouches[0].clientY - msg2.target.getBoundingClientRect().top;
+    } else {
+      x2 = msg2.offsetX;
+      y = msg2.offsetY;
+    }
+    if (this.inRenderTile(x2, y) >= 0)
       isRender = true;
   }
   if (isRender) {
@@ -112039,15 +112102,24 @@ Niivue.prototype.resetBriCon = function(msg2 = null) {
     this.drawScene();
     return;
   }
+  if (this.doubleTouch)
+    return;
   this.volumes[0].cal_min = this.volumes[0].robust_min;
   this.volumes[0].cal_max = this.volumes[0].robust_max;
-  this.intensityRange$.next(this.volumes[0]);
+  this.opts.onIntensityChange(this.volumes[0]);
   this.refreshLayers(this.volumes[0], 0, this.volumes.length);
   this.drawScene();
 };
 Niivue.prototype.touchMoveListener = function(e) {
   if (this.scene.touchdown && e.touches.length < 2) {
     var rect = this.canvas.getBoundingClientRect();
+    this.isDragging = true;
+    if (this.doubleTouch && this.isDragging) {
+      this.dragEnd[0] = e.targetTouches[0].clientX - e.target.getBoundingClientRect().left;
+      this.dragEnd[1] = e.targetTouches[0].clientY - e.target.getBoundingClientRect().top;
+      this.drawScene();
+      return;
+    }
     this.mouseClick(e.touches[0].clientX - rect.left, e.touches[0].clientY - rect.top);
     this.mouseMove(e.touches[0].clientX - rect.left, e.touches[0].clientY - rect.top);
   } else {
@@ -112147,6 +112219,9 @@ Niivue.prototype.keyDownListener = function(e) {
 Niivue.prototype.wheelListener = function(e) {
   e.preventDefault();
   e.stopPropagation();
+  if (this.thumbnailVisible) {
+    return;
+  }
   var rect = this.canvas.getBoundingClientRect();
   if (e.deltaY < 0) {
     this.sliceScroll2D(-0.01, e.clientX - rect.left, e.clientY - rect.top);
@@ -112293,17 +112368,23 @@ Niivue.prototype.setSliceMM = function(isSliceMM) {
 Niivue.prototype.getRadiologicalConvention = function() {
   return this.opts.isRadiologicalConvention;
 };
+Niivue.prototype.setHighResolutionCapable = function(isHighResolutionCapable) {
+  this.opts.isHighResolutionCapable = isHighResolutionCapable;
+  console.log("HighDPI feature is experimental");
+  this.resizeListener();
+  this.drawScene();
+};
 Niivue.prototype.addVolume = function(volume) {
   this.volumes.push(volume);
   let idx = this.volumes.length === 1 ? 0 : this.volumes.length - 1;
   this.setVolume(volume, idx);
-  this.imageLoaded$.next(volume);
+  this.opts.onImageLoaded(volume);
 };
 Niivue.prototype.addMesh = function(mesh) {
   this.meshes.push(mesh);
   let idx = this.meshes.length === 1 ? 0 : this.meshes.length - 1;
   this.setMesh(mesh, idx);
-  this.imageLoaded$.next(mesh);
+  this.opts.onImageLoaded(mesh);
 };
 Niivue.prototype.getVolumeIndexByID = function(id) {
   let n = this.volumes.length;
@@ -112389,12 +112470,12 @@ Niivue.prototype.drawAddUndoBitmap = async function(fnm) {
     return false;
   }
   this.currentDrawUndoBitmap++;
-  if (this.currentDrawUndoBitmap >= this.maxDrawUndoBitmaps)
+  if (this.currentDrawUndoBitmap >= this.opts.maxDrawUndoBitmaps)
     this.currentDrawUndoBitmap = 0;
   this.drawUndoBitmaps[this.currentDrawUndoBitmap] = encodeRLE(this.drawBitmap);
 };
 Niivue.prototype.drawClearAllUndoBitmaps = async function() {
-  this.currentDrawUndoBitmap = this.maxDrawUndoBitmaps;
+  this.currentDrawUndoBitmap = this.opts.maxDrawUndoBitmaps;
   if (this.drawUndoBitmaps.length < 1)
     return;
   for (let i2 = this.drawUndoBitmaps.length - 1; i2 >= 0; i2--)
@@ -113672,6 +113753,8 @@ Niivue.prototype.init = async function() {
   }
   this.updateGLVolume();
   this.initialized = true;
+  if (this.opts.isHighResolutionCapable)
+    this.resizeListener();
   this.drawScene();
   return this;
 };
@@ -114173,15 +114256,16 @@ Niivue.prototype.mouseClick = function(x2, y, posChange = 0, isDelta = true) {
           posFuture = 0;
         this.scene.crosshairPos[2 - axCorSag] = posFuture;
         this.drawScene();
-        this.scene.location$.next({
+        this.opts.onLocationChange({
           mm: this.frac2mm(this.scene.crosshairPos),
           vox: this.frac2vox(this.scene.crosshairPos),
           frac: this.scene.crosshairPos,
+          xy: [x2, y],
           values: this.volumes.map((v) => {
             let mm = this.frac2mm(this.scene.crosshairPos);
             let vox = v.mm2vox(mm);
             let val = v.getValue(...vox);
-            return val;
+            return { name: v.name, value: val, id: v.id, mm, vox };
           })
         });
         return;
@@ -114208,15 +114292,16 @@ Niivue.prototype.mouseClick = function(x2, y, posChange = 0, isDelta = true) {
         this.refreshDrawing(false);
       }
       this.drawScene();
-      this.scene.location$.next({
+      this.opts.onLocationChange({
         mm: this.frac2mm(this.scene.crosshairPos),
         vox: this.frac2vox(this.scene.crosshairPos),
         frac: this.scene.crosshairPos,
+        xy: [x2, y],
         values: this.volumes.map((v) => {
           let mm = this.frac2mm(this.scene.crosshairPos);
           let vox = v.mm2vox(mm);
           let val = v.getValue(...vox);
-          return val;
+          return { name: v.name, value: val, id: v.id, mm, vox };
         })
       });
       return;
@@ -114614,7 +114699,7 @@ function deg2rad(deg) {
 }
 Niivue.prototype.calculateMvpMatrix2D = function(leftTopWidthHeight, mn, mx, clipTolerance = Infinity, clipDepth = 0, azimuth = null, elevation = null, isRadiolgical) {
   let gl = this.gl;
-  gl.viewport(leftTopWidthHeight[0], this.gl.canvas.clientHeight - (leftTopWidthHeight[1] + leftTopWidthHeight[3]), leftTopWidthHeight[2], leftTopWidthHeight[3]);
+  gl.viewport(leftTopWidthHeight[0], this.gl.canvas.height - (leftTopWidthHeight[1] + leftTopWidthHeight[3]), leftTopWidthHeight[2], leftTopWidthHeight[3]);
   let left = mn[0];
   let right = mx[0];
   let leftTopMM = [left, mn[1]];
@@ -115643,7 +115728,7 @@ Niivue.prototype.canvasPos2frac = function(canvasPos) {
   return [-1, -1, -1];
 };
 Niivue.prototype.scaleSlice = function(w, h, widthPadPixels = 0, heightPadPixels = 0) {
-  let canvasW = this.gl.canvas.clientWidth - widthPadPixels;
+  let canvasW = this.canvas.width - widthPadPixels;
   let canvasH = this.effectiveCanvasHeight() - heightPadPixels;
   let scalePix = canvasW / w;
   if (h * scalePix > canvasH)