Draw.io – Add Keyboard Shortcuts to Insert Elements

draw.iokeyboard shortcuts

Is it possible to add a new keyboard shortcut to draw.io to insert a given element?

In short I want to have a faster way of inserting the General > Text element. Ideally I would like to change the double click event to insert this, instead of a non-linkable text which it uses today.

The reason I can't use the double click, or Ctrl-Shift-X, is that the text element which is inserted then is non-linkable, and can not be connected to to other elements.

Bonus: To add other elements using another shortcut with specified element.

PS! An alternate version could be to use the Ctrl-K, if it was possible to default to a rectangle without line around. 🙂

Best Answer

A plugin to insert elements

It turns out that it is indeed possible to add a plugin, which adds shortcuts to draw.io. Here is plugin code for adding either an ellipse using Ctrl+Shift+Q, or text using Ctrl+Shift+T. For the text node I opted for left justified, and top aligned.

Draw.loadPlugin(function(ui) {

    // Adds resource for action
    mxResources.parse('myInsertText=Insert text element');
    mxResources.parse('myInsertEllipse=Insert ellipse');

    ui.actions.addAction('myInsertEllipse', function() {
        var e = ui.editor.graph;
        if(e.isEnabled()&&!e.isCellLocked(e.getDefaultParent())){
          var b=e.getInsertPoint(),
          b=new mxCell("",
                new mxGeometry(b.x,b.y,80,80),
                "ellipse;whiteSpace=wrap;html=1;");

          b.vertex=!0;
          e.setSelectionCell(e.addCell(b))
        }
    }, null, null, "Ctrl+Shift+Q");

    ui.keyHandler.bindAction(81, !0, "myInsertEllipse", !0);

    ui.actions.addAction('myInsertText', function() {
        var e = ui.editor.graph;
        if(e.isEnabled() && !e.isCellLocked(e.getDefaultParent())){
          var b=e.getInsertPoint(),
          b=new mxCell("",
                new mxGeometry(b.x,b.y,150,100),
                "text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=top;whiteSpace=wrap;overflow=auto");

          b.vertex=!0;
          e.setSelectionCell(e.addCell(b))
        }
    }, null, null, "Ctrl+Shift+T");

    ui.keyHandler.bindAction(84, !0, "myInsertText", !0);
});

All of this text needs to be added to a file, which is accessible from a given URL. I did this using Google Drive, and fiddled a little to get it to the correct URL to the actual javascript file, which this is.

When you have the link, go to draw.io, and do the following:

Information on plugin code

See "The draw.io plugin system" for the introduction of plugins to draw.io. This is rather scarce, so you need to be experimental and adventerous to make new plugins. You also need to know your way around the developer tools related to your browser to make the full benefit of the following:

  • Locate free keys
    • Open up the Developer Tools of your browser, and go to the Console
    • Execute this command: Draw.valueOf()
    • And navigate down the following: Object > loadPlugin > > ui > keyHandler > controlShiftKeys
    • You now see which ASCII upper character codes are assigned
  • Choose element to insert – To insert another element, the base idea is to check the Edit style of the element, and copy this part into the appropriate part of a newly created resource. Note that the textual key binding here, is used if you insert the action into a menu
  • Advanced elements – For more advanced insertions, you might need to look into how draw.io creates the elements it self, and this requires some reverse engineering of draw.io :-D
  • Add key binding – When adding a key binding, the typical bindAction() requires the following paramters:
    • First parameter is the ascii code of the character (user uppercase characters for Ctrl and Ctrl+Shift)
    • Control indicator: Ctrl is !0, else use !1
    • Name of action to execute
    • Optional shift-indicator: Default is no Shift !1, else use !0

Adding an extra menu

The example code of the plugins, linked above, shows how to add menu items, and here is some code to add a menu of your own (add this at the bottom of the Draw.loadPlugin(function(ui)...

// Adds menu
ui.menubar.addMenu('My Menu', function(menu, parent) {
    ui.menus.addMenuItem(menu, 'myInsertText');
    ui.menus.addMenuItem(menu, 'myInsertEllipse');
});

// Reorders menubar
ui.menubar.container.insertBefore(ui.menubar.container.lastChild,
ui.menubar.container.lastChild.previousSibling.previousSibling);

Edit: The complete plugin, insertElementsWithMenu.js, is now available on my newly created github repository: holroy's draw.io plugins. Follow instructions on github to fork out your version, and getting a proper link to the plugin. Here is a permanent link to the initial version of this plugin.

Related Topic