fixes, upgrade cornerstone

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 = {};
 
@@ -321,7 +323,7 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
 
     // Add generic settings menus to canvas-panel
     $(".canvas-panel").append(
-        $(`<div id='dicom-settings-panel'>
+            $(`<div id='dicom-settings-panel'>
             <span id="dicom-settings-close" class="close-button"><a href="#">close</a></span>
             <span class="view-log-button"><a href="#">view log</a></span>
             <h3>Image viewer settings:</h3>
@@ -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,10 +390,18 @@ 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>`)
-    )
+        )
         .append($("<span id='dicom-toggle-mode-button' class='dicom-button' title='toggle stack/thumbnail view'>↻</span>"))
         .append($("<span id='dicom-fullscreen-button' class='dicom-button' title='toggle stack/thumbnail view'>⛶</span>"))
         .append($("<span id='dicom-settings-button' class='dicom-button' title='open settings'>&#9881;</span>"))
@@ -599,14 +617,14 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
         //cornerstone.loadAndCacheImage(imageIds[0]).then(function(image) {
         cornerstone.loadAndCacheImage(imageIds[0]).then(function (image) {
 
-            //console.log("LOAD and cache, then", image);
-            loadCornerstoneMainImage(element, image, stack, db, load_as_stack);
+                //console.log("LOAD and cache, then", image);
+                loadCornerstoneMainImage(element, image, stack, db, load_as_stack);
 
-            let load_annotation_image = true;
-            if (load_annotation_image) {
-                getNextAnnotationImage(element)
-            }
-        })
+                let load_annotation_image = true;
+                if (load_annotation_image) {
+                    getNextAnnotationImage(element)
+                }
+            })
             .catch((err, err2) => {
                 console.log(err);
                 $("#dicom-log-panel").append("<br/>").append(err.stack);
@@ -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.keyup((evt) => { keyUpHandler(evt, element) });
+    main_element.keydown((evt) => {
+        keyDownHandler(evt, element)
+    });
+    main_element.keyup((evt) => {
+        keyUpHandler(evt, element)
+    });
 
 
 }
@@ -747,7 +771,7 @@ function keyDownHandler(e, element) {
         if (e.altKey ? true : false) {
             loadStackIndex(x, element);
             e.preventDefault();
-        } else { }
+        } else {}
     }
 
     switch (charCode) {
@@ -771,8 +795,8 @@ function keyDownHandler(e, element) {
             //toggleFlagged();
             break;
 
-        // Numbers 1-9 select the corresponding answer (if it exists)
-        // TODO: fix for multi question questions
+            // Numbers 1-9 select the corresponding answer (if it exists)
+            // TODO: fix for multi question questions
         case 49: // 1
             numberKeyPressed(e, 0);
             break;
@@ -816,7 +840,7 @@ function keyDownHandler(e, element) {
             //e.preventDefault();
             break;
 
-        // Vim like scrolling (incredibly important)
+            // Vim like scrolling (incredibly important)
         case 106: // j
             //window.scrollBy(0, 25);
             break;
@@ -867,8 +891,8 @@ function loadCornerstoneMainImage(element, image, stack, db, load_as_stack) {
 
     cornerstoneTools.addToolForElement(element, ArrowAnnotateTool, {
         configuration: {
-            getTextCallback: () => { },
-            changeTextCallback: () => { },
+            getTextCallback: () => {},
+            changeTextCallback: () => {},
             allowEmptyLabel: true,
             renderDashed: false,
             drawHandles: false,
@@ -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();
     });
 }
@@ -1182,7 +1214,7 @@ export function getNextAnnotationImage(element) {
 
     if (annotated_images.length > 0) {
         let offset = current_image;
-        for( let i=0; i < image_ids.length; i++) {
+        for (let i = 0; i < image_ids.length; i++) {
             let pointer = (i + offset) % image_ids.length;
             if (annotated_images.includes(image_ids[pointer])) {
                 loadStackIndex(pointer, element);

index.html

@@ -11,7 +11,7 @@
     <script src="lib/cornerstone/cornerstone.min.js"></script>
     <script src="lib/cornerstone/dicomParser.min.js"></script>
     <script src="lib/cornerstone/cornerstoneMath.min.js"></script>
-    <script src="lib/cornerstone/cornerstoneTools.min.js"></script>
+    <script src="lib/cornerstone/cornerstoneTools.js"></script>
     <script src="lib/cornerstone/cornerstoneWebImageLoader.min.js"></script>
     <script src="lib/cornerstone/cornerstoneWADOImageLoader.min.js"></script>
     <script src="lib/cornerstone/cornerstone-base64-image-loader.umd.js"></script>