refacto(front): modularized shortcutFunctions
* Also made them un-reactive when read-only by default
This commit is contained in:
Florent Chehab
parent
7ec4ef0df0
commit
fcdda2c344
134
src/js/main.js
134
src/js/main.js
@ -5,6 +5,7 @@ import keybinds from "./keybinds";
|
|||||||
import Picker from "vanilla-picker";
|
import Picker from "vanilla-picker";
|
||||||
import { dom } from "@fortawesome/fontawesome-svg-core";
|
import { dom } from "@fortawesome/fontawesome-svg-core";
|
||||||
import pdfjsLib from "pdfjs-dist/webpack";
|
import pdfjsLib from "pdfjs-dist/webpack";
|
||||||
|
import shortcutFunctions from "./shortcutFunctions";
|
||||||
|
|
||||||
function main() {
|
function main() {
|
||||||
|
|
||||||
@ -140,136 +141,15 @@ function main() {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
var shortcutFunctions = {
|
|
||||||
clearWhiteboard: function () { whiteboard.clearWhiteboard(); },
|
|
||||||
undoStep: function () { whiteboard.undoWhiteboardClick(); },
|
|
||||||
redoStep: function () { whiteboard.redoWhiteboardClick(); },
|
|
||||||
setTool_mouse: function () { $(".whiteboard-tool[tool=mouse]").click(); },
|
|
||||||
setTool_recSelect: function () { $(".whiteboard-tool[tool=recSelect]").click(); },
|
|
||||||
setTool_pen: function () {
|
|
||||||
$(".whiteboard-tool[tool=pen]").click();
|
|
||||||
whiteboard.redrawMouseCursor();
|
|
||||||
},
|
|
||||||
setTool_line: function () { $(".whiteboard-tool[tool=line]").click(); },
|
|
||||||
setTool_rect: function () { $(".whiteboard-tool[tool=rect]").click(); },
|
|
||||||
setTool_circle: function () { $(".whiteboard-tool[tool=circle]").click(); },
|
|
||||||
setTool_text: function () { $(".whiteboard-tool[tool=text]").click(); },
|
|
||||||
setTool_eraser: function () {
|
|
||||||
$(".whiteboard-tool[tool=eraser]").click();
|
|
||||||
whiteboard.redrawMouseCursor();
|
|
||||||
},
|
|
||||||
thickness_bigger: function () {
|
|
||||||
var thickness = parseInt($("#whiteboardThicknessSlider").val()) + 1;
|
|
||||||
$("#whiteboardThicknessSlider").val(thickness);
|
|
||||||
whiteboard.setStrokeThickness(thickness);
|
|
||||||
whiteboard.redrawMouseCursor();
|
|
||||||
},
|
|
||||||
thickness_smaller: function () {
|
|
||||||
var thickness = parseInt($("#whiteboardThicknessSlider").val()) - 1;
|
|
||||||
$("#whiteboardThicknessSlider").val(thickness);
|
|
||||||
whiteboard.setStrokeThickness(thickness);
|
|
||||||
whiteboard.redrawMouseCursor();
|
|
||||||
},
|
|
||||||
openColorPicker: function () { $("#whiteboardColorpicker").click(); },
|
|
||||||
saveWhiteboardAsImage: function () { $("#saveAsImageBtn").click(); },
|
|
||||||
saveWhiteboardAsJson: function () { $("#saveAsJSONBtn").click(); },
|
|
||||||
uploadWhiteboardToWebDav: function () { $("#uploadWebDavBtn").click(); },
|
|
||||||
uploadJsonToWhiteboard: function () { $("#uploadJsonBtn").click(); },
|
|
||||||
shareWhiteboard: function () { $("#shareWhiteboardBtn").click(); },
|
|
||||||
hideShowControls: function () { $("#minMaxBtn").click(); },
|
|
||||||
|
|
||||||
setDrawColorBlack: function () {
|
|
||||||
whiteboard.setDrawColor("black");
|
|
||||||
whiteboard.redrawMouseCursor();
|
|
||||||
},
|
|
||||||
setDrawColorRed: function () {
|
|
||||||
whiteboard.setDrawColor("red");
|
|
||||||
whiteboard.redrawMouseCursor();
|
|
||||||
},
|
|
||||||
setDrawColorGreen: function () {
|
|
||||||
whiteboard.setDrawColor("green");
|
|
||||||
whiteboard.redrawMouseCursor();
|
|
||||||
},
|
|
||||||
setDrawColorBlue: function () {
|
|
||||||
whiteboard.setDrawColor("blue");
|
|
||||||
whiteboard.redrawMouseCursor();
|
|
||||||
},
|
|
||||||
setDrawColorYellow: function () {
|
|
||||||
whiteboard.setDrawColor("yellow");
|
|
||||||
whiteboard.redrawMouseCursor();
|
|
||||||
},
|
|
||||||
|
|
||||||
toggleLineRecCircle: function () {
|
|
||||||
var activeTool = $(".whiteboard-tool.active").attr("tool");
|
|
||||||
if (activeTool == "line") {
|
|
||||||
$(".whiteboard-tool[tool=rect]").click();
|
|
||||||
} else if (activeTool == "rect") {
|
|
||||||
$(".whiteboard-tool[tool=circle]").click();
|
|
||||||
} else {
|
|
||||||
$(".whiteboard-tool[tool=line]").click();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
togglePenEraser: function () {
|
|
||||||
var activeTool = $(".whiteboard-tool.active").attr("tool");
|
|
||||||
if (activeTool == "pen") {
|
|
||||||
$(".whiteboard-tool[tool=eraser]").click();
|
|
||||||
} else {
|
|
||||||
$(".whiteboard-tool[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 elm = whiteboard.tool == "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
|
|
||||||
var p = $(elm).position();
|
|
||||||
$(elm).css({ top: p.top - 5, left: p.left })
|
|
||||||
},
|
|
||||||
moveDraggableDown: function () {
|
|
||||||
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 elm = whiteboard.tool == "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
|
|
||||||
var p = $(elm).position();
|
|
||||||
$(elm).css({ top: p.top, left: p.left - 5 })
|
|
||||||
},
|
|
||||||
moveDraggableRight: function () {
|
|
||||||
var elm = whiteboard.tool == "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
|
|
||||||
var p = $(elm).position();
|
|
||||||
$(elm).css({ top: p.top, left: p.left + 5 })
|
|
||||||
},
|
|
||||||
dropDraggable: function () {
|
|
||||||
$($(".dragMe")[0]).find('.addToCanvasBtn').click();
|
|
||||||
},
|
|
||||||
addToBackground: function () {
|
|
||||||
$($(".dragMe")[0]).find('.addToBackgroundBtn').click();
|
|
||||||
},
|
|
||||||
cancelAllActions: function () { whiteboard.escKeyAction(); },
|
|
||||||
deleteSelection: function () { whiteboard.delKeyAction(); },
|
|
||||||
}
|
|
||||||
|
|
||||||
//Load keybindings from keybinds.js to given functions
|
//Load keybindings from keybinds.js to given functions
|
||||||
for (var i in keybinds) {
|
Object.entries(keybinds).forEach(([key, functionName]) => {
|
||||||
if (shortcutFunctions[keybinds[i]]) {
|
const associatedShortcutFunction = shortcutFunctions[functionName];
|
||||||
keymage(i, shortcutFunctions[keybinds[i]], { preventDefault: true });
|
if (associatedShortcutFunction) {
|
||||||
|
keymage(key, associatedShortcutFunction, { preventDefault: true });
|
||||||
} else {
|
} else {
|
||||||
console.error("function you want to keybind on key:", i, "named:", keybinds[i], "is not available!")
|
console.error("Function you want to keybind on key:", key, "named:", functionName, "is not available!")
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
|
||||||
// whiteboard clear button
|
// whiteboard clear button
|
||||||
$("#whiteboardTrashBtn").click(function () {
|
$("#whiteboardTrashBtn").click(function () {
|
||||||
|
|||||||
134
src/js/shortcutFunctions.js
Normal file
134
src/js/shortcutFunctions.js
Normal file
@ -0,0 +1,134 @@
|
|||||||
|
import whiteboard from "./whiteboard";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {function} callback
|
||||||
|
* @param {boolean} readOnlySensitive should the shortcut function be active event when the whiteboard is in read-only mode
|
||||||
|
*/
|
||||||
|
function defineShortcut(callback, readOnlySensitive = true) {
|
||||||
|
return () => {
|
||||||
|
if (readOnlySensitive && whiteboard.readOnly) return;
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const shortcutFunctions = {
|
||||||
|
clearWhiteboard: defineShortcut(() => whiteboard.clearWhiteboard()),
|
||||||
|
undoStep: defineShortcut(() => whiteboard.undoWhiteboardClick()),
|
||||||
|
redoStep: defineShortcut(() => whiteboard.redoWhiteboardClick()),
|
||||||
|
setTool_mouse: defineShortcut(() => $(".whiteboard-tool[tool=mouse]").click()),
|
||||||
|
setTool_recSelect: defineShortcut(() => $(".whiteboard-tool[tool=recSelect]").click()),
|
||||||
|
setTool_pen: defineShortcut(() => {
|
||||||
|
$(".whiteboard-tool[tool=pen]").click();
|
||||||
|
whiteboard.redrawMouseCursor();
|
||||||
|
}),
|
||||||
|
setTool_line: defineShortcut(() => $(".whiteboard-tool[tool=line]").click()),
|
||||||
|
setTool_rect: defineShortcut(() => $(".whiteboard-tool[tool=rect]").click()),
|
||||||
|
setTool_circle: defineShortcut(() => $(".whiteboard-tool[tool=circle]").click()),
|
||||||
|
setTool_text: defineShortcut(() => $(".whiteboard-tool[tool=text]").click()),
|
||||||
|
setTool_eraser: defineShortcut(() => {
|
||||||
|
$(".whiteboard-tool[tool=eraser]").click();
|
||||||
|
whiteboard.redrawMouseCursor();
|
||||||
|
}),
|
||||||
|
thickness_bigger: defineShortcut(() => {
|
||||||
|
const thickness = parseInt($("#whiteboardThicknessSlider").val()) + 1;
|
||||||
|
$("#whiteboardThicknessSlider").val(thickness);
|
||||||
|
whiteboard.setStrokeThickness(thickness);
|
||||||
|
whiteboard.redrawMouseCursor();
|
||||||
|
}),
|
||||||
|
thickness_smaller: defineShortcut(() => {
|
||||||
|
const thickness = parseInt($("#whiteboardThicknessSlider").val()) - 1;
|
||||||
|
$("#whiteboardThicknessSlider").val(thickness);
|
||||||
|
whiteboard.setStrokeThickness(thickness);
|
||||||
|
whiteboard.redrawMouseCursor();
|
||||||
|
}),
|
||||||
|
openColorPicker: defineShortcut(() => $("#whiteboardColorpicker").click()),
|
||||||
|
saveWhiteboardAsImage: defineShortcut(() => $("#saveAsImageBtn").click(), false),
|
||||||
|
saveWhiteboardAsJson: defineShortcut(() => $("#saveAsJSONBtn").click(), false),
|
||||||
|
uploadWhiteboardToWebDav: defineShortcut(() => $("#uploadWebDavBtn").click()),
|
||||||
|
uploadJsonToWhiteboard: defineShortcut(() => $("#uploadJsonBtn").click()),
|
||||||
|
shareWhiteboard: defineShortcut(() => $("#shareWhiteboardBtn").click(), false),
|
||||||
|
hideShowControls: defineShortcut(() => $("#minMaxBtn").click(), false),
|
||||||
|
|
||||||
|
setDrawColorBlack: defineShortcut(() => {
|
||||||
|
whiteboard.setDrawColor("black");
|
||||||
|
whiteboard.redrawMouseCursor();
|
||||||
|
}),
|
||||||
|
setDrawColorRed: defineShortcut(() => {
|
||||||
|
whiteboard.setDrawColor("red");
|
||||||
|
whiteboard.redrawMouseCursor();
|
||||||
|
}),
|
||||||
|
setDrawColorGreen: defineShortcut(() => {
|
||||||
|
whiteboard.setDrawColor("green");
|
||||||
|
whiteboard.redrawMouseCursor();
|
||||||
|
}),
|
||||||
|
setDrawColorBlue: defineShortcut(() => {
|
||||||
|
whiteboard.setDrawColor("blue");
|
||||||
|
whiteboard.redrawMouseCursor();
|
||||||
|
}),
|
||||||
|
setDrawColorYellow: defineShortcut(() => {
|
||||||
|
whiteboard.setDrawColor("yellow");
|
||||||
|
whiteboard.redrawMouseCursor();
|
||||||
|
}),
|
||||||
|
toggleLineRecCircle: defineShortcut(() => {
|
||||||
|
const activeTool = $(".whiteboard-tool.active").attr("tool");
|
||||||
|
if (activeTool === "line") {
|
||||||
|
$(".whiteboard-tool[tool=rect]").click();
|
||||||
|
} else if (activeTool === "rect") {
|
||||||
|
$(".whiteboard-tool[tool=circle]").click();
|
||||||
|
} else {
|
||||||
|
$(".whiteboard-tool[tool=line]").click();
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
togglePenEraser: defineShortcut(() => {
|
||||||
|
const activeTool = $(".whiteboard-tool.active").attr("tool");
|
||||||
|
if (activeTool === "pen") {
|
||||||
|
$(".whiteboard-tool[tool=eraser]").click();
|
||||||
|
} else {
|
||||||
|
$(".whiteboard-tool[tool=pen]").click();
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
toggleMainColors: defineShortcut(() => {
|
||||||
|
const 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: defineShortcut(() => {
|
||||||
|
const elm = whiteboard.tool === "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
|
||||||
|
const p = $(elm).position();
|
||||||
|
if (p) $(elm).css({top: p.top - 5, left: p.left})
|
||||||
|
}),
|
||||||
|
moveDraggableDown: defineShortcut(() => {
|
||||||
|
const elm = whiteboard.tool === "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
|
||||||
|
const p = $(elm).position();
|
||||||
|
if (p) $(elm).css({top: p.top + 5, left: p.left})
|
||||||
|
}),
|
||||||
|
moveDraggableLeft: defineShortcut(() => {
|
||||||
|
const elm = whiteboard.tool === "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
|
||||||
|
const p = $(elm).position();
|
||||||
|
if (p) $(elm).css({top: p.top, left: p.left - 5})
|
||||||
|
}),
|
||||||
|
moveDraggableRight: defineShortcut(() => {
|
||||||
|
const elm = whiteboard.tool === "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
|
||||||
|
const p = $(elm).position();
|
||||||
|
if (p) $(elm).css({top: p.top, left: p.left + 5})
|
||||||
|
}),
|
||||||
|
dropDraggable: defineShortcut(() => {
|
||||||
|
$($(".dragMe")[0]).find('.addToCanvasBtn').click();
|
||||||
|
}),
|
||||||
|
addToBackground: defineShortcut(() => {
|
||||||
|
$($(".dragMe")[0]).find('.addToBackgroundBtn').click();
|
||||||
|
}),
|
||||||
|
cancelAllActions: defineShortcut(() => whiteboard.escKeyAction()),
|
||||||
|
deleteSelection: defineShortcut(() => whiteboard.delKeyAction()),
|
||||||
|
}
|
||||||
|
|
||||||
|
export default shortcutFunctions;
|
||||||
Loading…
Reference in New Issue
Block a user