Configurable keyboard shortcuts

README.md

@@ -27,6 +27,16 @@ If you wish to support this project, <a href='https://www.paypal.com/cgi-bin/web
 2. Run   `docker run -d -p 8080:8080 wwwsqldesigner`
 3. Visit http://127.0.0.1:8080
 
+## Pre-defined configurable shortcuts
+- `F2` - Quick save
+- `T` - Add a table
+- `F` - Add a field in the selected table
+- `Space` - edit the selected the table
+- `Space` - edit the selected field
+- `S` - toggle the sidebar
+- `C` - connect an ID to a foreign key
+- `D` - disconnect foreign key from an ID
+
 # News
 
 ## Moved to GitHub

js/config.js

@@ -95,4 +95,20 @@ var CONFIG = {
      * Copy the shown "App key" and paste it here below instead of the null value:
      */
     DROPBOX_KEY: null, // such as: "d6stdscwewhl6sa"
+    SHORTCUTS: {
+        // F2
+        QUICK_SAVE: { CODE: 113 },
+        // T - add a table
+        ADD_TABLE: { CODE: 84 },
+        // F - add a field in table
+        ADD_ROW: { CODE: 70 },
+        // Space - edit the selected the table
+        EDIT_TABLE: { CODE: 32 },
+        // Space - edit the selected field
+        EDIT_ROW: { CODE: 32 },
+        // S - toggle the menu
+        TOGGLE: { CODE: 83 },
+        CONNECT: { CODE: 67 },
+        DISCONNECT: { CODE: 68 },
+    },
 };

js/io.js

@@ -595,7 +595,7 @@ SQL.IO.prototype.importresponse = function (data, code) {
 
 SQL.IO.prototype.press = function (e) {
     switch (e.keyCode) {
-        case 113:
+        case CONFIG.SHORTCUTS.QUICK_SAVE.CODE:
             if (OZ.opera) {
                 e.preventDefault();
             }

js/rowmanager.js

@@ -215,6 +215,23 @@ SQL.RowManager.prototype.press = function (e) {
     } /* not when in form field */
 
     switch (e.keyCode) {
+        case CONFIG.SHORTCUTS.CONNECT.CODE:
+            if (!this.dom.foreignconnect.disabled) {
+                this.foreignconnect(e);
+                OZ.Event.prevent(e);
+            }
+            break;
+        case CONFIG.SHORTCUTS.DISCONNECT.CODE:
+            if (!this.dom.foreigndisconnect.disabled) {
+                this.foreigndisconnect(e);
+                OZ.Event.prevent(e);
+            }
+            break;
+        case CONFIG.SHORTCUTS.EDIT_ROW.CODE:
+            if (e.ctrlKey) return;
+            this.selected.expand();
+            OZ.Event.prevent(e);
+            break;
         case 38:
             this.up();
             OZ.Event.prevent(e);

js/tablemanager.js

@@ -52,6 +52,17 @@ SQL.TableManager = function (owner) {
     OZ.Event.add(document, "keydown", this.press.bind(this));
 
     this.dom.container.parentNode.removeChild(this.dom.container);
+
+    this.mouse = { X: 0, Y: 0 };
+    var _this = this;
+    document.addEventListener(
+        "mousemove",
+        function (mouseMoveEvent) {
+            _this.mouse.X = mouseMoveEvent.pageX;
+            _this.mouse.Y = mouseMoveEvent.pageY;
+        },
+        false
+    );
 };
 
 SQL.TableManager.prototype.addRow = function (e) {
@@ -144,15 +155,13 @@ SQL.TableManager.prototype.click = function (e) {
     var newtable = false;
     if (this.adding) {
         this.adding = false;
+        var scroll = OZ.DOM.scroll();
         OZ.DOM.removeClass("area", "adding");
         this.dom.addtable.value = this.oldvalue;
-        var scroll = OZ.DOM.scroll();
-        var x = e.clientX + scroll[0];
-        var y = e.clientY + scroll[1];
-        newtable = this.owner.addTable(_("newtable"), x, y);
-        var r = newtable.addRow("id", { ai: true });
-        var k = newtable.addKey("PRIMARY", "");
-        k.addRow(r);
+        newtable = this.add({
+            clientX: e.clientX + scroll[0],
+            clientY: e.clientY + scroll[1],
+        });
     }
     this.select(newtable);
     this.owner.rowManager.select(false);
@@ -161,13 +170,25 @@ SQL.TableManager.prototype.click = function (e) {
     }
 };
 
+SQL.TableManager.prototype.add = function (e) {
+    var x = e.clientX;
+    var y = e.clientY;
+    newtable = this.owner.addTable(_("newtable"), x, y);
+    var r = newtable.addRow("id", { ai: true });
+    var k = newtable.addKey("PRIMARY", "");
+    k.addRow(r);
+
+    return newtable;
+};
+
 SQL.TableManager.prototype.preAdd = function (e) {
     /* click add new table */
     if (this.adding) {
         this.adding = false;
         OZ.DOM.removeClass("area", "adding");
         this.dom.addtable.value = this.oldvalue;
     } else {
+        this.select(false);
         this.adding = true;
         OZ.DOM.addClass("area", "adding");
         this.oldvalue = this.dom.addtable.value;
@@ -240,16 +261,45 @@ SQL.TableManager.prototype.press = function (e) {
         return;
     } /* not when in form field */
 
+    switch (e.keyCode) {
+        case CONFIG.SHORTCUTS.ADD_ROW.CODE:
+            if (e.ctrlKey) return;
+            // add row only when 1 table is selected
+            if (this.selection.length == 1) {
+                this.addRow();
+                OZ.Event.prevent(e);
+                return;
+            }
+            break;
+        case CONFIG.SHORTCUTS.ADD_TABLE.CODE:
+            if (e.ctrlKey) return;
+            e.clientX = this.mouse.X;
+            e.clientY = this.mouse.Y;
+            this.select(this.add(e));
+            OZ.Event.prevent(e);
+            break;
+    }
+
     if (this.owner.rowManager.selected) {
         return;
     } /* do not process keypresses if a row is selected */
 
+    switch (e.keyCode) {
+        case CONFIG.SHORTCUTS.EDIT_TABLE.CODE:
+            if (e.ctrlKey) return;
+            if (this.selection.length) {
+                this.edit(e);
+                OZ.Event.prevent(e);
+            }
+            break;
+    }
+
     if (!this.selection.length) {
         return;
     } /* nothing if selection is active */
 
     switch (e.keyCode) {
-        case 46:
+        case 46: // delete
             this.remove();
             OZ.Event.prevent(e);
             break;

js/toggle.js

@@ -4,6 +4,7 @@ SQL.Toggle = function (elm) {
     this._state = null;
     this._elm = elm;
     OZ.Event.add(elm, "click", this._click.bind(this));
+    OZ.Event.add(document, "keydown", this.press.bind(this));
 
     var defaultState = true;
     if (document.location.href.match(/toolbar=hidden/)) {
@@ -26,3 +27,19 @@ SQL.Toggle.prototype._switch = function (state) {
     }
     this._elm.className = this._state ? "on" : "off";
 };
+
+SQL.Toggle.prototype.press = function (e) {
+    var target = OZ.Event.target(e).nodeName.toLowerCase();
+
+    if (target === "textarea" || target === "input") {
+        return;
+    } /* not when in form field */
+
+    switch (e.keyCode) {
+        case CONFIG.SHORTCUTS.TOGGLE.CODE:
+            if (e.ctrlKey) return;
+            this._switch(!this._state);
+            OZ.Event.prevent(e);
+            break;
+    }
+};