commit 16f5d2d784c1e3d5b948a8888ec39390e5aad89f · cduck.me/drawsvg

drawSvg/widgets/__init__.py

···

       1
       1
       +
       from .drawing_widget import DrawingWidget

+77

drawSvg/widgets/drawing_javascript.py

···

       1
       1
       +
       javascript = '''

     

       2
       2
       +
       require.undef('drawingview');

     

       3
       3
       +
       

     

       4
       4
       +
       define('drawingview', ["@jupyter-widgets/base"], function(widgets) {

     

       5
       5
       +
           var DrawingView = widgets.DOMWidgetView.extend({

     

       6
       6
       +
               render: function() {

     

       7
       7
       +
                   this.container = document.createElement('a');

     

       8
       8
       +
                   this.image_changed();

     

       9
       9
       +
                   this.container.appendChild(this.svg_view);

     

       10
       10
       +
                   this.el.appendChild(this.container);

     

       11
       11
       +
                   this.model.on('change:_image', this.image_changed, this);

     

       12
       12
       +
               },

     

       13
       13
       +
               image_changed: function() {

     

       14
       14
       +
                   this.container.innerHTML = this.model.get('_image');

     

       15
       15
       +
                   this.svg_view = this.container.getElementsByTagName('svg')[0];

     

       16
       16
       +
                   this.cursor_point = this.svg_view.createSVGPoint();

     

       17
       17
       +
                   this.register_events();

     

       18
       18
       +
               },

     

       19
       19
       +
               send_mouse_event: function(name, e) {

     

       20
       20
       +
                   if (this.model.get('disable')) {

     

       21
       21
       +
                       return;

     

       22
       22
       +
                   }

     

       23
       23
       +
                   if (this.model.get('throttle')) {

     

       24
       24
       +
                       this.model.set('_mousemove_blocked', true);

     

       25
       25
       +
                       this.model.save_changes();

     

       26
       26
       +
                   }

     

       27
       27
       +
       

     

       28
       28
       +
                   this.cursor_point.x = e.clientX;

     

       29
       29
       +
                   this.cursor_point.y = e.clientY;

     

       30
       30
       +
                   var svg_pt = this.cursor_point.matrixTransform(

     

       31
       31
       +
                                   this.svg_view.getScreenCTM().inverse());

     

       32
       32
       +
       

     

       33
       33
       +
                   this.send({

     

       34
       34
       +
                       name: name,

     

       35
       35
       +
                       x: svg_pt.x,

     

       36
       36
       +
                       y: -svg_pt.y,

     

       37
       37
       +
                       type: e.type,

     

       38
       38
       +
                       button: e.button,

     

       39
       39
       +
                       buttons: e.buttons,

     

       40
       40
       +
                       shiftKey: e.shiftKey,

     

       41
       41
       +
                       altKey: e.altKey,

     

       42
       42
       +
                       ctrlKey: e.ctrlKey,

     

       43
       43
       +
                       metaKey: e.metaKey,

     

       44
       44
       +
                       clientX: e.clientX,

     

       45
       45
       +
                       clientY: e.clientY,

     

       46
       46
       +
                       movementX: e.movementX,

     

       47
       47
       +
                       movementY: e.movementY,

     

       48
       48
       +
                       timeStamp: e.timeStamp,

     

       49
       49
       +
                       targetId: e.target ? e.target.id : null,

     

       50
       50
       +
                       currentTargetId: e.currentTarget ? e.currentTarget.id : null,

     

       51
       51
       +
                       relatedTargetId: e.relatedTarget ? e.relatedTarget.id : null,

     

       52
       52
       +
                   });

     

       53
       53
       +
               },

     

       54
       54
       +
               register_events: function() {

     

       55
       55
       +
                   var widget = this;

     

       56
       56
       +
                   this.svg_view.addEventListener('mousedown', function(e) {

     

       57
       57
       +
                       e.preventDefault();

     

       58
       58
       +
                       widget.send_mouse_event('mousedown', e);

     

       59
       59
       +
                   });

     

       60
       60
       +
                   this.svg_view.addEventListener('mousemove', function(e) {

     

       61
       61
       +
                       e.preventDefault();

     

       62
       62
       +
                       if (!widget.model.get('_mousemove_blocked')) {

     

       63
       63
       +
                           widget.send_mouse_event('mousemove', e);

     

       64
       64
       +
                       }

     

       65
       65
       +
                   });

     

       66
       66
       +
                   this.svg_view.addEventListener('mouseup', function(e) {

     

       67
       67
       +
                       e.preventDefault();

     

       68
       68
       +
                       widget.send_mouse_event('mouseup', e);

     

       69
       69
       +
                   });

     

       70
       70
       +
               }

     

       71
       71
       +
           });

     

       72
       72
       +
       

     

       73
       73
       +
           return {

     

       74
       74
       +
               DrawingView: DrawingView

     

       75
       75
       +
           };

     

       76
       76
       +
       });

     

       77
       77
       +
       '''

+115

drawSvg/widgets/drawing_widget.py

···

       1
       1
       +
       from ipywidgets import widgets

     

       2
       2
       +
       from traitlets import Unicode, Bool

     

       3
       3
       +
       

     

       4
       4
       +
       

     

       5
       5
       +
       # Register front end javascript

     

       6
       6
       +
       from IPython import display

     

       7
       7
       +
       from . import drawing_javascript

     

       8
       8
       +
       display.display(display.Javascript(drawing_javascript.javascript))

     

       9
       9
       +
       del drawing_javascript

     

       10
       10
       +
       

     

       11
       11
       +
       

     

       12
       12
       +
       class DrawingWidget(widgets.DOMWidget):

     

       13
       13
       +
           _view_name = Unicode('DrawingView').tag(sync=True)

     

       14
       14
       +
           _view_module = Unicode('drawingview').tag(sync=True)

     

       15
       15
       +
           _view_module_version = Unicode('0.1.0').tag(sync=True)

     

       16
       16
       +
           _image = Unicode().tag(sync=True)

     

       17
       17
       +
           _mousemove_blocked = Bool(False).tag(sync=True)

     

       18
       18
       +
           throttle = Bool(True).tag(sync=True)

     

       19
       19
       +
           disable = Bool(False).tag(sync=True)

     

       20
       20
       +
       

     

       21
       21
       +
           def __init__(self, drawing, throttle=True, disable=False):

     

       22
       22
       +
               '''

     

       23
       23
       +
               DrawingWidget is an interactive Jupyter notebook widget.  It works

     

       24
       24
       +
               similarly to displaying a Drawing as a cell output but DrawingWidget

     

       25
       25
       +
               can register callbacks for user mouse events.  Within a callback modify

     

       26
       26
       +
               the drawing then call .refresh() to update the output in real time.

     

       27
       27
       +
       

     

       28
       28
       +
               Arguments:

     

       29
       29
       +
                   drawing: The initial Drawing to display.  Call .refresh() after

     

       30
       30
       +
                       modifying or just assign a new Drawing.

     

       31
       31
       +
                   throttle: If True, limit the rate of mousemove events.  For drawings

     

       32
       32
       +
                       with many elements, this will significantly reduce lag.

     

       33
       33
       +
                   disable: While True, mouse events will be disabled.

     

       34
       34
       +
               '''

     

       35
       35
       +
               super().__init__()

     

       36
       36
       +
               self.throttle = throttle

     

       37
       37
       +
               self.disable = disable

     

       38
       38
       +
               self.drawing = drawing

     

       39
       39
       +
               self.mousedown_callbacks = []

     

       40
       40
       +
               self.mousemove_callbacks = []

     

       41
       41
       +
               self.mouseup_callbacks = []

     

       42
       42
       +
       

     

       43
       43
       +
               self.on_msg(self._receive_msg)

     

       44
       44
       +
       

     

       45
       45
       +
           @property

     

       46
       46
       +
           def drawing(self):

     

       47
       47
       +
               return self._drawing

     

       48
       48
       +
       

     

       49
       49
       +
           @drawing.setter

     

       50
       50
       +
           def drawing(self, drawing):

     

       51
       51
       +
               self._drawing = drawing

     

       52
       52
       +
               self.refresh()

     

       53
       53
       +
       

     

       54
       54
       +
           def refresh(self):

     

       55
       55
       +
               '''

     

       56
       56
       +
               Redraw the displayed output with the current value of self.drawing.

     

       57
       57
       +
               '''

     

       58
       58
       +
               self._image = self.drawing.asSvg()

     

       59
       59
       +
       

     

       60
       60
       +
           def _receive_msg(self, _, content, buffers):

     

       61
       61
       +
               if not isinstance(content, dict):

     

       62
       62
       +
                   return

     

       63
       63
       +
               callbacks = {

     

       64
       64
       +
                   'mousedown': self.mousedown_callbacks,

     

       65
       65
       +
                   'mousemove': self.mousemove_callbacks,

     

       66
       66
       +
                   'mouseup': self.mouseup_callbacks,

     

       67
       67
       +
               }.get(content.get('name'), ())

     

       68
       68
       +
               try:

     

       69
       69
       +
                   if callbacks:

     

       70
       70
       +
                       self._call_handlers(callbacks, content.get('x'),

     

       71
       71
       +
                                           content.get('y'), content)

     

       72
       72
       +
               finally:

     

       73
       73
       +
                   self._mousemove_blocked = False

     

       74
       74
       +
       

     

       75
       75
       +
       

     

       76
       76
       +
           def mousedown(self, handler, remove=False):

     

       77
       77
       +
               '''

     

       78
       78
       +
               Register (or unregister) a handler for the mousedown event.

     

       79
       79
       +
       

     

       80
       80
       +
               Arguments:

     

       81
       81
       +
                   remove: If True, unregister, otherwise register.

     

       82
       82
       +
               '''

     

       83
       83
       +
               self.on_msg

     

       84
       84
       +
               self._register_handler(

     

       85
       85
       +
                   self.mousedown_callbacks, handler, remove=remove)

     

       86
       86
       +
       

     

       87
       87
       +
           def mousemove(self, handler, remove=False):

     

       88
       88
       +
               '''

     

       89
       89
       +
               Register (or unregister) a handler for the mousemove event.

     

       90
       90
       +
       

     

       91
       91
       +
               Arguments:

     

       92
       92
       +
                   remove: If True, unregister, otherwise register.

     

       93
       93
       +
               '''

     

       94
       94
       +
               self._register_handler(

     

       95
       95
       +
                   self.mousemove_callbacks, handler, remove=remove)

     

       96
       96
       +
       

     

       97
       97
       +
           def mouseup(self, handler, remove=False):

     

       98
       98
       +
               '''

     

       99
       99
       +
               Register (or unregister) a handler for the mouseup event.

     

       100
       100
       +
       

     

       101
       101
       +
               Arguments:

     

       102
       102
       +
                   remove: If True, unregister, otherwise register.

     

       103
       103
       +
               '''

     

       104
       104
       +
               self._register_handler(

     

       105
       105
       +
                   self.mouseup_callbacks, handler, remove=remove)

     

       106
       106
       +
       

     

       107
       107
       +
           def _register_handler(self, callback_list, handler, remove=False):

     

       108
       108
       +
               if remove:

     

       109
       109
       +
                   callback_list.remove(handler)

     

       110
       110
       +
               else:

     

       111
       111
       +
                   callback_list.append(handler)

     

       112
       112
       +
       

     

       113
       113
       +
           def _call_handlers(self, callback_list, *args, **kwargs):

     

       114
       114
       +
               for callback in callback_list:

     

       115
       115
       +
                   callback(self, *args, **kwargs)