.

static/js/dicomViewer.js

@@ -9,7 +9,9 @@ cornerstoneBase64ImageLoader.external.cornerstone = cornerstone;
 cornerstoneWebImageLoader.external.cornerstone = cornerstone;
 cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
 
-cornerstoneTools.init({ keyboardEnabled: true });
+cornerstoneTools.init({
+    keyboardEnabled: true
+});
 
 let tool_state = {};
 
@@ -352,6 +354,14 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
             data-mode="0"
             >
             </select>
+            <label for="left-right-mouse-dicom">Left+Right mouse buttons:</label>
+            <select
+            id="left-right-mouse-dicom"
+            class="mouse-binding-select"
+            data-button="3"
+            data-mode="0"
+            >
+            </select>
             </div>
             <br />
             Secondary (Ctrl)
@@ -380,6 +390,14 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
             data-mode="1"
             >
             </select>
+            <label for="left-right-mouse-dicom-secondary">Left+Right mouse buttons:</label>
+            <select
+            id="left-right-mouse-dicom-secondary"
+            class="mouse-binding-select"
+            data-button="3"
+            data-mode="1"
+            >
+            </select>
             </div>
 
         </div>`)
@@ -644,7 +662,9 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
                 "</span></div>"
             );
             $("#image-thumbs").append(thumb);
-            $("#thumb-" + id).click((evt) => { selectThumbClick(evt, element) }).mousedown(stopEvent);
+            $("#thumb-" + id).click((evt) => {
+                selectThumbClick(evt, element)
+            }).mousedown(stopEvent);
 
             let image_url = images[id];
 
@@ -711,8 +731,12 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
 
     load(images, annotations);
 
-    main_element.keydown((evt) => { keyDownHandler(evt, element) });
+    main_element.keydown((evt) => {
-    main_element.keyup((evt) => { keyUpHandler(evt, element) });
+        keyDownHandler(evt, element)
+    });
+    main_element.keyup((evt) => {
+        keyUpHandler(evt, element)
+    });
 
 
 }
@@ -917,16 +941,17 @@ function loadCornerstoneMainImage(element, image, stack, db, load_as_stack) {
     // Set default tools
     $("#primary-mouse-binding .mouse-binding-select[data-button=1]").val("Pan");
     $("#primary-mouse-binding .mouse-binding-select[data-button=2]").val("Wwwc");
+    $("#primary-mouse-binding .mouse-binding-select[data-button=3]").val("Zoom");
     $("#primary-mouse-binding .mouse-binding-select[data-button=4]").val("Zoom");
     //cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 1 });
 
     if (load_as_stack) {
         cornerstoneTools.setToolActiveForElement(element, "StackScrollMouseWheel", {
-            mouseButtonMask: 3
+            //mouseButtonMask: [4]
         });
     } else {
         cornerstoneTools.setToolActiveForElement(element, "ZoomMouseWheel", {
-            mouseButtonMask: 3
+            //mouseButtonMask: [4]
         });
     }
     //cornerstoneTools.setToolActive("Zoom", { mouseButtonMask: 4 });
@@ -937,6 +962,9 @@ function loadCornerstoneMainImage(element, image, stack, db, load_as_stack) {
     $("#secondary-mouse-binding .mouse-binding-select[data-button=2]").val(
         "Rotate"
     );
+    $("#secondary-mouse-binding .mouse-binding-select[data-button=3]").val(
+        "StackScroll"
+    );
     $("#secondary-mouse-binding .mouse-binding-select[data-button=4]").val(
         "WwwcRegion"
     );
@@ -969,7 +997,9 @@ function loadCornerstoneMainImage(element, image, stack, db, load_as_stack) {
 
     resizeHandler(element);
 
-    window.addEventListener("resize", () => { resizeHandler(element) });
+    window.addEventListener("resize", () => {
+        resizeHandler(element)
+    });
     element.addEventListener(
         "contextmenu",
         function (e) {
@@ -981,6 +1011,8 @@ function loadCornerstoneMainImage(element, image, stack, db, load_as_stack) {
 
 
     $(element).on("mouseup", function (event) {
+        console.log(event)
+        if (event.which == 4) { getNextAnnotationImage(element)}
         $(".magnifyTool").hide();
     });
 }