Merge pull request matplotlib#3965 from tacaswell/js_fixes

pelson · pelson · commit 1a1b82d090de · 2015-01-11T21:42:00.000Z
Js fixes for key events + ipython notebooks
diff --git a/lib/matplotlib/backends/web_backend/mpl.js b/lib/matplotlib/backends/web_backend/mpl.js
@@ -40,11 +40,12 @@ mpl.figure = function(figure_id, websocket, ondownload, parent_element) {
     this.rubberband_context = undefined;
     this.format_dropdown = undefined;
 
-    this.focus_on_mousover = false;
     this.image_mode = 'full';
 
     this.root = $('<div/>');
+    this._root_extra_style(this.root)
     this.root.attr('style', 'display: inline-block');
+
     $(parent_element).append(this.root);
 
     this._init_header(this);
@@ -93,6 +94,15 @@ mpl.figure.prototype._init_header = function() {
     this.header = titletext[0];
 }
 
+mpl.figure.prototype._canvas_extra_style = function(canvas_div) {
+
+}
+
+
+mpl.figure.prototype._root_extra_style = function(canvas_div) {
+
+}
+
 mpl.figure.prototype._init_canvas = function() {
     var fig = this;
 
@@ -101,17 +111,22 @@ mpl.figure.prototype._init_canvas = function() {
         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 canvas = $('<canvas/>');
-    canvas.addClass('mpl-canvas');
-    canvas.attr('style', "left: 0; top: 0; z-index: 0;")
+    canvas_div.attr('style', 'position: relative; clear: both; outline: 0');
 
     function canvas_keyboard_event(event) {
         return fig.key_event(event, event['data']);
     }
 
+    canvas_div.keydown('key_press', canvas_keyboard_event);
+    canvas_div.keydown('key_release', canvas_keyboard_event);
+    this.canvas_div = canvas_div
+    this._canvas_extra_style(canvas_div)
+    this.root.append(canvas_div);
+
+    var canvas = $('<canvas/>');
+    canvas.addClass('mpl-canvas');
+    canvas.attr('style', "left: 0; top: 0; z-index: 0; outline: 0")
+
     this.canvas = canvas[0];
     this.context = canvas[0].getContext("2d");
 
@@ -131,9 +146,6 @@ mpl.figure.prototype._init_canvas = function() {
     canvas_div.append(canvas);
     canvas_div.append(rubberband);
 
-    canvas_div.keydown('key_press', canvas_keyboard_event);
-    canvas_div.keydown('key_release', canvas_keyboard_event);
-
     this.rubberband = rubberband;
     this.rubberband_canvas = rubberband[0];
     this.rubberband_context = rubberband[0].getContext("2d");
@@ -155,6 +167,13 @@ mpl.figure.prototype._init_canvas = function() {
     // Set the figure to an initial 600x600px, this will subsequently be updated
     // upon first draw.
     this._resize_canvas(600, 600);
+
+    function set_focus () {
+        canvas.focus();
+        canvas_div.focus();
+    }
+
+    window.setTimeout(set_focus, 100);
 }
 
 mpl.figure.prototype._init_toolbar = function() {
@@ -172,7 +191,7 @@ mpl.figure.prototype._init_toolbar = function() {
         return fig.toolbar_button_onmouseover(event['data']);
     }
 
-    for(var toolbar_ind in mpl.toolbar_items){
+    for(var toolbar_ind in mpl.toolbar_items) {
         var name = mpl.toolbar_items[toolbar_ind][0];
         var tooltip = mpl.toolbar_items[toolbar_ind][1];
         var image = mpl.toolbar_items[toolbar_ind][2];
@@ -397,9 +416,10 @@ mpl.findpos = function(e) {
 mpl.figure.prototype.mouse_event = function(event, name) {
     var canvas_pos = mpl.findpos(event)
 
-    if (this.focus_on_mouseover && name === 'motion_notify')
+    if (name === 'button_press')
     {
         this.canvas.focus();
+        this.canvas_div.focus();
     }
 
     var x = canvas_pos.x;
@@ -422,7 +442,7 @@ mpl.figure.prototype.key_event = function(event, name) {
         return;
     }
 
-    value = '';
+    var value = '';
     if (event.ctrlKey) {
         value += "ctrl+";
     }
@@ -432,6 +452,7 @@ mpl.figure.prototype.key_event = function(event, name) {
     value += String.fromCharCode(event.keyCode).toLowerCase();
 
     this.send_message(name, {key: value});
+    return false;
 }
 
 mpl.figure.prototype.toolbar_button_onclick = function(name) {
@@ -448,18 +469,18 @@ mpl.figure.prototype.toolbar_button_onmouseover = function(tooltip) {
     this.message.textContent = tooltip;
 };
 
-mpl.debounce_event = function(func, time){
+mpl.debounce_event = function(func, time) {
     var timer;
-    return function(event){
+    return function(event) {
         clearTimeout(timer);
-        timer = setTimeout(function(){ func(event); }, time);
+        timer = setTimeout(function() { func(event); }, time);
     };
 }
 
-mpl.debounce_resize = function(func, time){
+mpl.debounce_resize = function(func, time) {
     var timer;
-    return function(event, ui){
+    return function(event, ui) {
         clearTimeout(timer);
-        timer = setTimeout(function(){ func(event, ui); }, time);
+        timer = setTimeout(function() { func(event, ui); }, time);
     };
 }
diff --git a/lib/matplotlib/backends/web_backend/nbagg_mpl.js b/lib/matplotlib/backends/web_backend/nbagg_mpl.js
@@ -123,6 +123,25 @@ mpl.figure.prototype._init_toolbar = function() {
     titlebar.prepend(buttongrp);
 }
 
+
+mpl.figure.prototype._canvas_extra_style = function(el){
+    // this is important to make the div 'focusable
+    el.attr('tabindex', 0)
+    // reach out to IPython and tell the keyboard manager to turn it's self
+    // off when our div gets focus
+
+    // location in version 3
+    if (IPython.notebook.keyboard_manager) {
+        IPython.notebook.keyboard_manager.register_events(el);
+    }
+    else {
+        // location in version 2
+        IPython.keyboard_manager.register_events(el);
+    }
+
+}
+
+
 mpl.find_output_cell = function(html_output) {
     // Return the cell and output element which can be found *uniquely* in the notebook.
     // Note - this is a bit hacky, but it is done because the "notebook_saving.Notebook"
diff --git a/lib/matplotlib/backends/web_backend/nbagg_uat.ipynb b/lib/matplotlib/backends/web_backend/nbagg_uat.ipynb
@@ -1,13 +1,24 @@
 {
  "metadata": {
   "name": "",
-  "signature": "sha256:1d491e506b54b126f6971897d3249a9e6f96f9d50bf4e4ba8d179c6b7b1aefa8"
+  "signature": "sha256:43daeaae8ae9fd496fc33d7a64639194bc009b755d28c23cd6329f225628197c"
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "from __future__ import print_function\n",
+      "from imp import reload"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": []
+    },
     {
      "cell_type": "markdown",
      "metadata": {},
@@ -152,7 +163,7 @@
      "cell_type": "code",
      "collapsed": false,
      "input": [
-      "print matplotlib.backends.backend_nbagg.connection_info()"
+      "print(matplotlib.backends.backend_nbagg.connection_info())"
      ],
      "language": "python",
      "metadata": {},
@@ -384,6 +395,39 @@
      "language": "python",
      "metadata": {},
      "outputs": []
+    },
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
+      "### UAT 16 - key events\n",
+      "\n",
+      "Pressing any keyboard key or mouse button should cycle the line line while the figure has focus.  The figure should have focus by default when it is created and re-gain it by clicking on the canvas.  Clicking anywhere outside of the figure should release focus, but moving the mouse out of the figure should not release focus."
+     ]
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "import itertools\n",
+      "fig, ax = plt.subplots()\n",
+      "x = np.linspace(0,10,10000)\n",
+      "y = np.sin(x)\n",
+      "ln, = ax.plot(x,y)\n",
+      "evt = []\n",
+      "colors = iter(itertools.cycle(['r', 'g', 'b', 'k', 'c']))\n",
+      "def on_event(event):\n",
+      "    evt.append(event)\n",
+      "    ln.set_color(next(colors))\n",
+      "    fig.canvas.draw()\n",
+      "    fig.canvas.draw_idle()\n",
+      "fig.canvas.mpl_connect('button_press_event', on_event)\n",
+      "fig.canvas.mpl_connect('key_press_event', on_event)\n",
+      "plt.show()"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": []
     }
    ],
    "metadata": {}
