add cell_ids to widget, fix selection model (#88)

.binder/environment.yml

@@ -1,6 +1,6 @@
 # a heavy demo environment for interactive testing
 
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -58,7 +58,7 @@ dependencies:
   - sphinx-jsonschema
   - sphinxext-rediraffe
   - pip:
-      - jupyterlite ==0.1.0a18
+      - jupyterlite ==0.1.0a19
 
   ### ipydrawio-docs-deps ###
 
@@ -89,6 +89,7 @@ dependencies:
   - flake8
   - isort >=5
   - pyflakes
+  - pyyaml
   - robotframework-lint
   # unit testing
   - pytest
@@ -96,6 +97,7 @@ dependencies:
   - pytest-cov
   - pytest-html
   - pytest-tornasync
+  - pytest-xdist
   # acceptance testing
   - firefox =91
   - geckodriver >=0.28.0

.binder/postBuild

@@ -1,6 +1,6 @@
 #!/usr/bin/env python
 
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

.github/environment-conda-build-win.yml

@@ -1,6 +1,6 @@
 # a sufficient environment for building conda packages
 
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

.github/environment-conda-build.yml

@@ -1,6 +1,6 @@
 # a sufficient environment for building conda packages
 
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

.github/environment.yml

@@ -1,6 +1,6 @@
 # a sufficient environment for acceptance testing
 
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -53,6 +53,7 @@ dependencies:
   - pytest-cov
   - pytest-html
   - pytest-tornasync
+  - pytest-xdist
   # acceptance testing
   - firefox =91
   - geckodriver >=0.28.0

.github/workflows/ci.yml

@@ -1,6 +1,6 @@
 # main continuous integration workflow
 
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -22,6 +22,10 @@ on:
     branches:
       - master
 
+concurrency:
+  group: ${{ github.ref }}
+  cancel-in-progress: true
+
 env:
   PYTHONUNBUFFERED: '1'
   PYTHONIOENCODING: 'utf-8'

.gitignore

@@ -15,7 +15,7 @@ _output
 *.tgz
 *.tsbuildinfo
 **/*DRAWIO_DEBUG*
-*doit.db
+*doit.db*
 atest/output/
 build/
 dist/

.readthedocs.yml

@@ -1,4 +1,4 @@
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

CHANGELOG.md

@@ -4,6 +4,9 @@
 
 ### ipydrawio 1.2.0
 
+- fixes selection in widget diagrams with more than 10 shapes [#85]
+- adds `cell_ids` to widget diagrams [#88]
+- `jupyter ipydrawio clean` can now cleans `.ipynb` metadata and outputs [#88]
 - minimum supported python is now to 3.7
 
 #### @deathbeds/ipydrawio 1.2.0
@@ -22,6 +25,9 @@
 
 #### @deathbeds/ipydrawio-pdf 1.2.0
 
+[#85]: https://github.com/deathbeds/ipydrawio/issues/85
+[#88]: https://github.com/deathbeds/ipydrawio/issues/88
+
 ---
 
 ## Releases
@@ -60,8 +66,7 @@
 
 ### ipydrawio-export 1.1.2
 
-- a `yarn.lock` is shipped to reduce provisioning time and increase
-  reproducibility
+- a `yarn.lock` is shipped to reduce provisioning time and increase reproducibility
 - update to newer PDF exporter for better performance
 
 #### @deathbeds/ipydrawio-pdf 1.1.2
@@ -72,8 +77,8 @@
 
 ### ipydrawio 1.1.1
 
-- adds `jupyter ipydrawio clean` for removing `host`, `agent`, `modified`
-  attributes and pretty printing, restoring `lxml` as a dependency [#44]
+- adds `jupyter ipydrawio clean` for removing `host`, `agent`, `modified` attributes and
+  pretty printing, restoring `lxml` as a dependency [#44]
 
 #### @deathbeds/ipydrawio 1.1.1
 
@@ -103,20 +108,20 @@
 ### ipydrawio 1.1.0
 
 - new documentation site at https://ipydrawio.rtfd.io [#40]
-- no longer depends on `lxml`, future XML-based features will hopefully support
-  the standard library `xml` module [#40]
+- no longer depends on `lxml`, future XML-based features will hopefully support the
+  standard library `xml` module [#40]
 
 #### @deathbeds/ipydrawio 1.1.0
 
 - the `sketch` theme is now available as the `ui` [#40]
-- the _Custom Diagram..._ Launcher card offers all the themes, templates, and
-  editable formats [#40]
+- the _Custom Diagram..._ Launcher card offers all the themes, templates, and editable
+  formats [#40]
   - templates can be added by extensions [#41]
 - additional configuration defaults added to `urlParams` [#40]
-- the <kbd>Esc</kbd> button now shifts focus back to the main application
-  allowing for use of more keyboard shortcuts. [#40]
-  - the previous inescapable behavior can be restored in _Adanced Settings_ by
-    setting `"disableEscapeFocus": true`
+- the <kbd>Esc</kbd> button now shifts focus back to the main application allowing for
+  use of more keyboard shortcuts. [#40]
+  - the previous inescapable behavior can be restored in _Adanced Settings_ by setting
+    `"disableEscapeFocus": true`
 
 #### @deathbeds/ipydrawio-notebook 1.1.0
 
@@ -175,15 +180,14 @@
 #### @deathbeds/ipydrawio 1.0.0
 
 - [#22] adds more _Main Menu_ options and _Command Palette_ Commands
-- [#22] new file names created by _Export Diagram as..._ commands use
-  best-effort, two-digit numbers (if needed) incrementer instead of timestamp
-- [#20] add `allow-downloads` sandbox exception for the drawio `iframe`,
-  enabling some more built-in features
+- [#22] new file names created by _Export Diagram as..._ commands use best-effort,
+  two-digit numbers (if needed) incrementer instead of timestamp
+- [#20] add `allow-downloads` sandbox exception for the drawio `iframe`, enabling some
+  more built-in features
 
 #### @deathbeds/ipydrawio-notebook 1.0.0
 
-- [#21] fixes overload of default _Notebook_ activity for _Edit with_ for
-  `.ipynb` files
+- [#21] fixes overload of default _Notebook_ activity for _Edit with_ for `.ipynb` files
 
 #### @deathbeds/ipydrawio-webpack 14.5.9
 
@@ -228,11 +232,10 @@
 
 For pre-releases of the previously-named package, see the [old CHANGELOG][]
 
-[old changelog]:
-  https://github.com/deathbeds/ipydrawio/tree/3a577ac/CHANGELOG.md
+[old changelog]: https://github.com/deathbeds/ipydrawio/tree/3a577ac/CHANGELOG.md
 
 ```
-Copyright 2021 ipydrawio contributors
+Copyright 2022 ipydrawio contributors
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

CONTRIBUTING.md

@@ -32,6 +32,18 @@ source activate ipydrawio
 doit
 ```
 
+## Start JupyterLab
+
+```bash
+doit serve:lab
+```
+
+### Start JupyterLite
+
+```bash
+doit serve:demo
+```
+
 ## Prepare a Release
 
 ```bash
@@ -92,7 +104,7 @@ doit dist
   - [ ] update release procedures
 
 ```
-Copyright 2021 ipydrawio contributors
+Copyright 2022 ipydrawio contributors
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

README.md

@@ -7,12 +7,11 @@
 > [Drawio][] diagrams for [JupyterLab][]. Forked with ❤️ from
 > [QuantStack/jupyterlab-drawio][].
 
-**[Install](#installation)** · **[History]** · **[Roadmap]**
-· **[Contribute][contributing]** · **[Open Source](#open-source)**
+**[Install](#installation)** · **[History]** · **[Roadmap]** ·
+**[Contribute][contributing]** · **[Open Source](#open-source)**
 
-> > This is BETA software. Native drawio files created with these tools _should_
-> > work with any other [drawio][] client, but any UI/API is liable to change at
-> > any time.
+> > This is BETA software. Native drawio files created with these tools _should_ work
+> > with any other [drawio][] client, but any UI/API is liable to change at any time.
 
 ## Installation
 
@@ -38,14 +37,13 @@ pip install ipydrawio[all]
   - Jupyter [Widgets][]
   - Basic collaborative editing
     - requires the `--collaborative` flag, added in JupyterLab 3.1+
-    - token sharing, _a la_ [jupyterlab-link-share], or a custom connector (no
-      known yet)
+    - token sharing, _a la_ [jupyterlab-link-share], or a custom connector (no known
+      yet)
     - no presence indicators for other editors
 - `ipydrawio-export`
   - Export print-quality PDF from diagramsⓁⓡ
     - optionally include editable Drawio XML as a PDF attachment
-    - > _BEWARE: some **heavy**, maybe fragile dependencies, `mamba`
-      > recommended_
+    - > _BEWARE: some **heavy**, maybe fragile dependencies, `mamba` recommended_
       ```bash
       mamba install -c conda-forge ipydrawio-export  # recommended, or...
       conda install -c conda-forge ipydrawio-export  # or...
@@ -67,22 +65,19 @@ pip install ipydrawio[all]
 > Please see the [docs] for full information
 
 - Try on [![binder-badge][]][binder]
-  - or follow the [Installation instructions](#installation) and **Start
-    JupyterLab**
+  - or follow the [Installation instructions](#installation) and **Start JupyterLab**
 - Open a diagram, by doing one of:
   - Creating a
     <img src="https://raw.githubusercontent.com/deathbeds/ipydrawio/master/packages/ipydrawio/style/img/drawio.svg" width="24"/>
     Diagram\_ from the [Launcher][]
-  - Uploading a diagram created on [diagrams.net](https://diagrams.net) with the
-    _[File Manager][]_ and double clicking it
-  - Building diagrams by interactively computing in `IPython` with
-    `ipydrawio.Diagram`
+  - Uploading a diagram created on [diagrams.net](https://diagrams.net) with the _[File
+    Manager][]_ and double clicking it
+  - Building diagrams by interactively computing in `IPython` with `ipydrawio.Diagram`
   - Use the `application/x-drawio` MIME renderer
 - Use the _[Command Palette][]_ to _Export Diagram_ to various formats
-  - > **NOTE**: some of the built-in UI features of drawio don't work properly
-    > inside an IFrame in JupyterLab, and are difficult to robustly disable:
-    > please see _Diagram_ options available in the _Command Palette_ and
-    > various _Main Menu_ menus.
+  - > **NOTE**: some of the built-in UI features of drawio don't work properly inside an
+    > IFrame in JupyterLab, and are difficult to robustly disable: please see _Diagram_
+    > options available in the _Command Palette_ and various _Main Menu_ menus.
 
 ## Configuring
 
@@ -112,28 +107,25 @@ The different themes have some advantages and disadvantages:
 
 Use _Advanced Settings_ to modify drawio embedding parameters
 
-> See the [schema] for full details of the (known) supported options as well as
-> the [upstream docs] for all parameters, though IPyDrawio might not support
-> them... yet.
+> See the [schema] for full details of the (known) supported options as well as the
+> [upstream docs] for all parameters, though IPyDrawio might not support them... yet.
 
 [schema]: https://ipydrawio.readthedocs.io/en/stable/api/schema.html
 [upstream docs]: https://www.diagrams.net/doc/faq/supported-url-parameters
 
 ### PDF: Lab and Server extensions
 
-`ipydrawio-export` can generate print-quality PDF. This approach relies on a
-headless browser, powered by [@jgraph/draw-image-export2], `puppeteer`, and
-`nodejs`.
+`ipydrawio-export` can generate print-quality PDF. This approach relies on a headless
+browser, powered by [@jgraph/draw-image-export2], `puppeteer`, and `nodejs`.
 
 - **native dependencies** as required to appease `puppeteer`
   - if running in `docker`, this can be a bit trial-and-error
   - for more, see the [binder][apt-txt] and CI.
 - `nodejs>10,<14` from `conda` or your system package manager
-  - **NOTE**: this relies on being able to install `puppeteer` (and other
-    **arbitrary dependencies** with `jlpm` for now **when first used**
+  - **NOTE**: this relies on being able to install `puppeteer` (and other **arbitrary
+    dependencies** with `jlpm` for now **when first used**
     - _we'll figure out a better approach soon enough_
-- `pip install ipydrawio-export` or
-  `conda install -c conda-forge ipydrawio-export`
+- `pip install ipydrawio-export` or `conda install -c conda-forge ipydrawio-export`
 
 > For example to install all the dependencies:
 >
@@ -141,8 +133,8 @@ headless browser, powered by [@jgraph/draw-image-export2], `puppeteer`, and
 > conda install -yc conda-forge ipydrawio-export
 > ```
 
-Once installed, you can use the in-browser tools _Export Diagram as PDF_ as well
-as the command line:
+Once installed, you can use the in-browser tools _Export Diagram as PDF_ as well as the
+command line:
 
 ```bash
 jupyter ipydrawio-export <name of document>
@@ -152,19 +144,15 @@ jupyter ipydrawio-export <name of document>
 
 ### License
 
-All files herein, unless otherwise noted, are free software licensed under
-[Apache 2.0].
+All files herein, unless otherwise noted, are free software licensed under [Apache 2.0].
 
 ### Copyright
 
-The copyright holders of this extension are the [contributors][] to this
-repository.
+The copyright holders of this extension are the [contributors][] to this repository.
 
-Portions of the JupyterLab components are derived from
-[QuantStack/jupyterlab-drawio][].
+Portions of the JupyterLab components are derived from [QuantStack/jupyterlab-drawio][].
 
-The copyright holders of drawio and drawio-export is
-[jgraph](http://www.jgraph.com).
+The copyright holders of drawio and drawio-export is [jgraph](http://www.jgraph.com).
 
 The original source code vendored in this package from:
 
@@ -172,7 +160,7 @@ The original source code vendored in this package from:
 - [@jgraph/draw-image-export2][]
 
 ```
-Copyright 2021 ipydrawio contributors
+Copyright 2022 ipydrawio contributors
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -214,8 +202,7 @@ limitations under the License.
 [cov]: https://codecov.io/gh/deathbeds/ipydrawio
 [docs-badge]: https://readthedocs.org/projects/ipydrawio/badge/?version=latest
 [docs]: https://ipydrawio.rtfd.io
-[contributing]:
-  https://github.com/deathbeds/ipydrawio/blob/master/CONTRIBUTING.md
+[contributing]: https://github.com/deathbeds/ipydrawio/blob/master/CONTRIBUTING.md
 [documents]:
   https://github.com/deathbeds/ipydrawio/blob/master/docs/Diagram%20Document.ipynb
 [rich display]:
@@ -236,5 +223,4 @@ limitations under the License.
 [launcher]:
   https://jupyterlab.readthedocs.io/en/stable/user/files.html?highlight=Launcher#creating-files-and-activities
 [file manager]: https://jupyterlab.readthedocs.io/en/stable/user/files.html
-[jupyterlab-link-share]:
-  https://github.com/jupyterlab-contrib/jupyterlab-link-share
+[jupyterlab-link-share]: https://github.com/jupyterlab-contrib/jupyterlab-link-share

ROADMAP.md

@@ -24,7 +24,7 @@
 - [ ] richer notebook integration with "live" updating
 
 ```
-Copyright 2021 ipydrawio contributors
+Copyright 2022 ipydrawio contributors
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

atest/_CodeMirror.robot

@@ -1,4 +1,4 @@
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

atest/_Keywords.robot

@@ -1,4 +1,4 @@
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

atest/_Notebook.robot

@@ -1,4 +1,4 @@
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -20,7 +20,9 @@ Resource          ./_CodeMirror.robot
 Add and Run JupyterLab Code Cell
     [Arguments]    ${code}=print("hello world")
     [Documentation]    Add a ``code`` cell to the currently active notebook and run it.
-    Click Element    css:${JLAB CSS NB TOOLBAR} ${JLAB CSS ICON ADD}
+    ${add btn} =    Set Variable    css:${JLAB CSS NB TOOLBAR} ${JLAB CSS ICON ADD}
+    Wait Until Page Contains Element    ${add btn}    timeout=10s
+    Click Element    ${add btn}
     Sleep    0.1s
     ${cell} =    Get WebElement    css:${JLAB CSS ACTIVE INPUT}
     Click Element    ${cell}

atest/_Variables.robot

@@ -1,4 +1,4 @@
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

atest/__init__.robot

@@ -1,4 +1,4 @@
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

atest/lab/Custom.robot

@@ -1,4 +1,4 @@
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

atest/lab/Formats.robot

@@ -1,4 +1,4 @@
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

atest/lab/Media.robot

@@ -1,4 +1,4 @@
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

atest/lab/Settings.robot

@@ -1,4 +1,4 @@
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

atest/lab/Smoke.robot

@@ -1,4 +1,4 @@
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

atest/lab/Widget.robot

@@ -1,4 +1,4 @@
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -30,27 +30,70 @@ Diagram Widget
     Diagram Should Contain    TEST123
     Capture Page Screenshot    02-updated.png
     Change Paper Size    a3
-    Should Be True In Cell    d.page_format["width"] == 1169
+    Should Be True In Cell    diagram.page_format["width"] == 1169
     Capture Page Screenshot    03-resized.png
     Change Paper Size    letter
-    Should Be True In Cell    d.page_format["width"] == 850
+    Should Be True In Cell    diagram.page_format["width"] == 850
     Capture Page Screenshot    04-resized-again.png
 
+Many Shapes
+    [Documentation]    does the viewport change unpredictably with many shapes?
+    [Tags]    gh:85
+    Create Diagram Widget    eleven    ${TRUE}
+    Edit the Widget
+    Duplicate Shape    10
+    Select All From List    css:select[multiple]
+    Capture Page Screenshot    01-eleven.png
+
 *** Keywords ***
 Create Diagram Widget
-    [Arguments]    ${label}
+    [Arguments]    ${label}    ${add multiple}=${FALSE}
     Set Screenshot Directory    ${OUTPUT DIR}${/}screenshots${/}widget${/}${label}
     Launch Untitled Notebook
-    Add and Run JupyterLab Code Cell    from ipydrawio import Diagram
-    Add and Run JupyterLab Code Cell    d = Diagram(layout\=dict(min_height\="60vh")); d
+    Add and Run JupyterLab Code Cell    import ipywidgets as W, traitlets as T; from ipydrawio import Diagram
+    Add and Run JupyterLab Code Cell    diagram = Diagram(layout\=dict(min_height\="60vh"));
+    IF    ${add multiple}
+        Create Linked SelectMultiple
+    END
+    Add and Run JupyterLab Code Cell    diagram
     Wait Until Page Contains Element    ${CSS DIO READY} iframe
 
+Create Linked SelectMultiple
+    Add and Run JupyterLab Code Cell    opts = W.SelectMultiple()
+    Add and Run JupyterLab Code Cell    T.dlink((diagram, "cell_ids"), (opts, "options"));
+    Add and Run JupyterLab Code Cell    T.link((opts, "value"), (diagram, "selected_cells")); opts
+
 Should Be True In Cell
     [Arguments]    ${code}
     Add and Run JupyterLab Code Cell    assert (${code})
     Wait Until JupyterLab Kernel Is Idle
     Page Should Not Contain Element    css:[data-mime-type\="${MIME STDERR}"]
 
+Duplicate Shape
+    [Arguments]    ${duplicates}
+    Select Frame    ${CSS DIO IFRAME}
+    Click Element At Coordinates    ${CSS DIO BG}    100    100
+    FOR    ${i}    IN RANGE    ${duplicates}
+        Sleep    0.1s
+        ${els} =    Get WebElements    css:rect[width\="120"]
+        Click Element    ${els[-1]}
+        Press Keys    css:body    ${ACCEL}+D
+    END
+    [Teardown]    Unselect Frame
+
+Unselect Shape
+    Select Frame    ${CSS DIO IFRAME}
+    Click Element At Coordinates    ${CSS DIO BG}    200    200
+    [Teardown]    Unselect Frame
+
+Add A Shape at Offset
+    [Arguments]    ${x}    ${y}
+    Double Click Element    ${CSS DIO BG}
+    ${a shape} =    Set Variable    ${CSS DIO SHAPE POPUP SHAPE}:nth-child(2)
+    Wait Until Element Is Visible    ${a shape}
+    Click Element    ${a shape}
+    Drag And Drop By Offset    css:rect[width\="120"]    ${x}    ${y}
+
 Edit the Widget
     Select Frame    ${CSS DIO IFRAME}
     Double Click Element    ${CSS DIO BG}
@@ -69,7 +112,7 @@ Diagram Should Contain
 Update The Diagram Widget Value
     [Arguments]    ${path}
     ${xml} =    Get File    ${path}
-    Add and Run JupyterLab Code Cell    d.source.value = '''${xml.strip()}'''
+    Add and Run JupyterLab Code Cell    diagram.source.value = '''${xml.strip()}'''
     Press Keys    None    ESC
     Press Keys    None    UP
 

atest/lab/__init__.robot

@@ -1,4 +1,4 @@
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

atest/lite/Documents.robot

@@ -1,4 +1,4 @@
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -21,18 +21,47 @@ Force Tags        component:document
 Suite Setup       Set Screenshot Directory    ${OUTPUT DIR}${/}lite${/}documents
 
 *** Test Cases ***
-Test Examples
-    [Documentation]    Do all of the examples work?
-    ${examples} =    List Files In Directory    ${DEMO}    *.dio*
-    FOR    ${file}    IN    @{EXAMPLES}
-        Try to Close All Tabs
-        Run Keyword If    ${file.__contains__('.dio')}    Example Should Load    ${file}
-    END
+Poster Dio Svg
+    [Documentation]    Does the Poster.dio.svg example document work?
+    Example Document Should Load    Poster.dio.svg
+
+Roadmap Dio Svg
+    [Documentation]    Does the ROADMAP.dio.svg example document work?
+    Example Document Should Load    ROADMAP.dio.svg
+
+Affinity Dio Svg
+    [Documentation]    Does the affinity.dio.svg example document work?
+    Example Document Should Load    affinity.dio.svg
+
+Comp Dio Svg
+    [Documentation]    Does the comp.dio.svg example document work?
+    Example Document Should Load    comp.dio.svg
+
+Deployment Dio Svg
+    [Documentation]    Does the deployment.dio.svg example document work?
+    Example Document Should Load    deployment.dio.svg
+
+Mermaid Dio Svg
+    [Documentation]    Does the mermaid.dio.svg example document work?
+    Example Document Should Load    mermaid.dio.svg
+
+Mindmap Dio Svg
+    [Documentation]    Does the mindmap.dio.svg example document work?
+    Example Document Should Load    mindmap.dio.svg
+
+Wireframe Dio Svg
+    [Documentation]    Does the wireframe.dio.svg example document work?
+    Example Document Should Load    wireframe.dio.svg
+
+What-Can-You-Draw Dio Svg
+    [Documentation]    Does the what-can-you-draw.dio.svg example document work?
+    Example Document Should Load    what-can-you-draw.dio.svg
 
 *** Keywords ***
-Example Should Load
+Example Document Should Load
     [Arguments]    ${file}
-    [Documentation]    Does one example work?
+    [Documentation]    Does one example document work?
+    Try to Close All Tabs
     Ensure File Browser is Open
     Double Click Element    css:[title*\="${file}"]
     Unselect Frame

atest/lite/Documents.robot.j2

@@ -0,0 +1,41 @@
+# Copyright 2022 ipydrawio contributors
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#                 http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+*** Settings ***
+Documentation     Test some diagrams in lite
+Resource          ../_Keywords.robot
+Resource          ./_Keywords.robot
+Library           OperatingSystem
+Force Tags        component:document
+Suite Setup       Set Screenshot Directory    ${OUTPUT DIR}${/}lite${/}documents
+
+*** Test Cases ***
+{% for p in P.ALL_DEMO_CONTENTS %}
+{% if ".dio" in p.name %}
+{{ p.name.replace(".", " ").title() }}
+   [Documentation]   Does the {{ p.name }} example document work?
+   Example Document Should Load  {{ p.name }}
+{% endif %}
+{% endfor %}
+
+*** Keywords ***
+Example Document Should Load
+    [Arguments]    ${file}
+    [Documentation]    Does one example document work?
+    Try to Close All Tabs
+    Ensure File Browser is Open
+    Double Click Element    css:[title*\="${file}"]
+    Unselect Frame
+    Wait Until Element is Visible    ${CSS DIO IFRAME}    timeout=20s
+    Capture Page Screenshot    00-${file}-loaded.png

atest/lite/Notebook.robot

@@ -0,0 +1,57 @@
+# Copyright 2022 ipydrawio contributors
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#                 http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+*** Settings ***
+Documentation     Test some notebooks in lite
+Resource          ../_Keywords.robot
+Resource          ./_Keywords.robot
+Library           OperatingSystem
+Force Tags        component:notebook
+Suite Setup       Set Screenshot Directory    ${OUTPUT DIR}${/}lite${/}notebooks
+
+*** Variables ***
+${PYOLITE BUSY}    Pyolite | Busy
+
+*** Test Cases ***
+Diagram Document
+    [Documentation]    Does the Diagram Document example notebook work?
+    Notebook Should Run Without Error    Diagram Document.ipynb
+
+Diagram Rich Display
+    [Documentation]    Does the Diagram Rich Display example notebook work?
+    Notebook Should Run Without Error    Diagram Rich Display.ipynb
+
+Diagram Widget
+    [Documentation]    Does the Diagram Widget example notebook work?
+    Notebook Should Run Without Error    Diagram Widget.ipynb
+
+Roadmap
+    [Documentation]    Does the ROADMAP example notebook work?
+    Notebook Should Run Without Error    ROADMAP.ipynb
+
+*** Keywords ***
+Notebook Should Run Without Error
+    [Arguments]    ${file}
+    [Documentation]    Does one example notebook work?
+    Try to Close All Tabs
+    ${stem} =    Set Variable    ${file.lower().replace(" ", "-").split(".")[0]}
+    Ensure File Browser is Open
+    Double Click Element    css:[title*\="${file}"]
+    Lab Command    Show Log Console
+    Lab Command    Run All Cells
+    Capture Page Screenshot    ${stem}-00-loaded.png
+    Wait Until Page Does Not Contain    ${PYOLITE BUSY}    timeout=120s
+    Page Should Not Contain    Widget Model Not Found
+    Page Should Not Contain    Traceback
+    Capture Page Screenshot    ${stem}-01-run.png

atest/lite/Notebook.robot.j2

@@ -0,0 +1,49 @@
+# Copyright 2022 ipydrawio contributors
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#                 http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+*** Settings ***
+Documentation     Test some notebooks in lite
+Resource          ../_Keywords.robot
+Resource          ./_Keywords.robot
+Library           OperatingSystem
+Force Tags        component:notebook
+Suite Setup       Set Screenshot Directory    ${OUTPUT DIR}${/}lite${/}notebooks
+
+*** Variables ***
+${PYOLITE BUSY}    Pyolite | Busy
+
+*** Test Cases ***
+{% for p in P.ALL_DEMO_CONTENTS %}
+{% if ".ipynb" in p.name %}
+{{ p.name.replace(".ipynb", " ").title() }}
+   [Documentation]   Does the {{ p.name.replace(".ipynb", "") }} example notebook work?
+   Notebook Should Run Without Error   {{ p.name }}
+{% endif %}
+{% endfor %}
+
+*** Keywords ***
+Notebook Should Run Without Error
+    [Arguments]    ${file}
+    [Documentation]    Does one example notebook work?
+    Try to Close All Tabs
+    ${stem} =    Set Variable    ${file.lower().replace(" ", "-").split(".")[0]}
+    Ensure File Browser is Open
+    Double Click Element    css:[title*\="${file}"]
+    Lab Command    Show Log Console
+    Lab Command    Run All Cells
+    Capture Page Screenshot    ${stem}-00-loaded.png
+    Wait Until Page Does Not Contain    ${PYOLITE BUSY}    timeout=120s
+    Page Should Not Contain    Widget Model Not Found
+    Page Should Not Contain    Traceback
+    Capture Page Screenshot    ${stem}-01-run.png

atest/lite/Smoke.robot

@@ -1,4 +1,4 @@
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

atest/lite/_Keywords.robot

@@ -1,4 +1,4 @@
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -17,18 +17,19 @@ Documentation     A work-in-progress set of keywords for JupyterLite
 Library           OperatingSystem
 Library           Process
 Library           ../ports.py
+Variables         ../demo.py
 
 *** Variable ***
 ${NEXT LITE LOG}    ${0}
 
 *** Keywords ***
 Start JupyterLite Process
-    [Arguments]    ${task}    ${cwd}    @{args}
+    [Arguments]    ${cwd}    ${task}    @{args}
     [Documentation]    Start a `jupyter lite` process
-    ${p} =    Start Process    jupyter    lite    ${task}    @{args}
-    ...    cwd=${cwd}    stdout=${OUTPUT DIR}${/}lite-${NEXT LITE LOG}.log    stderr=STDOUT
+    ${proc} =    Start Process    jupyter    lite    ${task}    @{args}    cwd=${cwd}
+    ...    stdout=${OUTPUT DIR}${/}lite-${NEXT LITE LOG}-${task}.log    stderr=STDOUT
     Set Global Variable    ${NEXT LITE LOG}    ${NEXT LITE LOG + 1}
-    [Return]    ${p}
+    [Return]    ${proc}
 
 Start JupyterLite Server
     [Documentation]    Start _the_ `jupyter lite` server
@@ -38,14 +39,18 @@ Start JupyterLite Server
     ${port} =    Get Unused Port
     ${url} =    Set Variable    http://localhost:${port}${prefix}lab/index.html
     Set Global Variable    ${LITE URL}    ${url}
-    ${p} =    Start JupyterLite Process    serve    ${cwd}
-    ...    @{args}    --port    ${port}    --base-url    ${prefix}
-    Set Global Variable    ${LITE SERVER}    ${p}
+    @{final args} =    Set Variable    @{args}    --port    ${port}    --base-url    ${prefix}    --debug
+    ${status} =    Start JupyterLite Process    ${cwd}    status    @{final args}
+    Wait For Process    ${status}
+    ${proc} =    Start JupyterLite Process    ${cwd}    doit    @{final args}    --    -s    serve
+    Set Global Variable    ${LITE SERVER}    ${proc}
     Close All Browsers
     ${service args} =    Create List    --log    warn
     Create WebDriver    Firefox
     ...    service_log_path=${OUTPUT DIR}${/}geckodriver-lite.log
     ...    service_args=${service args}
+    Wait For URL Status    ${url}    ${200}
+    [Return]    ${proc}
 
 Open JupyterLite
     Set Environment Variable    MOZ_HEADLESS    1

atest/lite/__init__.robot

@@ -1,4 +1,4 @@
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

atest/pdf.py

@@ -1,6 +1,6 @@
 """do out-of-band things with the export server"""
 
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

atest/ports.py

@@ -1,6 +1,6 @@
 """get a random port"""
 
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -15,9 +15,13 @@
 # limitations under the License.
 
 import socket
+import time
+import urllib.request
+
+from robot.api import logger
 
 
-def get_unused_port():
+def get_unused_port() -> int:
     """Get an unused port by trying to listen to any random port.
 
     Probably could introduce race conditions if inside a tight loop.
@@ -28,3 +32,27 @@ def get_unused_port():
     port = sock.getsockname()[1]
     sock.close()
     return port
+
+
+def wait_for_url_status(
+    url: str, status_code: int, interval_sec: float = 0.1, attempts: int = 100
+) -> bool:
+    """Attempt to fetch from the URL until, or raise an"""
+    response = None
+
+    for i in range(attempts):
+        try:
+            response = urllib.request.urlopen(url)
+            if response.status == status_code:
+                break
+            logger.debug(response.status)
+        except Exception:
+            logger.debug(Exception)
+        time.sleep(interval_sec)
+
+    if not response or response.status != status_code:
+        raise RuntimeError(
+            f"{url} did return {status_code} within {interval_sec * attempts}s"
+        )
+
+    return True

atest/retro/Edit.robot

@@ -1,4 +1,4 @@
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

atest/retro/Smoke.robot

@@ -1,4 +1,4 @@
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

atest/retro/Tree.robot

@@ -1,4 +1,4 @@
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

atest/retro/_Keywords.robot

@@ -1,4 +1,4 @@
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

atest/retro/__init__.robot

@@ -1,4 +1,4 @@
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

demo/jupyter_lite_config.json

@@ -13,6 +13,7 @@
     "ignore_sys_prefix": true,
     "lite_dir": ".",
     "output_archive": "../build/demo/ipydrawio-lite-1.2.0.tgz",
-    "output_dir": "../build/demo"
+    "output_dir": "../build/demo",
+    "piplite_urls": ["../py_packages/ipydrawio/dist/ipydrawio-1.2.0-py3-none-any.whl"]
   }
 }

docs/Diagram Document.ipynb

@@ -60,7 +60,7 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
    "name": "python3"
   },
@@ -74,7 +74,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.9.4"
+   "version": "3.10.2"
   }
  },
  "nbformat": 4,

docs/Diagram Rich Display.ipynb

@@ -95,7 +95,7 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
    "name": "python3"
   },
@@ -109,7 +109,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.9.2"
+   "version": "3.10.2"
   }
  },
  "nbformat": 4,

docs/Diagram Widget.ipynb

@@ -10,6 +10,19 @@
     "The same _renderer_ that powers the [Diagram Document](./Diagram%20Document.ipynb) can be used as a computable _Jupyter Widget_, which offers even more power than the [Diagram Rich Display](./Diagram%20Rich%20Display.ipynb)."
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "b925a258-e3ab-4127-8537-f2efc9b0bd59",
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "try: await __import__(\"piplite\").install('ipydrawio'); \n",
+    "except: pass"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -56,7 +69,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "diagram.source.value = '''<mxfile host=\"127.0.0.1\" modified=\"2021-01-27T15:56:33.612Z\" agent=\"5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.96 Safari/537.36\" etag=\"u04aDhBnb7c9tLWsiHn9\" version=\"13.6.10\">\n",
+    "diagram.source.value = '''<mxfile version=\"13.6.10\">\n",
     "  <diagram id=\"x\" name=\"Page-1\">\n",
     "    <mxGraphModel dx=\"1164\" dy=\"293\" grid=\"1\" gridSize=\"10\" guides=\"1\" tooltips=\"1\" connect=\"1\" arrows=\"1\" fold=\"1\" page=\"1\" pageScale=\"1\" pageWidth=\"850\" pageHeight=\"1100\" math=\"0\" shadow=\"0\">\n",
     "      <root>\n",
@@ -153,33 +166,14 @@
    "outputs": [],
    "source": [
     "selected_cells = SelectMultiple(description=\"selected\")\n",
-    "enable_selected = Checkbox(True, description=\"enable select\")\n",
     "\n",
-    "def update_selected(*_):\n",
-    "    if enable_selected.value:\n",
-    "        diagram.selected_cells = [*selected_cells.value]\n",
+    "dlink((diagram, \"cell_ids\"), (selected_cells, \"options\"))\n",
+    "link((diagram, \"selected_cells\"), (selected_cells, \"value\"))\n",
     "\n",
-    "def update_selected_options(*_):\n",
-    "    try:\n",
-    "        with selected_cells.hold_trait_notifications():\n",
-    "            selected_cells.options = [\n",
-    "                cell.attrib[\"id\"] \n",
-    "                for cell in etree.fromstring(diagram.source.value).xpath(\"//mxCell\") \n",
-    "                if \"id\" in cell.attrib\n",
-    "            ]\n",
-    "            selected_cells.value = diagram.selected_cells\n",
-    "    except:\n",
-    "        pass\n",
-    "\n",
-    "selected_cells.observe(update_selected, \"value\")\n",
-    "diagram.source.observe(update_selected_options, \"value\")\n",
-    "diagram.observe(update_selected_options, \"selected_cells\")\n",
-    "update_selected_options()\n",
-    "\n",
-    "controls.children = [VBox([zoom, scroll_x, scroll_y, current_page]), VBox([enable_selected, selected_cells]), value]\n",
+    "controls.children = [VBox([zoom, scroll_x, scroll_y, current_page]), VBox([selected_cells]), value]\n",
     "controls._titles = {\"0\": \"ui\", \"1\": \"selection\", \"2\": \"value\"}\n",
     "\n",
-    "HBox([enable_selected, selected_cells])"
+    "HBox([selected_cells])"
    ]
   },
   {
@@ -216,7 +210,7 @@
     "[diagram.observe(update_sliders, \"page_format\")]\n",
     "\n",
     "\n",
-    "controls.children = [VBox([zoom, scroll_x, scroll_y, current_page]), VBox([enable_selected, selected_cells]), VBox([*page_format.values()]), value]\n",
+    "controls.children = [VBox([zoom, scroll_x, scroll_y, current_page]), VBox([selected_cells]), VBox([*page_format.values()]), value]\n",
     "controls._titles = {\"0\": \"ui\", \"1\": \"selection\", \"2\": \"page\", \"3\": \"value\"}"
    ]
   },
@@ -244,14 +238,14 @@
     "jslink((diagram, \"grid_size\"), (grid_size, \"value\"))\n",
     "jslink((diagram, \"grid_color\"), (grid_color, \"value\"))\n",
     "\n",
-    "controls.children = [VBox([zoom, scroll_x, scroll_y, current_page]), VBox([enable_selected, selected_cells]), VBox([*page_format.values()]), VBox([ grid_enabled, grid_size, grid_color]), value]\n",
+    "controls.children = [VBox([zoom, scroll_x, scroll_y, current_page]), VBox([selected_cells]), VBox([*page_format.values()]), VBox([ grid_enabled, grid_size, grid_color]), value]\n",
     "controls._titles = {\"0\": \"ui\", \"1\": \"selection\", \"2\": \"page\", \"3\":\"grid\", \"4\": \"value\"}"
    ]
   }
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
    "name": "python3"
   },
@@ -265,7 +259,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.8.6"
+   "version": "3.10.2"
   }
  },
  "nbformat": 4,

docs/ROADMAP.ipynb

@@ -132,7 +132,7 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
    "name": "python3"
   },
@@ -146,7 +146,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.9.4"
+   "version": "3.10.2"
   },
   "toc-autonumbering": true,
   "toc-showcode": true,

docs/_static/theme.css

@@ -1,5 +1,5 @@
 /**
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.

docs/about/changelog.md

@@ -3,7 +3,7 @@
 ```
 
 <!--
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

docs/about/contributing.md

@@ -3,7 +3,7 @@
 ```
 
 <!--
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

docs/about/index.md

@@ -6,7 +6,7 @@ changelog
 ```
 
 <!--
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

docs/api/index.md

@@ -7,7 +7,7 @@ ts/index
 ```
 
 <!--
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

docs/conf.py

@@ -1,5 +1,5 @@
 """ReadTheDocs-compatible sphinx configuration"""
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

docs/diagrams/index.md

@@ -1,11 +1,11 @@
 # Making Diagrams
 
 IPyDrawio lets you build and interact with diagram [documents] compatible with
-[diagrams.net](https://diagrams.net), or hosted drawio integrations in
-Confluence and other tools.
+[diagrams.net](https://diagrams.net), or hosted drawio integrations in Confluence and
+other tools.
 
-The same renderer powers different kinds of Jupyter outputs, including Jupyter
-[rich displays] and [widgets].
+The same renderer powers different kinds of Jupyter outputs, including Jupyter [rich
+displays] and [widgets].
 
 [documents]: ../Diagram%20Document.ipynb
 [rich displays]: ../Diagram%20Rich%20Display.ipynb
@@ -18,7 +18,7 @@ The same renderer powers different kinds of Jupyter outputs, including Jupyter
 ```
 
 <!--
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

docs/environment.yml

@@ -1,6 +1,6 @@
 # ReadTheDocs-ready environment, assuming CONDA_USE_MAMBA feature flag
 
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -32,7 +32,7 @@ dependencies:
   - sphinx-jsonschema
   - sphinxext-rediraffe
   - pip:
-      - jupyterlite ==0.1.0a18
+      - jupyterlite ==0.1.0a19
 
   ### ipydrawio-docs-deps ###
 
@@ -62,6 +62,7 @@ dependencies:
   - flake8
   - isort >=5
   - pyflakes
+  - pyyaml
   - robotframework-lint
   # unit testing
   - pytest
@@ -69,6 +70,7 @@ dependencies:
   - pytest-cov
   - pytest-html
   - pytest-tornasync
+  - pytest-xdist
   # acceptance testing
   - firefox =91
   - geckodriver >=0.28.0

docs/index.md

@@ -1,7 +1,6 @@
 # IPyDrawio
 
-> Interactive diagram documents and [widgets] in [JupyterLab], powered by
-> [drawio].
+> Interactive diagram documents and [widgets] in [JupyterLab], powered by [drawio].
 
 [drawio]: https://github.com/jgraph/drawio
 [jupyterlab]: https://github.com/jupyterlab/jupyterlab
@@ -26,9 +25,8 @@
 </details>
 ```
 
-Click the _Try IPyDrawio Now_ button to launch a new browser tab running
-IPyDrawio. It contains all of the example _Diagrams_ from this documentation
-site.
+Click the _Try IPyDrawio Now_ button to launch a new browser tab running IPyDrawio. It
+contains all of the example _Diagrams_ from this documentation site.
 
 [demo]: ./demo/index
 
@@ -36,8 +34,7 @@ site.
 
 ## Get Started
 
-Install `ipydrawio` (and optionally `ipydrawio-export`) with `pip`, `mamba`, or
-`conda`:
+Install `ipydrawio` (and optionally `ipydrawio-export`) with `pip`, `mamba`, or `conda`:
 
 ```bash
 pip install ipydrawio[all]
@@ -59,8 +56,7 @@ Start JupyterLab and [start making diagrams](./diagrams/index.md)!
 
 ## More Screenshots and Examples
 
-> these are editable SVG files made with IPyDrawio, and can be found in the
-> [demo].
+> these are editable SVG files made with IPyDrawio, and can be found in the [demo].
 
 ### What can you draw with IPyDrawio
 
@@ -82,7 +78,7 @@ about/contributing
 ```
 
 <!--
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

docs/tutorials/index.md

@@ -6,7 +6,7 @@ designing-jupyter-extensions/index
 ```
 
 <!--
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

dodo.py

@@ -15,7 +15,7 @@ maybe before you push
     doit -n8 lint
 """
 
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -347,7 +347,7 @@ def task_lint():
 
     dio_tasks = []
 
-    for dio_file in P.ALL_DIO:
+    for dio_file in P.ALL_DIO + P.EXAMPLE_IPYNB + P.DOCS_IPYNB:
         name = f"dio:clean:{dio_file.relative_to(P.ROOT)}"
         dio_tasks += [f"lint:{name}"]
         yield dict(
@@ -446,7 +446,10 @@ def task_build():
         file_dep=[P.README],
         targets=[P.IPD / "README.md"],
         actions=[
-            lambda: [(P.IPD / "README.md").write_text(P.README.read_text()), None][-1]
+            lambda: [
+                (P.IPD / "README.md").write_text(P.README.read_text(), **P.ENC),
+                None,
+            ][-1]
         ],
     )
 
@@ -554,7 +557,7 @@ def task_build():
 
         output = "\n".join(lines)
         print(output)
-        P.SHA256SUMS.write_text(output)
+        P.SHA256SUMS.write_text(output, **P.ENC)
 
     yield dict(
         name="hash",
@@ -598,8 +601,8 @@ def task_conda_test():
         )
 
 
-def task_lab():
-    """run JupyterLab "normally" (not watching sources)"""
+def task_serve():
+    """run processes "normally" (not watching sources)"""
     if P.TESTING_IN_CI:
         return
 
@@ -615,12 +618,20 @@ def task_lab():
 
         proc.wait()
 
-    return dict(
+    yield dict(
+        name="lab",
         uptodate=[lambda: False],
         file_dep=[*P.OK_SERVEREXT.values()],
         actions=[PythonInteractiveAction(lab)],
     )
 
+    yield dict(
+        name="demo",
+        uptodate=[lambda: False],
+        file_dep=[P.DEMO_ARCHIVE],
+        actions=[(P._lite, [["doit"], ["--", "-s", "serve"]])],
+    )
+
 
 def _make_lab(watch=False):
     def _lab():
@@ -739,17 +750,16 @@ def task_demo():
         ],
     )
 
-    for path in P.ALL_DEMO_CONTENTS:
-        name = f"stage:{path.name}"
-        dest = P.DEMO_FILES / path.name.replace(" ", "_")
+    for src, dest in P.ALL_DEMO_CONTENTS.items():
+        name = f"stage:{src.name}"
         demo_dest += [dest]
         demo_tasks += [f"demo:{name}"]
-        final_dest += [P.DEMO_BUILD / f"files/{path.name}"]
+        final_dest += [P.DEMO_BUILD / f"files/{src.name}"]
         yield dict(
             name=name,
-            file_dep=[path],
+            file_dep=[src],
             targets=[dest],
-            actions=[(P._copy_one, [path, dest])],
+            actions=[(P._copy_one, [src, dest])],
         )
 
     assert demo_dest
@@ -761,7 +771,7 @@ def task_demo():
         task_dep=demo_tasks,
         file_dep=[*demo_dest, *P.DEMO_WHEELS.glob(f"*{P.NOARCH_WHL}")],
         targets=[P.DEMO_ARCHIVE, P.DEMO_HASHES, *final_dest, P.DEMO_CONTENTS_API],
-        actions=[P._build_lite],
+        actions=[(P._lite, [["build", "archive"], []])],
     )
 
 
@@ -864,7 +874,9 @@ def task_check():
                     "pytest-check-links",
                     "--check-anchors",
                     "--check-links-ignore",
-                    "^https?://",
+                    "http://",
+                    "--check-links-ignore",
+                    "https://",
                     *[p for p in file_dep if p.name not in ["schema.html"]],
                 ]
             ],
@@ -927,6 +939,10 @@ def task_test():
             f"--html={html}",
             "--self-contained-html",
         ]
+
+        if pkg == P.IPD.name:
+            pytest_args += ["-n", "auto"]
+
         yield P._ok(
             dict(
                 name=f"pytest:{pkg}",
@@ -962,6 +978,20 @@ def task_test():
             *P.OK_SERVEREXT.values(),
         ]
 
+        demo_files = [P.DEMO_FILES / p.name for p in P.ALL_DEMO_CONTENTS]
+
+        for tmpl in P.ATEST_TEMPLATES:
+            dest = tmpl.parent / tmpl.name.replace(".j2", "")
+            yield dict(
+                name=f"template:{tmpl.relative_to(P.ATEST)}",
+                file_dep=[tmpl, *demo_files],
+                targets=[dest],
+                actions=[
+                    (P.template_one, [tmpl, dest]),
+                    [*P.PYM, "robot.tidy", "--inplace", dest],
+                ],
+            )
+
     yield P._ok(
         dict(
             name="robot",

package.json

@@ -22,7 +22,8 @@
   "prettier": {
     "singleQuote": true,
     "proseWrap": "always",
-    "jsonRecursiveSort": true
+    "jsonRecursiveSort": true,
+    "printWidth": 88
   },
   "scripts": {
     "bootstrap": "jlpm --prefer-offline && lerna bootstrap",

packages/.eslintrc.js

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.

packages/_meta/src/index.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.

packages/ipydrawio-jupyter-templates/README.md

@@ -11,8 +11,7 @@ conda install -c conda-forge ipydrawio  # or...
 pip install ipydrawio
 ```
 
-> See the [project repo](https://github.com/deathbeds/ipydrawio) for more
-> information.
+> See the [project repo](https://github.com/deathbeds/ipydrawio) for more information.
 
 ## Open Source
 
@@ -21,7 +20,7 @@ This work is licensed under the [Apache-2.0] License.
 [apache-2.0]: https://github.com/deathbeds/ipydrawio/blob/master/LICENSE.txt
 
 ```
-Copyright 2021 ipydrawio contributors
+Copyright 2022 ipydrawio contributors
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

packages/ipydrawio-jupyter-templates/src/index.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.

packages/ipydrawio-jupyter-templates/src/plugin.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.

packages/ipydrawio-jupyter-templates/src/tokens.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.

packages/ipydrawio-jupyter-templates/style/index.css

@@ -1,5 +1,5 @@
 /**
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.

packages/ipydrawio-notebook/README.md

@@ -12,15 +12,14 @@ conda install -c conda-forge ipydrawio  # or...
 pip install ipydrawio
 ```
 
-See the [project repo](https://github.com/deathbeds/ipydrawio) for more
-information.
+See the [project repo](https://github.com/deathbeds/ipydrawio) for more information.
 
 ## Open Source
 
 This work is licensed under the [Apache-2.0] License.
 
 ```
-Copyright 2021 ipydrawio contributors
+Copyright 2022 ipydrawio contributors
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

packages/ipydrawio-notebook/src/index.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.

packages/ipydrawio-notebook/src/io.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
@@ -57,15 +57,11 @@ export const IPYNB_PLAIN: IFormat<any> = {
     return raw;
   },
   fromXML: (model: NotebookModel, xml) => {
-    const meta = model.metadata.get(
-      IPYDRAWIO_METADATA
-    ) as ReadonlyPartialJSONObject;
+    const meta = model.metadata.get(IPYDRAWIO_METADATA) as ReadonlyPartialJSONObject;
     model.metadata.set(IPYDRAWIO_METADATA, { ...(meta || {}), xml });
   },
   toXML: (model: NotebookModel) => {
-    const meta = model.metadata.get(
-      IPYDRAWIO_METADATA
-    ) as ReadonlyPartialJSONObject;
+    const meta = model.metadata.get(IPYDRAWIO_METADATA) as ReadonlyPartialJSONObject;
     return meta?.xml ? `${meta.xml}` : '';
   },
   exporter: async (widget, key, settings) => {

packages/ipydrawio-notebook/src/plugin.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
@@ -42,9 +42,7 @@ function activate(
 ) {
   if (PageConfig.getOption('retroPage')) {
     console.warn('Unavailable in', app.name, ':', ALL_FORMATS[0].factoryName);
-    console.info(
-      'Please open a full JupyterLab from View -> Open with JupyterLab'
-    );
+    console.info('Please open a full JupyterLab from View -> Open with JupyterLab');
     return;
   }
   for (const format of ALL_FORMATS) {

packages/ipydrawio-notebook/src/tokens.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.

packages/ipydrawio-notebook/src/toolbar.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.

packages/ipydrawio-pdf/README.md

@@ -12,15 +12,14 @@ conda install -c conda-forge ipydrawio-export  # or...
 pip install ipydrawio-export
 ```
 
-See the [project repo](https://github.com/deathbeds/ipydrawio) for more
-information.
+See the [project repo](https://github.com/deathbeds/ipydrawio) for more information.
 
 ## Open Source
 
 This work is licensed under the [Apache-2.0] License.
 
 ```
-Copyright 2021 ipydrawio contributors
+Copyright 2022 ipydrawio contributors
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

packages/ipydrawio-pdf/src/index.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.

packages/ipydrawio-pdf/src/io.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
@@ -14,11 +14,7 @@
   limitations under the License.
 */
 
-import {
-  DRAWIO_ICON_CLASS_RE,
-  DRAWIO_ICON_SVG,
-  IFormat,
-} from '@deathbeds/ipydrawio';
+import { DRAWIO_ICON_CLASS_RE, DRAWIO_ICON_SVG, IFormat } from '@deathbeds/ipydrawio';
 
 import { stripDataURI } from '@deathbeds/ipydrawio';
 

packages/ipydrawio-pdf/src/manager.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.

packages/ipydrawio-pdf/src/plugin.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.

packages/ipydrawio-pdf/src/status.tsx

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.

packages/ipydrawio-pdf/src/tokens.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.

packages/ipydrawio-webpack/README.md

@@ -1,7 +1,7 @@
 # `@deathbeds/ipydrawio-weback`
 
-> JupyterLab 3 Webpack-friendly [drawio](https://www.diagrams.net) assets for
-> embedding in lab extensions
+> JupyterLab 3 Webpack-friendly [drawio](https://www.diagrams.net) assets for embedding
+> in lab extensions
 
 If you'd just like to _use_ this extension, please run:
 
@@ -11,18 +11,17 @@ conda install -c conda-forge ipydrawio  # or...
 pip install ipydrawio
 ```
 
-See the [project repo](https://github.com/deathbeds/ipydrawio) for more
-information.
+See the [project repo](https://github.com/deathbeds/ipydrawio) for more information.
 
 ## Open Source
 
 This work is licensed under the [Apache-2.0] License.
 
-The vendored [@jgraph/drawio](https://github.com/jgraph/drawio) is also licensed
-under the [Apache-2.0] license.
+The vendored [@jgraph/drawio](https://github.com/jgraph/drawio) is also licensed under
+the [Apache-2.0] license.
 
 ```
-Copyright 2021 ipydrawio contributors
+Copyright 2022 ipydrawio contributors
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

packages/ipydrawio-webpack/lib/plugin.js

@@ -1,4 +1,4 @@
-// Copyright 2021 ipydrawio contributors
+// Copyright 2022 ipydrawio contributors
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.

packages/ipydrawio-webpack/scripts/patch.py

@@ -1,6 +1,6 @@
 """ patch drawio sources for embedding in JupyterLab"""
 
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

packages/ipydrawio-webpack/scripts/static.py

@@ -1,6 +1,6 @@
 """update the vendored drawio"""
 
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.

packages/ipydrawio-webpack/webpack.config.js

@@ -1,4 +1,4 @@
-// Copyright 2021 ipydrawio contributors
+// Copyright 2022 ipydrawio contributors
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.

packages/ipydrawio/README.md

@@ -11,8 +11,7 @@ conda install -c conda-forge ipydrawio  # or...
 pip install ipydrawio
 ```
 
-> See the [project repo](https://github.com/deathbeds/ipydrawio) for more
-> information.
+> See the [project repo](https://github.com/deathbeds/ipydrawio) for more information.
 
 ## Open Source
 
@@ -21,7 +20,7 @@ This work is licensed under the [Apache-2.0] License.
 [apache-2.0]: https://github.com/deathbeds/ipydrawio/blob/master/LICENSE.txt
 
 ```
-Copyright 2021 ipydrawio contributors
+Copyright 2022 ipydrawio contributors
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

packages/ipydrawio/scripts/schema.py

@@ -1,4 +1,4 @@
-# Copyright 2021 ipydrawio contributors
+# Copyright 2022 ipydrawio contributors
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -24,7 +24,7 @@ IN_FILE = PKG / "schema/plugin.json"
 OUT_FILE = PKG / "src/_schema.d.ts"
 
 HEADER = """/*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.

packages/ipydrawio/src/_schema.d.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.

packages/ipydrawio/src/document.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
   Copyright 2020 jupyterlab-drawio contributors
   Copyright 2018 Wolf Vollprecht
 
@@ -126,9 +126,7 @@ export class DiagramFactory extends ABCWidgetFactory<
     this.manager = options.manager;
   }
 
-  protected createNewWidget(
-    context: DocumentRegistry.Context
-  ): DiagramDocument {
+  protected createNewWidget(context: DocumentRegistry.Context): DiagramDocument {
     const doc: DiagramDocument = new DiagramDocument({
       context,
       content: new Diagram({
@@ -145,8 +143,7 @@ export class DiagramFactory extends ABCWidgetFactory<
             } as any;
           },
           drawioConfig: () => {
-            return this.getSettings()
-              ?.drawioConfig as ReadonlyPartialJSONObject;
+            return this.getSettings()?.drawioConfig as ReadonlyPartialJSONObject;
           },
           saveNeedsExport: () => {
             const isTransformed = doc.format?.isTransformed;

packages/ipydrawio/src/editor.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
   Copyright 2020 jupyterlab-drawio contributors
   Copyright 2018 Wolf Vollprecht
 
@@ -312,8 +312,7 @@ export class Diagram extends IFrame {
       }
       query.append(p, (params as any)[p]);
     }
-    const url =
-      this.adapter.drawioUrl() + '?' + query.toString() + `&p=${plugins}`;
+    const url = this.adapter.drawioUrl() + '?' + query.toString() + `&p=${plugins}`;
 
     if (force || this.url !== url) {
       DEBUG && console.warn('configuring iframe', params);

packages/ipydrawio/src/index.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
   Copyright 2020 jupyterlab-drawio contributors
   Copyright 2018 Wolf Vollprecht
 

packages/ipydrawio/src/io.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
   Copyright 2020 jupyterlab-drawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
@@ -165,12 +165,7 @@ export const PNG_EDITABLE: IFormat = {
 
 export const ALL_BINARY_FORMATS = [PNG_PLAIN, PNG_EDITABLE];
 
-export const ALL_TEXT_FORMATS = [
-  SVG_EDITABLE,
-  SVG_PLAIN,
-  XML_NATIVE,
-  XML_LEGACY,
-];
+export const ALL_TEXT_FORMATS = [SVG_EDITABLE, SVG_PLAIN, XML_NATIVE, XML_LEGACY];
 
 /** these are last-in-wins, don't claim existing ones*/
 export const ALL_MIME_FORMATS = [XML_NATIVE];

packages/ipydrawio/src/manager.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
   Copyright 2020 jupyterlab-drawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
@@ -43,11 +43,7 @@ import { IFileBrowserFactory } from '@jupyterlab/filebrowser';
 import { DRAWIO_URL } from '@deathbeds/ipydrawio-webpack';
 import { CreateCustom } from './createCustom';
 
-const DEFAULT_EXPORTER = async (
-  drawio: Diagram,
-  key: string,
-  settings: any = null
-) => {
+const DEFAULT_EXPORTER = async (drawio: Diagram, key: string, settings: any = null) => {
   return await drawio.exportAs(key);
 };
 
@@ -173,11 +169,7 @@ export class DiagramManager implements IDiagramManager {
       if (fmt.wantsModel != null && fmt.wantsModel(contentsModel)) {
         return fmt;
       }
-      if (
-        path &&
-        path.endsWith(fmt.ext) &&
-        fmt.ext.length > longestExt.length
-      ) {
+      if (path && path.endsWith(fmt.ext) && fmt.ext.length > longestExt.length) {
         candidateFmt = fmt;
         longestExt = fmt.ext;
       }
@@ -255,10 +247,7 @@ export class DiagramManager implements IDiagramManager {
     if (args.name && args.name.trim()) {
       model = await this._app.serviceManager.contents.rename(
         model.path,
-        PathExt.join(
-          PathExt.dirname(model.path),
-          `${args.name.trim()}${format.ext}`
-        )
+        PathExt.join(PathExt.dirname(model.path), `${args.name.trim()}${format.ext}`)
       );
     }
 
@@ -316,9 +305,7 @@ export class DiagramManager implements IDiagramManager {
 
   protected async initTemplates(): Promise<void> {
     const templates: ITemplate[] = [];
-    const response = await fetch(
-      URLExt.join(DRAWIO_URL, '../templates/index.xml')
-    );
+    const response = await fetch(URLExt.join(DRAWIO_URL, '../templates/index.xml'));
     const xmlStr = await response.text();
     const parser = new DOMParser();
     const xml = parser.parseFromString(xmlStr, 'application/xml');
@@ -434,10 +421,7 @@ export class DiagramManager implements IDiagramManager {
 
       const newPath = await this._getAvaialablePath(cwd, stem, ext);
 
-      model = await this._app.serviceManager.contents.rename(
-        model.path,
-        newPath
-      );
+      model = await this._app.serviceManager.contents.rename(model.path, newPath);
 
       if (rawContent != null) {
         await this._app.serviceManager.contents.save(model.path, {
@@ -505,10 +489,7 @@ export class DiagramManager implements IDiagramManager {
     const { contents } = this._app.serviceManager;
     for (const salt in [...Array(retries).keys()]) {
       const padded = salt.length == 1 ? `0${salt}` : `${salt}`;
-      newPath = PathExt.join(
-        cwd,
-        salt ? `${stem}-${padded}${ext}` : `${stem}ext`
-      );
+      newPath = PathExt.join(cwd, salt ? `${stem}-${padded}${ext}` : `${stem}ext`);
       try {
         const model = await contents.get(newPath, opts);
         console.warn('Path not available', model);

packages/ipydrawio/src/mime.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
   Copyright 2020 jupyterlab-drawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
@@ -25,27 +25,25 @@ import { ReadonlyPartialJSONObject } from '@lumino/coreutils';
 
 export const MIME_CLASS = 'jp-DiagramMedia';
 
-export const extensions: IRenderMime.IExtension[] = ALL_MIME_FORMATS.map(
-  (fmt) => {
-    const { name } = fmt;
-    return {
-      id: `${NS}:rendermime-${name}`,
-      name,
-      rendererFactory: {
-        safe: true,
-        mimeTypes: [fmt.mimetype],
-        createRenderer: (options) => {
-          DEBUG && console.error('creating renderer');
-          return new RenderedDiagram({
-            ...options,
-            format: fmt,
-          });
-        },
+export const extensions: IRenderMime.IExtension[] = ALL_MIME_FORMATS.map((fmt) => {
+  const { name } = fmt;
+  return {
+    id: `${NS}:rendermime-${name}`,
+    name,
+    rendererFactory: {
+      safe: true,
+      mimeTypes: [fmt.mimetype],
+      createRenderer: (options) => {
+        DEBUG && console.error('creating renderer');
+        return new RenderedDiagram({
+          ...options,
+          format: fmt,
+        });
       },
-      dataType: 'string',
-    };
-  }
-);
+    },
+    dataType: 'string',
+  };
+});
 
 export default extensions;
 

packages/ipydrawio/src/plugin.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
   Copyright 2020 jupyterlab-drawio contributors
   Copyright 2018 Wolf Vollprecht
 
@@ -130,21 +130,16 @@ function activate(
     },
     isToggleable: true,
     isToggled: (args) => {
-      const drawioUrlParams =
-        manager.settings?.composite?.drawioUrlParams || {};
+      const drawioUrlParams = manager.settings?.composite?.drawioUrlParams || {};
       for (const [k, v] of Object.entries(args.drawioUrlParams || {})) {
-        if (
-          drawioUrlParams.hasOwnProperty(k) &&
-          (drawioUrlParams as any)[k] !== v
-        ) {
+        if (drawioUrlParams.hasOwnProperty(k) && (drawioUrlParams as any)[k] !== v) {
           return false;
         }
       }
       return true;
     },
     execute: async (args) => {
-      const drawioUrlParams =
-        manager.settings?.composite?.drawioUrlParams || {};
+      const drawioUrlParams = manager.settings?.composite?.drawioUrlParams || {};
       await manager.settings.set('drawioUrlParams', {
         ...(drawioUrlParams as any),
         ...(args.drawioUrlParams as any),
@@ -200,14 +195,8 @@ function activate(
     });
 
     // actually add the menus
-    settingsMenu.addGroup(
-      [{ submenu: theme, type: 'submenu' }],
-      DIAGRAM_MENU_RANK
-    );
-    fileMenu.addGroup(
-      [{ submenu: exportMenu, type: 'submenu' }],
-      DIAGRAM_MENU_RANK
-    );
+    settingsMenu.addGroup([{ submenu: theme, type: 'submenu' }], DIAGRAM_MENU_RANK);
+    fileMenu.addGroup([{ submenu: exportMenu, type: 'submenu' }], DIAGRAM_MENU_RANK);
   }
 
   RenderedDiagram.manager = manager;

packages/ipydrawio/src/retroPlugin.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
@@ -58,8 +58,7 @@ function activate(
       if (!currentWidget || currentWidget instanceof DiagramDocument) {
         return;
       }
-      const context = (currentWidget as any)
-        .context as DocumentRegistry.Context;
+      const context = (currentWidget as any).context as DocumentRegistry.Context;
       if (!context) {
         return;
       }

packages/ipydrawio/src/status.tsx

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
   Copyright 2020 jupyterlab-drawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");

packages/ipydrawio/src/tokens.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
   Copyright 2020 jupyterlab-drawio contributors
   Copyright 2018 Wolf Vollprecht
 
@@ -140,9 +140,7 @@ export type TUIThemes = SCHEMA.UITheme;
 /**
  * A concrete list of themes
  */
-export const UI_THEMES = SCHEMA_JSON.definitions['ui-theme'][
-  'enum'
-] as TUIThemes[];
+export const UI_THEMES = SCHEMA_JSON.definitions['ui-theme']['enum'] as TUIThemes[];
 
 /**
  * The theme color to replace
@@ -330,6 +328,7 @@ type TMXGraphEvent =
   | 'gridSizeChanged'
   | 'moveCells'
   | 'pan'
+  | 'removeCells'
   | 'resizeCells'
   | 'root'
   | 'shadowVisibleChanged'
@@ -351,6 +350,7 @@ export const MX_GRAPH_EVENTS: TMXGraphEvent[] = [
   'moveCells',
   'pan',
   'resizeCells',
+  'removeCells',
   'root',
   'shadowVisibleChanged',
   'size',
@@ -396,9 +396,7 @@ export const MX_GRAPH_SELECT_EVENTS: TMXGraphSelectionEvent[] = ['change'];
 
 export type TMXGraphSelectionModelEvent = 'change';
 
-export const MX_GRAPH_SELECT_MODEL_EVENTS: TMXGraphSelectionModelEvent[] = [
-  'change',
-];
+export const MX_GRAPH_SELECT_MODEL_EVENTS: TMXGraphSelectionModelEvent[] = ['change'];
 
 type TMXEvent =
   | TMXAppModelEvent
@@ -427,6 +425,7 @@ export interface IMXEvent {
 export interface IMXGraphModel extends IMXEventSource<TMXGraphModelEvent> {
   dx: number;
   dy: number;
+  cells: IMXCell[];
 }
 
 export interface IMXGraphView extends IMXEventSource<TMXGraphViewEvent> {
@@ -437,8 +436,7 @@ export interface IMXGraphView extends IMXEventSource<TMXGraphViewEvent> {
   gridColor: string;
 }
 
-export interface IMXGraphPanningHandler
-  extends IMXEventSource<TMXGraphPanningEvent> {}
+export interface IMXGraphPanningHandler extends IMXEventSource<TMXGraphPanningEvent> {}
 
 export interface IMXGraphSelectionHandler
   extends IMXEventSource<TMXGraphSelectionEvent> {}
@@ -461,7 +459,7 @@ export interface IMXGraph extends IMXEventSource<TMXGraphEvent> {
   gridSize: number;
   selectionCellsHandler: IMXGraphSelectionHandler;
   selectionModel: IMXGraphSelectionModel;
-  getCellsById(id: string): IMXCell[];
+  getCellsById(id: string[]): IMXCell[];
 }
 
 export interface IMXEditor extends IMXEventSource<TMXMEditorEvent> {

packages/ipydrawio/src/typings.d.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
   Copyright 2020 jupyterlab-drawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");

packages/ipydrawio/src/utils.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
   Copyright 2020 jupyterlab-drawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");

packages/ipydrawio/src/widgetPlugin.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
   Copyright 2020 jupyterlab-drawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");

packages/ipydrawio/src/widgets.ts

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 ipydrawio contributors
+  Copyright 2022 ipydrawio contributors
   Copyright 2020 jupyterlab-drawio contributors
 
   Licensed under the Apache License, Version 2.0 (the "License");
@@ -47,7 +47,11 @@ import {
 } from './tokens';
 
 import '../style/widget.css';
+import { IMXApp, IMXGraph, IMXGraphModel, IMXPage } from '.';
 
+/**
+ * An empty drawio diagaram.
+ */
 const A_SHORT_DRAWIO = `<mxfile version="13.3.6">
 <diagram id="x" name="Page-1">
     <mxGraphModel dx="1450" dy="467" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
@@ -60,6 +64,11 @@ const A_SHORT_DRAWIO = `<mxfile version="13.3.6">
 </mxfile>
 `;
 
+/**
+ * Some sensible default URL values
+ *
+ * Note that `stealth` must be enabled to use URL-encoded shape libraries.
+ */
 const DEFAULT_URL_PARAMS = {
   gapi: 0,
   gl: 0,
@@ -73,12 +82,18 @@ const DEFAULT_URL_PARAMS = {
   p: 'ex;tips;svgdata;sql;anim;trees;replay;anon;flow;webcola;tags',
 };
 
+/**
+ * Some sensible default config values.
+ */
 const DEFAULT_DRAWIO_CONFIG = {
   compressXml: false,
   showStartScreen: false,
   override: true,
 };
 
+/**
+ * A model of the underlying XML for a drawio diagram
+ */
 export class XMLModel extends WidgetModel {
   static model_name = 'XMLModel';
   static model_module = NS;
@@ -88,6 +103,9 @@ export class XMLModel extends WidgetModel {
   static view_module = NS;
   static view_module_version = VERSION;
 
+  /**
+   * The default tratlet values for an XML source
+   */
   defaults() {
     return {
       ...super.defaults(),
@@ -102,10 +120,16 @@ export class XMLModel extends WidgetModel {
   }
 }
 
+/**
+ * A dummy view for an XMLModel
+ */
 export class XMLView extends WidgetView {
   model: XMLModel;
 }
 
+/**
+ * A model of a Diagram
+ */
 export class DiagramModel extends BoxModel {
   static model_name = 'DiagramModel';
   static model_module = NS;
@@ -115,11 +139,11 @@ export class DiagramModel extends BoxModel {
   static view_module = NS;
   static view_module_version = VERSION;
 
-  static serializers = {
-    ...BoxModel.serializers,
-    source: { deserialize },
-  };
+  static serializers = { ...BoxModel.serializers, source: { deserialize } };
 
+  /**
+   * Default traitlet values for a diagram
+   */
   defaults() {
     return {
       ...super.defaults(),
@@ -135,6 +159,7 @@ export class DiagramModel extends BoxModel {
       page_ids: [],
       selected_page: 0,
       selected_cells: [],
+      cell_ids: [],
       grid_enabled: true,
       grid_color: '#66666666',
       grid_size: 10,
@@ -143,40 +168,69 @@ export class DiagramModel extends BoxModel {
       page_format: { x: 0, y: 0, width: 850, height: 1100 },
     };
   }
-
-  initialize(attributes: any, options: any) {
-    super.initialize(attributes, options);
-  }
 }
 
+/**
+ * A renderer for a Diagram.
+ */
 export class DiagramView extends BoxView {
   static diagrmManager: IDiagramManager;
+
   model: DiagramModel;
 
   protected diagram: Diagram;
+  private _displayInterval: number;
 
-  initialize(parameters: any) {
-    super.initialize(parameters);
-  }
-
+  /**
+   * Render the diagram, and schedule re-rerendering for when actually displayed.
+   */
   render() {
     super.render();
     this.pWidget.addClass('jp-IPyDiagram');
-    const init = setInterval(() => {
-      if (!this.pWidget.isVisible) {
-        return;
-      }
-      clearInterval(init);
-      this.initDiagram();
-      this.pWidget.addWidget(this.diagram);
-      this.diagram.onContentChanged();
-      this.diagram.onAfterShow();
-      this.model.on('change:source', this.onModelSourceChange, this);
-      this.onModelSourceChange();
-    }, 100);
+    this._displayInterval = setInterval(this.waitForDisplayed, 50);
   }
 
-  onModelSourceChange() {
+  /**
+   * A low-tech way to wait until we are quite sure the diagram is displayed.
+   */
+  protected waitForDisplayed = () => {
+    if (!this.pWidget.isVisible) {
+      return;
+    }
+    clearInterval(this._displayInterval);
+    this.initDiagram();
+    this.pWidget.addWidget(this.diagram);
+    this.diagram.onContentChanged();
+    this.diagram.onAfterShow();
+    this.model.on('change:source', this.onModelSourceChange, this);
+    this.onModelSourceChange();
+  };
+
+  /**
+   * The drawio App
+   */
+  get app(): IMXApp {
+    return this.diagram.app;
+  }
+
+  /**
+   * The drawio Graph
+   */
+  get graph(): IMXGraph {
+    return this.diagram.app.editor.graph;
+  }
+
+  /**
+   * The drawio Graph Model
+   */
+  get graphModel(): IMXGraphModel {
+    return this.diagram.app.editor.graph.model;
+  }
+
+  /**
+   * Handle the XML source changing in the kernel, subscribe to its value changing.
+   */
+  protected onModelSourceChange() {
     const oldSource = (this.model.changed as any).source as XMLModel;
     if (oldSource != null) {
       oldSource.off('change:value', this.onSourceValue, this);
@@ -187,12 +241,18 @@ export class DiagramView extends BoxView {
     }
   }
 
-  onSourceValue() {
+  /**
+   * Handle the XML source's value changing
+   */
+  protected onSourceValue() {
     DEBUG && console.warn('change:value');
     this.diagram.onContentChanged();
   }
 
-  initDiagram() {
+  /**
+   * Initialize the actual Diagram renderer.
+   */
+  protected initDiagram() {
     DEBUG && console.warn('creating diagram widget');
     // TODO: consider hoisting this to the source
     const format = DiagramView.diagrmManager.formatForModel({
@@ -200,8 +260,6 @@ export class DiagramView extends BoxView {
     });
     this.diagram = new Diagram({
       adapter: {
-        // this probably is evented
-        // format: () => XML_NATIVE,
         saveNeedsExport: () => false,
         drawioUrl: () => DRAWIO_URL,
         drawioConfig: () => this.model.get('config'),
@@ -219,7 +277,10 @@ export class DiagramView extends BoxView {
     this.diagram.appChanged.connect(this.onAppChanged, this);
   }
 
-  xml(value?: string) {
+  /**
+   * Set or get the source.
+   */
+  protected xml(value?: string) {
     const source: XMLModel = this.model.get('source');
 
     if (value == null) {
@@ -234,11 +295,16 @@ export class DiagramView extends BoxView {
     return;
   }
 
-  onAppChanged() {
+  /**
+   * Handle the drawio app actually being ready, connecting events, etc.
+   */
+  protected onAppChanged() {
     const { app } = this.diagram;
+
     if (!app) {
       return;
     }
+
     DEBUG && console.warn('installing handlers on', app);
 
     const { editor } = app;
@@ -256,7 +322,6 @@ export class DiagramView extends BoxView {
     ];
 
     // mxgraph model, not widget model
-    // app.editor.graph.model.eventListeners
     for (const { src, evts } of emitters) {
       for (const evt of evts) {
         (src as any).addListener(evt, this.onDrawioEvent);
@@ -279,18 +344,27 @@ export class DiagramView extends BoxView {
       const throttle = new Throttler(fn, bounceOpts);
       this.model.on(evt, () => throttle.invoke(), this);
     });
+
+    this.model.set('cell_ids', this.getCellIds());
+    this.touch();
   }
 
-  onModelZoom = () => {
-    const { view } = this.app.editor.graph;
+  /**
+   * Handle a zoom change from the kernel
+   */
+  protected onModelZoom = () => {
+    const { view } = this.graph;
     const wz = this.model.get('zoom');
     if (view.getScale() !== wz) {
       view.setScale(wz);
     }
   };
 
-  onModelScroll = () => {
-    const { view } = this.app.editor.graph;
+  /**
+   * Handle a scroll change from the kernel
+   */
+  protected onModelScroll = () => {
+    const { view } = this.graph;
     const wx = this.model.get('scroll_x');
     const wy = this.model.get('scroll_y');
     const tx = view.getTranslate();
@@ -299,83 +373,134 @@ export class DiagramView extends BoxView {
     }
   };
 
-  onModelPageFormat = () => {
-    const newFmt = this.model.get('page_format');
-    const oldFmt = this.app.editor.graph.pageFormat as any;
+  /**
+   * Handle a page format change from the kernel
+   */
+  protected onModelPageFormat = () => {
+    const { app, model, graph } = this;
+    const newFmt = model.get('page_format');
+    const oldFmt = graph.pageFormat as any;
     if (!JSONExt.deepEqual(newFmt, oldFmt)) {
       DEBUG && console.warn('pageFormat', newFmt);
-      this.app.setPageFormat({ ...newFmt });
+      app.setPageFormat({ ...newFmt });
     }
   };
 
-  onModelPageSelected = () => {
-    this.app.selectPage(this.app.pages[this.model.get('current_page')]);
+  /**
+   * Handle a page selection change from the kernel
+   */
+  protected onModelPageSelected = () => {
+    const { app } = this;
+    app.selectPage(app.pages[this.model.get('current_page')]);
   };
 
-  onModelGridEnabled = () => {
-    this.app.editor.graph.setGridEnabled(this.model.get('grid_enabled'));
-    this.app.editor.graph.refresh();
+  /**
+   * Handle a grid change from the kernel
+   */
+  protected onModelGridEnabled = () => {
+    const { graph } = this;
+    graph.setGridEnabled(this.model.get('grid_enabled'));
+    graph.refresh();
   };
 
-  onModelGridSize = () => {
-    this.app.editor.graph.setGridSize(this.model.get('grid_size'));
-    this.app.editor.graph.refresh();
+  /**
+   * Handle a grid size change from the kernel
+   */
+  protected onModelGridSize = () => {
+    const { graph } = this;
+    graph.setGridSize(this.model.get('grid_size'));
+    graph.refresh();
   };
 
-  onModelGridColor = () => {
+  /**
+   * Handle a grid color change from the kernel
+   */
+  protected onModelGridColor = () => {
     this.app.setGridColor(this.model.get('grid_color'));
   };
 
-  onModelSelectedCells = () => {
-    const cells = this.model
-      .get('selected_cells')
-      .reduce((m: IMXCell[], id: string) => {
-        return [...m, ...this.app.editor.graph.getCellsById(id)];
-      }, []);
-    this.app.editor.graph.selectionModel.setCells(cells);
+  /**
+   * Handle a selected cell change from the kernel
+   */
+  protected onModelSelectedCells = () => {
+    const { graph } = this;
+    const cells: IMXCell[] = graph.getCellsById(this.model.get('selected_cells'));
+
+    graph.selectionModel.setCells(cells);
   };
 
-  get app() {
-    return this.diagram.app;
+  /**
+   * convenience method for frequently-called loops
+   */
+  protected idGetter(cellOrPage: IMXCell | IMXPage) {
+    return cellOrPage.getId();
   }
 
-  // handle "native" mxEvent stuff
-  onDrawioEvent = (sender: IMXEventSource, event: IMXEvent) => {
-    let needsUpdate = {};
+  /**
+   * Extract the cell or page ids
+   */
+  protected getCellIds(): string[] {
+    return Object.values(this.graphModel.cells).map(this.idGetter);
+  }
+
+  /**
+   * Translate drawio view translation to scroll offsets
+   *
+   * Ideally this would be the center of the viewport to allow for synced views
+   */
+  translateToScroll() {
+    const { x, y } = this.graph.view.getTranslate();
+
+    return { scroll_x: x, scroll_y: y };
+  }
+
+  /**
+   * handle subscribed "native" mxEvents
+   *
+   * These are found throughout the code in the `mxEvent` namespace, though some
+   * magic strings do appear duplicated in a numebr of placess
+   */
+  protected onDrawioEvent = (sender: IMXEventSource, event: IMXEvent) => {
+    const { app, graph, model } = this;
+    const { view } = graph;
+
+    let change = {};
+
     switch (event.name) {
       case 'change':
-        needsUpdate = {
-          selected_cells: this.app.editor.graph.selectionModel.cells.map((c) =>
-            c.getId()
-          ),
-        };
+        change = { selected_cells: graph.selectionModel.cells.map(this.idGetter) };
         break;
       case 'scale':
       case 'scaleAndTranslate':
-        needsUpdate = { zoom: this.app.editor.graph.view.getScale() };
+        change = { zoom: view.getScale() };
         break;
       case 'pan':
       case 'translate':
       case 'size':
-        needsUpdate = this.translateToScroll();
+        change = this.translateToScroll();
         break;
       case 'pageSelected':
-        needsUpdate = {
-          current_page: this.app.pages.indexOf(this.app.currentPage),
-          page_ids: this.app.pages.map((p) => p.getId()),
+        change = {
+          current_page: app.pages.indexOf(app.currentPage),
+          page_ids: app.pages.map((p) => p.getId()),
         };
         break;
       case 'pageFormatChanged':
-        needsUpdate = { page_format: this.app.editor.graph.pageFormat };
+        change = { page_format: graph.pageFormat };
         break;
       case 'gridEnabledChanged':
-        needsUpdate = { grid_enabled: this.app.editor.graph.gridEnabled };
+        change = { grid_enabled: graph.gridEnabled };
         break;
       case 'gridSizeChanged':
-        needsUpdate = { grid_size: this.app.editor.graph.gridSize };
+        change = { grid_size: graph.gridSize };
         break;
       case 'gridColorChanged':
-        needsUpdate = { grid_color: this.app.editor.graph.view.gridColor };
+        change = { grid_color: view.gridColor };
+        break;
+      case 'removeCells':
+      case 'cellsAdded':
+      case 'cellsInserted':
+        change = { cell_ids: this.getCellIds() };
         break;
       case 'fireMouseEvent':
         break; // these are too noisy, even for us
@@ -386,18 +511,13 @@ export class DiagramView extends BoxView {
 
     const old: any = {};
 
-    for (const k of Object.keys(needsUpdate)) {
-      old[k] = this.model.attributes[k];
+    for (const k of Object.keys(change)) {
+      old[k] = model.attributes[k];
     }
 
-    if (!JSONExt.deepEqual(old, needsUpdate)) {
-      this.model.set(needsUpdate);
+    if (!JSONExt.deepEqual(old, change)) {
+      model.set(change);
       this.touch();
     }
   };
-
-  translateToScroll() {
-    const { x, y } = this.app.editor.graph.view.getTranslate();
-    return { scroll_x: x, scroll_y: y };
-  }
 }