Add configuration and functional option to scroll a stack without ski…

…pping images (#311)
cornerstonejs · Jan 17, 2018 · 331e6bd · 331e6bd
1 parent 55b8618
commit 331e6bd
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 6 deletions.
diff --git a/src/stackTools/stackScroll.js b/src/stackTools/stackScroll.js
@@ -45,12 +45,14 @@ function mouseWheelCallback (e) {
   const config = stackScroll.getConfiguration();
 
   let loop = false;
+  let allowSkipping = true;
 
-  if (config && config.loop) {
-    loop = config.loop;
+  if (config) {
+    loop = config.loop !== undefined ? config.loop : false;
+    allowSkipping = config.allowSkipping !== undefined ? || true;
   }
 
-  scroll(eventData.element, images, loop);
+  scroll(eventData.element, images, loop, allowSkipping);
 }
 
 function dragCallback (e) {
@@ -67,6 +69,12 @@ function dragCallback (e) {
 
   const config = stackScroll.getConfiguration();
 
+  let allowSkipping = true;
+
+  if (config && config.allowSkipping !== undefined) {
+    allowSkipping = config.allowSkipping;
+  }
+
   // The Math.max here makes it easier to mouseDrag-scroll small or really large image stacks
   let pixelsPerImage = Math.max(2, element.offsetHeight / Math.max(stackData.imageIds.length, 8));
 
@@ -82,7 +90,7 @@ function dragCallback (e) {
   if (Math.abs(deltaY) >= pixelsPerImage) {
     const imageIdIndexOffset = Math.round(deltaY / pixelsPerImage);
 
-    scroll(element, imageIdIndexOffset);
+    scroll(element, imageIdIndexOffset, false, allowSkipping);
 
     options.deltaY = deltaY % pixelsPerImage;
   } else {

diff --git a/src/util/scroll.js b/src/util/scroll.js
@@ -1,7 +1,37 @@
 import scrollToIndex from './scrollToIndex.js';
 import { getToolState } from '../stateManagement/toolState.js';
 
-export default function (element, images, loop = false) {
+function scrollWithoutSkipping (stackData, pendingEvent, element) {
+  if (stackData.pending[0] === pendingEvent) {
+    if (stackData.currentImageIdIndex === pendingEvent.index) {
+      stackData.pending.splice(stackData.pending.indexOf(pendingEvent), 1);
+
+      if (stackData.pending.length > 0) {
+        scrollWithoutSkipping(stackData, stackData.pending[0], element);
+      }
+
+      return;
+    }
+
+    element.addEventListener('cornerstonenewimage', function(event) {
+      const listener = this;
+      const index = stackData.imageIds.indexOf(event.detail.image.imageId);
+
+      if (index === pendingEvent.index) {
+        stackData.pending.splice(stackData.pending.indexOf(pendingEvent), 1);
+        element.removeEventListener('cornerstonenewimage', listener);
+
+        if (stackData.pending.length > 0) {
+          scrollWithoutSkipping(stackData, stackData.pending[0], element);
+        }
+      }
+    });
+
+    scrollToIndex(element, pendingEvent.index);
+  }
+}
+
+export default function (element, images, loop = false, allowSkipping = true) {
   const toolData = getToolState(element, 'stack');
 
   if (!toolData || !toolData.data || !toolData.data.length) {
@@ -10,6 +40,10 @@ export default function (element, images, loop = false) {
 
   const stackData = toolData.data[0];
 
+  if (!stackData.pending) {
+    stackData.pending = [];
+  }
+
   let newImageIdIndex = stackData.currentImageIdIndex + images;
 
   if (loop) {
@@ -21,5 +55,14 @@ export default function (element, images, loop = false) {
     newImageIdIndex = Math.max(0, newImageIdIndex);
   }
 
-  scrollToIndex(element, newImageIdIndex);
+  if (allowSkipping) {
+    scrollToIndex(element, newImageIdIndex);
+  } else {
+    const pendingEvent = {
+      index : newImageIdIndex
+    };
+
+    stackData.pending.push(pendingEvent);
+    scrollWithoutSkipping(stackData, pendingEvent, element);
+  }
 }