fix and add keybinds

public/js/keybinds.js

@@ -15,7 +15,9 @@ var keybinds = {
     'defmod-l' : 'setTool_line',
     'defmod-r' : 'setTool_rect',
     'defmod-c' : 'setTool_circle',
-    'defmod-d' : 'switchLineRecCircle',
+    'shift-f' : 'toggleLineRecCircle',
+    'shift-p' : 'togglePenEraser',
+    'shift-r' : 'toggleMainColors',
     'defmod-a' : 'setTool_text',
     'defmod-e' : 'setTool_eraser',
     'defmod-up' : 'thickness_bigger',
@@ -28,7 +30,7 @@ var keybinds = {
     'shift-4' : 'setDrawColorRed',
     'defmod-s' : 'saveWhiteboardAsImage',
     'defmod-j' : 'saveWhiteboardAsJson',
-    'defmod-w' : 'uploadWhiteboardToWebDav',
+    'shift-w' : 'uploadWhiteboardToWebDav',
     'shift-j' : 'uploadJsonToWhiteboard',
     'shift-s' : 'shareWhiteboard',
     'tab' : 'hideShowControls',
@@ -37,6 +39,7 @@ var keybinds = {
     'left' : 'moveDraggableLeft',
     'right' : 'moveDraggableRight',
     'enter' : 'dropDraggable',
+    'shift-enter' : 'addToBackground',
     'escape' : 'cancelAllActions',
     'del' : 'deleteSelection'
 }

public/js/main.js

@@ -114,7 +114,7 @@ $(document).ready(function () {
         },
         openColorPicker: function () { $("#whiteboardColorpicker").click(); },
         saveWhiteboardAsImage: function () { $("#saveAsImageBtn").click(); },
-        saveWhiteboardAsJson: function () { $("#saveAsImageBtn").click(); },
+        saveWhiteboardAsJson: function () { $("#saveAsJSONBtn").click(); },
         uploadWhiteboardToWebDav: function () { $("#uploadWebDavBtn").click(); },
         uploadJsonToWhiteboard: function () { $("#uploadJsonBtn").click(); },
         shareWhiteboard: function () { $("#shareWhiteboardBtn").click(); },
@@ -146,7 +146,7 @@ $(document).ready(function () {
             $("#whiteboardColorpicker").css({ "background": "yellow" });
         },
 
-        switchLineRecCircle: function () {
+        toggleLineRecCircle: function () {
             var activeTool = $(".whiteboardTool.active").attr("tool");
             if (activeTool == "line") {
                 $(".whiteboardTool[tool=rect]").click();
@@ -156,25 +156,54 @@ $(document).ready(function () {
                 $(".whiteboardTool[tool=line]").click();
             }
         },
+        togglePenEraser: function () {
+            var activeTool = $(".whiteboardTool.active").attr("tool");
+            if (activeTool == "pen") {
+                $(".whiteboardTool[tool=eraser]").click();
+            } else {
+                $(".whiteboardTool[tool=pen]").click();
+            }
+        },
+        toggleMainColors: function () {
+            var bgColor = $("#whiteboardColorpicker")[0].style.backgroundColor;
+            if (bgColor == "blue") {
+                shortcutFunctions.setDrawColorGreen();
+            } else if (bgColor == "green") {
+                shortcutFunctions.setDrawColorYellow();
+            } else if (bgColor == "yellow") {
+                shortcutFunctions.setDrawColorRed();
+            } else if (bgColor == "red") {
+                shortcutFunctions.setDrawColorBlack();
+            } else {
+                shortcutFunctions.setDrawColorBlue();
+            }
+        },
 
         moveDraggableUp: function () {
-            var p = $($(".ui-draggable")[0]).position();
+            var elm = whiteboard.tool == "text" ? $("#"+whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
-            $($(".ui-draggable")[0]).css({ top: p.top - 5, left: p.left })
+            var p = $(elm).position();
+            $(elm).css({ top: p.top - 5, left: p.left })
         },
         moveDraggableDown: function () {
-            var p = $($(".ui-draggable")[0]).position();
+            var elm = whiteboard.tool == "text" ? $("#"+whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
-            $($(".ui-draggable")[0]).css({ top: p.top + 5, left: p.left })
+            var p = $(elm).position();
+            $(elm).css({ top: p.top + 5, left: p.left })
         },
         moveDraggableLeft: function () {
-            var p = $($(".ui-draggable")[0]).position();
+            var elm = whiteboard.tool == "text" ? $("#"+whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
-            $($(".ui-draggable")[0]).css({ top: p.top, left: p.left - 5 })
+            var p = $(elm).position();
+            $(elm).css({ top: p.top, left: p.left - 5 })
         },
         moveDraggableRight: function () {
-            var p = $($(".ui-draggable")[0]).position();
+            var elm = whiteboard.tool == "text" ? $("#"+whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
-            $($(".ui-draggable")[0]).css({ top: p.top, left: p.left + 5 })
+            var p = $(elm).position();
+            $(elm).css({ top: p.top, left: p.left + 5 })
         },
         dropDraggable: function () {
-            var p = $($(".ui-draggable")[0]).find('.addToCanvasBtn').click();
+            $($(".dragMe")[0]).find('.addToCanvasBtn').click();
+        },
+        addToBackground: function () {
+            $($(".dragMe")[0]).find('.addToBackgroundBtn').click();
         },
         cancelAllActions: function () { whiteboard.escKeyAction(); },
         deleteSelection: function () { whiteboard.delKeyAction(); },

public/js/whiteboard.js

@@ -212,7 +212,7 @@ var whiteboard = {
                 var left = _this.startCoords[0] < currX ? _this.startCoords[0] : currX;
                 var top = _this.startCoords[1] < currY ? _this.startCoords[1] : currY;
                 _this.mouseOverlay.css({ "cursor": "default" });
-                var imgDiv = $('<div style="position:absolute; left:' + left + 'px; top:' + top + 'px; width:' + width + 'px; border: 2px dotted gray; overflow: hidden; height:' + height + 'px;" cursor:move;">' +
+                var imgDiv = $('<div class="dragMe" style="position:absolute; left:' + left + 'px; top:' + top + 'px; width:' + width + 'px; border: 2px dotted gray; overflow: hidden; height:' + height + 'px;" cursor:move;">' +
                     '<canvas style="cursor:move; position:absolute; top:0px; left:0px;" width="' + width + '" height="' + height + '"/>' +
                     '<div style="position:absolute; right:5px; top:3px;">' +
                     '<button draw="1" style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="addToCanvasBtn btn btn-default">Drop</button> ' +
@@ -515,11 +515,11 @@ var whiteboard = {
         }
         _this.imgDragActive = true;
         _this.mouseOverlay.css({ "cursor": "default" });
-        var imgDiv = $('<div style="border: 2px dashed gray; position:absolute; left:200px; top:200px; min-width:160px; min-height:100px; cursor:move;">' +
+        var imgDiv = $('<div class="dragMe" style="border: 2px dashed gray; position:absolute; left:200px; top:200px; min-width:160px; min-height:100px; cursor:move;">' +
             '<img style="width:100%; height:100%;" src="' + url + '">' +
             '<div style="position:absolute; right:5px; top:3px;">' +
             '<button draw="1" style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="addToCanvasBtn btn btn-default">Draw to canvas</button> ' +
-            '<button draw="0" style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="addToCanvasBtn btn btn-default">Add to background</button> ' +
+            '<button draw="0" style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="addToBackgroundBtn btn btn-default">Add to background</button> ' +
             '<button style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="xCanvasBtn btn btn-default">x</button>' +
             '</div>' +
             '<i style="position:absolute; bottom: -4px; right: 2px; font-size: 2em; color: gray; transform: rotate(-45deg);" class="fas fa-sort-down" aria-hidden="true"></i>' +
@@ -532,7 +532,7 @@ var whiteboard = {
                 _this.setTool("text");
             }
         });
-        imgDiv.find(".addToCanvasBtn").click(function () {
+        imgDiv.find(".addToCanvasBtn,.addToBackgroundBtn").click(function () {
             var draw = $(this).attr("draw");
             _this.imgDragActive = false;
             _this.refreshCursorAppearance();