improve marking layout

anatomy/static/css/anatomy.css

@@ -98,3 +98,12 @@ button a {
   width: 50%;
   float: right;
 }
+
+#dicom-element {
+  width: 60%;
+  float: left;
+}
+
+.marking {
+  float: right;
+}

anatomy/static/js/anatomy.js

@@ -1,4 +1,3 @@
-var dwvapp = [];
 
 var marked_answers = {
     "correct": [],
@@ -50,13 +49,29 @@ cornerstone.enable(element);
 cornerstone.loadAndCacheImage(imageId).then(function(image) {
   cornerstone.displayImage(element, image);
 
+  const PanTool = cornerstoneTools.PanTool;
+  const ZoomTool = cornerstoneTools.ZoomTool;
+  const ZoomMouseWheelTool = cornerstoneTools.ZoomMouseWheelTool;
+  const WwwcTool = cornerstoneTools.WwwcTool;
+  const WwwcRegionTool = cornerstoneTools.WwwcRegionTool;
+  const RotateTool = cornerstoneTools.RotateTool;
+  const StackScrollTool = cornerstoneTools.StackScrollTool;
+  const MagnifyTool = cornerstoneTools.MagnifyTool;
+
+  cornerstoneTools.addTool(PanTool);
+  cornerstoneTools.addTool(ZoomTool);
+  cornerstoneTools.addTool(ZoomMouseWheelTool);
+  cornerstoneTools.addTool(WwwcTool);
+  cornerstoneTools.addTool(WwwcRegionTool);
+  cornerstoneTools.addTool(RotateTool);
+  cornerstoneTools.addTool(StackScrollTool);
+  cornerstoneTools.addTool(MagnifyTool);
   // Enable our tools
-  cornerstoneTools.mouseInput.enable(element);
+
-  cornerstoneTools.mouseWheelInput.enable(element);
+  cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 1 });
-  cornerstoneTools.wwwc.activate(element, 1); // Left Click
+  cornerstoneTools.setToolActive("WwwcTool", { mouseButtonMask: 2 });
-  cornerstoneTools.pan.activate(element, 2); // Middle Click
+  cornerstoneTools.setToolActive("ZoomMouseWheel", { mouseButtonMask: 3 });
-  cornerstoneTools.zoom.activate(element, 4); // Right Click
+  cornerstoneTools.setToolActive("Zoom", { mouseButtonMask: 4 });
-  cornerstoneTools.zoomWheel.activate(element); // Mouse Wheel
 });
     }
 

anatomy/templates/anatomy/exam.html

@@ -41,7 +41,7 @@
 <table>
     <tr>
         <td>
-            <div class=dwv-container data-url="{{ question.image.url}}" />
+            <div id="dicom-element" data-url="{{ question.image.url}}" />
             </div>
 
             <form method="POST" class="post-form">{% csrf_token %}

anatomy/templates/anatomy/mark.html

@@ -4,6 +4,8 @@
 <h2>Marking question {{question_details.current}} of {{question_details.total}}</h2>
 <p>{{ question.question_type }}</p>
 
+<div id="dicom-element" data-url="{{ question.image.url}}" />
+<div class="marking">
 <form method="POST" class="post-form">{% csrf_token %}
     <div class="marking-list">Marked:
         <ul id="marked-answer-list" class="answer-list">
@@ -38,6 +40,6 @@
         {{ form.as_p }}
     </span>
 </form>
-<div id="dicom-element" data-url="{{ question.image.url}}" />
+</div>
 </div>
 {% endblock %}