commit c1d1db801eef423812c8cdde58e31e2f1b3489ef · cduck.me/drawsvg

+53 -8

README.md

···

       72
       72
        
       # Draw multiple circular arcs

     

       73
       73
        
       d.append(draw.ArcLine(60, 20, 20, 60, 270,

     

       74
       74
        
               stroke='red', stroke_width=5, fill='red', fill_opacity=0.2))

     

       75
       75
       -
       d.append(draw.Arc(60, 20, 20, 60, 270, cw=False,

     

       75
       75
       +
       d.append(draw.Arc(60, 20, 20, 90, -60, cw=True,

     

       76
       76
        
               stroke='green', stroke_width=3, fill='none'))

     

       77
       77
       -
       d.append(draw.Arc(60, 20, 20, 270, 60, cw=True,

     

       77
       77
       +
       d.append(draw.Arc(60, 20, 20, -60, 90, cw=False,

     

       78
       78
        
               stroke='blue', stroke_width=1, fill='black', fill_opacity=0.3))

     

       79
       79
        
       

     

       80
       80
        
       # Draw arrows

     
···

       100
       100
        
       

     

       101
       101
        
       [![Example output image](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/example1.png)](https://github.com/cduck/drawsvg/blob/master/examples/example1.svg)

     

       102
       102
        
       

     

       103
       103
       +
       ### SVG-Native Animation with playback controls

     

       104
       104
       +
       ```python

     

       105
       105
       +
       import drawsvg as draw

     

       106
       106
       +
       

     

       107
       107
       +
       d = draw.Drawing(400, 200, origin='center',

     

       108
       108
       +
           animation_config=draw.types.SyncedAnimationConfig(

     

       109
       109
       +
               # Animation configuration

     

       110
       110
       +
               duration=8,  # Seconds

     

       111
       111
       +
               show_playback_progress=True,

     

       112
       112
       +
               show_playback_controls=True,

     

       113
       113
       +
           )

     

       114
       114
       +
       )

     

       115
       115
       +
       d.append(draw.Rectangle(-200, -100, 400, 200, fill='#eee'))  # Background

     

       116
       116
       +
       d.append(draw.Circle(0, 0, 40, fill='green'))  # Center circle

     

       117
       117
       +
       circle = draw.Circle(0, 0, 0, fill='silver', stroke='gray')  # Moving circle

     

       118
       118
       +
       # Animation

     

       119
       119
       +
       circle.add_key_frame(0, cx=-100, cy=0, r=0, stroke_width=0)

     

       120
       120
       +
       circle.add_key_frame(2, cx=0, cy=-100, r=40, stroke_width=5)

     

       121
       121
       +
       circle.add_key_frame(4, cx=100, cy=0, r=0, stroke_width=0)

     

       122
       122
       +
       circle.add_key_frame(6, cx=0, cy=100, r=40, stroke_width=5)

     

       123
       123
       +
       circle.add_key_frame(8, cx=-100, cy=0, r=0, stroke_width=0)

     

       124
       124
       +
       d.append(circle)

     

       125
       125
       +
       

     

       126
       126
       +
       # Changing text

     

       127
       127
       +
       draw.native_animation.animate_text_sequence(

     

       128
       128
       +
               d,

     

       129
       129
       +
               [0, 2, 4, 6],

     

       130
       130
       +
               ['0', '1', '2', '3'],

     

       131
       131
       +
               30, 0, 1, fill='yellow', center=True)

     

       132
       132
       +
       

     

       133
       133
       +
       # Save as a standalone animated SVG or HTML

     

       134
       134
       +
       d.save_svg('examples/playback-controls.svg')

     

       135
       135
       +
       d.save_html('examples/playback-controls.html')

     

       136
       136
       +
       

     

       137
       137
       +
       # Display in Jupyter notebook

     

       138
       138
       +
       #d.display_image()  # Display SVG as an image (will not be interactive)

     

       139
       139
       +
       #d.display_iframe()  # Display as interactive SVG (alternative)

     

       140
       140
       +
       d.display_inline()  # Display as interactive SVG

     

       141
       141
       +
       ```

     

       142
       142
       +
       

     

       143
       143
       +
       [![Example animated image](https://github.com/cduck/drawsvg/blob/v2/examples/playback-controls.svg)](https://raw.githubusercontent.com/cduck/drawsvg/v2/examples/playback-controls.svg)

     

       144
       144
       +
       

     

       145
       145
       +
       Note: GitHub blocks the playback controls.

     

       146
       146
       +
       Download the above SVG and open it in a web browser to try.

     

       147
       147
       +
       

     

       103
       148
        
       ### Gradients

     

       104
       149
        
       ```python

     

       105
       150
        
       import drawsvg as draw

     
···

       115
       160
        
       

     

       116
       161
        
       # Draw a shape to fill with the gradient

     

       117
       162
        
       p = draw.Path(fill=gradient, stroke='black', stroke_width=0.002)

     

       118
       118
       -
       p.arc(0, 0.35, 0.7, 30, 120)

     

       119
       119
       -
       p.arc(0, 0.35, 0.5, 120, 30, cw=True, include_l=True)

     

       163
       163
       +
       p.arc(0, 0.35, 0.7, -30, -120, cw=False)

     

       164
       164
       +
       p.arc(0, 0.35, 0.5, -120, -30, cw=True, include_l=True)

     

       120
       165
        
       p.Z()

     

       121
       166
        
       d.append(p)

     

       122
       167
        
       

     

       123
       168
        
       # Draw another shape to fill with the same gradient

     

       124
       169
        
       p = draw.Path(fill=gradient, stroke='red', stroke_width=0.002)

     

       125
       125
       -
       p.arc(0, 0.35, 0.75, 130, 160)

     

       126
       126
       -
       p.arc(0, 0.35, 0, 160, 130, cw=True, include_l=True)

     

       170
       170
       +
       p.arc(0, 0.35, 0.75, -130, -160, cw=False)

     

       171
       171
       +
       p.arc(0, 0.35, 0, -160, -130, cw=True, include_l=True)

     

       127
       172
        
       p.Z()

     

       128
       173
        
       d.append(p)

     

       129
       174
        
       

     
···

       302
       347
        
       

     

       303
       348
        
       Note: The above example currently only works in `jupyter notebook`, not `jupyter lab`.

     

       304
       349
        
       

     

       305
       305
       -
       ### Animation with Python

     

       350
       350
       +
       ### Frame-by-Frame Animation

     

       306
       351
        
       ```python

     

       307
       352
        
       import drawsvg as draw

     

       308
       353
        
       

     
···

       332
       377
        
       

     

       333
       378
        
       ![Example output image](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/example6.gif)

     

       334
       379
        
       

     

       335
       335
       -
       ### Asynchronous Animation in Jupyter

     

       380
       380
       +
       ### Asynchronous Frame-based Animation in Jupyter

     

       336
       381
        
       ```python

     

       337
       382
        
       # Jupyter cell 1:

     

       338
       383
        
       import drawsvg as draw

+10

drawsvg/__init__.py

···

       86
       86
        
           frame_animate_video,

     

       87
       87
        
           frame_animate_jupyter,

     

       88
       88
        
       )

     

       89
       89
       +
       from .native_animation import (

     

       90
       90
       +
           SyncedAnimationConfig,

     

       91
       91
       +
           animate_element_sequence,

     

       92
       92
       +
           animate_text_sequence,

     

       93
       93
       +
       )

     

       94
       94
       +
       from .url_encode import (

     

       95
       95
       +
           bytes_as_data_uri,

     

       96
       96
       +
           svg_as_data_uri,

     

       97
       97
       +
           svg_as_utf8_data_uri,

     

       98
       98
       +
       )

+76 -26

drawsvg/drawing.py

···

       1
       1
       +
       import dataclasses

     

       1
       2
        
       from io import StringIO

     

       2
       3
        
       from collections import defaultdict

     

       3
       4
        
       import random

     

       4
       5
        
       import string

     

       6
       6
       +
       import xml.sax.saxutils as xml

     

       5
       7
        
       

     

       6
       8
        
       from . import Raster

     

       7
       9
        
       from . import types, elements as elements_module, jupyter

     

       8
       10
        
       

     

       9
       11
        
       

     

       10
       10
       -
       

     

       11
       11
       -
       SVG_START = '''<?xml version="1.0" encoding="UTF-8"?>

     

       12
       12
       -
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       13
       13
       -
            '''

     

       12
       12
       +
       XML_HEADER = '<?xml version="1.0" encoding="UTF-8"?>\n'

     

       13
       13
       +
       SVG_START = ('<svg xmlns="http://www.w3.org/2000/svg" '

     

       14
       14
       +
                    'xmlns:xlink="http://www.w3.org/1999/xlink"\n   ')

     

       14
       15
        
       SVG_END = '</svg>'

     

       15
       15
       -
       SVG_CSS_FMT = '<style><![CDATA[{}]]></style>'

     

       16
       16
       -
       SVG_JS_FMT = '<script><![CDATA[{}]]></script>'

     

       16
       16
       +
       SVG_CSS_FMT = '<style>/*<![CDATA[*/{}/*]]>*/</style>'

     

       17
       17
       +
       SVG_JS_FMT = '<script>/*<![CDATA[*/{}/*]]>*/</script>'

     

       17
       18
        
       

     

       18
       19
        
       

     

       19
       20
        
       class Drawing:

     
···

       28
       29
        
           displayed as an SVG below.

     

       29
       30
        
           '''

     

       30
       31
        
           def __init__(self, width, height, origin=(0,0), context: types.Context=None,

     

       31
       31
       -
                        id_prefix='d', **svg_args):

     

       32
       32
       -
               assert float(width) == width

     

       33
       33
       -
               assert float(height) == height

     

       32
       32
       +
                        animation_config=None, id_prefix='d', **svg_args):

     

       34
       33
        
               if context is None:

     

       35
       34
        
                   context = types.Context()

     

       35
       35
       +
               if animation_config is not None:

     

       36
       36
       +
                   context = dataclasses.replace(

     

       37
       37
       +
                           context, animation_config=animation_config)

     

       36
       38
        
               self.width = width

     

       37
       39
        
               self.height = height

     

       38
       40
        
               if isinstance(origin, str):

     

       41
       41
       +
                   top, bottom = 0, -height

     

       42
       42
       +
                   if context.invert_y:

     

       43
       43
       +
                       top, bottom = bottom, top

     

       39
       44
        
                   self.view_box = {

     

       40
       45
        
                       'center': (-width/2, -height/2, width, height),

     

       41
       41
       -
                       'top-left': (0, 0, width, height),

     

       42
       42
       -
                       'top-right': (-width, 0, width, height),

     

       43
       43
       -
                       'bottom-left': (0, -height, width, height),

     

       44
       44
       -
                       'bottom-right': (-width, -height, width, height),

     

       46
       46
       +
                       'top-left': (0, top, width, height),

     

       47
       47
       +
                       'top-right': (-width, top, width, height),

     

       48
       48
       +
                       'bottom-left': (0, bottom, width, height),

     

       49
       49
       +
                       'bottom-right': (-width, bottom, width, height),

     

       45
       50
        
                   }[origin]

     

       46
       51
        
               else:

     

       47
       52
        
                   origin = tuple(origin)

     

       48
       48
       -
                   assert len(origin) == 2

     

       53
       53
       +
                   if len(origin) != 2:

     

       54
       54
       +
                       raise ValueError(

     

       55
       55
       +
                               "origin must be the string 'center', 'top-left', ..., "

     

       56
       56
       +
                               "'bottom-right' or a tuple (x, y)")

     

       49
       57
        
                   self.view_box = origin + (width, height)

     

       50
       58
        
               self.elements = []

     

       51
       59
        
               self.ordered_elements = defaultdict(list)

     
···

       97
       105
        
               if not hasattr(obj, 'write_svg_element'):

     

       98
       106
        
                   elements = obj.to_drawables(**kwargs)

     

       99
       107
        
               else:

     

       100
       100
       -
                   assert len(kwargs) == 0

     

       108
       108
       +
                   if len(kwargs) > 0:

     

       109
       109
       +
                       raise ValueError('unexpected kwargs')

     

       101
       110
        
                   elements = obj

     

       102
       111
        
               if hasattr(elements, 'write_svg_element'):

     

       103
       112
        
                   self.append(elements, z=z)

     
···

       135
       144
        
               if not hasattr(obj, 'write_svg_element'):

     

       136
       145
        
                   elements = obj.to_drawables(**kwargs)

     

       137
       146
        
               else:

     

       138
       138
       -
                   assert len(kwargs) == 0

     

       147
       147
       +
                   if len(kwargs) > 0:

     

       148
       148
       +
                       raise ValueError('unexpected kwargs')

     

       139
       149
        
                   elements = obj

     

       140
       150
        
               if hasattr(elements, 'write_svg_element'):

     

       141
       151
        
                   self.append_def(elements)

     
···

       147
       157
        
               self.append(elements_module.Title(text, **kwargs))

     

       148
       158
        
           def append_css(self, css_text):

     

       149
       159
        
               self.css_list.append(css_text)

     

       150
       150
       -
           def append_javascriipt(self, js_text, onload=None):

     

       160
       160
       +
           def append_javascript(self, js_text, onload=None):

     

       151
       161
        
               if onload:

     

       152
       162
        
                   if self.svg_args.get('onload'):

     

       153
       163
        
                       self.svg_args['onload'] = f'{self.svg_args["onload"]};{onload}'

     
···

       160
       170
        
               for z in sorted(self.ordered_elements):

     

       161
       171
        
                   output.extend(self.ordered_elements[z])

     

       162
       172
        
               return output

     

       163
       163
       -
           def as_svg(self, output_file=None, randomize_ids=False):

     

       173
       173
       +
           def as_svg(self, output_file=None, randomize_ids=False, header=XML_HEADER,

     

       174
       174
       +
                      skip_js=False, skip_css=False):

     

       164
       175
        
               if output_file is None:

     

       165
       176
        
                   with StringIO() as f:

     

       166
       166
       -
                       self.as_svg(f, randomize_ids=randomize_ids)

     

       177
       177
       +
                       self.as_svg(f, randomize_ids=randomize_ids, header=header)

     

       167
       178
        
                       return f.getvalue()

     

       179
       179
       +
               output_file.write(header)

     

       168
       180
        
               img_width, img_height = self.calc_render_size()

     

       169
       181
        
               svg_args = dict(

     

       170
       182
        
                       width=img_width, height=img_height,

     
···

       173
       185
        
               output_file.write(SVG_START)

     

       174
       186
        
               self.context.write_svg_document_args(svg_args, output_file)

     

       175
       187
        
               output_file.write('>\n')

     

       176
       176
       -
               if self.css_list:

     

       177
       177
       -
                   output_file.write(SVG_CSS_FMT.format('\n'.join(self.css_list)))

     

       178
       178
       -
                   output_file.write('\n')

     

       179
       179
       -
               if self.js_list:

     

       180
       180
       -
                   output_file.write(SVG_JS_FMT.format('\n'.join(self.js_list)))

     

       188
       188
       +
               if self.css_list and not skip_css:

     

       189
       189
       +
                   output_file.write(SVG_CSS_FMT.format(elements_module.escape_cdata(

     

       190
       190
       +
                           '\n'.join(self.css_list))))

     

       181
       191
        
                   output_file.write('\n')

     

       182
       192
        
               output_file.write('<defs>\n')

     

       183
       193
        
               # Write definition elements

     
···

       191
       201
        
                   return id_str

     

       192
       202
        
               id_map = defaultdict(id_gen)

     

       193
       203
        
               prev_set = set((id(defn) for defn in self.other_defs))

     

       204
       204
       +
               prev_list = []

     

       194
       205
        
               def is_duplicate(obj):

     

       195
       206
        
                   nonlocal prev_set

     

       196
       207
        
                   dup = id(obj) in prev_set

     

       197
       208
        
                   prev_set.add(id(obj))

     

       209
       209
       +
                   prev_list.append(obj)

     

       198
       210
        
                   return dup

     

       199
       211
        
               for element in self.other_defs:

     

       200
       212
        
                   if hasattr(element, 'write_svg_element'):

     
···

       220
       232
        
                       element.write_svg_element(

     

       221
       233
        
                               id_map, is_duplicate, output_file, self.context, False)

     

       222
       234
        
                       output_file.write('\n')

     

       235
       235
       +
               if self.js_list and not skip_js:

     

       236
       236
       +
                   output_file.write(SVG_JS_FMT.format(elements_module.escape_cdata(

     

       237
       237
       +
                           '\n'.join(self.js_list))))

     

       238
       238
       +
                   output_file.write('\n')

     

       223
       239
        
               output_file.write(SVG_END)

     

       240
       240
       +
           def as_html(self, output_file=None, title=None, randomize_ids=False,

     

       241
       241
       +
                       fix_embed_iframe=False):

     

       242
       242
       +
               if output_file is None:

     

       243
       243
       +
                   with StringIO() as f:

     

       244
       244
       +
                       self.as_html(

     

       245
       245
       +
                               f, title=title, randomize_ids=randomize_ids,

     

       246
       246
       +
                               fix_embed_iframe=fix_embed_iframe)

     

       247
       247
       +
                       return f.getvalue()

     

       248
       248
       +
               output_file.write('<!DOCTYPE html>\n')

     

       249
       249
       +
               output_file.write('<head>\n')

     

       250
       250
       +
               output_file.write('<meta charset="utf-8">\n')

     

       251
       251
       +
               if title is not None:

     

       252
       252
       +
                   output_file.write(f'<title>{xml.escape(title)}</title>\n')

     

       253
       253
       +
               # Prevent iframe scroll bar

     

       254
       254
       +
               if fix_embed_iframe:

     

       255
       255
       +
                   fix = self.calc_render_size()[1] / 2

     

       256
       256
       +
                   output_file.write(f'''<style>

     

       257
       257
       +
       html,body {{

     

       258
       258
       +
         margin: 0;

     

       259
       259
       +
         height: 100%;

     

       260
       260
       +
       }}

     

       261
       261
       +
       svg {{

     

       262
       262
       +
         margin-bottom: {-fix}px;

     

       263
       263
       +
       }}

     

       264
       264
       +
       </style>''')

     

       265
       265
       +
               output_file.write('</head>\n<body>\n')

     

       266
       266
       +
               self.as_svg(

     

       267
       267
       +
                       output_file, randomize_ids=randomize_ids, header="",

     

       268
       268
       +
                       skip_css=False, skip_js=False)

     

       269
       269
       +
               output_file.write('\n</body>\n</html>\n')

     

       224
       270
        
           @staticmethod

     

       225
       271
        
           def _random_id(length=8):

     

       226
       272
        
               return (random.choice(string.ascii_letters)

     
···

       229
       275
        
           def save_svg(self, fname, encoding='utf-8'):

     

       230
       276
        
               with open(fname, 'w', encoding=encoding) as f:

     

       231
       277
        
                   self.as_svg(output_file=f)

     

       278
       278
       +
           def save_html(self, fname, title=None, encoding='utf-8'):

     

       279
       279
       +
               with open(fname, 'w', encoding=encoding) as f:

     

       280
       280
       +
                   self.as_html(output_file=f, title=title)

     

       232
       281
        
           def save_png(self, fname):

     

       233
       282
        
               self.rasterize(to_file=fname)

     

       234
       283
        
           def rasterize(self, to_file=None):

     

       235
       235
       -
               if to_file:

     

       284
       284
       +
               if to_file is not None:

     

       236
       285
        
                   return Raster.from_svg_to_file(self.as_svg(), to_file)

     

       237
       286
        
               else:

     

       238
       287
        
                   return Raster.from_svg(self.as_svg())

     
···

       245
       294
        
           def display_iframe(self):

     

       246
       295
        
               '''Display within an iframe the Jupyter web page.'''

     

       247
       296
        
               w, h = self.calc_render_size()

     

       248
       248
       -
               return jupyter.JupyterSvgFrame(self.as_svg(), w, h)

     

       297
       297
       +
               html = self.as_html(fix_embed_iframe=True)

     

       298
       298
       +
               return jupyter.JupyterSvgFrame(html, w, h, mime='text/html')

     

       249
       299
        
           def display_image(self):

     

       250
       300
        
               '''Display within an img in the Jupyter web page.'''

     

       251
       301
        
               return jupyter.JupyterSvgImage(self.as_svg())

+20 -11

drawsvg/elements.py

···

       7
       7
        
       from .types import DrawingElement, DrawingBasicElement, DrawingParentElement

     

       8
       8
        
       

     

       9
       9
        
       

     

       10
       10
       +
       def escape_cdata(content):

     

       11
       11
       +
           return content.replace(']]>', ']]]]><![CDATA[>')

     

       12
       12
       +
       

     

       13
       13
       +
       

     

       10
       14
        
       class NoElement(DrawingElement):

     

       11
       15
        
           ''' A drawing element that has no effect '''

     

       12
       16
        
           def __init__(self):

     
···

       27
       31
        
           '''

     

       28
       32
        
           TAG_NAME = 'g'

     

       29
       33
        
       

     

       30
       30
       -
       class Raw(DrawingBasicElement):

     

       34
       34
       +
       class Raw(DrawingElement):

     

       31
       35
        
           '''Raw unescaped text to include in the SVG output.

     

       32
       36
        
       

     

       33
       37
        
           Special XML characters like '<' and '&' in the content may have unexpected

     
···

       38
       42
        
               super().__init__()

     

       39
       43
        
               self.content = content

     

       40
       44
        
               self.defs = defs

     

       41
       41
       -
           def write_content(self, id_map, is_duplicate, output_file, context,

     

       42
       42
       -
                             dry_run):

     

       45
       45
       +
           def write_svg_element(self, id_map, is_duplicate, output_file, context,

     

       46
       46
       +
                                 dry_run, force_dup=False):

     

       43
       47
        
               if dry_run:

     

       44
       48
        
                   return

     

       45
       49
        
               output_file.write(self.content)

     
···

       82
       86
        
                   from_ = from_or_values

     

       83
       87
        
               if isinstance(other_elem, str) and not other_elem.startswith('#'):

     

       84
       88
        
                   other_elem = '#' + other_elem

     

       85
       85
       -
               kwargs.update(attributeName=attributeName, to=to, dur=dur, begin=begin)

     

       86
       86
       -
               kwargs.setdefault('values', values)

     

       87
       87
       -
               kwargs.setdefault('from_', from_)

     

       88
       88
       -
               super().__init__(xlink__href=other_elem, **kwargs)

     

       89
       89
       +
               args = dict(

     

       90
       90
       +
                       attributeName=attributeName, dur=dur, begin=begin, from_=from_,

     

       91
       91
       +
                       to=to, values=values)

     

       92
       92
       +
               args.update(kwargs)

     

       93
       93
       +
               super().__init__(xlink__href=other_elem, **args)

     

       89
       94
        
       

     

       90
       95
        
           def get_svg_defs(self):

     

       91
       96
        
               return [v for k, v in self.args.items()

     
···

       222
       227
        
       

     

       223
       228
        
           Useful SVG attributes:

     

       224
       229
        
           - text_anchor: start, middle, end

     

       225
       225
       -
           - dominant_baseline: auto, central, middle, hanging, text-top, ...

     

       230
       230
       +
           - dominant_baseline:

     

       231
       231
       +
               auto, central, middle, hanging, text-top, mathematical, ...

     

       226
       232
        
           See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text

     

       227
       233
        
       

     

       228
       234
        
           CairoSVG bug with letter spacing text on a path: The first two letters are

     
···

       312
       318
        
                       assert sum(bool(line) for line in text) <= 1, (

     

       313
       319
        
                               'Logic error, __new__ should handle multi-line paths')

     

       314
       320
        
                       for i, line in enumerate(text):

     

       315
       315
       -
                           if not line:

     

       321
       321
       +
                           if line is None or len(line) == 0:

     

       316
       322
        
                               continue

     

       317
       323
        
                           dy = '{}em'.format(line_offset + i*line_height)

     

       318
       324
        
                           tspan = TSpan(line, dy=dy, **tspan_args)

     
···

       338
       344
        
               output_file.write(self.escaped_text)

     

       339
       345
        
           def write_children_content(self, id_map, is_duplicate, output_file, context,

     

       340
       346
        
                                      dry_run):

     

       341
       341
       -
               children = self.all_children()

     

       347
       347
       +
               children = self.all_children(context=context)

     

       342
       348
        
               for child in children:

     

       343
       349
        
                   child.write_svg_element(

     

       344
       350
        
                           id_map, is_duplicate, output_file, context, dry_run)

     
···

       560
       566
        
           def __init__(self, sx, sy, *points, close=False, **kwargs):

     

       561
       567
        
               super().__init__(d='', **kwargs)

     

       562
       568
        
               self.M(sx, sy)

     

       563
       563
       -
               assert len(points) % 2 == 0

     

       569
       569
       +
               if len(points) % 2 != 0:

     

       570
       570
       +
                   raise TypeError(

     

       571
       571
       +
                           'expected an even number of positional arguments x0, y0, '

     

       572
       572
       +
                           'x1, y1, ...')

     

       564
       573
        
               for i in range(len(points) // 2):

     

       565
       574
        
                   self.L(points[2*i], points[2*i+1])

     

       566
       575
        
               if close:

+2 -1

drawsvg/jupyter.py

···

       26
       26
        
           svg: str

     

       27
       27
        
           width: float

     

       28
       28
        
           height: float

     

       29
       29
       +
           mime: str = 'image/svg+xml'

     

       29
       30
        
           def _repr_html_(self):

     

       30
       30
       -
               uri = url_encode.svg_as_utf8_data_uri(self.svg)

     

       31
       31
       +
               uri = url_encode.svg_as_data_uri(self.svg, mime=self.mime)

     

       31
       32
        
               return (f'<iframe src="{uri}" width="{self.width}" '

     

       32
       33
        
                       f'height="{self.height}" style="border:0" />')

drawsvg/native_animation/__init__.py

···

       1
       1
       +
       from .synced_animation import (

     

       2
       2
       +
           SyncedAnimationConfig,

     

       3
       3
       +
           AnimatedAttributeTimeline,

     

       4
       4
       +
           AnimationHelperData,

     

       5
       5
       +
           animate_element_sequence,

     

       6
       6
       +
           animate_text_sequence,

     

       7
       7
       +
       )

     

       8
       8
       +
       from .playback_control_ui import draw_scrub

+120

drawsvg/native_animation/playback_control_js.py

···

       1
       1
       +
       SVG_ONLOAD = 'svgOnLoad(event)'

     

       2
       2
       +
       SVG_JS_CONTENT = '''

     

       3
       3
       +
       /* Animation playback controls generated by drawsvg */

     

       4
       4
       +
       /* https://github.com/cduck/drawsvg/ */

     

       5
       5
       +
       function svgOnLoad(event) {

     

       6
       6
       +
           /* Support standalone SVG or embedded in HTML or iframe */

     

       7
       7
       +
           if (event && event.target && event.target.ownerDocument) {

     

       8
       8
       +
               svgSetup(event.target.ownerDocument);

     

       9
       9
       +
           } else if (document && document.currentScript

     

       10
       10
       +
                      && document.currentScript.parentElement) {

     

       11
       11
       +
               svgSetup(document.currentScript.parentElement);

     

       12
       12
       +
           }

     

       13
       13
       +
       }

     

       14
       14
       +
       function svgSetup(doc) {

     

       15
       15
       +
           var svgRoot = doc.documentElement || doc;

     

       16
       16
       +
           var scrubCapture = doc.getElementById("scrub-capture");

     

       17
       17
       +
           /* Block multiple setups */

     

       18
       18
       +
           if (!scrubCapture || scrubCapture.getAttribute("svgSetupDone")) {

     

       19
       19
       +
               return;

     

       20
       20
       +
           }

     

       21
       21
       +
           scrubCapture.setAttribute("svgSetupDone", true);

     

       22
       22
       +
           var scrubContainer = doc.getElementById("scrub");

     

       23
       23
       +
           var scrubPlay = doc.getElementById("scrub-play");

     

       24
       24
       +
           var scrubPause = doc.getElementById("scrub-pause");

     

       25
       25
       +
           var scrubKnob = doc.getElementById("scrub-knob");

     

       26
       26
       +
           var scrubXMin = parseFloat(scrubCapture.dataset.xmin);

     

       27
       27
       +
           var scrubXMax = parseFloat(scrubCapture.dataset.xmax);

     

       28
       28
       +
           var scrubTotalDur = parseFloat(scrubCapture.dataset.totaldur);

     

       29
       29
       +
           var scrubStartDelay = parseFloat(scrubCapture.dataset.startdelay);

     

       30
       30
       +
           var scrubEndDelay = parseFloat(scrubCapture.dataset.enddelay);

     

       31
       31
       +
           var scrubPauseOnLoad = parseFloat(scrubCapture.dataset.pauseonload);

     

       32
       32
       +
           var paused = false;

     

       33
       33
       +
           var dragXOffset = 0;

     

       34
       34
       +
           var point = svgRoot.createSVGPoint();

     

       35
       35
       +
       

     

       36
       36
       +
           function screenToSvgX(p) {

     

       37
       37
       +
               var matrix = scrubKnob.getScreenCTM().inverse();

     

       38
       38
       +
               point.x = p.x;

     

       39
       39
       +
               point.y = p.y;

     

       40
       40
       +
               return point.matrixTransform(matrix).x;

     

       41
       41
       +
           };

     

       42
       42
       +
           function screenToProgress(p) {

     

       43
       43
       +
               var matrix = scrubKnob.getScreenCTM().inverse();

     

       44
       44
       +
               point.x = p.x;

     

       45
       45
       +
               point.y = p.y;

     

       46
       46
       +
               var x = point.matrixTransform(matrix).x;

     

       47
       47
       +
               if (x <= scrubXMin) {

     

       48
       48
       +
                   return scrubStartDelay / scrubTotalDur;

     

       49
       49
       +
               }

     

       50
       50
       +
               if (x >= scrubXMax) {

     

       51
       51
       +
                   return (scrubTotalDur - scrubEndDelay) / scrubTotalDur;

     

       52
       52
       +
               }

     

       53
       53
       +
               return (scrubStartDelay/scrubTotalDur

     

       54
       54
       +
                       + (x - dragXOffset - scrubXMin)

     

       55
       55
       +
                         / (scrubXMax - scrubXMin)

     

       56
       56
       +
                         * (scrubTotalDur - scrubStartDelay - scrubEndDelay)

     

       57
       57
       +
                         / scrubTotalDur);

     

       58
       58
       +
           };

     

       59
       59
       +
           function currentScrubX() {

     

       60
       60
       +
               return scrubKnob.cx.animVal.value;

     

       61
       61
       +
           };

     

       62
       62
       +
           function pause() {

     

       63
       63
       +
               svgRoot.pauseAnimations();

     

       64
       64
       +
               scrubPlay.setAttribute("visibility", "visible");

     

       65
       65
       +
               scrubPause.setAttribute("visibility", "hidden");

     

       66
       66
       +
               paused = true;

     

       67
       67
       +
           };

     

       68
       68
       +
           function play() {

     

       69
       69
       +
               svgRoot.unpauseAnimations();

     

       70
       70
       +
               scrubPause.setAttribute("visibility", "visible");

     

       71
       71
       +
               scrubPlay.setAttribute("visibility", "hidden");

     

       72
       72
       +
               paused = false;

     

       73
       73
       +
           };

     

       74
       74
       +
           function scrub(playbackFraction) {

     

       75
       75
       +
               var t = scrubTotalDur * playbackFraction;

     

       76
       76
       +
               /* Stop 10ms before end to avoid loop (>=1ms needed on FF) */

     

       77
       77
       +
               var limit = scrubTotalDur - 10e-3;

     

       78
       78
       +
               if (t < 0) t = 0;

     

       79
       79
       +
               else if (t > limit) t = limit;

     

       80
       80
       +
               svgRoot.setCurrentTime(t);

     

       81
       81
       +
           };

     

       82
       82
       +
           function mousedown(e) {

     

       83
       83
       +
               svgRoot.pauseAnimations();

     

       84
       84
       +
               if (e.target == scrubKnob) {

     

       85
       85
       +
                   dragXOffset = screenToSvgX(e) - currentScrubX();

     

       86
       86
       +
               } else {

     

       87
       87
       +
                   dragXOffset = 0;

     

       88
       88
       +
               }

     

       89
       89
       +
               scrub(screenToProgress(e));

     

       90
       90
       +
               /* Global document listeners */

     

       91
       91
       +
               document.addEventListener('mousemove', mousemove);

     

       92
       92
       +
               document.addEventListener('mouseup', mouseup);

     

       93
       93
       +
               e.preventDefault();

     

       94
       94
       +
           };

     

       95
       95
       +
           function mouseup(e) {

     

       96
       96
       +
               dragXOffset = 0;

     

       97
       97
       +
               document.removeEventListener('mousemove', mousemove);

     

       98
       98
       +
               document.removeEventListener('mouseup', mouseup);

     

       99
       99
       +
               if (!paused) {

     

       100
       100
       +
                   svgRoot.unpauseAnimations();

     

       101
       101
       +
               }

     

       102
       102
       +
               e.preventDefault();

     

       103
       103
       +
           };

     

       104
       104
       +
           function mousemove(e) {

     

       105
       105
       +
               scrub(screenToProgress(e));

     

       106
       106
       +
           };

     

       107
       107
       +
           scrubPause.addEventListener("click", pause);

     

       108
       108
       +
           scrubPlay.addEventListener("click", play);

     

       109
       109
       +
           scrubCapture.addEventListener("mousedown", mousedown);

     

       110
       110
       +
           scrubContainer.setAttribute("visibility", "visible");

     

       111
       111
       +
           scrubKnob.setAttribute("visibility", "visible");

     

       112
       112
       +
           if (scrubPauseOnLoad) {

     

       113
       113
       +
               pause();

     

       114
       114
       +
               scrub(0);

     

       115
       115
       +
           } else {

     

       116
       116
       +
               play();

     

       117
       117
       +
           }

     

       118
       118
       +
       };

     

       119
       119
       +
       svgOnLoad();

     

       120
       120
       +
       '''

+87

drawsvg/native_animation/playback_control_ui.py

···

       1
       1
       +
       from .. import elements as draw

     

       2
       2
       +
       

     

       3
       3
       +
       

     

       4
       4
       +
       def draw_scrub(config: 'SyncedAnimationConfig', hidden=False) -> 'Group':

     

       5
       5
       +
           hpad = config.bar_hpad

     

       6
       6
       +
           bar_x = config.controls_x + hpad

     

       7
       7
       +
           bar_y = config.controls_center_y

     

       8
       8
       +
           bar_width = config.controls_width - 2*hpad

     

       9
       9
       +
           knob_rad = config.knob_rad

     

       10
       10
       +
           pause_width = config.pause_width

     

       11
       11
       +
           pause_corner_rad = config.pause_corner_rad

     

       12
       12
       +
           g = draw.Group(id='scrub', visibility='hidden' if hidden else None)

     

       13
       13
       +
           g.append(draw.Line(

     

       14
       14
       +
                   bar_x, bar_y, bar_x+bar_width, bar_y,

     

       15
       15
       +
                   stroke=config.bar_color,

     

       16
       16
       +
                   stroke_width=config.bar_thickness,

     

       17
       17
       +
                   stroke_linecap='round'))

     

       18
       18
       +
           progress = draw.Rectangle(

     

       19
       19
       +
                   bar_x, bar_y, 0, 0.001,

     

       20
       20
       +
                   stroke=config.bar_past_color,

     

       21
       21
       +
                   stroke_width=config.bar_thickness,

     

       22
       22
       +
                   stroke_linejoin='round')

     

       23
       23
       +
           g.append(progress)

     

       24
       24
       +
           g_capture = draw.Group(

     

       25
       25
       +
                   id='scrub-capture',

     

       26
       26
       +
                   data_xmin=bar_x,

     

       27
       27
       +
                   data_xmax=bar_x+bar_width,

     

       28
       28
       +
                   data_totaldur=config.total_duration,

     

       29
       29
       +
                   data_startdelay=config.start_delay,

     

       30
       30
       +
                   data_enddelay=config.end_delay,

     

       31
       31
       +
                   data_pauseonload=int(bool(config.pause_on_load)))

     

       32
       32
       +
           g_capture.append(draw.Rectangle(

     

       33
       33
       +
                   bar_x-config.bar_thickness/2, bar_y-config.controls_height/2,

     

       34
       34
       +
                   bar_width+config.bar_thickness, config.controls_height,

     

       35
       35
       +
                   fill='rgba(255,255,255,0)'))

     

       36
       36
       +
           knob = draw.Circle(

     

       37
       37
       +
                   bar_x, bar_y, knob_rad, fill=config.knob_fill,

     

       38
       38
       +
                   id='scrub-knob',

     

       39
       39
       +
                   visibility='hidden')

     

       40
       40
       +
           g_capture.append(knob)

     

       41
       41
       +
           g.append(g_capture)

     

       42
       42
       +
           g_play = draw.Group(id='scrub-play', visibility='hidden')

     

       43
       43
       +
           g_play.append(draw.Rectangle(

     

       44
       44
       +
                   bar_x - hpad/2 - knob_rad/2 - pause_width/2 + pause_corner_rad,

     

       45
       45
       +
                   bar_y - pause_width/2 + pause_corner_rad,

     

       46
       46
       +
                   pause_width - pause_corner_rad*2,

     

       47
       47
       +
                   pause_width - pause_corner_rad*2,

     

       48
       48
       +
                   fill=config.pause_color,

     

       49
       49
       +
                   stroke=config.pause_color,

     

       50
       50
       +
                   stroke_width=pause_corner_rad*2,

     

       51
       51
       +
                   stroke_linejoin='round'))

     

       52
       52
       +
           g_play.append(draw.Path(fill=config.pause_icon_color)

     

       53
       53
       +
                   .M(bar_x - hpad/2 - knob_rad/2 - pause_width/4,

     

       54
       54
       +
                      bar_y - pause_width/4)

     

       55
       55
       +
                   .v(pause_width/2)

     

       56
       56
       +
                   .l(pause_width/4*2, -pause_width/4)

     

       57
       57
       +
                   .Z())

     

       58
       58
       +
           g.append(g_play)

     

       59
       59
       +
           g_pause = draw.Group(id='scrub-pause', visibility='hidden')

     

       60
       60
       +
           g_pause.append(draw.Rectangle(

     

       61
       61
       +
                   bar_x - hpad/2 - knob_rad/2 - pause_width/2 + pause_corner_rad,

     

       62
       62
       +
                   bar_y - pause_width/2 + pause_corner_rad,

     

       63
       63
       +
                   pause_width - pause_corner_rad*2,

     

       64
       64
       +
                   pause_width - pause_corner_rad*2,

     

       65
       65
       +
                   fill=config.pause_color,

     

       66
       66
       +
                   stroke=config.pause_color,

     

       67
       67
       +
                   stroke_width=pause_corner_rad*2,

     

       68
       68
       +
                   stroke_linejoin='round'))

     

       69
       69
       +
           g_pause.append(draw.Rectangle(

     

       70
       70
       +
                   bar_x - hpad/2 - knob_rad/2 - pause_width/16*3,

     

       71
       71
       +
                   bar_y - pause_width/4,

     

       72
       72
       +
                   pause_width/8,

     

       73
       73
       +
                   pause_width/2,

     

       74
       74
       +
                   fill=config.pause_icon_color))

     

       75
       75
       +
           g_pause.append(draw.Rectangle(

     

       76
       76
       +
                   bar_x - hpad/2 - knob_rad/2 + pause_width/16,

     

       77
       77
       +
                   bar_y - pause_width/4,

     

       78
       78
       +
                   pause_width/8,

     

       79
       79
       +
                   pause_width/2,

     

       80
       80
       +
                   fill=config.pause_icon_color))

     

       81
       81
       +
           g.append(g_pause)

     

       82
       82
       +
       

     

       83
       83
       +
           progress.add_key_frame(0, width=0)

     

       84
       84
       +
           progress.add_key_frame(config.duration, width=bar_width)

     

       85
       85
       +
           knob.add_key_frame(0, cx=bar_x)

     

       86
       86
       +
           knob.add_key_frame(config.duration, cx=bar_x+bar_width)

     

       87
       87
       +
           return g

+210

drawsvg/native_animation/synced_animation.py

···

       1
       1
       +
       from typing import Any, Callable, Dict, List, Optional, Union

     

       2
       2
       +
       

     

       3
       3
       +
       import dataclasses

     

       4
       4
       +
       from collections import defaultdict

     

       5
       5
       +
       

     

       6
       6
       +
       from .. import elements, types

     

       7
       7
       +
       from . import playback_control_ui, playback_control_js

     

       8
       8
       +
       

     

       9
       9
       +
       

     

       10
       10
       +
       @dataclasses.dataclass

     

       11
       11
       +
       class SyncedAnimationConfig:

     

       12
       12
       +
           # Animation settings

     

       13
       13
       +
           duration: float

     

       14
       14
       +
           start_delay: float = 0

     

       15
       15
       +
           end_delay: float = 0

     

       16
       16
       +
           repeat_count: Union[int, str] = 'indefinite'

     

       17
       17
       +
           fill: str = 'freeze'

     

       18
       18
       +
       

     

       19
       19
       +
           # Playback controls

     

       20
       20
       +
           show_playback_progress: bool = False

     

       21
       21
       +
           show_playback_controls: bool = False  # Adds JavaScript to the drawing

     

       22
       22
       +
           pause_on_load: bool = False

     

       23
       23
       +
           controls_width: Optional[float] = None

     

       24
       24
       +
           controls_height: float = 20

     

       25
       25
       +
           controls_x: Optional[float] = None

     

       26
       26
       +
           controls_center_y: Optional[float] = None

     

       27
       27
       +
       

     

       28
       28
       +
           # Playback control style

     

       29
       29
       +
           bar_thickness: float = 4

     

       30
       30
       +
           bar_hpad: float = 32

     

       31
       31
       +
           bar_color: str = '#ccc'

     

       32
       32
       +
           bar_past_color: str = '#05f'

     

       33
       33
       +
           knob_rad: float = 6

     

       34
       34
       +
           knob_fill: str = '#05f'

     

       35
       35
       +
           pause_width: float = 16

     

       36
       36
       +
           pause_corner_rad: float = 4

     

       37
       37
       +
           pause_color: str = '#05f'

     

       38
       38
       +
           pause_icon_color: str = '#eee'

     

       39
       39
       +
       

     

       40
       40
       +
           # Advanced configuration

     

       41
       41
       +
           controls_js: str = 'DEFAULT'

     

       42
       42
       +
           controls_js_onload: str = playback_control_js.SVG_ONLOAD

     

       43
       43
       +
           controls_draw_function: Callable[['SyncedAnimationConfig', bool], 'Group'

     

       44
       44
       +
                   ] = playback_control_ui.draw_scrub

     

       45
       45
       +
       

     

       46
       46
       +
           @property

     

       47
       47
       +
           def total_duration(self):

     

       48
       48
       +
               return self.start_delay + self.duration + self.end_delay

     

       49
       49
       +
       

     

       50
       50
       +
           def drawing_creation_hook(self, d, context):

     

       51
       51
       +
               '''Called by Drawing on initialization.'''

     

       52
       52
       +
               config = self._with_filled_defaults(d, context)

     

       53
       53
       +
               if self.show_playback_progress or self.show_playback_controls:

     

       54
       54
       +
                   # Append control UI

     

       55
       55
       +
                   controls = config.controls_draw_function(

     

       56
       56
       +
                           config, hidden=not self.show_playback_progress)

     

       57
       57
       +
                   d.append(controls, z=float('inf'))

     

       58
       58
       +
               if self.show_playback_controls:

     

       59
       59
       +
                   # Add control JavaScript

     

       60
       60
       +
                   d.append_javascript(config.controls_js,

     

       61
       61
       +
                                       onload=config.controls_js_onload)

     

       62
       62
       +
       

     

       63
       63
       +
           def _with_filled_defaults(self, d, context):

     

       64
       64
       +
               # By default place the controls along the bottom edge

     

       65
       65
       +
               width = d.view_box[2]

     

       66
       66
       +
               x = d.view_box[0]

     

       67
       67
       +
               if context.invert_y:

     

       68
       68
       +
                   y = d.view_box[1] + self.controls_height/2

     

       69
       69
       +
               else:

     

       70
       70
       +
                   y = d.view_box[1] + d.view_box[3] - self.controls_height/2

     

       71
       71
       +
               js = playback_control_js.SVG_JS_CONTENT

     

       72
       72
       +
               if self.controls_width is not None:

     

       73
       73
       +
                   width = self.controls_width

     

       74
       74
       +
                   x += (d.view_box[2] - width) / 2

     

       75
       75
       +
               if self.controls_x is not None:

     

       76
       76
       +
                   x = self.controls_x

     

       77
       77
       +
               if self.controls_center_y is not None:

     

       78
       78
       +
                   y = self.controls_center_y

     

       79
       79
       +
               if self.controls_js != 'DEFAULT':

     

       80
       80
       +
                   js = self.controls_js

     

       81
       81
       +
               return dataclasses.replace(

     

       82
       82
       +
                       self, controls_width=width, controls_x=x, controls_center_y=y,

     

       83
       83
       +
                       controls_js=js)

     

       84
       84
       +
       

     

       85
       85
       +
       

     

       86
       86
       +
       @dataclasses.dataclass

     

       87
       87
       +
       class AnimatedAttributeTimeline:

     

       88
       88
       +
           name: str

     

       89
       89
       +
           animate_attrs: Optional[Dict[str, Any]] = None

     

       90
       90
       +
           times: List[float] = dataclasses.field(default_factory=list)

     

       91
       91
       +
           values: List[Any] = dataclasses.field(default_factory=list)

     

       92
       92
       +
       

     

       93
       93
       +
           def __post_init__(self):

     

       94
       94
       +
               self.name = types.normalize_attribute_name(self.name)

     

       95
       95
       +
       

     

       96
       96
       +
           def append(self, time, value):

     

       97
       97
       +
               if self.times and time < self.times[-1]:

     

       98
       98
       +
                   raise ValueError('out-of-order key frame times')

     

       99
       99
       +
               self.times.append(time)

     

       100
       100
       +
               self.values.append(value)

     

       101
       101
       +
       

     

       102
       102
       +
           def extend(self, times, values):

     

       103
       103
       +
               if len(times) != len(values):

     

       104
       104
       +
                   raise ValueError('times and values lists are mismatched lengths')

     

       105
       105
       +
               if len(self.times) and len(times) and times[0] < self.times[-1]:

     

       106
       106
       +
                   raise ValueError('out-of-order key frame times')

     

       107
       107
       +
               if list(times) != sorted(times):

     

       108
       108
       +
                   raise ValueError('out-of-order key frame times')

     

       109
       109
       +
               self.times.extend(times)

     

       110
       110
       +
               self.values.extend(values)

     

       111
       111
       +
       

     

       112
       112
       +
           def as_animate_element(self, config: Optional[SyncedAnimationConfig]=None):

     

       113
       113
       +
               if config is not None:

     

       114
       114
       +
                   total_duration = (

     

       115
       115
       +
                           config.start_delay + config.duration + config.end_delay)

     

       116
       116
       +
                   start_delay = config.start_delay

     

       117
       117
       +
                   repeat_count = config.repeat_count

     

       118
       118
       +
                   fill = config.fill

     

       119
       119
       +
               else:

     

       120
       120
       +
                   total_duration = self.times[-1]

     

       121
       121
       +
                   start_delay = 0

     

       122
       122
       +
                   repeat_count = 1

     

       123
       123
       +
                   fill = 'freeze'

     

       124
       124
       +
               dur_str = f'{total_duration}s'

     

       125
       125
       +
               key_times = ';'.join(

     

       126
       126
       +
                   str(max(0, min(1, round(

     

       127
       127
       +
                           (start_delay + t) / total_duration, 3))))

     

       128
       128
       +
                   for t in self.times

     

       129
       129
       +
               )

     

       130
       130
       +
               values_str = ';'.join(map(str, self.values))

     

       131
       131
       +
               if not key_times.startswith('0;'):

     

       132
       132
       +
                   key_times = '0;' + key_times

     

       133
       133
       +
                   values_str = f'{self.values[0]};' + values_str

     

       134
       134
       +
               if not key_times.endswith(';1'):

     

       135
       135
       +
                   key_times = key_times + ';1'

     

       136
       136
       +
                   values_str = values_str + f';{self.values[-1]}'

     

       137
       137
       +
               attrs = dict(

     

       138
       138
       +
                       dur=dur_str,

     

       139
       139
       +
                       values=values_str,

     

       140
       140
       +
                       keyTimes=key_times,

     

       141
       141
       +
                       repeatCount=repeat_count,

     

       142
       142
       +
                       fill=fill)

     

       143
       143
       +
               attrs.update(self.animate_attrs or {})

     

       144
       144
       +
               anim = elements.Animate(self.name, **attrs)

     

       145
       145
       +
               return anim

     

       146
       146
       +
       

     

       147
       147
       +
       

     

       148
       148
       +
       class AnimationHelperData:

     

       149
       149
       +
           def __init__(self):

     

       150
       150
       +
               self.attr_timelines = {}

     

       151
       151
       +
       

     

       152
       152
       +
           def add_key_frame(self, time, animation_args=None, **attr_values):

     

       153
       153
       +
               for attr, val in attr_values.items():

     

       154
       154
       +
                   attr = types.normalize_attribute_name(attr)

     

       155
       155
       +
                   timeline = self.attr_timelines.get(attr)

     

       156
       156
       +
                   if timeline is None:

     

       157
       157
       +
                       timeline = AnimatedAttributeTimeline(attr, animation_args)

     

       158
       158
       +
                       self.attr_timelines[attr] = timeline

     

       159
       159
       +
                   timeline.append(time, val)

     

       160
       160
       +
       

     

       161
       161
       +
           def add_attribute_key_sequence(self, attr, times, values, *,

     

       162
       162
       +
                                          animation_args=None):

     

       163
       163
       +
               attr = types.normalize_attribute_name(attr)

     

       164
       164
       +
               timeline = self.attr_timelines.get(attr)

     

       165
       165
       +
               if timeline is None:

     

       166
       166
       +
                   timeline = AnimatedAttributeTimeline(attr, animation_args)

     

       167
       167
       +
                   self.attr_timelines[attr] = timeline

     

       168
       168
       +
               timeline.extend(times, values)

     

       169
       169
       +
       

     

       170
       170
       +
           def children_with_context(self, context=None):

     

       171
       171
       +
               return [

     

       172
       172
       +
                   timeline.as_animate_element(context.animation_config)

     

       173
       173
       +
                   for timeline in self.attr_timelines.values()

     

       174
       174
       +
               ]

     

       175
       175
       +
       

     

       176
       176
       +
       

     

       177
       177
       +
       def animate_element_sequence(times, element_sequence):

     

       178
       178
       +
           '''Animate a list of elements to appear one-at-a-time in sequence.

     

       179
       179
       +
       

     

       180
       180
       +
           Elements should already be added to the drawing before using this.

     

       181
       181
       +
           '''

     

       182
       182
       +
           for i, elem in enumerate(element_sequence):

     

       183
       183
       +
               if elem is None:

     

       184
       184
       +
                   continue  # Draw nothing during this time

     

       185
       185
       +
               key_times = [times[i]]

     

       186
       186
       +
               values = ['visible']

     

       187
       187
       +
               if i > 0:

     

       188
       188
       +
                   key_times.insert(0, times[i-1])

     

       189
       189
       +
                   values.insert(0, 'hidden')

     

       190
       190
       +
               if i < len(element_sequence) - 1:

     

       191
       191
       +
                   key_times.append(times[i+1])

     

       192
       192
       +
                   values.append('hidden')

     

       193
       193
       +
               elem.add_attribute_key_sequence('visibility', key_times, values)

     

       194
       194
       +
       

     

       195
       195
       +
       def animate_text_sequence(container, times: List[float], values: List[str],

     

       196
       196
       +
                                 *text_args, kwargs_list=None, **text_kwargs):

     

       197
       197
       +
           '''Animate a sequence of text to appear one-at-a-time in sequence.

     

       198
       198
       +
       

     

       199
       199
       +
           Multiple `Text` elements will be appended to the given `container`.

     

       200
       200
       +
           '''

     

       201
       201
       +
           if kwargs_list is None:

     

       202
       202
       +
               kwargs_list = [None] * len(values)

     

       203
       203
       +
           new_elements = []

     

       204
       204
       +
           for val, current_kw in zip(values, kwargs_list):

     

       205
       205
       +
               kwargs = dict(text_kwargs)

     

       206
       206
       +
               if current_kw is not None:

     

       207
       207
       +
                   kwargs.update(current_kw)

     

       208
       208
       +
               new_elements.append(elements.Text(val, *text_args, **kwargs))

     

       209
       209
       +
           animate_element_sequence(times, new_elements)

     

       210
       210
       +
           container.extend(new_elements)

+59 -24

drawsvg/types.py

···

       1
       1
       +
       from typing import Optional, Sequence, Union

     

       2
       2
       +
       

     

       1
       3
        
       from collections import defaultdict

     

       2
       4
        
       import dataclasses

     

       3
       5
        
       

     

       4
       6
        
       from . import elements

     

       7
       7
       +
       from .native_animation import SyncedAnimationConfig, AnimationHelperData

     

       5
       8
        
       

     

       6
       9
        
       

     

       7
       7
       -
       @dataclasses.dataclass

     

       10
       10
       +
       @dataclasses.dataclass(frozen=True)

     

       8
       11
        
       class Context:

     

       9
       12
        
           '''Additional drawing configuration that can modify element's SVG output.'''

     

       10
       13
        
           invert_y: bool = False

     

       14
       14
       +
           animation_config: Optional[SyncedAnimationConfig] = None

     

       11
       15
        
       

     

       12
       16
        
           def drawing_creation_hook(self, d):

     

       13
       17
        
               '''Called by Drawing on initialization.'''

     

       14
       14
       -
               ...

     

       18
       18
       +
               if self.animation_config:

     

       19
       19
       +
                   self.animation_config.drawing_creation_hook(d, context=self)

     

       15
       20
        
       

     

       16
       21
        
           def override_view_box(self, view_box):

     

       17
       22
        
               if self.invert_y:

     
···

       25
       30
        
           def override_args(self, args):

     

       26
       31
        
               args = dict(args)

     

       27
       32
        
               if self.invert_y:

     

       28
       28
       -
                   if 'cy' in args:

     

       29
       29
       -
                       # Flip y for circle and ellipse

     

       30
       30
       -
                       try:

     

       31
       31
       -
                           args['cy'] = -args['cy']

     

       32
       32
       -
                       except TypeError:

     

       33
       33
       -
                           pass

     

       33
       33
       +
                   for y_like_arg in ('cy', 'y1', 'y2'):

     

       34
       34
       +
                       if y_like_arg in args:

     

       35
       35
       +
                           # Flip y for circle, ellipse, line, gradient, etc.

     

       36
       36
       +
                           try:

     

       37
       37
       +
                               args[y_like_arg] = -args[y_like_arg]

     

       38
       38
       +
                           except TypeError:

     

       39
       39
       +
                               pass

     

       34
       40
        
                   if 'y' in args:

     

       35
       41
        
                       # Flip y for most elements

     

       36
       42
        
                       try:

     
···

       100
       106
        
                   if v is None: continue

     

       101
       107
        
                   if isinstance(v, DrawingElement):

     

       102
       108
        
                       mapped_id = v.id

     

       103
       103
       -
                       if id_map and id(v) in id_map:

     

       109
       109
       +
                       if id_map is not None and id(v) in id_map:

     

       104
       110
        
                           mapped_id = id_map[id(v)]

     

       105
       111
        
                       if mapped_id is None:

     

       106
       112
        
                           continue

     
···

       150
       156
        
           def __init__(self, **args):

     

       151
       157
        
               self.args = {}

     

       152
       158
        
               for k, v in args.items():

     

       153
       153
       -
                   k = k.replace('__', ':')

     

       154
       154
       -
                   k = k.replace('_', '-')

     

       155
       155
       -
                   if k[-1] == '-':

     

       156
       156
       -
                       k = k[:-1]

     

       157
       157
       -
                   self.args[k] = v

     

       159
       159
       +
                   self.args[normalize_attribute_name(k)] = v

     

       158
       160
        
               self.children = []

     

       159
       161
        
               self.ordered_children = defaultdict(list)

     

       162
       162
       +
               self.animation_data = AnimationHelperData()

     

       163
       163
       +
               self._cached_context = None

     

       164
       164
       +
               self._cached_extra_children_with_context = None

     

       160
       165
        
           def check_children_allowed(self):

     

       161
       166
        
               if not self.has_content:

     

       162
       167
        
                   raise RuntimeError(

     

       163
       168
        
                           '{} does not support children'.format(type(self)))

     

       164
       164
       -
           def all_children(self):

     

       169
       169
       +
           def _extra_children_with_context_avoid_recompute(self, context=None):

     

       170
       170
       +
               if (self._cached_extra_children_with_context is not None

     

       171
       171
       +
                       and self._cached_context == context):

     

       172
       172
       +
                   return self._cached_extra_children_with_context

     

       173
       173
       +
               self._cached_context = context

     

       174
       174
       +
               self._cached_extra_children_with_context = (

     

       175
       175
       +
                       self.extra_children_with_context(context))

     

       176
       176
       +
               return self._cached_extra_children_with_context

     

       177
       177
       +
           def extra_children_with_context(self, context=None):

     

       178
       178
       +
               return self.animation_data.children_with_context(context)

     

       179
       179
       +
           def all_children(self, context=None):

     

       165
       180
        
               '''Return self.children and self.ordered_children as a single list.'''

     

       166
       181
        
               output = list(self.children)

     

       167
       182
        
               for z in sorted(self.ordered_children):

     

       168
       183
        
                   output.extend(self.ordered_children[z])

     

       184
       184
       +
               output.extend(

     

       185
       185
       +
                       self._extra_children_with_context_avoid_recompute(context))

     

       169
       186
        
               return output

     

       170
       187
        
           @property

     

       171
       188
        
           def id(self):

     

       172
       189
        
               return self.args.get('id', None)

     

       173
       190
        
           def write_svg_element(self, id_map, is_duplicate, output_file, context,

     

       174
       191
        
                                 dry_run, force_dup=False):

     

       175
       175
       -
               children = self.all_children()

     

       192
       192
       +
               children = self.all_children(context=context)

     

       176
       193
        
               if dry_run:

     

       177
       194
        
                   if is_duplicate(self) and self.id is None:

     

       178
       195
        
                       id_map[id(self)]

     
···

       182
       199
        
                   if self.has_content:

     

       183
       200
        
                       self.write_content(

     

       184
       201
        
                               id_map, is_duplicate, output_file, context, dry_run)

     

       185
       185
       -
                   if children:

     

       202
       202
       +
                   if children is not None and len(children):

     

       186
       203
        
                       self.write_children_content(

     

       187
       204
        
                               id_map, is_duplicate, output_file, context, dry_run)

     

       188
       205
        
                   return

     

       189
       206
        
               if is_duplicate(self) and not force_dup:

     

       190
       207
        
                   mapped_id = self.id

     

       191
       191
       -
                   if id_map and id(self) in id_map:

     

       208
       208
       +
                   if id_map is not None and id(self) in id_map:

     

       192
       209
        
                       mapped_id = id_map[id(self)]

     

       193
       210
        
                   output_file.write('<use xlink:href="#{}" />'.format(mapped_id))

     

       194
       211
        
                   return

     
···

       199
       216
        
                   override_args = dict(override_args)

     

       200
       217
        
                   override_args['id'] = id_map[id(self)]

     

       201
       218
        
               context.write_tag_args(override_args, output_file, id_map)

     

       202
       202
       -
               if not self.has_content and not children:

     

       219
       219
       +
               if not self.has_content and (children is None or len(children) == 0):

     

       203
       220
        
                   output_file.write(' />')

     

       204
       221
        
               else:

     

       205
       222
        
                   output_file.write('>')

     

       206
       223
        
                   if self.has_content:

     

       207
       224
        
                       self.write_content(

     

       208
       225
        
                               id_map, is_duplicate, output_file, context, dry_run)

     

       209
       209
       -
                   if children:

     

       226
       226
       +
                   if children is not None and len(children):

     

       210
       227
        
                       self.write_children_content(

     

       211
       228
        
                               id_map, is_duplicate, output_file, context, dry_run)

     

       212
       229
        
                   output_file.write('</')

     
···

       225
       242
        
       

     

       226
       243
        
               This will not be called if has_content is False.

     

       227
       244
        
               '''

     

       228
       228
       -
               children = self.all_children()

     

       245
       245
       +
               children = self.all_children(context=context)

     

       229
       246
        
               if dry_run:

     

       230
       247
        
                   for child in children:

     

       231
       248
        
                       child.write_svg_element(

     
···

       242
       259
        
                              dry_run):

     

       243
       260
        
               super().write_svg_defs(

     

       244
       261
        
                       id_map, is_duplicate, output_file, context, dry_run)

     

       245
       245
       -
               for child in self.all_children():

     

       262
       262
       +
               for child in self.all_children(context=context):

     

       246
       263
        
                   child.write_svg_defs(

     

       247
       264
        
                           id_map, is_duplicate, output_file, context, dry_run)

     

       248
       265
        
           def __eq__(self, other):

     
···

       258
       275
        
               self.children.extend(animate_iterable)

     

       259
       276
        
           def append_title(self, text, **kwargs):

     

       260
       277
        
               self.children.append(elements.Title(text, **kwargs))

     

       278
       278
       +
           def add_key_frame(self, time, animation_args=None, **attr_values):

     

       279
       279
       +
               self._cached_extra_children_with_context = None

     

       280
       280
       +
               self.animation_data.add_key_frame(

     

       281
       281
       +
                       time, animation_args=animation_args, **attr_values)

     

       282
       282
       +
           def add_attribute_key_sequence(self, attr, times, values, *,

     

       283
       283
       +
                                          animation_args=None):

     

       284
       284
       +
               self._cached_extra_children_with_context = None

     

       285
       285
       +
               self.animation_data.add_attribute_key_sequence(

     

       286
       286
       +
                       attr, times, values, animation_args=animation_args)

     

       261
       287
        
       

     

       262
       288
        
       

     

       263
       289
        
       class DrawingParentElement(DrawingBasicElement):

     
···

       266
       292
        
           def __init__(self, children=(), ordered_children=None, **args):

     

       267
       293
        
               super().__init__(**args)

     

       268
       294
        
               self.children = list(children)

     

       269
       269
       -
               if ordered_children:

     

       295
       295
       +
               if ordered_children is not None and len(ordered_children):

     

       270
       296
        
                   self.ordered_children.update(

     

       271
       297
        
                       (z, list(v)) for z, v in ordered_children.items())

     

       272
       298
        
               if self.children or self.ordered_children:

     
···

       277
       303
        
               if not hasattr(obj, 'write_svg_element'):

     

       278
       304
        
                   elements = obj.to_drawables(**kwargs)

     

       279
       305
        
               else:

     

       280
       280
       -
                   assert len(kwargs) == 0

     

       306
       306
       +
                   if len(kwargs) > 0:

     

       307
       307
       +
                       raise ValueError('unexpected kwargs')

     

       281
       308
        
                   elements = obj

     

       282
       309
        
               if hasattr(elements, 'write_svg_element'):

     

       283
       310
        
                   self.append(elements, z=z)

     
···

       298
       325
        
           def write_content(self, id_map, is_duplicate, output_file, context,

     

       299
       326
        
                             dry_run):

     

       300
       327
        
               pass

     

       328
       328
       +
       

     

       329
       329
       +
       

     

       330
       330
       +
       def normalize_attribute_name(name):

     

       331
       331
       +
           name = name.replace('__', ':')

     

       332
       332
       +
           name = name.replace('_', '-')

     

       333
       333
       +
           if name[-1] == '-':

     

       334
       334
       +
               name = name[:-1]

     

       335
       335
       +
           return name

+164

examples/playback-controls.html

···

       1
       1
       +
       <!DOCTYPE html>

     

       2
       2
       +
       <head>

     

       3
       3
       +
       <meta charset="utf-8">

     

       4
       4
       +
       </head>

     

       5
       5
       +
       <body>

     

       6
       6
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       7
       7
       +
           width="400" height="200" viewBox="-200.0 -100.0 400 200" onload="svgOnLoad(event)">

     

       8
       8
       +
       <defs>

     

       9
       9
       +
       </defs>

     

       10
       10
       +
       <rect x="-200" y="-100" width="400" height="200" fill="#eee" />

     

       11
       11
       +
       <circle cx="0" cy="0" r="40" fill="green" />

     

       12
       12
       +
       <circle cx="0" cy="0" r="0" fill="silver" stroke="gray">

     

       13
       13
       +
       <animate attributeName="cx" dur="8s" values="-100;0;100;0;-100" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />

     

       14
       14
       +
       <animate attributeName="cy" dur="8s" values="0;-100;0;100;0" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />

     

       15
       15
       +
       <animate attributeName="r" dur="8s" values="0;40;0;40;0" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />

     

       16
       16
       +
       <animate attributeName="stroke-width" dur="8s" values="0;5;0;5;0" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />

     

       17
       17
       +
       </circle>

     

       18
       18
       +
       <text x="0" y="1" font-size="30" fill="yellow" text-anchor="middle" dominant-baseline="central">0<animate attributeName="visibility" dur="8s" values="visible;hidden;hidden" keyTimes="0;0.25;1" repeatCount="indefinite" fill="freeze" /></text>

     

       19
       19
       +
       <text x="0" y="1" font-size="30" fill="yellow" text-anchor="middle" dominant-baseline="central">1<animate attributeName="visibility" dur="8s" values="hidden;visible;hidden;hidden" keyTimes="0;0.25;0.5;1" repeatCount="indefinite" fill="freeze" /></text>

     

       20
       20
       +
       <text x="0" y="1" font-size="30" fill="yellow" text-anchor="middle" dominant-baseline="central">2<animate attributeName="visibility" dur="8s" values="hidden;hidden;visible;hidden;hidden" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" /></text>

     

       21
       21
       +
       <text x="0" y="1" font-size="30" fill="yellow" text-anchor="middle" dominant-baseline="central">3<animate attributeName="visibility" dur="8s" values="hidden;hidden;visible;visible" keyTimes="0;0.5;0.75;1" repeatCount="indefinite" fill="freeze" /></text>

     

       22
       22
       +
       <g id="scrub">

     

       23
       23
       +
       <path d="M-168.0,90.0 L168.0,90.0" stroke="#ccc" stroke-width="4" stroke-linecap="round" />

     

       24
       24
       +
       <rect x="-168.0" y="90.0" width="0" height="0.001" stroke="#05f" stroke-width="4" stroke-linejoin="round">

     

       25
       25
       +
       <animate attributeName="width" dur="8s" values="0;336" keyTimes="0;1" repeatCount="indefinite" fill="freeze" />

     

       26
       26
       +
       </rect>

     

       27
       27
       +
       <g id="scrub-capture" data-xmin="-168.0" data-xmax="168.0" data-totaldur="8" data-startdelay="0" data-enddelay="0" data-pauseonload="0">

     

       28
       28
       +
       <rect x="-170.0" y="80.0" width="340" height="20" fill="rgba(255,255,255,0)" />

     

       29
       29
       +
       <circle cx="-168.0" cy="90.0" r="6" fill="#05f" id="scrub-knob" visibility="hidden">

     

       30
       30
       +
       <animate attributeName="cx" dur="8s" values="-168.0;168.0" keyTimes="0;1" repeatCount="indefinite" fill="freeze" />

     

       31
       31
       +
       </circle>

     

       32
       32
       +
       </g>

     

       33
       33
       +
       <g id="scrub-play" visibility="hidden">

     

       34
       34
       +
       <rect x="-191.0" y="86.0" width="8" height="8" fill="#05f" stroke="#05f" stroke-width="8" stroke-linejoin="round" />

     

       35
       35
       +
       <path d="M-191.0,86.0 v8.0 l8.0,-4.0 Z" fill="#eee" />

     

       36
       36
       +
       </g>

     

       37
       37
       +
       <g id="scrub-pause" visibility="hidden">

     

       38
       38
       +
       <rect x="-191.0" y="86.0" width="8" height="8" fill="#05f" stroke="#05f" stroke-width="8" stroke-linejoin="round" />

     

       39
       39
       +
       <rect x="-190.0" y="86.0" width="2.0" height="8.0" fill="#eee" />

     

       40
       40
       +
       <rect x="-186.0" y="86.0" width="2.0" height="8.0" fill="#eee" />

     

       41
       41
       +
       </g>

     

       42
       42
       +
       </g>

     

       43
       43
       +
       <script>/*<![CDATA[*/

     

       44
       44
       +
       /* Animation playback controls generated by drawsvg */

     

       45
       45
       +
       /* https://github.com/cduck/drawsvg/ */

     

       46
       46
       +
       function svgOnLoad(event) {

     

       47
       47
       +
           /* Support standalone SVG or embedded in HTML or iframe */

     

       48
       48
       +
           if (event && event.target && event.target.ownerDocument) {

     

       49
       49
       +
               svgSetup(event.target.ownerDocument);

     

       50
       50
       +
           } else if (document && document.currentScript

     

       51
       51
       +
                      && document.currentScript.parentElement) {

     

       52
       52
       +
               svgSetup(document.currentScript.parentElement);

     

       53
       53
       +
           }

     

       54
       54
       +
       }

     

       55
       55
       +
       function svgSetup(doc) {

     

       56
       56
       +
           var svgRoot = doc.documentElement || doc;

     

       57
       57
       +
           var scrubCapture = doc.getElementById("scrub-capture");

     

       58
       58
       +
           /* Block multiple setups */

     

       59
       59
       +
           if (!scrubCapture || scrubCapture.getAttribute("svgSetupDone")) {

     

       60
       60
       +
               return;

     

       61
       61
       +
           }

     

       62
       62
       +
           scrubCapture.setAttribute("svgSetupDone", true);

     

       63
       63
       +
           var scrubContainer = doc.getElementById("scrub");

     

       64
       64
       +
           var scrubPlay = doc.getElementById("scrub-play");

     

       65
       65
       +
           var scrubPause = doc.getElementById("scrub-pause");

     

       66
       66
       +
           var scrubKnob = doc.getElementById("scrub-knob");

     

       67
       67
       +
           var scrubXMin = parseFloat(scrubCapture.dataset.xmin);

     

       68
       68
       +
           var scrubXMax = parseFloat(scrubCapture.dataset.xmax);

     

       69
       69
       +
           var scrubTotalDur = parseFloat(scrubCapture.dataset.totaldur);

     

       70
       70
       +
           var scrubStartDelay = parseFloat(scrubCapture.dataset.startdelay);

     

       71
       71
       +
           var scrubEndDelay = parseFloat(scrubCapture.dataset.enddelay);

     

       72
       72
       +
           var scrubPauseOnLoad = parseFloat(scrubCapture.dataset.pauseonload);

     

       73
       73
       +
           var paused = false;

     

       74
       74
       +
           var dragXOffset = 0;

     

       75
       75
       +
           var point = svgRoot.createSVGPoint();

     

       76
       76
       +
       

     

       77
       77
       +
           function screenToSvgX(p) {

     

       78
       78
       +
               var matrix = scrubKnob.getScreenCTM().inverse();

     

       79
       79
       +
               point.x = p.x;

     

       80
       80
       +
               point.y = p.y;

     

       81
       81
       +
               return point.matrixTransform(matrix).x;

     

       82
       82
       +
           };

     

       83
       83
       +
           function screenToProgress(p) {

     

       84
       84
       +
               var matrix = scrubKnob.getScreenCTM().inverse();

     

       85
       85
       +
               point.x = p.x;

     

       86
       86
       +
               point.y = p.y;

     

       87
       87
       +
               var x = point.matrixTransform(matrix).x;

     

       88
       88
       +
               if (x <= scrubXMin) {

     

       89
       89
       +
                   return scrubStartDelay / scrubTotalDur;

     

       90
       90
       +
               }

     

       91
       91
       +
               if (x >= scrubXMax) {

     

       92
       92
       +
                   return (scrubTotalDur - scrubEndDelay) / scrubTotalDur;

     

       93
       93
       +
               }

     

       94
       94
       +
               return (scrubStartDelay/scrubTotalDur

     

       95
       95
       +
                       + (x - dragXOffset - scrubXMin)

     

       96
       96
       +
                         / (scrubXMax - scrubXMin)

     

       97
       97
       +
                         * (scrubTotalDur - scrubStartDelay - scrubEndDelay)

     

       98
       98
       +
                         / scrubTotalDur);

     

       99
       99
       +
           };

     

       100
       100
       +
           function currentScrubX() {

     

       101
       101
       +
               return scrubKnob.cx.animVal.value;

     

       102
       102
       +
           };

     

       103
       103
       +
           function pause() {

     

       104
       104
       +
               svgRoot.pauseAnimations();

     

       105
       105
       +
               scrubPlay.setAttribute("visibility", "visible");

     

       106
       106
       +
               scrubPause.setAttribute("visibility", "hidden");

     

       107
       107
       +
               paused = true;

     

       108
       108
       +
           };

     

       109
       109
       +
           function play() {

     

       110
       110
       +
               svgRoot.unpauseAnimations();

     

       111
       111
       +
               scrubPause.setAttribute("visibility", "visible");

     

       112
       112
       +
               scrubPlay.setAttribute("visibility", "hidden");

     

       113
       113
       +
               paused = false;

     

       114
       114
       +
           };

     

       115
       115
       +
           function scrub(playbackFraction) {

     

       116
       116
       +
               var t = scrubTotalDur * playbackFraction;

     

       117
       117
       +
               /* Stop 10ms before end to avoid loop (>=1ms needed on FF) */

     

       118
       118
       +
               var limit = scrubTotalDur - 10e-3;

     

       119
       119
       +
               if (t < 0) t = 0;

     

       120
       120
       +
               else if (t > limit) t = limit;

     

       121
       121
       +
               svgRoot.setCurrentTime(t);

     

       122
       122
       +
           };

     

       123
       123
       +
           function mousedown(e) {

     

       124
       124
       +
               svgRoot.pauseAnimations();

     

       125
       125
       +
               if (e.target == scrubKnob) {

     

       126
       126
       +
                   dragXOffset = screenToSvgX(e) - currentScrubX();

     

       127
       127
       +
               } else {

     

       128
       128
       +
                   dragXOffset = 0;

     

       129
       129
       +
               }

     

       130
       130
       +
               scrub(screenToProgress(e));

     

       131
       131
       +
               /* Global document listeners */

     

       132
       132
       +
               document.addEventListener('mousemove', mousemove);

     

       133
       133
       +
               document.addEventListener('mouseup', mouseup);

     

       134
       134
       +
               e.preventDefault();

     

       135
       135
       +
           };

     

       136
       136
       +
           function mouseup(e) {

     

       137
       137
       +
               dragXOffset = 0;

     

       138
       138
       +
               document.removeEventListener('mousemove', mousemove);

     

       139
       139
       +
               document.removeEventListener('mouseup', mouseup);

     

       140
       140
       +
               if (!paused) {

     

       141
       141
       +
                   svgRoot.unpauseAnimations();

     

       142
       142
       +
               }

     

       143
       143
       +
               e.preventDefault();

     

       144
       144
       +
           };

     

       145
       145
       +
           function mousemove(e) {

     

       146
       146
       +
               scrub(screenToProgress(e));

     

       147
       147
       +
           };

     

       148
       148
       +
           scrubPause.addEventListener("click", pause);

     

       149
       149
       +
           scrubPlay.addEventListener("click", play);

     

       150
       150
       +
           scrubCapture.addEventListener("mousedown", mousedown);

     

       151
       151
       +
           scrubContainer.setAttribute("visibility", "visible");

     

       152
       152
       +
           scrubKnob.setAttribute("visibility", "visible");

     

       153
       153
       +
           if (scrubPauseOnLoad) {

     

       154
       154
       +
               pause();

     

       155
       155
       +
               scrub(0);

     

       156
       156
       +
           } else {

     

       157
       157
       +
               play();

     

       158
       158
       +
           }

     

       159
       159
       +
       };

     

       160
       160
       +
       svgOnLoad();

     

       161
       161
       +
       /*]]>*/</script>

     

       162
       162
       +
       </svg>

     

       163
       163
       +
       </body>

     

       164
       164
       +
       </html>

+158

examples/playback-controls.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
           width="400" height="200" viewBox="-200.0 -100.0 400 200" onload="svgOnLoad(event)">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <rect x="-200" y="-100" width="400" height="200" fill="#eee" />

     

       7
       7
       +
       <circle cx="0" cy="0" r="40" fill="green" />

     

       8
       8
       +
       <circle cx="0" cy="0" r="0" fill="silver" stroke="gray">

     

       9
       9
       +
       <animate attributeName="cx" dur="8s" values="-100;0;100;0;-100" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />

     

       10
       10
       +
       <animate attributeName="cy" dur="8s" values="0;-100;0;100;0" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />

     

       11
       11
       +
       <animate attributeName="r" dur="8s" values="0;40;0;40;0" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />

     

       12
       12
       +
       <animate attributeName="stroke-width" dur="8s" values="0;5;0;5;0" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />

     

       13
       13
       +
       </circle>

     

       14
       14
       +
       <text x="0" y="1" font-size="30" fill="yellow" text-anchor="middle" dominant-baseline="central">0<animate attributeName="visibility" dur="8s" values="visible;hidden;hidden" keyTimes="0;0.25;1" repeatCount="indefinite" fill="freeze" /></text>

     

       15
       15
       +
       <text x="0" y="1" font-size="30" fill="yellow" text-anchor="middle" dominant-baseline="central">1<animate attributeName="visibility" dur="8s" values="hidden;visible;hidden;hidden" keyTimes="0;0.25;0.5;1" repeatCount="indefinite" fill="freeze" /></text>

     

       16
       16
       +
       <text x="0" y="1" font-size="30" fill="yellow" text-anchor="middle" dominant-baseline="central">2<animate attributeName="visibility" dur="8s" values="hidden;hidden;visible;hidden;hidden" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" /></text>

     

       17
       17
       +
       <text x="0" y="1" font-size="30" fill="yellow" text-anchor="middle" dominant-baseline="central">3<animate attributeName="visibility" dur="8s" values="hidden;hidden;visible;visible" keyTimes="0;0.5;0.75;1" repeatCount="indefinite" fill="freeze" /></text>

     

       18
       18
       +
       <g id="scrub">

     

       19
       19
       +
       <path d="M-168.0,90.0 L168.0,90.0" stroke="#ccc" stroke-width="4" stroke-linecap="round" />

     

       20
       20
       +
       <rect x="-168.0" y="90.0" width="0" height="0.001" stroke="#05f" stroke-width="4" stroke-linejoin="round">

     

       21
       21
       +
       <animate attributeName="width" dur="8s" values="0;336" keyTimes="0;1" repeatCount="indefinite" fill="freeze" />

     

       22
       22
       +
       </rect>

     

       23
       23
       +
       <g id="scrub-capture" data-xmin="-168.0" data-xmax="168.0" data-totaldur="8" data-startdelay="0" data-enddelay="0" data-pauseonload="0">

     

       24
       24
       +
       <rect x="-170.0" y="80.0" width="340" height="20" fill="rgba(255,255,255,0)" />

     

       25
       25
       +
       <circle cx="-168.0" cy="90.0" r="6" fill="#05f" id="scrub-knob" visibility="hidden">

     

       26
       26
       +
       <animate attributeName="cx" dur="8s" values="-168.0;168.0" keyTimes="0;1" repeatCount="indefinite" fill="freeze" />

     

       27
       27
       +
       </circle>

     

       28
       28
       +
       </g>

     

       29
       29
       +
       <g id="scrub-play" visibility="hidden">

     

       30
       30
       +
       <rect x="-191.0" y="86.0" width="8" height="8" fill="#05f" stroke="#05f" stroke-width="8" stroke-linejoin="round" />

     

       31
       31
       +
       <path d="M-191.0,86.0 v8.0 l8.0,-4.0 Z" fill="#eee" />

     

       32
       32
       +
       </g>

     

       33
       33
       +
       <g id="scrub-pause" visibility="hidden">

     

       34
       34
       +
       <rect x="-191.0" y="86.0" width="8" height="8" fill="#05f" stroke="#05f" stroke-width="8" stroke-linejoin="round" />

     

       35
       35
       +
       <rect x="-190.0" y="86.0" width="2.0" height="8.0" fill="#eee" />

     

       36
       36
       +
       <rect x="-186.0" y="86.0" width="2.0" height="8.0" fill="#eee" />

     

       37
       37
       +
       </g>

     

       38
       38
       +
       </g>

     

       39
       39
       +
       <script>/*<![CDATA[*/

     

       40
       40
       +
       /* Animation playback controls generated by drawsvg */

     

       41
       41
       +
       /* https://github.com/cduck/drawsvg/ */

     

       42
       42
       +
       function svgOnLoad(event) {

     

       43
       43
       +
           /* Support standalone SVG or embedded in HTML or iframe */

     

       44
       44
       +
           if (event && event.target && event.target.ownerDocument) {

     

       45
       45
       +
               svgSetup(event.target.ownerDocument);

     

       46
       46
       +
           } else if (document && document.currentScript

     

       47
       47
       +
                      && document.currentScript.parentElement) {

     

       48
       48
       +
               svgSetup(document.currentScript.parentElement);

     

       49
       49
       +
           }

     

       50
       50
       +
       }

     

       51
       51
       +
       function svgSetup(doc) {

     

       52
       52
       +
           var svgRoot = doc.documentElement || doc;

     

       53
       53
       +
           var scrubCapture = doc.getElementById("scrub-capture");

     

       54
       54
       +
           /* Block multiple setups */

     

       55
       55
       +
           if (!scrubCapture || scrubCapture.getAttribute("svgSetupDone")) {

     

       56
       56
       +
               return;

     

       57
       57
       +
           }

     

       58
       58
       +
           scrubCapture.setAttribute("svgSetupDone", true);

     

       59
       59
       +
           var scrubContainer = doc.getElementById("scrub");

     

       60
       60
       +
           var scrubPlay = doc.getElementById("scrub-play");

     

       61
       61
       +
           var scrubPause = doc.getElementById("scrub-pause");

     

       62
       62
       +
           var scrubKnob = doc.getElementById("scrub-knob");

     

       63
       63
       +
           var scrubXMin = parseFloat(scrubCapture.dataset.xmin);

     

       64
       64
       +
           var scrubXMax = parseFloat(scrubCapture.dataset.xmax);

     

       65
       65
       +
           var scrubTotalDur = parseFloat(scrubCapture.dataset.totaldur);

     

       66
       66
       +
           var scrubStartDelay = parseFloat(scrubCapture.dataset.startdelay);

     

       67
       67
       +
           var scrubEndDelay = parseFloat(scrubCapture.dataset.enddelay);

     

       68
       68
       +
           var scrubPauseOnLoad = parseFloat(scrubCapture.dataset.pauseonload);

     

       69
       69
       +
           var paused = false;

     

       70
       70
       +
           var dragXOffset = 0;

     

       71
       71
       +
           var point = svgRoot.createSVGPoint();

     

       72
       72
       +
       

     

       73
       73
       +
           function screenToSvgX(p) {

     

       74
       74
       +
               var matrix = scrubKnob.getScreenCTM().inverse();

     

       75
       75
       +
               point.x = p.x;

     

       76
       76
       +
               point.y = p.y;

     

       77
       77
       +
               return point.matrixTransform(matrix).x;

     

       78
       78
       +
           };

     

       79
       79
       +
           function screenToProgress(p) {

     

       80
       80
       +
               var matrix = scrubKnob.getScreenCTM().inverse();

     

       81
       81
       +
               point.x = p.x;

     

       82
       82
       +
               point.y = p.y;

     

       83
       83
       +
               var x = point.matrixTransform(matrix).x;

     

       84
       84
       +
               if (x <= scrubXMin) {

     

       85
       85
       +
                   return scrubStartDelay / scrubTotalDur;

     

       86
       86
       +
               }

     

       87
       87
       +
               if (x >= scrubXMax) {

     

       88
       88
       +
                   return (scrubTotalDur - scrubEndDelay) / scrubTotalDur;

     

       89
       89
       +
               }

     

       90
       90
       +
               return (scrubStartDelay/scrubTotalDur

     

       91
       91
       +
                       + (x - dragXOffset - scrubXMin)

     

       92
       92
       +
                         / (scrubXMax - scrubXMin)

     

       93
       93
       +
                         * (scrubTotalDur - scrubStartDelay - scrubEndDelay)

     

       94
       94
       +
                         / scrubTotalDur);

     

       95
       95
       +
           };

     

       96
       96
       +
           function currentScrubX() {

     

       97
       97
       +
               return scrubKnob.cx.animVal.value;

     

       98
       98
       +
           };

     

       99
       99
       +
           function pause() {

     

       100
       100
       +
               svgRoot.pauseAnimations();

     

       101
       101
       +
               scrubPlay.setAttribute("visibility", "visible");

     

       102
       102
       +
               scrubPause.setAttribute("visibility", "hidden");

     

       103
       103
       +
               paused = true;

     

       104
       104
       +
           };

     

       105
       105
       +
           function play() {

     

       106
       106
       +
               svgRoot.unpauseAnimations();

     

       107
       107
       +
               scrubPause.setAttribute("visibility", "visible");

     

       108
       108
       +
               scrubPlay.setAttribute("visibility", "hidden");

     

       109
       109
       +
               paused = false;

     

       110
       110
       +
           };

     

       111
       111
       +
           function scrub(playbackFraction) {

     

       112
       112
       +
               var t = scrubTotalDur * playbackFraction;

     

       113
       113
       +
               /* Stop 10ms before end to avoid loop (>=1ms needed on FF) */

     

       114
       114
       +
               var limit = scrubTotalDur - 10e-3;

     

       115
       115
       +
               if (t < 0) t = 0;

     

       116
       116
       +
               else if (t > limit) t = limit;

     

       117
       117
       +
               svgRoot.setCurrentTime(t);

     

       118
       118
       +
           };

     

       119
       119
       +
           function mousedown(e) {

     

       120
       120
       +
               svgRoot.pauseAnimations();

     

       121
       121
       +
               if (e.target == scrubKnob) {

     

       122
       122
       +
                   dragXOffset = screenToSvgX(e) - currentScrubX();

     

       123
       123
       +
               } else {

     

       124
       124
       +
                   dragXOffset = 0;

     

       125
       125
       +
               }

     

       126
       126
       +
               scrub(screenToProgress(e));

     

       127
       127
       +
               /* Global document listeners */

     

       128
       128
       +
               document.addEventListener('mousemove', mousemove);

     

       129
       129
       +
               document.addEventListener('mouseup', mouseup);

     

       130
       130
       +
               e.preventDefault();

     

       131
       131
       +
           };

     

       132
       132
       +
           function mouseup(e) {

     

       133
       133
       +
               dragXOffset = 0;

     

       134
       134
       +
               document.removeEventListener('mousemove', mousemove);

     

       135
       135
       +
               document.removeEventListener('mouseup', mouseup);

     

       136
       136
       +
               if (!paused) {

     

       137
       137
       +
                   svgRoot.unpauseAnimations();

     

       138
       138
       +
               }

     

       139
       139
       +
               e.preventDefault();

     

       140
       140
       +
           };

     

       141
       141
       +
           function mousemove(e) {

     

       142
       142
       +
               scrub(screenToProgress(e));

     

       143
       143
       +
           };

     

       144
       144
       +
           scrubPause.addEventListener("click", pause);

     

       145
       145
       +
           scrubPlay.addEventListener("click", play);

     

       146
       146
       +
           scrubCapture.addEventListener("mousedown", mousedown);

     

       147
       147
       +
           scrubContainer.setAttribute("visibility", "visible");

     

       148
       148
       +
           scrubKnob.setAttribute("visibility", "visible");

     

       149
       149
       +
           if (scrubPauseOnLoad) {

     

       150
       150
       +
               pause();

     

       151
       151
       +
               scrub(0);

     

       152
       152
       +
           } else {

     

       153
       153
       +
               play();

     

       154
       154
       +
           }

     

       155
       155
       +
       };

     

       156
       156
       +
       svgOnLoad();

     

       157
       157
       +
       /*]]>*/</script>

     

       158
       158
       +
       </svg>