Added inverted scroll direction for StackScrollTool

.all-contributorsrc

@@ -383,6 +383,15 @@
         "review",
         "userTesting"
       ]
+    },
+    {
+      "login": "christianmol",
+      "name": "Christian Mol",
+      "avatar_url": "https://avatars.githubusercontent.com/u/36736693?v=4",
+      "profile": "https://github.com/christianmol",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7

README.md

@@ -12,7 +12,7 @@
 <!-- prettier-ignore-start -->
 [![Build Status][build-badge]][build]
 [![Coverage Status][coverage-badge]][coverage]
-[![All Contributors](https://img.shields.io/badge/all_contributors-37-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-38-orange.svg?style=flat-square)](#contributors)
 
 [![NPM version][npm-version-image]][npm-url]
 [![NPM downloads][npm-downloads-image]][npm-url]
@@ -165,7 +165,7 @@ Thanks goes to these people ([emoji key][emojis]):
 | [<img src="https://avatars3.githubusercontent.com/u/3358381?v=4" width="100px;" alt="Juan Narvaez"/><br /><sub><b>Juan Narvaez</b></sub>](https://github.com/jdnarvaez)<br />[💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=jdnarvaez "Code") | [<img src="https://avatars0.githubusercontent.com/u/814227?v=4" width="100px;" alt="Mike"/><br /><sub><b>Mike</b></sub>](https://github.com/mikehazell)<br />[📖](https://github.com/cornerstonejs/cornerstoneTools/commits?author=mikehazell "Documentation") [💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=mikehazell "Code") [⚠️](https://github.com/cornerstonejs/cornerstoneTools/commits?author=mikehazell "Tests") | [<img src="https://avatars2.githubusercontent.com/u/3329885?v=4" width="100px;" alt="Sangkeun Kim"/><br /><sub><b>Sangkeun Kim</b></sub>](http://sisobus.com)<br />[💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=sisobus "Code") [💬](#question-sisobus "Answering Questions") | [<img src="https://avatars3.githubusercontent.com/u/378021?v=4" width="100px;" alt="Victor Saase"/><br /><sub><b>Victor Saase</b></sub>](https://github.com/vsaase)<br />[🤔](#ideas-vsaase "Ideas, Planning, & Feedback") | [<img src="https://avatars2.githubusercontent.com/u/120943?v=4" width="100px;" alt="Michael Wasser"/><br /><sub><b>Michael Wasser</b></sub>](http://www.mikewasser.com)<br />[📖](https://github.com/cornerstonejs/cornerstoneTools/commits?author=untoldone "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/11068601?v=4" width="100px;" alt="Amandeep Singh"/><br /><sub><b>Amandeep Singh</b></sub>](https://github.com/singhArmani)<br />[🖋](#content-singhArmani "Content") | [<img src="https://avatars0.githubusercontent.com/u/1474137?v=4" width="100px;" alt="Madison Dickson"/><br /><sub><b>Madison Dickson</b></sub>](http://mix3dstudios.com)<br />[📖](https://github.com/cornerstonejs/cornerstoneTools/commits?author=mix3d "Documentation") |
 | [<img src="https://avatars1.githubusercontent.com/u/3342530?v=4" width="100px;" alt="Kevin Lee Drum"/><br /><sub><b>Kevin Lee Drum</b></sub>](https://github.com/kevinleedrum)<br />[💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=kevinleedrum "Code") | [<img src="https://avatars3.githubusercontent.com/u/11224291?v=4" width="100px;" alt="Makarand Bauskar"/><br /><sub><b>Makarand Bauskar</b></sub>](https://github.com/mmbauskar)<br />[💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=mbauskar "Code") | [<img src="https://avatars0.githubusercontent.com/u/1713255?v=4" width="100px;" alt="Biharck Araujo"/><br /><sub><b>Biharck Araujo</b></sub>](http://www.biharck.com.br)<br />[💡](#example-biharck "Examples") [📖](https://github.com/cornerstonejs/cornerstoneTools/commits?author=biharck "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/5349517?v=4" width="100px;" alt="Devon Bernard"/><br /><sub><b>Devon Bernard</b></sub>](https://www.linkedin.com/in/devonbernard)<br />[📖](https://github.com/cornerstonejs/cornerstoneTools/commits?author=DevonBernard "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/38315992?v=4" width="100px;" alt="Karl-Heinrich"/><br /><sub><b>Karl-Heinrich</b></sub>](https://github.com/Karl-Heinrich)<br />[🐛](https://github.com/cornerstonejs/cornerstoneTools/issues?q=author%3AKarl-Heinrich "Bug reports") [💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=Karl-Heinrich "Code") [⚠️](https://github.com/cornerstonejs/cornerstoneTools/commits?author=Karl-Heinrich "Tests") | [<img src="https://avatars0.githubusercontent.com/u/15172026?v=4" width="100px;" alt="counterxing"/><br /><sub><b>counterxing</b></sub>](https://blog.xingbofeng.com/)<br />[🐛](https://github.com/cornerstonejs/cornerstoneTools/issues?q=author%3Axingbofeng "Bug reports") [💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=xingbofeng "Code") | [<img src="https://avatars0.githubusercontent.com/u/50026015?v=4" width="100px;" alt="Jorge Lopes"/><br /><sub><b>Jorge Lopes</b></sub>](https://github.com/jlopes90)<br />[💬](#question-jlopes90 "Answering Questions") |
 | [<img src="https://avatars2.githubusercontent.com/u/5546851?v=4" width="100px;" alt="Gabriel Garrido"/><br /><sub><b>Gabriel Garrido</b></sub>](http://garrido.io)<br />[💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=Ggpsv "Code") | [<img src="https://avatars0.githubusercontent.com/u/4126256?v=4" width="100px;" alt="ASVBPREAUBV"/><br /><sub><b>ASVBPREAUBV</b></sub>](https://github.com/ASVBPREAUBV)<br />[📖](https://github.com/cornerstonejs/cornerstoneTools/commits?author=ASVBPREAUBV "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/50960211?v=4" width="100px;" alt="frolic06"/><br /><sub><b>frolic06</b></sub>](https://github.com/frolic06)<br />[💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=frolic06 "Code") | [<img src="https://avatars2.githubusercontent.com/u/26968918?v=4" width="100px;" alt="codepage949"/><br /><sub><b>codepage949</b></sub>](https://github.com/codepage949)<br />[💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=codepage949 "Code") | [<img src="https://avatars.githubusercontent.com/u/1915?v=4" width="100px;" alt="Asherah Connor"/><br /><sub><b>Asherah Connor</b></sub>](https://kivikakk.ee)<br />[💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=kivikakk "Code") | [<img src="https://avatars.githubusercontent.com/u/22633385?v=4" width="100px;" alt="Ikko Ashimine"/><br /><sub><b>Ikko Ashimine</b></sub>](https://bandism.net/)<br />[🐛](https://github.com/cornerstonejs/cornerstoneTools/issues?q=author%3Aeltociear "Bug reports") | [<img src="https://avatars.githubusercontent.com/u/27778909?v=4" width="100px;" alt="Bill Wallace"/><br /><sub><b>Bill Wallace</b></sub>](https://github.com/wayfarer3130)<br />[💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=wayfarer3130 "Code") [📖](https://github.com/cornerstonejs/cornerstoneTools/commits?author=wayfarer3130 "Documentation") |
-| [<img src="https://avatars.githubusercontent.com/u/3341923?v=4" width="100px;" alt="Bruno Alves de Faria"/><br /><sub><b>Bruno Alves de Faria</b></sub>](http://radicalimaging.com/)<br />[🐛](https://github.com/cornerstonejs/cornerstoneTools/issues?q=author%3Abrunoalvesdefaria "Bug reports") [💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=brunoalvesdefaria "Code") [🖋](#content-brunoalvesdefaria "Content") [📖](https://github.com/cornerstonejs/cornerstoneTools/commits?author=brunoalvesdefaria "Documentation") [🔌](#plugin-brunoalvesdefaria "Plugin/utility libraries") [👀](#review-brunoalvesdefaria "Reviewed Pull Requests") [⚠️](https://github.com/cornerstonejs/cornerstoneTools/commits?author=brunoalvesdefaria "Tests") [🔧](#tool-brunoalvesdefaria "Tools") [📓](#userTesting-brunoalvesdefaria "User Testing") | [<img src="https://avatars.githubusercontent.com/u/13886933?v=4" width="100px;" alt="Igor Octaviano"/><br /><sub><b>Igor Octaviano</b></sub>](http://igoroctaviano.com)<br />[💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=igoroctaviano "Code") [📖](https://github.com/cornerstonejs/cornerstoneTools/commits?author=igoroctaviano "Documentation") [🚧](#maintenance-igoroctaviano "Maintenance") [👀](#review-igoroctaviano "Reviewed Pull Requests") [📓](#userTesting-igoroctaviano "User Testing") |
+| [<img src="https://avatars.githubusercontent.com/u/3341923?v=4" width="100px;" alt="Bruno Alves de Faria"/><br /><sub><b>Bruno Alves de Faria</b></sub>](http://radicalimaging.com/)<br />[🐛](https://github.com/cornerstonejs/cornerstoneTools/issues?q=author%3Abrunoalvesdefaria "Bug reports") [💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=brunoalvesdefaria "Code") [🖋](#content-brunoalvesdefaria "Content") [📖](https://github.com/cornerstonejs/cornerstoneTools/commits?author=brunoalvesdefaria "Documentation") [🔌](#plugin-brunoalvesdefaria "Plugin/utility libraries") [👀](#review-brunoalvesdefaria "Reviewed Pull Requests") [⚠️](https://github.com/cornerstonejs/cornerstoneTools/commits?author=brunoalvesdefaria "Tests") [🔧](#tool-brunoalvesdefaria "Tools") [📓](#userTesting-brunoalvesdefaria "User Testing") | [<img src="https://avatars.githubusercontent.com/u/13886933?v=4" width="100px;" alt="Igor Octaviano"/><br /><sub><b>Igor Octaviano</b></sub>](http://igoroctaviano.com)<br />[💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=igoroctaviano "Code") [📖](https://github.com/cornerstonejs/cornerstoneTools/commits?author=igoroctaviano "Documentation") [🚧](#maintenance-igoroctaviano "Maintenance") [👀](#review-igoroctaviano "Reviewed Pull Requests") [📓](#userTesting-igoroctaviano "User Testing") | [<img src="https://avatars.githubusercontent.com/u/36736693?v=4" width="100px;" alt="Christian Mol"/><br /><sub><b>Christian Mol</b></sub>](https://github.com/christianmol)<br />[💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=christianmol "Code") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors][all-contributors] specification.

src/tools/StackScrollTool.js

@@ -20,6 +20,7 @@ export default class StackScrollTool extends BaseTool {
       configuration: {
         loop: false,
         allowSkipping: true,
+        invert: false,
       },
       svgCursor: stackScrollCursor,
     };
@@ -33,7 +34,7 @@ export default class StackScrollTool extends BaseTool {
   _dragCallback(evt) {
     const eventData = evt.detail;
     const { element, deltaPoints } = eventData;
-    const { loop, allowSkipping } = this.configuration;
+    const { loop, allowSkipping, invert } = this.configuration;
     const options = getToolOptions(this.name, element);
 
     const pixelsPerImage = this._getPixelPerImage(element);
@@ -46,7 +47,12 @@ export default class StackScrollTool extends BaseTool {
     if (Math.abs(deltaY) >= pixelsPerImage) {
       const imageIdIndexOffset = Math.round(deltaY / pixelsPerImage);
 
-      scroll(element, imageIdIndexOffset, loop, allowSkipping);
+      scroll(
+        element,
+        invert ? -imageIdIndexOffset : imageIdIndexOffset,
+        loop,
+        allowSkipping
+      );
 
       options.deltaY = deltaY % pixelsPerImage;
     } else {

src/tools/StackScrollTool.test.js

@@ -43,6 +43,12 @@ describe('StachScroll.js', () => {
 
       expect(instantiatedTool.configuration.allowSkipping).toEqual(true);
     });
+
+    it('should have default configuration invert as false', () => {
+      const instantiatedTool = new StackScrollTool();
+
+      expect(instantiatedTool.configuration.invert).toEqual(false);
+    });
   });
 
   describe('_dragCallback', () => {
@@ -74,5 +80,53 @@ describe('StachScroll.js', () => {
 
       expect(scroll).not.toHaveBeenCalled();
     });
+
+    it('should call scroll with positive index when DeltaY is positive and invert is set to false', () => {
+      instantiatedTool._getDeltaY.mockReturnValue(600);
+      instantiatedTool._getPixelPerImage.mockReturnValue(100);
+
+      instantiatedTool._dragCallback(mockEvent);
+
+      expect(scroll).toHaveBeenCalledWith({}, 6, false, true);
+    });
+
+    it('should call scroll with negative index when DeltaY is negative and invert is set to false', () => {
+      instantiatedTool._getDeltaY.mockReturnValue(-600);
+      instantiatedTool._getPixelPerImage.mockReturnValue(100);
+
+      instantiatedTool._dragCallback(mockEvent);
+
+      expect(scroll).toHaveBeenCalledWith({}, -6, false, true);
+    });
+
+    it('should call scroll with negative index when DeltaY is positive and invert is set to true', () => {
+      instantiatedTool = new StackScrollTool({
+        configuration: { invert: true },
+      });
+      instantiatedTool._getDeltaY = jest.fn();
+      instantiatedTool._getPixelPerImage = jest.fn();
+      scroll.mockClear();
+
+      instantiatedTool._getDeltaY.mockReturnValue(600);
+      instantiatedTool._getPixelPerImage.mockReturnValue(100);
+      instantiatedTool._dragCallback(mockEvent);
+
+      expect(scroll).toHaveBeenCalledWith({}, -6, false, true);
+    });
+
+    it('should call scroll with positive index when DeltaY is negative and invert is set to true', () => {
+      instantiatedTool = new StackScrollTool({
+        configuration: { invert: true },
+      });
+      instantiatedTool._getDeltaY = jest.fn();
+      instantiatedTool._getPixelPerImage = jest.fn();
+      scroll.mockClear();
+
+      instantiatedTool._getDeltaY.mockReturnValue(-600);
+      instantiatedTool._getPixelPerImage.mockReturnValue(100);
+      instantiatedTool._dragCallback(mockEvent);
+
+      expect(scroll).toHaveBeenCalledWith({}, 6, false, true);
+    });
   });
 });