2

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. :)

2 Answers 2

3

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.

0

There isn't a mechanism to assign shortcuts, but it's an interesting idea. Please submit it as a feature request.

7
  • Are you affiliated with draw.io, so this answer is authoritative?
    – holroy
    Aug 13, 2015 at 8:52
  • Can elements be added via a plugin? In other words can we add a keyboard shortcut via an plugin insert of an element?
    – holroy
    Aug 13, 2015 at 8:57
  • To answer my own comment: Yes, it is possible to add elements using a plugin, see my own answer to this question! :-)
    – holroy
    Aug 13, 2015 at 19:17
  • 1
    See my profile, you can decide if you think my answer is authoritative. In terms of using a plugin I didn't suggest it because I spent the week on holiday thinking whether we're going to drop or do something useful with the draw plugin system. I do like the detail you've achieved without access to proper docs, makes me think it'll be interesting what people can make if they had the docs and the sources... Aug 16, 2015 at 6:56
  • 1
    We will improve the plugin system. I'd like a system to add them to a browser without we need for a security dialog, but that might require some central registration system. Aug 16, 2015 at 11:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.