Skip to content

Commit d1c62c1

Browse files
SylvainCorlaySylvainCorlay
authored
Merge pull request #102 from martinRenou/resize
Resize
2 parents b281960 + 953e850 commit d1c62c1

File tree

3 files changed

+77
-46
lines changed

3 files changed

+77
-46
lines changed

‎js/src/mpl_widget.css

+24-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,27 @@
1-
.ipympl_button {
1+
.jupyter-matplotlib {
2+
height: 500px;
3+
flex: 1 1 auto;
4+
}
5+
6+
/* Toolbar */
7+
8+
.jupyter-matplotlib-button {
29
width: 34px; /* calc(var(--jp-widgets-inline-width-tiny) / 2 - 2px) */
310
padding: 0;
411
}
12+
13+
/* Figure */
14+
15+
.jupyter-matplotlib-figure {
16+
width: 100%;
17+
height: 100%;
18+
}
19+
20+
.jupyter-matplotlib-canvas_div {
21+
margin: 2px;
22+
flex: 1 1 auto;
23+
}
24+
25+
.jupyter-matplotlib-canvas_div:focus {
26+
outline: 1px solid; /* 1px solid var(--jp-widgets-input-focus-border-color); */
27+
}

‎js/src/mpl_widget.js

+37-28
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,7 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
3838

3939
this.figure = document.createElement('div');
4040
this.figure.addEventListener('remove', this.close.bind(this));
41-
this.figure.classList = 'jupyter-widgets widget-container widget-box widget-vbox';
42-
this.el.appendChild(this.figure);
41+
this.figure.classList = 'jupyter-matplotlib-figure jupyter-widgets widget-container widget-box widget-vbox';
4342

4443
this._init_header();
4544
this._init_canvas();
@@ -50,13 +49,15 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
5049

5150
var that = this;
5251

53-
this.create_child_view(this.model.get('toolbar')).then(function(toolbar_view) {
52+
return this.create_child_view(this.model.get('toolbar')).then(function(toolbar_view) {
5453
that.toolbar_view = toolbar_view;
5554

5655
that.update_toolbar_position();
5756

5857
that.model_events();
5958

59+
window.addEventListener('resize', that.request_resize.bind(that));
60+
6061
that.send_initialization_message();
6162
});
6263
},
@@ -79,12 +80,13 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
7980

8081
update_toolbar_visible: function() {
8182
this.toolbar_view.el.style.display = this.model.get('toolbar_visible') ? '' : 'none';
83+
this.request_resize();
8284
},
8385

8486
update_toolbar_position: function() {
8587
var toolbar_position = this.model.get('toolbar_position');
8688
if (toolbar_position == 'top' || toolbar_position == 'bottom') {
87-
this.el.classList = 'jupyter-widgets widget-container widget-box widget-vbox';
89+
this.el.classList = 'jupyter-widgets widget-container widget-box widget-vbox jupyter-matplotlib';
8890
this.model.get('toolbar').set('orientation', 'horizontal');
8991

9092
this.clear();
@@ -97,7 +99,7 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
9799
this.el.appendChild(this.toolbar_view.el);
98100
}
99101
} else {
100-
this.el.classList = 'jupyter-widgets widget-container widget-box widget-hbox';
102+
this.el.classList = 'jupyter-widgets widget-container widget-box widget-hbox jupyter-matplotlib';
101103
this.model.get('toolbar').set('orientation', 'vertical');
102104

103105
this.clear();
@@ -129,7 +131,7 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
129131
var canvas_div = this.canvas_div = document.createElement('div');
130132
canvas_div.style.position = 'relative';
131133
canvas_div.style.clear = 'both';
132-
canvas_div.style.outline = 'none';
134+
canvas_div.classList = 'jupyter-widgets jupyter-matplotlib-canvas_div';
133135

134136
canvas_div.addEventListener('keydown', this.key_event('key_press'));
135137
canvas_div.addEventListener('keyup', this.key_event('key_release'));
@@ -138,6 +140,7 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
138140
this.figure.appendChild(canvas_div);
139141

140142
var canvas = this.canvas = document.createElement('canvas');
143+
canvas.style.display = 'block';
141144
canvas.style.left = 0;
142145
canvas.style.top = 0;
143146
canvas.style.zIndex = 0;
@@ -151,9 +154,10 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
151154
this.context.oBackingStorePixelRatio ||
152155
this.context.backingStorePixelRatio || 1;
153156

154-
var ratio = this.ratio = (window.devicePixelRatio || 1) / backingStore;
157+
this.ratio = (window.devicePixelRatio || 1) / backingStore;
155158

156159
var rubberband_canvas = this.rubberband_canvas = document.createElement('canvas');
160+
rubberband_canvas.style.display = 'block';
157161
rubberband_canvas.style.position = 'absolute';
158162
rubberband_canvas.style.left = 0;
159163
rubberband_canvas.style.top = 0;
@@ -172,25 +176,6 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
172176
this.rubberband_context = rubberband_canvas.getContext('2d');
173177
this.rubberband_context.strokeStyle = '#000000';
174178

175-
this._resize_canvas = function(width, height) {
176-
// Keep the size of the canvas, canvas container, and rubber band
177-
// canvas in synch.
178-
canvas_div.style.width = width;
179-
canvas_div.style.height = height;
180-
181-
canvas.setAttribute('width', width * ratio);
182-
canvas.setAttribute('height', height * ratio);
183-
canvas.style.width = width + 'px';
184-
canvas.style.height = height + 'px';
185-
186-
rubberband_canvas.setAttribute('width', width);
187-
rubberband_canvas.setAttribute('height', height);
188-
};
189-
190-
// Set the figure to an initial 600x600px, this will subsequently be updated
191-
// upon first draw.
192-
this._resize_canvas(600, 600);
193-
194179
// Disable right mouse context menu.
195180
this.rubberband_canvas.addEventListener('contextmenu', function(e) {
196181
return false;
@@ -225,10 +210,23 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
225210
this.figure.appendChild(this.footer);
226211
},
227212

228-
request_resize: function(x_pixels, y_pixels) {
213+
request_resize: function() {
229214
// Request matplotlib to resize the figure. Matplotlib will then trigger a resize in the client,
230215
// which will in turn request a refresh of the image.
231-
this.send_message('resize', {'width': x_pixels, 'height': y_pixels});
216+
var rect = this.canvas_div.getBoundingClientRect();
217+
this.send_message('resize', {'width': rect.width, 'height': rect.height});
218+
},
219+
220+
_resize_canvas: function(width, height) {
221+
// Keep the size of the canvas, and rubber band canvas in sync.
222+
this.canvas.setAttribute('width', width * this.ratio);
223+
this.canvas.setAttribute('height', height * this.ratio);
224+
this.canvas.style.width = width + 'px';
225+
226+
this.rubberband_canvas.setAttribute('width', width * this.ratio);
227+
this.rubberband_canvas.setAttribute('height', height * this.ratio);
228+
this.rubberband_canvas.style.height = height + 'px';
229+
this.rubberband_canvas.style.height = height + 'px';
232230
},
233231

234232
send_message: function(type, message = {}) {
@@ -361,6 +359,17 @@ var MPLCanvasView = widgets.DOMWidgetView.extend({
361359
}
362360
},
363361

362+
processPhosphorMessage: function(msg) {
363+
MPLCanvasView.__super__.processPhosphorMessage.apply(this, arguments);
364+
365+
switch (msg.type) {
366+
case 'resize':
367+
// case 'after-show':
368+
this.request_resize();
369+
break;
370+
}
371+
},
372+
364373
mouse_event: function(name) {
365374
var that = this;
366375
return function(event) {

‎js/src/toolbar_widget.js

+16-17
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,9 @@ var ToolbarModel = widgets.DOMWidgetModel.extend({
2121

2222
var ToolbarView = widgets.DOMWidgetView.extend({
2323
render: function() {
24+
this.el.classList = 'jupyter-widgets jupyter-matplotlib-toolbar';
25+
this.el.classList.add('widget-container', 'widget-box');
2426
this.create_toolbar();
25-
26-
this.el.appendChild(this.toolbar_container);
27-
2827
this.model_events();
2928
},
3029

@@ -33,11 +32,9 @@ var ToolbarView = widgets.DOMWidgetView.extend({
3332

3433
this.current_action = '';
3534

36-
this.toolbar_container = document.createElement('div');
37-
this.toolbar_container.classList = this.get_container_class();
3835
this.toggle_button = document.createElement('button');
3936

40-
this.toggle_button.classList = 'ipympl_button jupyter-widgets jupyter-button';
37+
this.toggle_button.classList = 'jupyter-matplotlib-button jupyter-widgets jupyter-button';
4138
this.toggle_button.setAttribute('href', '#');
4239
this.toggle_button.setAttribute('title', 'Toggle Interaction');
4340
this.toggle_button.style.outline = 'none';
@@ -47,12 +44,10 @@ var ToolbarView = widgets.DOMWidgetView.extend({
4744
icon.classList = 'center fa fa-bars';
4845
this.toggle_button.appendChild(icon);
4946

50-
this.toolbar_container.appendChild(this.toggle_button);
51-
47+
this.el.appendChild(this.toggle_button);
5248
this.toolbar = document.createElement('div');
53-
this.toolbar.classList = this.get_container_class();
54-
this.toolbar_container.appendChild(this.toolbar);
55-
49+
this.toolbar.classList = 'widget-container widget-box';
50+
this.el.appendChild(this.toolbar);
5651
this.buttons = [this.toggle_button];
5752

5853
for(var toolbar_ind in toolbar_items) {
@@ -63,7 +58,7 @@ var ToolbarView = widgets.DOMWidgetView.extend({
6358
if (!name) { continue; };
6459

6560
var button = document.createElement('button');
66-
button.classList = 'ipympl_button jupyter-widgets jupyter-button';
61+
button.classList = 'jupyter-matplotlib-button jupyter-widgets jupyter-button';
6762
button.setAttribute('href', '#');
6863
button.setAttribute('title', tooltip);
6964
button.style.outline = 'none';
@@ -78,15 +73,19 @@ var ToolbarView = widgets.DOMWidgetView.extend({
7873
this.toolbar.appendChild(button);
7974
}
8075

76+
this.set_orientation(this.el);
77+
this.set_orientation(this.toolbar);
8178
this.set_buttons_style();
8279
},
8380

84-
get_container_class: function() {
81+
set_orientation: function(el) {
8582
var orientation = this.model.get('orientation');
8683
if (orientation == 'vertical') {
87-
return 'jupyter-widgets widget-container widget-box widget-vbox';
84+
el.classList.remove('widget-hbox');
85+
el.classList.add('widget-vbox');
8886
} else {
89-
return 'jupyter-widgets widget-container widget-box widget-hbox';
87+
el.classList.add('widget-hbox');
88+
el.classList.remove('widget-vbox');
9089
}
9190
},
9291

@@ -159,8 +158,8 @@ var ToolbarView = widgets.DOMWidgetView.extend({
159158
},
160159

161160
update_orientation: function() {
162-
this.toolbar_container.classList = this.get_container_class();
163-
this.toolbar.classList = this.get_container_class();
161+
this.set_orientation(this.el);
162+
this.set_orientation(this.toolbar);
164163
}
165164
});
166165

0 commit comments

Comments
 (0)