From 10f83b7dd956889f7e2b3ba8985ed5a49b6e063e Mon Sep 17 00:00:00 2001
From: Luca Lianas <luca.lianas@crs4.it>
Date: Mon, 21 Nov 2016 16:44:24 +0100
Subject: [PATCH 1/3] bug fix

---
 src/js/annotations_controller.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/annotations_controller.js b/src/js/annotations_controller.js
index 60fcd14..4fd9f9d 100644
--- a/src/js/annotations_controller.js
+++ b/src/js/annotations_controller.js
@@ -421,8 +421,8 @@ function AnnotationsController(canvas_id, default_config) {
     this.drawLine = function(shape_id, from_x, from_y, to_x, to_y, transform,
                              shape_conf, refresh_view) {
         var points = [
-            {'x': from_x, 'y': from_y},
-            {'x': to_x, 'y': to_y}
+            {'point': {'x': from_x, 'y': from_y}},
+            {'point': {'x': to_x, 'y': to_y}}
         ];
         this.drawPolyline(shape_id, points, transform, shape_conf, refresh_view);
     };

From d7fc4359fff8a7e33a7c91bc060693c3e69f3861 Mon Sep 17 00:00:00 2001
From: Luca Lianas <luca.lianas@crs4.it>
Date: Mon, 21 Nov 2016 17:10:06 +0100
Subject: [PATCH 2/3] annotation canvas automatically resize when needed to
 always match viewer's size

---
 src/js/annotations_controller.js |  6 +++---
 src/js/viewport_controller.js    | 30 ++++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/js/annotations_controller.js b/src/js/annotations_controller.js
index 4fd9f9d..ea2fc03 100644
--- a/src/js/annotations_controller.js
+++ b/src/js/annotations_controller.js
@@ -27,15 +27,15 @@ function AnnotationsController(canvas_id, default_config) {
             if (canvas.length === 0) {
                 console.log('Creating a new canvas');
                 // create a canvas that will be used by paper.js
-                var canvas_size = viewport_controller.getCanvasSize();
                 $("body").append("<canvas id='" + this.canvas_id + "'></canvas>");
-                canvas.attr("width", canvas_size.width)
-                      .attr("height", canvas_size.height);
                 this.canvas = canvas[0];
             } else {
                 console.log('Using an existing canvas');
                 this.canvas = canvas[0];
             }
+            var canvas_size = viewport_controller.getCanvasSize();
+            $(this.canvas).width(canvas_size.width)
+                .height(canvas_size.height);
 
             this.paper_scope.setup(this.canvas);
             // clean the canvas
diff --git a/src/js/viewport_controller.js b/src/js/viewport_controller.js
index 0d3af0c..79f6130 100644
--- a/src/js/viewport_controller.js
+++ b/src/js/viewport_controller.js
@@ -195,5 +195,35 @@ function ViewerController(div_id, prefix_url, tile_sources, viewer_config, image
             var img_zoom = event.eventSource.viewport_controller.getImageZoom();
             event.eventSource.annotations_controller.setZoom(img_zoom);
         });
+
+        this.viewer.addHandler('resize', function (event) {
+            var vctrl = event.eventSource.viewport_controller;
+            var actrl = event.eventSource.annotations_controller;
+
+            // get existing shapes and existing markers
+            var shapes = actrl.getShapesJSON();
+            if (actrl.getMarkersID) {
+                var markers_ids = actrl.getMarkersID();
+            } else {
+                var markers_ids = [];
+            }
+
+            // clear and rebuild canvas
+            actrl.clear();
+            actrl.canvas = undefined;
+            actrl.buildAnnotationsCanvas(vctrl);
+
+            // update zoom level and center of the canvas
+            var zoom = vctrl.getImageZoom();
+            actrl.setZoom(zoom);
+            var center = vctrl.getCenter();
+            actrl.setCenter(center.x, center.y);
+
+            // redraw shapes
+            actrl.drawShapesFromJSON(shapes);
+            if (markers_ids.length > 0) {
+                actrl.shapesToMarkers(markers_ids);
+            }
+        });
     };
 }

From bb02186eedf2867a2f8db6341dfabf7c263b5f53 Mon Sep 17 00:00:00 2001
From: Luca Lianas <luca.lianas@crs4.it>
Date: Mon, 21 Nov 2016 17:10:19 +0100
Subject: [PATCH 3/3] "responsive" annotations canvas example

---
 .../ome_seadragon/test/test_ome_roi.html      | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/templates/ome_seadragon/test/test_ome_roi.html b/templates/ome_seadragon/test/test_ome_roi.html
index bff6b1f..4a54af4 100644
--- a/templates/ome_seadragon/test/test_ome_roi.html
+++ b/templates/ome_seadragon/test/test_ome_roi.html
@@ -4,15 +4,19 @@
     <meta charset="UTF-8">
     <title>OPENSEADRAGON TEST VIEWER WITH ANNOTATIONS</title>
 
+    <link href="{{ host_name }}/static/ome_seadragon/css/bootstrap.min.css" rel="stylesheet">
+
     <style type="text/css">
-        .container {
+        #graphic_container {
             position: relative;
+            padding: 0;
         }
 
         .graphic_element {
-            width: 800px;
-            height: 600px;
+            width:100%;
+            height: 10px;
             position: absolute;
+            padding: inherit;
         }
     </style>
 
@@ -28,6 +32,11 @@
             $.get("{{ host_name }}/ome_seadragon/deepzoom/image_mpp/{{ image_id }}.dzi").done(function(data) {
                 console.log("Loading openseadragon viewer");
 
+                $("#openseadragon_viewer").height($(window).height() - 60);
+                $(window).resize(function() {
+                    $('#openseadragon_viewer').height($(window).height() - 60);
+                });
+
                 var viewer_config = {
                     'showNavigator': true,
                     'showFullPageControl': false,
@@ -118,10 +127,12 @@
     </script>
 </head>
 <body>
-    <div id="toolbar" style="height: 40px"></div>
-    <div id="graphics_container" class="container">
-        <div id="openseadragon_viewer" class="graphic_element"></div>
-        <canvas id="annotations_canvas" class="graphic_element"></canvas>
+    <div class="container-fluid">
+        <div id="toolbar" style="height: 40px"></div>
+        <div id="graphic_container" class="col-md-12">
+            <div id="openseadragon_viewer" class="graphic_element"></div>
+            <canvas id="annotations_canvas" class="graphic_element"></canvas>
+        </div>
     </div>
 </body>
 </html>