-
Notifications
You must be signed in to change notification settings - Fork 946
/
widget_image.ts
109 lines (95 loc) · 2.78 KB
/
widget_image.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.
import {
DOMWidgetView
} from '@jupyter-widgets/base';
import {
CoreDOMWidgetModel
} from './widget_core';
import * as _ from 'underscore';
export
class ImageModel extends CoreDOMWidgetModel {
defaults() {
return _.extend(super.defaults(), {
_model_name: 'ImageModel',
_view_name: 'ImageView',
format: 'png',
width: '',
height: '',
value: new DataView(new ArrayBuffer(0))
});
}
static serializers = {
...CoreDOMWidgetModel.serializers,
value: {serialize: (value, manager) => {
return new DataView(value.buffer.slice(0));
}}
};
}
export
class ImageView extends DOMWidgetView {
render() {
/**
* Called when view is rendered.
*/
super.render();
this.pWidget.addClass('jupyter-widgets');
this.pWidget.addClass('widget-image');
this.update(); // Set defaults.
}
update() {
/**
* Update the contents of this view
*
* Called when the model is changed. The model may have been
* changed by another view or by a state update from the back-end.
*/
let url;
let format = this.model.get('format');
let value = this.model.get('value');
if (format !== 'url') {
let blob = new Blob([value], {type: `image/${this.model.get('format')}`});
url = URL.createObjectURL(blob);
} else {
url = (new TextDecoder('utf-8')).decode(value.buffer);
}
// Clean up the old objectURL
let oldurl = this.el.src;
this.el.src = url;
if (oldurl && typeof oldurl !== 'string') {
URL.revokeObjectURL(oldurl);
}
let width = this.model.get('width');
if (width !== undefined && width.length > 0) {
this.el.setAttribute('width', width);
} else {
this.el.removeAttribute('width');
}
let height = this.model.get('height');
if (height !== undefined && height.length > 0) {
this.el.setAttribute('height', height);
} else {
this.el.removeAttribute('height');
}
return super.update();
}
remove() {
if (this.el.src) {
URL.revokeObjectURL(this.el.src);
}
super.remove();
}
/**
* The default tag name.
*
* #### Notes
* This is a read-only attribute.
*/
get tagName() {
// We can't make this an attribute with a default value
// since it would be set after it is needed in the
// constructor.
return 'img';
}
el: HTMLImageElement;
}