Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Add support for rubberband drawing.

  • Loading branch information...
commit 8f414b4c7d8b54a1151384b431e08fbe12eb5c3b 1 parent bf11a13
@mdboom mdboom authored
View
9 lib/matplotlib/backends/backend_webagg.py
@@ -326,6 +326,15 @@ def set_cursor(self, cursor):
def dynamic_update(self):
self.canvas.draw_idle()
+ def draw_rubberband(self, event, x0, y0, x1, y1):
+ self.canvas.send_event(
+ "rubberband", x0=x0, y0=y0, x1=x1, y1=y1)
+
+ def release_zoom(self, event):
+ super(NavigationToolbar2WebAgg, self).release_zoom(event)
+ self.canvas.send_event(
+ "rubberband", x0=-1, y0=-1, x1=-1, y1=-1)
+
class WebAggApplication(tornado.web.Application):
initialized = False
View
26 lib/matplotlib/backends/web_static/index.html
@@ -7,15 +7,25 @@
onkeydown="key_event(event, 'key_press')"
onkeyup="key_event(event, 'key_release')">
<div id="mpl-div">
- <div id="mpl-warnings" class="mpl-warnings"></div>
+ <div id="mpl-warnings" class="mpl-warnings">
+ </div>
+
+ <div id="mpl-canvas-div"
+ style="position: relative;">
+ <canvas id="mpl-canvas"
+ class="mpl-canvas"
+ width="800" height="600"
+ style="position: absolute; left: 0; top: 0; z-index: 0">
+ </canvas>
- <canvas id="mpl-canvas"
- class="mpl-canvas"
- width="800" height="600"
- onmousedown="mouse_event(event, 'button_press')"
- onmouseup="mouse_event(event, 'button_release')"
- onmousemove="mouse_event(event, 'motion_notify')">
- </canvas>
+ <canvas id="mpl-rubberband-canvas"
+ width="800" height="600"
+ onmousedown="mouse_event(event, 'button_press')"
+ onmouseup="mouse_event(event, 'button_release')"
+ onmousemove="mouse_event(event, 'motion_notify')"
+ style="position: absolute; left: 0; top: 0; z-index: 1">
+ </canvas>
+ </div>
<div id="toolbar">
{% for name, tooltip, image, method in toolitems %}
View
34 lib/matplotlib/backends/web_static/mpl.js
@@ -24,7 +24,12 @@ window.onload = function() {
};
var message = document.getElementById("mpl-message");
+ var canvas_div = document.getElementById("mpl-canvas-div");
var canvas = document.getElementById("mpl-canvas");
+ var context = canvas.getContext("2d");
+ var rubberband_canvas = document.getElementById("mpl-rubberband-canvas");
+ var rubberband_context = rubberband_canvas.getContext("2d");
+ rubberband_context.strokeStyle = "#000000";
ws = new this.WebSocket(ws_url("ws"));
@@ -101,14 +106,35 @@ window.onload = function() {
var div = document.getElementById("mpl-div");
canvas.width = size[0];
canvas.height = size[1];
+ rubberband_canvas.width = size[0];
+ rubberband_canvas.height = size[1];
+ canvas_div.style.width = size[0];
+ canvas_div.style.height = size[1];
div.style.width = size[0];
ws.send(JSON.stringify({type: 'refresh'}));
}
break;
+
+ case 'rubberband':
+ var x0 = msg['x0'];
+ var y0 = rubberband_canvas.height - msg['y0'];
+ var x1 = msg['x1'];
+ var y1 = rubberband_canvas.height - msg['y1'];
+ x0 = Math.floor(x0) + 0.5;
+ y0 = Math.floor(y0) + 0.5;
+ x1 = Math.floor(x1) + 0.5;
+ y1 = Math.floor(y1) + 0.5;
+ var min_x = Math.min(x0, x1);
+ var min_y = Math.min(y0, y1);
+ var width = Math.abs(x1 - x0);
+ var height = Math.abs(y1 - y0);
+
+ rubberband_context.clearRect(0, 0, rubberband_canvas.width, rubberband_canvas.height);
+ rubberband_context.strokeRect(min_x, min_y, width, height);
+ break;
}
};
- var context = canvas.getContext("2d");
imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
@@ -116,9 +142,9 @@ window.onload = function() {
};
function mouse_event(event, name) {
- var canvas = document.getElementById("mpl-canvas");
- var x = event.pageX - canvas.offsetLeft;
- var y = event.pageY - canvas.offsetTop;
+ var canvas_div = document.getElementById("mpl-canvas-div");
+ var x = event.pageX - canvas_div.offsetLeft;
+ var y = event.pageY - canvas_div.offsetTop;
ws.send(JSON.stringify(
{type: name,
Please sign in to comment.
Something went wrong with that request. Please try again.