VersaWhiteboard/src/js/shortcutFunctions.js

import whiteboard from "./whiteboard";
import ReadOnlyService from "./services/ReadOnlyService";

/**
 * @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 && ReadOnlyService.readOnlyActive) 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;