fix and add keybinds

This commit is contained in:
raphael 2020-03-25 14:42:47 +01:00
parent bdff756704
commit 31b952fa09
3 changed files with 49 additions and 17 deletions

View File

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

View File

@ -114,7 +114,7 @@ $(document).ready(function () {
}, },
openColorPicker: function () { $("#whiteboardColorpicker").click(); }, openColorPicker: function () { $("#whiteboardColorpicker").click(); },
saveWhiteboardAsImage: function () { $("#saveAsImageBtn").click(); }, saveWhiteboardAsImage: function () { $("#saveAsImageBtn").click(); },
saveWhiteboardAsJson: function () { $("#saveAsImageBtn").click(); }, saveWhiteboardAsJson: function () { $("#saveAsJSONBtn").click(); },
uploadWhiteboardToWebDav: function () { $("#uploadWebDavBtn").click(); }, uploadWhiteboardToWebDav: function () { $("#uploadWebDavBtn").click(); },
uploadJsonToWhiteboard: function () { $("#uploadJsonBtn").click(); }, uploadJsonToWhiteboard: function () { $("#uploadJsonBtn").click(); },
shareWhiteboard: function () { $("#shareWhiteboardBtn").click(); }, shareWhiteboard: function () { $("#shareWhiteboardBtn").click(); },
@ -146,7 +146,7 @@ $(document).ready(function () {
$("#whiteboardColorpicker").css({ "background": "yellow" }); $("#whiteboardColorpicker").css({ "background": "yellow" });
}, },
switchLineRecCircle: function () { toggleLineRecCircle: function () {
var activeTool = $(".whiteboardTool.active").attr("tool"); var activeTool = $(".whiteboardTool.active").attr("tool");
if (activeTool == "line") { if (activeTool == "line") {
$(".whiteboardTool[tool=rect]").click(); $(".whiteboardTool[tool=rect]").click();
@ -156,25 +156,54 @@ $(document).ready(function () {
$(".whiteboardTool[tool=line]").click(); $(".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 () { 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 () { 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 () { 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 () { 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 () { 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(); }, cancelAllActions: function () { whiteboard.escKeyAction(); },
deleteSelection: function () { whiteboard.delKeyAction(); }, deleteSelection: function () { whiteboard.delKeyAction(); },

View File

@ -212,7 +212,7 @@ var whiteboard = {
var left = _this.startCoords[0] < currX ? _this.startCoords[0] : currX; var left = _this.startCoords[0] < currX ? _this.startCoords[0] : currX;
var top = _this.startCoords[1] < currY ? _this.startCoords[1] : currY; var top = _this.startCoords[1] < currY ? _this.startCoords[1] : currY;
_this.mouseOverlay.css({ "cursor": "default" }); _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 + '"/>' + '<canvas style="cursor:move; position:absolute; top:0px; left:0px;" width="' + width + '" height="' + height + '"/>' +
'<div style="position:absolute; right:5px; top:3px;">' + '<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> ' + '<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.imgDragActive = true;
_this.mouseOverlay.css({ "cursor": "default" }); _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 + '">' + '<img style="width:100%; height:100%;" src="' + url + '">' +
'<div style="position:absolute; right:5px; top:3px;">' + '<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="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>' + '<button style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="xCanvasBtn btn btn-default">x</button>' +
'</div>' + '</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>' + '<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"); _this.setTool("text");
} }
}); });
imgDiv.find(".addToCanvasBtn").click(function () { imgDiv.find(".addToCanvasBtn,.addToBackgroundBtn").click(function () {
var draw = $(this).attr("draw"); var draw = $(this).attr("draw");
_this.imgDragActive = false; _this.imgDragActive = false;
_this.refreshCursorAppearance(); _this.refreshCursorAppearance();