Respect the widget layout

This will make the view respect the widget layout. If the widget layout
width/height is too small for the plot, scrollbars will appear. If the
widget layout width/height is set to "auto", the plot size will control
the widget view size.

Signed-off-by: martinRenou <[email protected]>

Author: martinRenou

js/src/mpl_widget.css

@@ -1,13 +1,13 @@
 .jupyter-matplotlib {
-  flex: 1 1 auto;
   width: auto;
   height: auto;
+  flex: 1 1 auto;
 }
 
 /* Toolbar */
 
 .jupyter-matplotlib-toolbar {
-  flex: 0 0 auto;
+  overflow: visible;
 }
 
 .jupyter-matplotlib-button {
@@ -24,11 +24,15 @@
   overflow: hidden;
 }
 
-.jupyter-matplotlib-canvas_div {
+.jupyter-matplotlib-canvas-container {
+  overflow: auto;
+}
+
+.jupyter-matplotlib-canvas-div {
   margin: 2px;
   flex: 1 1 auto;
 }
 
-.jupyter-matplotlib-canvas_div:focus {
+.jupyter-matplotlib-canvas-div:focus {
   outline: 1px solid var(--jp-widgets-input-focus-border-color);
 }

js/src/mpl_widget.js

@@ -339,17 +339,21 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
     },
 
     _init_canvas: function() {
+        var canvas_container = document.createElement('div');
+        canvas_container.classList = 'jupyter-widgets jupyter-matplotlib-canvas-container';
+        this.figure.appendChild(canvas_container);
+
         var canvas_div = this.canvas_div = document.createElement('div');
         canvas_div.style.position = 'relative';
         canvas_div.style.clear = 'both';
-        canvas_div.classList = 'jupyter-widgets jupyter-matplotlib-canvas_div';
+        canvas_div.classList = 'jupyter-widgets jupyter-matplotlib-canvas-div';
 
         canvas_div.addEventListener('keydown', this.key_event('key_press'));
         canvas_div.addEventListener('keyup', this.key_event('key_release'));
 
         // this is important to make the div 'focusable'
         canvas_div.setAttribute('tabindex', 0);
-        this.figure.appendChild(canvas_div);
+        canvas_container.appendChild(canvas_div);
 
         var canvas = this.canvas = document.createElement('canvas');
         canvas.style.display = 'block';
@@ -520,12 +524,6 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
                                         step: event.step,
                                         guiEvent: utils.get_simple_keys(event)});
             }
-
-            /* This prevents the web browser from automatically changing to
-             * the text insertion cursor when the button is pressed.  We want
-             * to control all of the cursor setting manually through the
-             * 'cursor' event from matplotlib */
-            event.preventDefault();
         };
     },