Add a few annotation tools (and only enable for main element)

dicomViewer.css

@@ -30,6 +30,8 @@
 .thumb {
   position: relative;
   border: 1px dotted blue;
+  touch-action: none;
+  user-select: none;
 }
 
 .thumb-active {

dicomViewer.js

@@ -20,6 +20,7 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
 
     let single_dicom_viewer = main_element.find(".single-dicom-viewer").get(0);
     console.log(single_dicom_viewer);
+
     // Add generic settings menus to canvas-panel
     $(".canvas-panel").append(
             $(`<div id='dicom-settings-panel'>
@@ -162,6 +163,8 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
         images = [images];
     }
 
+    console.log("Images", images)
+
     //let annotations = [];
     //if (annotations_to_load) { 
     //annotations = annotations_to_load[figure_to_load.split("-")[1]];
@@ -192,7 +195,7 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
     }
 
     async function load(images, annotations) {
-        console.log("LOAD");
+        console.log("LOAD", images);
         let imageIds = [];
         for (let i = 0; i < images.length; i++) {
             let data_url = images[i];
@@ -223,11 +226,13 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
                 //});
             } else {
                 let url;
-                if (data_url.startsWith("http")) {
+                // This doesn't seem to have any benefit
-                    url = data_url;
+                //if (data_url.startsWith("http")) {
-                } else {
+                //    url = data_url;
-                    url = window.location.href.replace(/\/\#\/?$/, '') + "/" + data_url
+                //} else {
-                }
+                //    url = window.location.href.replace(/\/\#\/?$/, '') + "/" + data_url
+                //}
+                url = data_url;
 
                 if (url.endsWith("dcm")) {
                     url = "wadouri:" + url;
@@ -279,6 +284,7 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
             $("#thumb-" + id).click(selectThumbClick).mousedown(stopEvent);
 
             let image_url = images[id];
+            console.log(image_url)
 
             let img;
 
@@ -340,6 +346,7 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
                 } else {
 
                     let url = "wadouri:" + image_url;
+                    console.log(url)
                     cornerstone.loadAndCacheImage(url).then(function (image) {
                         img = $("<div></div>").get(0);
                         img.id = "thumb-image-" + id;
@@ -377,6 +384,7 @@ function loadCornerstoneMainImage(element, image, stack, db, load_as_stack) {
     const StackScrollTool = cornerstoneTools.StackScrollTool;
     const MagnifyTool = cornerstoneTools.MagnifyTool;
     const ArrowAnnotateTool = cornerstoneTools.ArrowAnnotateTool;
+    const RectangleRoiTool = cornerstoneTools.RectangleRoiTool;
     const LengthTool = cornerstoneTools.LengthTool;
 
     console.log("enable element", element);
@@ -387,18 +395,20 @@ function loadCornerstoneMainImage(element, image, stack, db, load_as_stack) {
     cornerstoneTools.addStackStateManager(element, ["stack"]);
     cornerstoneTools.addToolState(element, "stack", stack);
 
-    cornerstoneTools.addTool(PanTool);
+    cornerstoneTools.addToolForElement(element, PanTool);
-    cornerstoneTools.addTool(ZoomTool);
+    cornerstoneTools.addToolForElement(element, ZoomTool);
-    cornerstoneTools.addTool(ZoomMouseWheelTool);
+    cornerstoneTools.addToolForElement(element, ZoomMouseWheelTool);
-    cornerstoneTools.addTool(StackScrollMouseWheelTool);
+    cornerstoneTools.addToolForElement(element, StackScrollMouseWheelTool);
-    cornerstoneTools.addTool(WwwcTool);
+    cornerstoneTools.addToolForElement(element, WwwcTool);
-    cornerstoneTools.addTool(WwwcRegionTool);
+    cornerstoneTools.addToolForElement(element, WwwcRegionTool);
-    cornerstoneTools.addTool(RotateTool);
+    cornerstoneTools.addToolForElement(element, RotateTool);
-    cornerstoneTools.addTool(StackScrollTool);
+    cornerstoneTools.addToolForElement(element, StackScrollTool);
-    cornerstoneTools.addTool(MagnifyTool);
+    cornerstoneTools.addToolForElement(element, MagnifyTool);
-    cornerstoneTools.addTool(LengthTool);
+    cornerstoneTools.addToolForElement(element, LengthTool);
+    //cornerstoneTools.addTool(ArrowAnnotateTool);
+    //cornerstoneTools.addTool(RectangleRoiTool);
 
-    cornerstoneTools.addTool(ArrowAnnotateTool, {
+    cornerstoneTools.addToolForElement(element, ArrowAnnotateTool, {
         configuration: {
             getTextCallback: () => { },
             changeTextCallback: () => { },
@@ -408,6 +418,16 @@ function loadCornerstoneMainImage(element, image, stack, db, load_as_stack) {
             drawHandlesOnHover: true,
         },
     });
+    cornerstoneTools.addToolForElement(element, RectangleRoiTool, {
+        configuration: {
+            showHounsfieldUnits: false,
+            showMinMax: false,
+            allowEmptyLabel: true,
+            renderDashed: false,
+            drawHandles: false,
+            drawHandlesOnHover: true,
+        },
+    });
 
     cornerstoneTools.setToolEnabled("ArrowAnnotate");
 
@@ -421,6 +441,8 @@ function loadCornerstoneMainImage(element, image, stack, db, load_as_stack) {
         "StackScroll",
         "Magnify",
         "Length",
+        "ArrowAnnotate",
+        "RectangleRoi",
     ];
     $(".mouse-binding-select option").remove();
 
@@ -641,4 +663,8 @@ function urltoFile(url, filename, mimeType) {
         .then(function (buf) {
             return new File([buf], filename, { type: mimeType });
         });
+}
+
+function saveAnnotations() {
+
 }