Async canvas component / IE11 compatibility (#29)

.circleci/config.yml

@@ -1,7 +1,7 @@
 version: 2
 
 jobs:
-    'python-3.6': 
+    'python-3.6':
         docker:
             - image: circleci/python:3.6-stretch-node-browsers
               environment:
@@ -30,7 +30,7 @@ jobs:
                       sudo pip install virtualenv --upgrade
                       . venv/bin/activate
                       pip install -r requirements/package.txt
-                      npm install --ignore-scripts
+                      npm ci
 
             - save_cache:
                   key: deps1-{{ .Branch }}-{{ checksum "requirements/package.txt" }}-{{ checksum "package.json" }}-{{ checksum "package-lock.json" }}-{{ checksum ".circleci/config.yml" }}-{{ checksum "circlejob.txt" }}
@@ -52,13 +52,13 @@ jobs:
                   command: |
                       . venv/bin/activate
                       pytest dash_canvas
-            
+
             - run:
                   name: Run usage tests
                   command: |
                       . venv/bin/activate
                       pip install -r tests/requirements.txt
-                      pytest tests --webdriver Chrome
+                      pytest tests
 
 
 

CHANGELOG.md

@@ -0,0 +1,7 @@
+# Change Log for dash-canvas
+All notable changes to this project will be documented in this file.
+This project adheres to [Semantic Versioning](http://semver.org/).
+
+## [0.1.0] - 2019-11-05
+### Added
+- [#29](https://github.com/plotly/dash-canvas/pull/29) Async canvas component

MANIFEST.in

@@ -1,5 +1,6 @@
 include dash_canvas/dash_canvas.min.js
 include dash_canvas/dash_canvas.dev.js
+include dash_canvas/async~*.js
 include dash_canvas/metadata.json
 include dash_canvas/package.json
 include README.md

babel.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/react'
+  ],
+  plugins: [
+    '@babel/plugin-syntax-dynamic-import'
+  ]
+};

dash_canvas/DashCanvas.py

@@ -10,36 +10,33 @@ class DashCanvas(Component):
 
 Keyword arguments:
 - id (string; optional): The ID used to identify this component in Dash callbacks
-- image_content (string; optional): Image data string, formatted as png or jpg data string. Can be
+- image_content (string; default ''): Image data string, formatted as png or jpg data string. Can be
 generated by utils.io_utils.array_to_data_string.
-- zoom (number; optional): Zoom factor
-- width (number; optional): Width of the canvas
-- height (number; optional): Height of the canvas
-- scale (number; optional): Scaling ratio between canvas width and image width
-- tool (string; optional): Selection of drawing tool, among ["pencil", "pan", "circle",
+- zoom (number; default 1): Zoom factor
+- width (number; default 500): Width of the canvas
+- height (number; default 500): Height of the canvas
+- scale (number; default 1): Scaling ratio between canvas width and image width
+- tool (string; default "pencil"): Selection of drawing tool, among ["pencil", "pan", "circle",
 "rectangle", "select", "line"].
-- lineWidth (number; optional): Width of drawing line (in pencil mode)
-- lineColor (string; optional): Color of drawing line (in pencil mode). Can be a text string,
+- lineWidth (number; default 10): Width of drawing line (in pencil mode)
+- lineColor (string; default 'red'): Color of drawing line (in pencil mode). Can be a text string,
 like 'yellow', 'red', or a color triplet like 'rgb(255, 0, 0)'.
 Alpha is possible with 'rgba(255, 0, 0, 0.5)'.
-- goButtonTitle (string; optional): Title of button
-- filename (string; optional): Name of image file to load (URL string)
-- trigger (number; optional): Counter of how many times the save button was pressed
+- goButtonTitle (string; default 'Save'): Title of button
+- filename (string; default ''): Name of image file to load (URL string)
+- trigger (number; default 0): Counter of how many times the save button was pressed
 (to be used mostly as input)
-- json_data (string; optional): Sketch content as JSON string, containing background image and
+- json_data (string; default ''): Sketch content as JSON string, containing background image and
 annotations. Use utils.parse_json.parse_jsonstring to parse
 this string.
-- hide_buttons (list; optional): Names of buttons to hide. Names are "zoom", "pan", "line", "pencil",
-"rectangle", "undo", "select".
-
-Available events: """
+- hide_buttons (list of strings; optional): Names of buttons to hide. Names are "zoom", "pan", "line", "pencil",
+"rectangle", "undo", "select"."""
     @_explicitize_args
     def __init__(self, id=Component.UNDEFINED, image_content=Component.UNDEFINED, zoom=Component.UNDEFINED, width=Component.UNDEFINED, height=Component.UNDEFINED, scale=Component.UNDEFINED, tool=Component.UNDEFINED, lineWidth=Component.UNDEFINED, lineColor=Component.UNDEFINED, goButtonTitle=Component.UNDEFINED, filename=Component.UNDEFINED, trigger=Component.UNDEFINED, json_data=Component.UNDEFINED, hide_buttons=Component.UNDEFINED, **kwargs):
         self._prop_names = ['id', 'image_content', 'zoom', 'width', 'height', 'scale', 'tool', 'lineWidth', 'lineColor', 'goButtonTitle', 'filename', 'trigger', 'json_data', 'hide_buttons']
         self._type = 'DashCanvas'
         self._namespace = 'dash_canvas'
         self._valid_wildcard_attributes =            []
-        self.available_events = []
         self.available_properties = ['id', 'image_content', 'zoom', 'width', 'height', 'scale', 'tool', 'lineWidth', 'lineColor', 'goButtonTitle', 'filename', 'trigger', 'json_data', 'hide_buttons']
         self.available_wildcard_properties =            []
 
@@ -53,26 +50,3 @@ def __init__(self, id=Component.UNDEFINED, image_content=Component.UNDEFINED, zo
                 raise TypeError(
                     'Required argument `' + k + '` was not specified.')
         super(DashCanvas, self).__init__(**args)
-
-    def __repr__(self):
-        if(any(getattr(self, c, None) is not None
-               for c in self._prop_names
-               if c is not self._prop_names[0])
-           or any(getattr(self, c, None) is not None
-                  for c in self.__dict__.keys()
-                  if any(c.startswith(wc_attr)
-                  for wc_attr in self._valid_wildcard_attributes))):
-            props_string = ', '.join([c+'='+repr(getattr(self, c, None))
-                                      for c in self._prop_names
-                                      if getattr(self, c, None) is not None])
-            wilds_string = ', '.join([c+'='+repr(getattr(self, c, None))
-                                      for c in self.__dict__.keys()
-                                      if any([c.startswith(wc_attr)
-                                      for wc_attr in
-                                      self._valid_wildcard_attributes])])
-            return ('DashCanvas(' + props_string +
-                   (', ' + wilds_string if wilds_string != '' else '') + ')')
-        else:
-            return (
-                'DashCanvas(' +
-                repr(getattr(self, self._prop_names[0], None)) + ')')

dash_canvas/__init__.py

@@ -28,14 +28,30 @@
 
 _this_module = _sys.modules[__name__]
 
+async_resources = [
+    'canvas'
+]
+
+_js_dist = []
 
-_js_dist = [
+_js_dist.extend([{
+        'relative_package_path': 'async~{}.js'.format(async_resource),
+        'dev_package_path': 'async~{}.dev.js'.format(async_resource),
+        'external_url': (
+            'https://unpkg.com/dash-canvas@{}'
+            '/dash_canvas/async~{}.js'
+        ).format(__version__, async_resource),
+        'namespace': 'dash_canvas',
+        'async': True
+    } for async_resource in async_resources])
+
+_js_dist.extend([
     {
         'relative_package_path': 'dash_canvas.min.js',
         'dev_package_path': 'dash_canvas.dev.js',
         'namespace': package_name
     }
-]
+])
 
 _css_dist = []