Add shortcut keys to Google Drawing

Here's a quick and dirty way to add shortcut keys to Google Drawing. It probably only works in Chrome.

It's a JavaScript snippet that can be run in the context of the Google Drawing page in order to automate clicking on the toolbar buttons.

The keys this code adds are:

• Alt-A: Arrow
• Alt-L: Line
• Alt-B: Rectangle (box)
• Alt-C: Cylinder
• Alt-X: Text box

Here's a bookmarklet with the script: GDraw shortcuts. Drag this hyperlink to your bookmarks bar and click it when you are inside Google Drawing in order to enable the shortcut keys. (Thanks to Peter Coles for his bookmarklet creation tool)

And here's the code, in case you want to extend it with additional shortcut keys.

function newMouseEvent(eventType, x, y) {
    return new MouseEvent(eventType, {
        "view": window,
        "bubbles": true,
        "cancelable": true,
        "screenX": x,
        "screenY": y
    });
}

function myclick(x, y) {
    var el = document.elementFromPoint(x, y);

    el.dispatchEvent(newMouseEvent("mouseover", x, y));
    el.dispatchEvent(newMouseEvent("mousedown", x, y));
    el.dispatchEvent(newMouseEvent("mouseup", x, y));
    el.dispatchEvent(newMouseEvent("click", x, y));
}

function clickLineButton() {
  var r = document.getElementById("lineMenuButton").getBoundingClientRect();
  myclick(r.x+3, r.y+3);

  setTimeout(function() {
    myclick(r.x+3, r.y+50);
  }, 200);
}

function clickArrowButton() {
  var r = document.getElementById("lineMenuButton").getBoundingClientRect();
  myclick(r.x+3, r.y+3);

  setTimeout(function() {
    myclick(r.x+3, r.y+80);
  }, 200);
}

function clickBoxButton() {
  var r = document.getElementById("shapeButton").getBoundingClientRect();
  myclick(r.x+3, r.y+3);

  setTimeout(function() {
    myclick(r.x+3, r.y+40);

    setTimeout(function() {
      myclick(r.x+172, r.y+56);
    }, 200);

  }, 200);
}

function clickCylinderButton() {
  var r = document.getElementById("shapeButton").getBoundingClientRect();
  myclick(r.x+3, r.y+3);

  setTimeout(function() {
    myclick(r.x+3, r.y+40);

    setTimeout(function() {
      myclick(r.x+197, r.y+223);
    }, 200);

  }, 200);
}

function myKeydownHandler(e) {
  /* A key */
  if (e.keyCode == 65 && e.altKey == true) { 
    clickArrowButton();
    e.preventDefault();
  }

  /* L key */
  if (e.keyCode == 76 && e.altKey == true) { 
    clickLineButton();
    e.preventDefault();
  }

  /* B key */
  if (e.keyCode == 66 && e.altKey == true) {
    clickBoxButton();
    e.preventDefault();
  }

  /* C key */
  if (e.keyCode == 67 && e.altKey == true) { 
    clickCylinderButton();
    e.preventDefault();
  }
}

window.addEventListener("keydown", myKeydownHandler, true);

var elements = document.getElementsByTagName("iframe");
for (var i = 0; i < elements.length; i++) {
  if (elements[i].src == "" || elements[i].src == "about:blank") {
    elements[i].contentWindow.addEventListener("keydown", myKeydownHandler, true);
  }
}