From fcdda2c34475e7a3b9a5a0d392894ccdf111d90d Mon Sep 17 00:00:00 2001 From: Florent Chehab Date: Sat, 2 May 2020 15:36:53 +0200 Subject: [PATCH] refacto(front): modularized shortcutFunctions * Also made them un-reactive when read-only by default --- src/js/main.js | 134 ++---------------------------------- src/js/shortcutFunctions.js | 134 ++++++++++++++++++++++++++++++++++++ 2 files changed, 141 insertions(+), 127 deletions(-) create mode 100644 src/js/shortcutFunctions.js diff --git a/src/js/main.js b/src/js/main.js index 4e296fb..6a1a23b 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -5,6 +5,7 @@ import keybinds from "./keybinds"; import Picker from "vanilla-picker"; import { dom } from "@fortawesome/fontawesome-svg-core"; import pdfjsLib from "pdfjs-dist/webpack"; +import shortcutFunctions from "./shortcutFunctions"; 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 - for (var i in keybinds) { - if (shortcutFunctions[keybinds[i]]) { - keymage(i, shortcutFunctions[keybinds[i]], { preventDefault: true }); + Object.entries(keybinds).forEach(([key, functionName]) => { + const associatedShortcutFunction = shortcutFunctions[functionName]; + if (associatedShortcutFunction) { + keymage(key, associatedShortcutFunction, { preventDefault: true }); } 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 $("#whiteboardTrashBtn").click(function () { diff --git a/src/js/shortcutFunctions.js b/src/js/shortcutFunctions.js new file mode 100644 index 0000000..96f4a4d --- /dev/null +++ b/src/js/shortcutFunctions.js @@ -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;