fix and add keybinds
This commit is contained in:
raphael
parent
bdff756704
commit
31b952fa09
|
|
@ -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'
|
||||
}
|
||||
|
|
@ -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();
|
||||
$($(".ui-draggable")[0]).css({ top: p.top - 5, left: p.left })
|
||||
var elm = whiteboard.tool == "text" ? $("#"+whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
|
||||
var p = $(elm).position();
|
||||
$(elm).css({ top: p.top - 5, left: p.left })
|
||||
},
|
||||
moveDraggableDown: function () {
|
||||
var p = $($(".ui-draggable")[0]).position();
|
||||
$($(".ui-draggable")[0]).css({ top: p.top + 5, left: p.left })
|
||||
var elm = whiteboard.tool == "text" ? $("#"+whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
|
||||
var p = $(elm).position();
|
||||
$(elm).css({ top: p.top + 5, left: p.left })
|
||||
},
|
||||
moveDraggableLeft: function () {
|
||||
var p = $($(".ui-draggable")[0]).position();
|
||||
$($(".ui-draggable")[0]).css({ top: p.top, left: p.left - 5 })
|
||||
var elm = whiteboard.tool == "text" ? $("#"+whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
|
||||
var p = $(elm).position();
|
||||
$(elm).css({ top: p.top, left: p.left - 5 })
|
||||
},
|
||||
moveDraggableRight: function () {
|
||||
var p = $($(".ui-draggable")[0]).position();
|
||||
$($(".ui-draggable")[0]).css({ top: p.top, left: p.left + 5 })
|
||||
var elm = whiteboard.tool == "text" ? $("#"+whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
|
||||
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(); },
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
Loading…
Reference in New Issue