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 this.model.on('change:_mousemove_blocked', this.block_changed,
13 this);
14 },
15 image_changed: function() {
16 this.container.innerHTML = this.model.get('_image');
17 this.svg_view = this.container.getElementsByTagName('svg')[0];
18 this.cursor_point = this.svg_view.createSVGPoint();
19 this.register_events();
20 },
21 last_move: null,
22 block_changed: function() {
23 var widget = this;
24 window.setTimeout(function() {
25 if (!widget.model.get('_mousemove_blocked') && widget.last_move) {
26 widget.send_mouse_event('mousemove', widget.last_move);
27 }
28 }, 0);
29 },
30 send_mouse_event: function(name, e) {
31 this.last_move = null;
32 if (this.model.get('disable')) {
33 return;
34 }
35 if (this.model.get('throttle')) {
36 this.model.set('_mousemove_blocked', true);
37 this.model.save_changes();
38 }
39
40 this.cursor_point.x = e.clientX;
41 this.cursor_point.y = e.clientY;
42 var svg_pt = this.cursor_point.matrixTransform(
43 this.svg_view.getScreenCTM().inverse());
44
45 this.send({
46 name: name,
47 x: svg_pt.x,
48 y: -svg_pt.y,
49 type: e.type,
50 button: e.button,
51 buttons: e.buttons,
52 shiftKey: e.shiftKey,
53 altKey: e.altKey,
54 ctrlKey: e.ctrlKey,
55 metaKey: e.metaKey,
56 clientX: e.clientX,
57 clientY: e.clientY,
58 movementX: e.movementX,
59 movementY: e.movementY,
60 timeStamp: e.timeStamp,
61 targetId: e.target ? e.target.id : null,
62 currentTargetId: e.currentTarget ? e.currentTarget.id : null,
63 relatedTargetId: e.relatedTarget ? e.relatedTarget.id : null,
64 });
65 },
66 register_events: function() {
67 var widget = this;
68 this.svg_view.addEventListener('mousedown', function(e) {
69 e.preventDefault();
70 widget.send_mouse_event('mousedown', e);
71 });
72 this.svg_view.addEventListener('mousemove', function(e) {
73 e.preventDefault();
74 if (widget.model.get('_mousemove_blocked')) {
75 widget.last_move = e;
76 } else {
77 widget.send_mouse_event('mousemove', e);
78 }
79 });
80 this.svg_view.addEventListener('mouseup', function(e) {
81 e.preventDefault();
82 widget.send_mouse_event('mouseup', e);
83 });
84 }
85 });
86
87 return {
88 DrawingView: DrawingView
89 };
90});
91'''