cduck.me
1javascript = '''
2require.undef('drawingview');
3
4define('drawingview', ["@jupyter-widgets/base"], function(widgets) {
5 var DrawingView = widgets.DOMWidgetView.extend({
6 render: function() {
7 this.container = document.createElement('a');
8 this.image_changed();
9 this.container.appendChild(this.svg_view);
10 this.el.appendChild(this.container);
11 this.model.on('change:_image', this.image_changed, this);
12 },
13 image_changed: function() {
14 this.container.innerHTML = this.model.get('_image');
15 this.svg_view = this.container.getElementsByTagName('svg')[0];
16 this.cursor_point = this.svg_view.createSVGPoint();
17 this.register_events();
18 },
19 send_mouse_event: function(name, e) {
20 if (this.model.get('disable')) {
21 return;
22 }
23 if (this.model.get('throttle')) {
24 this.model.set('_mousemove_blocked', true);
25 this.model.save_changes();
26 }
27
28 this.cursor_point.x = e.clientX;
29 this.cursor_point.y = e.clientY;
30 var svg_pt = this.cursor_point.matrixTransform(
31 this.svg_view.getScreenCTM().inverse());
32
33 this.send({
34 name: name,
35 x: svg_pt.x,
36 y: -svg_pt.y,
37 type: e.type,
38 button: e.button,
39 buttons: e.buttons,
40 shiftKey: e.shiftKey,
41 altKey: e.altKey,
42 ctrlKey: e.ctrlKey,
43 metaKey: e.metaKey,
44 clientX: e.clientX,
45 clientY: e.clientY,
46 movementX: e.movementX,
47 movementY: e.movementY,
48 timeStamp: e.timeStamp,
49 targetId: e.target ? e.target.id : null,
50 currentTargetId: e.currentTarget ? e.currentTarget.id : null,
51 relatedTargetId: e.relatedTarget ? e.relatedTarget.id : null,
52 });
53 },
54 register_events: function() {
55 var widget = this;
56 this.svg_view.addEventListener('mousedown', function(e) {
57 e.preventDefault();
58 widget.send_mouse_event('mousedown', e);
59 });
60 this.svg_view.addEventListener('mousemove', function(e) {
61 e.preventDefault();
62 if (!widget.model.get('_mousemove_blocked')) {
63 widget.send_mouse_event('mousemove', e);
64 }
65 });
66 this.svg_view.addEventListener('mouseup', function(e) {
67 e.preventDefault();
68 widget.send_mouse_event('mouseup', e);
69 });
70 }
71 });
72
73 return {
74 DrawingView: DrawingView
75 };
76});
77'''