Fix scale of mouse events when in HiDPI mode

mdboom · mdboom · commit c08e2510f21b · 2015-11-17T14:39:50.000-05:00
diff --git a/lib/matplotlib/backends/web_backend/mpl.js b/lib/matplotlib/backends/web_backend/mpl.js
@@ -60,8 +60,8 @@ mpl.figure = function(figure_id, websocket, ondownload, parent_element) {
     this.ws.onopen =  function () {
             fig.send_message("supports_binary", {value: fig.supports_binary});
             fig.send_message("send_image_mode", {});
-            if (fig.ratio != 1) {
-                fig.send_message("set_dpi_ratio", {'dpi_ratio': fig.ratio});
+            if (mpl.ratio != 1) {
+                fig.send_message("set_dpi_ratio", {'dpi_ratio': mpl.ratio});
             }
             fig.send_message("refresh", {});
         }
@@ -139,7 +139,7 @@ mpl.figure.prototype._init_canvas = function() {
 	this.context.oBackingStorePixelRatio ||
 	this.context.backingStorePixelRatio || 1;
 
-    this.ratio = (window.devicePixelRatio || 1) / backingStore;
+    mpl.ratio = (window.devicePixelRatio || 1) / backingStore;
 
     var rubberband = $('<canvas/>');
     rubberband.attr('style', "position: absolute; left: 0; top: 0; z-index: 1;")
@@ -197,8 +197,8 @@ mpl.figure.prototype._init_canvas = function() {
         canvas_div.css('width', width)
         canvas_div.css('height', height)
 
-        canvas.attr('width', width * this.ratio);
-        canvas.attr('height', height * this.ratio);
+        canvas.attr('width', width * mpl.ratio);
+        canvas.attr('height', height * mpl.ratio);
         canvas.attr('style', 'width: ' + width + 'px; height: ' + height + 'px;');
 
         rubberband.attr('width', width);
@@ -332,10 +332,10 @@ mpl.figure.prototype.handle_resize = function(fig, msg) {
 }
 
 mpl.figure.prototype.handle_rubberband = function(fig, msg) {
-    var x0 = msg['x0'];
-    var y0 = fig.canvas.height - msg['y0'];
-    var x1 = msg['x1'];
-    var y1 = fig.canvas.height - msg['y1'];
+    var x0 = msg['x0'] / mpl.ratio;
+    var y0 = (fig.canvas.height - msg['y0']) / mpl.ratio;
+    var x1 = msg['x1'] / mpl.ratio;
+    var y1 = (fig.canvas.height - msg['y1']) / mpl.ratio;
     x0 = Math.floor(x0) + 0.5;
     y0 = Math.floor(y0) + 0.5;
     x1 = Math.floor(x1) + 0.5;
@@ -491,8 +491,8 @@ mpl.figure.prototype.mouse_event = function(event, name) {
         this.canvas_div.focus();
     }
 
-    var x = canvas_pos.x;
-    var y = canvas_pos.y;
+    var x = canvas_pos.x * mpl.ratio;
+    var y = canvas_pos.y * mpl.ratio;
 
     this.send_message(name, {x: x, y: y, button: event.button,
                              step: event.step,
