sketchingpy.sketch2dweb

   1"""HTML5 Canvas-based renderer for Sketchingpy.
   2
   3License:
   4    BSD
   5"""
   6
   7import csv
   8import io
   9import json
  10import os.path
  11import time
  12import typing
  13import urllib.parse
  14
  15has_js = False
  16try:
  17    import js  # type: ignore
  18    import pyodide.ffi  # type: ignore
  19    import pyodide.http  # type: ignore
  20    import pyscript  # type: ignore
  21    has_js = True
  22except:
  23    pass
  24
  25import sketchingpy.abstracted
  26import sketchingpy.const
  27import sketchingpy.control_struct
  28import sketchingpy.data_struct
  29import sketchingpy.state_struct
  30
  31DEFAULT_FPS = 20
  32
  33KEY_MAP = {
  34    'arrowleft': sketchingpy.const.KEYBOARD_LEFT_BUTTON,
  35    'arrowup': sketchingpy.const.KEYBOARD_UP_BUTTON,
  36    'arrowright': sketchingpy.const.KEYBOARD_RIGHT_BUTTON,
  37    'arrowdown': sketchingpy.const.KEYBOARD_DOWN_BUTTON,
  38    ' ': sketchingpy.const.KEYBOARD_SPACE_BUTTON,
  39    'control': sketchingpy.const.KEYBOARD_CTRL_BUTTON,
  40    'alt': sketchingpy.const.KEYBOARD_ALT_BUTTON,
  41    'shift': sketchingpy.const.KEYBOARD_SHIFT_BUTTON,
  42    'tab': sketchingpy.const.KEYBOARD_TAB_BUTTON,
  43    'home': sketchingpy.const.KEYBOARD_HOME_BUTTON,
  44    'end': sketchingpy.const.KEYBOARD_END_BUTTON,
  45    'enter': sketchingpy.const.KEYBOARD_RETURN_BUTTON,
  46    'backspace': sketchingpy.const.KEYBOARD_BACKSPACE_BUTTON,
  47    'null': None
  48}
  49
  50OPTIONAL_SKETCH_CALLBACK = typing.Optional[typing.Callable[[sketchingpy.abstracted.Sketch], None]]
  51
  52
  53class CanvasRegionEllipse:
  54    """Description of a region of a canvas expressed as an ellipse."""
  55
  56    def __init__(self, x: float, y: float, radius_x: float, radius_y: float):
  57        """Create a new elliptical region record.
  58
  59        Args:
  60            x: The center x coordinate of the region.
  61            y: The center y coordinate of the region.
  62            radius_x: The horizontal radius of the region.
  63            radius_y: The vertical radius of the region.
  64        """
  65        self._x = x
  66        self._y = y
  67        self._radius_x = radius_x
  68        self._radius_y = radius_y
  69
  70    def get_x(self) -> float:
  71        """Get the center horizontal coordinate of this region.
  72
  73        Returns:
  74            The center x coordinate of the region.
  75        """
  76        return self._x
  77
  78    def get_y(self) -> float:
  79        """Get the center vertical coordinate of this region.
  80
  81        Returns:
  82            The center y coordinate of the region.
  83        """
  84        return self._y
  85
  86    def get_radius_x(self) -> float:
  87        """Get the horizontal size of this region.
  88
  89        Returns:
  90            The horizontal radius of the region.
  91        """
  92        return self._radius_x
  93
  94    def get_radius_y(self) -> float:
  95        """Get the vertical size of this region.
  96
  97        Returns:
  98            The vertical radius of the region.
  99        """
 100        return self._radius_y
 101
 102
 103class CanvasRegionRect:
 104    """Description of a region of a canvas expressed as a rectangle."""
 105
 106    def __init__(self, x: float, y: float, width: float, height: float):
 107        """Create a new rectangular region record.
 108
 109        Args:
 110            x: The center x coordinate of the region.
 111            y: The center y coordinate of the region.
 112            radius_x: The horizontal size of the region.
 113            radius_y: The vertical size of the region.
 114        """
 115        self._x = x
 116        self._y = y
 117        self._width = width
 118        self._height = height
 119
 120    def get_x(self) -> float:
 121        """Get the start horizontal coordinate of this region.
 122
 123        Returns:
 124            The left x coordinate of the region.
 125        """
 126        return self._x
 127
 128    def get_y(self) -> float:
 129        """Get the start vertical coordinate of this region.
 130
 131        Returns:
 132            The top y coordinate of the region.
 133        """
 134        return self._y
 135
 136    def get_width(self) -> float:
 137        """Get the horizontal size of this region.
 138
 139        Returns:
 140            The horizontal width of the region.
 141        """
 142        return self._width
 143
 144    def get_height(self) -> float:
 145        """Get the vertical size of this region.
 146
 147        Returns:
 148            The vertical height of the region.
 149        """
 150        return self._height
 151
 152
 153class WebBuffer:
 154    """Structure for an offscreen buffer."""
 155
 156    def __init__(self, canvas, context, width: int, height: int):
 157        """Create a new offscreen record.
 158
 159        Args:
 160            canvas: The offscreen canvas element.
 161            context: The 2D drawing context.
 162            width: The horizontal size of the buffer in pixels.
 163            height: The vertical size of the buffer in pixels.
 164        """
 165        self._canvas = canvas
 166        self._context = context
 167        self._width = width
 168        self._height = height
 169
 170    def get_element(self):
 171        """Get the offscreen canvas object.
 172
 173        Returns:
 174            The offscreen canvas element.
 175        """
 176        return self._canvas
 177
 178    def get_context(self):
 179        """Get the drawing context compatiable with the main canvas.
 180
 181        Returns:
 182            The 2D drawing context.
 183        """
 184        return self._context
 185
 186    def get_width(self) -> int:
 187        """Get the horizontal size of the buffer in pixels.
 188
 189        Returns:
 190            Width of the offscreen canvas.
 191        """
 192        return self._width
 193
 194    def get_height(self) -> int:
 195        """Get the vertical size of the buffer in pixels.
 196
 197        Returns:
 198            Height of the offscreen canvas.
 199        """
 200        return self._height
 201
 202
 203class Sketch2DWeb(sketchingpy.abstracted.Sketch):
 204    """Sketch renderer for web / HTML5."""
 205
 206    def __init__(self, width: float, height: float, element_id: str = 'sketch-canvas',
 207        loading_id: typing.Optional[str] = 'sketch-load-message'):
 208        """Create a new HTML5 Canvas-based sketch.
 209
 210        Args:
 211            width: The horizontal size of the sketch in pixels. Will update the HTML5 element.
 212            height: The vertical size of the sketch in pixels. Will update the HTML5 element.
 213            element_id: The ID (HTML) of the canvas into which this sketch should be drawn.
 214            loading_id: The ID (HTML) of the loading message to hide upon showing the sketch.
 215        """
 216        super().__init__()
 217
 218        if not has_js:
 219            raise RuntimeError('Cannot access JS / pyodide.')
 220
 221        # Save elements required for running the canvas
 222        self._element_id = element_id
 223        self._element = js.document.getElementById(element_id)
 224        self._element.width = width
 225        self._element.height = height
 226        self._element.style.display = 'none'
 227        self._context = self._element.getContext('2d')
 228        self._last_render = None
 229
 230        self._loading_id = loading_id
 231        self._loading_element = js.document.getElementById(loading_id)
 232
 233        # Internal only elements
 234        self._internal_loop_callback = None
 235        self._internal_mouse_x = 0
 236        self._internal_mouse_y = 0
 237        self._internal_pre_show_actions: typing.List[typing.Callable] = []
 238        self._added_fonts: typing.Set[str] = set()
 239
 240        # Buffers
 241        self._buffers: typing.Dict[str, WebBuffer] = {}
 242        self._base_context = self._context
 243        self._base_element = self._element
 244        self._width = self._element.width
 245        self._height = self._element.height
 246
 247        # User configurable state
 248        self._state_frame_rate = DEFAULT_FPS
 249        self._stopped = False
 250
 251        # Callback
 252        self._callback_step: OPTIONAL_SKETCH_CALLBACK = None
 253        self._callback_quit: OPTIONAL_SKETCH_CALLBACK = None
 254
 255        # Control
 256        self._keyboard = PyscriptKeyboard(self._element)
 257        self._mouse = PyscriptMouse(self._element)
 258
 259    ##########
 260    # Buffer #
 261    ##########
 262
 263    def create_buffer(self, name: str, width: int, height: int,
 264        background: typing.Optional[str] = None):
 265        canvas = js.window.OffscreenCanvas.new(width, height)
 266        context = canvas.getContext('2d')
 267        self._buffers[name] = WebBuffer(canvas, context, width, height)
 268        if background is not None:
 269            context.clearRect(0, 0, self._width, self._height)
 270            context.fillStyle = background
 271            context.fillRect(0, 0, self._width, self._height)
 272
 273    def enter_buffer(self, name: str):
 274        web_buffer = self._buffers[name]
 275        self._context = web_buffer.get_context()
 276        self._element = web_buffer.get_element()
 277        self._width = web_buffer.get_width()
 278        self._height = web_buffer.get_height()
 279
 280    def exit_buffer(self):
 281        self._context = self._base_context
 282        self._element = self._base_element
 283        self._width = self._base_element.width
 284        self._height = self._base_element.height
 285
 286    def draw_buffer(self, x: float, y: float, name: str):
 287        web_buffer = self._buffers[name]
 288        self._context.drawImage(web_buffer.get_element(), x, y)
 289
 290    ############
 291    # Controls #
 292    ############
 293
 294    def get_keyboard(self) -> typing.Optional[sketchingpy.control_struct.Keyboard]:
 295        return self._keyboard
 296
 297    def get_mouse(self) -> typing.Optional[sketchingpy.control_struct.Mouse]:
 298        return self._mouse
 299
 300    ########
 301    # Data #
 302    ########
 303
 304    def get_data_layer(self) -> typing.Optional[sketchingpy.data_struct.DataLayer]:
 305        return WebDataLayer()
 306
 307    ###########
 308    # Dialogs #
 309    ###########
 310
 311    def get_dialog_layer(self) -> typing.Optional[sketchingpy.dialog_struct.DialogLayer]:
 312        return WebDialogLayer(self)
 313
 314    ###########
 315    # Drawing #
 316    ###########
 317
 318    def clear(self, color: str):
 319        self._context.clearRect(0, 0, self._width, self._height)
 320        self._context.fillStyle = color
 321        self._context.fillRect(0, 0, self._width, self._height)
 322
 323    def draw_arc(self, x1: float, y1: float, x2: float, y2: float, a1: float, a2: float):
 324        self._load_draw_params()
 325
 326        a1_rad = self._convert_to_radians(a1) - js.Math.PI / 2
 327        a2_rad = self._convert_to_radians(a2) - js.Math.PI / 2
 328
 329        current_machine = self._get_current_state_machine()
 330        mode_native = current_machine.get_arc_mode_native()
 331        mode_str = current_machine.get_arc_mode()
 332
 333        self._draw_arc_rad(x1, y1, x2, y2, a1_rad, a2_rad, mode_native, mode_str)
 334
 335    def draw_ellipse(self, x1: float, y1: float, x2: float, y2: float):
 336        current_machine = self._get_current_state_machine()
 337        mode_native = current_machine.get_ellipse_mode_native()
 338        mode_str = current_machine.get_ellipse_mode()
 339
 340        self._draw_arc_rad(x1, y1, x2, y2, 0, 2 * js.Math.PI, mode_native, mode_str)
 341
 342    def draw_line(self, x1: float, y1: float, x2: float, y2: float):
 343        current_machine = self._get_current_state_machine()
 344        if not current_machine.get_stroke_enabled():
 345            return
 346
 347        self._load_draw_params()
 348
 349        self._context.beginPath()
 350        self._context.moveTo(x1, y1)
 351        self._context.lineTo(x2, y2)
 352        self._context.stroke()
 353
 354    def draw_rect(self, x1: float, y1: float, x2: float, y2: float):
 355        self._load_draw_params()
 356
 357        current_machine = self._get_current_state_machine()
 358        native_mode = current_machine.get_rect_mode_native()
 359        mode_str = current_machine.get_rect_mode_native()
 360
 361        region = self._get_canvas_region_rect_like(x1, y1, x2, y2, native_mode, mode_str)
 362
 363        self._context.beginPath()
 364        self._context.rect(region.get_x(), region.get_y(), region.get_width(), region.get_height())
 365
 366        if current_machine.get_fill_enabled():
 367            self._context.fill()
 368
 369        if current_machine.get_stroke_enabled():
 370            self._context.stroke()
 371
 372    def draw_shape(self, shape: sketchingpy.shape_struct.Shape):
 373        current_machine = self._get_current_state_machine()
 374
 375        self._load_draw_params()
 376
 377        self._context.beginPath()
 378        self._context.moveTo(shape.get_start_x(), shape.get_start_y())
 379
 380        for segment in shape.get_segments():
 381            strategy = segment.get_strategy()
 382            if strategy == 'straight':
 383                self._context.lineTo(segment.get_destination_x(), segment.get_destination_y())
 384            elif strategy == 'bezier':
 385                self._context.bezierCurveTo(
 386                    segment.get_control_x1(),
 387                    segment.get_control_y1(),
 388                    segment.get_control_x2(),
 389                    segment.get_control_y2(),
 390                    segment.get_destination_x(),
 391                    segment.get_destination_y()
 392                )
 393            else:
 394                raise RuntimeError('Unsupported segment type: ' + strategy)
 395
 396        if shape.get_is_closed():
 397            self._context.closePath()
 398
 399        if current_machine.get_fill_enabled():
 400            self._context.fill()
 401
 402        if current_machine.get_stroke_enabled():
 403            self._context.stroke()
 404
 405    def draw_text(self, x: float, y: float, content: str):
 406        content = str(content)
 407        current_machine = self._get_current_state_machine()
 408
 409        self._load_draw_params()
 410        self._load_font_params()
 411
 412        if current_machine.get_fill_enabled():
 413            self._context.fillText(content, x, y)
 414
 415        if current_machine.get_stroke_enabled():
 416            self._context.strokeText(content, x, y)
 417
 418    ##########
 419    # Events #
 420    ##########
 421
 422    def on_step(self, callback: sketchingpy.abstracted.StepCallback):
 423        self._callback_step = callback
 424
 425    def on_quit(self, callback: sketchingpy.abstracted.QuitCallback):
 426        self._callback_quit = callback
 427
 428    #########
 429    # Image #
 430    #########
 431
 432    def get_image(self, src: str) -> sketchingpy.abstracted.Image:
 433        return WebImage(src)
 434
 435    def draw_image(self, x: float, y: float, image: sketchingpy.abstracted.Image):
 436        if not image.get_is_loaded():
 437            return
 438
 439        self._load_draw_params()
 440
 441        current_machine = self._get_current_state_machine()
 442        native_mode = current_machine.get_image_mode_native()
 443        mode_str = current_machine.get_image_mode_native()
 444
 445        width = image.get_width()
 446        height = image.get_height()
 447
 448        region = self._get_canvas_region_rect_like(x, y, width, height, native_mode, mode_str)
 449
 450        self._context.drawImage(
 451            image.get_native(),
 452            region.get_x(),
 453            region.get_y(),
 454            region.get_width(),
 455            region.get_height()
 456        )
 457
 458    def save_image(self, path: str):
 459        if not path.endswith('.png'):
 460            raise RuntimeError('Web export only supported to PNG.')
 461
 462        link = js.document.createElement('a')
 463        link.download = path
 464        link.href = self._element.toDataURL('image/png')
 465        link.click()
 466
 467    #########
 468    # State #
 469    #########
 470
 471    def set_text_font(self, identifier: str, size: float):
 472        super().set_text_font(identifier, size)
 473
 474        is_otf = identifier.endswith('.otf')
 475        is_ttf = identifier.endswith('.ttf')
 476        is_file = is_otf or is_ttf
 477
 478        if not is_file:
 479            return
 480
 481        current_machine = self._get_current_state_machine()
 482        font = current_machine.get_text_font()
 483        font_name = sketchingpy.abstracted.get_font_name(font, '/')
 484
 485        if font_name in self._added_fonts:
 486            return
 487
 488        naked_font_name_components = font_name.split(' ')[1:]
 489        naked_font_name = ' '.join(naked_font_name_components)
 490
 491        new_font = pyscript.window.FontFace.new(naked_font_name, 'url(%s)' % identifier)
 492        new_font.load()
 493        pyscript.document.fonts.add(new_font)
 494        self._added_fonts.add(font_name)
 495
 496    def push_transform(self):
 497        self._context.save()
 498
 499    def pop_transform(self):
 500        self._context.restore()
 501
 502    ##########
 503    # System #
 504    ##########
 505
 506    def get_native(self):
 507        return self._element
 508
 509    def set_fps(self, rate: int):
 510        self._state_frame_rate = rate
 511
 512    def set_title(self, title: str):
 513        js.document.title = title
 514
 515    def quit(self):
 516        self._stopped = True
 517
 518    def show(self, ax=None):
 519        self._show_internal(ax=ax, quit_immediately=False)
 520
 521    def show_and_quit(self, ax=None):
 522        self._show_internal(ax=ax, quit_immediately=True)
 523
 524    def print(self, message: str):
 525        console_id = self._element_id + '-console'
 526        target_root = js.document.getElementById(console_id)
 527
 528        if target_root is None:
 529            print(message)
 530            return
 531
 532        new_li = pyscript.document.createElement('li')
 533        new_content = pyscript.document.createTextNode(message)
 534        new_li.appendChild(new_content)
 535
 536        target_root.appendChild(new_li)
 537
 538    #############
 539    # Transform #
 540    #############
 541
 542    def translate(self, x: float, y: float):
 543        self._context.translate(x, y)
 544
 545    def rotate(self, angle: float):
 546        angle_rad = self._convert_to_radians(angle)
 547        self._context.rotate(angle_rad)
 548
 549    def scale(self, scale: float):
 550        self._context.scale(scale, scale)
 551
 552    ###########
 553    # Support #
 554    ###########
 555
 556    def _show_internal(self, ax=None, quit_immediately=False):
 557        self._loading_element.style.display = 'none'
 558        self._element.style.display = 'inline-block'
 559        self._version = str(round(time.time()))
 560        self._element.setAttribute('version', self._version)
 561
 562        self._snapshot_time()
 563
 564        for action in self._internal_pre_show_actions:
 565            action()
 566
 567        if not quit_immediately:
 568            self._stopped = False
 569
 570            self._last_render = time.time()
 571            self._internal_loop_callback = pyodide.ffi.create_proxy(lambda: self._inner_loop())
 572
 573            self._inner_loop()
 574
 575    def _inner_loop(self):
 576        if self._element.getAttribute('version') != self._version:
 577            self._stopped = True
 578
 579        if self._stopped:
 580            if self._callback_quit is not None:
 581                self._callback_quit(self)
 582            return
 583
 584        if self._callback_step is not None:
 585            self._callback_step(self)
 586
 587        time_elapsed = (time.time() - self._last_render) * 1000
 588        time_delay = round(1000 / self._state_frame_rate - time_elapsed)
 589
 590        js.setTimeout(self._internal_loop_callback, time_delay)
 591
 592    def _create_state_machine(self):
 593        return PyscriptSketchStateMachine()
 594
 595    def _get_canvas_region_arc_ellipse(self, x1: float, y1: float, x2: float,
 596        y2: float, mode_native: int, mode_str: str) -> CanvasRegionEllipse:
 597        if mode_native == sketchingpy.const.CENTER:
 598            center_x = x1
 599            center_y = y1
 600            radius_x = x2 / 2
 601            radius_y = y2 / 2
 602        elif mode_native == sketchingpy.const.RADIUS:
 603            center_x = x1
 604            center_y = y1
 605            radius_x = x2
 606            radius_y = y2
 607        elif mode_native == sketchingpy.const.CORNER:
 608            center_x = x1 + x2 / 2
 609            center_y = y1 + y2 / 2
 610            radius_x = x2 / 2
 611            radius_y = y2 / 2
 612        elif mode_native == sketchingpy.const.CORNERS:
 613            (x1, y1, x2, y2) = sketchingpy.abstracted.reorder_coords(x1, y1, x2, y2)
 614            width = x2 - x1
 615            height = y2 - y1
 616            center_x = x1 + width / 2
 617            center_y = y1 + height / 2
 618            radius_x = width / 2
 619            radius_y = height / 2
 620        else:
 621            raise RuntimeError('Unknown mode: ' + mode_str)
 622
 623        return CanvasRegionEllipse(center_x, center_y, radius_x, radius_y)
 624
 625    def _get_canvas_region_rect_like(self, x1: float, y1: float, x2: float,
 626        y2: float, native_mode: int, mode_str: str) -> CanvasRegionRect:
 627        if native_mode == sketchingpy.const.CENTER:
 628            start_x = x1 - x2 / 2
 629            start_y = y1 - y2 / 2
 630            width = x2
 631            height = y2
 632        elif native_mode == sketchingpy.const.RADIUS:
 633            start_x = x1 - x2
 634            start_y = y1 - y2
 635            width = x2 * 2
 636            height = y2 * 2
 637        elif native_mode == sketchingpy.const.CORNER:
 638            start_x = x1
 639            start_y = y1
 640            width = 1 if x2 == 0 else x2
 641            height = 1 if y2 == 0 else y2
 642        elif native_mode == sketchingpy.const.CORNERS:
 643            (x1, y1, x2, y2) = sketchingpy.abstracted.reorder_coords(x1, y1, x2, y2)
 644            start_x = x1
 645            start_y = y1
 646            width = x2 - x1
 647            height = y2 - y1
 648        else:
 649            raise RuntimeError('Unknown mode: ' + mode_str)
 650
 651        return CanvasRegionRect(start_x, start_y, width, height)
 652
 653    def _load_draw_params(self):
 654        current_machine = self._get_current_state_machine()
 655        self._context.fillStyle = current_machine.get_fill_native()
 656        self._context.strokeStyle = current_machine.get_stroke_native()
 657        self._context.lineWidth = current_machine.get_stroke_weight_native()
 658
 659    def _load_font_params(self):
 660        current_machine = self._get_current_state_machine()
 661
 662        self._context.font = current_machine.get_text_font_native()
 663
 664        text_align = current_machine.get_text_align_native()
 665        self._context.textAlign = text_align.get_horizontal_align()
 666        self._context.textBaseline = text_align.get_vertical_align()
 667
 668    def _draw_arc_rad(self, x1: float, y1: float, x2: float, y2: float, a1: float, a2: float,
 669        mode_native: int, mode_str: str):
 670        self._load_draw_params()
 671
 672        current_machine = self._get_current_state_machine()
 673        region = self._get_canvas_region_arc_ellipse(x1, y1, x2, y2, mode_native, mode_str)
 674
 675        self._context.beginPath()
 676
 677        self._context.ellipse(
 678            region.get_x(),
 679            region.get_y(),
 680            region.get_radius_x(),
 681            region.get_radius_y(),
 682            0,
 683            a1,
 684            a2
 685        )
 686
 687        if current_machine.get_fill_enabled():
 688            self._context.fill()
 689
 690        if current_machine.get_stroke_enabled():
 691            self._context.stroke()
 692
 693
 694class PyscriptSketchStateMachine(sketchingpy.state_struct.SketchStateMachine):
 695    """Implementation of SketchStateMachine for Pyscript types."""
 696
 697    def __init__(self):
 698        """Create a new state machine for Pyscript-based sketches."""
 699        super().__init__()
 700        self._text_align_native = self._transform_text_align(super().get_text_align_native())
 701
 702    def set_text_align(self, text_align: sketchingpy.state_struct.TextAlign):
 703        super().set_text_align(text_align)
 704        self._text_align_native = self._transform_text_align(super().get_text_align_native())
 705
 706    def get_text_align_native(self):
 707        return self._text_align_native
 708
 709    def get_text_font_native(self):
 710        return sketchingpy.abstracted.get_font_name(self.get_text_font(), os.path.sep)
 711
 712    def _transform_text_align(self,
 713        text_align: sketchingpy.state_struct.TextAlign) -> sketchingpy.state_struct.TextAlign:
 714
 715        HORIZONTAL_ALIGNS = {
 716            sketchingpy.const.LEFT: 'left',
 717            sketchingpy.const.CENTER: 'center',
 718            sketchingpy.const.RIGHT: 'right'
 719        }
 720
 721        VERTICAL_ALIGNS = {
 722            sketchingpy.const.TOP: 'top',
 723            sketchingpy.const.CENTER: 'middle',
 724            sketchingpy.const.BASELINE: 'alphabetic',
 725            sketchingpy.const.BOTTOM: 'bottom'
 726        }
 727
 728        return sketchingpy.state_struct.TextAlign(
 729            HORIZONTAL_ALIGNS[text_align.get_horizontal_align()],
 730            VERTICAL_ALIGNS[text_align.get_vertical_align()]
 731        )
 732
 733
 734class WebImage(sketchingpy.abstracted.Image):
 735    """Strategy implementation for HTML images."""
 736
 737    def __init__(self, src: str):
 738        """Create a new image.
 739
 740        Args:
 741            src: Path to the image.
 742        """
 743        super().__init__(src)
 744
 745        preload_suffix = src.replace("./", "").replace("/", "").replace(".", "-").replace(" ", "-")
 746        preload_name = "preload-img-" + preload_suffix
 747        preloaded_image = js.document.getElementById(preload_name)
 748
 749        if preloaded_image:
 750            image = preloaded_image
 751        else:
 752            image = js.document.createElement("img")
 753            image.src = src
 754
 755        self._native = image
 756        self._width: typing.Optional[float] = None
 757        self._height: typing.Optional[float] = None
 758
 759    def get_width(self) -> float:
 760        if self._width is None:
 761            return self._native.width
 762        else:
 763            return self._width
 764
 765    def get_height(self) -> float:
 766        if self._height is None:
 767            return self._native.height
 768        else:
 769            return self._height
 770
 771    def resize(self, width: float, height: float):
 772        self._width = width
 773        self._height = height
 774
 775    def get_native(self):
 776        return self._native
 777
 778    def get_is_loaded(self):
 779        return self._native.width > 0
 780
 781
 782class PyscriptMouse(sketchingpy.control_struct.Mouse):
 783    """Strategy implementation for Pyscript-based mouse access."""
 784
 785    def __init__(self, element):
 786        """Create a new mouse strategy using HTML5.
 787
 788        Args:
 789            element: The element to which mouse event listeners should be added.
 790        """
 791        self._element = element
 792
 793        self._x = 0
 794        self._y = 0
 795
 796        self._buttons_pressed = set()
 797
 798        mouse_move_callback = pyodide.ffi.create_proxy(
 799            lambda event: self._report_mouse_move(event)
 800        )
 801        self._element.addEventListener(
 802            'mousemove',
 803            mouse_move_callback
 804        )
 805
 806        mouse_down_callback = pyodide.ffi.create_proxy(
 807            lambda event: self._report_mouse_down(event)
 808        )
 809        self._element.addEventListener(
 810            'mousedown',
 811            mouse_down_callback
 812        )
 813
 814        click_callback = pyodide.ffi.create_proxy(
 815            lambda event: self._report_click(event)
 816        )
 817        self._element.addEventListener(
 818            'click',
 819            click_callback
 820        )
 821
 822        context_menu_callback = pyodide.ffi.create_proxy(
 823            lambda event: self._report_context_menu(event)
 824        )
 825        self._element.addEventListener(
 826            'contextmenu',
 827            context_menu_callback
 828        )
 829
 830        self._press_callback = None
 831        self._release_callback = None
 832
 833    def get_pointer_x(self):
 834        return self._x
 835
 836    def get_pointer_y(self):
 837        return self._y
 838
 839    def get_buttons_pressed(self) -> sketchingpy.control_struct.Buttons:
 840        return map(lambda x: sketchingpy.control_struct.Button(x), self._buttons_pressed)
 841
 842    def on_button_press(self, callback: sketchingpy.control_struct.MouseCallback):
 843        self._press_callback = callback
 844
 845    def on_button_release(self, callback: sketchingpy.control_struct.MouseCallback):
 846        self._release_callback = callback
 847
 848    def _report_mouse_move(self, event):
 849        bounding_box = self._element.getBoundingClientRect()
 850        self._x = event.clientX - bounding_box.left
 851        self._y = event.clientY - bounding_box.top
 852
 853    def _report_mouse_down(self, event):
 854        if event.button == 0:
 855            self._buttons_pressed.add(sketchingpy.const.MOUSE_LEFT_BUTTON)
 856            if self._press_callback is not None:
 857                button = sketchingpy.control_struct.Button(sketchingpy.const.MOUSE_LEFT_BUTTON)
 858                self._press_callback(button)
 859        elif event.button == 2:
 860            self._buttons_pressed.add(sketchingpy.const.MOUSE_RIGHT_BUTTON)
 861            if self._press_callback is not None:
 862                button = sketchingpy.control_struct.Button(sketchingpy.const.MOUSE_RIGHT_BUTTON)
 863                self._press_callback(button)
 864
 865    def _report_click(self, event):
 866        self._buttons_pressed.remove(sketchingpy.const.MOUSE_LEFT_BUTTON)
 867
 868        if self._release_callback is not None:
 869            button = sketchingpy.control_struct.Button(sketchingpy.const.MOUSE_LEFT_BUTTON)
 870            self._release_callback(button)
 871
 872        event.preventDefault()
 873
 874    def _report_context_menu(self, event):
 875        self._buttons_pressed.remove(sketchingpy.const.MOUSE_RIGHT_BUTTON)
 876
 877        if self._release_callback is not None:
 878            button = sketchingpy.control_struct.Button(sketchingpy.const.MOUSE_RIGHT_BUTTON)
 879            self._release_callback(button)
 880
 881        event.preventDefault()
 882
 883
 884class PyscriptKeyboard(sketchingpy.control_struct.Keyboard):
 885    """Strategy implementation for Pyscript-based keyboard access."""
 886
 887    def __init__(self, element):
 888        """Create a new mouse strategy using HTML5 and Pyscript.
 889
 890        Args:
 891            element: The element to which keyboard event listeners should be added.
 892        """
 893        super().__init__()
 894        self._element = element
 895        self._pressed = set()
 896        self._press_callback = None
 897        self._release_callback = None
 898
 899        keydown_callback = pyodide.ffi.create_proxy(
 900            lambda event: self._report_key_down(event)
 901        )
 902        self._element.addEventListener(
 903            'keydown',
 904            keydown_callback
 905        )
 906
 907        keyup_callback = pyodide.ffi.create_proxy(
 908            lambda event: self._report_key_up(event)
 909        )
 910        self._element.addEventListener(
 911            'keyup',
 912            keyup_callback
 913        )
 914
 915    def get_keys_pressed(self) -> sketchingpy.control_struct.Buttons:
 916        return map(lambda x: sketchingpy.control_struct.Button(x), self._pressed)
 917
 918    def on_key_press(self, callback: sketchingpy.control_struct.KeyboardCallback):
 919        self._press_callback = callback
 920
 921    def on_key_release(self, callback: sketchingpy.control_struct.KeyboardCallback):
 922        self._release_callback = callback
 923
 924    def _report_key_down(self, event):
 925        key = self._map_key(event.key)
 926
 927        if key is None:
 928            return
 929
 930        self._pressed.add(key)
 931
 932        if self._press_callback is not None:
 933            button = sketchingpy.control_struct.Button(key)
 934            self._press_callback(button)
 935
 936        event.preventDefault()
 937
 938    def _report_key_up(self, event):
 939        key = self._map_key(event.key)
 940
 941        if key is None:
 942            return
 943
 944        self._pressed.remove(key)
 945
 946        if self._release_callback is not None:
 947            button = sketchingpy.control_struct.Button(key)
 948            self._release_callback(button)
 949
 950        event.preventDefault()
 951
 952    def _map_key(self, target: str) -> typing.Optional[str]:
 953        if target in KEY_MAP:
 954            return KEY_MAP[target.lower()]  # Required for browser compatibility
 955        else:
 956            return target.lower()
 957
 958
 959class WebDataLayer(sketchingpy.data_struct.DataLayer):
 960    """Data layer which interfaces with network and browser."""
 961
 962    def get_csv(self, path: str) -> sketchingpy.data_struct.Records:
 963        if os.path.exists(path):
 964            with open(path) as f:
 965                reader = csv.DictReader(f)
 966                return list(reader)
 967        else:
 968            string_io = pyodide.http.open_url(path)
 969            reader = csv.DictReader(string_io)
 970            return list(reader)
 971
 972    def write_csv(self, records: sketchingpy.data_struct.Records,
 973        columns: sketchingpy.data_struct.Columns, path: str):
 974        def build_record(target: typing.Dict) -> typing.Dict:
 975            return dict(map(lambda key: (key, target[key]), columns))
 976
 977        records_serialized = map(build_record, records)
 978
 979        target = io.StringIO()
 980
 981        writer = csv.DictWriter(target, fieldnames=columns)  # type: ignore
 982        writer.writeheader()
 983        writer.writerows(records_serialized)
 984
 985        self._download_text(target.getvalue(), path, 'text/csv')
 986
 987    def get_json(self, path: str):
 988        if os.path.exists(path):
 989            with open(path) as f:
 990                return json.load(f)
 991        else:
 992            string_io = pyodide.http.open_url(path)
 993            return json.loads(string_io.read())
 994
 995    def write_json(self, target, path: str):
 996        self._download_text(json.dumps(target), path, 'application/json')
 997
 998    def get_text(self, path: str):
 999        string_io = pyodide.http.open_url(path)
1000        return string_io.read()
1001
1002    def write_text(self, target, path: str):
1003        self._download_text(target, path, 'text/plain')
1004
1005    def _download_text(self, text: str, filename: str, mime: str):
1006        text_encoded = urllib.parse.quote(text)
1007
1008        link = js.document.createElement('a')
1009        link.download = filename
1010        link.href = 'data:%s;charset=utf-8,%s' % (mime, text_encoded)
1011
1012        link.click()
1013
1014
1015class WebDialogLayer(sketchingpy.dialog_struct.DialogLayer):
1016    """Dialog / simple UI layer for web apps."""
1017
1018    def __init__(self, sketch: Sketch2DWeb):
1019        """"Initialize tkinter but hide the root window."""
1020        self._sketch = sketch
1021
1022    def show_alert(self, message: str, callback: typing.Optional[typing.Callable[[], None]] = None):
1023        pyscript.window.alert(message)
1024        if callback is not None:
1025            callback()
1026
1027    def show_prompt(self, message: str,
1028        callback: typing.Optional[typing.Callable[[str], None]] = None):
1029        response = pyscript.window.prompt(message)
1030        if callback is not None and response is not None:
1031            callback(response)
1032
1033    def get_file_save_location(self,
1034        callback: typing.Optional[typing.Callable[[str], None]] = None):
1035        self.show_prompt('Filename to save:', callback)
1036
1037    def get_file_load_location(self,
1038        callback: typing.Optional[typing.Callable[[str], None]] = None):
1039        self.show_prompt('Filename to load:', callback)