Add Command Button for testing

Author: hbcarlos

src/editor.ts

@@ -16,6 +16,8 @@ import { DocumentRegistry, DocumentWidget } from '@jupyterlab/docregistry';
 
 import { MainMenu, JupyterLabMenu } from '@jupyterlab/mainmenu';
 
+import { CommandToolbarButton } from '@jupyterlab/apputils';
+
 import { IChangedArgs, PathExt } from '@jupyterlab/coreutils';
 
 import { CommandRegistry } from '@lumino/commands';
@@ -41,6 +43,7 @@ export class DrawIODocumentWidget extends DocumentWidget<DrawIOWidget> {
     this._menubar = new MainMenu(this._commands);
 
     this._menubar.clearMenus();
+    this.toolbar.addClass('dio-toolbar');
 
     //TODO:
     // Add toolbar actions to change the default style of arrows and conections.
@@ -208,11 +211,15 @@ export class DrawIODocumentWidget extends DocumentWidget<DrawIOWidget> {
       'zoomOut',
       new DrawIOToolbarButton(actions['zoomOut'])
     );
-
-    actions['undo'].iconCls = 'geSprite geSprite-undo';
-    this.toolbar.addItem('undo', new DrawIOToolbarButton(actions['undo']));
-    actions['redo'].iconCls = 'geSprite geSprite-redo';
-    this.toolbar.addItem('redo', new DrawIOToolbarButton(actions['redo']));
+    
+    this.toolbar.addItem('undo', new CommandToolbarButton({
+      id: 'drawio:command/undo',
+      commands: this._commands
+    }));
+    this.toolbar.addItem('redo', new CommandToolbarButton({
+      id: 'drawio:command/redo',
+      commands: this._commands
+    }));
 
     actions['delete'].iconCls = 'geSprite geSprite-delete';
     this.toolbar.addItem('delete', new DrawIOToolbarButton(actions['delete']));

src/index.ts

@@ -30,6 +30,11 @@ import { IFileBrowserFactory } from '@jupyterlab/filebrowser';
 
 import { ILauncher } from '@jupyterlab/launcher';
 
+import {
+  undoIcon,
+  redoIcon,
+} from '@jupyterlab/ui-components';
+
 import { CommandRegistry } from '@lumino/commands';
 
 import { Token } from '@lumino/coreutils';
@@ -514,8 +519,8 @@ function addCommands(app: JupyterFrontEnd, tracker: IDrawioTracker): void {
   //  Select vertices, select edges, select all, select none
   //  lock/unlock
   const editCommands = [
-    { name: 'undo', label: 'Undo' }, //Ctrl+Z
-    { name: 'redo', label: 'Redo' }, //Ctrl+Shift+Z
+    //{ name: 'undo', label: 'Undo' }, //Ctrl+Z
+    //{ name: 'redo', label: 'Redo' }, //Ctrl+Shift+Z
     { name: 'cut', label: 'Cut' }, //Ctrl+X
     { name: 'copy', label: 'Copy' }, //Ctrl+C
     { name: 'paste', label: 'Paste' }, //Ctrl+V
@@ -559,6 +564,56 @@ function addCommands(app: JupyterFrontEnd, tracker: IDrawioTracker): void {
       }
     });
   });
+  app.commands.addCommand('drawio:command/undo', {
+    label: 'Undo',
+    caption: 'Undo (Ctrl+Z)',
+    icon: undoIcon,
+    isEnabled: () => {
+      if (
+        tracker.currentWidget !== null &&
+        tracker.currentWidget === app.shell.currentWidget
+      ) {
+        const wdg = app.shell.currentWidget as DrawIODocumentWidget;
+        return wdg.getAction('undo').enabled;
+      } else {
+        return false;
+      }
+    },
+    execute: () => {
+      if (
+        tracker.currentWidget !== null &&
+        tracker.currentWidget === app.shell.currentWidget
+      ) {
+        const wdg = app.shell.currentWidget as DrawIODocumentWidget;
+        wdg.getAction('undo').funct();
+      }
+    }
+  });
+  app.commands.addCommand('drawio:command/redo', {
+    label: 'Redo',
+    caption: 'redo (Ctrl+Shift+Z)',
+    icon: redoIcon,
+    isEnabled: () => {
+      if (
+        tracker.currentWidget !== null &&
+        tracker.currentWidget === app.shell.currentWidget
+      ) {
+        const wdg = app.shell.currentWidget as DrawIODocumentWidget;
+        return wdg.getAction('redo').enabled;
+      } else {
+        return false;
+      }
+    },
+    execute: () => {
+      if (
+        tracker.currentWidget !== null &&
+        tracker.currentWidget === app.shell.currentWidget
+      ) {
+        const wdg = app.shell.currentWidget as DrawIODocumentWidget;
+        wdg.getAction('redo').funct();
+      }
+    }
+  });
 
   // View MENU
   //Not Working:

style/base.css

@@ -1,3 +1,7 @@
 .dio-toolbar-dropdown:not(:-internal-list-box) {
 	overflow: visible !important;
+}
+
+.dio-toolbar .jp-ToolbarButtonComponent-label {
+  display: none;
 }