Add template api (#42)

CHANGELOG.md

@@ -15,8 +15,9 @@
 #### @deathbeds/ipydrawio 1.1.0
 
 - the `sketch` theme is now available as the `ui` [#40]
-- the _Advanced Diagram..._ Launcher card offers all the themes, templates, and
+- 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]
@@ -27,11 +28,12 @@
 
 #### @deathbeds/ipydrawio-pdf 1.1.0
 
-#### @deathbeds/ipydrawio-webpack 14.6.1300
+#### @deathbeds/ipydrawio-webpack 14.7.100
 
-- drawio 14.6.13 [#40]
+- drawio 14.7.1 [#41]
 
 [#40]: https://github.com/deathbeds/ipydrawio/pull/40
+[#41]: https://github.com/deathbeds/ipydrawio/pull/41
 
 ---
 

atest/Advanced Create.robot → atest/Custom.robot

@@ -13,48 +13,50 @@
 # limitations under the License.
 
 *** Settings ***
-Documentation     Does advanced create work?
+Documentation     Does custom create work?
 Resource          _Keywords.robot
 Library           OperatingSystem
-Force Tags        component:document    component:advanced-create
-Suite Setup       Set Screenshot Directory    ${OUTPUT DIR}${/}screenshots${/}advanced-create
+Force Tags        component:document    component:custom
+Suite Setup       Set Screenshot Directory    ${OUTPUT DIR}${/}screenshots${/}custom
 
 *** Test Cases ***
 Defaults
     [Documentation]    Does taking the defaults work?
-    Launch Advanced Diagram
+    Launch Custom Diagram
     Capture Page Screenshot    00-configured.png
-    Accept Advanced Options
+    Accept Custom Options
     Capture Page Screenshot    10-launched.png
+    [Teardown]    Clean up After Custom Test
 
 Min Classes Notebook
     [Documentation]    Does Min Classes Notebook?
-    Validate Advanced Create    mcn    ipynb    min    classes.xml
+    Validate Custom Create    mcn    ipynb    min    classes.xml
 
 Kennedy Flowchart PNG
     [Documentation]    Kennedy Classes PNG?
-    Validate Advanced Create    kfp    dio.png    kennedy    flowchart.xml
+    Validate Custom Create    kfp    dio.png    kennedy    flowchart.xml
 
 Sketch Business Model SVG
     [Documentation]    Kennedy Classes PNG?
-    Validate Advanced Create    kfp    dio.svg    sketch    business_model_1.xml
+    Validate Custom Create    kfp    dio.svg    sketch    business_model_1.xml
 
 *** Keywords ***
-Validate Advanced Create
+Validate Custom Create
     [Arguments]    ${stem}    ${ext}    ${ui}    ${template}
     Set Tags    format:${ext}    ui:${ui}    template:${template}
-    Launch Advanced Diagram
+    Launch Custom Diagram
     Choose Format    ${ext}
     Choose Theme    ${ui}
     Choose Template    ${template}
     Capture Page Screenshot    ${stem}-00-configured.png
-    Accept Advanced Options
+    Accept Custom Options
     Capture Page Screenshot    ${stem}-10-launched.png
-    [Teardown]    Clean Up After Advanced Test
+    [Teardown]    Clean up After Custom Test
 
-Clean up After Advanced Test
+Clean up After Custom Test
     Unselect Frame
     Remove File    ${HOME}${/}untitled*
+    Remove File    ${HOME}${/}Untitled*
 
 Choose Format
     [Arguments]    ${ext}

atest/Formats.robot

@@ -155,6 +155,7 @@ IPyDrawio Export Server Should be Provisioned
 Clean Up After Export Test
     Unselect Frame
     Remove File    ${HOME}${/}untitled*
+    Remove File    ${HOME}${/}Untitled*
 
 Validate Editable Format
     [Arguments]    ${format}    ${ext}    ${doc id}

atest/Settings.robot

@@ -58,3 +58,4 @@ Validate a Diagram Theme
 Clean Up after Settings Test
     Unselect Frame
     Remove File    ${HOME}${/}untitled*
+    Remove File    ${HOME}${/}Untitled*

atest/_Keywords.robot

@@ -302,14 +302,14 @@ Launch Untitled Diagram
     Unselect Frame
     Wait Until Element is Visible    ${CSS DIO IFRAME}    timeout=20s
 
-Launch Advanced Diagram
+Launch Custom Diagram
     Lab Command    New Launcher
     Ensure Sidebar Is Closed
     Click Element    ${XP LAUNCH TAB}
-    Wait Until Element is Enabled    ${CSS LAUNCH ADVANCED}
-    Click Element    ${CSS LAUNCH ADVANCED}
-    Wait Until Element is Visible    ${CSS CREATE ADVANCED}
+    Wait Until Element is Enabled    ${CSS LAUNCH CUSTOM}
+    Click Element    ${CSS LAUNCH CUSTOM}
+    Wait Until Element is Visible    ${CSS CREATE CUSTOM}
 
-Accept Advanced Options
-    Click Element    ${CSS ACCEPT ADVANCED}
+Accept Custom Options
+    Click Element    ${CSS ACCEPT CUSTOM}
     Wait Until Element is Visible    ${CSS DIO IFRAME}    timeout=20s

atest/_Variables.robot

@@ -48,7 +48,7 @@ ${JLAB XP CLOSE SETTINGS}    ${JLAB XP DOCK TAB}\[contains(., 'Settings')]/*[con
 ${XP LAUNCH TAB}    ${JLAB XP DOCK TAB}//*[contains(text(), 'Launcher')]
 ${CSS LAUNCHER}    css:.jp-Launcher-body
 ${CSS LAUNCH DIO}    css:.jp-LauncherCard[title='Create a blank .dio file'] svg
-${CSS LAUNCH ADVANCED}    css:.jp-LauncherCard[title='Create a diagram with customized formats, templates, and UI'] svg
+${CSS LAUNCH CUSTOM}    css:.jp-LauncherCard[title='Create a diagram with customized formats, templates, and UI'] svg
 ${CSS LAUNCH IPYNB}    css:.jp-LauncherCard[data-category='Notebook'][title='Python 3'] .jp-LauncherCard-icon
 ${CSS DIO READY}    css:.jp-Diagram-ready
 ${CSS DIO IFRAME}    ${CSS DIO READY} iframe
@@ -58,8 +58,8 @@ ${CSS DIO SHAPE POPUP}    css:.geToolbarContainer.geSidebarContainer.geSidebar
 ${CSS DIO SHAPE POPUP SHAPE}    ${CSS DIO SHAPE POPUP} .geItem
 ${CSS DIO EDITABLE}    css:.mxCellEditor.geContentEditable
 # advanced
-${CSS CREATE ADVANCED}    css:.jp-IPyDiagram-CreateAdvanced
-${CSS ACCEPT ADVANCED}    ${CSS CREATE ADVANCED} header .jp-mod-accept
+${CSS CREATE CUSTOM}    css:.jp-IPyDiagram-CreateCustom
+${CSS ACCEPT CUSTOM}    ${CSS CREATE CUSTOM} header .jp-mod-accept
 # from jupyterlibrary
 ${JLAB CSS ACCEPT}    .jp-mod-accept
 ${JLAB CSS ACTIVE DOC}    .jp-Document:not(.jp-mod-hidden)

conda.recipe/meta.yaml

@@ -99,9 +99,9 @@ outputs:
         - ipydrawio_export
       requires:
         - pip
-        - pytest-cov
-        - pytest-tornasync
-        - pytest-console-scripts
+        - pytest-cov  # [unix]
+        - pytest-tornasync  # [unix]
+        - pytest-console-scripts  # [unix]
       commands:
         - pip check
         - jupyter labextension list
@@ -110,11 +110,10 @@ outputs:
         - jupyter serverextension list
         - jupyter serverextension list 1>serverextensions 2>&1
         - cat serverextensions | grep "ipydrawio_export.*OK"  # [unix]
-        {% set pytest_args = "--cov-fail-under=96" %}
-        {% set pytest_args = pytest_args + " -k not merged" %}  # [win]
+        {% set pytest_args = "--cov-fail-under=96" %}  # [unix]
         # TODO: investigate potential docker/locale issues upstream to restore coverage
         # {% set pytest_args = "--cov-fail-under=54 -k 'not (export_empty or export_merged or serverextension_export)'" %}  # [linux]
-        - pytest -vv {{ pytest_args }} --pyargs ipydrawio_export --script-launch-mode=subprocess --cov=ipydrawio_export --cov-report=term-missing:skip-covered
+        - pytest -vv --pyargs ipydrawio_export --script-launch-mode=subprocess --cov=ipydrawio_export --cov-report=term-missing:skip-covered {{ pytest_args }}  # [unix]
     about:
       home: https://github.com/deathbeds/ipydrawio
       summary: PDF export for IPyDrawio

docs/Diagram Document.ipynb

@@ -20,7 +20,7 @@
     "## Making a Diagram Document\n",
     "From the _JupyterLab Launcher_:\n",
     "- click _Diagram_ \n",
-    "- or _Advanced Diagram..._\n",
+    "- or _Custom Diagram..._\n",
     "    - and choose your _Theme_, _Format_ and _Template_"
    ]
   },

packages/ipydrawio-notebook/src/plugin.ts

@@ -24,7 +24,7 @@ import { ALL_FORMATS, IPYNB_DIO } from './io';
 import { INotebookTracker } from '@jupyterlab/notebook';
 
 /**
- * The editor tracker extension.
+ * The notebook diagram plugin.
  */
 const plugin: JupyterFrontEndPlugin<void> = {
   activate,
@@ -33,8 +33,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
   autoStart: true,
 };
 
-export default plugin;
-
+/** Activate the notebook diagram plugin */
 function activate(
   app: JupyterLab,
   diagrams: IDiagramManager,
@@ -60,3 +59,5 @@ function activate(
     },
   });
 }
+
+export default plugin;

packages/ipydrawio-notebook/src/tokens.ts

@@ -16,12 +16,29 @@
 
 import * as PACKAGE_ from '../package.json';
 
+/**
+ * The hoisted `package.json`
+ */
 export const PACKAGE = PACKAGE_;
 
+/**
+ * The namespace for notebook-level concerns
+ */
 export const NS = PACKAGE.name;
+
+/**
+ * The plugin id
+ */
 export const PLUGIN_ID = `${NS}:plugin`;
-export const CMD_NS = 'ipydrawio';
 
+/**
+ * The command namespace
+ */
+export const CMD_NS = 'ipydrawio-notebook';
+
+/**
+ * A namespace for diagram notebook commands
+ */
 export namespace CommandIds {
   export const open = `${CMD_NS}:open`;
 }

packages/ipydrawio-notebook/src/toolbar.ts

@@ -27,7 +27,8 @@ import { CommandIds } from './tokens';
  * A notebook widget extension that adds a button to the toolbar.
  */
 export class IPyDrawioNotebookButton
-  implements DocumentRegistry.IWidgetExtension<NotebookPanel, INotebookModel> {
+  implements DocumentRegistry.IWidgetExtension<NotebookPanel, INotebookModel>
+{
   commands: CommandRegistry;
 
   createNew(

packages/ipydrawio-pdf/src/tokens.ts

@@ -16,12 +16,27 @@
 
 import * as PACKAGE_ from '../package.json';
 
+/**
+ * The hoisted `package.json`
+ */
 export const PACKAGE = PACKAGE_;
 
+/**
+ * The namespace for PDF diagram cocnerns
+ */
 export const NS = PACKAGE.name;
+
+/**
+ * The PDF diagram plugin id
+ */
 export const PLUGIN_ID = `${NS}:plugin`;
-export const CMD_NS = `ipydrawio-pdf`;
 
+/**
+ * A namespace for PDF diagram commands
+ */
+export const CMD_NS = 'ipydrawio-pdf';
+
+/** The concrete command IDs for diagram commands */
 export namespace CommandIds {
   export const provision = `${CMD_NS}:provision`;
 }

packages/ipydrawio-webpack/lib/_static.js

@@ -32,6 +32,7 @@ import '!!file-loader?name=[path][name].[ext]&context=.!../dio/images/close.png'
 import '!!file-loader?name=[path][name].[ext]&context=.!../dio/images/cloud-connector-atlas.png';
 import '!!file-loader?name=[path][name].[ext]&context=.!../dio/images/collapsed.gif';
 import '!!file-loader?name=[path][name].[ext]&context=.!../dio/images/connector.png';
+import '!!file-loader?name=[path][name].[ext]&context=.!../dio/images/default-user.jpg';
 import '!!file-loader?name=[path][name].[ext]&context=.!../dio/images/delete.png';
 import '!!file-loader?name=[path][name].[ext]&context=.!../dio/images/document-google-drive-icon-80.png';
 import '!!file-loader?name=[path][name].[ext]&context=.!../dio/images/download.png';
@@ -186,6 +187,7 @@ import '!!file-loader?name=[path][name].[ext]&context=.!../dio/images/sidebar-um
 import '!!file-loader?name=[path][name].[ext]&context=.!../dio/images/sidebar-veeam.png';
 import '!!file-loader?name=[path][name].[ext]&context=.!../dio/images/sidebar-vvd.png';
 import '!!file-loader?name=[path][name].[ext]&context=.!../dio/images/sidebar-webIcons.png';
+import '!!file-loader?name=[path][name].[ext]&context=.!../dio/images/sketch-logo128.png';
 import '!!file-loader?name=[path][name].[ext]&context=.!../dio/images/spin.gif';
 import '!!file-loader?name=[path][name].[ext]&context=.!../dio/images/sprites.png';
 import '!!file-loader?name=[path][name].[ext]&context=.!../dio/images/stop-flat-icon-80.png';

packages/ipydrawio-webpack/package.json

@@ -43,5 +43,5 @@
     "build:pre": "python scripts/patch.py && python scripts/static.py"
   },
   "types": "lib/index.d.ts",
-  "version": "14.6.1300"
+  "version": "14.7.100"
 }

packages/ipydrawio/package.json

@@ -19,7 +19,7 @@
     "json-schema-to-typescript": "^10.1.4"
   },
   "peerDependencies": {
-    "@deathbeds/ipydrawio-webpack": "^14.6.1300",
+    "@deathbeds/ipydrawio-webpack": "^14.7.100",
     "@jupyter-widgets/base": "4",
     "@jupyter-widgets/controls": "3",
     "@jupyter-widgets/jupyterlab-manager": "3"

packages/ipydrawio/src/createAdvanced.tsx → packages/ipydrawio/src/createCustom.tsx

@@ -33,12 +33,12 @@ let THEME_TAGS: Record<SCHEMA.UITheme, string[]> = {
   atlas: [...FULL_UI, ...LIGHT],
 };
 
-export class CreateAdvanced extends VDomRenderer<CreateAdvanced.Model> {
-  constructor(model: CreateAdvanced.Model) {
+export class CreateCustom extends VDomRenderer<CreateCustom.Model> {
+  constructor(model: CreateCustom.Model) {
     super(model);
     this.title.icon = IO.drawioIcon;
     this.title.label = 'New Diagram';
-    this.addClass('jp-IPyDiagram-CreateAdvanced');
+    this.addClass('jp-IPyDiagram-CreateCustom');
     this.addClass('jp-RenderedHTMLCommon');
   }
 
@@ -192,8 +192,8 @@ export class CreateAdvanced extends VDomRenderer<CreateAdvanced.Model> {
         ></input>
         <label htmlFor={id}>
           {template.label}
-          <img src={template.thumbnail}></img>
-          {this.renderTags(template.tags)}
+          {template.thumbnail ? <img src={template.thumbnail}></img> : []}
+          {this.renderTags(template.tags || [])}
         </label>
       </li>
     );
@@ -208,7 +208,7 @@ export class CreateAdvanced extends VDomRenderer<CreateAdvanced.Model> {
   };
 }
 
-export namespace CreateAdvanced {
+export namespace CreateCustom {
   export interface IOptions {
     manager: IDiagramManager;
   }
@@ -271,7 +271,7 @@ export namespace CreateAdvanced {
 
       for (const template of this._templates) {
         let hits = 0;
-        const text = `${template.label} ${template.tags.join(' ')}`;
+        const text = `${template.label} ${(template.tags || []).join(' ')}`;
 
         for (const q of query) {
           if (text.indexOf(q) !== -1) {