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:

• Navigate the menues to Extras > Plugins...
• Hit the Add button
• Enter the URL to your javascript file, like https://cdn.rawgit.com/holroy/draw.io-plugins/64e4130dc5a8bee40c8f7fce7f855c58d5c51eb3/insertElementsWithMenu.js (which is a permanent link to the inital version of my plugin)
• Hit the Add button, and then the Apply button
• Reload the draw.io page, and accept the load of the plugin
• Use your newly added keyboard shortcuts

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.

1. Select the range to which the rule should apply: in my example it is G1:G8.
2. Enter the custom formula criterion for red color: =G1<TODAY(). Note that this says "G1" because the formula is stated as it applies to the upper left corner of the range. It will be automatically adjusted for other cells in the range according to the usual rules for relative references.
3. Click "add another rule", enter the formula for yellow, e.g., =G1<TODAY()+90
4. Click "add another rule", enter the formula for green, e.g., =G1>=TODAY()+90

If several rules apply, those listed later override the earlier ones.

The result: