Aug 1, 2014
diff --git a/lib/matplotlib/backends/web_backend/mpl.js b/lib/matplotlib/backends/web_backend/mpl.js
    this.rubberband_context = undefined;
    this.format_dropdown = undefined;

    this.focus_on_mousover = false;
    this.focus_on_mouseover = false;

    this.root = $('<div/>');
    this.root.attr('style', 'display: inline-block');
    var fig = this;

    var canvas_div = $('<div/>');
    canvas_div.resizable({ resize: mpl.debounce_resize(
        function(event, ui) { fig.request_resize(ui.size.width, ui.size.height); }
        , 50)});

    canvas_div.attr('style', 'position: relative; clear: both;');
    this.root.append(canvas_div);

    var rubberband = $('<canvas/>');
    rubberband.attr('style', "position: absolute; left: 0; top: 0; z-index: 1;")

    var ignore_mouse_events = false;

    // The if statement below should just be implemented directly in CSS...
    if (!$("head").hasClass("boxme"))
    {
        $("<style type='text/css'> .boxme { background-color: lightgray; border: 1px solid gray;} </style>").appendTo("head");
    }

    canvas_div.resizable({
        start: function(event, ui) {
            ignore_mouse_events = true;
            ctx = fig.context;
            var canvas = ctx.canvas;
            canvas.blur(); // removes focus if focused (may need more work?)
            canvas_div.addClass("boxme");

            /// Clearing the canvas
            // Store the current transformation matrix
            ctx.save();
            // Use the identity matrix while clearing the canvas
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            // Restore the transform
            ctx.restore();
        },
        stop: function(event, ui) {
            ignore_mouse_events = false;
            fig.request_resize(ui.size.width, ui.size.height);
            canvas_div.removeClass("boxme");
        },
    });

    function mouse_event_fn(event) {
        return fig.mouse_event(event, event['data']);
        if (ignore_mouse_events == false)
        {
            return fig.mouse_event(event, event['data']);
        }
    }
    rubberband.mousedown('button_press', mouse_event_fn);
    rubberband.mouseup('button_release', mouse_event_fn);
 };

 mpl.figure.prototype.mouse_event = function(event, name) {
    var canvas_pos = mpl.findpos(event)
    var canvas_pos = mpl.findpos(event);

    if (this.focus_on_mouseover && name === 'motion_notify')
    {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -40,7 +40,7 @@ mpl.figure = function(figure_id, websocket, ondownload, parent_element) {
		this.rubberband_context = undefined;
		this.format_dropdown = undefined;

		this.focus_on_mousover = false;
		this.focus_on_mouseover = false;

		this.root = $('<div/>');
		this.root.attr('style', 'display: inline-block');
Expand DownExpand Up		@@ -89,9 +89,6 @@ mpl.figure.prototype._init_canvas = function() {
		var fig = this;

		var canvas_div = $('<div/>');
		canvas_div.resizable({ resize: mpl.debounce_resize(
		function(event, ui) { fig.request_resize(ui.size.width, ui.size.height); }
		, 50)});

		canvas_div.attr('style', 'position: relative; clear: both;');
		this.root.append(canvas_div);
Expand All		@@ -109,8 +106,44 @@ mpl.figure.prototype._init_canvas = function() {

		var rubberband = $('<canvas/>');
		rubberband.attr('style', "position: absolute; left: 0; top: 0; z-index: 1;")

		var ignore_mouse_events = false;

		// The if statement below should just be implemented directly in CSS...
		if (!$("head").hasClass("boxme"))
		{
		$("<style type='text/css'> .boxme { background-color: lightgray; border: 1px solid gray;} </style>").appendTo("head");
		}

		canvas_div.resizable({
		start: function(event, ui) {
		ignore_mouse_events = true;
		ctx = fig.context;
		var canvas = ctx.canvas;
		canvas.blur(); // removes focus if focused (may need more work?)
		canvas_div.addClass("boxme");

		/// Clearing the canvas
		// Store the current transformation matrix
		ctx.save();
		// Use the identity matrix while clearing the canvas
		ctx.setTransform(1, 0, 0, 1, 0, 0);
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		// Restore the transform
		ctx.restore();
		},
		stop: function(event, ui) {
		ignore_mouse_events = false;
		fig.request_resize(ui.size.width, ui.size.height);
		canvas_div.removeClass("boxme");
		},
		});

		function mouse_event_fn(event) {
		return fig.mouse_event(event, event['data']);
		if (ignore_mouse_events == false)
		{
		return fig.mouse_event(event, event['data']);
		}
		}
		rubberband.mousedown('button_press', mouse_event_fn);
		rubberband.mouseup('button_release', mouse_event_fn);
Expand DownExpand Up		@@ -379,7 +412,7 @@ mpl.findpos = function(e) {
		};

		mpl.figure.prototype.mouse_event = function(event, name) {
		var canvas_pos = mpl.findpos(event)
		var canvas_pos = mpl.findpos(event);

		if (this.focus_on_mouseover && name === 'motion_notify')
		{
Expand Down